/* =====================================================================
   Mnemo — application
   Mobile d'abord ; la barre latérale apparaît à partir de 960 px.
   ===================================================================== */

/* ---------- Coquille ---------- */
.shell { min-height: 100dvh; }
.sidebar { display: none; }
.main { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); width: 100%; min-width: 0; }
/* La barre du haut va d'un bord à l'autre ; le contenu des pages est plafonné et centré. */
.page { max-width: 1600px; margin-left: auto; margin-right: auto; }
.page { padding-top: 8px; animation: page-in 0.32s var(--ease); }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Bandeau mobile au-dessus de la barre du haut (MobileNotice dans app.js) */
/* Reste en haut de l'écran au défilement ; le header se place juste dessous (--notice-h, posé par MobileNotice). */
.m-notice { position: sticky; top: 0; z-index: 31; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: calc(11px + env(safe-area-inset-top)) 6px 11px 16px; background: linear-gradient(90deg, #6c47ff, #9b5cff); color: #fff; font-size: 14px; font-weight: 560; line-height: 1.35; }
.m-notice > .icon { flex: none; width: 20px; height: 20px; }
.m-notice span { flex: 1; min-width: 0; }
.m-notice-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px 0; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.m-notice-x:active { background: rgba(255,255,255,.18); }
@media (min-width: 960px) { .m-notice, .m-notice.dli-band { display: none; } }

.topbar {
  position: sticky; top: var(--notice-h, 0px); z-index: 30;
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 16px; margin: 0 -16px 8px;
  padding-top: var(--topbar-safe, env(safe-area-inset-top)); box-sizing: content-box;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.topbar .brand-sm { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.02em; }
.topbar .spacer { flex: 1; }
.topbar .search-trigger { display: none; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  /* 6 entrées ; Community (« Communauté ») un peu plus large pour que le mot tienne. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--border);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0 4px; border-radius: 10px; color: var(--text-3);
  font-size: 11px; font-weight: 500; letter-spacing: -0.005em;
  transition: color 0.15s;
}
.bottom-nav a.active { color: var(--accent-text); }
.bottom-nav a.active svg { stroke-width: 2.2; }
.bottom-nav .daily-dot { position: relative; }
.bottom-nav .daily-dot::after { content: ''; position: absolute; top: -1px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--flame); border: 2px solid var(--surface); }

@media (min-width: 960px) {
  .shell { display: grid; grid-template-columns: 248px 1fr; }
  .sidebar {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; height: 100dvh; padding: 18px 12px;
    border-right: 1px solid var(--border); background: var(--surface-2);
  }
  .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
  .sidebar .nav-item {
    display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
    border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; font-weight: 450;
    transition: background 0.12s, color 0.12s;
  }
  .sidebar .nav-item:hover { background: var(--surface-hover); color: var(--text); }
  .sidebar .nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 560; box-shadow: none; }
  .sidebar .nav-item.active .icon { color: var(--accent-text); stroke-width: 2.1; }
  .sidebar .nav-item .count { margin-left: auto; font-size: 12px; color: var(--text-3); }
  .sidebar .nav-sep { height: 1px; background: var(--border); margin: 10px 10px; }
  .sidebar .push { flex: 1; }
  .sidebar .me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); }
  .sidebar .me:hover { background: var(--surface-hover); }
  .main { padding: 0 56px 64px; width: 100%; }
  .topbar { margin: 0 -56px 16px; padding: 0 56px; height: 64px; }
  .topbar .brand-sm { display: none; }
  .topbar .search-trigger {
    display: flex; align-items: center; gap: 8px; width: 420px; max-width: 42vw; height: 36px; padding: 0 12px; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--text-3); font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm);
  }
  .topbar .search-trigger .st-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .topbar .search-trigger kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; }
  .bottom-nav { display: none; }
}

/* ---------- Éléments ---------- */
.logo-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px -4px rgba(108, 71, 255, 0.6); display: grid; place-items: center; flex: none; }
.logo-mark svg { width: 15px; height: 15px; }

.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 22px; height: 22px; }
.icon.xl { width: 28px; height: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 520; letter-spacing: -0.01em; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s var(--ease), box-shadow 0.15s, opacity 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand-grad); color: var(--on-accent); box-shadow: 0 1px 2px rgba(76, 52, 200, 0.25), 0 6px 16px -6px rgba(108, 71, 255, 0.55), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 1px 2px rgba(76, 52, 200, 0.25), 0 10px 22px -6px rgba(108, 71, 255, 0.6), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer; position: relative;
  transition: background 0.12s, color 0.12s;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { font-size: 14px; font-weight: 560; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.card-title .icon { color: var(--text-3); }
.card-link { font-size: 13px; color: var(--text-3); display: inline-flex; align-items: center; gap: 2px; }
.card-link:hover { color: var(--text); }
:where(a.card, button.card) { display: block; }
a.card, button.card { text-align: left; transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s var(--ease); cursor: pointer; color: inherit; }
a.card:hover, button.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
button.card { width: 100%; font: inherit; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; letter-spacing: -0.03em; }
.page-head .sub { color: var(--text-2); margin-top: 6px; font-size: 14px; }
@media (min-width: 960px) { .page-head h1 { font-size: 30px; } }
.eyebrow { font-size: 12px; font-weight: 520; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 13px; margin-bottom: 10px; }
.back:hover { color: var(--text); }

.section { margin-top: 36px; }
.section-title { font-size: 13px; font-weight: 560; color: var(--text-2); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }

.grid { display: grid; gap: 12px; }
.grid-2 { display: grid; gap: 12px; }
.grid-3 { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid { gap: 16px; } .grid-2, .grid-3 { gap: 16px; } }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border-radius: 999px; background: var(--bg-sunken); color: var(--text-2);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.chip .icon { width: 13px; height: 13px; }
.chip.accent { background: var(--accent-soft); color: var(--accent-text); }
.chip.success { background: var(--success-soft); color: var(--success); }
.chip.warning { background: var(--warning-soft); color: var(--warning); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.flame { background: var(--flame-soft); color: var(--flame); font-weight: 600; }
.chip.xp { background: var(--xp-soft); color: var(--xp); }
.chip.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.subject-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.subject-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 600; font-size: 13px; letter-spacing: -0.02em; }

.progress { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); transition: width 0.7s var(--ease); }
.progress.thin { height: 4px; }

.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease); }

.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--bg-sunken); color: var(--text-2); font-weight: 560; font-size: 13px; object-fit: cover; }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.xl { width: 88px; height: 88px; font-size: 30px; }
.avatar-stack { display: flex; }
.avatar-stack > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack > *:first-child { margin-left: 0; }

.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.list-row:first-child { border-top: 0; padding-top: 0; }
.list-row:last-child { padding-bottom: 0; }
a.list-row:hover .list-title { color: var(--accent-text); }
.list-title { font-size: 14px; font-weight: 500; }
.list-sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }

.empty { text-align: center; padding: 48px 24px; color: var(--text-2); }
.empty .icon-wrap { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-3); }
.empty h3 { font-size: 16px; color: var(--text); margin-bottom: 4px; }
.empty p { font-size: 14px; max-width: 340px; margin: 0 auto; }

.stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.stat-label { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 13px; font-weight: 520; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none; -webkit-appearance: none;
}
.textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b8b93' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.input.code { font-family: var(--mono); font-size: 24px; letter-spacing: 0.4em; text-align: center; height: 56px; }
.hint { font-size: 12.5px; color: var(--text-3); }
.error-text { font-size: 13px; color: var(--danger); }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg-sunken); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.seg button.on { background: var(--surface); color: var(--accent-text); font-weight: 560; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }

.pick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface);
  text-align: left; cursor: pointer; font: inherit; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pick:hover { background: var(--surface-hover); }
.pick.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.pick .check { margin-left: auto; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: transparent; flex: none; transition: all 0.15s; }
.pick.on .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.switch { position: relative; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background 0.2s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 0.2s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }

.range { width: 100%; accent-color: var(--accent); }

/* ---------- Authentification / onboarding ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 36px; letter-spacing: -0.02em; }
.auth-box h1 { font-size: 26px; letter-spacing: -0.03em; margin-bottom: 8px; }
.auth-box .lead { color: var(--text-2); margin-bottom: 28px; }
.auth-box form { display: flex; flex-direction: column; gap: 16px; }
.auth-foot { margin-top: 24px; font-size: 14px; color: var(--text-2); text-align: center; }
.auth-foot a, .link { color: var(--accent-text); font-weight: 500; }

.onb { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 0 16px; }
.onb-top { display: flex; align-items: center; gap: 12px; height: 64px; padding-top: env(safe-area-inset-top); box-sizing: content-box; }
.onb-progress { flex: 1; height: 4px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.onb-progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 0.4s var(--ease); }
.onb-body { flex: 1; padding: 24px 0; animation: page-in 0.3s var(--ease); }
.onb-body h1 { font-size: 26px; letter-spacing: -0.03em; margin-bottom: 8px; }
.onb-body .lead { color: var(--text-2); margin-bottom: 28px; }
.onb-foot { position: sticky; bottom: 0; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); display: flex; gap: 10px; }

.day-grid { display: grid; gap: 8px; }
.day-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.day-row .d { font-weight: 560; font-size: 14px; }
.day-row .mins { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); min-width: 54px; text-align: right; }

/* ---------- Dashboard ---------- */
.hello { margin: 8px 0 20px; }
.hello h1 { font-size: 24px; letter-spacing: -0.03em; }
.hello p { color: var(--text-2); margin-top: 4px; font-size: 14px; }
@media (min-width: 960px) { .hello h1 { font-size: 28px; } }

.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1100px) {
  .dash { grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
  .dash .span-2 { grid-column: span 2; }
}

.daily-card { position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius-lg); background: var(--hero-grad); color: #fff; box-shadow: var(--shadow-lg); --on-ink: #ffffff; --ink: #3a22b8; }
.daily-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 80% at 100% 0%, rgba(255, 140, 200, 0.35), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(80, 200, 255, 0.18), transparent 60%); pointer-events: none; }
.daily-card > * { position: relative; }
.daily-card .eyebrow { color: color-mix(in srgb, var(--on-ink) 55%, transparent); }
.daily-card h2 { font-size: 24px; letter-spacing: -0.03em; margin: 8px 0 16px; }
.daily-card .meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: color-mix(in srgb, var(--on-ink) 70%, transparent); margin-bottom: 22px; }
.daily-card .meta span { display: inline-flex; align-items: center; gap: 6px; }
.daily-card .btn-start { background: #fff; color: #4b2ee0; height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15px; box-shadow: 0 8px 20px -8px rgba(20, 0, 80, 0.5); }
.daily-card .btn-start:hover { opacity: 0.92; }
.daily-card .done { display: inline-flex; align-items: center; gap: 8px; font-weight: 520; }
.daily-card .streak-mini { position: absolute; top: 22px; right: 22px; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.daily-card .streak-mini .icon { color: var(--flame); fill: var(--flame); stroke: var(--flame); }
.daily-card .week-dots { display: flex; gap: 6px; margin-top: 20px; }
.week-dots .wd { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; color: color-mix(in srgb, var(--on-ink) 45%, transparent); font-weight: 500; }
.week-dots .wd i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--on-ink) 10%, transparent); }
.week-dots .wd i.on { background: linear-gradient(135deg, #ffb03a, var(--flame)); color: #fff; box-shadow: 0 2px 8px -2px rgba(255, 106, 43, 0.7); }
.week-dots .wd i.joker { background: color-mix(in srgb, var(--on-ink) 25%, transparent); }
.week-dots .wd i .icon { width: 12px; height: 12px; stroke-width: 2.6; }

.mastery-big { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.mastery-big .ring-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.mastery-big .ring-wrap .v { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 20px; letter-spacing: -0.03em; }
.subj-bars { display: flex; flex-direction: column; gap: 14px; }
.subj-bar .top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 7px; }
.subj-bar .top .v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 560; }

.prio { font-size: 11.5px; font-weight: 560; padding: 2px 8px; border-radius: 6px; }
.prio.high { background: var(--danger-soft); color: var(--danger); }
.prio.medium { background: var(--warning-soft); color: var(--warning); }
.prio.low { background: var(--bg-sunken); color: var(--text-2); }

.exam-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.exam-row:first-child { border-top: 0; padding-top: 0; }
.exam-days { width: 52px; text-align: center; flex: none; }
.exam-days b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.exam-days small { font-size: 11px; color: var(--text-3); }

.grade { display: flex; align-items: baseline; gap: 4px; }
.grade b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.grade small { color: var(--text-3); font-size: 13px; }

.chart { width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); }
.chart .area { fill: url(#curveFill); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .threshold { stroke: var(--warning); stroke-width: 1; stroke-dasharray: 3 4; }

/* ---------- Cours ---------- */
.subject-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 172px; }
.subject-card .name { font-size: 15.5px; font-weight: 560; letter-spacing: -0.015em; line-height: 1.3; }
.subject-card .meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-3); margin-top: auto; }
.subject-card .m-row { display: flex; align-items: center; gap: 10px; }
.subject-card .m-row .progress { flex: 1; }
.subject-card.soon { opacity: 0.62; }

.week-list { display: flex; flex-direction: column; gap: 8px; }
.week-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; }
.week-num { width: 48px; height: 48px; border-radius: 12px; background: var(--bg-sunken); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.week-num small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 560; }
.week-num b { font-size: 18px; font-weight: 600; margin-top: 2px; }
.week-item .stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-3); margin-top: 6px; flex-wrap: wrap; }
.status { font-size: 12px; font-weight: 520; display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.new { color: var(--text-3); }
.status.review { color: var(--warning); }
.status.mastered { color: var(--success); }

.week-hero { padding: 20px; margin-bottom: 16px; }
.week-hero .row-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.week-hero .row-stats > div { padding: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 20px; padding: 0 16px; border-bottom: 1px solid var(--border); position: sticky; top: calc(56px + var(--topbar-safe, env(safe-area-inset-top)) + var(--notice-h, 0px)); z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--text-3); font-size: 14px; font-weight: 500; cursor: pointer; position: relative; }
.tabs button .n { font-size: 11.5px; color: var(--text-3); background: var(--bg-sunken); padding: 0 6px; border-radius: 6px; }
.tabs button.on { color: var(--text); }
.tabs button.on { color: var(--accent-text); }
.tabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand-grad); }
@media (min-width: 960px) { .tabs { margin: 0 0 24px; padding: 0; top: 64px; } }

/* ---------- Contenu rédigé (résumés, fiches) ---------- */
.prose { font-size: 15.5px; line-height: 1.7; color: var(--text); max-width: 70ch; }
.prose > * + * { margin-top: 0.85em; }
.prose h2 { font-size: 19px; margin-top: 1.8em; letter-spacing: -0.02em; }
.prose h3 { font-size: 16px; margin-top: 1.5em; }
.prose h4 { font-size: 15.5px; margin-top: 1.4em; }
/* « #### » : sous-titre ; « ##### » et plus : étiquette de paragraphe (Intuition, Exemple…). */
.prose h5 { font-size: 15px; margin-top: 1.3em; }
.prose h6 { font-size: 13px; margin-top: 1.4em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); }
.prose h5 + *, .prose h6 + * { margin-top: 0.45em; }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child, .prose h5:first-child, .prose h6:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li > ul, .prose li > ol { margin-top: 0.3em; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; }
.prose li + li { margin-top: 0.3em; }
.prose strong { font-weight: 620; }
.prose blockquote { margin-left: 0; margin-right: 0; padding: 12px 16px; border-radius: var(--radius); background: var(--accent-soft); border: 0; color: var(--text); }
.prose code { font-family: var(--mono); font-size: 0.88em; padding: 1px 6px; border-radius: 5px; background: var(--bg-sunken); }
.prose pre.code { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-sunken); overflow-x: auto; font-size: 13.5px; line-height: 1.5; }
.prose pre.code code { padding: 0; background: none; font-size: inherit; white-space: pre; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.prose th { font-weight: 560; color: var(--text-2); font-size: 13px; }
.prose img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.prose mark { background: var(--warning-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.prose.compact { font-size: 14.5px; line-height: 1.6; }

.concept-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.sheet-card { padding: 20px; }
.sheet-card .kind { margin-bottom: 10px; }
.sheet-card h3 { font-size: 16px; margin-bottom: 12px; }

/* ---------- Quiz ---------- */
.focus-mode { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; animation: page-in 0.25s var(--ease); }
.quiz-top { position: sticky; top: var(--notice-h, 0px); z-index: 2; display: flex; align-items: center; gap: 12px; height: 60px; padding: env(safe-area-inset-top) 16px 0; box-sizing: content-box; max-width: 720px; width: calc(100% - 32px); margin: 0 auto; background: var(--bg); }
.quiz-top .progress { flex: 1; height: 6px; }
.quiz-top .count { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.quiz-body { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 12px 16px 200px; }
.q-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.q-prompt { font-size: 20px; font-weight: 560; letter-spacing: -0.02em; line-height: 1.4; margin-bottom: 24px; }
@media (min-width: 640px) { .q-prompt { font-size: 22px; } }
.q-prompt .katex { font-size: 1.05em; }
.q-image { margin: -8px 0 20px; border-radius: var(--radius); border: 1px solid var(--border); max-width: 100%; }
.options { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 16px;
  border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface);
  font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; color: var(--text);
  box-shadow: var(--shadow-sm); transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.opt:hover:not(:disabled) { border-color: var(--text-3); }
.opt:active:not(:disabled) { transform: scale(0.99); }
.opt .key { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--bg-sunken); font-family: var(--mono); }
.opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.opt.sel .key { background: var(--accent); color: var(--on-accent); }
.multi-hint { margin: -8px 0 4px; }
.options.multi .opt .key { border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.options.multi .opt.sel .key { box-shadow: none; }
.opt.right { border-color: var(--success); background: var(--success-soft); box-shadow: none; }
.opt.right .key { background: var(--success); color: #fff; }
.opt.wrong { border-color: var(--danger); background: var(--danger-soft); box-shadow: none; animation: shake 0.35s; }
.opt.wrong .key { background: var(--danger); color: #fff; }
.opt:disabled { cursor: default; }
.opt.dim { opacity: 0.5; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-grid .opt { justify-content: center; font-weight: 560; min-height: 64px; }
.answer-input { height: 56px; font-size: 18px; border-radius: 14px; }
.cloze-line { font-size: 18px; line-height: 2.4; }
.cloze-line input { display: inline-block; width: 150px; height: 40px; margin: 0 4px; padding: 0 10px; border: 0; border-bottom: 2px solid var(--border-strong); border-radius: 8px 8px 0 0; background: var(--bg-sunken); font: inherit; font-size: 16px; color: var(--text); text-align: center; }
.cloze-line input:focus { outline: none; border-color: var(--accent); }
.cloze-line input.ok { border-color: var(--success); background: var(--success-soft); }
.cloze-line input.ko { border-color: var(--danger); background: var(--danger-soft); }
/* Banque de mots des textes à trous (13/10) */
.cloze-line input.slot:not(.ok):not(.ko) { border-color: var(--accent); background: var(--accent-soft); }
.cloze-line.has-bank input[readonly] { cursor: pointer; caret-color: transparent; }
.cloze-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cloze-chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 560; cursor: pointer; transition: transform .12s, opacity .15s, background .15s; }
.cloze-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.cloze-chip:active:not(:disabled) { transform: scale(.96); }
.cloze-chip.used, .cloze-chip:disabled { opacity: .35; cursor: default; }
.cloze-bank-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); }
.match { display: grid; gap: 10px; }
.match-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.match-row .l { font-weight: 520; font-size: 14.5px; }
.match-row.ok { border-color: var(--success); background: var(--success-soft); }
.match-row.ko { border-color: var(--danger); background: var(--danger-soft); }
@media (min-width: 640px) { .match-row { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
.order-item .pos { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-sunken); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-2); flex: none; }
.order-item .grow { font-size: 15px; }
.order-item.ok { border-color: var(--success); background: var(--success-soft); }
.order-item.ko { border-color: var(--danger); background: var(--danger-soft); }

.feedback {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -12px 32px -12px rgba(0,0,0,.12);
  animation: sheet-up 0.28s var(--ease);
}
.feedback .inner { max-width: 720px; margin: 0 auto; }
.feedback .verdict { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.feedback.ok .verdict { color: var(--success); }
.feedback.ko .verdict { color: var(--danger); }
.feedback .verdict .badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.feedback.ok .verdict .badge { background: var(--success); }
.feedback.ko .verdict .badge { background: var(--danger); }
.feedback .expl { margin: 10px 0 16px; font-size: 14.5px; color: var(--text-2); line-height: 1.55; max-height: 30vh; overflow-y: auto; }
.feedback .correct-ans { font-size: 14px; margin-top: 8px; }
.feedback .correct-ans b { font-weight: 600; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.quiz-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 75%, transparent); }
.quiz-actions .inner { max-width: 720px; margin: 0 auto; display: flex; gap: 10px; }

.result { max-width: 520px; margin: 0 auto; padding: 32px 16px 64px; text-align: center; animation: page-in 0.4s var(--ease); }
.result .score-ring { position: relative; width: 148px; height: 148px; margin: 8px auto 20px; }
.result .score-ring .v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.result .score-ring .v b { font-size: 36px; font-weight: 620; letter-spacing: -0.04em; line-height: 1; }
.result .score-ring .v small { color: var(--text-3); font-size: 13px; margin-top: 4px; }
.result h1 { font-size: 26px; letter-spacing: -0.03em; }
.result .rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; text-align: left; }
.result .reward { padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.result .reward b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.result .reward small { color: var(--text-3); font-size: 12.5px; }
.result .changes { text-align: left; margin-bottom: 20px; }
.delta-up { color: var(--success); font-weight: 560; }
.pop { animation: pop 0.5s var(--ease); }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.flame-big { width: 72px; height: 72px; margin: 0 auto 8px; color: var(--flame); animation: flame 1.6s ease-in-out infinite; }
.flame-big .icon { width: 72px; height: 72px; fill: var(--flame); stroke: var(--flame); }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.06) rotate(2deg); } }

/* ---------- Flashcards ---------- */
.flash-stage { perspective: 1400px; margin: 8px auto 24px; max-width: 560px; }
.flash {
  position: relative; width: 100%; min-height: 300px; cursor: pointer;
  transform-style: preserve-3d; transition: transform 0.55s var(--ease);
}
.flash.flipped { transform: rotateY(180deg); }
.flash .face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 32px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 20px; font-weight: 520; letter-spacing: -0.015em; line-height: 1.45;
}
.flash .face.back { transform: rotateY(180deg); background: var(--surface-2); }
.flash .face .tag { position: absolute; top: 16px; left: 18px; }
.flash .face .tap { position: absolute; bottom: 16px; font-size: 12px; color: var(--text-3); font-weight: 450; }
.rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 560px; margin: 0 auto; }
.rate-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; font-weight: 540; transition: transform 0.1s, background 0.15s; }
.rate-grid button small { font-size: 11px; color: var(--text-3); font-weight: 450; }
.rate-grid button:active { transform: scale(0.97); }
.rate-grid .r0 { color: var(--danger); } .rate-grid .r1 { color: var(--warning); } .rate-grid .r2 { color: var(--success); } .rate-grid .r3 { color: var(--accent-text); }

/* ---------- Exercices ---------- */
.exercise { padding: 20px; }
.exercise .solution { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }

/* ---------- Streak ---------- */
.streak-hero { text-align: center; padding: 28px 20px; }
.streak-hero .n { font-size: 56px; font-weight: 640; letter-spacing: -0.05em; line-height: 1; margin-top: 4px; }
.cal-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.cal-dots i { aspect-ratio: 1; border-radius: 6px; background: var(--bg-sunken); }
.cal-dots i.done { background: linear-gradient(135deg, #ffb03a, var(--flame)); }
.cal-dots i.joker { background: color-mix(in srgb, var(--flame) 35%, var(--bg-sunken)); }
.cal-dots i.is-today { box-shadow: inset 0 0 0 2px var(--text); }
.milestones { display: flex; gap: 8px; flex-wrap: wrap; }
.milestone { flex: 1; min-width: 56px; padding: 10px 6px; border-radius: 12px; text-align: center; background: var(--bg-sunken); color: var(--text-3); font-size: 12px; }
.milestone b { display: block; font-size: 17px; color: var(--text-2); font-weight: 600; }
.milestone.reached { background: linear-gradient(135deg, rgba(255,176,58,.18), var(--flame-soft)); color: var(--flame); }
.milestone.reached b { color: var(--flame); }

/* ---------- Plan ---------- */
.plan-day { padding: 16px 18px; }
.plan-day .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.plan-day .head b { font-size: 15px; font-weight: 580; }
.plan-day .head small { color: var(--text-3); font-size: 12.5px; }
.plan-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.plan-item:first-of-type { border-top: 0; }
.plan-item .time { font-family: var(--mono); font-size: 12px; color: var(--text-3); width: 42px; flex: none; }
.plan-item .bar { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.plan-item .t { font-size: 14px; font-weight: 500; }
.plan-item .s { font-size: 12.5px; color: var(--text-3); }
.plan-item .mins { margin-left: auto; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.plan-scroll { display: grid; gap: 10px; }
@media (min-width: 1100px) { .plan-scroll { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Focus ---------- */
.focus-wrap { max-width: 520px; margin: 0 auto; text-align: center; }
.timer-ring { position: relative; width: min(300px, 78vw); aspect-ratio: 1; margin: 12px auto 28px; }
.timer-ring svg { width: 100%; height: 100%; }
.timer-ring .v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timer-ring .v b { font-size: 58px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; font-family: var(--font); }
.timer-ring .v small { color: var(--text-3); margin-top: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 520; }
.timer-controls { display: flex; justify-content: center; gap: 12px; }
.timer-controls .main-btn { width: 64px; height: 64px; border-radius: 50%; }

/* ---------- Communauté ---------- */
.community { display: grid; gap: 16px; }
@media (min-width: 960px) {
  /* Communauté : la conversation occupe tout l'espace sous la barre du haut,
     à côté de la colonne des salons ; seuls les messages défilent. */
  .main:has(.page-fill) { padding-bottom: 0; }
  .main:has(.page-fill) .topbar { margin-bottom: 16px; }
  .page-fill .chan-group { margin-bottom: 22px; }
  .page-fill { height: calc(100dvh - 80px); display: flex; flex-direction: column; padding: 0 !important; animation: none; }
  .page-fill .community { flex: 1; min-height: 0; grid-template-columns: 250px 1fr; gap: 0; }
  .page-fill .chan-list { overflow-y: auto; padding: 4px 18px 16px 0; border-right: 1px solid var(--border); }
  .chan-head { padding: 0 0 18px 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
  .chan-head h1 { font-size: 22px; letter-spacing: -0.03em; }
  .online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
  .page-fill .chat { min-height: 0; height: 100%; padding: 0 0 16px 28px; }
  .page-fill .chat-head { padding: 4px 0 14px; }
  .page-fill .chat-head h2 { font-size: 18px; }
  .page-fill .chat-msgs { padding: 16px 0 8px; }
  .page-fill .msg { padding: 7px 10px; }
  .page-fill .msg .text { font-size: 15px; }
  .page-fill .chat-input { padding: 6px 0 0; }
  .page-fill .chat-input .textarea { min-height: 48px; height: 48px; padding: 13px 16px; border-radius: 14px; }
  .page-fill .chat-input .btn { height: 48px !important; width: 48px !important; border-radius: 14px; }
  .page-fill .voice-room { margin-left: 28px; }
}
}
.chan-group { margin-bottom: 18px; }
.chan-group h4 { font-size: 11.5px; font-weight: 560; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 0 0 6px 8px; }
.chan { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 8px; color: var(--text-2); font-size: 14px; cursor: pointer; width: 100%; border: 0; background: none; text-align: left; font: inherit; }
.chan:hover { background: var(--surface-hover); color: var(--text); }
.chan.on { background: var(--surface); color: var(--text); font-weight: 520; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.chan .icon { color: var(--text-3); width: 16px; height: 16px; }
.chan .unread { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.voice-members { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 32px; }
.voice-members .vm { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.voice-members .vm .icon { width: 13px; height: 13px; color: var(--text-3); }
.voice-members .speaking .avatar { box-shadow: 0 0 0 2px var(--success); }

.chat { display: flex; flex-direction: column; min-height: calc(100dvh - 56px - 96px - 120px); }
@media (min-width: 960px) { .chat { min-height: 0; height: 100%; } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.chat-head h2 { font-size: 16px; display: flex; align-items: center; gap: 6px; }
/* Téléphone : l'en-tête d'une conversation (retour, nom, Duel, Bloquer) reste collé sous la barre du haut au lieu de
   partir avec les messages. */
@media (max-width: 959px) {
  .chat-head { position: sticky; top: calc(56px + var(--topbar-safe, env(safe-area-inset-top)) + var(--notice-h, 0px)); z-index: 19;
    margin: -8px -16px 0; padding: 8px 16px 12px; background: var(--bg); }
  .chat-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-head > a.row { min-width: 0; }
}
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px 0; display: flex; flex-direction: column; }
.msg { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; position: relative; }
.msg:hover { background: var(--surface-hover); }
.msg.cont { padding-top: 1px; }
.msg.cont .avatar { visibility: hidden; height: 0; }
.msg .who { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.msg .who b { font-weight: 580; }
.msg .who small { font-size: 11.5px; color: var(--text-3); }
.msg .text { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.msg .text .mention { color: var(--accent-text); font-weight: 520; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
.msg .deleted { font-style: italic; color: var(--text-3); font-size: 13.5px; }
.msg .tools { position: absolute; right: 8px; top: 4px; display: none; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; box-shadow: var(--shadow-sm); }
.msg:hover .tools { display: flex; }
/* Écran tactile (pas de survol) : on touche un message pour faire apparaître ses outils (Signaler, Bloquer, Défier). */
@media (hover: none) { .msg:focus-within .tools, .msg:focus .tools { display: flex; } .msg:focus { outline: none; background: var(--surface-hover); } }
.msg .tools .icon-btn { width: 28px; height: 28px; }
.day-sep { text-align: center; font-size: 11.5px; color: var(--text-3); margin: 14px 0 6px; font-weight: 520; }
.chat-input { display: flex; gap: 8px; padding-top: 12px; position: sticky; bottom: 0; background: var(--bg); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .chat-input { position: static; } }
.chat-input .textarea { min-height: 44px; height: 44px; max-height: 140px; resize: none; border-radius: 12px; padding: 11px 14px; }
.typing { font-size: 12px; color: var(--text-3); height: 18px; }

.voice-room { padding: 28px 20px; text-align: center; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; margin: 24px 0; }
.voice-grid .p { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.voice-grid .p .avatar { transition: box-shadow 0.15s; }
.voice-grid .p.speaking .avatar { box-shadow: 0 0 0 3px var(--success); }

/* ---------- Duel ---------- */
.duel-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); margin-bottom: 20px; }
.duel-score .p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.duel-score .p.r { flex-direction: row-reverse; text-align: right; }
.duel-score .p b { font-size: 28px; font-weight: 620; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.duel-score .p .nm { font-size: 13px; color: var(--text-2); }
.duel-score .vs { font-size: 12px; color: var(--text-3); font-weight: 600; }
.duel-score .answered { font-size: 11px; color: var(--success); }
.timer-bar { height: 4px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; margin-bottom: 20px; }
.timer-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; }

/* ---------- Classement ---------- */
.lb-row { display: grid; grid-template-columns: 32px 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); }
.lb-row:first-child { border-top: 0; }
.lb-row.me { background: var(--accent-soft); }
.lb-row .rank { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); text-align: center; }
.lb-row .rank.top { color: var(--text); }
.lb-row .score { font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-row .sub { display: flex; gap: 10px; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 10px; margin-bottom: 16px; }
.podium .pl { text-align: center; padding: 16px 8px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.podium .pl.first { padding-top: 24px; }
.podium .pl .avatar { margin: 0 auto 8px; }
.podium .pl .nm { font-size: 13.5px; font-weight: 560; }
.podium .pl .pts { font-size: 12px; color: var(--text-3); }
.podium .medal { font-size: 11px; font-weight: 600; margin-bottom: 8px; color: var(--text-3); }

/* ---------- Profil ---------- */
.profile-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 24px; }
.profile-head h1 { font-size: 24px; letter-spacing: -0.03em; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 16px; }
.stat .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 12px; background: var(--bg-sunken); color: var(--text-2); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge-item { padding: 16px 14px; text-align: center; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.badge-item .medal-ico { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.badge-item b { display: block; font-size: 13.5px; font-weight: 560; }
.badge-item small { font-size: 12px; color: var(--text-3); }
.badge-item.locked { opacity: 0.5; }
.badge-item.locked .medal-ico { background: var(--bg-sunken); color: var(--text-3); }

/* ---------- Réglages ---------- */
.settings-group { margin-bottom: 28px; }
.settings-group > h2 { font-size: 13px; font-weight: 560; color: var(--text-2); margin: 0 0 10px 4px; }
.setting { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border); }
.setting:first-child { border-top: 0; }
.setting .t { font-size: 14.5px; font-weight: 500; }
.setting .s { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.plan-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .plan-cards { grid-template-columns: 1fr 1fr; } }
.plan-card { padding: 20px; }
.plan-card ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.plan-card li { display: flex; gap: 8px; align-items: flex-start; }
.plan-card li .icon { color: var(--success); width: 16px; height: 16px; margin-top: 2px; }
.plan-card.premium { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Abonnement (views/billing.js) : trois offres côte à côte, bouton en bas de chaque carte. */
@media (min-width: 900px) { .bill-cards { grid-template-columns: repeat(3, 1fr); } }
.bill-cards .plan-card { display: flex; flex-direction: column; }
.bill-cards .plan-card ul { flex: 1; margin-bottom: 16px; }
.bill-cards .plan-card .btn { width: 100%; justify-content: center; }
.bill-cards .plan-card:not(.bill-highlight).premium { box-shadow: none; }
.bill-highlight { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.bill-price { margin-top: 6px; } .bill-price b { font-size: 22px; } .bill-price span { color: var(--text-2, inherit); opacity: .7; margin-left: 2px; }
.bill-interval { margin-bottom: 14px; width: max-content; } .bill-interval button { display: inline-flex; align-items: center; gap: 6px; }
.bill-status { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }

/* ---------- Recouvrements ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(9, 9, 11, 0.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade 0.18s; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .overlay { align-items: flex-start; padding-top: 12vh; } }
.modal { width: 100%; max-width: 560px; max-height: 86dvh; overflow-y: auto; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg); animation: sheet-up 0.28s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 640px) { .modal { border-radius: 18px; animation: modal-in 0.22s var(--ease); border: 1px solid var(--border); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 18px 20px 22px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.search-box { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.search-box input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.search-results { padding: 8px 10px 14px; max-height: 64dvh; overflow-y: auto; }
.search-group h4 { font-size: 11.5px; font-weight: 560; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 14px 10px 4px; }
.search-hit { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.search-hit:hover, .search-hit.on { background: var(--surface-hover); }
.search-hit .x { font-size: 12.5px; color: var(--text-3); margin-top: 2px; line-height: 1.45; }

.notif-panel { position: fixed; z-index: 85; top: calc(60px + env(safe-area-inset-top)); right: 12px; left: 12px; max-width: 380px; margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); animation: modal-in 0.2s var(--ease); max-height: 70dvh; overflow-y: auto; }
.notif-panel .head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.notif-panel .head b { font-size: 14px; }
.notif { display: flex; gap: 12px; padding: 11px 16px; font-size: 13.5px; border-top: 1px solid var(--border); cursor: pointer; }
.notif:hover { background: var(--surface-hover); }
.notif.unread { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.notif .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--bg-sunken); color: var(--text-2); }
.notif time { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.toasts { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 420px; }
@media (min-width: 960px) { .toasts { bottom: 28px; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: #1d1838; color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toast-in 0.3s var(--ease); }
.toast.error { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

.celebrate { position: fixed; inset: 0; z-index: 120; pointer-events: none; }

.skeleton { background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--surface-hover) 50%, var(--bg-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-load { display: grid; place-items: center; min-height: 50vh; color: var(--text-3); }

.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-size: 14px; margin-bottom: 16px; }
.banner .icon { color: var(--accent-text); }
.banner.warn { background: var(--warning-soft); }
.banner.warn .icon { color: var(--warning); }

.phase { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; }
.phase .n { width: 36px; height: 36px; border-radius: 11px; background: var(--bg-sunken); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.phase.done .n { background: var(--success); color: #fff; }
.phase.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.phase.current .n { background: var(--accent); color: var(--on-accent); }

/* Recherche : icône seule sur mobile, champ complet sur ordinateur. */
@media (min-width: 960px) { .m-only { display: none !important; } }

/* Notions cliquables, surlignage */
.concept-chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; transition: background .15s; }
.concept-chip:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.prose mark.hl { background: color-mix(in srgb, var(--warning) 28%, transparent); padding: 1px 2px; border-radius: 3px; }
.hl-pop { position: fixed; z-index: 90; transform: translate(-50%, calc(-100% - 10px)); box-shadow: var(--shadow-lg); }
.hl-pop.below { transform: translate(-50%, 10px); }
/* .btn:active remplaçait ce transform : le bouton sautait sous le curseur et le clic ne partait pas. */
.hl-pop:active { transform: translate(-50%, calc(-100% - 10px)) scale(.98); }
.hl-pop.below:active { transform: translate(-50%, 10px) scale(.98); }

/* Examen blanc : navigation entre questions */
.exam-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.exam-nav button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 560; color: var(--text-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.exam-nav button.done { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.exam-nav button.on { border-color: var(--text); color: var(--text); box-shadow: 0 0 0 2px var(--border); }

/* Page matière : préparation, carte des notions, frise */
.ready-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.ready-facts span::before { content: '·'; margin-right: 8px; color: var(--text-3); }
.ready-facts span:first-child::before { content: none; margin: 0; }
.map-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.map-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .map-row { grid-template-columns: 150px 1fr; align-items: start; } }
.map-week { display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 13px; padding-top: 6px; }
.map-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.map-cell { border: 0; border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 520; cursor: pointer; text-align: left; transition: transform .12s, box-shadow .15s; }
.map-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.map-cell .num { opacity: .7; font-weight: 450; }
.map-cell.s-mastered { background: var(--success-soft); color: var(--success); }
.map-cell.s-fragile { background: var(--warning-soft); color: var(--warning); }
.map-cell.s-weak { background: var(--danger-soft); color: var(--danger); }
.map-cell.s-unseen { background: var(--bg-sunken); color: var(--text-3); }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border-strong); border-radius: 2px; }
.tl-item { position: relative; margin-bottom: 8px; }
.tl-dot { position: absolute; left: -21px; top: 17px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.tl-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--text); }
.tl-head:hover { border-color: var(--border-strong); }
.tl-date { font-weight: 620; min-width: 64px; }
.tl-body { padding: 10px 14px 4px; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.tl-body b { color: var(--text); font-weight: 580; margin-right: 4px; }

/* Question du jour */
.qotd-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--text); }
.qotd-opt:hover:not(:disabled) { border-color: var(--text-3); }
.qotd-opt:disabled { cursor: default; }
.qotd-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bg-sunken); transition: width .6s var(--ease); }
.qotd-opt.right { border-color: var(--success); } .qotd-opt.right .qotd-fill { background: var(--success-soft); }
.qotd-opt.wrong { border-color: var(--danger); } .qotd-opt.wrong .qotd-fill { background: var(--danger-soft); }

/* Ambiances du mode Focus */
.amb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.amb { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.amb:hover { border-color: var(--border-strong); }
.amb.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }

/* Communauté : Battle Royale, messages privés, groupes */
.br-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .15s; }
.br-card:hover { border-color: var(--border-strong); }
.chan.dm-item { height: auto; padding: 8px; gap: 10px; }
.chan .unread { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.bubble-row { display: flex; margin: 3px 0; }
.bubble-row.mine { justify-content: flex-end; }
.bubble { max-width: min(520px, 78%); padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-row.mine .bubble { border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--on-ink); border-color: transparent; }
.bubble-time { display: block; font-size: 10.5px; opacity: .55; margin-top: 3px; text-align: right; }
.bubble.duel { background: var(--accent-soft); color: var(--text); border-color: transparent; }
.bubble-row.mine .bubble.duel { background: var(--accent-soft); color: var(--text); }
.group-view { overflow: hidden; }
.group-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-right: 4px; }
.group-chat { padding: 10px 14px; }
.chat.embedded { min-height: 0; height: 360px; padding: 0 !important; }
.chat.embedded .chat-input { position: static; }

/* Battle Royale */
.br-lives { display: inline-flex; gap: 2px; font-size: 13px; }
.br-lives i { font-style: normal; color: var(--border-strong); }
.br-lives i.on { color: var(--danger); }
.br-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 22px 0; }
.br-players .p { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }
.br-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.br-pl { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); }
.br-pl.out { opacity: .35; filter: grayscale(1); }

/* Sous-pages de la Communauté dans la barre latérale */
.sub-nav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--border); }
.sidebar .nav-item.sub { height: 30px; font-size: 13.5px; }
@media (max-width: 959px) { .sub-nav { display: none; } }

/* Carnet d'erreurs groupé par matière */
.mis-subject { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mis-subject h2 { font-size: 17px; letter-spacing: -0.02em; }
.mis-week { padding: 8px 18px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); border-top: 1px solid var(--border); }
.mis-week:first-child { border-top: 0; }
.mis-item + .mis-item { border-top: 1px solid var(--border); }
.mis-head { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 14px 18px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.mis-head:hover { background: var(--surface-hover); }
.mis-body { padding: 0 18px 16px; font-size: 14px; }

/* ---------- Accueil ---------- */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 22px; }
.home-head h1 { font-size: 26px; letter-spacing: -0.03em; }
.home-head p { color: var(--text-2); margin-top: 6px; font-size: 15px; }
@media (min-width: 960px) { .home-head h1 { font-size: 30px; } }
.kpi { display: flex; align-items: baseline; gap: 6px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 12.5px; color: var(--text-2); align-items: center; }
.kpi b { font-size: 17px; color: var(--text); letter-spacing: -0.02em; }
.kpi:hover { border-color: var(--border-strong); }
.kpi-flame { color: var(--flame); fill: var(--flame); width: 16px; height: 16px; }
.home-grid { display: grid; gap: 12px; }
@media (min-width: 1000px) { .home-grid { grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; } }
.today { padding: 22px; }
.today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.step a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, background .15s; }
.step a:hover { border-color: var(--border-strong); }
.step-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--bg-sunken); color: var(--text-2); font-weight: 600; font-size: 13px; }
.step-t { display: block; font-weight: 560; font-size: 15px; letter-spacing: -0.01em; }
.step-s { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-m { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.step.next a { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step.next .step-n { background: var(--accent); color: var(--on-accent); }
.step.done a { background: var(--surface-2); }
.step.done .step-n { background: var(--success); color: #fff; }
.step.done .step-t { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.exam-card:hover { border-color: var(--border-strong); }
.home-subjects { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.subj-tile { padding: 16px; }
.home-grid > * { min-width: 0; }

/* ---------- Ambiance couleur ---------- */
/* Fond : un léger halo coloré en haut de page, très discret. */
body { background:
  radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
  radial-gradient(900px 400px at -10% 0%, color-mix(in srgb, var(--pink) 6%, transparent), transparent 70%),
  var(--bg); background-attachment: fixed; }
.sidebar { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); }
/* Carte « Aujourd'hui » de l'accueil : la prochaine étape en couleur signature. */
.today { position: relative; overflow: hidden; }
.today::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-grad); }
.step.next a { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); }
.step.next .step-n { background: var(--brand-grad); box-shadow: 0 4px 12px -4px rgba(108, 71, 255, 0.7); }
.kpi-flame { filter: drop-shadow(0 2px 6px rgba(255, 106, 43, 0.45)); }
.stat-value { background: none; }
.result .reward b[style*="accent"] { color: var(--xp) !important; }
.opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.opt.sel .key, .exam-nav button.done { background: var(--brand-grad); color: #fff; }
.flash .face.front { background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--accent) 5%, var(--surface))); }

/* ---------- Accueil (maquette « ascension ») ---------- */
.home3 { --glass: color-mix(in srgb, var(--surface) 82%, transparent); }
.h3-hero { position: relative; display: grid; grid-template-columns: 1fr; align-items: end; gap: 12px; margin: 6px 0 22px; min-height: 150px; }
@media (min-width: 900px) { .h3-hero { grid-template-columns: 1fr 1fr; min-height: 190px; } }
.h3-hello { font-size: 17px; color: var(--text-2); }
.h3-greet h1 { font-size: 40px; letter-spacing: -0.04em; line-height: 1.1; margin: 4px 0 8px; font-weight: 680; }
@media (min-width: 960px) { .h3-greet h1 { font-size: 50px; } }
.h3-wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out 1; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.h3-sub { font-size: 16px; color: var(--text-2); }
.h3-report { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 560; color: var(--accent-text); }
.h3-mountain { position: relative; height: 190px; display: none; }
@media (min-width: 900px) { .h3-mountain { display: block; } }
.h3-svg { position: absolute; inset: auto 0 -6px 0; width: 100%; height: 100%; }
.h3-path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: climb 2.2s var(--ease) .3s forwards; }
@keyframes climb { to { stroke-dashoffset: 0; } }
.h3-date { position: absolute; right: 0; top: 46px; font-size: 13.5px; color: var(--text-2); }
.h3-flag-label { position: absolute; left: calc(52% + 30px); top: -6px; display: flex; flex-direction: column; line-height: 1.35; z-index: 1; }
.h3-flag-label small { font-size: 12px; color: var(--text-3); }
.h3-flag-label b { font-size: 15px; font-weight: 600; }
.h3-flag-label span { font-size: 13px; color: var(--text-2); }

.h3-grid { display: grid; gap: 16px; }
@media (min-width: 1000px) { .h3-grid { grid-template-columns: 1.85fr 1fr; } }
.h3-grid > * { min-width: 0; }

.h3-daily { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 28px; border-radius: 20px;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--glass);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: var(--shadow); }
@media (min-width: 760px) { .h3-daily { grid-template-columns: 1.1fr 1fr; min-height: 330px; } }
.h3-daily-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; z-index: 1; }
.h3-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.h3-daily h2 { font-size: 30px; letter-spacing: -0.035em; line-height: 1.12; margin: 22px 0 12px; font-weight: 680; }
@media (min-width: 960px) { .h3-daily h2 { font-size: 38px; } }
.h3-daily p { color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 380px; }
.h3-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; height: 56px; padding: 0 34px; min-width: min(100%, 360px);
  border: 0; border-radius: 14px; background: var(--brand-grad); color: #fff; font: inherit; font-size: 16.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(108, 71, 255, 0.7), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s var(--ease), filter .15s; }
.h3-cta:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.h3-cta:disabled { opacity: .5; cursor: not-allowed; }

.h3-stack { position: relative; min-height: 290px; display: none; perspective: 1200px; }
@media (min-width: 760px) { .h3-stack { display: block; } }
.h3-qcard { position: absolute; left: 50%; top: 50%; width: min(290px, 92%); height: 300px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); box-shadow: 0 20px 50px -20px rgba(40, 20, 120, .45); }
.h3-qcard.back2 { transform: translate(-58%, -50%) rotate(-16deg); opacity: .45; }
.h3-qcard.back1 { transform: translate(-54%, -50%) rotate(-10deg); opacity: .7; }
.h3-qcard.front { transform: translate(-46%, -50%) rotate(-5deg); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; animation: cardIn .8s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translate(-46%, -42%) rotate(-2deg); } }
.h3-count { position: absolute; right: 18px; top: 16px; font-size: 12.5px; color: var(--text-3); }
.h3-q { font-size: 15px; font-weight: 560; line-height: 1.35; margin: 6px 26px 8px 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.h3-opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border-strong); font-size: 13px; background: color-mix(in srgb, var(--surface) 70%, transparent); white-space: nowrap; overflow: hidden; }
.h3-opt > span:first-child { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 600; }

.h3-side { padding: 22px; border-radius: 20px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.h3-side-head { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 16px; }
.h3-side-head .icon:first-child { color: var(--text-2); }
.h3-side-head .icon:last-child { margin-left: auto; }
.h3-exam { display: block; padding: 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.h3-exam b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.h3-days { padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: 14px; white-space: nowrap; }
.h3-steps-title { font-size: 14px; color: var(--text-2); margin: 20px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.h3-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.h3-steps a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 9px; font-size: 14.5px; }
.h3-steps a:hover { background: var(--surface-hover); }
.h3-check { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.6px solid var(--border-strong); color: #fff; }
.h3-steps a.done .h3-check { background: var(--brand-grad); border-color: transparent; }
.h3-steps a.done .grow { color: var(--text-2); }

.h3-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.h3-section-head h3 { font-size: 17px; letter-spacing: -0.02em; }
.h3-section-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--accent-text); }
.h3-subjects { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.h3-subj { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s var(--ease); }
.h3-subj:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-2px); }
.h3-subj-name { font-size: 14px; font-weight: 560; line-height: 1.25; }
.h3-subj b { font-size: 17px; }
.h3-bar { height: 7px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; margin: 10px 0 12px; }
.h3-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); transition: width .8s var(--ease); }

/* L'accueil occupe toute la largeur ; ses grilles s'étirent avec l'écran. */
@media (min-width: 1000px) { .h3-grid { grid-template-columns: minmax(0, 1.9fr) minmax(340px, 1fr); } }
@media (min-width: 1300px) { .h3-subjects { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Espace admin */
.adm-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .adm-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.adm-tiles .stat-value { font-size: 24px; }
.adm-tiles .stat-label .icon { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.adm-click { cursor: pointer; }
.adm-click:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.adm-bars { display: grid; gap: 10px; }
.adm-bar-row { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto; align-items: center; gap: 12px; font-size: 13.5px; }
.adm-bar-track { height: 10px; border-radius: 5px; background: var(--bg-sunken); overflow: hidden; }
.adm-bar { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.adm-bar-val { min-width: 74px; text-align: right; font-weight: 540; }
.adm-bar-val small { color: var(--text-3); font-weight: 400; margin-left: 6px; font-size: 12px; }
.adm-cols { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 120px; border-bottom: 1px solid var(--border); padding-top: 18px; }
.adm-cols-max { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--text-3); }
.adm-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.adm-col-bar { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.85; }
.adm-col-bar.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent-soft); }
.adm-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.12)), inset 0 0 0 1px var(--border); font-size: 12px; color: var(--text-2); z-index: 2; pointer-events: none; }
.adm-tip.end { left: auto; right: 0; transform: none; }
.adm-tip.start { left: 0; transform: none; }
.adm-tip b { color: var(--text); }
.adm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adm-search { position: relative; flex: 1 1 220px; }
.adm-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.adm-search .input { padding-left: 36px; }
.adm-filter { width: auto; flex: 0 1 auto; }
@media (max-width: 640px) { .adm-filter { flex: 1 1 calc(50% - 4px); } }
.adm-user { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: none; color: inherit; font: inherit; cursor: pointer; }
.adm-user:first-child { border-top: 0; }
.adm-user:hover { background: var(--bg-sunken); }
.adm-user-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; }
.adm-user-meta .chip .subject-dot { width: 7px; height: 7px; }
.adm-online { margin-bottom: 16px; }
.adm-online-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; }
.adm-online-head .btn { margin-left: auto; }
.adm-online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.adm-online-dot.off { background: var(--text-3); box-shadow: none; }
.adm-online-head + .adm-user { border-top: 1px solid var(--border); }
.adm-online-av { position: relative; display: inline-flex; flex: none; }
.adm-online-av i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }
.adm-online-av i.off { background: var(--text-3); }
@media (max-width: 759px) { .adm-user-meta .d-col { display: none; } .adm-user { align-items: flex-start; } }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-log-list { max-height: 360px; overflow-y: auto; }
.adm-log-row { display: grid; grid-template-columns: 210px 170px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 12.5px; }
.adm-log-row:first-child { border-top: 0; }
.adm-log-row .chip { justify-self: start; }
.adm-log-dev { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.adm-log-dev .icon { flex: none; }
@media (max-width: 720px) {
  .adm-log-row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .adm-log-row .chip { grid-column: 2; grid-row: 1; justify-self: end; }
  .adm-log-ip { justify-self: end; }
}

/* Page Cours : cartes illustrées (toujours sombres, comme sur la maquette) */

.courses-title { font-size: 34px; letter-spacing: -0.035em; margin-top: 10px; }
.courses-lead { color: var(--text-2); font-size: 16px; margin-top: 6px; }
@media (min-width: 960px) { .courses-title { font-size: 44px; } .courses-lead { font-size: 17px; } }
.courses-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 16px; }
.courses-order { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; color: var(--text); }
.courses-order select { appearance: none; -webkit-appearance: none; border: 0; background: none; color: inherit; font: inherit; padding-right: 4px; cursor: pointer; }
.courses-order select:focus { outline: none; }
.courses-order .icon { color: var(--text-2); pointer-events: none; }
.courses-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .courses-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.course-card { position: relative; display: block; min-height: 268px; border-radius: 14px; overflow: hidden; color: #f4f2ff; text-decoration: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), #15122a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.15s, box-shadow 0.15s; }
.course-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 30px rgba(20, 12, 60, 0.25); }
.course-art { position: absolute; inset: 0; background: var(--art) right center / cover no-repeat; }
.course-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #15122a 0%, rgba(21, 18, 42, 0.85) 38%, rgba(21, 18, 42, 0.1) 75%), linear-gradient(0deg, rgba(21, 18, 42, 0.9) 0%, transparent 45%); }
.course-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 268px; padding: 22px 20px 20px; }
.course-body h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; max-width: 82%; }
.course-body p { font-size: 15px; line-height: 1.5; color: rgba(236, 233, 255, 0.72); margin-top: 6px; max-width: 78%; }
.course-foot { display: flex; align-items: flex-end; gap: 16px; margin-top: 22px; }
.course-pct { font-size: 14px; color: rgba(236, 233, 255, 0.72); }
.course-pct b { font-size: 19px; font-weight: 600; color: #fff; margin-right: 2px; }
.course-line { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 14px; color: rgba(236, 233, 255, 0.72); white-space: nowrap; }
.course-track { flex: 1; max-width: 205px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.course-track span { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.course-go { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: #fff; }
@media (min-width: 960px) {
  /* Sur ordinateur, la page Cours tient exactement dans l'écran : pas de défilement,
     les cartes se partagent la hauteur restante. */
  body:has(.courses-fit) { overflow: hidden; }
  .main:has(.courses-fit) { padding-bottom: 0; }
  .courses-fit { height: calc(100dvh - 80px); display: flex; flex-direction: column; padding-bottom: 32px; animation: none; }
  .courses-fit .courses-grid { flex: 1; min-height: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .courses-fit .course-card, .courses-fit .course-body { min-height: 0; height: 100%; }
  .courses-fit .course-body { padding-top: 16px; }
  .courses-fit .courses-bar { margin: 22px 0 16px; }
}
@media (min-width: 960px) and (max-width: 1199px) { .courses-fit .course-body p { display: none; } }
@media (min-width: 1200px) { .courses-fit .courses-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) and (max-height: 760px) { .courses-fit .course-body p { display: none; } .courses-fit .courses-lead { display: none; } }
@media (min-width: 960px) {
  .courses-fit .courses-bar { flex-wrap: nowrap; }
  .courses-fit .courses-order { flex: none; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .courses-fit .course-body { padding: 12px 16px 14px; }
  .courses-fit .course-body h2 { font-size: 16.5px; max-width: 100%; }
  .courses-fit .course-foot { margin-top: 10px; }
  .courses-fit .course-go { width: 38px; height: 38px; }
}
@media (min-width: 960px) and (max-width: 1199px) and (max-height: 900px) { .courses-fit .courses-lead { display: none; } .courses-fit .courses-bar { margin-top: 16px; } }
@media (min-width: 960px) and (max-height: 820px) { .courses-fit .courses-lead { display: none; } .courses-fit .courses-bar { margin-top: 16px; } }
@media (min-width: 960px) and (max-height: 680px) {
  .courses-fit .courses-title { font-size: 32px; }
  .courses-fit .courses-bar { margin: 12px 0 12px; }
  .courses-fit .course-body { padding: 10px 16px 12px; }
  .courses-fit .course-body h2 { font-size: 15px; }
  .courses-fit .course-foot { margin-top: 6px; }
  .courses-fit .course-pct b { font-size: 16px; }
  .courses-fit .course-go { width: 34px; height: 34px; }
}
@media (min-width: 1200px) and (max-height: 820px) {
  .courses-fit .course-body { padding-top: 12px; }
  .courses-fit .course-body h2 { font-size: 17.5px; max-width: 92%; }
  .courses-fit .course-body p { font-size: 14px; max-width: 92%; margin-top: 4px; }
  .courses-fit .course-foot { margin-top: 14px; }
}
.courses-fit .courses-bar, .courses-bar { justify-content: flex-end; }

/* Accueil : montagne illustrée (une version par thème), fondue dans la page */
:root { --mt-img: url(/assets/img/home/mountain-light.webp); --mt-top: -12px; --mt-opacity: .9; }
:root[data-theme="dark"] { --mt-img: url(/assets/img/home/mountain-dark.webp); --mt-top: -40px; --mt-opacity: .85; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mt-img: url(/assets/img/home/mountain-dark.webp); --mt-top: -40px; --mt-opacity: .85; } }
.h3-mountain { overflow: visible; }
.h3-art { position: absolute; left: 50%; top: var(--mt-top); width: 640px; aspect-ratio: 3 / 2; transform: translateX(-46%); pointer-events: none; z-index: 0;
  background: var(--mt-img) center / cover no-repeat; opacity: var(--mt-opacity);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 46% 34%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 50% 40% at 46% 34%, #000 30%, transparent 100%); }
.h3-flag { position: absolute; left: calc(50% - 3px); top: 52px; width: 22px; height: 32px; z-index: 1; filter: drop-shadow(0 0 6px rgba(180, 160, 255, .7)); }
.h3-flag-label { left: calc(50% + 30px); top: 10px; }
.h3-date { z-index: 1; }
.h3-grid { position: relative; z-index: 1; }
/* Carte de question : le texte ne déborde plus */
.h3-qcard.front { height: auto; min-height: 300px; }
.h3-q { flex: none; -webkit-line-clamp: 3; }
.h3-opt > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Étapes et matières plus lisibles */
.h3-check { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
.h3-bar { background: color-mix(in srgb, var(--text) 9%, transparent); }
/* Page Cours : titre et description sur la même ligne que les filtres */
.courses-bar { align-items: flex-end; justify-content: space-between; margin-top: 8px; }
.courses-head { min-width: 0; }
.courses-head .courses-title { margin-top: 0; }
@media (min-width: 960px) {
  .courses-fit .courses-bar { margin: 8px 0 18px; justify-content: space-between; }
  .courses-fit .courses-head { flex: 1; }
  .courses-fit .courses-lead { display: block; }
}
@media (min-width: 960px) and (max-width: 1299px) { .courses-fit .courses-lead { display: none; } }
.courses-bar { margin-bottom: 28px; }
@media (min-width: 960px) { .courses-fit .courses-bar { margin-bottom: 32px; } }
:root { --mt-top: -24px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mt-top: -24px; } }
:root[data-theme="light"] { --mt-top: -24px; }
.h3-art { -webkit-mask-image: radial-gradient(ellipse 50% 44% at 46% 34%, #000 5%, rgba(0,0,0,.6) 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 44% at 46% 34%, #000 5%, rgba(0,0,0,.6) 45%, transparent 100%); }
.home3 { overflow-x: clip; }
/* Montagne : boîte au format de l'image ; drapeau et libellé placés en % sur le sommet.
   --mt-sy = hauteur du sommet dans l'image (0 à 1), qui diffère entre les deux versions. */
:root { --mt-sy: 0.244; }
:root[data-theme="dark"] { --mt-sy: 0.304; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mt-sy: 0.304; } }
.home3 { --mt-w: 640px; overflow-x: clip; }
@media (max-width: 1499px) { .home3 { --mt-w: 540px; } }
@media (max-width: 1299px) { .home3 { --mt-w: 450px; } }
.h3-artbox { position: absolute; left: 50%; width: var(--mt-w); aspect-ratio: 3 / 2; transform: translateX(-46%); pointer-events: none;
  top: calc(96px - var(--mt-sy) * var(--mt-w) * 2 / 3); }
.h3-artbox .h3-art { position: absolute; inset: 0; width: auto; top: 0; left: 0; transform: none; }
.h3-artbox .h3-flag { left: calc(46% - 3px); top: calc(var(--mt-sy) * 100% - 32px); }
.h3-artbox .h3-flag-label { left: calc(46% + 30px); top: calc(var(--mt-sy) * 100% - 84px); }
@media (max-width: 1299px) { .h3-date { display: none; } }

/* =====================================================================
   Accueil calé sur la maquette (mesures relevées sur l'image de référence,
   écran de 1676 × 939) : appliqué aux écrans d'ordinateur larges.
   ===================================================================== */
@media (min-width: 1024px) {
  .home3 { padding-top: 0; }
  .h3-hero { display: block; position: relative; min-height: 0; margin: 0; padding: 49px 0 30px; }
  .h3-hello { font-size: 17px; line-height: 24px; }
  .h3-greet h1 { font-size: 52px; line-height: 57px; font-weight: 700; letter-spacing: -0.035em; margin: 1px 0 3px; }
  .h3-wave { margin-left: 14px; font-size: 44px; vertical-align: 4px; }
  .h3-sub { font-size: 18px; line-height: 25px; }
  .h3-mountain { position: static; display: block; height: auto; }
  .h3-date { top: 61px; right: 0; font-size: 14px; }
  .home3 { --mt-w: 760px; }
  .h3-artbox { left: 70.7%; transform: translateX(-46%); top: calc(77px - var(--mt-sy) * var(--mt-w) * 2 / 3); }
  .h3-artbox .h3-flag { left: calc(46% - 2px); top: calc(var(--mt-sy) * 100% - 27px); width: 16px; height: 28px; }
  .h3-artbox .h3-flag-label { left: calc(46% + 29px); top: calc(var(--mt-sy) * 100% - 75px); line-height: 1.3; }
  .h3-flag-label small { font-size: 12px; line-height: 16px; }
  .h3-flag-label b { font-size: 15px; line-height: 22px; }
  .h3-flag-label span { font-size: 14px; line-height: 20px; }

  .h3-grid { grid-template-columns: minmax(0, 858fr) minmax(0, 392fr); gap: 22px; }

  /* Carte Daily Revision */
  .h3-daily { display: block; min-height: 381px; padding: 23px 33px 62px; border-radius: 18px; }
  .h3-daily-text { display: block; position: relative; max-width: 420px; }
  .h3-pill { height: 38px; padding: 0 15px 0 13px; margin-left: -8px; border-radius: 10px; font-size: 12.5px; gap: 9px; }
  .h3-daily h2 { font-size: 46px; line-height: 46px; letter-spacing: -0.035em; margin: 22px 0 9px; font-weight: 680; max-width: 400px; }
  .h3-daily p { font-size: 17px; line-height: 26px; max-width: 345px; }
  .h3-cta { width: 389px; height: 57px; margin-top: 26px; border-radius: 12px; font-size: 17px; font-weight: 520; }
  .h3-stack { display: block; position: absolute; inset: 0; min-height: 0; pointer-events: none; }
  .h3-qcard { left: 74.6%; top: 51%; width: 245px; height: 300px; border-radius: 16px; }
  .h3-qcard.front { height: 300px; min-height: 0; transform: translate(-50%, -50%) rotate(8deg); padding: 24px 18px 18px 20px; gap: 6px; }
  .h3-qcard.back1 { transform: translate(calc(-50% + 14px), calc(-50% - 10px)) rotate(3deg) scale(1.03); opacity: .55; }
  .h3-qcard.back2 { transform: translate(calc(-50% - 66px), calc(-50% + 22px)) rotate(-10deg); opacity: .4; }
  .h3-count { right: 18px; top: 18px; font-size: 13px; }
  .h3-q { font-size: 16px; font-weight: 500; line-height: 20px; margin: 4px 34px 12px 0; }
  .h3-opt { height: 32px; padding: 0 10px 0 3px; border-radius: 9px; font-size: 14px; gap: 14px; }
  .h3-opt > span:first-child { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }

  /* Prochain examen et étapes */
  .h3-side { padding: 22px 24px; border-radius: 18px; }
  .h3-side-head { height: 24px; margin: 0 0 14px 1px; gap: 14px; font-size: 17px; }
  .h3-side-head .icon:first-child { width: 22px; height: 22px; }
  .h3-exam { padding: 15px 15px 18px 18px; border-radius: 12px; min-height: 112px; }
  .h3-exam b { font-size: 18px; line-height: 23px; }
  .h3-exam .faint { font-size: 15.5px !important; line-height: 22px; margin-top: 1px !important; }
  .h3-days { height: 43px; padding: 0 13px; display: inline-flex; align-items: center; border-radius: 10px; font-size: 15px; }
  .h3-exam > .row:last-child { margin-top: 15px !important; gap: 10px !important; }
  .h3-exam .progress { height: 8px; }
  .h3-exam > .row:last-child .faint { font-size: 15px !important; }
  .h3-steps-title { font-size: 15px; line-height: 20px; margin: 22px 0 8px; padding-top: 18px; }
  .h3-steps { gap: 0; }
  .h3-steps a { height: 39.5px; padding: 0 4px 0 4px; gap: 16px; font-size: 15.5px; }
  .h3-check { width: 24px; height: 24px; border-width: 2px; }

  /* Vos matières */
  .home3 .section { margin-top: 41px; }
  .h3-section-head { margin-bottom: 11px; }
  .h3-section-head h3 { font-size: 17px; line-height: 22px; font-weight: 600; }
  .h3-section-head a { font-size: 13.5px; }
  .h3-subjects { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .h3-subj { height: 153px; padding: 16px 17px 17px; border-radius: 14px; }
  .h3-subj-name { font-size: 13.5px; font-weight: 560; }
  .h3-subj > .row:nth-child(2) { margin-top: 20px !important; height: 22px; }
  .h3-subj b { font-size: 16px; }
  .h3-bar { height: 8px; margin: 7px 0 9px; }
  .h3-subj > span { font-size: 14px !important; line-height: 20px; }
}
@media (min-width: 1024px) { .h3-subj > .row:first-child { gap: 15px !important; } }
@media (min-width: 1024px) {
  .h3-hero { padding-top: 57px; }
  .h3-date { top: 59px; }
  .h3-artbox { top: calc(69px - var(--mt-sy) * var(--mt-w) * 2 / 3); }
  .h3-pill { padding: 0 12px 0 11px; }
  .h3-exam { height: 112px; min-height: 0; box-sizing: border-box; padding-top: 14px; padding-bottom: 14px; }
  .h3-exam > .row:last-child { margin-top: 12px !important; }
}
@media (min-width: 1024px) {
  .h3-artbox { top: calc(84px - var(--mt-sy) * var(--mt-w) * 2 / 3); }
  .h3-steps-title { margin-top: 20px; }
  .h3-side { padding-bottom: 21px; }
  .main:has(.home3) { padding-bottom: 50px; }
}
@media (min-width: 1024px) {
  .h3-daily h2 { font-size: 44px; line-height: 46px; font-weight: 640; }
  .h3-steps a .num { display: none; }
}
:root[data-theme="dark"] .h3-art { opacity: .5; filter: saturate(.75) brightness(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .h3-art { opacity: .5; filter: saturate(.75) brightness(.85); } }
.h3-art { -webkit-mask-image: radial-gradient(ellipse 52% 46% at 46% 38%, #000 0%, rgba(0,0,0,.55) 40%, transparent 100%); mask-image: radial-gradient(ellipse 52% 46% at 46% 38%, #000 0%, rgba(0,0,0,.55) 40%, transparent 100%); }
/* Thème sombre, grand écran : la montagne de la maquette, sommet sous le drapeau
   (sommet à 362 × 13 px dans l'image). */
.h3-ridge { display: none; }
@media (min-width: 1024px) {
  :root[data-theme="dark"] .h3-ridge { display: block; }
  :root[data-theme="dark"] .h3-art { display: none; }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .h3-ridge { display: block; }
  :root:not([data-theme="light"]) .h3-art { display: none; }
}
.h3-ridge { position: absolute; left: calc(70.7% - 362px); top: 59px; width: 760px; height: 126px; pointer-events: none; z-index: 0;
  background: url(/assets/img/home/ridge-dark.webp) 0 0 / 100% 100% no-repeat; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent); }
.h3-ridge { top: 67px; }
.h3-ridge { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent), linear-gradient(180deg, transparent 0, #000 7%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 90%, transparent), linear-gradient(180deg, transparent 0, #000 7%); mask-composite: intersect; }
@media (min-width: 1024px) {
  .h3-greet h1 { font-size: 50px; }
  .h3-sub { font-size: 17.6px; }
  .h3-steps a { font-size: 15px; }
  .h3-q { margin-right: 44px; }
  .h3-qcard.back1 { transform: translate(calc(-50% + 26px), calc(-50% + 4px)) rotate(4deg) scale(1.04); opacity: .5; }
  .h3-qcard.back2 { transform: translate(calc(-50% - 58px), calc(-50% + 18px)) rotate(-9deg); opacity: .38; }
}
.sidebar .brand .brand-logo { height: 34px; }
.topbar .brand-sm .brand-logo { height: 28px; }
.auth-box .logo .brand-logo { height: 40px; }

/* Libellé du drapeau sans examen : lien vers le réglage des dates d'examen. */
a.h3-flag-label { pointer-events: auto; color: inherit; text-decoration: none; }
a.h3-flag-label:hover span { text-decoration: underline; }

/* Accueil sur ordinateur : page mise à l'échelle de l'écran, sans défilement. */
html.home-fit, html.home-fit body { overflow: hidden; height: 100%; }
html.home-fit .main:has(.home3) { padding-bottom: 0; }
@media (min-width: 1024px) { .h3-date { display: block; } }

/* =====================================================================
   Pages matière et chapitre — maquettes design-reference (1586 × 992).
   Gabarits communs aux six matières ; cotes relevées sur les maquettes.
   Bandeaux, cartes illustrées : toujours sombres (illustrations), le reste
   suit le thème.
   ===================================================================== */
.cx-page {
  --cx-card: #12122a; --cx-card-border: #1d1c42; --cx-panel: #111428; --cx-panel-border: #1e2140;
  --cx-text: #f6f6fa; --cx-muted: #dbe2fa; --cx-crumb: #c9d5f8; --cx-link: #bca3fd; --cx-link-2: #d7cafa; --cx-res: #cf9cfb;
  --cx-row-on: #221c4d; --cx-row-bar: #7a35f4; --cx-sep: rgba(255, 255, 255, .07); --cx-concepts: #cdd9ff;
  --cx-item-on: linear-gradient(90deg, #2b1b60, #241952); --cx-item-bar: #a546f1; --cx-tab: #cedcf9; --cx-tab-line: #a94bed; --cx-tab-sep: #21284c;
  --cx-desc: #dbe4fe; --cx-divider: #1a1f3c;
}
:root[data-theme="light"] .cx-page {
  --cx-card: var(--surface); --cx-card-border: var(--border); --cx-panel: var(--surface); --cx-panel-border: var(--border);
  --cx-text: var(--text); --cx-muted: var(--text-2); --cx-crumb: var(--text-2); --cx-link: var(--accent-text); --cx-link-2: var(--accent-text); --cx-res: var(--accent-text);
  --cx-row-on: var(--accent-soft); --cx-sep: var(--border); --cx-concepts: var(--accent-text); --cx-item-on: var(--accent-soft);
  --cx-tab: var(--text-2); --cx-tab-sep: var(--border); --cx-desc: var(--text-2); --cx-divider: var(--border);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cx-page {
  --cx-card: var(--surface); --cx-card-border: var(--border); --cx-panel: var(--surface); --cx-panel-border: var(--border);
  --cx-text: var(--text); --cx-muted: var(--text-2); --cx-crumb: var(--text-2); --cx-link: var(--accent-text); --cx-link-2: var(--accent-text); --cx-res: var(--accent-text);
  --cx-row-on: var(--accent-soft); --cx-sep: var(--border); --cx-concepts: var(--accent-text); --cx-item-on: var(--accent-soft);
  --cx-tab: var(--text-2); --cx-tab-sep: var(--border); --cx-desc: var(--text-2); --cx-divider: var(--border);
} }
.cx-page { padding-top: 4px; padding-bottom: 36px; color: var(--cx-text); }
@media (min-width: 1024px) { .main:has(.cx-page) { padding-left: 38px; padding-right: 23px; } .main:has(.cx-page) .topbar { margin: 0 -23px 16px -38px; padding: 0 23px 0 38px; } }

/* Fil d'Ariane */
.cx-crumbs { display: flex; align-items: center; gap: 13px; height: 22px; margin: 0 0 13px; font-size: 15px; color: var(--cx-crumb); white-space: nowrap; overflow: hidden; }
.cx-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.cx-crumbs a:hover { color: var(--cx-text); }
.cx-crumbs > :last-child { color: var(--cx-text); overflow: hidden; text-overflow: ellipsis; }
.cx-crumbs .sep { opacity: .8; }

/* Boutons et liens */
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 30px 0 33px; border: 0; border-radius: 10px;
  background: linear-gradient(90deg, #5f39fd, #6423fd); color: #faf6fe; font-size: 19.5px; font-weight: 500; letter-spacing: -.005em; cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(100, 35, 253, .8); transition: filter .15s; }
.cx-btn:hover { filter: brightness(1.08); }
.cx-btn .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.cx-link { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; color: var(--cx-link); font: inherit; font-size: 17.5px; cursor: pointer; }
.cx-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Page matière ---------- */
.cx-hero { position: relative; overflow: hidden; height: 283px; border-radius: 18px; border: 1px solid #211953;
  background: radial-gradient(120% 140% at 0% 100%, #15102e 0%, #120f2b 60%), #12102f; color: #f8f8f9; }
.cx-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 69%; background: var(--art) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.cx-hero-text { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 46px 37px 0; max-width: 520px; }
.cx-hero h1 { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.012em; margin: 0; color: #f8f8f9; }
.cx-hero-sub { font-size: 22px; line-height: 30px; margin: 3px 0 0; color: #c9d2ff; letter-spacing: -.003em; }
.cx-hero .cx-btn { align-self: flex-start; margin-top: 39px; width: 230px; }
.cx-hero:has(.cx-hero-sub) h1 + .cx-hero-sub { margin-top: 3px; }

.cx-grid { display: grid; grid-template-columns: minmax(0, 745fr) minmax(0, 484fr); gap: 24px; margin-top: 27px; align-items: start; }
.cx-weeks { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cx-week { display: flex; flex-direction: column; background: var(--cx-card); border: 1px solid var(--cx-card-border); border-radius: 18px; }
.cx-week.open:first-child { min-height: 519px; }
.cx-week-head { display: flex; align-items: baseline; gap: 28px; width: 100%; padding: 22px 37px 21px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cx-week-head h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.012em; color: var(--cx-text); min-width: 0; }
.cx-week-n { font-size: 15px; color: var(--cx-muted); white-space: nowrap; }
.cx-week-chev { margin-left: auto; align-self: center; width: 20px; height: 20px; color: var(--cx-muted); transition: transform .2s; }
.cx-week.open .cx-week-chev { transform: rotate(180deg); }
.cx-rows { display: flex; flex-direction: column; flex: 1; margin: 0 13px 0 11px; }
.cx-row { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: 35px; min-height: 41px; max-height: 59px; padding: 0 24px 0 26px;
  border-radius: 8px; font-size: 16.5px; color: var(--cx-text); }
.cx-row::after { content: ''; position: absolute; left: 13px; right: 10px; bottom: 0; height: 1px; background: var(--cx-sep); }
.cx-row.on { background: var(--cx-row-on); box-shadow: inset 6px 0 0 var(--cx-row-bar); }
.cx-row.on::after, .cx-row:has(+ .cx-row.on)::after { display: none; }
.cx-row:hover:not(.on) { background: rgba(255, 255, 255, .03); }
.cx-row .icon { width: 18px; height: 18px; color: #c9cff7; flex: none; stroke-width: 2.1; }
.cx-row-resume { font-size: 15.5px; color: var(--cx-link); }
.cx-practise { margin: 22px 39px 31px; font-weight: 500; font-size: 18px; align-self: flex-start; }

.cx-side { display: flex; flex-direction: column; gap: 18px; }
.cx-tool { position: relative; display: flex; align-items: center; height: 212px; padding: 0 25px; overflow: hidden; border-radius: 18px;
  border: 1px solid #1f1f3f; background: #121128; color: #fafafc; text-align: left; cursor: pointer; font: inherit; }
.cx-tool.exam { height: 213px; }
.cx-tool-art { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; background: var(--art) right center / cover no-repeat; }
.cx-page .cx-tool:not(.exam) .cx-tool-art { width: 52%; }
.cx-tool.exam .cx-tool-art { width: 68%; }
.cx-tool-title { position: relative; z-index: 1; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.012em; }
.cx-round { position: absolute; z-index: 1; right: 17px; bottom: 23px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: #24224b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .15s; }
.cx-round .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.cx-tool:hover .cx-round { background: #2f2c63; }
.cx-quick { display: inline-flex; align-items: center; gap: 19px; align-self: flex-start; margin: 26px 0 0 8px; font-size: 17px; color: #cfd4fc; }
.cx-quick .icon:first-child { width: 28px; height: 28px; stroke-width: 1.8; color: #d8d9ff; }
.cx-quick .icon:last-child { margin-left: -9px; }
.cx-quick:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Page chapitre ---------- */
.cx-banner { position: relative; overflow: hidden; height: 108px; display: flex; align-items: center; padding: 0 34px;
  border-radius: 14px; border: 1px solid #211953; background: #0f0d2e; color: #f9f9fa; }
.cx-banner-art { position: absolute; top: 0; right: 0; bottom: 0; width: 69%; background: var(--art) right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
.cx-banner h1 { position: relative; z-index: 1; margin: 0 0 -4px; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.012em; }

.cx-chapter { display: grid; grid-template-columns: 283px minmax(0, 1fr); gap: 23px; margin-top: 22px; align-items: stretch; }
.cx-concepts { display: flex; flex-direction: column; padding: 12px 0 0 3px; min-width: 0; }
.cx-concepts h2 { margin: 0 0 24px 1px; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--cx-concepts); letter-spacing: -.01em; }
.cx-clist { display: flex; flex-direction: column; gap: 1px; }
.cx-citem { display: flex; align-items: center; width: 100%; padding: 15px 18px 15px 28px; border: 0; border-radius: 10px; background: none; color: var(--cx-text);
  font: inherit; font-size: 18px; line-height: 28px; text-align: left; cursor: pointer; }
.cx-citem:hover:not(.on) { background: rgba(255, 255, 255, .03); }
.cx-citem.on { min-height: 68px; background: var(--cx-item-on); box-shadow: inset 6px 0 0 var(--cx-item-bar); }
.cx-res { margin: auto 0 0 28px; padding: 32px 0 58px; color: var(--cx-res); font-size: 17.5px; align-self: flex-start; }
.cx-res .icon { width: 19px; height: 19px; }

.cx-panel { min-width: 0; padding: 27px 36px 27px; border-radius: 16px; border: 1px solid var(--cx-panel-border); background: var(--cx-panel); display: flex; flex-direction: column; min-height: 710px; }
.cx-panel > h2 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.012em; color: var(--cx-text); }
.cx-tabs { display: flex; gap: 30px; margin-top: 23px; border-bottom: 1px solid var(--cx-tab-sep); overflow-x: auto; scrollbar-width: none; }
.cx-tabs button { position: relative; flex: none; width: 118px; height: 41px; padding: 0 0 6px; border: 0; background: none; color: var(--cx-tab); font: inherit; font-size: 17px; cursor: pointer; }
.cx-tabs button.on { color: var(--cx-text); }
.cx-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--cx-tab-line); }
.cx-h3 { margin: 31px 0 0; font-size: 21px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--cx-text); }
.cx-rules { display: flex; flex-direction: column; margin-top: 8px; }
.cx-rule { display: grid; grid-template-columns: 397px minmax(0, 1fr); align-items: center; padding: 10px 0; }
.cx-term { padding-left: 14px; font-size: 19px; line-height: 28px; font-weight: 700; color: var(--cx-text); }
.cx-rule.math .cx-term { padding-left: 50px; font-weight: 400; font-size: 25px; line-height: 1.2; }
.cx-rules.ex .cx-rule { padding-top: 14px; }
.cx-rules.ex .cx-rule.math .cx-term { padding-left: 2px; font-size: 27px; }
.cx-desc { font-size: 17.5px; line-height: 28px; color: var(--cx-desc); max-width: 380px; }
.cx-note { margin: 16px 0 0; font-size: 17.5px; line-height: 28px; color: var(--cx-desc); }
.cx-divider { border: 0; height: 1px; background: var(--cx-divider); margin: 20px 0 0; }
.cx-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 32px; }
.cx-panel-foot .cx-btn { min-width: 234px; font-size: 20px; }
.cx-ask { color: var(--cx-link-2); font-size: 18.5px; margin-top: 8px; }
.cx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
.cx-fcard { min-height: 120px; padding: 18px; border-radius: 12px; border: 1px solid var(--cx-panel-border); background: rgba(255, 255, 255, .03);
  color: var(--cx-text); font: inherit; font-size: 16px; line-height: 1.45; text-align: left; cursor: pointer; }
.cx-fcard.back { background: var(--cx-row-on); color: var(--cx-desc); }
.cx-practice { margin-top: 28px; display: flex; flex-direction: column; flex: 1; }
.cx-res-tabs { position: static; margin: 0 0 18px; }

/* Tablette et mobile : une seule colonne, sans débordement. */
@media (max-width: 1023px) {
  .cx-grid, .cx-chapter { grid-template-columns: minmax(0, 1fr); }
  .cx-week.open:first-child { min-height: 0; }
  .cx-row { flex: none; height: 52px; }
  .cx-panel { min-height: 0; }
  .cx-res { margin-top: 12px; padding: 8px 0 4px; }
}
@media (max-width: 639px) {
  .cx-hero { height: auto; min-height: 240px; }
  .cx-hero-art { width: 100%; opacity: .45; }
  .cx-hero-text { padding: 28px 20px; }
  .cx-hero h1 { font-size: 26px; line-height: 31px; }
  .cx-hero-sub { font-size: 18px; line-height: 25px; }
  .cx-hero .cx-btn { margin-top: 22px; width: auto; height: 48px; font-size: 17px; }
  .cx-week-head { padding: 18px 18px 14px; gap: 12px; flex-wrap: wrap; }
  .cx-week-head h2 { font-size: 20px; line-height: 26px; }
  .cx-rows { margin: 0 6px; }
  .cx-row { padding: 0 14px 0 16px; gap: 14px; font-size: 15.5px; }
  .cx-practise { margin: 18px 18px 22px; }
  .cx-tool { height: 150px; }
  .cx-tool-title { font-size: 21px; }
  .cx-banner { height: 92px; padding: 0 18px; }
  .cx-banner h1 { font-size: 24px; line-height: 29px; }
  .cx-banner-art { opacity: .55; }
  .cx-clist { flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .cx-citem { flex: none; width: auto; max-width: 260px; padding: 10px 16px; font-size: 15px; line-height: 21px; border: 1px solid var(--cx-card-border); }
  .cx-citem.on { min-height: 0; }
  .cx-concepts h2 { margin-bottom: 12px; font-size: 19px; }
  .cx-panel { padding: 20px 18px; }
  .cx-panel > h2 { font-size: 24px; line-height: 30px; }
  .cx-tabs { gap: 6px; }
  .cx-tabs button { width: auto; padding: 0 12px 6px; font-size: 15.5px; }
  .cx-rule { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; }
  .cx-term, .cx-rule.math .cx-term { padding-left: 0; }
  .cx-rule.math .cx-term { font-size: 21px; }
  .cx-desc { max-width: none; font-size: 16px; line-height: 24px; }
  .cx-panel-foot { flex-wrap: wrap; }
  .cx-panel-foot .cx-btn { min-width: 0; width: 100%; height: 50px; font-size: 18px; }
}
/* Ajustements après comparaison aux maquettes */
.cx-btn { white-space: nowrap; }
.cx-hero .cx-btn { padding: 0 26px 0 33px; }
.cx-tool-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.cx-rule.math .cx-term { font-size: 29px; }
.cx-quick { margin-top: 12px; }
.cx-hero h1 { white-space: pre-line; }
/* Bouton « Resume lesson » à hauteur fixe ; le texte s'empile au-dessus. */
.cx-hero-text { justify-content: flex-end; padding: 0 37px 38px; }
.cx-tool-art, .cx-page .cx-tool:not(.exam) .cx-tool-art { width: var(--art-w, 52%); }
.cx-tool.exam .cx-tool-art { width: 67.6%; }
.cx-rule:not(.math) { align-items: baseline; }
.cx-rule:not(.math) .cx-term { line-height: 28px; }
.cx-clist.dense .cx-citem { padding-top: 5px; padding-bottom: 5px; line-height: 26px; }
.cx-clist.dense .cx-citem.on { min-height: 62px; }
.cx-clist.dense + .cx-res { padding-bottom: 30px; }
.cx-divider { background: #232948; }
:root[data-theme="light"] .cx-divider { background: var(--border); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cx-divider { background: var(--border); } }
@media (max-width: 639px) { .cx-hero-text { justify-content: center; padding: 28px 20px; } }
.cx-hero-text { max-width: 580px; }
.cx-note { margin-top: 6px; }
.cx-rules.ex .cx-rule { padding-top: 8px; }
.cx-tool-art, .cx-page .cx-tool:not(.exam) .cx-tool-art { width: var(--art-w, 251px); max-width: 100%; background-size: auto 100%; background-position: right center; }
.cx-tool.exam .cx-tool-art { width: 326px; }
.cx-tool-title { text-shadow: 0 1px 12px rgba(10, 8, 30, .8); }
.cx-quick { color: var(--cx-quick, #cfd4fc); }
.cx-quick .icon:first-child { color: var(--cx-quick-icon, #d8d9ff); }
.cx-row .icon { color: var(--cx-chev, #c9cff7); }
:root[data-theme="light"] .cx-page { --cx-quick: var(--text-2); --cx-quick-icon: var(--text-2); --cx-chev: var(--text-3); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cx-page { --cx-quick: var(--text-2); --cx-quick-icon: var(--text-2); --cx-chev: var(--text-3); } }
@media (max-width: 639px) { .cx-tool, .cx-tool.exam { height: 212px; } }

/* Page chapitre : sous-pages Lesson / Summary / Concepts / Flashcards / Practice */
.cx-subnav { display: flex; align-items: flex-end; gap: 24px; margin-top: 18px; border-bottom: 1px solid var(--cx-tab-sep); }
.cx-subnav .cx-tabs { flex: 1; min-width: 0; margin: 0; border-bottom: 0; }
.cx-subnav .cx-res { margin: 0 4px 0 0; padding: 0 0 12px; flex: none; }
.cx-chapter { margin-top: 26px; }
.cx-wide { margin-top: 26px; min-height: 0; }
.cx-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cx-panel-head h2 { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.012em; }
.cx-panel-head .cx-btn { height: 48px; font-size: 17.5px; padding: 0 24px; }
.cx-qlist { margin: 18px 0 0; }
.cx-qlist .cx-row { flex: none; height: 54px; }
.cx-doc { min-height: 0; }
.cx-doc .prose { max-width: 820px; color: var(--cx-text); font-size: 16.5px; line-height: 1.7; }
.cx-doc .prose h1 { font-size: 28px; }
.cx-doc .prose h2 { font-size: 26px; }
.cx-doc .prose h3 { font-size: 22px; margin-top: 34px; scroll-margin-top: 90px; }
.cx-doc .prose h4 { font-size: 18px; }
.cx-doc .prose h5 { font-size: 16.5px; }
.cx-doc .prose h6 { font-size: 13.5px; }
.cx-toc { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
.cx-toc .cx-citem { padding: 9px 14px 9px 18px; font-size: 15.5px; line-height: 22px; color: var(--cx-crumb); }
.cx-toc .cx-citem:hover { color: var(--cx-text); }
@media (max-width: 1023px) { .cx-toc { position: static; max-height: none; } }
@media (max-width: 639px) {
  .cx-subnav { gap: 8px; flex-wrap: wrap; }
  .cx-subnav .cx-res { order: -1; margin-left: auto; padding: 0 0 4px; font-size: 15.5px; }
  .cx-panel-head h2 { font-size: 23px; line-height: 29px; }
  .cx-panel-head .cx-btn { width: 100%; }
  .cx-toc .cx-clist { flex-direction: row; }
}

/* Sous-pages de la Daily Revision : onglets en mobile (le sous-menu de la barre latérale les remplace sur ordinateur). */
.daily-tabs { display: flex; gap: 6px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.daily-tabs a { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-2); background: var(--surface); }
.daily-tabs a.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 560; }
@media (min-width: 960px) { .daily-tabs { display: none; } }

/* Mind map d'une Week (sous-page « Mind map ») : vue déplaçable et zoomable. */
.cx-panel.mm-panel { padding: 0; overflow: hidden; }
.mm { display: flex; flex-direction: column; --mm-node: color-mix(in srgb, var(--cx-panel) 88%, #fff 12%); }
:root[data-theme="light"] .mm { --mm-node: var(--surface); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mm { --mm-node: var(--surface); } }
.mm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px 14px 26px; border-bottom: 1px solid var(--cx-sep); }
.mm-bar h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.mm-tools { display: flex; align-items: center; gap: 6px; }
.mm-tools button { display: inline-grid; place-items: center; height: 34px; border-radius: 9px; border: 1px solid var(--cx-panel-border); background: transparent; color: var(--cx-text); font: inherit; font-size: 14px; cursor: pointer; }
.mm-tools button:hover { background: var(--cx-sep); }
.mm-ic { width: 34px; }
.mm-ic .icon { width: 17px; height: 17px; }
.mm-txt { padding: 0 12px; margin-right: 6px; }
.mm-view { position: relative; height: max(460px, calc(100vh - 330px)); overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
  background-image: radial-gradient(circle, var(--cx-sep) 1px, transparent 1.2px); background-size: 22px 22px; }
.mm-view:focus-visible { box-shadow: inset 0 0 0 2px var(--cx-tab-line); }
.mm-view.dragging { cursor: grabbing; }
.mm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform; }
.mm-stage.ready { opacity: 1; transition: opacity .25s; }
.mm-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.mm-node { position: absolute; left: 0; top: 0; box-sizing: border-box; font: inherit; color: var(--cx-text); text-align: left; }
.mm-root { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--root); color: #fff;
  font-size: 16.5px; line-height: 21px; font-weight: 700; text-align: center; cursor: pointer; box-shadow: 0 8px 24px color-mix(in srgb, var(--root) 35%, transparent); }
.mm-week { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.mm-concept { display: flex; align-items: stretch; border-radius: 12px; border: 1.5px solid var(--b); background: color-mix(in srgb, var(--b) 16%, var(--cx-panel)); }
.mm-concept.open { background: color-mix(in srgb, var(--b) 26%, var(--cx-panel)); }
.mm-hit { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 6px 11px 14px; border: 0; background: none; color: inherit; font: inherit;
  font-size: 14.5px; line-height: 19px; font-weight: 650; text-align: left; cursor: pointer; }
.mm-count { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--b); color: #fff; font-size: 12px; line-height: 22px; text-align: center; font-weight: 600; }
.mm-go { flex: none; width: 32px; border: 0; border-left: 1px solid color-mix(in srgb, var(--b) 40%, transparent); background: none; color: var(--cx-muted); cursor: pointer; border-radius: 0 10px 10px 0; }
.mm-go:hover { color: var(--cx-text); background: color-mix(in srgb, var(--b) 22%, transparent); }
.mm-go .icon { width: 15px; height: 15px; }
.mm-leaf { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px 9px 14px; border-radius: 10px; border: 1px solid var(--cx-panel-border); border-left: 3px solid var(--b);
  background: var(--mm-node); font-size: 13.5px; line-height: 18px; cursor: pointer; }
.mm-leaf:hover, .mm-leaf.sel { border-color: color-mix(in srgb, var(--b) 60%, transparent); border-left-color: var(--b); }
.mm-term { font-weight: 600; }
.mm-text { color: var(--cx-desc); font-size: 13px; line-height: 18.5px; }
.mm-ex { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--b); }
.mm-leaf.ex .mm-term { font-style: italic; }
.mm-hint { position: absolute; left: 16px; bottom: 14px; padding: 6px 11px; border-radius: 8px; background: color-mix(in srgb, var(--cx-panel) 85%, transparent);
  border: 1px solid var(--cx-panel-border); color: var(--cx-muted); font-size: 12.5px; pointer-events: none; transition: opacity .5s; }
.mm-hint.gone { opacity: 0; }
.mm-full { position: fixed; inset: 0; z-index: 300; background: var(--cx-panel); }
.mm-full .mm-view { flex: 1; height: auto; }
html.mm-lock, html.mm-lock body { overflow: hidden; }
@media (max-width: 639px) {
  .mm-bar { padding: 14px 14px 12px; }
  .mm-txt { display: none; }
  .mm-view { height: max(420px, calc(100svh - 300px)); }
  .mm-hint { right: 16px; text-align: center; }
}

/* ---------- Pages matière et Week : densité de travail (05/10) ----------
   Les tailles calées sur la maquette (écran de 1676 px) étaient trop grosses à l'usage :
   tout est ramené à l'échelle du reste de l'app. Le mobile garde ses propres réglages. */
@media (min-width: 640px) {
  .cx-crumbs { font-size: 13.5px; height: 20px; margin-bottom: 10px; gap: 10px; }
  .cx-btn { height: 42px; padding: 0 20px 0 22px; gap: 9px; font-size: 15.5px; border-radius: 9px; }
  .cx-btn .icon { width: 18px; height: 18px; }
  .cx-link { font-size: 15px; gap: 8px; }

  .cx-hero { height: 200px; border-radius: 14px; }
  .cx-hero-text { padding: 0 30px 26px; max-width: 500px; }
  .cx-hero h1 { font-size: 26px; line-height: 31px; }
  .cx-hero-sub, .cx-hero:has(.cx-hero-sub) h1 + .cx-hero-sub { font-size: 17px; line-height: 24px; margin-top: 2px; }
  .cx-hero .cx-btn { margin-top: 20px; width: auto; padding: 0 20px 0 22px; }

  .cx-grid { gap: 18px; margin-top: 18px; }
  .cx-weeks { gap: 14px; }
  .cx-week { border-radius: 14px; }
  .cx-week.open:first-child { min-height: 0; }
  .cx-week-head { gap: 16px; padding: 15px 22px 12px; }
  .cx-week-head h2 { font-size: 18.5px; line-height: 25px; }
  .cx-week-n { font-size: 13px; }
  .cx-week-chev { width: 17px; height: 17px; }
  .cx-rows { margin: 0 9px; }
  .cx-row { flex: none; height: 42px; min-height: 0; max-height: none; gap: 16px; padding: 0 14px 0 14px; font-size: 14.5px; }
  .cx-row::after { left: 8px; right: 8px; }
  .cx-row.on { box-shadow: inset 4px 0 0 var(--cx-row-bar); }
  .cx-row .icon { width: 16px; height: 16px; }
  .cx-row-resume { font-size: 13px; }
  .cx-practise { margin: 14px 23px 18px; font-size: 14.5px; }

  .cx-side { gap: 14px; }
  .cx-tool, .cx-tool.exam { height: 160px; padding: 0 20px; border-radius: 14px; }
  .cx-tool-art, .cx-page .cx-tool:not(.exam) .cx-tool-art { width: calc(var(--art-w, 251px) * .755); }
  .cx-tool.exam .cx-tool-art { width: 246px; }
  .cx-tool-title { font-size: 19px; line-height: 24px; }
  .cx-round { right: 13px; bottom: 17px; width: 38px; height: 38px; }
  .cx-round .icon { width: 17px; height: 17px; }
  .cx-quick { gap: 12px; margin: 6px 0 0 6px; font-size: 14.5px; }
  .cx-quick .icon:first-child { width: 22px; height: 22px; }
  .cx-quick .icon:last-child { margin-left: -6px; }

  .cx-banner { height: 76px; padding: 0 26px; border-radius: 12px; }
  .cx-banner h1 { font-size: 24px; line-height: 30px; margin: 0; }
  .cx-subnav { margin-top: 12px; gap: 16px; }
  .cx-tabs { gap: 4px; }
  .cx-tabs button { width: auto; height: 38px; padding: 0 14px 6px; font-size: 14.5px; }
  .cx-subnav .cx-res, .cx-res { font-size: 14.5px; }
  .cx-subnav .cx-res { padding-bottom: 12px; }
  .cx-res .icon { width: 16px; height: 16px; }

  .cx-chapter { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; margin-top: 18px; }
  .cx-concepts { padding: 4px 0 0; }
  .cx-concepts h2 { margin: 0 0 10px; font-size: 16px; line-height: 22px; }
  .cx-citem, .cx-clist.dense .cx-citem { padding: 9px 12px 9px 16px; font-size: 14.5px; line-height: 20px; border-radius: 8px; }
  .cx-citem.on, .cx-clist.dense .cx-citem.on { min-height: 0; box-shadow: inset 4px 0 0 var(--cx-item-bar); }
  .cx-toc .cx-citem { padding: 7px 12px 7px 16px; font-size: 13.5px; line-height: 19px; }

  .cx-panel { padding: 22px 28px; border-radius: 14px; min-height: 0; }
  .cx-panel > h2, .cx-panel-head h2 { font-size: 22px; line-height: 28px; }
  .cx-panel-head .cx-btn { height: 40px; font-size: 14.5px; padding: 0 18px; }
  .cx-h3 { margin-top: 22px; font-size: 16.5px; line-height: 23px; }
  .cx-rule { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; padding: 7px 0; }
  .cx-term, .cx-rule:not(.math) .cx-term { padding-left: 0; font-size: 15px; line-height: 22px; }
  .cx-rule.math .cx-term { padding-left: 20px; font-size: 21px; }
  .cx-rules.ex .cx-rule.math .cx-term { padding-left: 0; font-size: 21px; }
  .cx-desc { font-size: 14.5px; line-height: 22px; max-width: 440px; }
  .cx-note { font-size: 14.5px; line-height: 22px; }
  .cx-panel-foot { padding-top: 22px; }
  .cx-panel-foot .cx-btn { min-width: 0; font-size: 15.5px; }
  .cx-ask { font-size: 15px; margin-top: 0; }
  .cx-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 16px; }
  .cx-fcard { min-height: 96px; padding: 14px; font-size: 14px; }
  .cx-qlist { margin-top: 14px; }
  .cx-qlist .cx-row { height: 42px; }
  .cx-chapter, .cx-wide { margin-top: 18px; }
  .cx-doc .prose { font-size: 15px; line-height: 1.65; }
  .cx-doc .prose h1 { font-size: 23px; }
  .cx-doc .prose h2 { font-size: 20px; }
  .cx-doc .prose h3 { font-size: 17.5px; margin-top: 26px; }
  .cx-doc .prose h4 { font-size: 15.5px; }
  .cx-doc .prose h5 { font-size: 15px; }
  .cx-doc .prose h6 { font-size: 12.5px; }
  .mm-bar h2 { font-size: 19px; line-height: 25px; }
  .mm-bar { padding: 14px 16px 12px 22px; }
  .mm-view { height: max(440px, calc(100vh - 330px)); }
  .cx-panel.mm-panel { padding: 0; }
  .cx-subnav .cx-res { padding-bottom: 10px; }
}

/* Appareils connectés (Réglages et page « trop d'appareils » à la connexion) */
.device-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-sunken); color: var(--text-2); }
.device-ico .icon { width: 18px; height: 18px; }
.device-row .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.device-row .btn { flex: none; }
.settings-group > h2.row { margin-right: 4px; }
.device-count { margin: 0 2px 10px; font-size: 13px; font-weight: 560; color: var(--text-2); }
.device-list { text-align: left; }

/* Surlignages : passages marqués dans la leçon, le résumé et les notions, et page « Surlignages ». */
.hl-zone mark.hl { background: color-mix(in srgb, #f5c542 34%, transparent); color: inherit; padding: 1px 0; border-radius: 3px; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-zone mark.hl:hover { background: color-mix(in srgb, #f5c542 50%, transparent); }
.hl-zone mark.hl.flash { animation: hl-flash 1.6s ease-out 2; }
@keyframes hl-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, #f5c542 55%, transparent); background: color-mix(in srgb, #f5c542 70%, transparent); } }
.cx-tool .cx-hl-n { display: inline-block; vertical-align: 3px; margin-left: 10px; color: #fff; font-weight: 600; letter-spacing: 0; text-shadow: none; }
.cx-hl-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, #f5c542 30%, transparent); font-size: 12px; line-height: 20px; text-align: center; margin-left: -6px; }

.hl-page { max-width: 880px; }
.hl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.hl-chips button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.hl-chips button .num { color: var(--text-3); font-size: 12px; }
.hl-chips button.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 560; }
.hl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); flex: none; }
.hl-search { position: relative; display: flex; align-items: center; width: 260px; max-width: 100%; }
.hl-search .icon { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.hl-search .input { height: 36px; padding-left: 32px; font-size: 13.5px; }
.hl-subject { margin-bottom: 26px; }
.hl-subject-title { display: flex; align-items: center; gap: 9px; margin: 0 0 10px 2px; font-size: 15px; font-weight: 650; }
.hl-subject-title .num { font-size: 13px; font-weight: 500; }
.hl-week { padding: 0; overflow: hidden; margin-bottom: 12px; border-left: 3px solid var(--c); }
.hl-week-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 14.5px; font-weight: 600; color: var(--text); }
.hl-week-head:hover { background: var(--bg-sunken); }
.hl-week-n { flex: none; font-size: 12px; font-weight: 600; color: var(--c); text-transform: uppercase; letter-spacing: .04em; }
.hl-week-head .icon { color: var(--text-3); }
.hl-place { padding: 12px 16px 6px; }
.hl-place + .hl-place { border-top: 1px dashed var(--border); }
.hl-place-label { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; }
.hl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0 -8px; padding: 7px 8px; border-radius: 9px; }
.hl-item:hover, .hl-item:focus-within { background: var(--bg-sunken); }
.hl-quote { flex: 1; min-width: 0; padding: 2px 0 2px 12px; border-left: 3px solid color-mix(in srgb, #f5c542 75%, transparent); font-size: 14.5px; line-height: 1.55; color: var(--text); }
.hl-quote > span { background: color-mix(in srgb, #f5c542 22%, transparent); border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 1px 0; }
.hl-actions { display: flex; align-items: center; gap: 4px; flex: none; opacity: 0; transition: opacity .15s; }
.hl-item:hover .hl-actions, .hl-item:focus-within .hl-actions { opacity: 1; }
@media (hover: none) { .hl-actions { opacity: 1; } .hl-actions .btn { padding: 0 10px; } }
@media (max-width: 639px) {
  .hl-search { width: 100%; }
  .hl-item { flex-direction: column; gap: 6px; }
  .hl-actions { align-self: flex-end; }
}

/* Icônes illustrées des matières (remplacent les carrés à initiales) */
.subject-icon { background: none; border-radius: 0; }
.subject-icon img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(20, 12, 50, .18)); user-select: none; }

/* Frise chronologique horizontale (onglet Timeline d'une Week) */
.tlh { margin-top: 18px; outline: none; }
.tlh-frame { position: relative; }
.tlh-track { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 4px 8px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 48px;
  scrollbar-width: thin; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.tlh-frame.at-start .tlh-track { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%); }
.tlh-frame.at-end .tlh-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 100%); }
.tlh-frame.at-start.at-end .tlh-track { -webkit-mask-image: none; mask-image: none; }
.tlh-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tlh-item { position: relative; flex: 0 0 196px; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
/* Axe continu : un segment par événement, à la hauteur des points */
.tlh-item::before { content: ''; position: absolute; left: 0; right: 0; top: 37px; height: 2px; background: color-mix(in srgb, var(--tl) 35%, var(--cx-panel-border)); }
.tlh-item:first-child::before { left: 50%; }
.tlh-item:last-child::before { right: 50%; }
.tlh-date { height: 24px; display: flex; align-items: flex-end; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--cx-muted); white-space: nowrap; transition: color .15s; }
.tlh-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 7px 0 14px; border-radius: 50%; background: var(--cx-panel); box-shadow: inset 0 0 0 2.5px var(--tl); transition: transform .15s, box-shadow .15s; }
.tlh-card { flex: 1; display: flex; align-items: flex-start; width: calc(100% - 16px); min-height: 74px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cx-panel-border);
  background: color-mix(in srgb, var(--cx-panel) 92%, var(--cx-text) 8%); color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.tlh-card:hover { border-color: color-mix(in srgb, var(--tl) 50%, var(--cx-panel-border)); transform: translateY(-1px); }
.tlh-title { font-size: 14px; line-height: 19px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tlh-item.on .tlh-date { color: var(--tl); }
.tlh-item.on .tlh-dot { background: var(--tl); transform: scale(1.35); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl) 25%, transparent); }
.tlh-item.on .tlh-card { border-color: var(--tl); background: color-mix(in srgb, var(--tl) 14%, var(--cx-panel)); }
.tlh-nav { position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; margin-top: -4px; border-radius: 50%; border: 1px solid var(--cx-panel-border); background: var(--cx-panel);
  color: var(--cx-text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(10, 8, 30, .25); transition: opacity .2s; }
.tlh-nav .icon { width: 18px; height: 18px; }
.tlh-nav.prev { left: -6px; } .tlh-nav.next { right: -6px; }
.tlh-nav:disabled { opacity: 0; pointer-events: none; }
.tlh-detail { margin-top: 18px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--cx-panel-border); border-top: 3px solid var(--tl); background: color-mix(in srgb, var(--cx-panel) 94%, var(--cx-text) 6%); }
.tlh-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tlh-detail-date { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tl) 20%, transparent); color: var(--tl); font-size: 13px; font-weight: 700; }
.tlh-detail h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--cx-text); flex: 1; min-width: 180px; }
.tlh-step { font-size: 12.5px; color: var(--cx-muted); }
.tlh-steps { display: flex; gap: 4px; }
.tlh-nav-s { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--cx-panel-border); background: none; color: var(--cx-text); cursor: pointer; }
.tlh-nav-s:disabled { opacity: .35; cursor: default; }
.tlh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin-top: 14px; }
.tlh-fact-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--cx-muted); }
.tlh-fact p { margin: 5px 0 0; font-size: 14.5px; line-height: 22px; color: var(--cx-desc); }
@media (max-width: 639px) {
  .tlh-item { flex-basis: 158px; }
  .tlh-nav { display: none; }
  .tlh-detail { padding: 16px; }
}
.device-slot { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
.device-row.empty .t { color: var(--text-3); font-weight: 450; }
.device-row.empty .device-ico { opacity: .55; }
.device-rule { align-items: flex-start; gap: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 13.5px; line-height: 1.45; font-weight: 500; border-radius: inherit; }
.device-rule .icon { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.card > .device-rule:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ---------- Accueil : textes ramenés à une taille confortable (05/10) ----------
   Mise en page inchangée (calée sur la maquette) ; seuls les textes sont réduits d'environ 15 %. */
@media (min-width: 1024px) {
  .home3 .h3-hello { font-size: 15px; line-height: 21px; }
  .home3 .h3-greet h1 { font-size: 42px; line-height: 48px; }
  .home3 .h3-wave { font-size: 36px; margin-left: 10px; vertical-align: 3px; }
  .home3 .h3-sub { font-size: 15.5px; line-height: 22px; }
  .home3 .h3-date { font-size: 13px; }
  .home3 .h3-flag-label small { font-size: 11px; }
  .home3 .h3-flag-label b { font-size: 13.5px; line-height: 19px; }
  .home3 .h3-flag-label span { font-size: 12.5px; line-height: 18px; }
  .home3 .h3-pill { font-size: 11.5px; height: 34px; }
  .home3 .h3-daily h2 { font-size: 37px; line-height: 41px; }
  .home3 .h3-daily p { font-size: 15px; line-height: 23px; }
  .home3 .h3-cta { height: 52px; font-size: 15.5px; }
  .home3 .h3-count { font-size: 12px; }
  .home3 .h3-q { font-size: 14.5px; line-height: 19px; }
  .home3 .h3-opt { font-size: 12.5px; }
  .home3 .h3-opt > span:first-child { font-size: 12px; }
  .home3 .h3-side-head { font-size: 15.5px; }
  .home3 .h3-exam b { font-size: 16px; line-height: 21px; }
  .home3 .h3-exam .faint, .home3 .h3-exam > .row:last-child .faint { font-size: 13.5px !important; line-height: 19px; }
  .home3 .h3-days { font-size: 13.5px; height: 38px; }
  .home3 .h3-steps-title { font-size: 13.5px; }
  .home3 .h3-steps a { font-size: 14px; }
  .home3 .h3-section-head h3 { font-size: 15.5px; }
  .home3 .h3-section-head a { font-size: 12.5px; }
  .home3 .h3-subj-name { font-size: 13px; }
  .home3 .h3-subj b { font-size: 15px; }
  .home3 .h3-subj > span { font-size: 12.5px !important; }
}

/* ---------- Daily Revision : carte de la streak (maquette du user, data/generated/maquette-daily.jpg) ----------
   Toutes les tailles suivent la largeur de la carte (--u = 1 px de la maquette, carte de 1437 px),
   avec un minimum pour rester lisible ; la carte est sombre dans les deux thèmes. */
.streak-card { container-type: inline-size; position: relative; overflow: hidden; border-radius: 26px; border: 1.5px solid rgba(146, 124, 230, .28);
  background: radial-gradient(42% 55% at 73% 34%, rgba(255, 104, 48, .11), transparent 70%),
    linear-gradient(115deg, #15122a 0%, #16132b 46%, #1c1733 58%, #1a1630 100%);
  color: #f5f3ff; box-shadow: 0 24px 60px -30px rgba(20, 10, 60, .7); }
.streak-card::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .95), transparent); }
.sc-in { --u: calc(100cqw / 1437); padding: max(22px, calc(58 * var(--u))) max(22px, calc(60 * var(--u))) max(22px, calc(62 * var(--u))); }
.sc-caps { font-size: max(10.5px, calc(21 * var(--u))); letter-spacing: .3em; text-transform: uppercase; color: #d8d2ef; font-weight: 500; }
.sc-caps b { color: #fff; font-weight: 650; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-tier { display: inline-flex; align-items: center; gap: max(8px, calc(14 * var(--u))); font-size: max(12.5px, calc(22 * var(--u))); color: #f1c7a6; letter-spacing: .01em; }
.sc-tier i { width: max(6px, calc(10 * var(--u))); height: max(6px, calc(10 * var(--u))); border-radius: 50%; background: #a78bfa; }
.sc-hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: max(150px, calc(330 * var(--u))); }
.sc-count { display: flex; flex-direction: column; padding: max(10px, calc(38 * var(--u))) 0 0 max(8px, calc(56 * var(--u))); }
.sc-count b { position: relative; align-self: flex-start; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; font-size: max(64px, calc(205 * var(--u))); line-height: .86; font-weight: 520; letter-spacing: -.04em; color: #f6f4ff; }
.sc-count b i { position: absolute; right: calc(-.24em); bottom: .1em; width: .07em; height: .07em; min-width: 7px; min-height: 7px; border-radius: 50%; background: #a78bfa; }
.sc-count span { margin: max(10px, calc(40 * var(--u))) 0 0 calc(-22 * var(--u)); font-size: max(17px, calc(40 * var(--u))); letter-spacing: -.025em; color: #e5ddff; }
.streak-card hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .08); margin: max(14px, calc(48 * var(--u))) 0 max(14px, calc(40 * var(--u))); }
.sc-mhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sc-next { font-size: max(12.5px, calc(22 * var(--u))); color: #c9c3e3; letter-spacing: .02em; }
.sc-miles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: max(14px, calc(40 * var(--u))) 0 0; padding: 0; list-style: none; }
.sc-miles li { --n: max(30px, calc(56 * var(--u))); position: relative; display: flex; flex-direction: column; align-items: center; }
.sc-miles li + li::before { content: ''; position: absolute; top: calc(var(--n) / 2); height: 1px; background: rgba(255, 255, 255, .13);
  left: calc(-50% + var(--n) / 2 + max(4px, calc(8 * var(--u)))); right: calc(50% + var(--n) / 2 + max(4px, calc(8 * var(--u)))); }
.sc-miles li.done + li::before { background: rgba(167, 139, 250, .45); }
.sc-node { display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: max(8px, calc(13 * var(--u))); background: #1f1b35;
  color: #b7b0d4; font-size: max(12px, calc(20 * var(--u))); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03); }
.sc-node .icon { width: 46%; height: 46%; stroke-width: 2.4; }
.sc-miles li.next .sc-node { background: #352a4d; color: #e9e3ff; }
.sc-miles li.done .sc-node { background: linear-gradient(140deg, #9a6bff, #7b4cf6); color: #fff; box-shadow: 0 6px 18px -6px rgba(140, 90, 255, .8); }
.sc-lab { margin-top: max(8px, calc(20 * var(--u))); font-size: max(11px, calc(19 * var(--u))); color: #a7a0c3; white-space: nowrap; letter-spacing: .02em; }
.sc-miles li.done .sc-lab { color: #f2efff; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sc-session .sc-caps { font-size: max(10.5px, calc(18 * var(--u))); color: #b9b1d6; }
.sc-subj { display: flex; align-items: center; gap: max(10px, calc(16 * var(--u))); margin-top: max(10px, calc(30 * var(--u))); font-size: max(16px, calc(28 * var(--u))); color: #fff; letter-spacing: .005em; }
.sc-subj > i { width: max(9px, calc(13 * var(--u))); height: max(9px, calc(13 * var(--u))); border-radius: 3px; flex: none; }
.sc-subj .sc-ok { width: 1em; height: 1em; color: #6ee7b7; }
.sc-meta { margin: max(4px, calc(14 * var(--u))) 0 0 max(19px, calc(29 * var(--u))); font-size: max(13px, calc(20 * var(--u))); color: #a69fc4; letter-spacing: .03em; }
.sc-meta span { margin: 0 .7em; }
.sc-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: max(210px, calc(372 * var(--u))); height: max(46px, calc(88 * var(--u)));
  padding: 0 max(18px, calc(38 * var(--u))); border-radius: max(12px, calc(18 * var(--u))); border: 1.5px solid rgba(196, 176, 255, .55);
  background: linear-gradient(90deg, #7c4dff, #6a3cf3); color: #fff; font: inherit; font-size: max(15px, calc(24 * var(--u))); font-weight: 500; letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  box-shadow: 0 12px 32px -12px rgba(120, 70, 255, .85); transition: filter .15s, transform .15s; }
.sc-btn .icon { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.sc-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.sc-btn:disabled { opacity: .5; cursor: default; }

/* Flamme animée */
.sc-flame { position: relative; flex: none; width: max(84px, calc(190 * var(--u))); height: max(116px, calc(262 * var(--u))); margin-right: calc(240 * var(--u)); }
.sc-flame svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 calc(22 * var(--u)) rgba(255, 96, 32, .45)); }
.sc-flame g { transform-box: fill-box; transform-origin: 50% 100%; }
.sc-flame .fl-o { animation: fl-a 2.4s ease-in-out infinite; }
.sc-flame .fl-m { animation: fl-b 1.7s ease-in-out infinite; }
.sc-flame .fl-c { animation: fl-c 1.15s ease-in-out infinite; }
.sc-glow { position: absolute; inset: -45% -60%; background: radial-gradient(closest-side, rgba(255, 112, 40, .32), rgba(255, 80, 40, .08) 55%, transparent); animation: fl-glow 2.6s ease-in-out infinite; }
.sc-flame .sp { position: absolute; bottom: 58%; width: 3px; height: 3px; border-radius: 50%; background: #ffb46a; box-shadow: 0 0 6px #ff7a2a; opacity: 0; animation: fl-spark 3s ease-out infinite; }
.sc-flame .sp1 { left: 38%; animation-delay: .2s; } .sc-flame .sp2 { left: 58%; animation-delay: 1.1s; width: 2px; height: 2px; }
.sc-flame .sp3 { left: 47%; animation-delay: 1.9s; } .sc-flame .sp4 { left: 64%; animation-delay: 2.5s; width: 2px; height: 2px; }
@keyframes fl-a { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.985, 1.035) skewX(-1.5deg); } 50% { transform: scale(1.015, .975) skewX(.8deg); } 75% { transform: scale(.99, 1.025) skewX(1.6deg); } }
@keyframes fl-b { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.97, 1.06) skewX(2.2deg); } 60% { transform: scale(1.03, .96) skewX(-1.6deg); } 80% { transform: scale(.99, 1.03) skewX(-2.4deg); } }
@keyframes fl-c { 0%, 100% { transform: scale(1, 1) translateY(0); } 40% { transform: scale(.95, 1.08) translateY(-1%); } 70% { transform: scale(1.04, .94) translateY(1%); } }
@keyframes fl-glow { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes fl-spark { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -140%) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .sc-flame g, .sc-glow, .sc-flame .sp { animation: none; } }
@container (max-width: 560px) {
  .sc-flame { margin-right: 4%; }
  .sc-lab { font-size: 10px; letter-spacing: 0; }
  .sc-btn { width: 100%; }
  .sc-foot { flex-direction: column; align-items: stretch; }
}

/* Accueil : « Your 15-minute session is ready. » sur une seule ligne (demande du user, 05/10).
   Le titre passe à 23 px pour tenir à gauche des cartes, qui restent à leur place. */
@media (min-width: 1024px) {
  .home3 .h3-daily-text { max-width: none; }
  .home3 .h3-daily h2 { font-size: 23px; line-height: 29px; max-width: none; white-space: nowrap; }
}
@media (max-width: 1023px) { .home3 .h3-daily h2 { white-space: nowrap; font-size: min(30px, 5.6vw); } }
@media (min-width: 760px) and (max-width: 1023px) { .home3 .h3-daily h2 { font-size: 22px; } }
/* Téléphone : le titre sur une ligne débordait à droite et décentrait la carte (demande du user, 08/10).
   Badge, titre, texte et bouton centrés ; le titre passe sur deux lignes équilibrées. */
@media (max-width: 759px) {
  .home3 .h3-daily { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .home3 .h3-daily-text { align-items: center; text-align: center; }
  .home3 .h3-daily h2 { white-space: normal; text-wrap: balance; font-size: 26px; line-height: 1.15; margin: 18px 0 10px; }
  .home3 .h3-daily p { max-width: 320px; }
  .home3 .h3-cta { width: 100%; min-width: 0; margin-top: 22px; }
}

/* Accueil : cartes du quiz en éventail (demande du user, 05/10) — toutes pivotent autour d'un même
   point sous le paquet, à angle régulier, la carte de la question devant ; ouverture animée. */
@media (min-width: 760px) {
  .home3 .h3-qcard { transform-origin: 50% 150%; transform: translate(-50%, -50%) rotate(var(--fan)) scale(.93); animation: h3-fan .9s var(--ease) both; }
  .home3 .h3-qcard.back3 { --fan: -9deg; opacity: .28; }
  .home3 .h3-qcard.back2 { --fan: -5deg; opacity: .42; }
  .home3 .h3-qcard.back1 { --fan: -1deg; opacity: .62; }
  .home3 .h3-qcard.front { --fan: 4deg; transform: translate(-50%, -50%) rotate(var(--fan)) scale(.93); }
  .home3 .h3-qcard:not(.front) { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface))); }
}
@keyframes h3-fan { from { transform: translate(-50%, -50%) rotate(2deg) scale(.93); } }
@media (prefers-reduced-motion: reduce) { .home3 .h3-qcard { animation: none; } }

/* Accueil : bloc « Next exam / Next steps » et titres des matières un peu plus petits (05/10). */
@media (min-width: 1024px) {
  .home3 .h3-side-head { font-size: 14.5px; }
  .home3 .h3-exam b { font-size: 14.5px; line-height: 19px; }
  .home3 .h3-exam .faint, .home3 .h3-exam > .row:last-child .faint { font-size: 12.5px !important; line-height: 17px; }
  .home3 .h3-days { font-size: 12.5px; height: 34px; }
  .home3 .h3-steps-title { font-size: 12.5px; }
  .home3 .h3-steps a { font-size: 13px; }
  .home3 .h3-subj-name { font-size: 12.5px; }
}

/* Page matière : une carte par Week, qui ouvre directement la leçon de la Week. */
.cx-week-link { color: inherit; transition: border-color .15s, background .15s; }
.cx-week-link:hover { border-color: var(--cx-row-bar); }
.cx-week-link .cx-week-head { align-items: center; }
.cx-week-link .cx-row-resume { margin-left: auto; white-space: nowrap; }
.cx-week-link .cx-row-resume + .cx-week-chev { margin-left: 14px; }
.cx-week-link .cx-week-head { flex-wrap: nowrap; }
.cx-week-link .cx-week-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Frise : toujours violette (quelle que soit la couleur de la matière), plus contrastée. */
.tlh { --tl: #a284ff; }
:root[data-theme="light"] .tlh { --tl: #6d3df0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tlh { --tl: #6d3df0; } }
.tlh-item::before { height: 3px; top: 36.5px; background: color-mix(in srgb, var(--tl) 60%, var(--cx-panel-border)); }
.tlh-dot { background: color-mix(in srgb, var(--tl) 30%, var(--cx-panel)); box-shadow: inset 0 0 0 2.5px var(--tl); }
.tlh-item.on .tlh-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl) 35%, transparent), 0 0 14px color-mix(in srgb, var(--tl) 70%, transparent); }
.tlh-card { border-color: color-mix(in srgb, var(--tl) 28%, var(--cx-panel-border)); }
.tlh-item.on .tlh-card { background: color-mix(in srgb, var(--tl) 22%, var(--cx-panel)); box-shadow: 0 0 0 1px var(--tl), 0 6px 22px -8px color-mix(in srgb, var(--tl) 70%, transparent); }
.tlh-detail-date { background: color-mix(in srgb, var(--tl) 26%, transparent); }
.tlh-card:hover { border-color: color-mix(in srgb, var(--tl) 65%, var(--cx-panel-border)); }

/* Bandeau de la page matière : texte centré verticalement, même marge en haut et en bas
   (un titre sur deux lignes ne colle plus au bord du haut). */
@media (min-width: 640px) {
  .cx-hero-text { justify-content: center; padding-top: 22px; padding-bottom: 22px; }
}
/* Bandeau sans bouton : titre et description centrés verticalement, quelle que soit la largeur. */
.cx-hero-text { justify-content: center; padding-top: 0; padding-bottom: 0; }
.cx-hero .cx-hero-sub { margin-top: 6px; }
@media (max-width: 639px) { .cx-hero-text { min-height: 240px; padding: 24px 20px; } }

/* Accueil, carte Daily : titre, texte et bouton centrés verticalement sous le badge (05/10).
   Les cartes du quiz (positionnées en absolu) ne bougent pas. */
@media (min-width: 1024px) {
  .home3 .h3-daily { display: flex; flex-direction: column; padding-bottom: 32px; }
  .home3 .h3-daily-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .home3 .h3-daily-text h2 { margin-top: auto; }
  .home3 .h3-daily-text .h3-cta { margin-bottom: auto; }
}

/* Fiche de révision d'une Week : une seule feuille, blocs numérotés, mots clés surlignés au fluo. */
.rs-paper { --paper: #fffdf8; --ink: #1d1b2e; --ink-2: #4a4763; --rule: #e8e3d6;
  position: relative; margin-top: 18px; padding: 34px 40px 38px; border-radius: 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 18px 40px -24px rgba(20, 14, 60, .35); }
:root[data-theme="dark"] .rs-paper { --paper: #17142e; --ink: #f1efff; --ink-2: #bdb8e0; --rule: #2a2552; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rs-paper { --paper: #17142e; --ink: #f1efff; --ink-2: #bdb8e0; --rule: #2a2552; } }
.rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 2px solid var(--ink); }
.rs-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rs-head h2 { margin: 4px 0 0; font-size: 28px; line-height: 34px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.rs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.rs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rs-legend i { width: 18px; height: 9px; border-radius: 3px; background: var(--mk); }
/* Une couleur de surligneur par type de bloc. */
.rs-paper .k-definition { --mk: rgba(250, 204, 21, .55); --mk-line: #e0b100; }
.rs-paper .k-concept { --mk: rgba(167, 139, 250, .5); --mk-line: #8b6cff; }
.rs-paper .k-formula { --mk: rgba(96, 165, 250, .45); --mk-line: #3b82f6; }
.rs-paper .k-method { --mk: rgba(74, 222, 128, .45); --mk-line: #22c55e; }
.rs-paper .k-comparison { --mk: rgba(244, 114, 182, .42); --mk-line: #ec4899; }
.rs-paper .k-dates { --mk: rgba(45, 212, 191, .45); --mk-line: #14b8a6; }
.rs-paper .k-example { --mk: rgba(251, 146, 60, .45); --mk-line: #f97316; }
.rs-cols { column-gap: 44px; }
@media (min-width: 900px) { .rs-cols { column-count: 2; column-rule: 1px dashed var(--rule); } }
.rs-block { break-inside: avoid; margin: 0 0 26px; }
.rs-block h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 17.5px; line-height: 24px; font-weight: 720; color: var(--ink); }
.rs-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mk-line); color: var(--ink); font-size: 12.5px; font-weight: 750; transform: translateY(-1px); }
.rs-title { background: linear-gradient(transparent 62%, var(--mk) 62%); padding: 0 2px; }
.rs-md { color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.rs-md h1, .rs-md h2, .rs-md h3, .rs-md h4 { margin: 14px 0 6px; font-size: 12.5px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rs-md > :first-child { margin-top: 0; }
.rs-md p { margin: 6px 0; }
.rs-md ul, .rs-md ol { margin: 6px 0; padding-left: 20px; }
.rs-md li { margin: 3px 0; }
.rs-md li::marker { color: var(--mk-line); }
.rs-md strong, .rs-md b { color: var(--ink); font-weight: 680; background: linear-gradient(transparent 55%, var(--mk) 55%); padding: 0 1px; border-radius: 2px; }
.rs-md blockquote { margin: 10px 0; padding: 9px 14px; border: 0; border-left: 4px solid var(--mk-line); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--mk-line) 9%, transparent); color: var(--ink); font-style: normal; }
.rs-md blockquote p { margin: 2px 0; }
.rs-md code { color: var(--ink); }
.rs-md table { font-size: 13.5px; }
@media (max-width: 639px) { .rs-paper { padding: 22px 18px 24px; } .rs-head h2 { font-size: 22px; line-height: 28px; } }

/* Fiche de révision rendue en image (server/tools/render/render-sheets.cjs) : feuille claire, pied de page avec le logo. */
body.rs-render { margin: 0; padding: 0; background: #fff; }
.rs-paper.rs-print { width: 1240px; margin: 0; padding: 64px 76px 40px; border: 0; border-radius: 0; box-shadow: none; }
.rs-print .rs-head h2 { font-size: 34px; line-height: 40px; }
.rs-print .rs-cols { column-count: 2; column-gap: 56px; column-rule: 1px dashed var(--rule); }
.rs-print .rs-md { font-size: 15.5px; }
.rs-print .rs-block h3 { font-size: 19px; line-height: 26px; }
.rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--ink); color: var(--ink-2); font-size: 13px; }
.rs-foot img { display: block; height: 30px; width: auto; }

/* Affichage de l'image dans la page : feuille centrée, ni clic droit ni glisser-déposer, agrandissable. */
.rs-paper .rs-md :is(h1, h2, h3, h4) { margin: 14px 0 6px; font-size: 12.5px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rs-paper .rs-md > :first-child { margin-top: 0; }

/* Daily Revision sur ordinateur : la carte de la streak prend la hauteur de la colonne de droite
   (quêtes, jokers, 30 derniers jours) ; l'espace en plus va au bloc compteur + flamme. */
@media (min-width: 1100px) {
  .daily-dash { align-items: stretch; }
  .daily-dash > .stack:first-child { display: flex; flex-direction: column; }
  .daily-dash .streak-card { flex: 1; display: flex; flex-direction: column; }
  .daily-dash .sc-in { flex: 1; display: flex; flex-direction: column; }
  .daily-dash .sc-hero { flex: 1; }
}

/* ---------- Mon plan : calendrier de la semaine (façon Google Agenda) ---------- */
.pc-connect { margin-bottom: 14px; }
.pc { padding: 0; overflow: hidden; }
.pc.pc-fit { display: flex; flex-direction: column; }
.pc-fit .pc-bar, .pc-fit .pc-daytabs, .pc-fit .pc-head { flex: none; }
.pc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pc-range { margin-left: 6px; font-size: 16px; font-weight: 620; letter-spacing: -.01em; }
.pc-legend { gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.pc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pc-legend i.ev { background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pc-daytabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 10px 10px 6px; border-bottom: 1px solid var(--border); }
.pc-daytabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.pc-daytabs small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pc-daytabs b { font-size: 15px; }
.pc-daytabs .is-today b { color: var(--accent-text); }
.pc-daytabs .on { background: var(--accent); color: var(--on-accent); }
.pc-daytabs .on b { color: inherit; }
.pc-head { display: grid; grid-template-columns: 56px repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.pc-dh { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 9px; border-left: 1px solid var(--border); min-width: 0; }
.pc-dh small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.pc-dh b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; font-weight: 560; }
.pc-dh.is-today small { color: var(--accent-text); }
.pc-dh.is-today b { background: var(--accent); color: var(--on-accent); }
.pc-dh.past { opacity: .5; }
.pc-min { font-size: 11px; color: var(--text-3); }
.pc-exam { font-size: 10.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pc-scroll { position: relative; }
.pc-fit .pc-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.pc-fit .pc-head { overflow-y: hidden; scrollbar-gutter: stable; } /* même gouttière que la grille : colonnes alignées */
.pc-grid { position: relative; display: grid; grid-template-columns: 56px repeat(var(--n), minmax(0, 1fr)); height: var(--h); user-select: none; -webkit-user-select: none; }
.pc-times { position: relative; }
.pc-times span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pc-times span:first-child { transform: none; }
.pc-col { position: relative; border-left: 1px solid var(--border); }
.pc-col.past { background: color-mix(in srgb, var(--bg-sunken) 45%, transparent); }
.pc-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); opacity: .7; }
.pc-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--danger); z-index: 3; }
.pc-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.pc-ev, .pc-s { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 4px 7px; border-radius: 7px; text-align: left; font: inherit; }
.pc-ev { background: var(--bg-sunken); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pc-ev b, .pc-s b { font-size: 12.5px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-ev small, .pc-s small { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.pc-s { z-index: 2; border: 0; cursor: grab; color: #fff; background: color-mix(in srgb, var(--c) 82%, #1a1530); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 60%, #fff), 0 2px 8px -4px rgba(0, 0, 0, .4); }
.pc-s:hover { filter: brightness(1.08); }
.pc-s.moved { box-shadow: inset 3px 0 0 #fff, 0 2px 8px -4px rgba(0, 0, 0, .4); }
.pc-s.ghost { z-index: 4; opacity: .85; cursor: grabbing; outline: 2px dashed color-mix(in srgb, var(--c) 70%, #fff); pointer-events: none; }
@media (max-width: 759px) { .pc-bar { padding: 12px; } .pc-head, .pc-grid { grid-template-columns: 48px minmax(0, 1fr); } }
.pc-ev.short, .pc-s.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.pc-ev.short b, .pc-s.short b { flex: 0 1 auto; min-width: 0; }
.pc-ev.short small, .pc-s.short small { flex: none; }
.pc-col { container-type: inline-size; }
@container (max-width: 190px) { .pc-s.short small { display: none; } }

/* ---------- Focus calé sur la maquette du user (data/generated/maquette-focus.png, 05/10) ---------- */
.fz { --fz-tile: var(--surface); --fz-line: var(--border); --fz-disc: radial-gradient(circle, var(--surface) 55%, color-mix(in srgb, var(--bg) 60%, var(--surface)) 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fz { --fz-disc: radial-gradient(circle, color-mix(in srgb, var(--bg) 92%, #000) 55%, color-mix(in srgb, var(--surface) 70%, var(--bg)) 100%); } }
:root[data-theme="dark"] .fz { --fz-disc: radial-gradient(circle, color-mix(in srgb, var(--bg) 92%, #000) 55%, color-mix(in srgb, var(--surface) 70%, var(--bg)) 100%); }
.fz-head { align-items: center; }
.fz-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.fz-head .sub { font-size: 17px; margin-top: 6px; }
.fz-head-r { display: flex; align-items: center; gap: 24px; }
.fz-dots { display: flex; gap: 10px; }
.fz-dots i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 26%, transparent); }
.fz-dots i.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px -2px var(--accent); }
.fz-modes { display: flex; gap: 10px; }
.fz-modes button { width: 98px; height: 46px; border-radius: 12px; border: 1px solid var(--fz-line); background: var(--fz-tile); color: var(--text); font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; transition: background .15s; }
.fz-modes button.on { background: color-mix(in srgb, var(--accent) 52%, #140d40); border-color: transparent; color: #fff; font-weight: 700; }
.fz-modes button:disabled:not(.on) { opacity: .5; cursor: default; }
.fz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 513px; align-items: start; margin-top: 36px; }
.fz-timer { display: flex; flex-direction: column; align-items: center; }
.fz-stage { position: relative; width: 602px; max-width: calc(100% - 24px); padding-top: 18px; display: flex; justify-content: center; margin-top: 13px; }
.fz-gear-wrap { position: absolute; top: 0; right: 0; z-index: 2; }
.fz-gear { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--fz-line); background: var(--fz-tile); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.fz-gear .icon { width: 22px; height: 22px; }
.fz-gear:hover { border-color: var(--border-strong); }
.fz-pop { position: absolute; top: 56px; right: 0; width: 280px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; }
.fz-pop b { font-size: 14px; }
.fz-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-2); }
.fz-opt em { font-style: normal; color: var(--text-3); font-size: 12.5px; }
.fz-ring { position: relative; width: 430px; max-width: 100%; aspect-ratio: 1; margin: -10px; }
.fz-ring::before { content: ''; position: absolute; inset: 37px; border-radius: 50%; background: var(--fz-disc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent); }
.fz-ring svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.fz-track { stroke: color-mix(in srgb, var(--accent) 16%, transparent); }
.fz-prog { stroke: var(--ring); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ring) 75%, transparent)); transition: stroke-dashoffset .3s linear; }
.fz-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fz-v span { font-size: 18px; color: var(--text-2); }
.fz-v b { font-size: 66px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 4px 0 6px; }
.fz-v small { font-size: 18px; font-weight: 700; color: var(--ring); text-transform: uppercase; letter-spacing: .01em; }
.fz-controls { display: flex; align-items: center; gap: 54px; margin-top: 22px; }
.fz-round { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--fz-line); background: var(--fz-tile); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: transform .12s, border-color .15s; }
.fz-round .icon { width: 28px; height: 28px; }
.fz-round:hover:not(:disabled) { border-color: var(--border-strong); }
.fz-round:active:not(:disabled) { transform: scale(.96); }
.fz-round:disabled { cursor: default; color: var(--text-3); }
.fz-main { width: 88px; height: 88px; border: 0; background: var(--accent); color: #fff; box-shadow: 0 10px 40px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.fz-main .icon { width: 32px; height: 32px; }
.fz-side { display: flex; flex-direction: column; gap: 20px; }
.fz-card { background: var(--fz-tile); border: 1px solid var(--fz-line); border-radius: 16px; padding: 22px; }
.fz-title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.fz-title .icon { width: 20px; height: 20px; }
.fz-field { margin-top: 14px; }
.fz-field + .fz-field { margin-top: 18px; }
.fz-field label { display: block; font-size: 14.5px; font-weight: 500; margin-bottom: 8px; }
.fz-field .select, .fz-field .input { height: 48px; font-size: 15px; }
.fz-amb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-top: 16px; }
.fz-amb-t { position: relative; height: 114px; border-radius: 12px; overflow: hidden; border: 1px solid var(--fz-line); background: var(--art) center / cover no-repeat, #15122a; color: #fff; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 4px 12px; isolation: isolate; transition: transform .12s; }
.fz-amb-t::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(10,8,22,.05) 30%, rgba(10,8,22,.82) 82%); }
.fz-amb-t:hover { transform: translateY(-1px); }
.fz-amb-t.on { border: 2px solid #8b6dff; box-shadow: 0 0 18px -4px rgba(139,109,255,.7); }
.fz-amb-t.on::after { background: linear-gradient(rgba(123,92,255,.28), rgba(30,18,70,.85) 82%); }
.fz-amb-i { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); opacity: .9; }
.fz-amb-i .icon { width: 22px; height: 22px; }
.fz-amb-l { font-size: 13px; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.fz-amb-t.on .fz-amb-l { color: #b9a6ff; }
.fz-vol { gap: 10px; margin-top: 14px; font-size: 12.5px; }
.fz-stats { display: grid; grid-template-columns: .85fr 1.2fr 1fr; margin-top: 20px; }
.fz-stats > div { display: flex; flex-direction: column; gap: 4px; padding-left: 48px; border-left: 1px solid var(--fz-line); }
.fz-stats > div:first-child { padding-left: 6px; border-left: 0; }
.fz-stats b { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.fz-stats span { font-size: 14px; color: var(--text-2); }
.fz-recent { margin-top: 18px; }
@media (max-width: 1279px) {
  .fz-grid { grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; }
  .fz-amb { gap: 8px; }
  .fz-stats > div { padding-left: 24px; }
}
@media (max-width: 1023px) {
  .fz-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 20px; }
  .fz-side { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 639px) {
  .fz-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fz-head h1 { font-size: 32px; }
  .fz-head .sub { font-size: 15px; }
  .fz-head-r { width: 100%; justify-content: space-between; gap: 12px; }
  .fz-dots { gap: 7px; } .fz-dots i { width: 14px; height: 14px; }
  .fz-modes button { width: 80px; height: 40px; font-size: 15px; }
  .fz-stage { width: 100%; }
  .fz-ring { width: min(300px, 78vw); margin: 0; }
  .fz-ring::before { inset: 9%; }
  .fz-v span { font-size: 15px; } .fz-v b { font-size: 50px; } .fz-v small { font-size: 15px; }
  .fz-gear { width: 40px; height: 40px; } .fz-pop { width: min(280px, 86vw); }
  .fz-controls { gap: 32px; margin-top: 18px; }
  .fz-round { width: 64px; height: 64px; } .fz-main { width: 70px; height: 70px; }
  .fz-round .icon { width: 22px; height: 22px; } .fz-main .icon { width: 26px; height: 26px; }
  .fz-card { padding: 18px; }
  .fz-amb { gap: 6px; } .fz-amb-t { height: 92px; padding-bottom: 9px; } .fz-amb-l { font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; }
  .fz-stats > div { padding-left: 14px; } .fz-stats b { font-size: 22px; } .fz-stats span { font-size: 12.5px; }
}
/* Cours : matière réservée aux offres payantes (Starter = 3 matières). */
.course-card.is-locked .course-art { filter: grayscale(.7) brightness(.6); }
.course-card.is-locked .course-pct, .course-card.is-locked .course-line { opacity: .5; }
.course-lock { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(12, 9, 26, .7); border: 1px solid rgba(255, 255, 255, .18); color: #f4d27a; font-size: 12.5px; font-weight: 650; backdrop-filter: blur(6px); }
.course-lock .icon { width: 14px; height: 14px; }
/* Réglages → Abonnement (views/billing.js) */
.bill-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-2); text-decoration: none; margin-bottom: 10px; }
.bill-back:hover { color: var(--text); } .bill-back .icon { width: 16px; height: 16px; }
.bill-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 28px; }
@media (max-width: 760px) { .bill-top { grid-template-columns: 1fr; } }
.bill-current .btn .icon { width: 16px; height: 16px; }
.bill-u { margin-top: 14px; } .bill-u b { font-size: 14px; font-weight: 600; }
.bill-quota { margin-top: 6px; font-size: 13px; }
.bill-bar { height: 7px; border-radius: 7px; background: var(--bg-sunken, rgba(0,0,0,.06)); overflow: hidden; margin-top: 6px; }
.bill-bar span { display: block; height: 100%; border-radius: 7px; background: var(--brand-grad, var(--accent)); }
.bill-h2 { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 12px 4px; }
.bill-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.bill-ri { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text, var(--accent)); margin-right: 4px; }
.bill-ri.paid { background: linear-gradient(135deg, #f7d774, #e8a93a); color: #4a3200; }
.bill-ri.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.bill-ri .icon { width: 17px; height: 17px; }
.bill-faq details { padding: 14px 18px; border-top: 1px solid var(--border); } .bill-faq details:first-child { border-top: 0; }
.bill-faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; } .bill-faq p { margin-top: 8px; font-size: 14px; color: var(--text-2); line-height: 1.55; }
/* Paiement intégré (views/checkout.js) et page de confirmation */
.ck { min-height: 100vh; background: var(--bg); }
.ck-head { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.ck-brand img { height: 26px; width: auto; }
.ck-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; max-width: 1180px; margin: 0 auto; padding: 10px 24px 60px; align-items: start; }
.ck-side { position: sticky; top: 20px; }
.ck-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--success); }
.ck-kicker .icon { width: 14px; height: 14px; }
.ck-side h1 { font-size: 30px; letter-spacing: -.03em; margin: 10px 0 18px; }
.ck-seg { display: flex; width: 100%; margin-bottom: 10px; } .ck-seg button { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.ck-price { margin: 18px 0 6px; } .ck-price b { font-size: 40px; font-weight: 700; letter-spacing: -.04em; } .ck-price span { color: var(--text-3); margin-left: 4px; } .ck-price small { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.ck-feats { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.ck-feats li { display: flex; gap: 9px; align-items: flex-start; } .ck-feats .icon { color: var(--success); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.ck-trust { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.ck-trust div { display: flex; gap: 10px; align-items: flex-start; } .ck-trust .icon { width: 16px; height: 16px; color: var(--accent-text, var(--accent)); flex: none; margin-top: 1px; }
.ck-faq { margin-top: 16px; } .ck-faq details { padding: 12px 2px; border-top: 1px solid var(--border); } .ck-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; } .ck-faq p { margin-top: 6px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.ck-pay { border-radius: 20px; background: var(--surface); border: 1px solid var(--border); padding: 28px 30px; }
.ck-pay h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 16px; }
.ck-account { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--bg-sunken, rgba(0,0,0,.03)); font-size: 14px; margin-bottom: 18px; }
.ck-account .icon { width: 16px; height: 16px; color: var(--text-3); } .ck-account span { color: var(--text-3); } .ck-account b { margin-left: auto; font-weight: 600; }
.ck-element { min-height: 10px; }
.ck-total { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 14px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 15px; } .ck-total b { font-size: 22px; letter-spacing: -.02em; }
.ck-err { color: var(--danger); font-size: 14px; margin: 0 0 12px; }
.ck-submit { width: 100%; justify-content: center; gap: 8px; } .ck-submit .icon { width: 17px; height: 17px; }
.ck-submit .spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.ck-legal { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 12px 0 18px; text-align: center; }
.ck-pay .ck-trust { background: transparent; border: 0; padding: 0; }
.ck-wait { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; }
.ck-done { max-width: 560px; margin: 0 auto; padding: 30px 24px 70px; text-align: center; }
.ck-done h1 { font-size: 32px; letter-spacing: -.03em; margin: 18px 0 8px; } .ck-lead { font-size: 16.5px; color: var(--text-2); }
.ck-badge { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 14%, transparent); animation: ck-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.ck-badge svg { width: 56px; height: 56px; fill: none; stroke: var(--success); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ck-badge circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ck-draw .7s .2s ease-out forwards; } .ck-badge path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ck-draw .45s .75s ease-out forwards; }
.ck-badge.fail { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .ck-badge.fail .icon { width: 36px; height: 36px; }
@keyframes ck-pop { from { transform: scale(.4); opacity: 0; } } @keyframes ck-draw { to { stroke-dashoffset: 0; } }
.ck-recap { margin: 26px 0 0; padding: 6px 20px; text-align: left; } .ck-recap div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14.5px; } .ck-recap div:first-child { border-top: 0; } .ck-recap span { color: var(--text-3); }
.ck-unlocked { margin-top: 22px; text-align: left; } .ck-unlocked h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 10px; }
.ck-unlocked ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14.5px; } .ck-unlocked li { display: flex; gap: 9px; } .ck-unlocked .icon { color: var(--success); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.ck-next { margin-top: 28px; width: 100%; justify-content: center; gap: 8px; }
@media (max-width: 900px) { .ck-grid { grid-template-columns: 1fr; gap: 22px; } .ck-side { position: static; } .ck-faq { display: none; } .ck-pay { min-height: 0; } }
/* Paiement : repères de confiance (étapes, récapitulatif de commande, engagements, mentions Stripe) */
.ck-head { gap: 20px; border-bottom: 1px solid var(--border); max-width: none; padding: 16px max(24px, calc((100% - 1180px) / 2)); background: var(--surface); }
.ck-steps { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--text-3); }
.ck-steps li { display: flex; align-items: center; gap: 8px; }
.ck-steps li + li::before { content: ''; width: 34px; height: 2px; border-radius: 2px; background: var(--border-strong, var(--border)); margin-right: 2px; }
.ck-steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--border-strong, var(--border)); }
.ck-steps .icon { width: 13px; height: 13px; }
.ck-steps li.done { color: var(--text-2); } .ck-steps li.done span { background: var(--success); border-color: var(--success); color: #fff; }
.ck-steps li.on { color: var(--text); font-weight: 650; } .ck-steps li.on span { background: #6c47ff; border-color: #6c47ff; color: #fff; }
.ck-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--success); } .ck-secure .icon { width: 15px; height: 15px; }
.ck-grid { padding-top: 34px; }
.ck-side h1 { margin-top: 0; }
.ck-toggles { display: grid; gap: 8px; margin-bottom: 18px; } .ck-toggles .ck-seg { margin: 0; }
.ck-order { border-radius: 18px; background: var(--surface); border: 1px solid var(--border); padding: 20px 22px; }
.ck-order h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 14px; }
.ck-line { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ck-line b { font-size: 15px; } .ck-line small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.ck-prod { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #6c47ff, #b14dff); color: #fff; }
.ck-prod .icon { width: 20px; height: 20px; }
.ck-row { display: flex; justify-content: space-between; padding: 12px 0 0; font-size: 14px; color: var(--text-2); }
.ck-row.save b { color: var(--success); }
.ck-row.total { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text); font-size: 16px; } .ck-row.total b { font-size: 20px; letter-spacing: -.02em; }
.ck-then { margin: 10px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.ck-incl { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .ck-incl summary { cursor: pointer; font-size: 14px; font-weight: 600; } .ck-incl .ck-feats { margin: 12px 0 2px; font-size: 14px; }
.ck-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.ck-promises div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ck-promises span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); margin-bottom: 6px; }
.ck-promises .icon { width: 16px; height: 16px; } .ck-promises b { font-size: 13.5px; } .ck-promises small { font-size: 12px; color: var(--text-3); }
.ck-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .ck-pay-head h2 { margin: 0; }
.ck-cards { display: flex; gap: 5px; }
.ck-cards i { display: inline-grid; place-items: center; width: 38px; height: 24px; border-radius: 5px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; border: 1px solid var(--border); background: #fff; }
.ck-cards .visa { color: #1a1f71; font-style: italic; font-size: 10.5px; } .ck-cards .amex { background: #1f72cd; color: #fff; border-color: #1f72cd; } .ck-cards .cb { background: linear-gradient(135deg, #1c4f9c, #2aa4a0); color: #fff; border-color: transparent; }
.ck-cards .mc { position: relative; } .ck-cards .mc b { position: absolute; width: 13px; height: 13px; border-radius: 50%; top: 5px; } .ck-cards .mc b:first-child { left: 9px; background: #eb001b; } .ck-cards .mc b:last-child { left: 16px; background: #f79e1b; mix-blend-mode: multiply; }
.ck-err { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); } .ck-err .icon { width: 16px; height: 16px; flex: none; }
.ck-stripe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
.ck-stripe .icon { width: 14px; height: 14px; color: var(--success); }
.ck-powered { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); white-space: nowrap; }
.ck-powered b { font-weight: 800; letter-spacing: -.02em; font-size: 14px; color: #635bff; }
.ck-foot { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 24px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
.ck-link { background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); cursor: pointer; text-decoration: underline; }
@media (max-width: 900px) { .ck-steps li:not(.on) { display: none; } .ck-steps li + li::before { display: none; } .ck-promises { grid-template-columns: 1fr; } .ck-faq { display: block; } }
@media (max-width: 520px) { .ck-secure { display: none; } }
/* Paiement sur mobile : récapitulatif → formulaire → engagements → questions */
@media (max-width: 900px) {
  .ck-grid { display: flex; flex-direction: column; gap: 16px; }
  .ck-side { display: contents; }
  .ck-side h1 { order: 1; margin-bottom: 0; } .ck-toggles { order: 2; margin: 0; } .ck-order { order: 3; }
  .ck-pay { order: 4; padding: 22px 18px; } .ck-promises { order: 5; margin: 0; } .ck-faq { order: 6; margin: 0; }
  .ck-promises { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ck-promises div { align-items: center; text-align: center; padding: 12px 8px; } .ck-promises span { margin-bottom: 4px; } .ck-promises b { font-size: 12px; } .ck-promises small { display: none; }
}
/* Mistakes (views/mistakes.js) : composants du dashboard (card, chip, tabs, banner), mise en page seulement */
.mx-page .page-head .btn .icon { width: 15px; height: 15px; }
.mx-reco { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin-bottom: 26px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: linear-gradient(110deg, var(--accent-soft), var(--surface) 60%); }
.mx-reco h2 { font-size: 19px; letter-spacing: -.02em; margin: 2px 0 4px; } .mx-reco p { font-size: 14px; margin: 0; }
.mx-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
.mx-h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 12px 2px; }
.mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.mx-subj { display: block; width: 100%; padding: 18px 20px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mx-subj:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.mx-subj:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-subj.is-locked { opacity: .75; }
.mx-name { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.mx-prio i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.mx-prio.high i { background: var(--danger); } .mx-prio.medium i { background: var(--warning); } .mx-prio.low i { background: var(--success); }
.mx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.mx-stats b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; } .mx-stats span { font-size: 12px; color: var(--text-3); }
.mx-quiet { overflow: hidden; margin-bottom: 30px; }
.mx-quiet-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.mx-quiet-row:first-child { border-top: 0; } .mx-quiet-row:hover { background: var(--bg-sunken); }
.mx-tabs { position: static; margin: 0 0 16px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mx-split { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mx-list { overflow: hidden; max-height: calc(100vh - 220px); overflow-y: auto; position: sticky; top: 76px; }
.mx-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mx-filters .chip { border: 0; cursor: pointer; }
.mx-item { display: block; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mx-item:hover { background: var(--bg-sunken); } .mx-item.on { background: var(--accent-soft); border-left-color: var(--accent); }
.mx-item-q { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-detail { min-height: 360px; }
.mx-q { font-size: 18px; font-weight: 560; line-height: 1.45; letter-spacing: -.01em; margin: 0 0 16px; }
.mx-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mx-ans { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 14.5px; }
.mx-ans small, .mx-block small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; color: var(--text-3); }
.mx-ans.ko { background: color-mix(in srgb, var(--danger) 7%, transparent); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } .mx-ans.ko small { color: var(--danger); }
.mx-ans.ok { background: color-mix(in srgb, var(--success) 8%, transparent); border-color: color-mix(in srgb, var(--success) 28%, transparent); } .mx-ans.ok small { color: var(--success); } .mx-ans.ok div { font-weight: 600; }
.mx-block { margin-top: 16px; font-size: 14px; }
.mx-take { margin: 16px 0 0; align-items: flex-start; } .mx-take b { display: block; font-size: 13px; margin-bottom: 2px; }
.mx-actions { gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.mx-actions .btn .icon { width: 15px; height: 15px; } .mx-cat { height: 38px; width: auto; font-size: 13px; margin-left: auto; }
.mx-feedback { margin-top: 18px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); }
.mx-feedback.ok { background: color-mix(in srgb, var(--success) 8%, transparent); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.mx-feedback.ko { background: color-mix(in srgb, var(--danger) 6%, transparent); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.mx-feedback p { margin: 6px 0 0; font-size: 14px; } .mx-expl { margin-top: 10px; font-size: 14px; }
.mx-verdict { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mx-verdict span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.mx-feedback.ok .mx-verdict span { background: var(--success); } .mx-feedback.ko .mx-verdict span { background: var(--danger); }
.mx-feedback .btn .icon { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .mx-grid { grid-template-columns: 1fr; } .mx-split { grid-template-columns: 1fr; }
  .mx-list { position: static; max-height: 360px; }
  .mx-reco { flex-wrap: wrap; } .mx-reco .btn { width: 100%; justify-content: center; }
  .mx-answers { grid-template-columns: 1fr; } .mx-cat { margin-left: 0; }
}
@media (max-width: 520px) { .mx-stats { grid-template-columns: repeat(2, 1fr); } .mx-reco-tile { display: none; } }
.mx-grid > *, .mx-split > * { min-width: 0; } .mx-subj { box-sizing: border-box; }
@media (max-width: 520px) { .mx-name { white-space: normal; } }
/* Paiement : choix de l'offre et de la facturation (cartes à cocher) */
.ck-choose { margin-bottom: 18px; }
.ck-choose h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 10px; }
.ck-choose h2 + * + h2 { margin-top: 20px; }
.ck-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 16px 14px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.ck-plan:hover { border-color: var(--border-strong); }
.ck-plan.on { border-color: #6c47ff; box-shadow: 0 0 0 3px rgba(108,71,255,.15); background: color-mix(in srgb, #6c47ff 5%, var(--surface)); }
.ck-plan b { font-size: 16px; margin-top: 6px; } .ck-plan small { font-size: 12.5px; color: var(--text-3); line-height: 1.4; min-height: 34px; }
.ck-plan-price { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; } .ck-plan-price em, .ck-period-price em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.ck-badge-pop { position: absolute; top: -10px; right: 12px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #6c47ff, #b14dff); color: #fff; font-size: 11px; font-weight: 650; }
.ck-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong, var(--border)); flex: none; display: grid; place-items: center; transition: border-color .15s; }
.ck-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6c47ff; transform: scale(0); transition: transform .15s; }
.on > .ck-radio { border-color: #6c47ff; } .on > .ck-radio::after { transform: scale(1); }
.ck-periods { display: grid; gap: 8px; }
.ck-period { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.ck-period:hover { border-color: var(--border-strong); }
.ck-period.on { border-color: #6c47ff; box-shadow: 0 0 0 3px rgba(108,71,255,.15); background: color-mix(in srgb, #6c47ff 5%, var(--surface)); }
.ck-period b { display: block; font-size: 14.5px; } .ck-period small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.ck-period-price { font-weight: 700; font-size: 15px; white-space: nowrap; }
.ck-period .chip { white-space: nowrap; }
@media (max-width: 520px) { .ck-period { flex-wrap: wrap; } .ck-period .chip { order: 5; margin-left: 30px; } }
/* Paiement v3 : offre + facturation + paiement à gauche, récapitulatif à droite (fixe au défilement) */
.ck-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; }
.ck-main h1 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 20px; }
.ck-main .ck-choose { margin-bottom: 22px; }
.ck-side { position: sticky; top: 20px; }
.ck-side .ck-order { margin-top: 0; }
.ck-period .chip { margin-left: 6px; vertical-align: 1px; height: 20px; font-size: 11.5px; }
@media (max-width: 900px) {
  .ck-grid { display: flex; flex-direction: column; gap: 16px; }
  .ck-main, .ck-side { display: contents; }
  .ck-main h1 { order: 1; margin: 0; } .ck-main .ck-choose { order: 2; margin: 0; } .ck-side .ck-order { order: 3; }
  .ck-main .ck-pay { order: 4; } .ck-side .ck-promises { order: 5; margin: 0; } .ck-side .ck-faq { order: 6; margin: 0; }
}
@media (max-width: 520px) { .ck-period { flex-wrap: nowrap; } .ck-plan small { min-height: 0; } }
/* Tutoriel de première connexion (views/tour.js) */
.tour-layer { position: fixed; inset: 0; z-index: 200; }
.tour-dim { background: rgba(10, 8, 22, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; animation: tour-fade .25s ease both; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 8, 22, .55), 0 0 0 2px #8b6dff, 0 0 24px 4px rgba(139,109,255,.5); transition: left .35s var(--ease), top .35s var(--ease), width .35s var(--ease), height .35s var(--ease); pointer-events: none; }
.tour-pop { position: fixed; z-index: 201; padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 60px -18px rgba(0,0,0,.5); animation: tour-pop .3s var(--ease) both; }
.tour-pop p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
.tour-title { font-size: 15.5px; } .tour-count { font-size: 12px; color: var(--text-3); }
.tour-dots { display: flex; gap: 5px; margin: 14px 0 12px; } .tour-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--border-strong, var(--border)); transition: width .25s, background .25s; }
.tour-dots i.done { background: color-mix(in srgb, var(--accent) 45%, transparent); } .tour-dots i.on { width: 18px; background: var(--accent); }
.tour-actions { display: flex; align-items: center; gap: 8px; } .tour-actions .icon { width: 15px; height: 15px; }
.tour-modal { width: min(440px, 100%); padding: 30px 28px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); text-align: center; animation: tour-pop .35s var(--ease) both; }
.tour-modal h2 { font-size: 22px; letter-spacing: -.02em; margin: 14px 0 8px; } .tour-modal > p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 18px; }
.tour-modal .tour-actions { justify-content: center; margin-top: 6px; } .tour-modal .tour-actions .btn { flex: 1; justify-content: center; }
.tour-hero { width: 60px; height: 60px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #6c47ff, #b14dff); color: #fff; box-shadow: 0 12px 30px -10px rgba(108,71,255,.7); }
.tour-hero.up { background: linear-gradient(135deg, #f7d774, #e8a93a); color: #4a3200; box-shadow: 0 12px 30px -10px rgba(232,169,58,.6); }
.tour-hero.ok { background: var(--success); }
.tour-list { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; display: grid; gap: 8px; font-size: 14px; }
.tour-list li { display: flex; gap: 9px; } .tour-list .icon { width: 17px; height: 17px; color: var(--success); flex: none; margin-top: 1px; }
@keyframes tour-fade { from { opacity: 0; } } @keyframes tour-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-pop, .tour-modal, .tour-dim { transition: none; animation: none; } }
/* Paiement : cartes d'offre compactes (nom + prix centrés), bouton « i » de comparaison */
.ck-plan { position: relative; flex-direction: row; align-items: center; gap: 10px; padding: 18px 40px 18px 16px; }
.ck-plan b { margin: 0; font-size: 16px; }
.ck-plan .ck-plan-price { margin: 0 0 0 auto; font-size: 15px; font-weight: 650; white-space: nowrap; }
.ck-plan .ck-plan-price em { font-size: 12px; }
.ck-info { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--text-3); cursor: pointer; }
.ck-info:hover { background: var(--bg-sunken); color: var(--text); } .ck-info .icon { width: 16px; height: 16px; }
.ck-plan:focus-visible { outline: 2px solid #6c47ff; outline-offset: 2px; }
.ck-cmp-wrap { overflow-x: auto; margin: 0 -4px; }
.ck-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.ck-cmp th { text-align: center; font-size: 14.5px; padding: 0 10px 12px; vertical-align: bottom; } .ck-cmp th small { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); margin-top: 2px; }
.ck-cmp th:first-child, .ck-cmp td:first-child { text-align: left; padding-left: 4px; }
.ck-cmp td { padding: 11px 10px; border-top: 1px solid var(--border); text-align: center; color: var(--text-2); }
.ck-cmp td:first-child { color: var(--text); }
.ck-cmp th:nth-child(3), .ck-cmp td:nth-child(3) { background: color-mix(in srgb, #6c47ff 6%, transparent); }
.ck-yes { width: 17px; height: 17px; color: var(--success); } .ck-no { color: var(--text-3); }
@media (max-width: 520px) { .ck-plan { flex-wrap: wrap; padding: 14px 36px 14px 14px; } .ck-plan .ck-plan-price { margin: 0; width: 100%; padding-left: 28px; } .ck-cmp { font-size: 12.5px; } }
.ck-cmp td .icon { display: block; margin: 0 auto; }
/* Récapitulatif : un seul trait entre l’article et le total quand il n’y a pas de ligne « économie » */
.ck-line + .ck-row.total { border-top: 0; margin-top: 0; }
/* Checkout sur téléphone : une colonne pleine largeur (la FAQ et les garanties ne se réduisent plus à leur contenu),
   les trois étapes affichées sous le logo et reliées par des traits qui se partagent la largeur. */
@media (max-width: 900px) {
  .ck-grid { align-items: stretch; }
  .ck-promises, .ck-faq { width: 100%; }
  .ck-promises div { justify-content: flex-start; min-width: 0; }
  .ck-promises b { width: 100%; line-height: 1.3; }
  .ck-head { flex-wrap: wrap; row-gap: 14px; }
  .ck-steps { order: 3; width: 100%; gap: 8px; font-size: 12.5px; }
  .ck-steps li:not(.on) { display: flex; }
  .ck-steps li { gap: 6px; white-space: nowrap; }
  .ck-steps li + li { flex: 1; }
  .ck-steps li + li::before { display: block; flex: 1; width: auto; min-width: 10px; margin-right: 2px; }
  .ck-steps span { width: 22px; height: 22px; font-size: 11px; }
}
/* Mon plan v2 : créneaux lisibles (2 px/min), heures vides repliées, cartes de session claires */
.pc-grid { margin-top: 6px; }
.pc-times span:first-child { transform: translateY(-50%); }
.pc-fold { position: absolute; left: 0; right: 6px; display: grid; place-items: center; font-style: normal; font-size: 9.5px; line-height: 1.15; color: var(--text-3); text-align: right; opacity: .8; }
.pc-gap { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--border) 70%, transparent) 6px 7px); border-top: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong); }
.pc-ev, .pc-s { padding: 6px 9px 6px 11px; border-radius: 9px; gap: 2px; }
.pc-s { color: var(--text); background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.pc-s:hover { filter: none; background: color-mix(in srgb, var(--c) 22%, var(--surface)); box-shadow: inset 4px 0 0 var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--c) 60%, transparent); }
.pc-s.moved { box-shadow: inset 4px 0 0 var(--c), 0 0 0 1.5px var(--c); }
.pc-s b, .pc-ev b { font-size: 13px; line-height: 17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-s small { font-size: 11.5px; opacity: 1; color: var(--text-2); }
.pc-s .pc-sub { color: color-mix(in srgb, var(--c) 70%, var(--text)); font-weight: 550; }
.pc-s.short b, .pc-ev.short b { white-space: nowrap; display: block; -webkit-line-clamp: unset; }
.pc-s.short small { margin-left: auto; }
.pc-head .pc-min { font-weight: 600; color: var(--accent-text); }
@container (max-width: 120px) { .pc-s.short small { display: none; } }
.pc-s b, .pc-ev b { white-space: nowrap; display: block; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; }
.pc-s .pc-sub { color: color-mix(in srgb, var(--c) 65%, var(--text)); font-weight: 600; }
.pc-times span.half { font-size: 9.5px; opacity: .6; } .pc-line.half { opacity: .35; }
.pc-grid { margin-top: 10px; }
@container (max-width: 175px) { .pc-s .pc-sub { display: none; } }
.ck-legal { white-space: pre-line; }
/* Week → Flashcards : petites cartes par thème (4 / 2 / 1 par ligne) */
/* Support (views/support.js) */
.sup-form { margin-bottom: 22px; } .sup-form .field { margin-bottom: 14px; }
.sup-cats { display: flex; flex-wrap: wrap; gap: 6px; } .sup-cats .chip { border: 0; cursor: pointer; height: 30px; padding: 0 12px; }
.sup-text { min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; font: inherit; }
.sup-list { overflow: hidden; }
.sup-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.sup-row:first-child { border-top: 0; } .sup-row:hover { background: var(--bg-sunken); }
.sup-subj { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-last { margin: 3px 0 0; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sup-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; flex: none; }
.sup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.sup-st.open { background: var(--warning-soft); color: var(--warning); } .sup-st.answered { background: var(--accent-soft); color: var(--accent-text); } .sup-st.closed { background: var(--success-soft, color-mix(in srgb, var(--success) 14%, transparent)); color: var(--success); }
.sup-h1 { overflow-wrap: anywhere; }
.sup-thread { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 16px; }
.sup-msg { max-width: 82%; padding: 12px 15px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.sup-msg.mine { align-self: flex-end; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-bottom-right-radius: 6px; }
.sup-msg:not(.mine) { border-bottom-left-radius: 6px; }
.sup-msg.staff:not(.mine) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.sup-who { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 4px; } .sup-who b { font-weight: 650; }
.sup-body { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-closed { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 0 10px; }
.sup-reply { padding: 12px; display: grid; gap: 10px; position: sticky; bottom: 12px; } .sup-reply .sup-text { min-height: 74px; }
@media (max-width: 760px) { .sup-msg { max-width: 92%; } .sup-reply { bottom: calc(12px + env(safe-area-inset-bottom)); } }

/* ---------- Mobile : navigation par panneaux (Daily, Communauté, Menu) et sélecteur des sous-pages ----------
   Uniquement sous 960 px (barre du bas) : l'ordinateur garde barre latérale et onglets. */
.bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; border: 0; border-radius: 10px; background: none;
  color: var(--text-3); font: inherit; font-size: 11px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: color 0.15s; -webkit-tap-highlight-color: transparent; }
.bottom-nav button.active { color: var(--accent-text); }
.bottom-nav button.active svg { stroke-width: 2.2; }
.nsheet { display: flex; flex-direction: column; gap: 6px; }
.nsheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nsheet-item > .icon:last-child { color: var(--text-3); flex: none; }
.nsheet-item.on { border-color: transparent; background: var(--accent-soft); }
.nsheet-item.on > .icon:last-child { color: var(--accent-text); }
.nsheet-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-sunken); color: var(--accent-text); }
.nsheet-item.on .nsheet-ico { background: var(--surface); }
.nsheet-ico .icon { width: 18px; height: 18px; }
.nsheet-t { display: block; font-size: 15px; font-weight: 560; line-height: 1.3; }
.nsheet-s { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.35; margin-top: 1px; }
.sec-switch { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 9px 12px 9px 9px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sec-switch .grow { min-width: 0; }
.sec-switch-k { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.sec-switch-v { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-switch-more { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 30px; padding: 0 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 560; }
.wk-switch { display: flex; align-items: center; gap: 8px; margin: 14px 0 18px; }
.wk-switch .sec-switch { flex: 1; }
.wk-step { flex: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.wk-step:disabled { opacity: .35; }
.wk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.wk-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wk-tile.on { border-color: transparent; background: var(--accent-soft); }
.wk-tile.on .nsheet-ico { background: var(--surface); }
.wk-tile-n { position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--text-3); }
.wk-tile-t { font-size: 14.5px; font-weight: 560; }
@media (max-width: 959px) {
  .cx-subnav { display: none; }
  .daily-tabs { display: none; }
  .community { grid-template-columns: minmax(0, 1fr); }
  /* Sommaire et liste des notions : à la ligne plutôt qu'une rangée qui défile sans qu'on le voie. */
  .cx-clist { flex-wrap: wrap; overflow-x: visible; }
  .cx-citem { max-width: 100%; padding: 8px 14px; font-size: 14px; line-height: 19px; text-align: left; }
}

/* Admin → Ambassadors : lien d'invitation à copier */
.amb-made { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.amb-url { display: flex; align-items: center; gap: 8px; min-width: 0; }
.amb-url code { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; background: var(--bg-sunken); font-size: 12.5px; }

/* Smart review, Speedrun, Review my mistakes : groupe centré dans l'espace à droite de la barre latérale,
   un peu au-dessus du milieu (titre, description, infos de la session, un seul bouton). */
.dm-page { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - 180px); padding: 24px 0 12vh; }
.dm { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 520px; width: 100%; }
.dm-title { font-size: 30px; font-weight: 520; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.dm-desc { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.dm-info { margin: 32px 0 0; font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dm-info.is-hidden { visibility: hidden; }
.dm-btn { margin-top: 24px; width: 300px; max-width: 100%; height: 50px; border-radius: 14px; font-size: 15px; justify-content: center; }
@media (min-width: 960px) { .dm-page { min-height: calc(100dvh - 144px); } }
@media (max-width: 480px) { .dm-title { font-size: 26px; } .dm-desc { font-size: 15px; } }

/* Games : accueil (Duels / Battle Royale) et sous-pages */
.gm-hub { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .gm-hub { grid-template-columns: 1fr 1fr; } }
.gm-card { display: flex; align-items: center; gap: 16px; padding: 22px; color: inherit; text-decoration: none; }
.gm-card:hover { border-color: var(--border-strong); }
.gm-card h3 { font-size: 17px; font-weight: 580; margin: 0; }
.gm-card p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.gm-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); }
.gm-ico.br { background: var(--danger-soft); color: var(--danger); }
/* Illustrations Duel / Battle Royale / Wordle / Endless (SVG du user, img/games/) */
.game-art { display: block; flex: none; }
.empty .game-art { margin: 0 auto 10px; }
/* Duels sur une colonne (mobile, tablette) : « Défier un étudiant » juste après « Tes duels », avant l'historique. */
@media (max-width: 1099px) {
  .gm-duels > .stack { display: contents; }
  .gm-duels .gm-challenge { order: 1; }
  .gm-duels .gm-history { order: 2; }
}
.gm-meta { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.gm-search { position: relative; }
.gm-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.gm-search .input { padding-left: 36px; }
.gm-players { margin-top: 10px; }
.gm-players .online-dot, .gm-duel .online-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.gm-actions { display: flex; gap: 6px; flex: none; }
.gm-duel { flex-wrap: wrap; }
@media (max-width: 640px) { .gm-duel .gm-actions { width: 100%; justify-content: flex-end; } }
.gm-br { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 24px; }
.gm-br h3 { margin: 8px 0 0; font-size: 19px; font-weight: 580; }
.gm-br p { margin: 0; max-width: 360px; font-size: 14px; }
.gm-br .gm-meta { margin: 4px 0 10px; }

/* Admin → fiche utilisateur : Cadeau */
.gift-now { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gift-form { margin-bottom: 10px; }
.gift-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gift-chips .chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.gift-hist { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.gift-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* Fonctions réservées : fenêtre d'abonnement sur fond à peine flouté, couronnes, éléments figés */
.overlay.overlay-soft { background: rgba(9, 9, 11, 0.08); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); }
@media (min-width: 640px) { .overlay.overlay-soft { align-items: center; padding-top: 0; } }
.crown-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 11.5px; font-weight: 650; white-space: nowrap; flex: none; cursor: pointer; border: 0; font-family: inherit; line-height: 1; }
.crown-tag:hover { filter: brightness(1.12); }
.is-frozen.is-upgrade { cursor: pointer; }
.crown-tag .icon { width: 13px; height: 13px; }
.crown-tag.corner { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* Carte figée : rendue en <div> (pas de lien), contenu atténué, couronne en haut à droite. */
.is-frozen { position: relative; cursor: default; user-select: none; }
.is-frozen > :not(.crown-tag) { opacity: .55; }
.locked-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.locked-row:has(> .dm-btn) { margin-top: 24px; } .locked-row > .dm-btn { margin-top: 0; }

/* Clavier maths (quiz de Mathematics) : aperçu de la formule, bouton, clavier à onglets */
.mk-input { font-variant-numeric: tabular-nums; }
.answer-input.mk-input { font-size: 20px; letter-spacing: .01em; }
.cloze-line input.mk-active:not(.ok):not(.ko) { border-color: var(--accent); background: var(--accent-soft); }
.mk-under { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.mk-preview { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 38px; border-radius: 12px; background: var(--surface-2, var(--bg-sunken)); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mk-preview.empty { visibility: hidden; }
.mk-preview-label { flex: none; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mk-preview-math { white-space: nowrap; color: var(--text); }
.mk-preview-math .katex { font-size: 1.4em; }
.mk-toggle { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 13px/1 var(--font); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mk-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.mk-toggle.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.mk-toggle-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--bg-sunken); font-size: 11px; }
.mk-toggle.on .mk-toggle-ico { background: var(--accent); color: var(--on-accent, #fff); }
.mk { margin-top: 4px; padding: 10px; border-radius: 18px; background: var(--bg-sunken); border: 1px solid var(--border); box-shadow: var(--shadow-sm); user-select: none; -webkit-user-select: none; touch-action: manipulation; animation: mk-in .18s var(--ease); }
@keyframes mk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mk-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mk-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mk-tab { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 600 13px/1 var(--font); cursor: pointer; white-space: nowrap; }
.mk-tab:hover { color: var(--text); }
.mk-tab.on { background: var(--accent); color: var(--on-accent, #fff); }
.mk-tools { display: flex; gap: 4px; flex: none; }
.mk-tool { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
.mk-tool:hover { background: var(--surface); color: var(--text); }
.mk-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.mk-key.pad-start { margin-left: 6px; } /* pavé numérique séparé des touches de l'onglet */
.mk-key { display: flex; align-items: center; justify-content: center; min-width: 0; height: 46px; padding: 0 2px; border: 0; border-radius: 11px; background: var(--surface); color: var(--text); font: 500 17px/1 var(--font); cursor: pointer; box-shadow: 0 1px 0 var(--border-strong); transition: transform .06s, background .12s, box-shadow .12s; overflow: hidden; }
.mk-key:hover { background: var(--surface-hover, var(--surface)); }
.mk-key:active { transform: translateY(1px); box-shadow: none; background: var(--accent-soft); }
.mk-key.num { font-size: 19px; font-weight: 560; font-variant-numeric: tabular-nums; }
.mk-key.op { color: var(--text-2); font-size: 20px; }
.mk-key.tmpl { background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent); }
.mk-key.act { background: color-mix(in srgb, var(--surface) 55%, var(--bg-sunken)); color: var(--text-2); box-shadow: 0 1px 0 var(--border); }
.mk-key.act.on { background: var(--accent); color: var(--on-accent, #fff); }
.mk-key.enter { background: var(--accent); color: var(--on-accent, #fff); box-shadow: none; }
.mk-key.enter:active { background: var(--accent-hover, var(--accent)); }
.mk-key.w2 { grid-column: span 2; }
.mk-key .katex { font-size: 1.22em; }
.mk-key.tmpl .katex { font-size: 1.18em; }
.mk-key.big .katex { font-size: 1.5em; }
.mk-key .katex { white-space: nowrap; }
.mk-key.sm .katex { font-size: .95em; }
.mk-key .katex .mord.amsrm { opacity: .55; } /* cases vides des gabarits (□) */
.mk-tex { pointer-events: none; }
.mk-space { display: block; width: 46%; height: 3px; border-radius: 2px; background: currentColor; opacity: .35; }
@media (min-width: 640px) { .mk { padding: 12px; } .mk-key { height: 44px; } .mk-key:hover { box-shadow: 0 1px 0 var(--border-strong), 0 0 0 1px var(--border); } }
@media (max-width: 480px) { .mk { padding: 7px; margin-left: -8px; margin-right: -8px; border-radius: 16px; } .mk-grid { gap: 4px; } .mk-key { height: 42px; font-size: 16px; border-radius: 9px; } .mk-key.num { font-size: 18px; } .mk-key.op { font-size: 18px; } .mk-key .katex { font-size: 1.1em; } .mk-key.tmpl .katex { font-size: 1.02em; } .mk-key.big .katex { font-size: 1.3em; } .mk-key.sm .katex { font-size: .8em; } .mk-key.pad-start { margin-left: 3px; } .mk-tab { padding: 0 9px; } }

/* Analytics admin (Business / Plateforme) : mêmes cartes et tuiles que le reste de l'admin */
@media (max-width: 959px) { .adm-mtabs { display: flex !important; overflow-x: auto; scrollbar-width: none; } .adm-mtabs button { flex: 1 0 auto; padding: 0 12px; white-space: nowrap; } }
.an-range { flex: none; align-self: flex-start; }
.an-range button { padding: 0 12px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .adm-tiles.an-4 { grid-template-columns: repeat(4, 1fr); } .adm-tiles.an-3 { grid-template-columns: repeat(3, 1fr); } .adm-tiles.an-2 { grid-template-columns: repeat(2, 1fr); } }
.an-kpi { display: flex; flex-direction: column; }
.an-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); line-height: 1.35; }
.an-kpi.accent .stat-value { color: var(--accent-text); }
.an-kpi.warn { box-shadow: inset 3px 0 0 var(--warning); }
.an-kpi.danger { box-shadow: inset 3px 0 0 var(--danger); }
/* Répartition par offre : trois nuances ordonnées de l'accent, séparées par un filet de la couleur du fond */
.an-mix { display: flex; gap: 2px; height: 14px; margin: 4px 0 14px; border-radius: 7px; overflow: hidden; background: var(--bg-sunken); }
.an-mix-seg { display: block; min-width: 4px; transition: opacity .15s; }
.an-mix:hover .an-mix-seg:not(.on) { opacity: .55; }
.s1 { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.s2 { background: color-mix(in srgb, var(--accent) 65%, var(--surface)); }
.s3 { background: var(--accent); }
.an-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-2); }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend span.on { color: var(--text); }
.an-legend b { color: var(--text); font-weight: 600; }
.an-legend small { color: var(--text-3); font-size: 12px; }
.an-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-ratios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.an-ratios div { display: flex; flex-direction: column; gap: 3px; }
.an-ratios b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.an-ratios span { font-size: 12.5px; color: var(--text-3); line-height: 1.35; }
.an-funnel { display: grid; gap: 12px; align-content: start; }
.an-fun-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr 44px 52px; align-items: center; gap: 12px; font-size: 13.5px; }
.an-fun-val { text-align: right; font-weight: 560; }
.an-fun-step { text-align: right; font-size: 12px; }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.an-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.an-table td { padding: 10px 14px; border-top: 1px solid var(--border); white-space: nowrap; }
.an-table tr:first-child td { border-top: 0; }
.an-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table tbody tr:hover td { background: var(--bg-sunken); }
.an-table tr.an-least td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.an-sec-name { display: inline-flex; align-items: center; gap: 8px; }
.an-flag { height: 20px; font-size: 11px; padding: 0 7px; gap: 4px; }
.an-cellbar { display: inline-block; vertical-align: middle; width: 56px; height: 6px; margin-right: 10px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; }
.an-cellbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* Carte de chaleur : une teinte, cinq niveaux */
.an-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.an-heat-h { font-size: 10px; color: var(--text-3); text-align: left; }
.an-heat-d { font-size: 11px; color: var(--text-3); }
.an-cell { display: block; aspect-ratio: 1; min-height: 9px; border-radius: 3px; background: var(--bg-sunken); }
.an-cell.l1 { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.an-cell.l2 { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.an-cell.l3 { background: color-mix(in srgb, var(--accent) 70%, var(--surface)); }
.an-cell.l4 { background: var(--accent); }
.an-cell.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text-2); }
.an-heat-scale { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; }
.an-heat-scale i { width: 11px; height: 11px; min-height: 0; }
.an-heat-scale span { margin: 0 4px; }
.an-foot { font-size: 12px; line-height: 1.45; margin: 10px 2px 0; }
@media (max-width: 640px) { .an-fun-row { grid-template-columns: 1fr 44px 46px; } .an-fun-row .adm-bar-track { grid-column: 1 / -1; grid-row: 2; } .an-heat { grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 1px; } }

/* Paiement : consentement à l'accès immédiat ; inscription : acceptation des conditions */
.ck-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--bg-sunken); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; color: var(--text-2); cursor: pointer; }
.ck-consent input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.ck-consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-3); text-align: center; }
.auth-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
/* Année (B1, B2…) à l'inscription : deux cases au style des champs, la case choisie en accent avec une coche. */
.auth-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.auth-year { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  height: 58px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.auth-year:hover { border-color: var(--text-3); }
.auth-year:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-year b { font-size: 16px; font-weight: 640; letter-spacing: -0.01em; }
.auth-year small { font-size: 12.5px; color: var(--text-3); }
.auth-year .tick { position: absolute; top: 50%; right: 12px; transform: translateY(-50%) scale(0.6); opacity: 0; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; transition: opacity 0.15s, transform 0.15s; }
.auth-year.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.auth-year.on b { color: var(--accent-text); }
.auth-year.on .tick { opacity: 1; transform: translateY(-50%) scale(1); }

/* ---------- Audit mobile (06/10) ---------- */
/* Flashcards : la face réponse porte la classe « back », aussi utilisée par les liens « retour » (gris) : le texte
   de la réponse sortait en gris pâle, comme désactivé. */
.flash .face { color: var(--text); }
/* Classement : flamme et nombre de la série restent ensemble (le « 0 » passait seul à la ligne). */
.lb-row .sub { flex-wrap: wrap; row-gap: 2px; }
.lb-row .sub span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
@media (max-width: 959px) {
  /* Lignes de notions (Quiz d'une Week, Weeks d'une matière) : hauteur libre, un nom long ne déborde plus sur la ligne suivante. */
  .cx-row, .cx-qlist .cx-row { height: auto; min-height: 50px; max-height: none; padding-top: 10px; padding-bottom: 10px; }
  /* Chat d'un salon : la zone de saisie descend juste au-dessus de la barre du bas (elle flottait au milieu de l'écran). */
  .page-fill .chat { min-height: calc(100dvh - 150px - env(safe-area-inset-bottom)); }
  /* Mon plan : bandeau « Connecter mon emploi du temps » lisible (texte puis bouton pleine largeur). */
  .pc-connect { flex-wrap: wrap; }
  .pc-connect .grow { flex: 1 1 calc(100% - 40px); }
  .pc-connect .btn { width: 100%; }
  /* Page matière : titre de la Week sur deux lignes au lieu de « IR Core Conc… ». */
  .cx-week-link .cx-week-head h2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 400px) { .home3 .h3-subj-name { font-size: 13px; } }
/* Paiement sur petit téléphone (≤ 420 px) : les cartes d'offre et de facturation dépassaient de 14 px à droite
   (la page glissait sur le côté). Elles rétrécissent maintenant avec l'écran. */
@media (max-width: 420px) {
  .ck-grid { padding-left: 16px; padding-right: 16px; }
  .ck-main .ck-choose, .ck-main .ck-pay, .ck-side .ck-order { min-width: 0; width: 100%; }
  .ck-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ck-plan { padding: 13px 30px 13px 12px; }
  .ck-plan .ck-plan-price { padding-left: 0; }
  .ck-period { flex-wrap: wrap; padding-left: 12px; padding-right: 12px; }
  .ck-period-price { margin-left: auto; }
  .ck-consent input { width: 20px; height: 20px; margin-top: 0; }
}
/* Admin sur téléphone : les 6 onglets visibles d'un coup (3 par ligne) au lieu d'une rangée coupée (« Plat », « Cour »). */
@media (max-width: 959px) {
  .page-head:has(.adm-mtabs) { flex-wrap: wrap; row-gap: 12px; }
  .page-head:has(.adm-mtabs) > .grow { flex-basis: 100%; }
  .adm-mtabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .adm-mtabs button { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
}
/* iPhone : Safari zoome toute la page quand on touche un champ écrit en moins de 16 px (connexion, chat, recherche…).
   Sur les écrans tactiles, tous les champs passent à 16 px. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: 16px !important; }
}

/* ===== Panic Mode immersif (06/10) : page de choix centrée + session plein écran (views/panic.js) ===== */
.pz-pick { max-width: 980px; }
.pz-hero { text-align: center; padding: 28px 0 8px; }
.pz-hero h1 { font-size: 32px; letter-spacing: -0.03em; margin: 14px 0 6px; }
.pz-hero p { color: var(--text-2); font-size: 14.5px; max-width: 520px; margin: 0 auto; }
.pz-siren { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; color: #fff; background: linear-gradient(140deg, #ff6b7a, #c2338d 55%, #6c47ff); box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 12%, transparent), 0 14px 40px -10px rgba(220, 60, 110, .6); animation: pz-pulse 2.6s ease-in-out infinite; }
.pz-siren .icon { width: 28px; height: 28px; }
@keyframes pz-pulse { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--danger) 6%, transparent), 0 14px 40px -10px rgba(220, 60, 110, .6); } }
.pz-how { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: none; }
.pz-how li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.pz-how .num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 640; }
.pz-how b { display: block; font-size: 13px; font-weight: 580; line-height: 1.25; }
.pz-how span:not(.num) { font-size: 12px; color: var(--text-3); }
.pz-pick-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 34px 0 12px; }
.pz-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pz-subj { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; color: inherit; text-decoration: none; transition: border-color .15s; }
a.pz-subj:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.pz-subj-name { font-weight: 580; font-size: 15.5px; }
.pz-subj-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; margin-top: 3px; }
.pz-exam { color: var(--text-2); font-weight: 540; }
.pz-exam.soon { color: var(--danger); }
.pz-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-sunken); color: var(--text-2); transition: background .15s, color .15s; }
a.pz-subj:hover .pz-go { background: var(--accent); color: var(--on-accent); }
@media (max-width: 860px) { .pz-how { display: none; } .pz-pick-h { margin-top: 26px; } .pz-subjects { grid-template-columns: 1fr; } .pz-hero h1 { font-size: 26px; } }

/* Session : calque plein écran (même principe que le quiz), halo de la couleur de la matière en haut. */
.pz { --subj: var(--accent); z-index: 70; background: radial-gradient(900px 420px at 50% -120px, color-mix(in srgb, var(--subj) 16%, transparent), transparent 70%), var(--bg); }
.pz-bar { display: flex; padding: calc(14px + env(safe-area-inset-top)) 16px 0; }
.pz-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 16px 40px; }

/* Écran de départ */
.pz-intro { width: 100%; max-width: 620px; text-align: center; animation: page-in .35s var(--ease); }
.pz-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--danger-soft); color: var(--danger); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pz-intro-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 10px; }
.pz-intro-head h1 { font-size: 34px; letter-spacing: -0.03em; margin: 0; }
.pz-lead { font-size: 16px; color: var(--text); margin: 0; }
.pz-meta { font-size: 13px; color: var(--text-3); margin: 6px 0 0; }
.pz-plan { list-style: none; padding: 0; margin: 28px 0 0; text-align: left; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 85%, transparent); overflow: hidden; }
.pz-plan li { display: flex; align-items: center; gap: 14px; padding: 13px 16px; }
.pz-plan li + li { border-top: 1px solid var(--border); }
.pz-plan b { display: block; font-size: 14.5px; font-weight: 580; }
.pz-plan .grow span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.pz-plan-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 640; }
.pz-plan-m { flex: none; font-size: 13px; color: var(--text-2); }
.pz-tips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 20px 0 0; font-size: 12.5px; color: var(--text-2); }
.pz-tips span { display: inline-flex; align-items: center; gap: 6px; }
.pz-tips .icon { color: var(--text-3); }
.pz-tips-h { width: 100%; justify-content: center; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.pz-start { margin-top: 26px; min-width: 260px; height: 52px; font-size: 15.5px; }

/* Barre du haut de la session : quitter, matière, 5 étapes, minuteur */
.pz-top { position: sticky; top: var(--notice-h, 0px); z-index: 3; display: flex; align-items: center; gap: 14px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pz-subj-mini { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.pz-subj-mini b { font-weight: 580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-steps { flex: 1; display: flex; justify-content: center; gap: 6px; min-width: 0; }
.pz-step { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 5px; border: 1px solid var(--border); border-radius: 99px; background: none; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.pz-step:hover { color: var(--text); border-color: var(--border-strong); }
.pz-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: var(--bg-sunken); font-size: 12px; font-weight: 640; }
.pz-step-n .icon { width: 13px; height: 13px; }
.pz-step.done { color: var(--text-2); }
.pz-step.done .pz-step-n { background: var(--success); color: #fff; }
.pz-step.on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); font-weight: 560; }
.pz-step.on .pz-step-n { background: var(--accent); color: var(--on-accent); }
.pz-timer { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 92px; justify-content: center; }
.pz-timer .icon { color: var(--text-3); }
.pz-timer.paused { color: var(--text-3); }
.pz-timer.over { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: var(--warning-soft); }
.pz-timer.over .icon { color: inherit; }
.pz-progress { position: sticky; top: calc(54px + env(safe-area-inset-top) + var(--notice-h, 0px)); z-index: 3; height: 3px; background: var(--border); }
.pz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--pink, #c86bff)); border-radius: 0 3px 3px 0; transition: width .5s var(--ease); }

/* Colonne de lecture centrée */
.pz-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 34px 20px 150px; animation: page-in .3s var(--ease); }
.pz-phase-head { text-align: center; margin-bottom: 26px; }
.pz-phase-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-text); }
.pz-eyebrow { margin-top: 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-text); }
.pz-phase-head h1 { font-size: 30px; letter-spacing: -0.03em; margin: 6px 0 6px; }
.pz-phase-head p { margin: 0 auto; max-width: 480px; color: var(--text-2); font-size: 14.5px; }
.pz-sheet { padding: 22px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.pz-sheet + .pz-sheet { margin-top: 14px; }
.pz-sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pz-sheet-h h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pz-sheet .prose { font-size: 15px; max-width: none; }
.pz-note { text-align: center; color: var(--text-2); padding: 24px; border: 1px dashed var(--border-strong); border-radius: 14px; }
.pz-quiz { text-align: center; padding: 34px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.pz-quiz-n { display: block; font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--pink, #c86bff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-quiz-l { display: block; font-size: 13px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.pz-quiz p { color: var(--text-2); max-width: 420px; margin: 16px auto 0; }
.pz-sec { font-size: 15px; margin: 6px 0 2px; color: var(--text-2, var(--text)); }
.pz-sec ~ .pz-sec { margin-top: 22px; }
.pz-errors { display: flex; flex-direction: column; gap: 10px; }
.pz-error { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.pz-error-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; font-weight: 640; }
.pz-error-q { font-weight: 540; font-size: 14.5px; }
.pz-error-a { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }

/* Barre d'action fixe en bas */
.pz-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: 22px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 62%, transparent); pointer-events: none; }
.pz-actions .inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: auto; }
.pz-count { font-size: 13px; color: var(--text-3); }
.pz-btns { display: flex; gap: 8px; }
.pz-show-s { display: none; }

/* Écran de fin */
.pz-end { text-align: center; max-width: 460px; animation: page-in .35s var(--ease); }
.pz-end-ico { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: var(--success-soft); color: var(--success); box-shadow: 0 0 0 10px color-mix(in srgb, var(--success) 8%, transparent); }
.pz-end-ico .icon { width: 34px; height: 34px; }
.pz-end h1 { font-size: 32px; letter-spacing: -0.03em; margin: 22px 0 8px; }
.pz-end p { color: var(--text-2); margin: 0; }
.pz-end-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }

@media (max-width: 1100px) { .pz-step-l { display: none; } .pz-step { padding: 0 5px; } .pz-step.on { padding-right: 12px; } .pz-step.on .pz-step-l { display: inline; } }
@media (max-width: 720px) {
  .pz-top { gap: 8px; padding-left: 8px; padding-right: 10px; }
  .pz-subj-mini { display: none; }
  .pz-steps { justify-content: flex-start; gap: 4px; }
  .pz-step { padding: 0 3px; height: 32px; } .pz-step.on .pz-step-l { display: none; } .pz-step.on { padding-right: 3px; }
  .pz-timer { min-width: 0; padding: 0 10px; font-size: 13px; height: 32px; }
  .pz-progress { top: calc(52px + env(safe-area-inset-top)); }
  .pz-main { padding: 24px 14px 130px; }
  .pz-phase-head h1 { font-size: 24px; }
  .pz-sheet { padding: 18px 16px; }
  .pz-intro-head h1 { font-size: 26px; }
  .pz-plan li { padding: 11px 13px; gap: 11px; }
  .pz-start { width: 100%; min-width: 0; }
  .pz-count { display: none; }
  .pz-btns { flex: 1; } .pz-btns .btn { flex: 1; padding: 0 14px; }
  .pz-btns .btn-secondary { flex: none; }
  .pz-hide-s { display: none; } .pz-show-s { display: inline; }
}

/* Ne pas déranger : ligne en tête du panneau des notifications (app.js) */
.dnd-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 0 8px 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-sunken); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; }
.dnd-row b { display: block; font-size: 13px; font-weight: 580; color: var(--text); }
.dnd-row small { display: block; font-size: 12px; color: var(--text-3); }
.dnd-sw { flex: none; position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--border-strong); transition: background .15s; }
.dnd-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.dnd-row.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); color: var(--accent-text); }
.dnd-row.on .dnd-sw { background: var(--accent); }
.dnd-row.on .dnd-sw::after { transform: translateX(14px); }

/* Bulles de non-lus de la Communauté (Badge dans app.js et community.js, compteurs engine/unread.js) */
.cbadge { display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 650; line-height: 1; letter-spacing: 0; }
.nav-item .cbadge, .chan .cbadge, .nsheet-item .cbadge { margin-left: auto; }
.nsheet-item .cbadge { margin-right: 2px; }
.chan.has-unread { color: var(--text); font-weight: 560; }
.bottom-nav .bn-ico { position: relative; display: inline-flex; }
.bottom-nav .bn-ico .cbadge { position: absolute; top: -6px; left: 14px; min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px; box-shadow: 0 0 0 2px var(--surface); }

/* ===== Invitation en duel : animation plein écran (views/duel-invite.js) =====
   Chronologie (1,5 s) : épées qui arrivent (0 → 0,45 s), 1er choc à 0,56 s, recul, 2e choc à 0,94 s,
   puis les épées se posent en croix, montent et la carte apparaît (1,35 s → 1,9 s). Toujours en sombre. */
.dv { position: fixed; inset: 0; z-index: 110; overflow-y: auto; color: #f3f1ff;
  --surface: #1d1938; --surface-hover: #26214a; --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.16); --text: #f3f1ff; --text-2: #c4bfe6; --text-3: #8f89b8; --bg-sunken: #120f24; --shadow-sm: none;
  background: radial-gradient(60% 55% at 50% 42%, rgba(108,71,255,.32), transparent 70%), radial-gradient(40% 40% at 50% 46%, rgba(255,77,141,.12), transparent 70%), rgba(7,6,16,.86);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  animation: dv-in .35s ease-out both; }
@keyframes dv-in { from { opacity: 0; } }
.dv-flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(210,190,255,.4) 22%, transparent 58%); animation: dv-flash 1.5s linear both; }
@keyframes dv-flash { 0%, 36% { opacity: 0; } 38% { opacity: .85; } 47% { opacity: 0; } 61% { opacity: 0; } 63% { opacity: 1; } 78% { opacity: 0; } 100% { opacity: 0; } }
.dv-wrap { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); animation: dv-shake 1.5s linear both; }
@keyframes dv-shake { 0%, 36%, 44%, 61%, 70%, 100% { transform: none; } 38% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -3px); } 42% { transform: translate(-3px, 2px); }
  63% { transform: translate(10px, -5px); } 65% { transform: translate(-9px, 5px); } 67% { transform: translate(4px, -2px); } }

/* Scène des épées : centrée à l'écran pendant le combat (--drop), puis remonte au-dessus de la carte. */
.dv-stage { --drop: 205px; position: relative; flex: none; width: 340px; height: 300px; margin-bottom: -34px; animation: dv-stage .65s cubic-bezier(.2,.8,.2,1) 1.3s both; }
@keyframes dv-stage { from { transform: translateY(var(--drop)) scale(1.3); } to { transform: none; } }
.dv-stage > * { position: absolute; left: 50%; top: 50%; }
.dv-word { transform: translate(-50%, -50%); font-size: 150px; font-weight: 800; letter-spacing: .04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(196,176,255,.26); white-space: nowrap; opacity: 0; animation: dv-word .9s cubic-bezier(.2,.9,.2,1) .94s both; }
@keyframes dv-word { from { opacity: 0; transform: translate(-50%, -50%) scale(1.7); letter-spacing: .3em; } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.dv-glow { width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; background: radial-gradient(circle, rgba(139,108,255,.6), rgba(255,93,160,.18) 45%, transparent 68%); opacity: 0;
  animation: dv-glow .7s ease-out .56s both, dv-pulse 2.6s ease-in-out 1.6s infinite; }
@keyframes dv-glow { from { opacity: 0; transform: scale(.3); } to { opacity: .9; transform: none; } }
@keyframes dv-pulse { 50% { opacity: .55; transform: scale(.92); } }
.dv-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(214,198,255,.85); opacity: 0; }
.dv-ring.r1 { animation: dv-ring .7s cubic-bezier(.1,.7,.3,1) .56s forwards; }
.dv-ring.r2 { animation: dv-ring .85s cubic-bezier(.1,.7,.3,1) .94s forwards; border-color: rgba(255,170,210,.85); }
@keyframes dv-ring { from { opacity: 1; transform: scale(.2); border-width: 6px; } to { opacity: 0; transform: scale(6.5); border-width: 1px; } }
.dv-sparks { width: 0; height: 0; }
.dv-sparks i { position: absolute; left: 0; top: -1.5px; width: 44px; height: 3px; border-radius: 3px; transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, #fff, #ffe1a8 35%, rgba(255,140,200,.6) 70%, transparent); box-shadow: 0 0 8px rgba(255,220,170,.8); }
.dv-sparks.s1 i { animation: dv-spark .55s cubic-bezier(.15,.8,.3,1) .56s forwards; }
.dv-sparks.s2 i { animation: dv-spark .7s cubic-bezier(.15,.8,.3,1) .94s forwards; width: 58px; }
@keyframes dv-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--d) + 6px)) scaleX(.15); } 55% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) + 130px)) scaleX(1); } }

/* Épées : tournent autour du milieu de la lame (51,8 % de la hauteur), comme dans duel.svg. */
.dv-sword { width: 84px; height: 227px; margin: -117.6px 0 0 -42px; transform-origin: 50% 51.8%; filter: drop-shadow(0 12px 26px rgba(108,71,255,.55)); }
.dv-sword-svg { display: block; width: 100%; height: 100%; }
.dv-sword.a { animation: dv-a 1.5s cubic-bezier(.3,.7,.3,1) both, dv-idle-a 3.2s ease-in-out 1.5s infinite alternate; }
.dv-sword.b { animation: dv-b 1.5s cubic-bezier(.3,.7,.3,1) both, dv-idle-b 3.2s ease-in-out 1.5s infinite alternate; z-index: 1; }
@keyframes dv-a {
  0% { transform: translate(-70vw, 12vh) rotate(-200deg); opacity: 0; } 8% { opacity: 1; }
  29% { transform: translate(-78px, 12px) rotate(-24deg); }
  37% { transform: translate(4px, 0) rotate(58deg); }
  49% { transform: translate(-96px, 18px) rotate(-14deg); }
  62% { transform: translate(6px, -2px) rotate(63deg); }
  75% { transform: translate(-4px, 0) rotate(36deg); }
  100% { transform: rotate(42deg); opacity: 1; } }
@keyframes dv-b {
  0% { transform: translate(70vw, 12vh) rotate(200deg); opacity: 0; } 8% { opacity: 1; }
  29% { transform: translate(78px, 12px) rotate(24deg); }
  37% { transform: translate(-4px, 0) rotate(-58deg); }
  49% { transform: translate(96px, 18px) rotate(14deg); }
  62% { transform: translate(-6px, -2px) rotate(-63deg); }
  75% { transform: translate(4px, 0) rotate(-36deg); }
  100% { transform: rotate(-42deg); opacity: 1; } }
@keyframes dv-idle-a { from { transform: rotate(42deg); } to { transform: translateY(-5px) rotate(39deg); } }
@keyframes dv-idle-b { from { transform: rotate(-42deg); } to { transform: translateY(-5px) rotate(-39deg); } }

/* Carte d'invitation */
.dv-card { position: relative; z-index: 2; width: min(440px, 100%); padding: 26px 26px 20px; text-align: center; border-radius: 24px;
  background: linear-gradient(180deg, rgba(34,29,66,.94), rgba(21,18,42,.96)); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(139,108,255,.14), inset 0 1px 0 rgba(255,255,255,.07);
  animation: dv-card .6s cubic-bezier(.2,.9,.25,1.12) 1.45s both; }
@keyframes dv-card { from { opacity: 0; transform: translateY(46px) scale(.95); } }
.dv-players { display: flex; align-items: center; justify-content: center; gap: 16px; }
.dv-players .avatar { box-shadow: 0 0 0 3px #1d1938, 0 0 0 5px rgba(139,108,255,.6); font-size: 22px; background: #2a2452; color: #e9e4ff; }
.dv-players .avatar:last-child { box-shadow: 0 0 0 3px #1d1938, 0 0 0 5px rgba(255,107,157,.55); }
.dv-vs { font-size: 15px; font-weight: 800; letter-spacing: .12em; background: linear-gradient(135deg, #b9a4ff, #ff7eb6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dv-kicker { display: inline-block; margin-top: 18px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .16em; color: #c9b8ff; }
.dv-card h2 { margin: 6px 0 10px; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.dv-who { background: linear-gradient(90deg, #c2b0ff, #ff8fc8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dv-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #c4bfe6; }
.dv-actions { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; margin-top: 22px; }
.dv-actions .dv-later { grid-column: 1 / -1; justify-self: center; margin-top: 0; }
.dv-accept { position: relative; overflow: hidden; }
.dv-accept::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); animation: dv-shine 2.8s ease-in-out 2.2s infinite; }
@keyframes dv-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.dv-later { padding: 6px 14px; border: 0; border-radius: 8px; background: none; color: #9d97c4; font: inherit; font-size: 13.5px; cursor: pointer; }
.dv-later:hover { color: #fff; }
.dv-dnd { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.dv-dnd p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: #a39ec7; }
.dv-dnd-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #e6e2ff; font: inherit; font-size: 12.5px; font-weight: 560; cursor: pointer; }
.dv-dnd-btn:hover { background: rgba(255,255,255,.08); }
@media (max-width: 520px) {
  .dv-stage { --drop: 190px; width: 300px; height: 250px; margin-bottom: -26px; }
  .dv-sword { width: 70px; height: 189px; margin: -97.9px 0 0 -35px; }
  .dv-word { font-size: 100px; }
  .dv-card { padding: 22px 18px 16px; border-radius: 22px; }
  .dv-card h2 { font-size: 22px; }
  /* Accepter sur toute la largeur, Refuser et Plus tard côte à côte (gain de hauteur). */
  .dv-actions { grid-template-columns: 1fr 1fr; }
  .dv-actions .dv-accept { grid-column: 1 / -1; }
  .dv-actions .dv-later { grid-column: auto; justify-self: stretch; height: 48px; border-radius: 12px; border: 1px solid transparent; }
  .dv-wrap { padding-top: calc(16px + env(safe-area-inset-top)); }
}
/* Téléphones peu hauts (iPhone SE, Android compacts) : tout tient sans défiler. */
@media (max-width: 520px) and (max-height: 760px) {
  .dv-stage { --drop: 168px; height: 200px; margin-bottom: -22px; }
  .dv-sword { width: 56px; height: 151px; margin: -78.2px 0 0 -28px; }
  .dv-word { font-size: 80px; }
  .dv-card { padding: 16px 16px 12px; }
  .dv-players .avatar.lg { width: 50px; height: 50px; font-size: 18px; }
  .dv-kicker { margin-top: 10px; }
  .dv-card h2 { font-size: 20px; margin: 4px 0 6px; }
  .dv-actions { margin-top: 14px; gap: 8px; }
  .dv-actions .btn-lg, .dv-actions .dv-later { height: 44px; }
  .dv-dnd { margin-top: 10px; padding-top: 10px; }
  .dv-dnd p { font-size: 11.5px; margin-bottom: 8px; }
  .dv-dnd-btn { height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .dv, .dv * { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }

/* ===== Affiliation (views/referral.js) ===== */
.rf { max-width: 1120px; }
.rf-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.rf-hero { position: relative; overflow: hidden; padding: 28px; display: flex; flex-direction: column; }
.rf-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(380px 220px at 100% 100%, color-mix(in srgb, var(--pink, #e05bd0) 10%, transparent), transparent 70%); }
.rf-hero > * { position: relative; }
.rf-hero-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: var(--brand-grad); box-shadow: 0 10px 26px -10px rgba(108,71,255,.7); }
.rf-hero h2 { margin: 16px 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.rf-explain { margin: 0 0 20px; max-width: 560px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.rf-link { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 0; margin-bottom: 0; padding: 6px 6px 6px 14px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-sunken); }
.rf-link > .icon { color: var(--text-3); flex: none; }
.rf-link input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 540; outline: none; text-overflow: ellipsis; }
.rf-link .btn { flex: none; height: 40px; }
.rf-link-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-3); }
.rf-link-foot b { color: var(--text); letter-spacing: .06em; margin-left: 4px; }

.rf-progress { display: flex; flex-direction: column; align-items: center; padding: 26px 22px 20px; text-align: center; }
.rf-ring { position: relative; width: 168px; height: 168px; }
.rf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rf-ring circle { fill: none; stroke-width: 10; }
.rf-ring-bg { stroke: var(--bg-sunken); }
.rf-ring-fg { stroke: url(#rf-grad); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.rf-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rf-ring-c b { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.rf-ring-c small { font-size: 18px; color: var(--text-3); font-weight: 560; }
.rf-ring-c span { margin-top: 4px; max-width: 110px; font-size: 11.5px; line-height: 1.3; color: var(--text-3); }
.rf-left { margin: 14px 0 0; font-size: 13.5px; color: var(--text-2); }
.rf-seats { display: flex; gap: 6px; margin-top: 12px; }
.rf-seats i { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.rf-seats i.on { background: var(--brand-grad); box-shadow: 0 0 10px -2px rgba(139,108,255,.8); }
.rf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.rf-stats b { display: block; font-size: 20px; font-weight: 650; }
.rf-stats span { font-size: 12px; color: var(--text-3); }
.rf-reward { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 99px; background: var(--success-soft); color: var(--success); font-size: 12.5px; font-weight: 580; }

.rf-h { display: flex; align-items: center; gap: 8px; margin: 30px 0 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.rf-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rf-how li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.rf-how-n { position: absolute; top: 14px; right: 16px; font-size: 12px; font-weight: 650; color: var(--text-3); }
.rf-how-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.rf-how li:last-child .rf-how-ico { background: var(--brand-grad); color: #fff; }
.rf-how b { font-size: 14.5px; font-weight: 600; }
.rf-how span:last-child { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

.rf-list { padding: 6px 0; }
.rf-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.rf-row + .rf-row { border-top: 1px solid var(--border); }
.rf-name { font-weight: 560; font-size: 14.5px; }
.rf-date { font-size: 12.5px; color: var(--text-3); }
.rf-step { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 560; background: var(--bg-sunken); color: var(--text-2); }
.rf-step.done { background: var(--success-soft); color: var(--success); }
.rf-step.daily { background: var(--warning-soft); color: var(--warning); }
.rf-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 14px; }
.rf-empty > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--bg-sunken); }
.rf-empty p { margin: 0; }
@media (max-width: 960px) { .rf-top { grid-template-columns: 1fr; } .rf-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .rf-hero { padding: 22px 18px; }
  .rf-link { flex-wrap: wrap; padding: 10px 10px 10px 14px; }
  .rf-link input { flex-basis: calc(100% - 30px); font-size: 14px; }
  .rf-link .btn { width: 100%; }
  .rf-how { grid-template-columns: 1fr; }
  .rf-row { padding: 12px 14px; }
  .rf-step { padding: 0 9px; font-size: 12px; }
}

/* Barre latérale sur écran peu haut (portable avec barre de favoris, zoom) : les entrées gardent leur hauteur
   et la barre défile au lieu de tout écraser. */
@media (min-width: 960px) {
  .sidebar { overflow-y: auto; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar > * { flex-shrink: 0; }
}

/* Barre du bas (mobile) : Parrainer mis en avant (pastille en dégradé + léger halo qui revient), 6 entrées. */
.bottom-nav a.bn-gift { color: var(--accent-text); font-weight: 600; }
.bottom-nav a.bn-gift .bn-ico { display: grid; place-items: center; width: 40px; height: 24px; border-radius: 99px; color: #fff; background: var(--brand-grad);
  box-shadow: 0 6px 14px -6px rgba(108,71,255,.85); animation: bn-gift 4.5s ease-in-out 1.5s infinite; }
.bottom-nav a.bn-gift .bn-ico svg { width: 17px; height: 17px; stroke-width: 2.1; }
.bottom-nav a.bn-gift .bn-ico { margin-bottom: -2px; } /* même ligne de libellés que les icônes simples */
@keyframes bn-gift { 0%, 70%, 100% { box-shadow: 0 6px 14px -6px rgba(108,71,255,.85); } 80% { box-shadow: 0 0 0 5px rgba(139,108,255,.22), 0 6px 18px -4px rgba(224,91,208,.8); } }
.bottom-nav a, .bottom-nav button { min-width: 0; white-space: nowrap; }
@media (max-width: 374px) { .bottom-nav a, .bottom-nav button { font-size: 10.5px; letter-spacing: -0.02em; } }
@media (prefers-reduced-motion: reduce) { .bottom-nav a.bn-gift .bn-ico { animation: none; } }

/* Ne pas déranger visible sans passer par les réglages : bouton lune à côté du profil (barre latérale),
   interrupteur en tête du panneau Menu (mobile). Action commune setDnd dans app.js. */
@media (min-width: 960px) {
  .sidebar .me-row { display: flex; align-items: center; gap: 4px; }
  .sidebar .me-row .me { flex: 1; min-width: 0; padding-right: 6px; }
}
.me-av { position: relative; display: inline-flex; flex: none; }
.me-moon { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface-2); }
.me-moon .icon { width: 9px; height: 9px; stroke-width: 2.6; }
.me-dnd { font-size: 12px; font-weight: 560; color: var(--accent-text); }
.dnd-btn { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dnd-btn:hover { background: var(--surface-hover); color: var(--text); }
.dnd-btn.on { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.dnd-btn.on .icon { fill: currentColor; }
.dnd-btn::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); padding: 6px 10px; border-radius: 8px; background: #1d1838; color: #fff; font-size: 12px; font-weight: 520; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.dnd-btn:hover::after, .dnd-btn:focus-visible::after { opacity: 1; transform: none; }
.nsheet-dnd { margin-bottom: 10px; }
.nsheet-dnd .dnd-row { width: 100%; margin: 0; padding: 12px; border-radius: 14px; }

/* Traînées des lames au moment des chocs, et éclair violet sur les bords de l'écran (très visible sur téléphone). */
.dv-slash { width: 300px; height: 3px; margin: -1.5px 0 0 -150px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 45%, #ffd9a8 55%, transparent); box-shadow: 0 0 12px rgba(255,230,200,.8); }
.dv-slash.a1 { --r: -38deg; animation: dv-slash .34s ease-out .5s forwards; }
.dv-slash.b1 { --r: 38deg; animation: dv-slash .34s ease-out .52s forwards; }
.dv-slash.a2 { --r: -30deg; animation: dv-slash .4s ease-out .88s forwards; width: 380px; margin-left: -190px; }
.dv-slash.b2 { --r: 30deg; animation: dv-slash .4s ease-out .9s forwards; width: 380px; margin-left: -190px; }
@keyframes dv-slash { 0% { opacity: 0; transform: rotate(var(--r)) scaleX(.05); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--r)) scaleX(1.15); } }
.dv-edge { position: fixed; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 90px 18px rgba(150,110,255,.75), inset 0 0 22px 2px rgba(255,140,200,.6); animation: dv-edge 1.5s linear both; }
@keyframes dv-edge { 0%, 36% { opacity: 0; } 38% { opacity: .7; } 50% { opacity: 0; } 61% { opacity: 0; } 63% { opacity: 1; } 82% { opacity: 0; } 100% { opacity: 0; } }

/* ===== Admin → Invitations et parrainage dans la fiche utilisateur (views/admin-invitations.js, admin-users.js) ===== */
.inv-tabs { margin-top: 4px; }
.inv-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.inv-card { padding: 4px 0; }
.inv-row + .inv-row { border-top: 1px solid var(--border); }
.inv-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.inv-head:hover { background: var(--surface-hover); }
.inv-row.open .inv-head { background: var(--bg-sunken); }
.inv-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 4px; margin: -4px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.inv-who:hover .inv-who-t b { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.inv-who-t { display: flex; flex-direction: column; min-width: 0; }
.inv-who-t b { font-size: 14px; font-weight: 560; }
.inv-who-t small { font-size: 12px; color: var(--text-3); }
.inv-nums { display: flex; gap: 18px; flex: none; }
.inv-nums span { display: flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; color: var(--text-3); min-width: 52px; }
.inv-nums b { font-size: 16px; font-weight: 650; color: var(--text); }
.inv-nums .ok b { color: var(--success); }
.inv-chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--text-3); transition: transform .2s; }
.inv-chev.off { opacity: .25; }
.inv-row.open .inv-chev { transform: rotate(180deg); }
.inv-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px 12px 52px; background: var(--bg-sunken); }
.inv-sub { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.inv-sub:hover { background: var(--surface); }
.inv-step { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 560; background: var(--surface); color: var(--text-2); }
.inv-step.done { background: var(--success-soft); color: var(--success); }
.inv-step.daily { background: var(--warning-soft); color: var(--warning); }
.inv-mini { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; }
.inv-mini-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.inv-mini-row > .faint { width: 92px; flex: none; }
.inv-mini .inv-list { padding: 6px; border-radius: 10px; }
@media (max-width: 720px) {
  .inv-nums { gap: 10px; } .inv-nums .d-col { display: none; } .inv-nums span { min-width: 0; }
  .inv-list { padding-left: 14px; }
  .inv-sub { flex-wrap: wrap; } .inv-sub .inv-step { margin-left: 42px; }
}
/* Dans une ligne de parrain, seul le nom ouvre la fiche ; le reste de la ligne déroule la liste des invités. */
.inv-head .inv-who { flex: 0 1 auto; margin-right: auto; }

/* ---------- Quiz interactif (06/10, direction A « carte vivante ») ---------- */
/* Barre en segments : une case par question, verte ou rouge une fois répondue. */
.qz-segs { flex: 1; display: flex; gap: 3px; min-width: 0; }
.qz-segs span { flex: 1; height: 7px; border-radius: 99px; background: var(--bg-sunken); position: relative; overflow: hidden; }
.qz-segs span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.qz-segs span.cur::after { background: var(--accent); transform: scaleX(.35); }
.qz-segs span.ok::after { background: var(--success); transform: none; }
.qz-segs span.ko::after { background: var(--danger); transform: none; }
/* Combo : la flamme s'allume dès 2 bonnes réponses d'affilée. */
.qz-combo { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 4px 8px 4px 6px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); transition: color .3s, background .3s, border-color .3s; }
.qz-combo .icon { width: 14px; height: 14px; }
.qz-combo.hot { color: var(--flame); background: var(--flame-soft); border-color: color-mix(in srgb, var(--flame) 40%, transparent); }
.qz-combo.bump { animation: qz-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.qz-combo.broke { animation: shake .4s; }
@keyframes qz-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: none; } }
/* Bonne réponse révélée après une erreur : elle pulse. */
.opt.reveal { animation: qz-pulse 1s var(--ease) 2; }
@keyframes qz-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.opt.right .key, .opt.wrong .key { animation: qz-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
/* Particules et « +10 XP » (fx.js), posés sur la page. */
.fx-burst { position: fixed; z-index: 120; pointer-events: none; width: 0; height: 0; }
.fx-burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; animation: fx-fly .75s var(--ease) forwards; }
@keyframes fx-fly { from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.3); opacity: 0; } }
.fx-float { position: fixed; z-index: 121; pointer-events: none; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--xp); background: var(--xp-soft); border: 1px solid color-mix(in srgb, var(--xp) 40%, transparent); padding: 3px 9px; border-radius: 99px; animation: fx-up 1.1s var(--ease) forwards; }
@keyframes fx-up { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -14px) scale(1.08); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(.9); opacity: 0; } }
/* Panneau de correction : glisse du bas avec un halo de la couleur du résultat. */
.feedback.qz-sheet { border-radius: 22px 22px 0 0; background: var(--surface-2); border-top-color: var(--border-strong); animation: qz-sheet .38s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes qz-sheet { from { transform: translateY(105%); } to { transform: none; } }
.feedback.qz-sheet.ok { box-shadow: 0 -18px 40px -20px color-mix(in srgb, var(--success) 60%, transparent); }
.feedback.qz-sheet.ko { box-shadow: 0 -18px 40px -20px color-mix(in srgb, var(--danger) 55%, transparent); }
.feedback.qz-sheet .verdict .badge { animation: qz-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.qz-gain { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--xp); background: var(--xp-soft); padding: 3px 9px; border-radius: 99px; letter-spacing: 0; white-space: nowrap; }
.feedback.ko .qz-gain { color: var(--text-3); background: var(--bg-sunken); }
.btn.qz-next { color: #fff; border: 0; }
.btn.qz-next.ok { background: var(--success); }
.btn.qz-next.ko { background: var(--danger); }
[data-theme="dark"] .btn.qz-next.ok { color: #062a1d; }
[data-theme="dark"] .btn.qz-next.ko { color: #2a0610; }
.btn.qz-next:hover:not(:disabled) { filter: brightness(1.06); }
/* Associer : deux colonnes reliées par des traits de couleur. */
.mt-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.mt-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mt-lines path { fill: none; stroke-width: 2.5; stroke-linecap: round; animation: mt-draw .35s var(--ease); }
@keyframes mt-draw { from { opacity: 0; } to { opacity: 1; } }
.mt-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mt { position: relative; z-index: 1; display: flex; align-items: center; min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 14px; line-height: 1.35; color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.mt:hover:not(:disabled) { background: var(--surface-hover); }
.mt.pick { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.02); box-shadow: 0 0 0 3px var(--accent-soft); }
.mt.open { border-style: dashed; }
.mt.linked { border-color: var(--lc); box-shadow: inset 3px 0 0 var(--lc); }
.mt.r.linked { box-shadow: inset -3px 0 0 var(--lc); }
.mt.ok { border-color: var(--success); background: var(--success-soft); }
.mt.ko { border-color: var(--danger); background: var(--danger-soft); }
.mt:disabled { cursor: default; }
.mt-hint { font-size: 12.5px; margin-top: 12px; }
/* Remettre dans l'ordre : glisser la poignée. */
.order-item { transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s; touch-action: auto; }
.order-list.dragging .order-item.lifted { transition: none; z-index: 3; position: relative; border-color: var(--accent); background: var(--surface-hover); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .55); }
.order-item .grip { display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -6px -6px 0; color: var(--text-3); cursor: grab; touch-action: none; border-radius: 8px; flex: none; }
.order-item .grip:hover { background: var(--bg-sunken); color: var(--text-2); }
.order-list.dragging .grip { cursor: grabbing; }
.order-item .ord-arrows { display: inline-flex; }
@media (hover: none) { .order-item .ord-arrows { display: none; } }
/* Texte à trous : une case corrigée devient une pastille. */
.cloze-line input:disabled { border-radius: 99px; border-bottom-width: 0; font-weight: 600; opacity: 1; -webkit-text-fill-color: currentColor; }
.cloze-line input.ok:disabled { color: var(--success); }
.cloze-line input.ko:disabled { color: var(--danger); text-decoration: line-through; }
/* Écran de fin. */
.result .reward.xp b { color: var(--xp); }
.result .reward.fl b { color: var(--flame); }
.qz-mast { display: grid; gap: 12px; }
.qz-mrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 120px) 46px; gap: 10px; align-items: center; font-size: 14px; }
.qz-mrow .nm { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1.3; }
.qz-mrow .nm .subject-dot { flex: none; }
.qz-mrow .num { text-align: right; font-size: 13px; }
.qz-mbar { position: relative; height: 7px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.qz-mbar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--accent); transition: width 1s var(--ease); }
.qz-mbar i.gain { background: var(--success); }
.qz-global { font-size: 12.5px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .qz-combo.bump, .qz-combo.broke, .opt.reveal, .opt.right .key, .opt.wrong .key, .feedback.qz-sheet, .feedback.qz-sheet .verdict .badge { animation: none; }
}
/* Flashcards : balayer la carte retournée (droite = je savais, gauche = à revoir). */
.flash-swipe { position: relative; touch-action: pan-y; transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
.flash-swipe.moving { transition: none; }
.flash-swipe.out-r { transform: translateX(130%) rotate(18deg); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.flash-swipe.out-l { transform: translateX(-130%) rotate(-18deg); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.fc-stamp { position: absolute; z-index: 3; top: 18px; padding: 4px 10px; border: 2px solid; border-radius: 8px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; opacity: 0; }
.fc-stamp.l { left: 18px; color: var(--danger); transform: rotate(-10deg); }
.fc-stamp.r { right: 18px; color: var(--success); transform: rotate(10deg); }

/* ---------- Fenêtre d'abonnement (06/10, maquette du user) : toujours sombre, comme la capture ---------- */
.pw-overlay { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; background: rgba(6, 5, 14, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: page-in .2s var(--ease); }
.pw { position: relative; width: 100%; max-width: 1240px; margin: auto; padding: 32px 64px 22px; border-radius: 22px; color: #f3f1ff; color-scheme: dark;
  border: 1px solid rgba(160, 140, 255, .28); box-shadow: 0 40px 90px -30px rgba(70, 40, 190, .55);
  background: radial-gradient(ellipse 60% 55% at 78% 0%, rgba(124, 92, 255, .30), transparent 70%), linear-gradient(180deg, #16132b, #0f0d1d); }
.pw-close { position: absolute; top: 24px; right: 28px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: #d8d3f0; cursor: pointer; }
.pw-close:hover { background: rgba(255, 255, 255, .07); }
.pw-badge { display: inline-flex; align-items: center; gap: 12px; padding: 5px 16px 5px 5px; border-radius: 12px; font-size: 14.5px; color: #d9d0ff; background: rgba(139, 109, 255, .13); border: 1px solid rgba(139, 109, 255, .22); }
.pw-badge-i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7b5cff, #a35cff); }
.pw-title { margin: 12px 0 0; font-size: 42px; font-weight: 700; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.pw-title span { background: linear-gradient(90deg, #b07cff, #d49bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw-lead { margin: 6px 0 0; max-width: 620px; font-size: 16.5px; line-height: 1.5; color: #c9c3e2; }
.pw-why { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: #b9a4ff; }
.pw-why .icon { width: 15px; height: 15px; flex: none; }
.pw-interval { display: inline-flex; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.pw-interval button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 22px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: 15.5px; font-weight: 520; color: #e6e1fa; cursor: pointer; }
.pw-interval button.on { color: #fff; background: linear-gradient(135deg, #7b5cff, #9d5cff); box-shadow: 0 6px 18px -8px rgba(123, 92, 255, .8); }
.pw-off { padding: 2px 9px; border-radius: 99px; font-size: 13.5px; background: rgba(123, 92, 255, .35); color: #e9e2ff; }
.pw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; align-items: stretch; }
.pw-card { display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .025); }
.pw-card.hl-solid { border: 2px solid #8b6dff; padding: 19px 19px 17px; box-shadow: 0 0 0 4px rgba(139, 109, 255, .12), 0 20px 50px -24px rgba(123, 92, 255, .7); }
.pw-card.hl-grad { border: 2px solid transparent; padding: 19px 19px 17px;
  background: linear-gradient(#17142c, #141127) padding-box, linear-gradient(135deg, #8b6dff, #b66bff 50%, #ff8bd8) border-box;
  box-shadow: 0 0 46px -14px rgba(176, 108, 255, .75); }
.pw-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pw-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7b5cff, #a35cff); }
.pw-ico .icon { width: 24px; height: 24px; }
.pw-card.free .pw-ico { color: #d8d3ea; background: rgba(255, 255, 255, .09); }
.pw-current { padding: 5px 12px; border-radius: 99px; font-size: 13px; color: #e6e1fa; border: 1px solid rgba(255, 255, 255, .16); }
.pw-name { margin-top: 14px; font-size: 19px; font-weight: 600; }
.pw-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pw-price b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.pw-price span { font-size: 17px; color: #a8a2c6; }
.pw-price small { width: 100%; font-size: 12.5px; color: #8f89ad; }
.pw-card ul { flex: 1; list-style: none; padding: 0; margin: 14px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.pw-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: #ece8fb; }
.pw-check { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #8b6dff; margin-top: -2px; }
.pw-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.pw-card.free .pw-check { background: rgba(255, 255, 255, .13); color: #e3dff2; }
.pw-btn { width: 100%; height: 50px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; transition: filter .15s, transform .1s; }
.pw-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pw-btn:active:not(:disabled) { transform: scale(.99); }
.pw-btn.premium { background: linear-gradient(90deg, #7a5bff, #9c5cff); box-shadow: 0 10px 26px -12px rgba(123, 92, 255, .9); }
.pw-btn.unlimited { background: linear-gradient(90deg, #a06bff, #e98cff); box-shadow: 0 10px 26px -12px rgba(200, 110, 255, .9); }
.pw-btn.current { background: rgba(255, 255, 255, .05); color: #bdb7d8; border: 1px solid rgba(255, 255, 255, .07); cursor: default; font-weight: 500; }
.pw-foot { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 6px 0 2px; }
.pw-foot > div { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 0 24px; }
.pw-foot > div + div { border-left: 1px solid rgba(255, 255, 255, .09); }
.pw-foot-i { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #c6b6ff; background: rgba(139, 109, 255, .16); }
.pw-foot b { font-size: 13.5px; font-weight: 600; }
.pw-foot-i .icon { width: 17px; height: 17px; }
.pw-foot small { font-size: 12px; color: #a29cc0; }
@media (max-width: 860px) {
  .pw-overlay { align-items: flex-start; padding: 12px; }
  .pw { padding: 24px 18px 18px; border-radius: 18px; }
  .pw-close { top: 14px; right: 14px; }
  .pw-title { font-size: 32px; }
  .pw-lead { font-size: 15px; }
  .pw-cards { grid-template-columns: 1fr; }
  .pw-card.hl-solid, .pw-card.hl-grad { order: -1; }
  .pw-card.free { order: 3; }
  .pw-foot { grid-template-columns: 1fr; gap: 14px; }
  .pw-foot > div { padding: 0; }
  .pw-foot > div + div { border-left: 0; }
}
/* Fenêtre d'abonnement sur téléphone : plein écran, offres en lignes à cocher, bouton fixé en bas. */
.pw-m-overlay { padding: calc(28px + env(safe-area-inset-top)) 0 0; align-items: flex-end; background: rgba(6, 5, 14, .66); overflow: hidden; }
.pw.pw-m { display: flex; flex-direction: column; max-width: none; max-height: 100%; margin: 0; padding: 0; border: 1px solid rgba(160, 140, 255, .28); border-bottom: 0; border-radius: 24px 24px 0 0;
  box-shadow: 0 -24px 60px -20px rgba(70, 40, 190, .6); animation: pw-sheet .34s cubic-bezier(.32, 1.25, .5, 1); }
@keyframes pw-sheet { from { transform: translateY(100%); } to { transform: none; } }
.pw-m-handle { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: rgba(255, 255, 255, .22); flex: none; }
.pw-m-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 16px 12px; }
.pw-m-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pw-m .pw-close { position: static; flex: none; width: 36px; height: 36px; margin-right: -6px; }
.pw-m .pw-badge { font-size: 13px; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 10px; }
.pw-m .pw-badge-i { width: 26px; height: 26px; border-radius: 7px; }
.pw-m .pw-title { margin-top: 14px; font-size: 27px; line-height: 1.15; }
.pw-m .pw-lead, .pw-m .pw-why { margin-top: 8px; font-size: 14px; }
.pw-m .pw-interval { display: flex; width: 100%; margin-top: 16px; }
.pw-m .pw-interval button { flex: 1; justify-content: center; height: 40px; padding: 0 10px; font-size: 15px; }
.pw-m-plans { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pw-m-plan { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s; }
.pw-m-plan.on { background: rgba(139, 109, 255, .07); border-color: rgba(139, 109, 255, .45); }
.pw-m-plan.hl-solid { border: 2px solid #8b6dff; }
.pw-m-plan.hl-grad { border: 2px solid transparent; background: linear-gradient(#18152d, #151229) padding-box, linear-gradient(135deg, #8b6dff, #b66bff 50%, #ff8bd8) border-box; box-shadow: 0 0 30px -12px rgba(176, 108, 255, .7); }
.pw-m-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pw-m-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); transition: border-color .2s, box-shadow .2s; }
.pw-m-plan.on .pw-m-radio { border-color: #8b6dff; box-shadow: inset 0 0 0 4px #0f0d1d, inset 0 0 0 10px #8b6dff; }
.pw-m .pw-ico { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.pw-m .pw-ico .icon { width: 19px; height: 19px; }
.pw-m-plan.free .pw-ico { color: #d8d3ea; background: rgba(255, 255, 255, .09); }
.pw-m-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 16px; font-weight: 600; }
.pw-m-name small { font-size: 12px; font-weight: 450; color: #a8a2c6; }
.pw-m .pw-price { flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 0; border: 0; text-align: right; }
.pw-m .pw-price b { font-size: 19px; }
.pw-m .pw-price span { font-size: 12.5px; }
.pw-m .pw-price small { width: auto; font-size: 11px; }
.pw-m-plan ul { list-style: none; margin: 0; padding: 2px 14px 14px 46px; display: flex; flex-direction: column; gap: 9px; animation: page-in .2s var(--ease); }
.pw-m-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: #ece8fb; }
.pw-m .pw-check { width: 20px; height: 20px; margin-top: 0; }
.pw-m .pw-check .icon { width: 12px; height: 12px; }
.pw-m-plan.free .pw-check { background: rgba(255, 255, 255, .13); color: #e3dff2; }
.pw-m-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11.5px; color: #a29cc0; }
.pw-m-trust span { display: inline-flex; align-items: center; gap: 5px; }
.pw-m-trust .icon { width: 15px; height: 15px; color: #b9a4ff; flex: none; }
.pw-m-cta { flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .06); }
.pw-m-cta .pw-btn { height: 52px; }
/* Ordinateur : choix mensuel / annuel à droite du titre. */
.pw-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
.pw-head .pw-title { margin: 0; }
.pw-head .pw-interval { margin: 0; }
.pw-why + .pw-cards, .pw-head + .pw-cards { margin-top: 20px; }
/* Badge « Upgrade to … » plus discret sur ordinateur. */
.pw:not(.pw-m) .pw-badge { gap: 8px; padding: 3px 12px 3px 3px; border-radius: 9px; font-size: 13px; }
.pw:not(.pw-m) .pw-badge-i { width: 24px; height: 24px; border-radius: 7px; }
.pw:not(.pw-m) .pw-badge-i .icon { width: 14px; height: 14px; }
/* Sans la carte Starter : deux offres côte à côte, fenêtre un peu moins large. */
.pw:not(.pw-m) { max-width: 1040px; }
.pw:not(.pw-m) .pw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .pw:not(.pw-m) .pw-cards { grid-template-columns: 1fr; } }
/* Ordinateur : mensuel / annuel au-dessus de la carte Unlimited, à droite, posé sans prendre de place
   (le badge, le titre et le message ne bougent pas, qu'il soit affiché ou non). */
.pw-int-row { position: relative; height: 0; }
.pw-int-row .pw-interval { position: absolute; right: 0; bottom: -8px; margin: 0; padding: 3px; }
.pw-int-row .pw-interval button { height: 30px; padding: 0 14px; font-size: 13.5px; gap: 6px; }
.pw-int-row .pw-off { padding: 1px 7px; font-size: 12px; }
.pw-int-row + .pw-cards { margin-top: 18px; }
/* Sans badge au-dessus du titre (demande du user). */
.pw:not(.pw-m) > .pw-title { margin-top: 4px; }
.pw-m .pw-m-top { align-items: flex-start; }
.pw-m .pw-m-top .pw-title { margin-top: 6px; }

/* ---------- Mot de passe affichable + onboarding « plus tard » (07/10) ---------- */
.pwd-wrap { position: relative; }
.pwd-wrap .input { padding-right: 46px; }
.pwd-wrap .input::-ms-reveal { display: none; }
.pwd-eye { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; transition: color .15s, background .15s; }
.pwd-eye:hover { color: var(--text); background: var(--surface-hover); }
.pwd-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.pwd-eye .icon, .pwd-eye svg { width: 18px; height: 18px; }
.onb-foot.has-later { flex-direction: column; gap: 4px; }
.onb-later { align-self: center; padding: 8px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-3); cursor: pointer; transition: color .15s; }
.onb-later:hover:not(:disabled) { color: var(--text); }
.onb-later:disabled { opacity: .5; cursor: default; }
.ck-done .onb-later { margin-top: 2px; }
.onb-perk { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: -8px 0 20px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
.onb-perk-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px -4px rgba(108, 71, 255, .6); }
.onb-perk-ic svg { width: 18px; height: 18px; }
.onb-perk b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.onb-perk p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* ---------- Flashcards (maquette du user, 07/10) : paquets de cartes + lecteur « carte sur son paquet » ---------- */
:root { --fc-card-a: #363244; --fc-card-b: #2b2837; --fc-card-c: #24212e; --fc-card-line: rgba(255, 255, 255, .08); --fc-under1: #24212e; --fc-under2: #1b1922;
  --fc-title: #f1eff6; --fc-muted: #8a8794; --fc-front-a: #3c344b; --fc-front-b: #30283f; --fc-front-c: #282230; --fc-back-a: #63477f; --fc-back-b: #4f366f; --fc-back-c: #3a2853;
  --fc-btn: #16141d; --fc-btn-hover: #1d1a26; --fc-btn-line: rgba(255, 255, 255, .06); }
:root[data-theme="light"] { --fc-card-a: #ffffff; --fc-card-b: #f7f5fb; --fc-card-c: #f0edf6; --fc-card-line: rgba(25, 22, 46, .1); --fc-under1: #e9e6f1; --fc-under2: #dedaea;
  --fc-title: #19162e; --fc-muted: #7a7690; --fc-front-a: #ffffff; --fc-front-b: #f8f6fc; --fc-front-c: #efecf6; --fc-btn: #ffffff; --fc-btn-hover: #f5f3fa; --fc-btn-line: rgba(25, 22, 46, .1); }
.fc-lib { margin-top: 26px; }
.fc-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.fc-lib-head h2 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -.015em; }
.fc-lib-head .cx-btn { height: 44px; font-size: 15px; padding: 0 20px 0 22px; gap: 10px; }
.fc-decks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.fc-deck { display: flex; flex-direction: column; gap: 10px; padding: 0 0 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; isolation: isolate; }
.fc-deck-card { position: relative; display: flex; align-items: center; aspect-ratio: 1.73; padding: 18px 20px; margin-bottom: 12px; border-radius: 16px;
  background: linear-gradient(135deg, var(--fc-card-a), var(--fc-card-b) 50%, var(--fc-card-c)); border: 1px solid var(--fc-card-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .28); transition: border-color .15s, box-shadow .15s; }
.fc-deck-card::before, .fc-deck-card::after { content: ''; position: absolute; z-index: -1; border-radius: 16px; border: 1px solid var(--fc-card-line); }
.fc-deck-card::before { left: 3px; right: 3px; top: 8px; bottom: -6px; background: var(--fc-under1); }
.fc-deck-card::after { left: 8px; right: 8px; top: 16px; bottom: -12px; background: var(--fc-under2); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.fc-deck:hover .fc-deck-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--fc-card-line)); }
.fc-deck:focus-visible { outline: none; } .fc-deck:focus-visible .fc-deck-card { outline: 2px solid var(--accent); outline-offset: 3px; }
.fc-deck-t { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--fc-title); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fc-deck-n { padding-left: 4px; font-size: 12px; color: var(--fc-muted); }
@media (max-width: 1100px) { .fc-decks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fc-lib-head h2 { font-size: 24px; } .fc-lib-head .cx-btn { height: 40px; font-size: 14px; } .fc-decks { grid-template-columns: 1fr; gap: 28px; } .fc-deck-card { aspect-ratio: 2.6; } }

.fc-play .fc-top { display: flex; align-items: center; gap: 16px; width: min(600px, calc(100% - 32px)); margin: 0 auto; height: 112px; padding-top: env(safe-area-inset-top); box-sizing: border-box; }
.fc-x { flex: none; width: 32px; height: 32px; margin-left: -8px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--fc-muted); cursor: pointer; }
.fc-x:hover { color: var(--text); background: var(--surface-hover); } .fc-x svg { width: 18px; height: 18px; }
.fc-prog { flex: 1; height: 2px; border-radius: 2px; background: var(--fc-btn-line); overflow: hidden; }
.fc-prog i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s var(--ease); }
.fc-count { flex: none; font-size: 13px; color: var(--fc-muted); }
.fc-body { width: min(600px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 48px; }
.fc-play .flash-stage { position: relative; max-width: none; margin: 0 0 40px; isolation: isolate; }
.fc-play .flash { display: grid; min-height: 0; aspect-ratio: 1.93; }
.fc-play .flash .face { position: relative; inset: auto; grid-area: 1 / 1; padding: 44px 56px 64px; border-radius: 16px; border: 1px solid var(--fc-card-line);
  background: linear-gradient(135deg, var(--fc-front-a), var(--fc-front-b) 45%, var(--fc-front-c)); color: var(--fc-title);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px rgba(0, 0, 0, .4); font-size: 26px; line-height: 1.4; font-weight: 500; letter-spacing: -.012em; }
.fc-play .flash .face.back { background: linear-gradient(135deg, var(--fc-back-a), var(--fc-back-b) 45%, var(--fc-back-c)); border-color: rgba(200, 170, 255, .28); color: #fff; }
.fc-play .fc-text { max-width: 100%; overflow-wrap: anywhere; }
.fc-play .flash .face .tap { bottom: 28px; font-size: 12px; font-weight: 450; color: color-mix(in srgb, currentColor 55%, transparent); letter-spacing: 0; }
.fc-under { position: absolute; z-index: -1; border-radius: 16px; border: 1px solid var(--fc-card-line); transition: background .4s var(--ease); }
.fc-under.u1 { left: 8px; right: 12px; bottom: -8px; height: 60%; background: var(--fc-under1); }
.fc-under.u2 { left: 14px; right: 22px; bottom: -17px; height: 60%; background: var(--fc-under2); transform: rotate(-.7deg); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }
.flash-stage.is-back .fc-under.u1 { background: #47306a; border-color: rgba(200, 170, 255, .2); }
.flash-stage.is-back .fc-under.u2 { background: #35244f; border-color: rgba(200, 170, 255, .14); }
.fc-rate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; animation: page-in .25s var(--ease); }
.fc-rate button { height: 44px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--fc-btn-line); background: var(--fc-btn); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, transform .1s; }
.fc-rate button:hover { background: var(--fc-btn-hover); } .fc-rate button:active { transform: scale(.97); }
.fc-rate .r0 { color: #ea9fb2; } .fc-rate .r1 { color: #e4b077; } .fc-rate .r2 { color: #9ecdb9; } .fc-rate .r3 { color: #b7a3ea; }
:root[data-theme="light"] .fc-rate .r0 { color: #c2456a; } :root[data-theme="light"] .fc-rate .r1 { color: #b0711f; } :root[data-theme="light"] .fc-rate .r2 { color: #2f8a68; } :root[data-theme="light"] .fc-rate .r3 { color: #6a4fd0; }
@media (max-width: 600px) {
  .fc-play .fc-top { height: 76px; }
  .fc-play .flash { aspect-ratio: 1.25; }
  .fc-play .flash .face { padding: 32px 24px 56px; font-size: 21px; }
  .fc-rate { gap: 6px; } .fc-rate button { height: 48px; padding: 0 2px; font-size: 12.5px; white-space: nowrap; letter-spacing: -.01em; }
}

/* Fiche de révision en image (07/10) : visionneuse aux outils de la Mind map (.mm, .mm-bar, .mm-view). */
.rs-view .mm-stage img { display: block; max-width: none; border-radius: 6px; background: #fffdf8; box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .55); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rs-view > .center-load { position: absolute; inset: 0; display: grid; place-items: center; }
.mm-tools button:disabled { opacity: .45; cursor: default; }
/* Admin → Cours : retrouver qui a partagé une fiche (filigrane invisible, 07/10). */
.leak-file { height: auto; padding: 9px 12px; font-size: 13.5px; }
.leak-res { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.leak-res .list-row { padding: 0; border: 0; }
.leak-res .list-row b { font-size: 20px; }
.leak-v { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.leak-v .icon { width: 18px; height: 18px; }
.leak-res.match { border-color: color-mix(in srgb, var(--success) 45%, transparent); } .leak-res.match .leak-v { color: var(--success); }
.leak-res.probable { border-color: color-mix(in srgb, var(--warning) 45%, transparent); } .leak-res.probable .leak-v { color: var(--warning); }
.leak-res.none .leak-v { color: var(--text-2); }
/* Écrans de code (07/10) : rappel des spams bien visible sous le champ. */
.auth-spam { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 2px; padding: 11px 13px; border-radius: 10px; background: var(--accent-soft); color: var(--text-2); font-size: 13.5px; line-height: 1.45; text-align: left; }
.auth-spam .icon, .auth-spam svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--accent-text, var(--accent)); }

/* ---------- Signaler une erreur + mention « relu » + Week à venir (07/10) ---------- */
.rep-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 0; background: none; font: inherit; cursor: pointer; color: var(--text-3); transition: color .15s, background .15s; }
.rep-btn .icon, .rep-btn svg { width: 15px; height: 15px; }
.rep-top { width: 32px; height: 32px; justify-content: center; border-radius: 8px; margin-right: -6px; opacity: .7; }
.rep-top:hover, .rep-top:focus-visible { opacity: 1; color: var(--text); background: var(--surface-hover); }
.fc-rep { color: var(--fc-muted); }
.rep-link { font-size: 12.5px; padding: 6px 8px; margin: -6px -8px; border-radius: 8px; }
.rep-link:hover, .rep-link:focus-visible { color: var(--text); background: var(--surface-hover); }
.rep-link .icon, .rep-link svg { width: 13px; height: 13px; }
.cx-trust { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.cx-trust-t { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.cx-trust-t .icon, .cx-trust-t svg { width: 14px; height: 14px; color: var(--success); opacity: .8; }
.rep-overlay { z-index: 90; }
.rep-modal { max-width: 440px; padding: 20px 20px 18px; }
.rep-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rep-head h2 { font-size: 17px; margin: 0; }
.rep-head .icon-btn { margin-right: -8px; }
.rep-sub { margin: 6px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rep-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rep-reason { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.rep-reason:hover { border-color: var(--border-strong); color: var(--text); }
.rep-reason.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 560; }
.rep-note { width: 100%; height: auto; resize: vertical; min-height: 84px; padding: 10px 12px; line-height: 1.5; box-sizing: border-box; }
.rep-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cx-week-soon { border-style: dashed; background: transparent; opacity: .62; cursor: default; }
.cx-week-soon .cx-week-head { cursor: default; align-items: center; }
.cx-week-soon h2 { color: var(--cx-muted) !important; }
.cx-soon-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; color: var(--cx-muted); border: 1px solid var(--cx-card-border); white-space: nowrap; }
.cx-soon-pill .icon, .cx-soon-pill svg { width: 13px; height: 13px; }
@media (max-width: 640px) { .rep-modal { max-width: none; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .rep-foot .btn { flex: 1; } }

/* Admin → Business → Pourquoi ils ont acheté */
.an-buyer + .an-buyer { border-top: 1px solid var(--border); }
.an-buyer .adm-user { border-top: 0; }
.an-buyer-detail { padding: 4px 16px 16px 60px; font-size: 13px; }
.an-buyer-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); margin-bottom: 10px; }
.an-timeline { list-style: none; margin: 0 0 12px; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 8px; }
.an-timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; position: relative; }
.an-timeline li::before { content: ''; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.an-timeline li.checkout::before { background: var(--accent); }
.an-timeline li.paid::before { background: var(--success); }
.an-timeline li.signup::before { background: var(--text-3); }
@media (max-width: 640px) { .an-buyer-detail { padding-left: 16px; } .an-timeline li { grid-template-columns: 1fr; gap: 2px; } }
.chan-head h1 .chan-admin { font-size: 11.5px; font-weight: 600; letter-spacing: 0; vertical-align: middle; margin-left: 6px; }

/* Admin → Plateforme → Duels et Battle Royale */
.an-more { margin-top: 8px; font-size: 12.5px; height: 28px; }
.an-g-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.an-g-who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.an-g-who .avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.an-g-match { min-width: 0; line-height: 1.8; }
.an-g-sub { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) { .an-g-row { grid-template-columns: 1fr; gap: 2px; } }

/* Admin → Plateforme → activité sur 24 h */
.an-hours .adm-col.now .adm-col-bar { outline: 2px solid var(--accent); outline-offset: 1px; }
.an-hours-axis { position: relative; height: 18px; margin-top: 6px; font-size: 11.5px; }
.an-hours-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Admin → Modération */
.mod-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.mod-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mod-gico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); flex: none; }
.mod-thread { padding: 14px 20px 20px; display: grid; gap: 10px; }
.mod-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mod-msg, .mod-report { padding: 10px 12px; border-radius: 12px; background: var(--bg-sunken); font-size: 14px; }
.mod-report { border-radius: 0; background: none; border-top: 1px solid var(--border); padding: 12px 16px; }
.mod-report:first-child { border-top: 0; }
.mod-msg.deleted, .mod-report.deleted { opacity: .6; }
.mod-msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.mod-msg-head .mod-del, .mod-msg-head .btn { margin-left: auto; }
.mod-del { width: 28px; height: 28px; }
.mod-body { white-space: pre-wrap; word-break: break-word; }

/* Daily → Revoir mes erreurs (MistakesReview dans daily.js) : dégradé corail → ambre, propre à cette page. */
.mr { max-width: 820px; margin: 0 auto; --mr-a: #ff6b5b; --mr-b: #ffb03a; }
.mr-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--mr-a) 22%, transparent), transparent 60%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--mr-b) 18%, transparent), transparent 60%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--mr-a) 25%, var(--border)); }
.mr-hero h1 { font-size: 30px; letter-spacing: -.03em; margin: 14px 0 6px; }
.mr-hero p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; max-width: 380px; }
.mr-badge { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--mr-a), var(--mr-b)); box-shadow: 0 8px 24px color-mix(in srgb, var(--mr-a) 35%, transparent); }
.mr-badge .icon { width: 24px; height: 24px; }
.mr-ring-wrap { position: relative; flex: none; width: 132px; height: 132px; display: grid; place-items: center; }
.mr-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mr-ring circle { fill: none; stroke-width: 11; }
.mr-ring-bg { stroke: color-mix(in srgb, var(--text-3) 18%, transparent); }
.mr-ring-fg { stroke: var(--success); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.mr-ring-txt { display: grid; text-align: center; line-height: 1.15; } .mr-ring-txt b { font-size: 24px; letter-spacing: -.02em; } .mr-ring-txt span { font-size: 11.5px; color: var(--text-3); }
.mr-week { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--success); color: #fff; }
.mr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; }
.mr-stat { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 2px; }
.mr-stat b { font-size: 26px; letter-spacing: -.03em; } .mr-stat span { font-size: 12.5px; color: var(--text-3); }
.mr-stat.todo b { color: var(--mr-a); } .mr-stat.hard b { color: var(--mr-b); } .mr-stat.ok b { color: var(--success); }
.mr-sec { margin-top: 22px; }
.mr-sec h2, .mr-card h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 12px; }
.mr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: inherit; font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.mr-chip .num { font-size: 12px; color: var(--text-3); font-weight: 600; }
.mr-chip:hover { border-color: var(--border-strong); }
.mr-chip.on { border-color: var(--mr-a); background: color-mix(in srgb, var(--mr-a) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-a) 15%, transparent); }
.mr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--text-3)); flex: none; }
.mr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.mr-grid > :only-child { grid-column: 1 / -1; }
.mr-cats { display: grid; gap: 10px; }
.mr-cat { display: grid; grid-template-columns: minmax(0, 1fr) 90px 24px; align-items: center; gap: 10px; font-size: 13.5px; }
.mr-cat-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-cat-bar { height: 8px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; } .mr-cat-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mr-a), var(--mr-b)); }
.mr-cat-n { text-align: right; color: var(--text-2); font-weight: 600; }
.mr-concepts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.mr-concepts li { display: flex; align-items: center; gap: 10px; }
.mr-times { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--mr-a); background: color-mix(in srgb, var(--mr-a) 12%, transparent); }
.mr-cta { margin-top: 26px; display: grid; justify-items: center; gap: 8px; text-align: center; padding-bottom: 20px; }
.mr-cta p { margin: 0; font-size: 13px; }
.mr-go { height: 54px; min-width: 320px; max-width: 100%; border-radius: 16px; font-size: 15.5px; justify-content: center; gap: 8px; border: 0;
  background: linear-gradient(135deg, var(--mr-a), var(--mr-b)); color: #fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--mr-a) 30%, transparent); }
.mr-go:hover:not(:disabled) { filter: brightness(1.05); }
.mr-clear { margin-top: 16px; padding: 34px 24px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.mr-clear-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.mr-clear-ico .icon { width: 28px; height: 28px; } .mr-clear h2 { margin: 6px 0 0; font-size: 20px; } .mr-clear p { margin: 0 0 10px; color: var(--text-2); }
@media (max-width: 640px) {
  .mr-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .mr-hero h1 { font-size: 26px; }
  .mr-ring-wrap { align-self: center; width: 116px; height: 116px; }
  .mr-grid { grid-template-columns: 1fr; }
  .mr-stat { padding: 12px; } .mr-stat b { font-size: 22px; }
  .mr-cta { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 75%, transparent); }
  .mr-go { min-width: 0; width: 100%; }
}

/* Daily → Smart review (violet → cyan) et Speedrun (jaune → vert) : mêmes briques que Revoir mes erreurs (.mr-*). */
.mr.sm { --mr-a: #7c5cff; --mr-b: #22c3e6; }
.mr.sr { --mr-a: #f5c518; --mr-b: #4fd18b; }
.mr.sr .mr-badge, .mr.sr .mr-go { color: #1b1b1f; }
.sm-mem { flex: none; width: 240px; padding: 14px 16px 12px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); }
.sm-mem-top { display: flex; align-items: baseline; gap: 8px; } .sm-mem-top b { font-size: 24px; letter-spacing: -.02em; } .sm-mem-top span { font-size: 12px; color: var(--text-3); }
.sm-curve { display: block; width: 100%; height: 64px; margin: 6px 0 4px; overflow: visible; }
.sm-curve-line { fill: none; stroke: var(--mr-a); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sm-curve-fill { fill: color-mix(in srgb, var(--mr-a) 16%, transparent); }
.sm-curve-dot { fill: var(--mr-b); }
.sm-mem-foot { font-size: 12px; color: var(--text-2); }
.sm-mix { display: flex; gap: 3px; height: 12px; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.sm-mix i { display: block; min-width: 6px; }
.sm-review { background: var(--mr-a); } .sm-mistake { background: #ff6b5b; } .sm-new { background: var(--mr-b); }
.sm-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.sm-legend li { display: flex; align-items: center; gap: 10px; }
.sm-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sm-concepts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.sm-c-top { display: flex; align-items: center; gap: 10px; min-width: 0; } .sm-c-top b { font-size: 13px; color: var(--text-2); }
.sm-ret { display: block; height: 6px; margin: 6px 0 0 19px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.sm-ret i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6b5b, var(--mr-b)); }
.sr-record { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 140px; padding: 16px 20px; border-radius: 20px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--mr-a) 22%, transparent), color-mix(in srgb, var(--mr-b) 14%, transparent)); border: 1px solid color-mix(in srgb, var(--mr-a) 35%, var(--border)); }
.sr-record .icon { width: 26px; height: 26px; color: var(--mr-a); }
.sr-record b { font-size: 34px; letter-spacing: -.03em; line-height: 1.1; } .sr-record b small { font-size: 16px; color: var(--text-3); font-weight: 600; }
.sr-record span { font-size: 12px; color: var(--text-3); } .sr-record .sr-none { max-width: 120px; font-size: 13px; color: var(--text-2); }
.sr-rules { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sr-rules li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--mr-a) 45%, var(--border)); }
.sr-rules b { font-size: 20px; letter-spacing: -.02em; } .sr-rules span { font-size: 12.5px; color: var(--text-3); }
.sr-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding-top: 18px; }
.sr-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sr-bar i { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--mr-a) 45%, var(--bg-sunken)); }
.sr-bar.best i { background: linear-gradient(180deg, var(--mr-a), var(--mr-b)); }
.sr-bar span { font-size: 11.5px; color: var(--text-3); } .sr-bar.best span { color: var(--text); font-weight: 700; }
.sr-first { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.sr-first .icon { color: var(--mr-a); }
@media (max-width: 640px) {
  .sm-mem { width: 100%; }
  .sr-record { align-self: stretch; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 10px; }
  .sr-rules li { padding: 10px 12px; } .sr-rules b { font-size: 17px; }
}

/* Fenêtre d'abonnement : apparition fluide. Le fond s'assombrit et se floute, la fenêtre monte légèrement en
   s'agrandissant, les cartes d'offres arrivent l'une après l'autre ; fermeture animée (.pw-root.closing). */
.pw-root .pw-overlay { animation: pw-backdrop .34s ease-out both; }
.pw-root .pw:not(.pw-m) { animation: pw-in .46s cubic-bezier(.22, 1, .36, 1) .04s both; }
.pw-root .pw-card { animation: pw-card .5s cubic-bezier(.22, 1, .36, 1) both; }
.pw-root .pw-card:nth-child(1) { animation-delay: .12s; } .pw-root .pw-card:nth-child(2) { animation-delay: .18s; } .pw-root .pw-card:nth-child(3) { animation-delay: .24s; }
.pw-root .pw.pw-m { animation: pw-sheet .44s cubic-bezier(.22, 1, .36, 1) both; }
.pw-root.closing .pw-overlay { animation: pw-backdrop-out .24s ease-in both; }
.pw-root.closing .pw:not(.pw-m) { animation: pw-out .22s ease-in both; }
.pw-root.closing .pw.pw-m { animation: pw-sheet-out .24s ease-in both; }
@keyframes pw-backdrop { from { background-color: rgba(6, 5, 14, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes pw-backdrop-out { to { background-color: rgba(6, 5, 14, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes pw-in { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pw-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes pw-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pw-sheet-out { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .pw-root .pw-overlay, .pw-root .pw, .pw-root .pw-card, .pw-root.closing .pw-overlay, .pw-root.closing .pw { animation: none !important; }
}

/* ---------- Évolution (08/10, admins seulement pour l'instant) : classes evo-* ---------- */
.evo-tools { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.evo-who { width: auto; min-width: 180px; max-width: 260px; height: 34px; font-size: 13px; }
.evo-up { color: var(--success); font-weight: 600; }
.evo-down { color: var(--danger); font-weight: 600; }
.evo-small { font-size: 12px; }
.evo-kpi-sub { font-size: 14px; }
.an-kpi .stat-label .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.evo-chart { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; }
.evo-chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; text-align: right; height: 180px; margin-top: -6px; padding-bottom: 0; }
.evo-chart-plot { position: relative; height: 180px; }
.evo-chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.evo-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.evo-cursor { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.evo-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.evo-chart-hit { position: absolute; inset: 0; display: flex; }
.evo-chart-hit span { flex: 1; }
.evo-tip { bottom: auto; top: 4px; display: grid; gap: 3px; min-width: 150px; }
.evo-chart .evo-tip.end { right: auto; transform: translateX(calc(-100% - 10px)); }
.evo-chart .evo-tip:not(.end) { transform: translateX(10px); }
.evo-chart-x { grid-column: 2; font-size: 12px; margin-top: 8px; }
.evo-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.evo-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.section-title .evo-legend { margin-top: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
.evo-sq { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.st-mastered { background: var(--success); }
.st-fragile { background: var(--warning); }
.st-weak { background: var(--danger); }
.st-unseen { background: var(--border-strong); }
.evo-stack { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--bg-sunken); }
.evo-stack i { display: block; height: 100%; box-shadow: none; }
.evo-subject-name { font-weight: 600; color: var(--text); text-decoration: none; }
.evo-subject-name:hover { text-decoration: underline; }
.evo-big { font-size: 22px; font-weight: 650; display: flex; align-items: baseline; gap: 6px; }
.evo-big small { font-size: 13px; }
.evo-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 760px) { .evo-facts { grid-template-columns: repeat(4, 1fr); } }
.evo-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; }
.evo-facts b { font-size: 16px; }
.evo-weeks { display: grid; gap: 2px; margin-top: 14px; }
.evo-week { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(80px, 1.2fr) 46px 64px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 13px; }
.evo-week:hover { background: var(--surface-hover); }
.evo-week-n { font-weight: 600; color: var(--text-2); }
.evo-week-v { text-align: right; font-weight: 600; }
.evo-week-c { text-align: right; font-size: 12px; }
@media (max-width: 560px) { .evo-week { grid-template-columns: 30px minmax(0, 1fr) 42px; } .evo-week .evo-stack { grid-column: 2 / -1; grid-row: 2; } .evo-week-c { display: none; } }

/* Évolution, haut de page au design de la maquette du user (10/10) : bandeau, 4 chiffres clés à pastille,
   « Activity over time » en aire lissée, 3 petites cartes. */
.evo-hero, .evo-kpis, .evo-activity, .evo-minis { margin-bottom: 16px; }
.evo-hero { display: flex; align-items: center; gap: 24px 48px; padding: 26px 28px; border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 24%, var(--surface)) 100%); }
.evo-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.evo-hero-title { margin: 8px 0 0; font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.evo-hero-sub { margin: 8px 0 0; color: var(--text-2); font-size: 14px; }
.evo-hero-m { flex: none; width: min(250px, 100%); }
.evo-hero-v { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.evo-hero-l { margin-top: 2px; color: var(--accent-text); font-size: 14px; }
.evo-bar { display: block; height: 6px; margin-top: 12px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.evo-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
@media (max-width: 640px) { .evo-hero { flex-direction: column; align-items: stretch; padding: 20px; } .evo-hero-title { font-size: 22px; } .evo-hero-m { width: 100%; } }

.evo-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1100px) { .evo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.evo-kpi { display: flex; align-items: center; gap: 10px; padding: 13px 16px; }
.evo-kpi-label { font-size: 12.5px; color: var(--text-2); }
.evo-kpi-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 12.5px; }
.evo-kpi-v { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.evo-acc { color: var(--accent-text); }
.evo-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff;
  background: linear-gradient(140deg, #9b7dff, #6c47ff); box-shadow: 0 4px 12px rgba(108, 71, 255, .28); }
.evo-ico .icon { width: 19px; height: 19px; }
@media (max-width: 640px) { .evo-kpis { gap: 10px; } .evo-kpi { flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding: 12px 14px; } .evo-ico { width: 32px; height: 32px; border-radius: 9px; } .evo-ico .icon { width: 16px; height: 16px; } .evo-kpi-v { font-size: 20px; } }

.evo-act-head { display: flex; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.evo-h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.evo-act-sub { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.evo-area { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
.evo-area-y { position: relative; width: 44px; height: 200px; font-size: 12px; color: var(--text-2); }
.evo-area-y span { position: absolute; left: 0; line-height: 14px; margin-top: -7px; white-space: nowrap; }
.evo-area-plot { position: relative; height: 200px; }
.evo-area-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.evo-area-plot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); opacity: .6; }
.evo-dash { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.evo-area-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.evo-fill-a { stop-color: var(--accent); stop-opacity: .75; }
.evo-fill-b { stop-color: var(--accent); stop-opacity: .08; }
.evo-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); pointer-events: none; }
.evo-area .evo-tip { min-width: 0; }
.evo-area .evo-tip.end { right: auto; transform: translateX(calc(-100% - 10px)); }
.evo-area .evo-tip:not(.end) { transform: translateX(10px); }
.evo-area-x { grid-column: 2; position: relative; height: 18px; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.evo-area-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.evo-area-x span.first { transform: none; }
.evo-area-x span.last { transform: translateX(-100%); }
@media (max-width: 640px) { .evo-act-head > .grow { flex-basis: 100%; } .evo-act-head .seg { width: 100%; } .evo-act-head .seg button { flex: 1; }
  .evo-area-y, .evo-area-plot { height: 160px; } .evo-area-x span:not(.first):not(.last) { display: none; } }

.evo-minis { display: grid; gap: 16px; }
@media (min-width: 900px) { .evo-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evo-mini { padding: 18px 22px; }
.evo-mini-v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.evo-mini-l { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.evo-mini-l > span { display: inline-flex; align-items: center; gap: 6px; }
.evo-mini-l .icon { width: 15px; height: 15px; }
.evo-mini-f { margin-top: 12px; font-size: 13px; color: var(--text-2); }
.evo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 560; text-decoration: none; white-space: nowrap; }
.evo-link:hover { text-decoration: underline; }
.evo-hero + .evo-kpis, .evo-minis + .section { margin-top: 0; }

/* Barre latérale : fins traits entre les groupes d'entrées (08/10) */
.sidebar .nav-group-sep { height: 1px; margin: 8px 12px; background: color-mix(in srgb, var(--border) 70%, transparent); flex: none; }

/* ---------- Wordle des cours (08/10, admins seulement pour l'instant) : classes wd-* ---------- */
.wd-page { max-width: 760px; }
.wd-small { font-size: 12px; }
.wd-hub { display: grid; gap: 10px; }
@media (min-width: 720px) { .wd-hub { grid-template-columns: repeat(2, 1fr); } }
.wd-subj { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: inherit; text-decoration: none; }
.wd-subj:hover { border-color: var(--border-strong); }
.wd-subj h3 { font-size: 15px; font-weight: 600; margin: 0; }
.wd-subj p { font-size: 12.5px; margin: 2px 0 0; }
.wd-how { font-size: 13px; color: var(--text-2); margin: 6px 0 12px; line-height: 1.45; }
.wd-ex { display: flex; gap: 4px; }
.wd-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.wd-nums { display: flex; gap: 28px; text-align: center; }
.wd-nums b { display: block; font-size: 22px; font-weight: 650; }
.wd-nums span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.wd-dist { flex: 1; min-width: 220px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.wd-dist-col { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; }
.wd-dist-track { display: flex; align-items: flex-end; width: 100%; max-width: 34px; height: 44px; border-radius: 5px; background: var(--bg-sunken); overflow: hidden; }
.wd-dist-bar { display: block; width: 100%; background: var(--accent); border-radius: 5px 5px 0 0; }
.wd-dist-col b { font-size: 12px; }
.wd-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wd-howto .wd-ex { margin-top: 4px; }
.wd-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.wd-head h1 { font-size: 22px; margin: 0; }
.wd-head p { font-size: 13px; margin: 2px 0 0; }

/* Grille : cases carrées, taille selon le nombre de lettres (5 à 10), sans jamais déborder. */
.wd-board { --gap: 6px; display: grid; gap: var(--gap); justify-content: center; margin: 0 auto 20px;
  --tile: min(58px, calc((min(100vw - 32px, 520px) - (var(--len) - 1) * var(--gap)) / var(--len))); }
.wd-row { display: grid; grid-template-columns: repeat(var(--len), var(--tile)); gap: var(--gap); }
.wd-tile { display: grid; place-items: center; width: var(--tile, 34px); aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--border);
  font-weight: 700; font-size: calc(var(--tile, 34px) * 0.46); text-transform: uppercase; color: var(--text); background: transparent; user-select: none; }
.wd-tile.sm { --tile: 34px; border-radius: 6px; }
.wd-tile.filled { border-color: var(--border-strong); animation: wd-pop 0.12s var(--ease, ease-out); }
.wd-tile.correct { background: var(--success); border-color: var(--success); color: #fff; }
.wd-tile.present { background: var(--warning); border-color: var(--warning); color: #fff; }
.wd-tile.absent { background: color-mix(in srgb, var(--text-3) 32%, var(--surface)); border-color: transparent; color: var(--text-2); }
.wd-row.flip .wd-tile { animation: wd-flip 0.5s ease both; animation-delay: calc(var(--i) * 0.12s); }
.wd-row.shake { animation: wd-shake 0.4s; }
@keyframes wd-pop { 50% { transform: scale(1.08); } }
@keyframes wd-flip { 0% { transform: rotateX(0); filter: brightness(1); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes wd-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .wd-row.flip .wd-tile, .wd-row.shake, .wd-tile.filled { animation: none; } }

/* Clavier à l'écran (QWERTY : les mots sont en anglais). */
.wd-kb { display: grid; gap: 6px; max-width: 520px; margin: 0 auto; user-select: none; }
.wd-kb-row { display: flex; gap: 5px; justify-content: center; }
.wd-key { flex: 1; max-width: 44px; height: 50px; border: 0; border-radius: 7px; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; display: grid; place-items: center; padding: 0; touch-action: manipulation; }
@media (hover: hover) { .wd-key:not(.correct):not(.present):not(.absent):hover { background: var(--surface-hover); } }
.wd-key:focus { outline: none; }
.wd-key:focus-visible { outline: 2px solid var(--accent); }
.wd-key.wide { flex: 1.6; max-width: 72px; font-size: 12px; }
.wd-key.correct { background: var(--success); color: #fff; box-shadow: none; }
.wd-key.present { background: var(--warning); color: #fff; box-shadow: none; }
.wd-key.absent { background: color-mix(in srgb, var(--text-3) 32%, var(--surface)); color: var(--text-3); box-shadow: none; }
.wd-end { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
.wd-result { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: var(--radius); text-align: center; font-size: 14px; }
.wd-result.win { background: var(--success-soft); color: var(--success); }
.wd-result.lose { background: var(--danger-soft); color: var(--danger); }
.wd-answer { font-size: 24px; letter-spacing: 0.18em; color: var(--text); }
.wd-concept h3 { font-size: 17px; margin: 2px 0 8px; }
.wd-card-h { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.wd-points { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.wd-points b { color: var(--text); font-weight: 600; }
.wd-note { font-size: 13px; color: var(--text-2); margin: 0 0 12px; }

/* ---------- Endless (Games → Endless, 08/10) : jeu solo, 3 vies, classement ---------- */
.en-page { max-width: 1080px; }
.en-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.en-layout > * { min-width: 0; }
@media (min-width: 960px) { .en-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.en-start, .en-board { padding: 20px; }
.en-start h2, .en-board h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.en-scopes { display: grid; gap: 8px; }
@media (min-width: 560px) { .en-scopes { grid-template-columns: repeat(2, 1fr); } }
.en-scope { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.en-scope:hover { border-color: var(--border-strong); }
.en-scope.on { border-color: var(--accent); background: var(--accent-soft); }
.en-scope.locked { opacity: .62; }
.en-scope > .grow { min-width: 0; }
.en-scope-name { display: block; font-size: 14px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-scope-best { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.en-scope.locked .en-scope-best { color: var(--warning); }
.en-all-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--on-accent); }
.en-go { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.en-plays { flex: none; display: flex; flex-direction: column; font-size: 13px; color: var(--text-3); line-height: 1.2; }
.en-plays b { font-size: 22px; color: var(--text); }
.en-plays span { font-size: 11.5px; }
.en-go .btn { gap: 8px; }
.en-resume { margin-bottom: 16px; align-items: center; }
.en-howto p { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); margin: 0 0 12px; line-height: 1.45; }
.en-howto p .icon { flex: none; margin-top: 2px; color: var(--accent-text); }
.en-board-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.en-board-head h2 { margin: 0; }
.en-board-scopes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.en-board-scopes::-webkit-scrollbar { display: none; }
.en-board-scopes button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.en-board-scopes button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 560; }
.en-rows { display: flex; flex-direction: column; }
.en-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 14px; min-width: 0; }
.en-row:last-child { border-bottom: 0; }
.en-row.me { background: var(--accent-soft); border-radius: 10px; border-bottom-color: transparent; }
.en-row-own { margin-top: 8px; }
.en-row b { font-size: 15px; }
.en-rank { width: 26px; text-align: center; font-weight: 600; color: var(--text-3); font-size: 13px; }
.en-rank.top { color: var(--on-accent); background: var(--accent); border-radius: 8px; height: 24px; line-height: 24px; }
.en-rank.r1 { background: #f2b51d; color: #2a1d00; }
.en-rank.r2 { background: #b9bfd0; color: #1b1e27; }
.en-rank.r3 { background: #d68a4f; color: #2b1505; }
.en-board-note { font-size: 12px; margin: 12px 0 0; }

/* Partie */
.en-hearts { display: inline-flex; gap: 4px; }
.en-heart { display: grid; color: var(--danger); transition: transform .3s var(--ease), opacity .3s; }
.en-heart svg { fill: currentColor; }
.en-heart.lost { color: var(--text-3); opacity: .35; transform: scale(.82); }
.en-heart.lost svg { fill: none; }
.en-hearts.big .en-heart .icon { width: 26px; height: 26px; }
.en-hit.on { animation: en-shake .45s; }
@keyframes en-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.en-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; animation: en-pop .3s var(--ease); }
.en-score .num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.en-score small { font-size: 11px; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
@keyframes en-pop { 0% { transform: scale(1.18); } 100% { transform: none; } }
.en-timer { position: absolute; left: 16px; right: 16px; bottom: -3px; height: 6px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.en-timer span { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .1s linear, background .3s; }
.en-timer span.low { background: var(--danger); }
.en-body { padding-bottom: 120px; }
.en-correct { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--danger-soft); color: var(--text); font-size: 14px; animation: page-in .2s var(--ease); }
.en-correct .icon { flex: none; color: var(--danger); margin-top: 2px; }
.en-level { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--warning); color: #241500; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: page-in .3s var(--ease); white-space: nowrap; }

/* Fin de partie */
.en-over { align-items: center; justify-content: center; padding: 24px 16px; }
.en-over-card { width: 100%; max-width: 440px; margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.en-over-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 6px; }
.en-over-ico .icon { width: 30px; height: 30px; }
.en-over-card > p { margin: 0; }
.en-over-score { font-size: 76px; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.en-over-label { color: var(--text-2); font-size: 15px; margin-bottom: 6px !important; }
.en-over-facts { display: flex; justify-content: center; gap: 28px; margin: 18px 0 6px; }
.en-over-facts div { display: flex; flex-direction: column; gap: 2px; }
.en-over-facts b { font-size: 20px; }
.en-over-facts span { font-size: 12px; color: var(--text-3); }
.en-over-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.en-over-actions { display: flex; gap: 10px; width: 100%; margin-top: 22px; flex-wrap: wrap; }
.en-over-actions .btn { gap: 8px; min-width: 160px; }
.en-top { margin-bottom: 8px; }
/* Plein écran sous le bandeau mobile : le calque laisse la place du bandeau, et la barre du haut reste collée en haut du calque
   (top: 0, sinon le décalage du bandeau s'ajoute deux fois et la barre recouvre le début de la question). */
.en-play { padding-top: var(--notice-h, 0px); }
.en-play .quiz-top { top: 0; }
/* ---------- Avantages des offres (08/10) : bénéfice en gras, détail dessous (composant Feat de billing.js) ---------- */
.feats .feat > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feats .feat b { font-weight: 600; color: inherit; }
.feats .feat small { font-size: .9em; line-height: 1.4; color: var(--text-2); font-weight: 400; }
.feats .feat-lead { display: block; font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: -2px; }
.pw-card .feats .feat small, .pw-m-plan .feats .feat small { color: #a9a3c7; }
.pw-card .feats .feat-lead, .pw-m-plan .feats .feat-lead { color: #c3b4ff; }
.pw-card .feats { gap: 11px; }
.pw-tag { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: #c9c3e4; }
.pw-m-plan .pw-tag { margin: 0; padding: 0 14px 10px 46px; font-size: 13px; }
.pw-price small.pw-day, .pw-m .pw-price small.pw-day { color: #c3b4ff; font-weight: 600; }
.bill-tag { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.bill-day { font-size: 12px; font-weight: 600; color: var(--accent-text); margin-top: 2px; }
.ck-unlocked .feats .feat, .tour-list.feats .feat { align-items: flex-start; }
/* ---------- Réviser toute la matière (08/10) : views/revise.js ---------- */
.cx-hl-link { margin-top: 14px; }
.cx-hl-link .cx-hl-n { margin-left: 8px; vertical-align: 2px; display: inline-block; }
.rv-weeks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.rv-weeks-label { font-size: 13px; color: var(--text-3); margin-right: 4px; }
.rv-week { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.rv-week.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 560; }
.rv-week .icon { width: 13px; height: 13px; color: var(--accent-text); }
.rv-week-all { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rv-tabs { display: flex; gap: 6px; margin: 18px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.rv-tabs::-webkit-scrollbar { display: none; }
.rv-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14.5px; cursor: pointer; }
.rv-tabs button:hover { background: var(--surface-hover); color: var(--text); }
.rv-tabs button.on { background: var(--accent-soft); color: var(--text); font-weight: 580; }
.rv-tabs .icon { width: 16px; height: 16px; }
.rv-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-2); margin: 0 0 14px; }
.rv-note .icon { flex: none; margin-top: 2px; color: var(--accent-text); }
.rv-stack { display: flex; flex-direction: column; gap: 28px; }
.rv-part-h { font-size: 17px; font-weight: 620; margin: 0 0 12px; }
.rv-part-h.sm { font-size: 15px; margin: 22px 0 10px; }
.rv-part-h.sm:first-child { margin-top: 0; }
.rv-cweek { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 12px 0 4px; }
.rv-cweek:first-child { margin-top: 0; }
.rv-cweek-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent-text); margin-bottom: 4px; }
.rv-guide { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--text-3); }
.rv-guide .icon { flex: none; margin-top: 2px; color: var(--accent-text); }
.rv-page .cx-clist .rv-cweek { flex-basis: 100%; }
.rv-deck-w { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.rv-cpanel { scroll-margin-top: calc(76px + var(--notice-h, 0px)); }

/* ---------- Mobile : plus de barre du bas, menu en haut à droite (08/10/2026) ---------- */
.main { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .main { padding-bottom: 64px; } .topbar .m-menu { display: none; } }
/* Téléphone et tablette : pas de cloche dans l'en-tête (la recherche y est déjà absente). */
@media (max-width: 959px) { .topbar .tb-bell { display: none; } }
.topbar .m-menu { position: relative; }
html.mm-open { overflow: hidden; }
.mnav-layer { position: fixed; inset: 0; z-index: 80; background: rgba(6, 5, 16, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: mnav-fade .18s ease-out; }
.mnav { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: -24px 0 60px -20px rgba(0,0,0,.6); padding-top: env(safe-area-inset-top); animation: mnav-in .24s var(--ease); }
@keyframes mnav-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mnav-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav-layer { animation: none; } }
.mnav-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--border); }
.mnav-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: inherit; text-decoration: none; }
.mnav-me .grow { min-width: 0; display: flex; flex-direction: column; }
.mnav-me b { font-size: 14.5px; font-weight: 600; }
.mnav-me small { font-size: 12px; color: var(--text-3); }
.mnav-scroll { flex: 1; overflow-y: auto; padding: 8px 10px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.mnav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 11px; color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.mnav-item .icon { flex: none; width: 19px; height: 19px; }
.mnav-item.on { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.mnav-item.on .icon { color: var(--accent-text); }
.mnav-sub { margin: 0 0 4px 21px; padding-left: 10px; border-left: 1px solid var(--border); }
.mnav-item.sub { min-height: 38px; font-size: 14px; gap: 10px; }
.mnav-item.sub .icon { width: 16px; height: 16px; }
.mnav-sep { height: 1px; margin: 8px 10px; background: var(--border); }
.mnav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flame); }
.mnav-dnd { margin-top: 10px; }

/* ---------- Revision : réviser en détail (views/revision.js) ---------- */
.rh-page { max-width: 1080px; }
.rh-modes { display: grid; gap: 12px; }
@media (min-width: 720px) { .rh-modes { grid-template-columns: repeat(2, 1fr); } }
.rh-mode { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: inherit; text-decoration: none; }
.rh-mode:hover { border-color: var(--border-strong); }
.rh-mode-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); }
.rh-mode .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rh-mode b { font-size: 16px; font-weight: 600; }
.rh-mode small { font-size: 13px; color: var(--text-2); }
.rh-mode-meta { font-size: 12px; color: var(--accent-text); font-weight: 600; margin-top: 2px; }
.rh-crown { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--warning); }
.rh-sec { margin-top: 30px; }
.rh-sec h2 { font-size: 17px; font-weight: 620; margin: 0 0 12px; }
.rh-weak { padding: 6px; }
.rh-wrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: inherit; text-decoration: none; }
.rh-wrow + .rh-wrow { border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.rh-wrow:hover { background: var(--surface-hover); }
.rh-wdot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.rh-wname { min-width: 0; display: flex; flex-direction: column; }
.rh-wname b { font-size: 14.5px; font-weight: 560; }
.rh-wname small { font-size: 12.5px; color: var(--text-3); }
.rh-wbar { flex: none; width: 120px; display: flex; align-items: center; gap: 8px; }
.rh-wbar small { font-size: 12px; color: var(--text-3); width: 36px; text-align: right; }
.rh-wbar > :first-child { flex: 1; }
.rh-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.rh-mx-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); }
@media (max-width: 559px) { .rh-wbar { display: none; } }
.rh-subjects { display: grid; gap: 12px; }
@media (min-width: 720px) { .rh-subjects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rh-subjects { grid-template-columns: repeat(3, 1fr); } }
.rh-subj { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.rh-subj.locked { opacity: .7; }
.rh-subj-head { display: flex; align-items: center; gap: 12px; }
.rh-subj-head .grow { min-width: 0; display: flex; flex-direction: column; }
.rh-subj-head b { font-size: 15px; font-weight: 600; }
.rh-subj-head small { font-size: 12.5px; color: var(--text-3); }
.rh-pct { font-size: 18px; }
.rh-subj-info { margin: 0; font-size: 13px; color: var(--text-2); }
.rh-subj-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.rh-subj-actions .btn { gap: 6px; }
.rh-subj-actions .btn-primary { flex: 1 1 100%; justify-content: center; }
.rh-subj-actions .btn-secondary { flex: 1 1 0; justify-content: center; }

/* ---------- Parcours guidé (08/10, admins seulement pour l'instant) : classes gp-*, le reste repris du Panic Mode (pz-*) ---------- */
.gp-pick .pz-hero h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Frise des 6 étapes (maquette du user, 08/10) : points reliés par une ligne, le 1er allumé ; nom et durée dessous. */
.gp-flow { list-style: none; padding: 0; margin: 34px 0 6px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gp-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.gp-flow li:not(:last-child)::after { content: ''; position: absolute; top: 9px; left: calc(50% + 12px); width: calc(100% - 24px); height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.gp-flow li:first-child::after { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 22%, var(--border)) 70%); }
.gp-dot { position: relative; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; margin-bottom: 9px; background: var(--bg);
  border: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border)); }
.gp-flow li:first-child .gp-dot { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); }
.gp-flow li:first-child .gp-dot::after { content: ''; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.gp-flow b { font-size: 13.5px; font-weight: 560; color: var(--text-2); line-height: 1.25; }
.gp-flow li:first-child b { color: var(--text); font-weight: 620; }
.gp-flow span:not(.gp-dot) { font-size: 12.5px; color: var(--text-3); }
.gp-flow li:first-child span:not(.gp-dot) { color: var(--text-2); }
@media (max-width: 640px) {
  .gp-flow { margin-top: 26px; }
  .gp-flow li:not(:last-child)::after { top: 7px; left: calc(50% + 10px); width: calc(100% - 20px); }
  .gp-dot { width: 16px; height: 16px; margin-bottom: 7px; }
  .gp-flow li:first-child .gp-dot::after { width: 5px; height: 5px; }
  .gp-flow b { font-size: 11px; padding: 0 2px; }
  .gp-flow span:not(.gp-dot) { font-size: 10.5px; }
}
.gp-kicker { background: var(--accent-soft); color: var(--accent-text); }
.gp-admin { height: 22px; font-size: 11.5px; }
.gp-ico { background: linear-gradient(140deg, #8b6bff, #5b3fd9); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent), 0 14px 40px -10px rgba(108, 71, 255, .55); animation: none; }
.gp-subj-hero { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 26px 0 6px; }
.gp-subj-hero h1 { margin: 2px 0 0; font-size: 34px; letter-spacing: -0.03em; }
.gp-subj-hero p { margin: 4px 0 0; font-size: 13.5px; }
.gp-subj-tile { display: grid; place-items: center; flex: none; width: 80px; height: 80px; border-radius: 24px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--subj, var(--accent)) 30%, transparent), color-mix(in srgb, var(--subj, var(--accent)) 8%, var(--surface)) 70%);
  border: 1px solid color-mix(in srgb, var(--subj, var(--accent)) 35%, var(--border));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--subj, var(--accent)) 8%, transparent), 0 18px 48px -14px color-mix(in srgb, var(--subj, var(--accent)) 55%, transparent); }
@media (max-width: 640px) { .gp-subj-hero h1 { font-size: 23px; } .gp-subj-hero { gap: 14px; } .gp-subj-tile { width: 64px; height: 64px; border-radius: 19px; } }
.gp-weeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gp-wnum { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 650; font-size: 14px;
  background: color-mix(in srgb, var(--subj, var(--accent)) 18%, var(--surface-2, var(--surface))); color: var(--text); }
.gp-wbar { margin: 7px 0 5px; max-width: 260px; }
.gp-concept .cx-lesson { margin-top: 4px; }
@media (max-width: 640px) { .gp-weeks { grid-template-columns: 1fr; } }

/* ---------- Support admin : élément signalé (08/10) : bouton à côté du message, page sri-* ---------- */
.sup-msg-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sup-msg-row .sup-msg { flex: 0 1 auto; }
.sup-see { flex: none; margin-top: 6px; }
.sri-sec { margin-top: 14px; }
.sri-sec h3 { margin: 4px 0 8px; }
.sri-q { font-size: 19px; line-height: 1.4; margin: 14px 0 12px; }
.sri-k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.sri-p { margin: 0; line-height: 1.55; }
.sri-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sri-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.sri-opt.ok { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); background: color-mix(in srgb, var(--success) 10%, transparent); }
.sri-opt.ok > .icon { color: var(--success); margin-top: 3px; }
.sri-why { display: block; margin-top: 4px; }
.sri-ans { margin: 4px 0 0; }
.sri-list { margin: 0; padding-left: 22px; line-height: 1.6; }
.sri-bad { color: var(--danger); font-weight: 600; }
.sri-table { border-collapse: collapse; width: 100%; } .sri-table td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }
.sri-fc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.sri-fc > div { padding: 14px; border: 1px solid var(--border); border-radius: 12px; } .sri-fc p { margin: 0; line-height: 1.5; }
.sri-raw { white-space: pre-wrap; font-size: 12.5px; }
@media (max-width: 640px) { .sri-fc { grid-template-columns: 1fr; } .sup-msg-row { flex-direction: column; } }

/* Page Revision = Parcours guidé seul (maquette du user, 08/10) : en-tête centré, frise .gp-flow inchangée, cartes matières teintées (--sc). */
.gp-sec { max-width: 1100px; margin: 0 auto 30px; }
.gp-hero { position: relative; text-align: center; padding: 34px 0 4px; }
.gp-hero h1 { position: relative; font-size: clamp(34px, 5vw, 54px); font-weight: 760; letter-spacing: -0.035em; line-height: 1.05; margin: 22px 0 14px; }
.gp-hero h1 em { font-style: normal; background: linear-gradient(100deg, #8b6bff, #b49cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-hero p { position: relative; max-width: 620px; margin: 0 auto; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.gp-hero-ico { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; color: #fff;
  background: linear-gradient(145deg, #9a7dff, #6a48f0 55%, #5634d6); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 17%, transparent), 0 0 0 11px color-mix(in srgb, var(--accent) 22%, transparent),
    0 14px 60px color-mix(in srgb, var(--accent) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.gp-hero-ico .icon { width: 34px; height: 34px; }
/* En-tête du Parcours guidé (maquette du user, 08/10) : halo violet, arc large et plat sur lequel sont posées les tuiles. */
.gp-glow { position: absolute; left: 50%; top: -60px; width: min(820px, 100%); height: 380px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); opacity: .7; }
.gp-arc { position: absolute; left: 0; top: 0; width: 100%; height: 260px; pointer-events: none; overflow: visible; }
.gp-arc stop { stop-color: #8b6bff; }
.gp-arc path { fill: none; stroke: url(#gp-arc-g); stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(139, 107, 255, .6)); }
.gp-arc .gp-arc-in { stroke-width: 1; opacity: .35; stroke-dasharray: 2 6; filter: none; }
.gp-float { position: absolute; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 17px; color: #b3a1ff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 30%, var(--surface)), color-mix(in srgb, var(--accent) 10%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 14px 34px rgba(12, 6, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: gp-bob 6s ease-in-out infinite; }
.gp-float .icon { width: 27px; height: 27px; stroke-width: 1.8; }
/* Positions calées sur l'arc : y = 230 - 632·t·(1 - t), x = t (en %). */
.gp-f1 { left: 23%; top: 118px; --r: -14deg; }
.gp-f2 { left: 76%; top: 102px; --r: 11deg; animation-delay: -2s; }
.gp-f3 { left: 88%; top: 164px; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 13px; --r: 13deg; animation-delay: -4s; }
.gp-f3 .icon { width: 19px; height: 19px; }
@keyframes gp-bob { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-7px) rotate(var(--r)); } }
.gp-spark { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #8b6bff; box-shadow: 0 0 10px 1px #8b6bff; opacity: .85; }
.gp-s1 { left: 31%; top: 28px; } .gp-s2 { left: 64%; top: 22px; } .gp-s3 { left: 13%; top: 196px; width: 5px; height: 5px; }
.gp-s4 { left: 70%; top: 112px; width: 5px; height: 5px; } .gp-s5 { left: 36%; top: 92px; width: 3px; height: 3px; opacity: .55; }
.gp-s6 { left: 18%; top: 158px; width: 4px; height: 4px; opacity: .6; } .gp-s7 { left: 83%; top: 145px; width: 3px; height: 3px; opacity: .5; }
.gp-sec .gp-flow { margin-top: 40px; }
.gp-pick-h { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); margin: 40px 0 14px; }
.gp-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gp-subj { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; min-height: 104px; padding: 18px 22px 18px 26px; border-radius: 16px;
  color: var(--text); text-decoration: none; border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  background: radial-gradient(70% 140% at 82% 50%, color-mix(in srgb, var(--sc) 22%, transparent), transparent 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--sc) 24%, var(--bg)), color-mix(in srgb, var(--sc) 12%, var(--bg)) 55%, color-mix(in srgb, var(--sc) 26%, var(--bg)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sc) 30%, transparent);
  transition: transform .2s var(--ease), border-color .15s, box-shadow .2s; }
a.gp-subj:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sc) 75%, transparent); box-shadow: 0 12px 34px color-mix(in srgb, var(--sc) 28%, transparent); }
.gp-subj > * { position: relative; }
/* Illustration de fond par matière (revision-art.js) : silhouettes plus sombres que la carte, liseré clair, fondu vers la gauche. */
.gp-art { position: absolute !important; right: 26px; bottom: -12px; width: 214px; height: 119px; pointer-events: none; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 55%); mask-image: linear-gradient(90deg, transparent 4%, #000 55%); }
.gp-art .gpa-s0 { stop-color: color-mix(in srgb, var(--sc) 30%, transparent); }
.gp-art .gpa-s1 { stop-color: color-mix(in srgb, var(--sc) 42%, var(--bg)); }
.gp-art .gpa-s2 { stop-color: color-mix(in srgb, var(--sc) 14%, var(--bg)); stop-opacity: .2; }
.gp-art .gpa-s3 { stop-color: color-mix(in srgb, var(--sc) 80%, #fff); }
.gp-art .gpa-deep { fill: color-mix(in srgb, var(--sc) 26%, var(--bg)); opacity: .75; }
.gp-art .gpa-top { fill: color-mix(in srgb, var(--sc) 55%, var(--bg)); }
.gp-art .gpa-line { fill: none; stroke: color-mix(in srgb, var(--sc) 60%, var(--bg)); stroke-width: 1.3; opacity: .55; }
.gp-art .gpa-thin { stroke-width: .8; opacity: .35; }
.gp-art .gpa-arrow { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.gp-art .gpa-dot { fill: color-mix(in srgb, var(--sc) 60%, var(--bg)); }
.gp-subj-name { font-weight: 650; font-size: 18px; letter-spacing: -0.01em; }
.gp-subj-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin-top: 5px; color: var(--text-2); }
.gp-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(8, 6, 20, .72); color: #fff; transition: background .15s; }
.gp-go .icon { width: 20px; height: 20px; }
a.gp-subj:hover .gp-go { background: var(--accent); }
.gp-subj.is-frozen { filter: grayscale(.35); }
.gp-subj.is-frozen > .gp-art { opacity: .45; }
@media (max-width: 860px) {
  .gp-subjects { grid-template-columns: 1fr; }
  .gp-float, .gp-spark { display: none; }
  .gp-arc { height: 170px; } .gp-arc .gp-arc-in { display: none; }
  .gp-hero { padding-top: 18px; }
  .gp-subj { gap: 16px; min-height: 88px; padding: 14px 16px; }
  .gp-subj > .subject-tile { width: 48px !important; height: 48px !important; }
  .gp-subj-name { font-size: 16px; } .gp-subj-meta { font-size: 13px; }
  .gp-art { right: 30px; width: 170px; height: 94px; bottom: -8px; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) { .gp-float { animation: none; transform: rotate(var(--r)); } }

/* ---------- Admin → E-mails (newsletters, 09/10) : liste, éditeur par blocs, aperçu en direct ---------- */
.nle-health .nle-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.nle-check { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 520; background: var(--bg-sunken); color: var(--text-2); cursor: help; }
.nle-check.ok .icon { color: var(--success); }
.nle-check.bad { background: var(--danger-soft); color: var(--danger); }
.nle-list { overflow: hidden; }
.nle-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); cursor: pointer; }
.nle-row:first-child { border-top: 0; }
.nle-row:hover { background: var(--bg-sunken); }
.nle-row-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); }
.nle-row-subj { font-weight: 560; font-size: 14px; }
.nle-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nle-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nle-tpl.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nle-tpl b { font-size: 13.5px; font-weight: 600; }
.nle-tpl small { font-size: 12px; color: var(--text-3); }
.nle-tpl-art { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: #f3f1fa; padding: 10px 12px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.nle-tpl-art i { display: block; height: 6px; border-radius: 3px; background: #dcd6ef; }
.nle-tpl-art i:first-child { height: 9px; width: 70%; background: #19162e; }
.nle-tpl-art[data-k="announce"] i:nth-child(3) { height: 14px; background: #e6dfff; border-left: 3px solid #6c47ff; }
.nle-tpl-art[data-k="announce"] i:last-child { width: 46%; height: 11px; margin: auto auto 0; background: #6c47ff; }
.nle-tpl-art[data-k="digest"] i:nth-child(3) { height: 26px; background: linear-gradient(90deg, #e6dfff 48%, transparent 48% 52%, #e6dfff 52%); }
.nle-tpl-art[data-k="digest"] i:last-child { width: 46%; height: 11px; margin: auto auto 0; background: #6c47ff; }
.nle-tpl-art[data-k="blank"] i:nth-child(n+3) { opacity: 0; }

.nle-page { max-width: 1440px; }
.nle-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.nle-save { font-size: 12.5px; }
.nle-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.nle-banner > .icon { color: var(--accent-text); flex: none; }
.nle-progress { height: 6px; border-radius: 3px; background: var(--bg-sunken); margin: 8px 0; overflow: hidden; }
.nle-progress span { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }
.nle-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.nle-stats b { color: var(--text); font-size: 15px; margin-right: 4px; }
.nle-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .nle-grid { grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.05fr); } .nle-preview { position: sticky; top: 16px; } }
.nle-edit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nle-subject { font-weight: 560; }
.nle-tabs { align-self: flex-start; }
.nle-block { overflow: hidden; }
.nle-block-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 13px; }
.nle-block-head b { font-weight: 560; margin-left: 4px; }
.nle-block-head .icon-btn { width: 30px; height: 30px; }
.nle-block-head .icon-btn:disabled { opacity: .3; pointer-events: none; }
.nle-block-ic { color: var(--accent-text); display: grid; place-items: center; }
.nle-block-body { padding: 12px; gap: 10px; }
.nle-h-input { font-size: 17px; font-weight: 600; }
.nle-2 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.nle-rich { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.nle-rich:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nle-rich .textarea { border: 0; border-radius: 0; box-shadow: none; resize: vertical; min-height: 72px; width: 100%; }
.nle-tools { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.nle-tools button { min-width: 30px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nle-tools button:hover { background: var(--surface-hover); color: var(--text); }
.nle-tools .nle-var { margin-left: auto; color: var(--accent-text); font-weight: 560; }
.nle-img { display: flex; gap: 12px; align-items: center; }
.nle-img img, .nle-img-empty { width: 88px; height: 66px; flex: none; border-radius: 8px; object-fit: cover; background: var(--bg-sunken); display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--border); }
.nle-cols { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.nle-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nle-col .nle-img { flex-direction: column; align-items: stretch; }
.nle-col .nle-img img, .nle-col .nle-img-empty { width: 100%; height: 80px; }
.nle-add-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nle-add-grid button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: none; color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.nle-add-grid button:hover { border-style: solid; border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.nle-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nle-chipbtn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.nle-chipbtn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); font-weight: 560; }
.nle-count { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-sunken); font-size: 14px; }
.nle-count b { font-size: 20px; margin-right: 2px; }
.nle-checklist { display: flex; flex-direction: column; gap: 8px; }
.nle-chk { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.nle-chk .icon { flex: none; margin-top: 1px; }
.nle-chk.ok .icon { color: var(--success); }
.nle-chk.warn .icon { color: var(--warning); }
.nle-chk.bad { color: var(--text); }
.nle-chk.bad .icon { color: var(--danger); }
.nle-preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nle-preview-bar { display: flex; align-items: center; gap: 12px; }
.nle-inbox { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; }
.nle-frame { border-radius: var(--radius); border: 1px solid var(--border); background: #f3f1fa; overflow: hidden; display: flex; justify-content: center; transition: padding .2s var(--ease); }
.nle-frame iframe { width: 100%; height: min(78vh, 900px); border: 0; display: block; background: #f3f1fa; transition: width .25s var(--ease); }
.nle-frame.mobile { padding: 18px 0; background: var(--bg-sunken); }
.nle-frame.mobile iframe { width: 375px; max-width: 100%; height: min(74vh, 780px); border-radius: 28px; box-shadow: 0 0 0 8px #19162e, var(--shadow-lg); }
.nle-admin { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; }
.nle-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.nle-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nle-opt input[type="radio"] { margin-top: 3px; accent-color: var(--accent); }
.nle-opt b { display: block; font-weight: 560; font-size: 14px; }
.nle-opt small { display: block; color: var(--text-3); font-size: 12.5px; }
.nle-confirm { margin: 16px 0 12px; font-size: 13.5px; color: var(--text-2); }
.nle-rcpt { max-height: 60vh; overflow: auto; margin: 0 -4px; }
.nle-rcpt-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--border); font-size: 13.5px; }
.nle-rcpt-row:first-child { border-top: 0; }
@media (max-width: 640px) {
  .nle-tpls { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .nle-2, .nle-cols { grid-template-columns: 1fr; }
  .nle-add-grid { grid-template-columns: repeat(4, 1fr); }
  .nle-banner { flex-wrap: wrap; }
}

/* ---------- Abonnement, nouveau design (maquette du user, 09/10 ; admins seulement pour l'instant) : classes sx-* ---------- */
.sx-page { max-width: 1180px; position: relative; }
.sx-page::before { content: ''; position: absolute; inset: -40px 0 auto; height: 520px; pointer-events: none; z-index: -1;
  background: radial-gradient(38% 55% at 70% 22%, rgba(124, 92, 255, .16), transparent 70%), radial-gradient(30% 45% at 26% 0%, rgba(124, 92, 255, .08), transparent 70%); }
.sx-hero { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; padding: 6px 4px 0; }
@media (min-width: 1100px) { .sx-hero { grid-template-columns: minmax(0, 1fr) 400px; padding-left: 52px; } }
/* Ordinateur portable : titre toujours sur deux lignes (taille calée sur la largeur de la colonne), illustration réduite. */
.sx-hero-text { min-width: 0; container-type: inline-size; }
@media (min-width: 1100px) { .sx-hero .sx-hero-text h1 { white-space: nowrap; font-size: clamp(22px, calc(100cqi / 20.2), 38px); } }
@media (min-width: 1100px) and (max-width: 1599px) { .sx-hero { grid-template-columns: minmax(0, 1fr) 300px; padding-left: 24px; } .sx-art { zoom: .75; }
  .sx-points { flex-wrap: wrap; gap: 14px 28px; } .sx-point span { white-space: nowrap; } }
.sx-eyebrow { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); font-weight: 520; }
.sx-hero h1 { font-size: clamp(28px, 3.1vw, 38px); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; margin: 10px 0 10px; }
.sx-hero h1 span { background: linear-gradient(90deg, #8b6dff 0%, #a77bff 55%, #b98aff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-lead { font-size: 17px; color: var(--text-2); margin: 0; }
.sx-points { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 24px; }
@media (min-width: 1100px) { .sx-points { flex-wrap: nowrap; gap: 32px; } }
.sx-point { display: flex; align-items: center; gap: 14px; }
.sx-point b { display: block; font-size: 13.5px; font-weight: 600; }
.sx-point small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.sx-pi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(124, 92, 255, .16); color: #a58bff; box-shadow: inset 0 0 0 1px rgba(139, 109, 255, .25); }
.sx-pi .icon { width: 22px; height: 22px; }

.sx-art { position: relative; height: 240px; display: none; }
@media (min-width: 1100px) { .sx-art { display: block; } }
.sx-glass { position: absolute; border-radius: 14px; padding: 14px 16px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 9px; }
.sx-glass.back1 { width: 170px; height: 110px; left: 36px; top: 30px; transform: rotate(8deg); opacity: .55; }
.sx-glass.back2 { width: 150px; height: 104px; left: 56px; top: 118px; transform: rotate(8deg); opacity: .4; }
.sx-glass.mock { width: 180px; left: 140px; top: 52px; transform: rotate(14deg); }
.sx-glass.ai { width: 190px; left: 210px; top: 140px; transform: rotate(-9deg); background: linear-gradient(160deg, rgba(124,92,255,.38), rgba(90,51,230,.18)); border-color: rgba(167,139,255,.4); }
.sx-gi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(124,92,255,.35); color: #c9b8ff; }
.sx-gh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #f1edff; }
.sx-ring { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #e8e2ff; color: #e8e2ff; }
.sx-ring.v { background: #8b6dff; border-color: #b9a6ff; }
.sx-ring .icon { width: 12px; height: 12px; }
.sx-row { display: flex; align-items: center; gap: 8px; }
.sx-tick { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #8ef0c9; flex: none; }
.sx-tick .icon { width: 12px; height: 12px; stroke-width: 3; }
.sx-bar { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.16); flex: 1; }
.sx-bar.w30 { width: 30%; flex: none; } .sx-bar.w40 { width: 40%; flex: none; } .sx-bar.w60 { width: 60%; flex: none; } .sx-bar.w70 { width: 70%; flex: none; }
.sx-dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); }
.sx-cap { position: absolute; width: 140px; right: 36px; top: -4px; transform: rotate(10deg); filter: drop-shadow(0 12px 18px rgba(60,30,180,.45)); }
.sx-spark { position: absolute; width: 4px; height: 28px; border-radius: 2px; background: #8b6dff; box-shadow: 10px 22px 0 -1px #8b6dff; }
.sx-spark.l { left: 14px; top: 150px; transform: rotate(-35deg); }
.sx-spark.r { right: 6px; top: 96px; transform: rotate(40deg); }

.sx-mine { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 22px 0 0; padding: 16px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.sx-mine-main { flex: 1; min-width: 200px; }
.sx-mine-main small { color: var(--text-3); font-size: 12.5px; }
.sx-mine-name { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; }
.sx-mine-name b { font-size: 20px; }
.sx-mine-main p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sx-mine-usage { display: flex; gap: 22px; font-size: 12.5px; color: var(--text-3); }
.sx-mine-usage > div { display: grid; grid-template-columns: auto auto; gap: 4px 10px; min-width: 150px; }
.sx-mine-usage b { color: var(--text); text-align: right; }
.sx-q { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; }
.sx-q span { display: block; height: 100%; background: var(--accent); }
.sx-danger { color: var(--danger); }

.sx-toggle-row { display: flex; justify-content: center; margin: 48px 0 16px; }
.sx-toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.sx-toggle button { height: 32px; padding: 0 18px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 540; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sx-toggle button.on { background: rgba(124, 92, 255, .22); color: var(--text); box-shadow: inset 0 0 0 1px rgba(139, 109, 255, .35); }
.sx-save { height: 20px; padding: 0 7px; border-radius: 6px; background: #6c47ff; color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; }

.sx-cards { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; align-items: stretch; }
@media (min-width: 960px) { .sx-cards { grid-template-columns: repeat(3, 1fr); } }
.sx-card { display: flex; flex-direction: column; padding: 22px 26px 20px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--surface); border: 1px solid var(--border); }
/* Mise en avant (dégradé, bordure, halo) : sur Unlimited (demande du user) ; .discs = mise en page de Premium (icônes rondes). */
.sx-card.discs { padding: 22px 22px 18px; }
.sx-card.featured { border: 1.5px solid #8b6dff; background: linear-gradient(180deg, rgba(124,92,255,.16), rgba(124,92,255,.05) 60%), var(--surface);
  overflow: hidden; } /* dégradé contenu dans la carte : ni halo ni anneau à l'extérieur (demande du user) */
.sx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.sx-card.discs .sx-card-head, .sx-card.discs .sx-price, .sx-card.discs .sx-desc { padding-left: 8px; }
.sx-card h3 { font-size: 15.5px; font-weight: 640; margin: 0; }
.sx-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 560; color: #f3b1ff; border: 1.5px solid rgba(214, 120, 255, .55); background: rgba(177, 77, 255, .1); }
.sx-pill .icon { width: 15px; height: 15px; color: #f5a524; fill: #f5a524; }
.sx-current { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 560; display: inline-flex; align-items: center; }
.sx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sx-price b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sx-price span { font-size: 13.5px; color: var(--text-2); }
.sx-price em { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--text-3); margin-top: -2px; }
.sx-desc { font-size: 13.5px; color: var(--text-2); margin: 6px 0 14px; line-height: 1.45; max-width: 270px; }
.sx-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.sx-li { display: flex; gap: 14px; align-items: flex-start; }
.sx-li b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.sx-li small { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.35; margin-top: 2px; }
.sx-ic { width: 22px; flex: none; display: grid; place-items: center; margin-top: 1px; }
.sx-ic .icon { width: 19px; height: 19px; }
.sx-ic.ok { color: #34d399; } .sx-ic.ok .icon { stroke-width: 2.6; }
.sx-ic.disc { width: 36px; height: 36px; border-radius: 50%; background: rgba(124,92,255,.16); color: #c79bff; margin: -4px 0 0 0; }
.sx-ic.disc .icon { width: 18px; height: 18px; }
.sx-ic.c-orange { color: #ff8a3d; } .sx-ic.c-blue { color: #4f7cff; } .sx-ic.c-pink { color: #f0468f; } .sx-ic.c-violet { color: #a58bff; }
.sx-btn { width: 100%; height: 38px; border: 0; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #7c5cff 0%, #9d5cff 60%, #c06bff 100%); box-shadow: 0 8px 20px -10px rgba(124,92,255,.8), inset 0 1px 0 rgba(255,255,255,.18); }
.sx-btn:hover:not(:disabled) { filter: brightness(1.08); }
.sx-btn:disabled { opacity: .55; cursor: default; }
.sx-btn.ghost { background: var(--bg-sunken); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.sx-btn.sm { width: auto; height: 34px; padding: 0 14px; font-size: 13px; }

.sx-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin-top: 26px; padding: 12px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 960px) { .sx-trust { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; } }
.sx-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-t b { display: block; font-size: 12.5px; font-weight: 600; }
.sx-t small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.sx-ti { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(124,92,255,.14); color: #a58bff; }
.sx-ti .icon { width: 19px; height: 19px; }
.sx-avs { display: flex; flex: none; }
.sx-avs img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #241f42; border: 2px solid var(--surface); box-sizing: border-box; }
.sx-avs img + img { margin-left: -9px; }

.sx-bottom { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 14px; align-items: start; }
@media (min-width: 960px) { .sx-bottom { grid-template-columns: 1fr 1.08fr; } .sx-bottom.solo { grid-template-columns: 1fr; } }
/* Avis et questions fréquentes : même titre au-dessus, cartes de même hauteur (demande du user). */
.sx-bottom { align-items: stretch; }
.sx-reviews, .sx-faq { display: flex; flex-direction: column; min-width: 0; }
.sx-reviews h2, .sx-faq h2 { font-size: 16px; font-weight: 640; margin: 2px 0 10px; }
.sx-reviews .sx-quote, .sx-faq-list { flex: 1; }
.sx-faq h2 { font-size: 16px; font-weight: 640; margin: 2px 0 10px; }
.sx-faq-list { border-radius: 12px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.sx-faq details + details { border-top: 1px solid var(--border); }
.sx-faq summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13.5px; cursor: pointer; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary .icon { margin-left: auto; width: 16px; height: 16px; color: var(--text-3); transition: transform .2s var(--ease); }
.sx-faq details[open] summary .icon { transform: rotate(180deg); }
.sx-tri { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform .2s var(--ease); flex: none; }
.sx-faq details[open] .sx-tri { transform: rotate(90deg); }
.sx-faq details p { margin: 0; padding: 0 16px 12px 35px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.sx-billing { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 760px) { .sx-billing { grid-template-columns: repeat(3, 1fr); } }
.sx-billing button { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sx-billing button:hover { background: var(--surface-hover); }
.sx-billing button > .icon { color: var(--accent-text); flex: none; }
.sx-billing b { display: block; font-size: 13.5px; } .sx-billing small { display: block; font-size: 12px; color: var(--text-3); }
.sx-billing button.danger > .icon, .sx-billing button.danger b { color: var(--danger); }
@media (max-width: 640px) {
  .sx-points { gap: 14px; flex-direction: column; }
  .sx-card { padding: 20px; }
  .sx-trust { grid-template-columns: 1fr; }
}

/* ---------- Admin → E-mails → Boîte de réception (09/10) : classes ib-* ---------- */
.ib-tabs { margin: 0 0 16px; }
.ib-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.ib-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; }
.ib-page { max-width: 1440px; }
.ib-grid { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .ib-grid { grid-template-columns: 190px minmax(280px, 380px) minmax(0, 1fr); } }
.ib-folders { display: flex; flex-direction: column; gap: 2px; }
.ib-box { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 0 10px 8px; }
.ib-folder { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.ib-folder:hover { background: var(--surface-hover); color: var(--text); }
.ib-folder.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 560; }
.ib-folder b { font-size: 12px; }
.ib-list { overflow: hidden; }
.ib-list-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.ib-item { display: flex; gap: 10px; width: 100%; padding: 11px 14px 11px 10px; border: 0; border-top: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ib-list-head + .ib-item { border-top: 0; }
.ib-item:hover { background: var(--surface-hover); }
.ib-item.on { background: var(--accent-soft); }
.ib-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.ib-item.unread .ib-dot { background: var(--accent); }
.ib-item-top { display: flex; align-items: baseline; gap: 8px; }
.ib-from { flex: 1; font-size: 13.5px; color: var(--text-2); }
.ib-item.unread .ib-from, .ib-item.unread .ib-subj { color: var(--text); font-weight: 620; }
.ib-date { font-size: 12px; color: var(--text-3); flex: none; }
.ib-subj { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.ib-subj .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
.ib-pager { display: flex; padding: 8px; border-top: 1px solid var(--border); }
.ib-pane { min-width: 0; }
.ib-empty-pane { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 320px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-3); font-size: 13.5px; }
.ib-empty-pane .icon { width: 28px; height: 28px; }
.ib-reader { display: flex; flex-direction: column; gap: 12px; }
.ib-reader-bar { display: flex; align-items: center; gap: 6px; }
.ib-subject { font-size: 20px; font-weight: 640; letter-spacing: -.01em; margin: 2px 0 0; }
.ib-meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.ib-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.ib-images { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 9px; background: var(--bg-sunken); font-size: 12.5px; color: var(--text-2); }
.ib-images .btn { margin-left: auto; }
.ib-body { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.ib-body iframe { display: block; width: 100%; height: min(62vh, 760px); border: 0; background: #fff; }
.ib-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-att { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; font-size: 13px; }
.ib-att small { color: var(--text-3); flex: none; }
.ib-att:hover { border-color: var(--accent); }
.ib-reply-hint { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-3); font: inherit; font-size: 13.5px; text-align: left; cursor: text; }
.ib-reply-hint:hover { border-color: var(--accent); color: var(--text-2); }
.ib-compose { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ib-compose-head { display: flex; align-items: center; font-size: 14px; }
.ib-field { display: flex; align-items: center; gap: 10px; }
.ib-field span { width: 52px; flex: none; font-size: 13px; color: var(--text-3); }
.ib-field .input { flex: 1; min-width: 0; }
.ib-text { width: 100%; resize: vertical; min-height: 200px; font-size: 14px; line-height: 1.55; }
.ib-setup { max-width: 640px; margin: 8px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ib-setup-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.ib-setup h3 { margin: 4px 0 0; font-size: 17px; }
.ib-setup p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ib-setup code { display: block; max-width: 100%; overflow-x: auto; padding: 10px 14px; border-radius: 9px; background: var(--bg-sunken); font-family: var(--mono); font-size: 12.5px; text-align: left; white-space: nowrap; }
.ib-back { display: none; }
@media (max-width: 999px) {
  .ib-folders { flex-direction: row; overflow-x: auto; gap: 4px; }
  .ib-box { display: none; }
  .ib-folder { flex: none; }
  .ib-grid.reading .ib-folders, .ib-grid.reading .ib-list { display: none; }
  .ib-grid:not(.reading) .ib-pane { display: none; }
  .ib-back { display: inline-flex; }
}


/* ---------- Messages privés : émojis et GIF (09/10) : classes cp-* ---------- */
.cp-wrap { align-items: flex-end; } /* reste « sticky » (.chat-input) : sert aussi de repère au sélecteur */
.cp-btns { position: relative; display: flex; gap: 2px; flex: none; align-self: center; }
.cp-btns .icon-btn { width: 38px; height: 38px; color: var(--text-3); }
.cp-btns .icon-btn.on, .cp-btns .icon-btn:hover { color: var(--accent-text); background: var(--accent-soft); }
.cp-gifbtn { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.cp-pop { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; width: min(360px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.cp-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.cp-tabs button { width: 34px; height: 32px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.cp-tabs button.on { background: var(--accent-soft); color: var(--accent-text); }
.cp-label { padding: 8px 12px 2px; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.cp-grid { display: grid; grid-template-columns: repeat(8, 1fr); padding: 4px 8px 10px; height: 250px; overflow-y: auto; align-content: start; }
.cp-e { aspect-ratio: 1; border: 0; border-radius: 8px; background: none; font-size: 24px; line-height: 1; cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.cp-e:hover { background: var(--surface-hover); transform: scale(1.12); }
.cp-gif { width: min(400px, calc(100vw - 24px)); }
.cp-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.cp-search .input { height: 36px; flex: 1; }
.cp-gifs { columns: 2; column-gap: 6px; padding: 6px; height: 320px; overflow-y: auto; }
.cp-g { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--bg-sunken); cursor: pointer; break-inside: avoid; }
.cp-g img { display: block; width: 100%; height: auto; }
.cp-g:hover { outline: 2px solid var(--accent); }
.cp-msg { padding: 20px; text-align: center; font-size: 13px; column-span: all; }
.cp-giphy { padding: 6px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: right; border-top: 1px solid var(--border); }
.bubble-gif { max-width: min(260px, 70%); }
.bubble-gif img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bg-sunken); }
.bubble-gif .bubble-time { padding: 0 4px; }
.bubble-emoji { font-size: 40px; line-height: 1.15; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.bubble-emoji .bubble-time { font-family: var(--font); }

/* Avis d'étudiants (refait le 09/10) : bordure dégradée, halo, guillemets, transition entre avis */
.sx-quote { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 186px; padding: 22px 24px 18px; border-radius: 16px; overflow: hidden;
  border: 1px solid transparent; background: radial-gradient(420px 160px at 0% 0%, rgba(139,109,255,.20), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
  linear-gradient(135deg, rgba(139,109,255,.65), rgba(209,107,255,.25) 45%, rgba(255,255,255,.06)) border-box; box-shadow: 0 18px 44px -26px rgba(124,92,255,.6); }
.sx-quote.is-example { box-shadow: none; }
.sx-q-top { display: flex; align-items: center; gap: 12px; }
.sx-q-mark { width: 34px; height: 26px; flex: none; }
.sx-stars { display: flex; gap: 2px; color: #f5b10a; }
.sx-stars .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sx-example { margin-left: auto; height: 22px; padding: 0 9px; border-radius: 7px; background: var(--warning-soft); color: var(--warning); font-size: 11px; font-weight: 650; letter-spacing: .02em; display: inline-flex; align-items: center; cursor: help; }
.sx-q-text { margin: 0; flex: 1; font-size: 16.5px; line-height: 1.5; font-weight: 500; letter-spacing: -.005em; color: var(--text); animation: sx-fade .45s var(--ease); }
@keyframes sx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sx-q-text { animation: none; } }
.sx-q-foot { display: flex; align-items: center; gap: 12px; }
.sx-who-av { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #7c5cff, #c06bff); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px rgba(139,109,255,.45); }
.sx-who b { display: block; font-size: 14px; font-weight: 620; }
.sx-who small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.sx-q-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sx-dots { display: flex; gap: 5px; margin-right: 6px; }
.sx-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: var(--border-strong); cursor: pointer; transition: width .25s var(--ease), background .25s; }
.sx-dots button.on { width: 20px; background: linear-gradient(90deg, #8b6dff, #c06bff); }
.sx-nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-sunken); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.sx-nav:hover { color: var(--text); border-color: rgba(139,109,255,.6); }
@media (max-width: 640px) { .sx-q-nav .sx-dots { display: none; } .sx-quote { padding: 20px; } }
.chat-msgs > :last-child { scroll-margin-bottom: 84px; }
/* Avis compact : sa hauteur naturelle ne dépasse pas celle des questions fréquentes (pas de vide sous la FAQ). */
.sx-reviews .sx-quote { min-height: 0; gap: 10px; padding: 16px 22px 16px; }
.sx-reviews .sx-q-mark { width: 26px; height: 20px; }
.sx-reviews .sx-q-text { font-size: 15px; line-height: 1.5; }
.sx-reviews .sx-who-av { width: 34px; height: 34px; }
.sx-faq summary { padding-top: 14px; padding-bottom: 14px; }

/* ---------- Compte officiel Major Study (09/10) : badge certifié, conversation en lecture seule ---------- */
.verified { display: inline-block; flex: none; vertical-align: -2px; margin-left: 5px; }
.dm-name { display: flex; align-items: center; min-width: 0; }
.avatar.official { object-fit: cover; background: #15122a; }
.bubble.official { background: var(--accent-soft); border-color: transparent; color: var(--text); max-width: min(560px, 86%); }
.bubble-btn { display: flex; width: fit-content; margin-top: 12px; white-space: nowrap; }
.chat-readonly { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-sunken); color: var(--text-2); font-size: 13px; }
.chat-readonly .icon { flex: none; color: var(--text-3); }
.chat-readonly a { color: var(--accent-text); font-weight: 560; }

/* ---------- Admin → Messages auto (09/10) : classes wl-* ---------- */
.wl-page { max-width: 1200px; }
.wl-intro { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.wl-intro p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.wl-card { overflow: hidden; }
.wl-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wl-name { height: 36px; max-width: 280px; font-weight: 600; }
.wl-save { font-size: 12.5px; }
.wl-grid { display: grid; gap: 18px; padding: 16px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .wl-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
.wl-delay { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.wl-delay .input { width: 76px; height: 34px; }
.wl-phone { border: 1px solid var(--border); border-radius: 18px; background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.wl-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; border-bottom: 1px solid var(--border); }
.wl-head b { font-size: 14px; } .wl-head small { display: block; font-size: 11.5px; color: var(--text-3); }
.wl-msgs { min-height: 180px; max-height: 420px; overflow-y: auto; }
.wl-msgs .bubble { max-width: 100%; }
.wl-phone .chat-readonly { margin-top: 0; font-size: 12px; }
.wl-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.wl-card.is-new { animation: wl-new 1.8s var(--ease); scroll-margin-top: 80px; }
@keyframes wl-new { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Onboarding, dernière étape : « mieux sur ordinateur » */
.onb-pc { display: flex; flex-direction: column; gap: 18px; }
.onb-pc-art { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-2); }
.onb-pc-art > span { display: grid; place-items: center; border-radius: 14px; }
.onb-pc-phone { width: 44px; height: 44px; background: var(--surface, #fff); color: var(--text-2); opacity: .7; }
.onb-pc-desk { width: 64px; height: 64px; background: var(--brand-grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(108, 71, 255, .65); }
.onb-pc-desk svg { width: 30px; height: 30px; }
.onb-pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.onb-pc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.onb-pc-list li svg { flex: none; margin-top: 3px; color: var(--accent); }
.onb-pc-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--border); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.onb-pc-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.onb-pc-link b { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); }
.onb-pc-link:hover { border-color: var(--accent); }

/* ---------- Admin : choix de la période (raccourcis + calendrier), views/period-picker.js ---------- */
.pp { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; align-self: flex-start; }
.pp .an-range { flex-wrap: wrap; }
.pp-open { height: 36px; gap: 6px; white-space: nowrap; }
.pp-open.on { color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.pp-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg); overflow: hidden; }
.pp-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--border); background: var(--bg-sunken); min-width: 150px; }
.pp-side button { text-align: left; border: 0; background: transparent; color: var(--text-2); font-size: 13px; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.pp-side button:hover { background: var(--surface-hover); }
.pp-side button.on { background: var(--surface); color: var(--accent-text); font-weight: 560; box-shadow: var(--shadow-sm); }
.pp-main { position: relative; padding: 14px 16px 12px; }
.pp-nav { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.pp-nav .icon-btn { pointer-events: auto; }
.pp-nav .icon-btn:disabled { opacity: .3; cursor: default; }
.pp-months { display: flex; gap: 22px; }
.pp-month { width: 252px; }
.pp-mtitle { text-align: center; font-size: 13.5px; font-weight: 600; text-transform: capitalize; height: 30px; line-height: 30px; margin-bottom: 6px; }
.pp-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.pp-wd { text-align: center; font-size: 11px; color: var(--text-3); text-transform: uppercase; height: 24px; line-height: 24px; }
.pp-day { height: 34px; border: 0; background: transparent; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 0; }
.pp-day:hover:not(:disabled) { background: var(--surface-hover); border-radius: 8px; }
.pp-day:disabled { color: var(--text-3); opacity: .45; cursor: default; }
.pp-day.is-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pp-day.in { background: var(--accent-soft); color: var(--accent-text); }
.pp-day.lo, .pp-day.hi, .pp-day.lo:hover, .pp-day.hi:hover { background: var(--accent); color: #fff; font-weight: 600; }
.pp-day.lo { border-radius: 8px 0 0 8px; }
.pp-day.hi { border-radius: 0 8px 8px 0; }
.pp-day.lo.hi { border-radius: 8px; }
.pp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.pp-sum { flex: 1; font-size: 12.5px; color: var(--text-2); min-width: 0; }
@media (max-width: 719px) {
  .pp { justify-content: flex-start; width: 100%; }
  .pp-pop { position: fixed; left: 16px; right: 16px; top: 72px; flex-direction: column; max-height: calc(100vh - 96px); overflow-y: auto; }
  .pp-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); min-width: 0; }
  .pp-month { width: 100%; }
  .pp-grid { grid-template-columns: repeat(7, 1fr); }
  .pp-foot { flex-wrap: wrap; }
  .pp-sum { flex-basis: 100%; }
}

/* ---------- Mobile, lot 1 (09/10/2026) ---------- */
/* Séances plein écran (quiz, Panic Mode, duels, Endless…) : le bandeau mobile est masqué et les barres collantes
   ne gardent plus sa hauteur en décalage (la barre du haut flottait 60 px sous le bord de l'écran au défilement). */
.focus-mode { --notice-h: 0px; }
.main:has(.focus-mode) .m-notice { display: none; }
/* Au doigt : petits boutons et sélecteurs un peu plus hauts (32 → 38 px, 30 → 36 px). */
@media (pointer: coarse) and (max-width: 959px) {
  .btn-sm { height: 38px; }
  .seg button { height: 36px; }
  .topbar .chip.flame { height: 34px !important; }
}
/* Accueil sur téléphone : salutation plus petite, à gauche, et la montagne avec le drapeau du prochain examen
   à droite, comme sur ordinateur. Sommet de la montagne à 96 px du haut du bloc. */
@media (max-width: 899px) {
  .home3 { --mt-w: 350px; }
  :root .home3 .h3-art { opacity: .8; }
  .h3-hero { display: block; position: relative; min-height: 0; margin: 0 0 18px; padding: 22px 0 6px; }
  .h3-greet { position: relative; z-index: 1; max-width: 58%; }
  .h3-hello { font-size: 14px; line-height: 20px; }
  .h3-greet h1 { font-size: 30px; line-height: 36px; margin: 1px 0 4px; overflow-wrap: anywhere; }
  .h3-wave { font-size: 26px; margin-left: 4px; }
  .h3-sub { font-size: 14px; line-height: 20px; }
  .h3-mountain { position: static; display: block; height: auto; }
  .h3-artbox { left: 64%; transform: translateX(-46%); top: calc(96px - var(--mt-sy) * var(--mt-w) * 2 / 3); }
  .h3-artbox .h3-flag { left: calc(46% - 2px); top: calc(var(--mt-sy) * 100% - 24px); width: 14px; height: 24px; }
  .h3-artbox .h3-flag-label { left: calc(46% + 22px); top: calc(var(--mt-sy) * 100% - 62px); line-height: 1.25; max-width: calc(36vw - 12px); }
  .h3-flag-label small { font-size: 11px; }
  .h3-flag-label b { font-size: 13px; }
  .h3-flag-label span { font-size: 12px; }
}
/* Daily sur téléphone : les libellés des paliers (« 60 jours », « 100 jours ») en 10 px se touchaient. Le nombre est
   déjà dans la case et « Prochain · N jours » est écrit au-dessus : on garde seulement le libellé du prochain palier. */
@container (max-width: 560px) {
  .sc-lab { font-size: 11.5px; }
  .sc-miles li:not(.next) .sc-lab { visibility: hidden; }
}
/* Mes erreurs sur téléphone : nom court des matières (le nom complet passait sur 3 ou 4 lignes) et marge sous la
   carte « Rien à revoir » (le titre de la liste suivante la touchait). */
.mx-short { display: none; }
@media (max-width: 639px) {
  .mx-full { display: none; } .mx-short { display: inline; }
}
.mx-page > section.card + .mx-h2 { margin-top: 26px; }
/* Cours : « Notions » et « Sommaire » repliés par défaut sur téléphone et tablette (views/week.js, FoldNav). */
.cx-fold { display: none; }
@media (max-width: 1023px) {
  .cx-foldable > h2 { display: none; }
  .cx-foldable { padding: 0; }
  .cx-fold { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px 8px 16px; border: 1px solid var(--cx-card-border);
    border-radius: 14px; background: var(--cx-panel); color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cx-fold .grow { min-width: 0; display: flex; flex-direction: column; }
  .cx-fold b { font-size: 16px; font-weight: 600; color: var(--cx-concepts); }
  .cx-fold small { font-size: 13px; color: var(--cx-crumb); }
  .cx-fold-n { flex: none; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font-size: 12.5px; background: var(--cx-item-on); color: var(--cx-text); }
  .cx-fold > .icon { flex: none; transition: transform .2s var(--ease); }
  .cx-foldable.open .cx-fold { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .cx-foldable.open .cx-fold > .icon { transform: rotate(180deg); }
  .cx-foldable:not(.open) .cx-clist { display: none; }
  .cx-foldable.open .cx-clist, .cx-toc.cx-foldable.open .cx-clist { flex-direction: column; overflow: visible; gap: 0; padding: 6px; border: 1px solid var(--cx-card-border); border-top: 0;
    border-radius: 0 0 14px 14px; background: var(--cx-panel); }
  .cx-foldable.open .cx-citem { width: 100%; max-width: none; border: 0; padding: 11px 12px; min-height: 44px; white-space: normal; text-align: left; }
}
/* Évolution sur téléphone : cartes des matières repliées par défaut (nom, temps, maîtrise), dépliées au toucher. */
@media (max-width: 959px) {
  .evo-subj-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .evo-subj-head .evo-subject-name { pointer-events: none; }
  .evo-chev { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: var(--text-3); transition: transform .2s var(--ease); }
  .evo-subject.open .evo-chev { transform: rotate(180deg); }
  .evo-subject:not(.open) > :not(.evo-subj-head) { display: none; }
}
/* Leçon et résumé sur téléphone et tablette : pages numérotées (views/week.js, DocPage). Le texte de chaque page est
   dans un bloc .cx-pgx : il garde l'espacement de .prose entre ses éléments. */
.prose > .cx-pgx > * + * { margin-top: 0.85em; }
.cx-pager, .cx-pg-head { display: none; }
@media (max-width: 1023px) {
  .cx-doc.paged .cx-pgx { display: none; }
  .cx-doc.paged { scroll-margin-top: calc(72px + var(--notice-h, 0px)); }
  .cx-pg-head { display: flex; align-items: baseline; gap: 10px; margin: -4px 0 14px; font-size: 13px; color: var(--cx-crumb); }
  .cx-pg-head .num { flex: none; font-weight: 600; color: var(--cx-concepts); }
  .cx-pg-head .truncate { min-width: 0; }
  .cx-pg-head .truncate::before { content: '· '; }
  .cx-doc.paged .prose > .cx-pgx > :first-child { margin-top: 0; }
  .cx-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--cx-card-border); }
  .cx-pg-num, .cx-pg-arrow { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: 1px solid transparent; border-radius: 11px;
    background: none; color: var(--cx-text); font: inherit; font-size: 15px; font-weight: 560; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cx-pg-num.on { background: var(--accent); color: var(--on-accent, #fff); }
  .cx-pg-arrow { border-color: var(--cx-card-border); }
  .cx-pg-arrow:disabled { opacity: .35; cursor: default; }
  .cx-pg-arrow .icon { width: 18px; height: 18px; }
  .cx-pg-gap { min-width: 16px; text-align: center; color: var(--cx-crumb); }
}
@media (max-width: 359px) { .cx-pg-num, .cx-pg-arrow { min-width: 34px; height: 36px; } .cx-pager { gap: 3px; } }

/* ---------- Mobile, lot 2 (09/10/2026) ---------- */
/* Accueil sur téléphone : la montagne passe d'un bord à l'autre de l'écran (elle s'arrêtait net à la marge de la page),
   sommet toujours sous le drapeau, fondu vers le haut et vers le bas pour se mêler à la page. */
@media (max-width: 899px) {
  .main:has(.home3) { overflow-x: clip; }
  .home3 { overflow-x: visible; --mt-w: 150vw; }
  .h3-artbox .h3-art { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 33%, transparent 52%);
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 33%, transparent 52%); }
}
/* Smart review, Speedrun, Revoir mes erreurs sur téléphone : le bouton de lancement n'est plus collé au bas de l'écran
   (son fond en dégradé laissait passer le contenu sous le bouton et sous la note « Built for you right now… »), et son
   libellé passe à la ligne au lieu de déborder. */
@media (max-width: 640px) {
  .mr-cta { position: static; padding: 4px 0 calc(8px + env(safe-area-inset-bottom)); background: none; }
  .mr-go { height: auto; min-height: 54px; padding: 12px 18px; white-space: normal; line-height: 1.3; text-align: center; }
  .mr-go .icon { flex: none; }
  .mr-cta p { max-width: 34ch; line-height: 1.45; }
}
/* Guided path et Panic Mode, écran de départ sur téléphone : l'icône de la matière passe au-dessus du titre (à côté,
   elle décalait le titre vers la droite quand il passait sur deux lignes). */
@media (max-width: 720px) {
  .pz-intro-head { flex-direction: column; gap: 10px; }
  .pz-intro-head h1 { text-align: center; text-wrap: balance; }
}
/* Guided path et Panic Mode sur téléphone : la barre des étapes (avec le minuteur) est fixée en haut de l'écran au lieu
   d'être « collante » dans le calque qui défile (sur iPhone, le défilement passait à la page dessous et la barre se
   décollait du haut). La page dessous ne défile plus pendant la séance. */
@media (max-width: 959px) {
  html:has(.focus-mode.pz), body:has(.focus-mode.pz) { overflow: hidden; }
  .focus-mode.pz { --pz-h: calc(56px + env(safe-area-inset-top)); overscroll-behavior: contain; }
  .focus-mode.pz:has(> .pz-top) { padding-top: calc(var(--pz-h) + 3px); }
  .focus-mode.pz > .pz-top { position: fixed; top: 0; left: 0; right: 0; height: var(--pz-h); box-sizing: border-box; padding-top: env(safe-area-inset-top); padding-bottom: 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .focus-mode.pz > .pz-progress { position: fixed; top: var(--pz-h); left: 0; right: 0; }
}
/* Accueil : deux blocs Revision (à gauche) et Courses (à droite) à la place des six matières, calés sur la maquette du
   user (10/10/2026), sans le sur-titre en capitales (retiré à sa demande) : icône au trait à gauche, titre, description, lien violet avec flèche,
   illustration à droite (img/home/door-*.svg) sur un fond sombre légèrement violet. */
.h3-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.h3-door { --door-bg: #15112a; --door-bg2: #1c1638; --door-line: rgba(150, 125, 255, .2); --door-ink: #fff; --door-d: #c9c2e3; --door-acc: #b9a2ff;
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-start; gap: 26px; min-height: 168px; padding: 32px 36px 30px;
  border-radius: 14px; border: 1px solid var(--door-line); color: var(--door-ink);
  background: radial-gradient(90% 140% at 78% 0%, rgba(124, 92, 255, .16), transparent 60%), linear-gradient(110deg, var(--door-bg) 0%, var(--door-bg2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .6); transition: border-color .15s; }
:root[data-theme="light"] .h3-door { --door-bg: #f6f3ff; --door-bg2: #ece6ff; --door-line: rgba(108, 71, 255, .2); --door-ink: #19162e; --door-d: #4d4670; --door-acc: #6c47ff; }
.h3-door:hover { border-color: rgba(150, 125, 255, .42); }
/* Ordinateur et tablette : icône, titre et lien centrés verticalement dans le bloc (sans description depuis le 11/10). */
@media (min-width: 640px) { .h3-door { align-items: center; padding-top: 30px; padding-bottom: 30px; } .h3-door-ico { margin-top: 0; } }
.h3-door-ico { flex: none; display: grid; place-items: center; color: var(--door-acc); margin-top: 1px; }
.h3-door-ico .icon { width: 38px; height: 38px; stroke-width: 1.6; }
.h3-door-txt { position: relative; z-index: 1; min-width: 0; max-width: 60%; display: flex; flex-direction: column; align-items: flex-start; }
.h3-door b { margin-top: 0; font-size: 31px; line-height: 36px; font-weight: 680; letter-spacing: -.02em; }
.h3-door-go { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 16px; line-height: 22px; font-weight: 560; color: var(--door-acc); }
.h3-door-go .icon { width: 18px; height: 18px; transition: transform .15s var(--ease); }
.h3-door:hover .h3-door-go .icon { transform: translateX(3px); }
.h3-door-art { position: absolute; z-index: 0; right: 0; bottom: 0; height: 100%; width: auto; max-width: 40%; object-fit: contain; object-position: right bottom; pointer-events: none; user-select: none; }
/* Entre 640 et 1100 px de large, les blocs sont étroits : textes plus petits et illustration en retrait. */
@media (max-width: 1099px) {
  .h3-door { gap: 18px; min-height: 160px; padding: 26px 26px 24px; }
  .h3-door-ico .icon { width: 32px; height: 32px; }
  .h3-door b { font-size: 25px; line-height: 30px; }
  .h3-door-go { margin-top: 16px; font-size: 15px; }
  .h3-door-txt { max-width: 56%; }
  .h3-door-art { max-width: 38%; opacity: .9; }
}
@media (max-width: 639px) {
  .h3-doors { gap: 12px; }
  .h3-door { flex-direction: column; gap: 12px; min-height: 0; padding: 18px 16px 16px; }
  .h3-door-ico .icon { width: 28px; height: 28px; }
  .h3-door-txt { max-width: none; }
  .h3-door b { margin-top: 0; font-size: 21px; line-height: 26px; }
  .h3-door-go { gap: 8px; margin-top: 12px; font-size: 14px; }
  .h3-door-art { display: none; }
}

/* ---------- Page matière sur téléphone et tablette (09/10/2026, maquette du user) ----------
   « Course content » + nombre de Weeks, une ligne par Week (pastille numérotée, titre, « Week N », Reprendre), Week à venir
   avec cadenas, fine séparation, cartes Mock exam / Réviser toute la matière avec sous-titre, ligne Mes surlignages.
   Ordinateur inchangé : les éléments .cx-m n'y apparaissent pas et .cx-wt s'efface (display: contents). */
.cx-wt { display: contents; }
@media (min-width: 1024px) { .cx-m { display: none !important; } }
@media (max-width: 1023px) {
  .cx-page .cx-hero { min-height: 184px; border-radius: 14px; }
  .cx-page .cx-hero-text { justify-content: center; padding: 22px 20px; max-width: 64%; }
  .cx-page .cx-hero-art { width: 78%; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
  .cx-page .cx-hero h1 { font-size: 22px; line-height: 25px; }
  .cx-page .cx-hero-sub { font-size: 13.5px; line-height: 19px; margin-top: 8px; color: #c9d2ff; }
  .cx-grid { margin-top: 22px; gap: 0; }
  .cx-weeks { gap: 10px; }
  .cx-content-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; }
  .cx-content-h h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 650; letter-spacing: -.01em; color: var(--cx-text); }
  .cx-content-h span { font-size: 13px; color: var(--cx-crumb); }
  .cx-week { border-radius: 10px; }
  .cx-week-link .cx-week-head, .cx-week-soon .cx-week-head { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 9px 14px 9px 15px; flex-wrap: nowrap; }
  .cx-wn { flex: none; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 600;
    background: color-mix(in srgb, var(--cx-text) 12%, transparent); color: var(--cx-text); }
  .cx-wt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .cx-week-link .cx-wt h2, .cx-week-soon .cx-wt h2 { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -.005em; white-space: normal; overflow: visible;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cx-wt .cx-week-n { font-size: 12.5px; line-height: 16px; color: var(--cx-crumb); }
  .cx-week-link .cx-week-chev { flex: none; width: 18px; height: 18px; margin-left: 0; color: var(--cx-crumb); }
  .cx-week-link .cx-row-resume { flex: none; margin-left: 0; padding: 4px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 560;
    background: color-mix(in srgb, #8b5cf6 22%, transparent); color: var(--cx-link); }
  .cx-week-link .cx-row-resume + .cx-week-chev { margin-left: 0; }
  .cx-week-link.is-resume { background: color-mix(in srgb, #7c4dff 16%, var(--cx-card)); border-color: color-mix(in srgb, #8b5cf6 45%, transparent); }
  .cx-week-link.is-resume .cx-wn { background: #8b5cf6; color: #fff; }
  .cx-week-soon { opacity: 1; border-style: solid; background: transparent; }
  .cx-week-soon .cx-wn { background: none; border: 1.5px dashed color-mix(in srgb, var(--cx-text) 40%, transparent); color: var(--cx-crumb); }
  .cx-week-soon .cx-wt h2 { color: var(--cx-crumb) !important; }
  .cx-week-soon .cx-wt .cx-week-n { color: color-mix(in srgb, var(--cx-crumb) 75%, transparent); }
  .cx-week-soon .cx-soon-pill { display: none; }
  .cx-soon-lock { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--cx-crumb); }
  .cx-side-sep { border: 0; height: 1px; margin: 18px 4px 6px; background: color-mix(in srgb, var(--cx-text) 9%, transparent); }
  .cx-side { gap: 12px; margin-top: 0; }
  .cx-tool, .cx-tool.exam { height: 96px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 0 64px 0 20px; border-radius: 12px; }
  .cx-tool-title { font-size: 17px; line-height: 22px; }
  .cx-tool-sub { position: relative; z-index: 1; max-width: 180px; font-size: 12.5px; line-height: 16px; color: #c9cff3; text-shadow: 0 1px 10px rgba(10, 8, 30, .8); }
  .cx-round { top: 50%; bottom: auto; right: 14px; transform: translateY(-50%); width: 36px; height: 36px; }
  .cx-round .icon { width: 18px; height: 18px; }
  .cx-tool .cx-tool-art, .cx-page .cx-tool:not(.exam) .cx-tool-art, .cx-tool.exam .cx-tool-art { width: 62%; background-size: cover; }
  .cx-side .cx-quick:not(.cx-hl-link) { display: none; }
  .cx-hl-link { display: flex; align-items: center; gap: 14px; align-self: stretch; margin: 0; min-height: 64px; padding: 0 16px 0 18px; border-radius: 12px;
    border: 1px solid var(--cx-card-border); background: var(--cx-card); color: var(--cx-text); font-size: 15px; font-weight: 600; }
  .cx-hl-link > span { flex: 1; display: flex; align-items: center; gap: 10px; }
  .cx-hl-link .icon:first-child { width: 26px; height: 26px; color: #a78bfa; }
  .cx-hl-link .icon:last-child { margin-left: 0; width: 18px; height: 18px; color: var(--cx-crumb); }
  .cx-hl-link .cx-hl-n { margin: 0; min-width: 24px; height: 22px; line-height: 22px; border-radius: 11px; font-size: 12.5px; color: #f5d97a; vertical-align: 0; }
  .cx-quick.cx-hl-link:hover span { text-decoration: none; }
}
@media (max-width: 1023px) { .cx-d { display: none !important; } .cx-hl-link .icon.cx-m { width: 18px; height: 18px; color: var(--cx-crumb); } }
.cx-quick .icon.cx-d { margin-left: -9px; }
@media (min-width: 640px) { .cx-quick .icon.cx-d { margin-left: -6px; } }
@media (max-width: 1023px) {
  /* Le rond dessiné dans les illustrations (bas droite) sort du cadre : seul le vrai bouton reste. */
  .cx-tool .cx-tool-art, .cx-page .cx-tool:not(.exam) .cx-tool-art, .cx-tool.exam .cx-tool-art { background-position: right top; }
  .cx-page .cx-hero-text { max-width: 76%; }
  .cx-page .cx-hero h1 { font-size: 24px; line-height: 27px; }
  .cx-page .cx-hero-sub { font-size: 14px; }
}

/* ---------- Notions d'une Week sur téléphone et tablette (09/10/2026, maquette du user) ----------
   Rangée de cartes numérotées + barre de défilement, puis la notion : « Concept 4 of 8 », titre, idées clés en blocs
   numérotés, remarque avec un trait violet, exemple encadré, bouton pleine largeur et « Poser une question ».
   Ordinateur inchangé (.cx-m masqués dès 1024 px). */
@media (max-width: 1023px) {
  .cx-chapter:has(.cx-cstrip) > .cx-foldable { display: none; }
  .cx-chapter:has(.cx-cstrip) { gap: 18px; }
  .cx-cstrip { min-width: 0; }
  .cx-cstrip .cx-content-h { margin-bottom: 10px; }
  .cx-cs-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; scroll-padding: 0 16px; }
  .cx-cs-row::-webkit-scrollbar { display: none; }
  .cx-cs { flex: none; width: 84px; min-height: 74px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 9px 10px 10px; border-radius: 9px;
    border: 1px solid var(--cx-card-border); background: var(--cx-card); color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cx-cs-n { font-size: 13px; line-height: 16px; color: var(--cx-crumb); }
  .cx-cs-t { font-size: 12px; line-height: 15px; color: var(--cx-desc); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cx-cs.on { border: 1.5px solid #9b6bff; background: color-mix(in srgb, #7c4dff 22%, var(--cx-card)); box-shadow: 0 0 0 3px color-mix(in srgb, #8b5cf6 18%, transparent); }
  .cx-cs.on .cx-cs-n, .cx-cs.on .cx-cs-t { color: var(--cx-text); }
  .cx-cs-track { position: relative; width: 66px; height: 4px; margin: 12px auto 0; border-radius: 2px; background: color-mix(in srgb, var(--cx-text) 12%, transparent); overflow: hidden; }
  .cx-cs-track i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: #8b5cf6; }

  .cx-chapter .cx-panel { padding: 20px 18px 18px; border-radius: 12px; }
  .cx-eyebrow { font-size: 11.5px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #a78bfa; }
  .cx-chapter .cx-panel > h2 { margin-top: 6px; font-size: 22px; line-height: 27px; }
  .cx-title-sep { border: 0; height: 1px; margin: 16px 0 0; background: var(--cx-divider); }
  .cx-chapter .cx-lesson .cx-h3 { margin-top: 20px; font-size: 17px; line-height: 22px; }
  .cx-chapter .cx-lesson .cx-rules { gap: 8px; margin-top: 12px; }
  .cx-chapter .cx-lesson .cx-rules:not(.ex) .cx-rule { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start;
    padding: 11px 14px 12px 12px; border-radius: 10px; border: 1px solid var(--cx-card-border); background: color-mix(in srgb, var(--cx-text) 3%, transparent); }
  .cx-pn { grid-row: span 2; align-self: center; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; font-weight: 650;
    color: #b79cff; background: color-mix(in srgb, #7c4dff 22%, transparent); }
  .cx-chapter .cx-lesson .cx-rules:not(.ex) .cx-term, .cx-chapter .cx-lesson .cx-rules:not(.ex) .cx-rule.math .cx-term { padding: 0; font-size: 15px; line-height: 20px; font-weight: 650; }
  .cx-chapter .cx-lesson .cx-rules:not(.ex) .cx-desc { font-size: 14px; line-height: 20px; }
  .cx-chapter .cx-lesson .cx-note { margin-top: 12px; padding: 11px 14px 12px 16px; border-radius: 0 10px 10px 0; border-left: 3px solid #8b5cf6;
    background: color-mix(in srgb, var(--cx-text) 5%, transparent); font-size: 14px; line-height: 21px; }
  .cx-chapter .cx-lesson .cx-divider { display: none; }
  .cx-chapter .cx-lesson .cx-rules.ex { margin-top: 10px; padding: 12px 14px 13px; border-radius: 10px; border: 1px solid var(--cx-card-border); background: color-mix(in srgb, var(--cx-text) 3%, transparent); }
  .cx-chapter .cx-lesson .cx-rules.ex .cx-rule { padding: 0; gap: 4px; }
  .cx-chapter .cx-lesson .cx-rules.ex .cx-term, .cx-chapter .cx-lesson .cx-rules.ex .cx-rule.math .cx-term { padding: 0; font-size: 15px; line-height: 21px; font-weight: 650; }
  .cx-chapter .cx-lesson .cx-rules.ex .cx-desc { font-size: 14px; line-height: 21px; }
  .cx-chapter .cx-panel-foot { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 22px; }
  .cx-chapter .cx-panel-foot .cx-btn { width: 100%; height: 46px; border-radius: 10px; font-size: 16px; }
  .cx-chapter .cx-panel-foot .cx-ask { align-self: flex-start; margin-top: 6px; font-size: 15px; }
}
@media (max-width: 1023px) {
  .cx-cs { width: auto; min-width: 72px; max-width: 98px; }
  .cx-cs-t { overflow-wrap: anywhere; }
  .cx-chapter .cx-panel-foot .cx-ask { color: #a78bfa; }
}
/* Accueil sur téléphone et tablette : blocs Revision / Courses juste sous la Daily, au-dessus de Next exam. */
@media (max-width: 999px) {
  .page.home3 { display: flex; flex-direction: column; }
  .home3 > .h3-grid { display: contents; }
  .home3 .h3-daily, .home3 .h3-side, .home3 .h3-doors { position: relative; z-index: 1; }
  .home3 .h3-daily { order: 1; }
  .home3 .h3-doors { order: 2; margin-top: 16px; }
  .home3 .h3-side { order: 3; margin-top: 16px; }
}
/* Accueil sur téléphone et tablette : pas de pastille « Daily » au-dessus du titre de la carte Daily. */
@media (max-width: 999px) { .home3 .h3-daily .h3-pill { display: none; } .home3 .h3-daily h2 { margin-top: 0; } }
/* Page matière sur téléphone : bandeau moins haut, titre sur toute la largeur et plus petit (deux lignes au lieu de
   quatre pour « International Relations and European & World History »), sans les retours à la ligne forcés. */
@media (max-width: 639px) {
  .cx-page .cx-hero { min-height: 128px; }
  .cx-page .cx-hero-text { max-width: none; min-height: 128px; padding: 18px 18px 17px; }
  .cx-page .cx-hero h1 { white-space: normal; font-size: 19px; line-height: 23px; text-wrap: balance; text-shadow: 0 1px 14px rgba(10, 8, 30, .85); }
  .cx-page .cx-hero-sub { margin-top: 6px; font-size: 13px; line-height: 17px; text-shadow: 0 1px 10px rgba(10, 8, 30, .85); }
}
/* En-tête mobile : bouton du menu un peu plus grand (l'icône de 18 px paraissait petite à côté de la flamme). */
@media (max-width: 959px) {
  .topbar .m-menu { width: 42px; height: 42px; margin-right: -6px; color: var(--text); }
  .topbar .m-menu .icon { width: 25px; height: 25px; stroke-width: 2; }
  .topbar .m-menu .dot { top: 7px; right: 6px; }
}

/* ---------- Abonnement sur téléphone (09/10/2026, maquette du user) ----------
   Titre à gauche et illustration à droite, trois avantages en colonnes, offres sans les sous-lignes, Premium encadré,
   icônes de Premium en carrés, confiance en grille 2 × 2 (sans « Cancel anytime »). Ordinateur inchangé. */
@media (max-width: 640px) {
  .sx-hero { position: relative; display: block; padding: 4px 0 0; }
  .sx-eyebrow { font-size: 10.5px; letter-spacing: .18em; }
  .sx-hero h1 { max-width: 58%; margin: 8px 0 8px; font-size: 25px; line-height: 28px; letter-spacing: -.02em; }
  .sx-lead { max-width: 58%; font-size: 13px; line-height: 18px; }
  .sx-art { display: block; position: absolute; top: 4px; right: -12px; width: 400px; height: 240px; zoom: .5; pointer-events: none; }
  .sx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; flex-direction: initial; }
  .sx-point { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .sx-pi { width: 38px; height: 38px; }
  .sx-pi .icon { width: 19px; height: 19px; }
  .sx-point b { font-size: 12px; line-height: 15px; }
  .sx-point small { font-size: 11px; line-height: 14px; margin-top: 3px; }
  .sx-toggle-row { margin: 20px 0 12px; }
  .sx-cards { gap: 14px; margin-top: 12px; }
  .sx-card, .sx-card.discs { padding: 18px 18px 16px; border-radius: 12px; }
  .sx-card.discs .sx-card-head, .sx-card.discs .sx-price, .sx-card.discs .sx-desc { padding-left: 0; }
  .sx-card.discs { border: 1.5px solid rgba(139, 109, 255, .6); background: linear-gradient(180deg, rgba(124,92,255,.10), rgba(124,92,255,.03) 60%), var(--surface); }
  .sx-card h3 { font-size: 15px; }
  .sx-price b { font-size: 23px; }
  .sx-price span { font-size: 12.5px; }
  .sx-desc { font-size: 12.5px; line-height: 17px; margin: 4px 0 12px; max-width: none; }
  .sx-list { gap: 9px; margin-bottom: 16px; }
  .sx-li { gap: 12px; align-items: center; }
  .sx-li b { font-size: 13px; font-weight: 550; }
  .sx-li small { display: none; }
  .sx-ic.disc { width: 28px; height: 28px; border-radius: 8px; margin: 0; background: transparent; box-shadow: inset 0 0 0 1px rgba(167, 139, 255, .45); }
  .sx-ic.disc .icon { width: 16px; height: 16px; }
  .sx-btn { height: 40px; font-size: 14px; }
  .sx-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 14px 12px; margin-top: 18px; }
  .sx-trust > .sx-t:nth-child(4) { display: none; }
  .sx-t { gap: 10px; align-items: flex-start; }
  .sx-t b { font-size: 12px; line-height: 15px; }
  .sx-t small { font-size: 10.5px; line-height: 13px; }
  .sx-avs img { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
  .sx-art { top: 56px; right: -56px; }
  .sx-hero h1, .sx-lead { max-width: 55%; }
  .sx-q-text { font-size: 14px; line-height: 21px; }
}
@media (max-width: 640px) {
  .sx-art { zoom: .46; top: 64px; right: -20px; }
  .sx-hero h1 { max-width: 54%; font-size: clamp(21px, 6.4vw, 25px); line-height: 1.13; }
}

/* ---------- Barre de navigation du bas, téléphone et tablette (09/10/2026, maquette du user) ----------
   Fixe en bas, au-dessus de la zone sûre de l'iPhone ; entrée active en violet avec un trait dessous. Masquée sur
   ordinateur, clavier ouvert (.kb), pendant une séance plein écran et sur les pages qui ont leur propre barre en bas. */
:root { --bnav-h: calc(62px + env(safe-area-inset-bottom)); }
.bnav { display: none; }
@media (max-width: 959px) {
  .bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--bnav-h); padding: 0 6px env(safe-area-inset-bottom); box-sizing: border-box;
    background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px);
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent); transform: translateZ(0); }
  .bnav a { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    color: var(--text-3); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: -.005em; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .bnav a .icon { width: 23px; height: 23px; stroke-width: 1.8; transition: transform .15s var(--ease); }
  .bnav a:active .icon { transform: scale(.92); }
  .bnav a.on { color: #a78bfa; font-weight: 600; }
  .bnav a.on .icon { stroke-width: 2.1; }
  .bnav a.on::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 2px; background: #8b5cf6; }
  :root[data-theme="light"] .bnav a.on { color: var(--accent-text); }
  .bnav.kb, body:has(.focus-mode) .bnav, body:has(.chat-input) .bnav, body:has(.sup-reply) .bnav { display: none; }
  /* Place pour la barre sous le contenu de la page, et barres collantes du bas posées au-dessus d'elle. */
  body:not(:has(.focus-mode, .chat-input, .sup-reply)) .main { padding-bottom: calc(40px + var(--bnav-h)); }
  .mr-cta { bottom: var(--bnav-h); }
}
@media (max-width: 359px) { .bnav a { font-size: 10.5px; } .bnav a .icon { width: 21px; height: 21px; } }

/* ---------- Années B1 / B2 / B3 (10/10/2026) : admin → Années, pastilles, choix à l'onboarding ---------- */
.adm-yearseg button { min-width: 44px; }
.adm-ychip { font-weight: 600; letter-spacing: .02em; height: 22px; font-size: 11.5px; }
.adm-ychip.y1 { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
.adm-ychip.y2 { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.adm-ychip.y3 { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.plat-lead { font-size: 13.5px; margin: -6px 0 16px; max-width: 760px; }
.plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
@media (max-width: 960px) { .plat-grid { grid-template-columns: 1fr; } }
.plat-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.plat-card.on { box-shadow: inset 0 0 0 2px var(--accent); }
.plat-name { margin: 0; font-size: 26px; font-weight: 650; display: flex; align-items: baseline; gap: 10px; }
.plat-name small { font-size: 13px; font-weight: 500; color: var(--text-3); }
.plat-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.plat-stats div { display: flex; flex-direction: column; gap: 2px; }
.plat-stats b { font-size: 20px; font-weight: 620; }
.plat-stats span { font-size: 11.5px; color: var(--text-3); line-height: 1.25; }
.plat-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); cursor: default; }
.switch-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.plat-color { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.plat-color.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }

/* ---------- Mistakes, accueil (10/10) : total + recommandation, puis « Your subjects » en liste ---------- */
.mx-home { max-width: 1180px; }
.mx-hero-head { margin: 4px 0 22px; }
.mx-hero-head h1 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin: 0; }
.mx-hero-head p { margin: 6px 0 0; font-size: clamp(16px, 1.6vw, 20px); color: var(--text-2); }
.mx-hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.mx-total { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 26px 30px; min-height: 142px; }
.mx-total::before, .mx-total::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.mx-total::before { width: 230px; height: 230px; right: -70px; top: -50px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); }
.mx-total::after { width: 150px; height: 150px; right: -20px; bottom: -70px; border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); }
.mx-total > b { position: relative; font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.mx-total-l { position: relative; font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-top: 8px; }
.mx-total small { position: relative; font-size: 14.5px; color: var(--text-3); margin-top: 8px; }
.mx-next { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); }
.mx-next > * { position: relative; }
.mx-next-waves { position: absolute !important; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.mx-next-waves path { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mx-next-ico { flex: none; width: 56px; height: 56px; display: grid; place-items: center; color: var(--accent-text); }
.mx-next-ico .icon { width: 44px; height: 44px; stroke-width: 1.6; }
.mx-next-ico.ok { color: var(--success); }
.mx-next .mx-eyebrow { font-size: 11.5px; letter-spacing: .1em; color: var(--text-2); }
.mx-next h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 650; letter-spacing: -.02em; margin: 6px 0 4px; }
.mx-next p { margin: 0; font-size: 15.5px; color: var(--text-2); }
.mx-next .btn { flex: none; }
.mx-next .btn .icon { width: 17px; height: 17px; }

.mx-subjects { padding: 22px 22px 18px; }
.mx-subjects-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mx-subjects-head h2 { font-size: clamp(21px, 2vw, 26px); font-weight: 650; letter-spacing: -.02em; margin: 0; }
.mx-sort { width: auto; height: 42px; font-size: 14px; padding-left: 14px; }
.mx-seg { display: flex; gap: 10px; margin-bottom: 14px; }
.mx-seg button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 22px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.mx-seg button span { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--bg-sunken); color: var(--text-2); }
.mx-seg button.on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); font-weight: 560; }
.mx-seg button.on span { background: var(--accent); color: #fff; }
.mx-rows { display: flex; flex-direction: column; }
.mx-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.mx-row:hover { background: var(--bg-sunken); }
.mx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mx-row.top { border-radius: 14px; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.mx-row.is-locked, .mx-row.is-quiet { opacity: .75; }
.mx-row > .subject-tile { justify-self: center; }
.mx-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mx-row-main b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.mx-row-main small { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-2); }
.mx-row-main small .icon { width: 15px; height: 15px; }
.mx-row-side { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 130px; }
.mx-row-side small { font-size: 14px; color: var(--text-2); }
.mx-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; font-weight: 520; white-space: nowrap; }
.mx-row.top .mx-pill { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.mx-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.mx-pill .icon { width: 14px; height: 14px; }
.mx-row-go { width: 20px; height: 20px; color: var(--text-2); justify-self: end; }
.mx-row-foot { grid-template-columns: 28px minmax(0, 1fr) 28px; margin-top: 12px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-sunken); font-size: 15px; color: var(--text-2); }
.mx-row-foot:hover { border-color: var(--border-strong); }
.mx-foot-ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; }
.mx-foot-ok .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.mx-note { margin: 12px 2px 0; font-size: 13px; color: var(--text-3); }

@media (max-width: 900px) {
  .mx-hero { grid-template-columns: 1fr; }
  .mx-next { flex-wrap: wrap; gap: 14px 18px; }
  .mx-next .btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .mx-total, .mx-next { padding: 20px; }
  .mx-next-ico { width: 44px; height: 44px; } .mx-next-ico .icon { width: 34px; height: 34px; }
  .mx-subjects { padding: 18px 12px 14px; }
  .mx-subjects-head { flex-wrap: wrap; } .mx-subjects-head h2 { padding-left: 6px; }
  .mx-seg button { padding-left: 16px; font-size: 14px; }
  .mx-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px 10px; }
  .mx-row > .subject-tile { width: 36px !important; height: 36px !important; }
  .mx-row-go { display: none; }
  .mx-row-main b { font-size: 15px; } .mx-row-main small { font-size: 12.5px; }
  .mx-row-side { min-width: 0; align-items: flex-end; gap: 5px; }
  .mx-pill { height: 30px; padding: 0 12px; font-size: 13px; } .mx-row-side small { font-size: 12.5px; }
  .mx-row-foot { grid-template-columns: 28px minmax(0, 1fr); font-size: 14px; }
}

/* Bandeau de matière dessiné en pleine largeur (B2 : Business Law, Financial Accounting, Marketing) : l'image porte
   déjà son dégradé et son cadre, elle couvre tout le bandeau, calée à droite. */
.cx-hero.full .cx-hero-art { width: 100%; -webkit-mask-image: none; mask-image: none; }
/* Bloc « Réviser toute la matière » dessiné en pleine largeur (B2) : le fond porte déjà son dégradé ; il couvre tout le
   bloc, calé à droite, sans masque ; le titre et le bouton rond de l'app restent par-dessus. */
.cx-tool.exam.rv.full .cx-tool-art { width: 100%; max-width: none; background-size: cover; background-position: right center; -webkit-mask-image: none; mask-image: none; }
/* Titre sur deux lignes, à gauche de l'illustration, comme sur le design. */
@media (min-width: 640px) { .cx-tool.exam.rv.full .cx-tool-title { max-width: 48%; } }


/* ---------- Onboarding : étape « Ton année » (B1 / B2) et badge « Facultatif » (11/10) ---------- */
.onb-years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.onb-years.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .onb-years, .onb-years.three { grid-template-columns: minmax(0, 1fr); } }
.onb-yr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 18px; border-radius: var(--radius-lg, 16px); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.onb-yr:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.onb-yr:active { transform: scale(.985); }
.onb-yr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-yr.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 10px 28px -14px color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.onb-yr-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 14px; }
.onb-yr-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; background: var(--bg-sunken); color: var(--text-2); transition: background .15s, color .15s; }
.onb-yr.on .onb-yr-badge { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(108, 71, 255, .6); }
.onb-yr-radio { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong, var(--border)); color: transparent; transition: background .15s, border-color .15s, color .15s; }
.onb-yr-radio svg { width: 13px; height: 13px; stroke-width: 3; }
.onb-yr.on .onb-yr-radio { background: var(--accent); border-color: var(--accent); color: #fff; }
.onb-yr-name { font-size: 17px; font-weight: 620; letter-spacing: -.015em; }
.onb-yr-count { font-size: 13px; color: var(--text-3); }
.onb-yr-subs { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.onb-yr-subs:empty { display: none; }
.onb-yr-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-yr-sub i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.onb-opt { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 550; letter-spacing: 0; line-height: 1.4; color: var(--text-2); background: var(--bg-sunken); border: 1px solid var(--border); position: relative; top: -2px; }
@media (max-width: 520px) {
  .onb-yr { padding: 16px; }
  .onb-yr-head { margin-bottom: 10px; }
  .onb-yr-badge { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
  .onb-yr-subs { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; }
}

/* =====================================================================
   Mode clair (12/10/2026) — réservé aux admins pour l'instant (bouton
   soleil/lune de la barre du haut). Toutes les surcharges du thème clair
   pour les blocs dessinés « toujours sombres » sont regroupées ici : le
   rendu sombre n'est jamais modifié.
   Illustrations sombres (nuit, néons) : inversées puis tournées de 180°
   (fond clair, mêmes teintes violettes), sur des cartes claires.
   ===================================================================== */
.tb-theme .icon { transition: transform .35s var(--ease); }
.tb-theme:active .icon { transform: rotate(-30deg) scale(.9); }
/* Bascule de thème (13/10) : cercle qui s'ouvre depuis le bouton (animation posée par applyTheme, lib.js) ; les vues
   ne se fondent pas entre elles, l'ancienne s'assombrit / s'éclaircit à peine dessous. L'icône arrive en tournant. */
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-old(root) { z-index: 1; }
html.theme-vt::view-transition-new(root) { z-index: 2; animation: theme-reveal .68s cubic-bezier(.65, 0, .25, 1) both; }
html.theme-vt.to-dark::view-transition-old(root) { animation: theme-dim .68s cubic-bezier(.65, 0, .25, 1) both; }
html.theme-vt.to-light::view-transition-old(root) { animation: theme-lift .68s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes theme-reveal { from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); } }
@keyframes theme-dim { to { filter: brightness(.8); } }
@keyframes theme-lift { to { filter: brightness(1.1); } }
.theme-ring { position: fixed; z-index: 2147483647; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(167, 139, 255, .55), inset 0 0 42px 10px rgba(124, 92, 255, .32); }
.theme-ring.dark { box-shadow: inset 0 0 0 1.5px rgba(167, 139, 255, .7), inset 0 0 48px 12px rgba(124, 92, 255, .42); }
.tb-ico { display: grid; place-items: center; }
.tb-fx .tb-ico { animation: tb-ico-in .62s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes tb-ico-in { from { transform: rotate(-120deg) scale(.3); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tb-fx .tb-ico { animation: none; } }
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease !important; }

/* Image en deux versions (classes th-dark / th-light) : seule celle du thème courant s'affiche. */
:root:not([data-theme="light"]) .th-light, :root[data-theme="light"] .th-dark { display: none !important; }

:root[data-theme="light"] {
  --art-filter: invert(1) hue-rotate(180deg) saturate(1.45) contrast(1.04);
}

/* Cartes des matières (Courses) */
:root[data-theme="light"] .course-card { color: var(--text);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); }
:root[data-theme="light"] .course-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong), 0 10px 30px rgba(76, 52, 200, .14); }
:root[data-theme="light"] .course-art { filter: var(--art-filter); }
:root[data-theme="light"] .course-art::after { display: none; }
:root[data-theme="light"] .course-body {
  background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 85%, transparent) 38%, color-mix(in srgb, var(--surface) 10%, transparent) 75%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, transparent 45%); }
:root[data-theme="light"] .course-body p, :root[data-theme="light"] .course-pct, :root[data-theme="light"] .course-line { color: var(--text-2); }
:root[data-theme="light"] .course-pct b { color: var(--text); }
:root[data-theme="light"] .course-track { background: color-mix(in srgb, var(--text) 9%, transparent); }
:root[data-theme="light"] .course-go { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
:root[data-theme="light"] .course-card.is-locked .course-art { filter: var(--art-filter) grayscale(.7) opacity(.6); }
:root[data-theme="light"] .course-lock { background: color-mix(in srgb, var(--surface) 85%, transparent); border-color: var(--border-strong); color: var(--text); }

/* Page matière : bandeau, outils (Mock exam, Revise), liens */
:root[data-theme="light"] .cx-hero, :root[data-theme="light"] .cx-banner, :root[data-theme="light"] .cx-tool {
  border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .cx-hero h1 { color: var(--text); }
:root[data-theme="light"] .cx-hero-sub { color: var(--text-2); }
:root[data-theme="light"] .cx-hero-art, :root[data-theme="light"] .cx-banner-art, :root[data-theme="light"] .cx-tool-art { filter: var(--art-filter); }
:root[data-theme="light"] .cx-tool-title { text-shadow: none; }
:root[data-theme="light"] .cx-tool-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
:root[data-theme="light"] .cx-round { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
:root[data-theme="light"] .cx-tool:hover .cx-round { background: var(--surface-hover); }
:root[data-theme="light"] .cx-row:hover:not(.on), :root[data-theme="light"] .cx-citem:hover:not(.on) { background: var(--surface-hover); }
:root[data-theme="light"] .cx-fcard { background: var(--surface-2); }

/* Daily : carte de la streak */
:root[data-theme="light"] .streak-card { border-color: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text);
  background: radial-gradient(42% 55% at 73% 34%, rgba(255, 112, 48, .13), transparent 70%), linear-gradient(115deg, #ffffff 0%, #fbfaff 50%, #f6f2ff 100%);
  box-shadow: 0 24px 60px -34px rgba(76, 52, 200, .35), var(--shadow-sm); }
:root[data-theme="light"] .sc-caps, :root[data-theme="light"] .sc-session .sc-caps { color: var(--text-2); }
:root[data-theme="light"] .sc-caps b, :root[data-theme="light"] .sc-subj { color: var(--text); }
:root[data-theme="light"] .sc-tier { color: #b5531c; }
:root[data-theme="light"] .sc-tier i, :root[data-theme="light"] .sc-count b i { background: var(--accent); }
:root[data-theme="light"] .sc-count b { color: var(--text); }
:root[data-theme="light"] .sc-count span { color: var(--text-2); }
:root[data-theme="light"] .streak-card hr { border-top-color: var(--border); }
:root[data-theme="light"] .sc-next, :root[data-theme="light"] .sc-meta { color: var(--text-2); }
:root[data-theme="light"] .sc-miles li + li::before { background: var(--border-strong); }
:root[data-theme="light"] .sc-miles li.done + li::before { background: color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="light"] .sc-node { background: #f1eefb; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); }
:root[data-theme="light"] .sc-miles li.next .sc-node { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-theme="light"] .sc-lab { color: var(--text-3); }
:root[data-theme="light"] .sc-miles li.done .sc-lab { color: var(--text); }
:root[data-theme="light"] .sc-subj .sc-ok { color: var(--success); }
:root[data-theme="light"] .sc-btn { border-color: transparent; }
:root[data-theme="light"] .sc-flame svg { filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(255, 96, 32, .35)); }

/* Focus : modes et ambiances */
:root[data-theme="light"] .fz-modes button.on { background: var(--accent); }
/* Focus, Ambiances : maquette du user du 13/10 (img/focus/light). Tuile blanche, illustration carrée en haut (icône
   comprise), nom dessous ; ambiance choisie = bordure violette, fond lavande sous le nom, pastille ✓. */
:root[data-theme="light"] .fz-amb-card .fz-title .icon { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: #efeafd; color: #6c47ff; }
:root[data-theme="light"] .fz-amb-t { display: grid; grid-template-rows: auto 32px; height: auto; padding: 0; align-items: stretch; justify-content: stretch;
  background: #fff; border: 1px solid #e4e1ee; border-radius: 10px; color: #1d1a35; box-shadow: 0 1px 2px rgba(40, 28, 110, .04); }
:root[data-theme="light"] .fz-amb-t::before { content: ''; position: static; z-index: auto; filter: none; width: 100%; aspect-ratio: 1; background: var(--art-light) center / cover no-repeat; }
:root[data-theme="light"] .fz-amb-t::after, :root[data-theme="light"] .fz-amb-i { display: none; }
:root[data-theme="light"] .fz-amb-l { display: grid; place-items: center; padding: 0 3px; font-size: 12.5px; letter-spacing: -.005em; border-top: 1px solid #eceaf4; font-weight: 600; text-shadow: none; text-align: center; line-height: 1.15; }
:root[data-theme="light"] .fz-amb-t:hover { box-shadow: 0 6px 16px -10px rgba(76, 52, 200, .35); }
:root[data-theme="light"] .fz-amb-t.on { border-color: #7c5cff; box-shadow: 0 0 0 1px #7c5cff, 0 8px 20px -12px rgba(108, 71, 255, .55); }
:root[data-theme="light"] .fz-amb-t.on .fz-amb-l { background: #f0eefe; border-top-color: #e2dcfb; color: #5b3fd6; }
.fz-amb-ck { display: none; }
:root[data-theme="light"] .fz-amb-t.on .fz-amb-ck { display: grid; place-items: center; position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: #7455fb; color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 3px 8px -2px rgba(76, 52, 200, .5); }
:root[data-theme="light"] .fz-amb-ck .icon { width: 9px; height: 9px; stroke-width: 3.4; }
@media (max-width: 639px) { :root[data-theme="light"] .fz-amb-t { grid-template-rows: auto 30px; height: auto; padding: 0; } :root[data-theme="light"] .fz-amb-ck { top: 4px; right: 4px; width: 13px; height: 13px; } :root[data-theme="light"] .fz-amb-l { font-size: 11px; } }

/* Revision (parcours guidé) : flèches des matières, vignettes flottantes */
:root[data-theme="light"] .gp-go { background: rgba(255, 255, 255, .85); color: var(--text); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm); }

/* Carte mentale : libellé « An example » lisible sur fond clair */
:root[data-theme="light"] .mm-ex { color: color-mix(in srgb, var(--b) 65%, var(--text)); }

/* Flashcards : verso violet clair, ombres adoucies */
:root[data-theme="light"] { --fc-back-a: #f3eeff; --fc-back-b: #e9e1ff; --fc-back-c: #ddd2fc; }
:root[data-theme="light"] .fc-play .flash .face { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 40px -12px rgba(76, 52, 200, .2); }
:root[data-theme="light"] .fc-play .flash .face.back { border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
:root[data-theme="light"] .flash-stage.is-back .fc-under.u1 { background: #e4dbfd; border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
:root[data-theme="light"] .flash-stage.is-back .fc-under.u2 { background: #d8ccf9; border-color: color-mix(in srgb, var(--accent) 14%, transparent); }
:root[data-theme="light"] .fc-under.u2 { box-shadow: 0 10px 22px -8px rgba(76, 52, 200, .18); }
:root[data-theme="light"] .fc-deck-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -10px rgba(76, 52, 200, .18); }
:root[data-theme="light"] .fc-deck-card::after { box-shadow: 0 8px 18px -8px rgba(76, 52, 200, .16); }

/* Fenêtre d'abonnement (ordinateur et feuille mobile) */
:root[data-theme="light"] .pw-overlay { background: rgba(25, 22, 46, .32); }
:root[data-theme="light"] .pw-m-overlay { background: rgba(25, 22, 46, .28); }
:root[data-theme="light"] .pw { color: var(--text); color-scheme: light; border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 40px 90px -30px rgba(76, 52, 200, .35);
  background: radial-gradient(ellipse 60% 55% at 78% 0%, rgba(124, 92, 255, .12), transparent 70%), linear-gradient(180deg, #ffffff, #f8f6ff); }
:root[data-theme="light"] .pw-close { color: var(--text-2); }
:root[data-theme="light"] .pw-close:hover { background: var(--surface-hover); }
:root[data-theme="light"] .pw-badge { color: var(--accent-text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
:root[data-theme="light"] .pw-title span { background-image: linear-gradient(90deg, #6c47ff, #a64dff); }
:root[data-theme="light"] .pw-lead, :root[data-theme="light"] .pw-tag { color: var(--text-2); }
:root[data-theme="light"] .pw-why { color: var(--accent-text); }
:root[data-theme="light"] .pw-interval { background: var(--bg-sunken); border-color: var(--border); }
:root[data-theme="light"] .pw-interval button { color: var(--text-2); }
:root[data-theme="light"] .pw-interval button.on { color: #fff; }
:root[data-theme="light"] .pw-off { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
:root[data-theme="light"] .pw-interval button.on .pw-off { background: rgba(255, 255, 255, .22); color: #fff; }
:root[data-theme="light"] .pw-card, :root[data-theme="light"] .pw-m-plan { border-color: var(--border-strong); background: var(--surface); }
:root[data-theme="light"] .pw-card.hl-solid, :root[data-theme="light"] .pw-m-plan.hl-solid { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(108, 71, 255, .08), 0 20px 50px -26px rgba(108, 71, 255, .45); }
:root[data-theme="light"] .pw-card.hl-grad, :root[data-theme="light"] .pw-m-plan.hl-grad { border-color: transparent;
  background: linear-gradient(#ffffff, #fbf9ff) padding-box, linear-gradient(135deg, #8b6dff, #b66bff 50%, #ff8bd8) border-box; box-shadow: 0 0 40px -16px rgba(176, 108, 255, .55); }
:root[data-theme="light"] .pw-m-plan.on { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
:root[data-theme="light"] .pw-card.free .pw-ico, :root[data-theme="light"] .pw-m-plan.free .pw-ico { color: var(--text-2); background: var(--bg-sunken); }
:root[data-theme="light"] .pw-current { color: var(--text-2); border-color: var(--border-strong); }
:root[data-theme="light"] .pw-price { border-bottom-color: var(--border); }
:root[data-theme="light"] .pw-price span, :root[data-theme="light"] .pw-m-name small { color: var(--text-2); }
:root[data-theme="light"] .pw-price small { color: var(--text-3); }
:root[data-theme="light"] .pw-price small.pw-day, :root[data-theme="light"] .pw-m .pw-price small.pw-day { color: var(--accent-text); }
:root[data-theme="light"] .pw-card li, :root[data-theme="light"] .pw-m-plan li { color: var(--text); }
:root[data-theme="light"] .pw-check { background: var(--accent); }
:root[data-theme="light"] .pw-card.free .pw-check, :root[data-theme="light"] .pw-m-plan.free .pw-check { background: var(--bg-sunken); color: var(--text-2); }
:root[data-theme="light"] .pw-card .feats .feat small, :root[data-theme="light"] .pw-m-plan .feats .feat small { color: var(--text-2); }
:root[data-theme="light"] .pw-card .feats .feat-lead, :root[data-theme="light"] .pw-m-plan .feats .feat-lead { color: var(--accent-text); }
:root[data-theme="light"] .pw-btn.current { background: var(--bg-sunken); color: var(--text-3); border-color: var(--border); }
:root[data-theme="light"] .pw-foot > div + div { border-left-color: var(--border); }
:root[data-theme="light"] .pw-foot-i { color: var(--accent-text); background: var(--accent-soft); }
:root[data-theme="light"] .pw-foot small, :root[data-theme="light"] .pw-m-trust { color: var(--text-2); }
:root[data-theme="light"] .pw-m-trust .icon { color: var(--accent); }
:root[data-theme="light"] .pw.pw-m { border-color: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 -24px 60px -24px rgba(76, 52, 200, .35); }
:root[data-theme="light"] .pw-m-handle { background: color-mix(in srgb, var(--text) 18%, transparent); }
:root[data-theme="light"] .pw-m-radio { border-color: var(--border-strong); }
:root[data-theme="light"] .pw-m-plan.on .pw-m-radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--accent); }
:root[data-theme="light"] .pw-m-cta { border-top-color: var(--border); }

/* Messages (toast) et infobulles */
:root[data-theme="light"] .toast:not(.error) { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); }
:root[data-theme="light"] .dnd-btn::after { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow); }
:root[data-theme="light"] .overlay { background: rgba(25, 22, 46, .28); }
:root[data-theme="light"] .mnav-layer { background: rgba(25, 22, 46, .3); }
:root[data-theme="light"] .tour-dim { background: rgba(25, 22, 46, .35); }
:root[data-theme="light"] .tour-spot { box-shadow: 0 0 0 9999px rgba(25, 22, 46, .35), 0 0 0 2px var(--accent), 0 0 24px 4px rgba(108, 71, 255, .35); }

/* Petites retouches de contraste */
:root[data-theme="light"] .sx-pill { color: #a03fd6; border-color: rgba(177, 77, 255, .45); background: rgba(177, 77, 255, .07); }
:root[data-theme="light"] .mr-stat.todo b, :root[data-theme="light"] .mr-times, :root[data-theme="light"] .sr-record .icon, :root[data-theme="light"] .sr-first .icon { color: color-mix(in srgb, var(--mr-a) 72%, #19162e); }
:root[data-theme="light"] .mr-stat.hard b { color: color-mix(in srgb, var(--mr-b) 68%, #19162e); }
:root[data-theme="light"] .chip.warning { color: #b5650a; }
:root[data-theme="light"] .sx-avs img { background: var(--bg-sunken); }

/* Page matière et chapitre sur téléphone/tablette (règles « maquette du 09/10 ») */
:root[data-theme="light"] .cx-page .cx-hero-sub, :root[data-theme="light"] .cx-tool-sub { color: var(--text-2); }
:root[data-theme="light"] .cx-page .cx-hero h1, :root[data-theme="light"] .cx-page .cx-hero-sub, :root[data-theme="light"] .cx-tool-sub { text-shadow: 0 1px 10px rgba(255, 255, 255, .9); }
:root[data-theme="light"] .cx-hl-link .icon:first-child, :root[data-theme="light"] .cx-eyebrow, :root[data-theme="light"] .cx-chapter .cx-panel-foot .cx-ask { color: var(--accent-text); }
:root[data-theme="light"] .cx-hl-link .cx-hl-n { color: #8a6400; }
:root[data-theme="light"] .cx-pn { color: var(--accent-text); background: var(--accent-soft); }
:root[data-theme="light"] .cx-cs.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--cx-card)); }
:root[data-theme="light"] .cx-week-link.is-resume { background: color-mix(in srgb, var(--accent) 6%, var(--cx-card)); }
:root[data-theme="light"] .cx-week-link.is-resume .cx-wn, :root[data-theme="light"] .cx-cs-track i { background: var(--accent); }
:root[data-theme="light"] .cx-chapter .cx-lesson .cx-note { border-left-color: var(--accent); }
:root[data-theme="light"] .cx-hl-n { background: color-mix(in srgb, #f5c542 34%, transparent); }
:root[data-theme="light"] .cx-tool .cx-hl-n { color: #6b4e00; }

/* Invitation en duel (animation plein écran) : scène claire, épées gardées violettes */
:root[data-theme="light"] .dv { color: var(--text);
  --surface: #ffffff; --surface-hover: #f3f1fc; --border: rgba(45, 34, 110, .08); --border-strong: rgba(45, 34, 110, .15); --text: #19162e; --text-2: #545070; --text-3: #8b87a8; --bg-sunken: #eeecf8;
  background: radial-gradient(60% 55% at 50% 42%, rgba(108, 71, 255, .2), transparent 70%), radial-gradient(40% 40% at 50% 46%, rgba(255, 77, 141, .1), transparent 70%), rgba(246, 245, 252, .9); }
:root[data-theme="light"] .dv-word { -webkit-text-stroke-color: rgba(108, 71, 255, .22); }
:root[data-theme="light"] .dv-glow { background: radial-gradient(circle, rgba(139, 108, 255, .45), rgba(255, 93, 160, .14) 45%, transparent 68%); }
:root[data-theme="light"] .dv-ring { border-color: rgba(108, 71, 255, .6); }
:root[data-theme="light"] .dv-ring.r2 { border-color: rgba(236, 72, 153, .55); }
:root[data-theme="light"] .dv-sword { filter: drop-shadow(0 10px 22px rgba(76, 52, 200, .45)) saturate(1.5) brightness(.82); }
:root[data-theme="light"] .dv-card { background: linear-gradient(180deg, #ffffff, #faf8ff); border-color: var(--border);
  box-shadow: 0 40px 90px -30px rgba(76, 52, 200, .35), 0 0 0 1px rgba(139, 108, 255, .14), inset 0 1px 0 #fff; }
:root[data-theme="light"] .dv-players .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(108, 71, 255, .5); background: var(--accent-soft); color: var(--accent-text); }
:root[data-theme="light"] .dv-players .avatar:last-child { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(236, 72, 153, .45); }
:root[data-theme="light"] .dv-vs { background-image: linear-gradient(135deg, #6c47ff, #e0459a); }
:root[data-theme="light"] .dv-kicker { color: var(--accent-text); }
:root[data-theme="light"] .dv-card h2 { color: var(--text); }
:root[data-theme="light"] .dv-who { background-image: linear-gradient(90deg, #6c47ff, #d63f8f); }
:root[data-theme="light"] .dv-meta, :root[data-theme="light"] .dv-dnd p { color: var(--text-2); }
:root[data-theme="light"] .dv-later { color: var(--text-3); }
:root[data-theme="light"] .dv-later:hover { color: var(--text); }
:root[data-theme="light"] .dv-dnd { border-top-color: var(--border); }
:root[data-theme="light"] .dv-dnd-btn { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
:root[data-theme="light"] .dv-dnd-btn:hover { background: var(--surface-hover); }
:root[data-theme="light"] .dv-edge { box-shadow: inset 0 0 90px 18px rgba(139, 108, 255, .4), inset 0 0 22px 2px rgba(255, 140, 200, .35); }

/* Mind map (et visionneuse de fiche) en clair : fond de la zone teinté pour détacher les cases blanches */
:root[data-theme="light"] .mm-view { background-color: #ebe8f5; background-image: radial-gradient(circle, rgba(45, 34, 110, .14) 1px, transparent 1.2px); }
:root[data-theme="light"] .mm-full { background: #ebe8f5; }
:root[data-theme="light"] .mm-full .mm-bar { background: var(--surface); }
:root[data-theme="light"] .mm-leaf { border-color: rgba(45, 34, 110, .12); box-shadow: 0 1px 2px rgba(45, 34, 110, .06), 0 4px 12px -6px rgba(45, 34, 110, .18); }
:root[data-theme="light"] .mm-concept { background: color-mix(in srgb, var(--b) 18%, #fff); box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--b) 60%, transparent); }
:root[data-theme="light"] .mm-concept.open { background: color-mix(in srgb, var(--b) 28%, #fff); }
:root[data-theme="light"] .mm-hint { background: rgba(255, 255, 255, .92); }

/* ---------- Mode clair : maquettes du user du 12/10 (Courses, Mock exam, haut de Mistakes) ---------- */
/* Courses : illustrations claires dédiées (img/subjects/light), fondues vers le bas de la carte */
:root[data-theme="light"] .courses-lead { color: #6a58d6; }
:root[data-theme="light"] .course-card.has-light { background: linear-gradient(180deg, #f7f5ff 0%, #f6f5fe 60%, #f4f3fd 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 102, 255, .22), 0 10px 26px -16px rgba(76, 52, 200, .35); }
:root[data-theme="light"] .course-card.has-light:hover { box-shadow: inset 0 0 0 1px rgba(124, 102, 255, .38), 0 16px 34px -16px rgba(76, 52, 200, .42); }
:root[data-theme="light"] .course-card.has-light .course-art { inset: 0; filter: none; background: var(--art-light) var(--art-pos, right top) / cover no-repeat; }
:root[data-theme="light"] .course-card.has-light.is-locked .course-art { filter: grayscale(.6) opacity(.65); }
:root[data-theme="light"] .course-card.has-light .course-body {
  background: radial-gradient(120% 75% at 0% 100%, rgba(250, 249, 255, .82) 0%, rgba(250, 249, 255, .5) 45%, rgba(250, 249, 255, 0) 75%); }
:root[data-theme="light"] .course-card.has-light h2 { color: #15123a; }
:root[data-theme="light"] .course-card.has-light .course-pct, :root[data-theme="light"] .course-card.has-light .course-line { color: #5b5296; }
:root[data-theme="light"] .course-card.has-light .course-pct b { color: #15123a; }
:root[data-theme="light"] .course-card.has-light .course-track { background: #e4e1f5; }
:root[data-theme="light"] .course-card.has-light .course-go { background: #fff; color: #15123a; box-shadow: 0 0 0 1px rgba(124, 102, 255, .12), 0 6px 16px -6px rgba(76, 52, 200, .35); }

/* Page matière : cartes Mock exam et « Réviser toute la matière » (maquette du user : fond lavande, bordure violette,
   bouton rond vitré) et bandeau de la matière au même design (13/10) */
:root[data-theme="light"] .cx-tool.exam, :root[data-theme="light"] .cx-hero.has-light { border: 1.5px solid rgba(150, 125, 245, .55);
  background: linear-gradient(120deg, #f1ebff 0%, #e6dcfc 100%); box-shadow: 0 14px 34px -20px rgba(108, 71, 255, .45); }
:root[data-theme="light"] .cx-tool.mock .cx-tool-art, :root[data-theme="light"] .cx-page .cx-tool.mock .cx-tool-art { width: 100%; filter: none;
  background: var(--art-light) right bottom / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
:root[data-theme="light"] .cx-tool.exam .cx-tool-title { color: #0e0b2b; font-weight: 750; }
:root[data-theme="light"] .cx-tool.exam .cx-tool-sub { color: #5f5a7e; text-shadow: none; }
:root[data-theme="light"] .cx-tool.exam .cx-round { background: rgba(255, 255, 255, .72); color: #3a1fc0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(124, 102, 255, .18), 0 8px 22px -8px rgba(76, 52, 200, .4); }
:root[data-theme="light"] .cx-tool.exam:hover .cx-round { background: rgba(255, 255, 255, .92); }
:root[data-theme="light"] .cx-tool.exam .cx-round .icon { stroke-width: 2.6; }
/* « Réviser toute la matière » : version claire de l'illustration (encre violette sur transparent, img/course/light) */
:root[data-theme="light"] .cx-tool.rv.has-light .cx-tool-art { filter: none; background-image: var(--art-light);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 16%, #000 74%); mask-image: linear-gradient(90deg, transparent 0, transparent 16%, #000 74%); }
:root[data-theme="light"] .cx-tool.rv.full.has-light .cx-tool-art { -webkit-mask-image: none; mask-image: none; }
/* Bandeau : illustration claire de la carte de la matière, calée à droite (cadrage par matière : --hz, --hy, --har)
   et fondue sous le titre ; B2 pleine largeur : version claire du bandeau sombre */
:root[data-theme="light"] .cx-hero.has-light .cx-hero-art { filter: none; opacity: 1; left: auto; right: 0; top: var(--hy, -6%); bottom: auto;
  height: var(--hz, 140%); width: auto; max-width: none; aspect-ratio: var(--har, 1.3); background: var(--art-light) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%); mask-image: linear-gradient(90deg, transparent 0, #000 46%); }
:root[data-theme="light"] .cx-hero.full.has-light .cx-hero-art, :root[data-theme="light"] .cx-hero.full-light.has-light .cx-hero-art { top: 0; height: 100%; width: 100%; aspect-ratio: auto;
  background: var(--art-light) right center / cover no-repeat; -webkit-mask-image: none; mask-image: none; }
:root[data-theme="light"] .cx-hero.has-light h1 { color: #0e0b2b; }
:root[data-theme="light"] .cx-page .cx-hero.has-light .cx-hero-sub { color: #5b5296; }
:root[data-theme="light"] .cx-page .cx-hero.has-light h1, :root[data-theme="light"] .cx-page .cx-hero.has-light .cx-hero-sub {
  text-shadow: 0 0 2px rgba(255, 255, 255, .8), 0 0 14px rgba(246, 242, 255, .95), 0 0 26px rgba(246, 242, 255, .8); }

/* Bandeau des pages Week et « Réviser » (13/10) : même cadre que le bandeau de la matière, illustration claire propre
   à chaque matière (img/course/light/banner-<id>.webp, déjà fondue vers la gauche), calée à droite sur toute la hauteur */
:root[data-theme="light"] .cx-banner.has-light { border: 1.5px solid rgba(150, 125, 245, .55);
  background: linear-gradient(120deg, #f1ebff 0%, #e6dcfc 100%); box-shadow: 0 14px 34px -22px rgba(108, 71, 255, .45); }
:root[data-theme="light"] .cx-banner.has-light .cx-banner-art { width: 100%; filter: none; opacity: 1;
  background: var(--art-light) right center / auto 100% no-repeat; -webkit-mask-image: none; mask-image: none; }
:root[data-theme="light"] .cx-banner.has-light h1 { color: #0e0b2b;
  text-shadow: 0 0 2px rgba(255, 255, 255, .8), 0 0 14px rgba(246, 242, 255, .95), 0 0 26px rgba(246, 242, 255, .8); }

/* Téléphone et tablette : le bloc « Réviser » est bas, l'illustration est recadrée sur son centre (sinon il ne reste
   que le bas de l'image) ; sur téléphone, l'illustration du bandeau s'efface davantage sous le titre. */
@media (max-width: 1023px) {
  :root[data-theme="light"] .cx-tool.rv.has-light:not(.full) .cx-tool-art { background-size: auto 165%; background-position: right 16% center; }
}
@media (max-width: 639px) {
  :root[data-theme="light"] .cx-hero.has-light .cx-hero-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 92%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 92%); }
  :root[data-theme="light"] .cx-tool.rv.has-light:not(.full) .cx-tool-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 95%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 95%); }  /* B2 (images pleine largeur) : l'illustration s'efface sous le titre et le sous-titre */
  :root[data-theme="light"] .cx-hero.full-light.has-light .cx-hero-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 86%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 86%); }
  :root[data-theme="light"] .cx-tool.rv.full.has-light .cx-tool-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 88%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 40%, #000 88%); }  :root[data-theme="light"] .cx-banner.has-light .cx-banner-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 45%, rgba(0, 0, 0, .85) 100%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 45%, rgba(0, 0, 0, .85) 100%); }
}

/* Mistakes : les deux blocs du haut */
:root[data-theme="light"] .mx-total, :root[data-theme="light"] .mx-next { border: 1.5px solid rgba(170, 150, 245, .5); border-radius: 16px;
  background: linear-gradient(160deg, #f6f3ff 0%, #efeafd 55%, #ebe4fc 100%); box-shadow: 0 14px 34px -24px rgba(108, 71, 255, .45); }
@media (min-width: 900px) { :root[data-theme="light"] .mx-total, :root[data-theme="light"] .mx-next { min-height: 172px; } }
:root[data-theme="light"] .mx-total { padding-left: 32px; }
:root[data-theme="light"] .mx-total::before { width: 220px; height: 220px; right: -60px; top: -42px; background: none; border: 1px solid rgba(139, 109, 255, .2); }
:root[data-theme="light"] .mx-total::after { width: 156px; height: 156px; right: -26px; bottom: -86px; border: 1px solid rgba(139, 109, 255, .2); }
:root[data-theme="light"] .mx-total > b { color: #0e0b2b; font-size: 46px; font-weight: 750; }
:root[data-theme="light"] .mx-total-l { color: #15123a; font-size: 20px; }
:root[data-theme="light"] .mx-total small { color: #5f5a7e; font-size: 15px; }
:root[data-theme="light"] .mx-next-waves { opacity: .8; }
:root[data-theme="light"] .mx-next-waves path { stroke: rgba(139, 109, 255, .3); }
:root[data-theme="light"] .mx-next-ico { color: #6c47ff; }
:root[data-theme="light"] .mx-next .mx-eyebrow { color: #5f5a7e; font-weight: 600; }
:root[data-theme="light"] .mx-next h2 { color: #0e0b2b; font-weight: 700; }
:root[data-theme="light"] .mx-next p { color: #5f5a7e; }
:root[data-theme="light"] .mx-next .btn-primary { height: 50px; padding: 0 26px; border-radius: 13px; font-size: 15.5px;
  background: linear-gradient(90deg, #6a5cf7 0%, #8a55f5 55%, #b04ff0 100%); box-shadow: 0 10px 26px -10px rgba(120, 80, 245, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
:root[data-theme="light"] .course-card.has-light h2, :root[data-theme="light"] .course-card.has-light .course-pct, :root[data-theme="light"] .course-card.has-light .course-line {
  text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 10px rgba(255, 255, 255, .95), 0 0 22px rgba(255, 255, 255, .8); }

/* ===== Première victoire (13/10) : fin de l'onboarding = vraie 1re question, fin de la 1re Daily, indices ===== */
.onb-go .onb-body { padding-top: 32px; }
.onb-go h1 { font-size: 27px; line-height: 1.15; }
.onb-go-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; margin-bottom: 14px; border-radius: 999px;
  background: var(--flame-soft); color: var(--flame); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.onb-go .lead { margin-bottom: 14px; }
.onb-go-stack { position: relative; display: block; width: 100%; margin: 0 0 22px; padding: 14px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; perspective: 1200px; }
.onb-go-card { position: absolute; left: 50%; top: 50%; width: min(340px, 92%); height: calc(100% - 40px); border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); background: var(--surface);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--accent) 60%, transparent); transform-origin: 50% 140%; }
.onb-go-card.b2 { transform: translate(-50%, -50%) rotate(-8deg) scale(.94); opacity: .35; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface)); animation: onb-fan .8s var(--ease) both; }
.onb-go-card.b1 { transform: translate(-50%, -50%) rotate(-4deg) scale(.97); opacity: .6; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); animation: onb-fan .8s .06s var(--ease) both; }
.onb-go-card.front { position: relative; left: auto; top: auto; height: auto; margin: 0 auto; transform: rotate(1.5deg); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left;
  animation: onb-deal .9s .12s var(--ease) both; transition: transform .25s var(--ease), box-shadow .25s; }
.onb-go-stack:hover .onb-go-card.front, .onb-go-stack:focus-visible .onb-go-card.front { transform: translateY(-4px) rotate(0deg); box-shadow: 0 36px 70px -26px color-mix(in srgb, var(--accent) 75%, transparent); }
.onb-go-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.onb-go-subj { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.onb-go-q { flex: none; font-size: 15.5px; font-weight: 560; line-height: 1.35; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.onb-go-opt { flex: none; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 10px 4px 4px; border-radius: 9px; border: 1px solid var(--border-strong); font-size: 13.5px; overflow: hidden; white-space: nowrap; }
.onb-go-opt > i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--accent-soft); color: var(--accent-text); font-style: normal; font-size: 12px; font-weight: 600; }
.onb-go-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.onb-go-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.onb-go-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; }
.onb-go-facts li:last-child { color: var(--flame); border-color: color-mix(in srgb, var(--flame) 35%, var(--border)); }
.onb-go-foot { flex-direction: column; gap: 4px; }
@keyframes onb-deal { from { opacity: 0; transform: translateY(40px) rotate(10deg) scale(.9); } }
@keyframes onb-fan { from { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.9); } }
@media (max-height: 700px) { .onb-go-q { -webkit-line-clamp: 3; } .onb-go-opt { min-height: 28px; } }

.fw { overflow-y: auto; }
.fw-wrap { max-width: 460px; margin: 0 auto; padding: max(28px, 6vh) 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.fw-flame { position: relative; width: 92px; height: 92px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 28px;
  background: var(--surface-2); color: var(--text-3); transition: color .5s, background .5s, transform .5s var(--ease); }
.fw-flame svg { width: 46px; height: 46px; position: relative; z-index: 1; }
.fw-glow { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--flame) 45%, transparent), transparent 65%); opacity: 0; transform: scale(.6); transition: opacity .6s, transform .8s var(--ease); }
.fw-flame.lit { color: var(--flame); background: var(--flame-soft); transform: scale(1.06); animation: fw-flicker 2.4s 1s ease-in-out infinite; }
.fw-flame.lit .fw-glow { opacity: 1; transform: scale(1); }
@keyframes fw-flicker { 50% { transform: scale(1.02) rotate(-2deg); } }
.fw-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--flame); margin-bottom: 6px; }
.fw h1 { font-size: 28px; letter-spacing: -.03em; margin: 0 0 8px; }
.fw-lead { color: var(--text-2); margin: 0 auto 22px; max-width: 380px; }
.fw-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 10px; position: relative; }
.fw-week::before { content: ""; position: absolute; left: 7%; right: 7%; top: 17px; height: 2px; background: var(--border); }
.fw-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: fw-day .5s calc(.6s + var(--d) * 70ms) var(--ease) both; }
.fw-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-3); font-size: 13px; font-weight: 600; }
.fw-day.on .fw-dot { background: var(--flame); border-color: var(--flame); color: #fff; box-shadow: 0 0 0 5px var(--flame-soft); }
.fw-day.goal .fw-dot { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--accent-text); }
.fw-day small { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.fw-day.on small { color: var(--flame); font-weight: 600; }
@keyframes fw-day { from { opacity: 0; transform: translateY(8px); } }
.fw-next { font-size: 13.5px; color: var(--text-2); margin: 0 0 20px; }
.fw-cards { display: grid; gap: 8px; margin-bottom: 10px; text-align: left; }
.fw-card, .fw-remind { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.fw-card b, .fw-remind b { display: block; font-size: 14.5px; font-weight: 600; }
.fw-card small, .fw-remind small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.fw-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.fw-remind { text-align: left; margin-bottom: 18px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fw-remind > svg { flex: none; color: var(--accent-text); }
.fw-remind.done { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.fw-remind.done > svg { color: var(--success); }
.fw-go { gap: 8px; }
@media (prefers-reduced-motion: reduce) { .onb-go-card, .fw-day, .fw-flame.lit { animation: none !important; } }


/* ===== App de bureau (14/10) : fenêtre d'invitation sur ordinateur, bandeau sur téléphone (views/desktop-app.js) ===== */
.dli-overlay { align-items: center; padding: 24px; z-index: 85; background: rgba(9, 9, 11, .55); }
.dli { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; width: 100%; max-width: 860px; max-height: calc(100dvh - 48px); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 40px 120px -30px rgba(40, 20, 120, .55), var(--shadow-lg);
  animation: dli-in .5s var(--ease) both; }
@keyframes dli-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.dli-x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.dli-art { position: relative; overflow: hidden; min-height: 380px; background: radial-gradient(120% 90% at 20% 0%, #8b6bff 0%, #5b34e6 42%, #23146b 100%); }
.dli-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px) 0 0 / 16px 16px; mask: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.dli-win { position: absolute; left: 34px; top: 54px; width: 128%; border-radius: 12px; overflow: hidden; background: #0f0d1c; box-shadow: 0 30px 60px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12);
  animation: dli-win .9s .15s var(--ease) both; }
@keyframes dli-win { from { opacity: 0; transform: translate(30px, 24px); } }
.dli-bar { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; background: #1b1830; }
.dli-win.mac .dli-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.dli-win.mac .dli-bar i:nth-child(2) { background: #febc2e; } .dli-win.mac .dli-bar i:nth-child(3) { background: #28c840; }
.dli-win.win .dli-bar { gap: 16px; padding-right: 14px; color: rgba(255,255,255,.6); font-size: 11px; }
.dli-win.win .dli-bar span { flex: 1; } .dli-win.win .dli-bar b { font-weight: 400; }
.dli-win img { display: block; width: 100%; height: auto; }
.dli-icon { position: absolute; left: 26px; bottom: 26px; width: 84px; height: 84px; border-radius: 20px; filter: drop-shadow(0 16px 26px rgba(0,0,0,.45)); animation: dli-pop .7s .55s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes dli-pop { from { opacity: 0; transform: translateY(16px) scale(.6); } }
.dli-notif { position: absolute; right: 16px; top: 18px; display: flex; align-items: center; gap: 10px; width: 236px; padding: 10px 12px; border-radius: 14px;
  background: rgba(30, 27, 52, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12);
  animation: dli-notif 3.2s 1.1s var(--ease) both; }
@keyframes dli-notif { 0% { opacity: 0; transform: translateX(40px); } 14%, 100% { opacity: 1; transform: none; } }
.dli-notif img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.dli-notif b { display: block; font-size: 12.5px; font-weight: 600; } .dli-notif small { display: block; font-size: 11.5px; opacity: .75; }
.dli-body { display: flex; flex-direction: column; justify-content: center; padding: 40px 36px 28px; overflow-y: auto; }
.dli-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 600; }
.dli h2 { margin: 14px 0 10px; font-size: 25px; line-height: 1.18; letter-spacing: -.025em; font-weight: 680; }
.dli-lead { margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.dli-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.dli-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.dli-list .icon { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.dli-cta { gap: 8px; text-decoration: none; }
.dli-later { margin-top: 8px; padding: 10px; border: 0; background: none; color: inherit; opacity: .65; font: inherit; font-size: 14px; cursor: pointer; border-radius: 10px; }
.dli-later:hover { opacity: 1; background: var(--surface-hover); }
.dli-foot { margin: 10px 0 0; text-align: center; font-size: 12px; opacity: .55; }
@media (max-width: 760px) { .dli { grid-template-columns: 1fr; max-width: 460px; } .dli-art { min-height: 210px; } .dli-body { padding: 26px 24px 20px; } .dli h2 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .dli, .dli-win, .dli-icon, .dli-notif { animation: none; } }
/* Bandeau du téléphone : même place que l'ancien « pas optimisé mobile », bouton d'envoi du lien */
.m-notice.dli-band { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 8px; align-items: center; padding-bottom: 12px; font-size: 13.5px; }
.dli-band > span { grid-column: 2; }
.dli-band .m-notice-x { grid-column: 3; grid-row: 1; }
.dli-band-btn { grid-column: 2; grid-row: 2; justify-self: start; }
.dli-band-btn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: #4b2bd6; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.dli-band-btn:disabled { opacity: .85; cursor: default; }

/* ===== Cours particuliers (views/tutoring.js, views/admin-tutoring.js) ===== */
.tu { max-width: 1180px; }
.tu-head { align-items: center; }
.tu-head .btn { gap: 8px; }
.tu-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: -8px 0 18px; }
.tu-how > div { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-sunken); }
.tu-how span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); }
.tu-how p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.tu-filters { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr auto; gap: 12px; align-items: end; padding: 14px; margin-bottom: 16px; }
.tu-range { display: flex; align-items: center; gap: 6px; }
.tu-range .input { min-width: 0; }
.tu-range span { color: var(--text-2); }
.tu-reset { gap: 6px; white-space: nowrap; }
.tu-count { margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.tu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tu-grid.one { grid-template-columns: minmax(0, 420px); }
.tu-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tu-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.tu-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tu-card-head { display: flex; gap: 12px; align-items: center; }
.tu-card h3 { font-size: 16px; font-weight: 620; letter-spacing: -.01em; margin: 0; }
.tu-card-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.tu-photo { flex: none; border-radius: 50%; object-fit: cover; background: var(--bg-sunken); }
.tu-initials { display: grid; place-items: center; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); letter-spacing: .02em; }
.tu-price { margin-left: auto; text-align: right; line-height: 1.1; }
.tu-price b { display: block; font-size: 18px; font-weight: 680; letter-spacing: -.02em; }
.tu-price span { font-size: 12px; color: var(--text-2); }
.tu-rating { display: inline-flex; align-items: center; gap: 4px; }
.tu-rating b { color: var(--text); font-weight: 620; }
.tu-norating { font-size: 12.5px; color: var(--text-2); }
.tu-stars { display: inline-flex; gap: 1px; }
.tu-stars .icon, .tu-rating .icon { color: var(--border-strong); }
.tu-stars .icon.on, .tu-rating .icon.on { color: #f5b301; fill: #f5b301; }
.tu-subjects { display: flex; flex-wrap: wrap; gap: 6px; }
.tu-subj { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--bg-sunken); font-size: 12.5px; font-weight: 520; }
.tu-subj i { width: 7px; height: 7px; border-radius: 50%; }
.tu-subj.more { color: var(--text-2); }
.tu-bio { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tu-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.tu-levels { display: inline-flex; align-items: center; gap: 4px; }
.tu-lvl { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 650; }
.tu-format { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.tu-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 560; }
.tu-more-row { display: flex; justify-content: center; margin: 18px 0 4px; }
.tu-skel { min-height: 190px; }
.tu-skel i { display: block; height: 14px; border-radius: 7px; background: var(--bg-sunken); animation: tu-pulse 1.2s ease-in-out infinite alternate; }
.tu-skel i:first-child { width: 55%; height: 40px; } .tu-skel i:nth-child(2) { width: 85%; } .tu-skel i:nth-child(3) { width: 65%; }
@keyframes tu-pulse { to { opacity: .45; } }
.tu-myreports { margin: 22px 0 0; font-size: 13px; }
.tu-myreports a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.tu-state { font-size: 11.5px; }
.tu-state.published { background: var(--success-soft); color: var(--success); }
.tu-state.hidden, .tu-state.withdrawn { background: var(--bg-sunken); color: var(--text-2); }
.tu-state.suspended, .tu-state.removed { background: var(--danger-soft); color: var(--danger); }
.tu-head .btn .tu-state { margin-left: 4px; }
/* Fiche */
.tu-back { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.tu-back:hover { color: var(--text); }
.tu-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tu-link:hover { text-decoration: underline; }
button.tu-back { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; padding: 0; }
.tu-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.tu-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tu-hero { display: flex; gap: 18px; align-items: center; padding: 20px; }
.tu-hero h1 { font-size: 24px; letter-spacing: -.025em; margin: 0; }
.tu-hero-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.tu-sec h2 { font-size: 15px; font-weight: 620; margin: 0 0 12px; }
.tu-fullbio { margin: 0; white-space: pre-line; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.tu-lvl-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.tu-lvl-row > .tu-lvl { margin-top: 3px; }
.tu-book { position: sticky; top: calc(var(--notice-h, 0px) + 76px); display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.tu-book-price b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.tu-book-price span { margin-left: 6px; color: var(--text-2); font-size: 14px; }
.tu-book .btn { gap: 8px; text-decoration: none; }
.tu-book-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.tu-contact { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13.5px; overflow-wrap: anywhere; }
.tu-owner { margin-bottom: 14px; }
.tu-owner.suspended, .tu-owner.removed { background: var(--danger-soft); }
.tu-rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tu-rv-head h2 { margin: 0; }
.tu-rv-head .btn, .tu-myreports a, .tu-report-line .tu-link { gap: 6px; }
.tu-rv-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tu-rv-sum > b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.tu-rv-list { list-style: none; margin: 8px 0 0; padding: 0; }
.tu-rv { padding: 12px 0; border-top: 1px solid var(--border); }
.tu-rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.tu-rv p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.tu-flag { border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.tu-flag:hover { background: var(--surface-hover); color: var(--text); }
.tu-report-line { margin: 0; font-size: 13px; }
.tu-report-line .tu-link { color: var(--text-2); }
/* Fenêtres (avis, signalement) */
.tu-form-modal { gap: 14px; }
.tu-star-input { display: flex; gap: 4px; border: 0; padding: 0; margin: 0; }
.tu-star-input legend { margin-bottom: 6px; }
.tu-star-input label { cursor: pointer; padding: 2px; border-radius: 8px; color: var(--border-strong); }
.tu-star-input label .icon { width: 30px; height: 30px; }
.tu-star-input label.on .icon { color: #f5b301; fill: #f5b301; }
.tu-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tu-star-input label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.tu-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.tu-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.tu-radios { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tu-radios legend { margin-bottom: 4px; }
.tu-radios label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; cursor: pointer; }
.tu-radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tu-radios input { accent-color: var(--accent); }
.tu-small { font-size: 12.5px; line-height: 1.45; }
.tu-small .icon { vertical-align: -2px; }
.tu-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13.5px; }
.tu-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tu-quote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--border-strong); background: var(--bg-sunken); border-radius: 0 10px 10px 0; font-size: 13.5px; }
.tu-counter { align-self: flex-end; font-size: 11.5px; color: var(--text-2); }
/* Formulaire du profil */
.tu-edit { max-width: 860px; }
.tu-form { display: flex; flex-direction: column; gap: 14px; }
.tu-fsec { display: flex; flex-direction: column; gap: 16px; }
.tu-fsec h2 { font-size: 16px; font-weight: 640; margin: 0; }
.tu-fsec fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tu-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tu-photo-row { display: flex; gap: 16px; align-items: center; }
.tu-photo-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tu-photo-btns .btn { gap: 6px; }
.tu-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tu-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; font-weight: 520; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.tu-pill i { width: 8px; height: 8px; border-radius: 50%; }
.tu-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tu-pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.tu-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tu-euro { display: flex; align-items: center; gap: 8px; }
.tu-euro .input { max-width: 140px; }
.tu-euro span { color: var(--text-2); font-size: 14px; }
.tu-ferr { color: var(--danger); font-size: 12.5px; }
[aria-invalid="true"].input { border-color: var(--danger); }
fieldset[aria-invalid="true"] legend { color: var(--danger); }
.tu-paynote { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-sunken); color: var(--text-2); }
.tu-manage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; margin-bottom: 14px; }
.tu-manage-state { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 320px; }
.tu-manage-state p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.tu-manage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tu-manage-actions .btn { gap: 6px; }
.tu-danger { color: var(--danger); }
.tu-publish-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.tu-publish-bar p { margin: 0; font-size: 13px; flex: 1 1 260px; }
.tu-publish-bar .btn { gap: 8px; }
.tu-preview-banner { align-items: flex-start; }
.tu-pv-label { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 10px; }
.tu-pv-frame { pointer-events: none; }
.tu-myrep-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
.tu-myrep-row:first-child { border-top: 0; }
.tu-rs.new { background: var(--warning-soft); color: var(--warning); }
.tu-rs.in_progress { background: var(--accent-soft); color: var(--accent-text); }
.tu-rs.resolved { background: var(--success-soft); color: var(--success); }
/* Admin */
.atu-detail h3 { font-size: 14px; margin: 6px 0 0; }
.atu-top { display: flex; gap: 14px; align-items: center; }
.atu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.atu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.atu-box { display: flex; flex-direction: column; gap: 8px; }
.atu-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.atu-kv span { color: var(--text-2); }
.atu-list > div { padding: 12px 14px; border-top: 1px solid var(--border); }
.atu-list > div:first-child { border-top: 0; }
.atu-rv.removed { opacity: .6; }
.atu-rv p { margin: 6px 0 0; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.atu-rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.atu-report { display: flex; flex-direction: column; gap: 8px; }
.atu-report.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.atu-desc { margin: 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.atu-select { width: auto; height: 32px; font-size: 13px; }
@media (max-width: 960px) {
  .tu-filters { grid-template-columns: 1fr 1fr; }
  .tu-detail { grid-template-columns: 1fr; gap: 14px; }
  .tu-main { display: contents; }
  .tu-hero { order: 0; }
  .tu-book { position: static; order: 1; }
  .tu-main > :not(.tu-hero) { order: 2; }
}
@media (max-width: 640px) {
  .tu-how { display: none; }
  .tu-filters { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .tu-price-f, .tu-reset { grid-column: 1 / -1; }
  .tu-reset { justify-self: start; }
  .tu-grid { grid-template-columns: 1fr; }
  .tu-row2 { grid-template-columns: 1fr; }
  .tu-hero { flex-direction: column; align-items: flex-start; text-align: left; }
  .tu-head .btn { width: 100%; justify-content: center; }
  .tu-photo-row { align-items: flex-start; }
  .atu-kv { grid-template-columns: 1fr; gap: 2px; }
  .tu-publish-bar { bottom: calc(var(--bnav-h, 64px) + 8px); }
}
.tu-demo {  font-size: 11px; font-weight: 600; background: var(--warning-soft); color: var(--warning); }

/* Simulation de l'onboarding (views/onboarding-demo.js, staging seulement) : bandeau en haut ; la scène est
   transformée pour que les écrans en position fixe (quiz plein écran) restent sous le bandeau. */
.demo { height: 100dvh; display: flex; flex-direction: column; }
.demo-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 12px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); overflow-x: auto; white-space: nowrap; }
.demo-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text); }
.demo-step { font-weight: 560; color: var(--text); }
.demo-hint { flex: 1; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.demo-btn { flex: none; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; cursor: pointer; }
.demo-stage { flex: 1; position: relative; overflow-y: auto; transform: translateZ(0); }
.demo-stage .auth, .demo-stage .onb { min-height: 100%; }
@media (max-width: 560px) { .demo-hint { display: none; } }

/* Réponse maths affichée comme une formule dans son champ (15/10) : fraction empilée au lieu de « (1)/(8) » une fois la
   réponse corrigée ou le champ quitté. Le champ garde la vraie valeur, rendue transparente sous la formule. */
.mk-field { position: relative; min-width: 0; }
.mk-blank { display: inline-block; }
.mk-shown { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 15px; overflow: hidden; white-space: nowrap; pointer-events: none; color: var(--text); }
.mk-shown .katex { font-size: 1.35em; }
.mk-blank .mk-shown { inset: 0 4px; padding: 0 10px; justify-content: center; }
.mk-blank .mk-shown .katex { font-size: 1em; }
.mk-blank.ok .mk-shown { color: var(--success); }
.mk-blank.ko .mk-shown { color: var(--danger); }
.mk-field.is-shown input { color: transparent; -webkit-text-fill-color: transparent; text-decoration: none; }

/* =====================================================================
   Plateforme collège : compléments (inscription par pseudo, code de secours, accord parental)
   ===================================================================== */
.recovery-code { margin-top: 6px; padding: 18px 12px; border-radius: 12px; background: var(--bg-sunken); border: 1px solid var(--border-strong);
  font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: 0.08em; text-align: center; user-select: all; color: var(--text); }
.auth-years.lv4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) { .auth-years.lv4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.banner.parent-ok { align-items: flex-start; line-height: 1.5; margin: 4px 0 16px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; cursor: pointer; font-size: 13.5px; color: var(--text-2); }
.consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.onb-core { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-core .onb-yr-sub { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.onb-core .onb-yr-sub i { width: 8px; height: 8px; border-radius: 50%; }
.ct-ref { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-top: 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.ct-ref:hover { border-color: var(--border-strong); }

/* Espace admin (sous-domaine admin.chapteo.education) : étiquette sous le logo, pour ne pas confondre avec l'appli élève. */
.adm-space-tag { margin: -10px 10px 14px; align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }