/* =========================================================================
   StudyBoost : theme.css, LE point unique de l'apparence du site.
   -------------------------------------------------------------------------
   Univers : galaxie de nuit (bleu nuit), soleil (jaune), étoiles (crème),
   touches de vert. Tout ce qui est partagé entre les pages vit ici :
   jetons (couleurs, espacements, rayons, polices, ombres), barre de
   navigation commune, coquille d'app, onglets bas, cartes, boutons,
   barres de progression, badges, formulaires, espace parent, pages
   d'authentification, paiement, pages légales.
   Le rendu des fiches et des quiz vit dans content.css, qui hérite des
   jetons définis ici. Aucune autre feuille de style, aucun style en ligne.
   ========================================================================= */

/* ---- Polices auto-hébergées (latin), aucune dépendance externe ---- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/fraunces-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/vendor/fonts/figtree-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/vendor/fonts/figtree-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/spacemono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/vendor/fonts/spacemono-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Excalifont';
  font-display: swap;
  src: url('/vendor/Excalifont.woff2') format('woff2');
}

/* =========================================================================
   1. JETONS. Changer une valeur ici change tout le site.
   ========================================================================= */
:root {
  /* Polices */
  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-sketch: 'Excalifont', 'Segoe Print', 'Bradley Hand', cursive;

  /* Palette galaxie */
  --night-950: #0b1020;   /* fond de page */
  --night-900: #131b36;   /* surface 1 : corps de fiche, panneaux */
  --night-800: #1c2649;   /* surface 2 : cartes */
  --night-700: #2c396a;   /* lignes, bordures */
  --night-600: #3d4c8a;   /* lignes appuyées, pistes */
  --cream: #f4ead6;       /* texte, traits dessinés */
  --cream-dim: #c9bfa8;
  --cream-faint: #8f90a8;
  --sun: #f5c542;         /* action principale, accents */
  --sun-deep: #c9931c;
  --sun-ink: #1a1405;     /* texte posé sur du soleil */
  --sun-glow: rgba(245, 197, 66, 0.35);
  --star: #fff4c2;
  --green: #6fcf97;       /* réussite, petites touches */
  --green-dim: #3f8a5c;
  --rocket: #e0574c;      /* erreur, danger, à revoir */
  --rocket-dark: #b23f36;
  --rocket-glow: rgba(224, 87, 76, 0.35);
  --sky: #7fa7e8;         /* information, liens */
  --nebula: #a58ce0;      /* rang légendaire, anglais */
  --teal: #52c2ad;        /* sciences */
  --orange: #e08a45;      /* physique-chimie */

  /* Jetons sémantiques */
  --color-bg: var(--night-950);
  --color-surface: var(--night-900);
  --color-surface-2: var(--night-800);
  --color-line: var(--night-700);
  --color-line-strong: var(--night-600);
  --color-text: var(--cream);
  --color-text-dim: var(--cream-dim);
  --color-text-faint: var(--cream-faint);
  --color-primary: var(--sun);
  --color-primary-deep: var(--sun-deep);
  --color-primary-ink: var(--sun-ink);
  --color-primary-glow: var(--sun-glow);
  --color-success: var(--green);
  --color-danger: var(--rocket);
  --color-info: var(--sky);
  --color-highlight: rgba(245, 197, 66, 0.34);

  /* Alias historiques : les composants existants continuent de fonctionner,
     mais toute nouvelle règle doit utiliser les jetons ci-dessus. */
  --ink-950: var(--night-950);
  --ink-900: var(--night-900);
  --ink-800: var(--night-800);
  --ink-700: var(--night-700);
  --ink-600: var(--night-600);
  --parchment: var(--cream);
  --parchment-dim: var(--cream-dim);
  --parchment-faint: var(--cream-faint);
  --accent-gold: var(--sun);
  --accent-gold-dim: var(--sun-deep);
  --sceau: var(--rocket);
  --sceau-dark: var(--rocket-dark);
  --sceau-glow: var(--rocket-glow);
  --encre-vert: var(--green);
  --encre-bleu: var(--sky);
  --encre-violet: var(--nebula);
  --encre-teal: var(--teal);
  --encre-orange: var(--orange);
  --amethyste: var(--nebula);
  --amethyste-dim: #5f4a8a;
  --amethyste-glow: rgba(165, 140, 224, 0.35);
  --journey-surface: var(--night-900);
  --journey-surface-raised: var(--night-800);
  --journey-line: var(--night-700);

  /* Espacements, rayons, ombres, mouvements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 14px 34px -24px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 18px 48px -20px rgba(0, 0, 0, 0.75);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Gabarit */
  --content-max: 680px;
  --journey-gutter: clamp(16px, 4vw, 32px);
  --journey-content: var(--content-max);
  --sb-header-h: 57px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 72px;
  --qcm-tabbar-base-height: var(--tabbar-h);
  --qcm-content-bottom-clearance: calc(var(--tabbar-h) + max(var(--safe-bottom), var(--qcm-safe-bottom, 0px)) + 16px);

  color-scheme: dark;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,244,194,0.55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 9%, rgba(255,244,194,0.45) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 64%, rgba(255,244,194,0.35) 0 1px, transparent 1.4px),
    radial-gradient(circle at 34% 78%, rgba(255,244,194,0.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 44%, rgba(255,244,194,0.3) 0 0.8px, transparent 1.3px),
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(127, 167, 232, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(245, 197, 66, 0.08), transparent 55%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--sb-header-h);
}
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, textarea, select { font-family: inherit; color: inherit; }
/* iOS Safari : jamais de zoom automatique au focus (16 px minimum). */
input, select, textarea { font-size: 16px !important; }
a { color: var(--color-info); }
ul { list-style: none; margin: 0; padding: 0; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.hidden, .sb-hidden { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

button, a, [role="button"], input[type="submit"], input[type="button"] {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
    box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
button:active, a:active, [role="button"]:active, input[type="submit"]:active,
input[type="button"]:active, .sb-is-pressed { transform: translateY(1px) scale(.985); }
[data-sb-busy="true"] { cursor: wait; opacity: .72; pointer-events: none; }
[data-sb-busy="true"]::after { content: ' · en cours'; font-size: .82em; }
.sb-form-status { margin: 2px 0 0; color: var(--color-primary); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button, a, [role="button"], input[type="submit"], input[type="button"] { transition: background-color .01ms, border-color .01ms, color .01ms, opacity .01ms; }
  button:active, a:active, [role="button"]:active, input[type="submit"]:active, input[type="button"]:active, .sb-is-pressed { transform: none; }
}

:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---- Icônes ---- */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

/* =========================================================================
   3. BARRE DE NAVIGATION COMMUNE (injectée par /js/sb-header.js)
   ========================================================================= */
.sb-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--sb-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  background: rgba(11, 16, 32, 0.88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
@media (prefers-reduced-motion: no-preference) {
  .sb-header { animation: sb-header-in .45s var(--ease-out); }
  @keyframes sb-header-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
.sb-header__brand {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1;
  color: var(--color-text); text-decoration: none;
}
.sb-header__brand b { color: var(--color-primary); font-weight: 900; }
.sb-header__brand svg { width: 22px; height: 22px; display: block; }
.sb-header__identity {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex-shrink: 1;
  padding: 5px 10px; border: 1px solid var(--color-line);
  border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-text-dim); font-size: 0.76rem; line-height: 1.15; white-space: nowrap;
  text-decoration: none;
}
.sb-header__identity[data-profile-link] { cursor: pointer; }
.sb-header__identity[data-profile-link]:hover { border-color: var(--color-primary-deep); color: var(--color-text); background: var(--color-surface-2); }
.sb-header__identity[data-profile-link]:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-color: var(--color-primary); }
.sb-header__identity-icon, .sb-header__identity-chevron { flex: 0 0 auto; display: block; }
.sb-header__identity-icon { width: 16px; height: 16px; color: var(--color-primary); }
.sb-header__identity-chevron { width: 13px; height: 13px; color: var(--color-text-faint); }
.sb-header__identity-icon svg, .sb-header__identity-chevron svg { width: 100%; height: 100%; }
.sb-header__identity-name { color: var(--color-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sb-header__identity-grade { color: var(--color-primary); }
.sb-header__identity--loading { color: var(--color-text-faint); }
.sb-header__links { display: flex; align-items: center; gap: 22px; min-width: 0; }
.sb-header__link { font-size: 0.88rem; color: var(--color-text-dim); text-decoration: none; white-space: nowrap; }
.sb-header__link:hover { color: var(--color-text); }
.sb-header__link--muted { font-size: 0.8rem; color: var(--color-text-faint); }
.sb-header__link--muted:hover { color: var(--color-text-dim); }
.sb-header__cta {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-primary-ink);
  border: 1px solid var(--color-primary-deep);
  font-size: 0.85rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.sb-header__cta:hover { background: var(--star); box-shadow: 0 6px 18px -6px var(--color-primary-glow); }
.sb-header__cta:active { transform: scale(.97); }
.sb-header__cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--color-primary-glow); }
.sb-header__logout {
  font-size: 0.85rem; color: var(--color-text-dim);
  background: none; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.sb-header__logout:hover { color: var(--color-text); border-color: var(--color-primary-deep); }
@media (max-width: 640px) {
  .sb-header { gap: 8px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .sb-header__brand { font-size: 1rem; gap: 7px; }
  .sb-header__brand svg { width: 19px; height: 19px; }
  .sb-header__identity { display: none; }
  .sb-header__links { gap: 6px; flex: 0 1 auto; justify-content: flex-end; }
  .sb-header__link--hide-sm { display: none !important; }
  .sb-header__link--training { display: inline-flex !important; align-items: center; }
  .sb-header__link--results { display: none !important; }
  .sb-header__cta { padding: 7px 12px; font-size: 0.8rem; flex-shrink: 0; }
  .sb-header__logout { padding: 6px 11px; font-size: 0.8rem; flex-shrink: 0; }
}
@media (max-width: 360px) {
  .sb-header__brand { font-size: 0.92rem; }
  .sb-header__cta { padding: 6px 10px; font-size: 0.76rem; }
  .sb-header__logout { padding: 5px 9px; font-size: 0.76rem; }
}

/* =========================================================================
   4. COQUILLE D'APP (accueil élève, page d'entraînement)
   ========================================================================= */
#app {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--qcm-content-bottom-clearance);
  position: relative;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--journey-content);
  margin-inline: auto;
  padding: var(--space-4) var(--journey-gutter) var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-2); }
.brand__mark { width: 34px; height: 34px; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.02; letter-spacing: -0.01em; }
.brand__word b { color: var(--color-primary); font-weight: 900; }

.stat-row { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.topbar__identity {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 11px; border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font-size: 0.82rem; font-weight: 700;
}
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  background: var(--color-surface-2); border: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.stat-chip .icon { width: 15px; height: 15px; }
.stat-chip--flame { color: var(--color-primary); }
.stat-chip--flame .icon { color: var(--orange); }
.stat-chip--stars { color: var(--color-text); }
.stat-chip--stars .icon { color: var(--color-primary); }
.stat-chip--trophy { color: var(--color-text-dim); }
.stat-chip--trophy .icon { color: var(--color-info); }

.skeleton-chip {
  width: 64px; height: 26px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-line) 37%, var(--color-surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.greeting { padding: 0 0 var(--space-2); }
.greeting h1 { font-size: 1.7rem; letter-spacing: -0.01em; line-height: 1.12; }
.greeting__rivalry { margin-top: var(--space-2); font-size: 16px; font-style: italic; color: var(--color-text-faint); }
.greeting__rivalry strong { color: var(--color-primary); font-style: normal; }

.positioning-hero {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  margin: var(--space-4) 0 var(--space-6); padding: var(--space-5); text-align: left;
  background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-primary-deep); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.2), 0 10px 28px -14px var(--color-primary-glow);
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.positioning-hero:hover, .positioning-hero:focus-visible { transform: translateY(-2px); border-color: var(--color-primary); background: var(--color-surface-2); }
.positioning-hero:active { transform: translateY(0px) scale(.99); }
.positioning-hero__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 48px; width: 48px; height: 48px;
  color: var(--color-primary-ink); background: var(--color-primary); border-radius: 50%;
}
.positioning-hero__icon .icon { width: 25px; height: 25px; }
.positioning-hero__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.positioning-hero__eyebrow { color: var(--color-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.positioning-hero__title { color: var(--color-text); font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.positioning-hero__description { color: var(--color-text-dim); font-size: 0.88rem; }
.positioning-hero__cta { margin-top: var(--space-2); color: var(--color-info); font-size: 0.82rem; font-weight: 800; }

/* Trait signature (séparateur/soulignement) */
.ink-stroke { width: 72px; height: 10px; margin-top: var(--space-2); color: var(--color-primary); overflow: visible; }
.ink-stroke path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw-stroke .7s var(--ease-out) forwards; }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }

/* ---- Vue principale ---- */
.view, #view {
  flex: 1;
  width: 100%;
  max-width: var(--journey-content);
  margin-inline: auto;
  padding: 0 var(--journey-gutter) var(--qcm-content-bottom-clearance);
  animation: view-in .35s var(--ease-out);
}
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Barre d'onglets (fixée en bas sur mobile) ---- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + max(var(--safe-bottom), var(--qcm-safe-bottom, 0px)));
  background: linear-gradient(0deg, var(--color-bg) 70%, rgba(11,16,32,0));
  z-index: 20;
}
.tabbar__inner {
  display: flex;
  gap: 4px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 4px;
  width: 100%;
  max-width: 560px;
}
.tabbar__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  color: var(--color-text-dim);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.tabbar__btn .icon { width: 18px; height: 18px; }
.tabbar__btn.is-active { background: var(--color-primary); color: var(--color-primary-ink); }

/* =========================================================================
   5. CARTES DE MATIÈRES ET CHAPITRES
   ========================================================================= */
.subjects-launcher { margin: var(--space-5) auto 0; }
.subjects-launcher__intro { margin-bottom: var(--space-5); }
.subjects-launcher__eyebrow { color: var(--color-primary); font-family: var(--font-mono); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.subjects-launcher h2 { margin: 6px 0 4px; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.12; }
.subjects-launcher p, .subject-page__heading p { margin: 0; color: var(--color-text-dim); font-size: 16px; line-height: 1.45; }
.subject-list { display: grid; gap: var(--space-3); }
.subject-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
  width: 100%; min-height: 92px; padding: 16px 48px 14px 18px; text-align: left;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-text);
}
.subject-card:hover, .subject-card:focus-visible { border-color: var(--color-primary-deep); background: var(--color-surface-2); }
.subject-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.subject-card__meta, .subject-card__stars { color: var(--color-text-dim); font-size: 16px; line-height: 1.35; }
.subject-card__meta { grid-column: 1; grid-row: 2; }
.subject-card__stars { grid-column: 2; grid-row: 2; white-space: nowrap; }
.subject-card__progress { grid-column: 1 / -1; grid-row: 3; display: block; height: 6px; margin-top: 5px; overflow: hidden; background: var(--color-line-strong); border-radius: 99px; }
.subject-card__progress span { display: block; height: 100%; width: var(--pct, 0%); background: var(--color-primary); border-radius: inherit; }
.subject-card__arrow { position: absolute; top: 50%; right: 16px; transform: translateY(-54%); color: var(--color-primary); font-size: 2rem; line-height: 1; }
.subject-page { margin: var(--space-5) auto 0; }
.subject-page__back { margin: 18px 0 22px; }
.subject-page__heading h1 { margin: 0 0 4px; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.12; }
.quiz-view-head { min-width: 0; margin: 8px 0 24px; }
.quiz-view-head h1 { width: 100%; max-width: 100%; min-width: 0; overflow: visible; overflow-wrap: anywhere; white-space: normal; line-height: 1.12; }
.subject-chapters { margin-top: 26px; }
.subject-chapters .objet-group:first-child { margin-top: 0; }
.matiere-group { margin-top: var(--space-7); }
.matiere-group:first-of-type { margin-top: var(--space-5); }
.matiere-group__head { padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-3); }
.matiere-group__title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--color-primary); }

.objet-group { margin-top: var(--space-6); }
.objet-group__head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.objet-group__eyebrow { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.05rem; color: var(--color-text); }
.objet-group__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-line-strong), transparent); }

.chapter-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.chapter-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%;
  padding: 18px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  animation-delay: var(--delay, 0ms);
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.chapter-card:hover, .chapter-card:focus-visible { transform: translateY(-2px); border-color: var(--color-line-strong); background: var(--color-surface-2); }
.chapter-card:active { transform: translateY(0px) scale(.99); }
.chapter-card--recommended { border-color: var(--color-primary-deep); box-shadow: 0 0 0 1px rgba(245,197,66,0.25), 0 0 24px -6px var(--color-primary-glow); }
.chapter-card__badge {
  position: absolute; top: -10px; left: var(--space-4);
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-primary-ink);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
}
.chapter-card__badge .icon { width: 11px; height: 11px; }
.chapter-card--locked { opacity: 0.55; cursor: default; }
.chapter-card--locked:hover, .chapter-card--locked:focus-visible { transform: none; border-color: var(--color-line); background: var(--color-surface); }
.chapter-card__badge--locked { background: var(--color-line-strong); color: var(--color-text); }
.chapter-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--color-text); padding-right: 20px; }
.chapter-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.chapter-card__attempts { font-size: 16px; color: var(--color-text-faint); }
.chapter-card__replay { font-size: 16px; color: var(--color-info); font-style: italic; }
@media (prefers-reduced-motion: no-preference) {
  .chapter-card.is-highlighted { animation: highlight-pulse 1.6s var(--ease-out); }
}
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,197,66,0.6); }
  60% { box-shadow: 0 0 0 14px rgba(245,197,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); }
}

/* ---- Étoiles ---- */
.star-row { display: inline-flex; gap: 3px; }
.star-row .icon { width: 18px; height: 18px; }
.star--filled { color: var(--color-primary); animation-delay: var(--delay, 0s); }
.star--empty { color: var(--color-line-strong); }

/* =========================================================================
   6. BOUTONS
   ========================================================================= */
.btn, .quiz-primary-btn, .quiz-retry-btn, .quiz-start-btn, .quiz-next-btn, .quiz-secondary-btn, .btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 800; font-size: 16px; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s var(--ease-spring), filter .15s var(--ease-out), opacity .15s, background .15s, border-color .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .quiz-start-btn:disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }
.btn--primary, .quiz-primary-btn, .quiz-retry-btn, .quiz-start-btn, .quiz-next-btn, .btn-primary {
  background: var(--color-primary); color: var(--color-primary-ink);
  border: 1px solid var(--color-primary-deep);
  box-shadow: 0 6px 18px -6px var(--color-primary-glow);
}
.btn--primary:hover, .quiz-primary-btn:hover, .quiz-retry-btn:hover, .quiz-start-btn:hover, .quiz-next-btn:hover, .btn-primary:hover { background: var(--star); }
.btn--secondary, .quiz-secondary-btn, .btn-ghost {
  background: var(--color-surface-2); border: 1px solid var(--color-line-strong); color: var(--color-text);
}
.btn--secondary:hover, .quiz-secondary-btn:hover, .btn-ghost:hover { background: var(--color-line); border-color: var(--color-primary-deep); }
.btn--ghost { background: transparent; color: var(--color-text-dim); padding: 10px 14px; }
.btn--ghost:hover { color: var(--color-text); }
.btn--danger { background: transparent; border: 1px solid var(--color-danger); color: var(--color-danger); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-line);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-primary-deep); }
.icon-btn .icon { width: 1.1rem; height: 1.1rem; }
.back-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-surface-2);
  color: var(--color-text-dim); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.25; text-decoration: none; cursor: pointer;
}
.back-link:hover { color: var(--color-text); background: var(--color-line); }

/* =========================================================================
   7. PROGRESSION, ÉTATS, TOAST
   ========================================================================= */
.progress-block { margin-top: var(--space-5); }
.progress-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.progress-block__title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.05rem; }
.progress-block__frac { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-dim); }
.progress-bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-line); overflow: hidden; margin-bottom: var(--space-3); }
.progress-bar__fill { height: 100%; width: var(--pct, 0%); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-primary-deep), var(--color-primary)); transition: width .6s var(--ease-out); }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 4px; border-bottom: 1px solid var(--color-surface-2); }
.progress-row:last-child { border-bottom: none; }
.progress-row__title { font-size: 0.92rem; color: var(--color-text); }
.progress-row__attempts { font-size: 0.72rem; color: var(--color-text-faint); display: block; margin-top: 2px; }
.progress-row__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.progress-row .star-row .icon { width: 14px; height: 14px; }

.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-faint); line-height: 1.6; }
.ink-dots { display: flex; gap: 8px; }
.ink-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); animation: ink-pulse 1.1s ease-in-out infinite; }
.ink-dots span:nth-child(2) { animation-delay: .15s; }
.ink-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ink-pulse { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.empty-state, .error-state {
  padding: 28px 20px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  color: var(--color-text); font-size: 16px; text-align: center; line-height: 1.6;
}
.error-state .btn, .error-state .quiz-primary-btn, .error-state .quiz-retry-btn { margin-top: var(--space-4); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px + var(--safe-bottom));
  transform: translateX(-50%);
  background: var(--color-surface-2); border: 1px solid var(--color-line-strong); color: var(--color-text);
  padding: 10px 18px; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 600; z-index: 60;
  animation: banner-in .25s var(--ease-out); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.tabswitch-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-line-strong);
  font-size: 0.84rem; color: var(--color-text-dim);
}
.tabswitch-banner .icon { width: 17px; height: 17px; color: var(--color-info); flex-shrink: 0; margin-top: 1px; }

/* ---- Résultats de session (accueil élève) ---- */
.results-hero { text-align: center; padding: var(--space-6) 0 var(--space-5); position: relative; }
.results-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--space-4); }
.results-stars .icon { width: 40px; height: 40px; }
.results-stars .star--filled { transform: scale(0); animation: star-pop .5s var(--ease-spring) forwards; animation-delay: var(--delay, 0s); }
@media (prefers-reduced-motion: reduce) { .results-stars .star--filled { transform: none; animation: none; } }
@keyframes star-pop { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0deg); } }
.results-headline { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-bottom: var(--space-2); }
.results-best { font-size: 0.88rem; color: var(--color-text-faint); }
.results-streak { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-primary); }
.feedback-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.feedback-item { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-line); }
.feedback-item__icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.feedback-item__icon .icon { width: 13px; height: 13px; }
.feedback-item--correct .feedback-item__icon { background: rgba(111,207,151,0.2); color: var(--color-success); }
.feedback-item--incorrect .feedback-item__icon { background: rgba(224,87,76,0.2); color: var(--color-danger); }
.feedback-item--neutral .feedback-item__icon { background: rgba(127,167,232,0.2); color: var(--color-info); }
.feedback-item__body { flex: 1; }
.feedback-item__q { display: block; font-size: 0.82rem; color: var(--color-text-dim); margin-bottom: 4px; }
.feedback-item__note { display: block; font-size: 0.86rem; color: var(--color-text); line-height: 1.4; }
.feedback-item__answer { display: block; font-size: 0.86rem; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.confetti-piece { position: absolute; top: -10px; left: var(--x, 50%); width: 7px; height: 12px; background: var(--c, var(--color-primary)); border-radius: 2px; opacity: 0; animation: confetti-fall 1.8s ease-in forwards; animation-delay: var(--delay, 0s); }
@keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(220px) rotate(var(--rot, 220deg)); } }
@media (prefers-reduced-motion: reduce) { .confetti-piece { display: none; } }

/* ---- Widget hebdomadaire (accueil) ---- */
.weekly-widget { margin-top: 20px; }
.weekly-streak-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.weekly-chart { display: flex; align-items: stretch; gap: 10px; height: 140px; margin: 18px 0 14px; }
.weekly-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.weekly-chart__value { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-dim); }
.weekly-chart__track { width: 100%; max-width: 30px; flex: 1; display: flex; align-items: flex-end; background: var(--color-surface-2); border-radius: 12px; overflow: hidden; }
.weekly-chart__bar { display: block; width: 100%; height: var(--pct, 0%); background: linear-gradient(180deg, var(--color-primary), var(--color-primary-deep)); border-radius: 12px 12px 6px 6px; min-height: 0; opacity: 0.9; transition: height 0.4s ease; }
.weekly-chart__col.is-current .weekly-chart__track { background: rgba(245, 197, 66, 0.12); }
.weekly-chart__col.is-current .weekly-chart__bar { background: var(--color-primary); opacity: 1; }
.weekly-chart__label { font-size: 11px; color: var(--color-text-dim); white-space: nowrap; }
.weekly-chart__col.is-current .weekly-chart__label { color: var(--color-primary); font-weight: 700; }
.weekly-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.weekly-total { background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: 14px; padding: 12px 10px; text-align: center; }
.weekly-total__label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 6px; }
.weekly-total__value { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--color-text); }
.weekly-widget__hint { margin-top: 12px; font-size: 12px; color: var(--color-text-dim); }

/* =========================================================================
   8. GAMIFICATION : rangs, XP, série, passage de rang
   ========================================================================= */
.rank-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-line); }
.rank-badge__icon { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rank-badge__icon svg { width: 100%; height: 100%; }
.rank-badge__label { display: flex; flex-direction: column; line-height: 1.15; }
.rank-badge__eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.rank-badge__name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--color-text); }
.rank-badge[data-rank="cadet"] { border-color: var(--color-line-strong); }
.rank-badge[data-rank="cadet"] .rank-badge__icon { color: var(--color-text-dim); }
.rank-badge[data-rank="pilote"] { border-color: var(--color-info); }
.rank-badge[data-rank="pilote"] .rank-badge__icon { color: var(--color-info); }
.rank-badge[data-rank="pilote-chevronne"] { border-color: var(--color-text-dim); }
.rank-badge[data-rank="pilote-chevronne"] .rank-badge__icon { color: var(--color-text); }
.rank-badge[data-rank="commandant"] { border-color: var(--color-primary); }
.rank-badge[data-rank="commandant"] .rank-badge__icon { color: var(--color-primary); }
.rank-badge[data-rank="amiral"] { border-color: var(--color-success); }
.rank-badge[data-rank="amiral"] .rank-badge__icon { color: var(--color-success); }
.rank-badge[data-rank="champion-galactique"] { border-color: var(--nebula); box-shadow: 0 0 0 1px var(--amethyste-glow); }
.rank-badge[data-rank="champion-galactique"] .rank-badge__icon { color: var(--nebula); }
.rank-badge[data-rank="champion-galactique"] .rank-badge__name { color: var(--nebula); }

.xp-bar { display: flex; flex-direction: column; gap: 6px; }
.xp-bar__row { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-faint); }
.xp-bar__current { color: var(--color-primary); font-weight: 700; }
.xp-bar__track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line); overflow: hidden; }
.xp-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-primary-deep), var(--color-primary)); transition: width 0.6s var(--ease-out); }
.xp-bar__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255,244,194,0.45) 50%, transparent 60%); background-size: 220% 100%; animation: xp-sheen 2.6s ease-in-out infinite; }
@keyframes xp-sheen { 0% { background-position: 140% 0; } 60%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .xp-bar__fill::after { animation: none; } }
.xp-bar.is-gaining .xp-bar__track { box-shadow: 0 0 0 3px var(--color-primary-glow); }
@media (prefers-reduced-motion: no-preference) { .xp-bar.is-gaining .xp-bar__fill { animation: xp-flash 0.5s var(--ease-spring); } }
@keyframes xp-flash { 0% { filter: brightness(1); } 40% { filter: brightness(1.5); } 100% { filter: brightness(1); } }

.streak-flame { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-primary); }
.streak-flame__icon { width: 18px; height: 18px; flex-shrink: 0; }
.streak-flame__count { font-weight: 700; }
.streak-flame[data-state="at-risk"] { color: var(--color-danger); }
.streak-flame[data-state="off"] { color: var(--color-text-faint); }
@media (prefers-reduced-motion: no-preference) { .streak-flame[data-state="active"] .streak-flame__icon { animation: flame-flicker 2.4s ease-in-out infinite; } }
@keyframes flame-flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.06) rotate(-2deg); } 50% { transform: scale(0.97) rotate(1deg); } 75% { transform: scale(1.03) rotate(-1deg); } }

.speed-bonus { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: var(--radius-pill); background: rgba(245, 197, 66, 0.16); color: var(--color-primary); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; opacity: 0; transform: translateY(4px) scale(0.9); }
.speed-bonus.is-visible { animation: speed-bonus-in 0.45s var(--ease-spring) forwards; }
@keyframes speed-bonus-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.speed-bonus__icon { width: 13px; height: 13px; }

.weekly-compare { display: flex; flex-direction: column; gap: var(--space-3); }
.weekly-compare__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-text); }
.weekly-compare__rows { display: flex; flex-direction: column; gap: 10px; }
.weekly-compare__row { display: flex; align-items: center; gap: 12px; }
.weekly-compare__row-label { width: 108px; flex-shrink: 0; font-size: 0.78rem; color: var(--color-text-faint); }
.weekly-compare__row-track { position: relative; flex: 1; height: 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line); overflow: hidden; }
.weekly-compare__row-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: var(--radius-pill); transition: width 0.7s var(--ease-out); }
.weekly-compare__row--current .weekly-compare__row-fill { background: var(--color-primary); }
.weekly-compare__row--previous .weekly-compare__row-fill { background: var(--color-line-strong); }
.weekly-compare__row-value { width: 64px; flex-shrink: 0; text-align: right; font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-dim); }
.weekly-compare__delta { align-self: flex-start; font-family: var(--font-mono); font-size: 0.78rem; padding: 4px 10px; border-radius: var(--radius-pill); }
.weekly-compare__delta[data-trend="up"] { color: var(--color-success); background: rgba(111,207,151,0.14); }
.weekly-compare__delta[data-trend="down"], .weekly-compare__delta[data-trend="flat"] { color: var(--color-text-faint); background: var(--color-surface-2); }


.levelup-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(11, 16, 32, 0.92); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; }
.levelup-overlay.is-active { opacity: 1; pointer-events: auto; animation: levelup-veil-in 0.4s var(--ease-out) forwards; }
@keyframes levelup-veil-in { from { opacity: 0; } to { opacity: 1; } }
.levelup-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; transform: scale(0.85); opacity: 0; }
.levelup-overlay.is-active .levelup-card { animation: levelup-card-in 0.6s 0.15s var(--ease-spring) forwards; }
@keyframes levelup-card-in { to { transform: scale(1); opacity: 1; } }
.levelup-seal { width: 128px; height: 128px; position: relative; }
.levelup-seal svg { width: 100%; height: 100%; }
.levelup-overlay.is-active .levelup-seal { animation: seal-stamp 0.5s 0.5s var(--ease-out) backwards; }
@keyframes seal-stamp { 0% { transform: translateY(-40px) scale(1.4) rotate(-8deg); opacity: 0; } 70% { transform: translateY(4px) scale(0.94) rotate(1deg); opacity: 1; } 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; } }
.levelup-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); }
.levelup-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--color-text); }
.levelup-overlay[data-rank="champion-galactique"] .levelup-title { color: var(--nebula); }
.levelup-overlay[data-rank="commandant"] .levelup-title, .levelup-overlay[data-rank="amiral"] .levelup-title { color: var(--color-primary); }
.levelup-dismiss { margin-top: var(--space-2); padding: 10px 22px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); background: var(--color-surface-2); color: var(--color-text); font-size: 0.85rem; cursor: pointer; }
.levelup-dismiss:hover { border-color: var(--color-primary-deep); }
@media (prefers-reduced-motion: reduce) {
  .levelup-overlay.is-active, .levelup-overlay.is-active .levelup-card, .levelup-overlay.is-active .levelup-seal { animation: none; opacity: 1; transform: none; }
}

/* =========================================================================
   9. PAGE D'ENTRAÎNEMENT (quiz.html) : bandeau, listes de matières et thèmes
   ========================================================================= */
/* Bandeau rang / XP / série. La barre d'XP porte deux libellés (« 1195 XP »
   et « prochain rang : 2200 XP ») : ils ne se coupent jamais et gardent un
   espace entre eux ; sur téléphone, rang et série sur une ligne, la barre
   d'XP seule sur la ligne suivante. */
.quiz-topbar-right { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px 14px; overflow-x: auto; scrollbar-width: none; }
.quiz-topbar-right::-webkit-scrollbar { display: none; }
.quiz-topbar-item { display: flex; align-items: center; justify-content: center; min-width: 0; }
.quiz-topbar-xp { width: 230px; }
.quiz-topbar-xp .xp-bar { width: 100%; }
.xp-bar__row { gap: 12px; }
.xp-bar__row > span { white-space: nowrap; }
@media (max-width: 520px) {
  .quiz-topbar-right { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 6px 12px; }
  .quiz-topbar-xp { flex: 1 1 100%; width: auto; max-width: 340px; order: 3; }
}
.quiz-view-head h1, .quiz-progression h1 { font-size: 1.9rem; line-height: 1.12; margin: 0 0 8px; color: var(--color-text); }
.quiz-view-subtitle, .quiz-theme-code, .quiz-topstrip-title { font-size: 16px; line-height: 1.5; }
.quiz-view-subtitle { margin: .25rem 0 0; color: var(--color-text-dim); }
.quiz-theme-group { margin-top: 2.5rem; }
.quiz-theme-group:first-child { margin-top: 0; }
.quiz-theme-trimester { margin: 0 0 .75rem; }
.quiz-subject-label { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-primary); margin: 0 0 var(--space-3); }
.quiz-subject-grid, .quiz-theme-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.quiz-subject-card, .quiz-theme-card {
  display: block; width: 100%; min-height: 76px; padding: 16px 18px; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-text); border-radius: 14px;
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out);
}
.quiz-subject-card:hover, .quiz-theme-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.quiz-theme-card--locked { opacity: .55; cursor: default; }
.quiz-theme-card--locked:hover { border-color: var(--color-line); transform: none; }
.quiz-subject-card__title, .quiz-theme-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.22; margin-bottom: .35rem; }
.quiz-subject-card__meta, .quiz-theme-code { display: block; color: var(--color-text-dim); font-size: 16px; line-height: 1.4; }
.quiz-subject-back { margin-bottom: var(--space-4); }
.quiz-detail-topstrip, .quiz-topstrip { display: flex; align-items: center; gap: .65rem; margin-bottom: 20px; min-height: 2.5rem; }
.quiz-topstrip-title { font-weight: 600; color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-detail-body { display: flex; flex-direction: column; gap: 20px; }
.quiz-start-hint { margin: 0; padding: 16px; border: 1px solid var(--color-primary-deep); border-radius: 14px; background: rgba(245,197,66,.08); line-height: 1.5; color: var(--color-text); font-size: 16px; }
.quiz-start-hint strong { display: block; margin-bottom: 6px; color: var(--color-primary); font-size: 16px; }
.quiz-start-hint p { margin: 0; color: var(--color-text); }
.quiz-timer-wrap { position: relative; margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.quiz-timer, .timer { font-family: var(--font-mono); color: var(--color-text); background: var(--color-surface-2); padding: .2rem .55rem; border-radius: var(--radius-pill); font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.timer .icon { width: 18px; height: 18px; color: var(--color-info); }
.timer.is-low { color: var(--color-danger); }
.timer.is-low .icon { color: var(--color-danger); }
@media (prefers-reduced-motion: no-preference) { .timer.is-low { animation: timer-pulse 1s ease-in-out infinite; } }
@keyframes timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.quiz-progression { display: flex; flex-direction: column; gap: var(--space-5); }

/* Accueil élève : intro de chapitre, session d'exercice (hors contenu) */
.intro-eyebrow { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-info); margin-bottom: var(--space-2); }
.intro-title { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.12; margin-bottom: var(--space-3); }
.timed-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-primary-deep); color: var(--color-primary); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; margin-bottom: var(--space-4); }
.timed-badge .icon { width: 14px; height: 14px; }
.intro-text { font-size: 16px; color: var(--color-text-dim); line-height: 1.6; margin-bottom: var(--space-5); }
.exercise-topstrip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 var(--space-3); position: sticky; top: var(--sb-header-h); background: var(--color-bg); z-index: 10; }
.topstrip-spacer { display: inline-block; width: 38px; }
.dot-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: var(--space-5); flex-wrap: wrap; }
.dot-progress__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); border: none; transition: all .2s var(--ease-out); }
.dot-progress__dot.is-answered { background: var(--color-success); }
.dot-progress__dot.is-current { width: 22px; border-radius: var(--radius-pill); background: var(--color-primary); }
.exercise-nav { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.exercise-nav .btn--secondary { flex: 0 0 auto; }
.exercise-nav .btn--primary { flex: 1; }

/* =========================================================================
   10. FORMULAIRES ET PAGES D'AUTHENTIFICATION (body.page-auth)
   ========================================================================= */
.page-auth { display: flex; flex-direction: column; align-items: center; padding: calc(var(--sb-header-h) + 16px) 16px 32px; }
.page-auth main { width: 100%; max-width: 420px; }
.page-auth main.is-wide { max-width: 620px; }
.page-auth main.is-xwide { max-width: 760px; }
.page-auth h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; margin: 22px 0 24px; color: var(--color-text); }
.page-auth h2 { font-style: italic; font-weight: 700; color: var(--color-primary); font-size: 1.25rem; margin: 0 0 18px; }
.page-auth form { display: flex; flex-direction: column; gap: 12px; }
.page-auth label { display: grid; gap: 7px; font-size: 16px; color: var(--color-text); }
.page-auth input, .page-auth select, .page-auth textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--color-line); background: var(--night-950); color: var(--color-text);
}
.page-auth textarea { min-height: 90px; font-family: var(--font-mono); }
.page-auth select { display: block; }
.page-auth input.code-input { min-height: 48px; }
.page-auth input.code-input[inputmode="numeric"] { letter-spacing: .18em; }
.page-auth input::placeholder { color: var(--color-text-faint); }
.page-auth input:focus, .page-auth select:focus, .page-auth textarea:focus { border-color: var(--color-primary); }
.page-auth main button, .page-auth main a.secondary, .page-auth main a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 16px; border: 1px solid var(--color-primary-deep); border-radius: 10px;
  background: var(--color-primary); color: var(--color-primary-ink); font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.page-auth main button:hover { background: var(--star); box-shadow: 0 6px 18px -6px var(--color-primary-glow); }
.page-auth main button:active { transform: translateY(1px); }
.page-auth main button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.page-auth main button.secondary, .page-auth main a.secondary, .page-auth main a.button { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-line-strong); }
.page-auth main button.secondary:hover, .page-auth main a.secondary:hover { background: var(--color-line); box-shadow: none; }
.page-auth main button.danger { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
.page-auth main button.danger:hover { background: rgba(224,87,76,.12); box-shadow: none; }
.page-auth code { font-family: var(--font-mono); color: var(--color-primary); word-break: break-all; }
.page-auth .msg { margin-top: 12px; font-size: 16px; min-height: 1.2em; }
.page-auth .msg.err, .page-auth .msg.error, .page-auth .field-status.error { color: #f0938b; }
.page-auth .msg.ok, .page-auth .field-status.ok { color: var(--color-success); }
.page-auth .links { margin-top: 20px; font-size: 16px; line-height: 1.55; color: var(--color-text-faint); }
.page-auth .links a { color: var(--color-info); }
.page-auth .card { margin-top: 24px; padding: 20px 16px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-line); transition: border-color .18s var(--ease-out); }
.page-auth .card:focus-within { border-color: var(--color-line-strong); }
.page-auth .card > p:first-of-type { margin-top: 0; }
.page-auth .card form + form, .page-auth .card form + .hidden { margin-top: 18px; }
.page-auth .notice { background: var(--color-surface-2); border: 1px solid var(--color-primary-deep); border-left: 4px solid var(--color-primary); border-radius: 10px; padding: 16px; margin: 20px 0; color: var(--color-text); font-size: 16px; }
.page-auth .notice strong { color: var(--color-primary); }
.page-auth .step-help { margin: 2px 0 0; color: var(--color-primary); font-size: .92rem; }
.page-auth .field-status { margin: 2px 0 0; font-size: .92rem; min-height: 1.35em; }
.page-auth .action-condition, .page-auth .muted { margin: 2px 0 0; color: var(--color-text-dim); font-size: .92rem; }
.page-auth img.qr { display: block; margin: 8px 0; background: #fff; padding: 8px; border-radius: 8px; }
.page-auth ol li { margin-bottom: 12px; line-height: 1.5; }
.page-auth p, .page-auth li { color: var(--color-text-dim); }
.page-auth p strong { color: var(--color-text); }
@media (prefers-reduced-motion: no-preference) {
  .page-auth main { animation: sb-rise-in .4s var(--ease-out); }
  @keyframes sb-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .page-auth main button:active, .page-auth a:active { transform: none; } }
@media (orientation: landscape) { .page-auth main { max-width: 520px; } .page-auth h1 { margin-top: 16px; } }

/* Boutons de connexion sociale : couleurs officielles des marques */
.oauth-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 11px 16px; border-radius: 10px; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.oauth-btn svg { flex-shrink: 0; }
.page-auth .oauth-btn-google, .oauth-btn-google { background: #ffffff; color: #1f1f1f; border-color: #dadce0; }
.page-auth .oauth-btn-google:hover, .oauth-btn-google:hover { background: #f8f9fa; box-shadow: none; }
.page-auth .oauth-btn-facebook, .oauth-btn-facebook { background: #1877F2; color: #ffffff; }
.page-auth .oauth-btn-facebook:hover, .oauth-btn-facebook:hover { background: #166fe5; box-shadow: none; }
.page-auth .oauth-btn-passkey, .oauth-btn-passkey { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-primary-deep); }
.page-auth .oauth-btn-passkey:hover, .oauth-btn-passkey:hover { background: var(--color-line); border-color: var(--color-primary); box-shadow: none; }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--color-text-faint); font-size: 16px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }

/* Page de choix de connexion */
.page-auth .choice { display: flex; width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--radius-md); align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 800; }
.page-auth .choice--student { background: var(--color-primary); color: var(--color-primary-ink); }
.page-auth .choice--parent { background: var(--color-surface-2); border: 1px solid var(--color-line-strong); color: var(--color-text); }

/* Parcours d'inscription Pronote */
.page-auth .child { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-surface-2); }
.page-auth .child:last-child { border-bottom: 0; }
.page-auth .child input { margin-top: 4px; width: auto; min-height: 0; }
.page-auth .child-name { display: block; font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.page-auth .child-meta { display: block; margin-top: 4px; color: var(--color-text-dim); }
.page-auth .child-status { display: block; margin-top: 9px; color: var(--color-primary); }
.page-auth .child-status.ok { color: var(--color-success); }
.page-auth #payment-next { width: 100%; }
.page-auth #payment-link { display: block; margin-top: 14px; text-align: center; }
.journey { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }
.journey-step { padding: 6px 10px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-text-faint); font-size: .85rem; }
.journey-step.current { border-color: var(--color-primary); color: var(--color-primary); }
.journey-step.done { border-color: var(--color-success); color: var(--color-success); }
.page-auth.page-onboarding button { margin-top: 12px; }
.page-auth.page-onboarding select { margin-top: 8px; }
.page-auth.page-onboarding .card { margin: 10px 0; }
.page-auth #qr-media-step, .page-auth #qr-pin-step, .page-auth #qr-action-step { margin-top: 14px; }

/* Espace élève (réglages) */
.profile-intro { color: var(--color-text-dim); margin-top: -8px; }
.profile-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-info div { padding: 12px; border-radius: var(--radius-sm); background: var(--night-950); }
.profile-info dt { color: var(--color-text-faint); font-size: .82rem; }
.profile-info dd { margin: 3px 0 0; font-weight: 700; }
.device-list { display: grid; gap: 12px; margin-top: 18px; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--night-950); }
.device-details { min-width: 0; }
.device-label { display: block; font-weight: 700; color: var(--color-text); }
.device-meta { display: block; color: var(--color-text-faint); font-size: .82rem; margin-top: 3px; }
.device-current { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--radius-sm); color: var(--color-success); border: 1px solid var(--color-success); font-size: .75rem; font-weight: 600; }
.device-row button { flex: 0 0 auto; padding: 8px 10px; font-size: .9rem; }
.recovery-warning { color: var(--star); }
@media (max-width: 500px) { .profile-info { grid-template-columns: 1fr; } .device-row { align-items: flex-start; flex-direction: column; } }

/* Espace parent (tableau de bord) */
.page-auth #referral p { margin: 0 0 18px; color: var(--color-text); }
.page-auth #referral strong { color: var(--color-primary); }
.page-auth code.ref { font-size: 1.1rem; font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-primary-deep); color: var(--color-primary); padding: 4px 12px; border-radius: var(--radius-sm); }
.page-auth #qr img { display: block; margin: 8px 0; border-radius: var(--radius-sm); background: var(--cream); padding: 8px; }
.page-auth #ref-link { word-break: break-all; }
.profile-fields { display: grid; gap: 14px; margin: 0; }
.profile-field { display: grid; gap: 5px; padding-bottom: 13px; border-bottom: 1px solid var(--color-line); }
.profile-field:last-child { padding-bottom: 0; border-bottom: 0; }
.profile-field dt { color: var(--color-text-faint); font-size: 16px; }
.profile-field dd { display: grid; gap: 7px; margin: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.profile-state { display: inline-flex; align-items: center; gap: 7px; color: var(--color-success); font-weight: 700; }
.profile-state::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.profile-state.is-pending { color: var(--color-primary); }
.action-block { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-line); }
.action-block p { margin: 0; color: var(--color-text-dim); }
.action-block button { width: 100%; }
.action-block button.secondary { justify-self: start; width: auto; }
.child-row { padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.child-row:last-child { border-bottom: 0; }
.child-row > p:first-child { margin-top: 0; }
.child-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.child-actions button { margin: 0; }
.child-name { font-size: 18px; font-weight: 700; color: var(--color-text); margin-bottom: 5px; }
.child-meta, .child-subscription-state { margin: 0 0 8px; color: var(--color-text-dim); font-size: 16px; }
.child-meta strong, .child-subscription-state strong { color: var(--color-primary); }
.device-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--color-line-strong); border-radius: 12px; background: var(--color-surface); }
.device-card h3 { margin: 0; color: var(--color-text); font-size: 18px; }
.device-card .device-meta { display: grid; gap: 5px; margin: 0; color: var(--color-text-dim); font-size: 16px; }
.device-card .device-meta dt { color: var(--color-text-faint); }
.device-card .device-meta dd { margin: 0; }
.device-card button { width: 100%; }
.school-history { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-text-dim); font-size: .9rem; }
.school-history summary { cursor: pointer; color: var(--color-primary); font-weight: 700; }
.school-history p { margin: 8px 0 0; }
.pronote-week { margin-top: 14px; display: grid; gap: 10px; }
.pronote-day { padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.pronote-day h3 { margin: 0 0 8px; font-size: 16px; color: var(--color-primary); }
.pronote-item { margin: 8px 0; color: var(--color-text-dim); font-size: 16px; }
.dashboard-tabs {
  position: sticky; top: var(--sb-header-h); z-index: 40;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 12px; margin: 0 0 24px;
  background: var(--color-bg); border-bottom: 1px solid var(--color-line);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dashboard-tabs::-webkit-scrollbar { display: none; }
.page-auth .dashboard-tab {
  flex: 0 0 auto; min-height: 0; font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-text-dim); cursor: pointer;
}
.page-auth .dashboard-tab:hover { color: var(--color-text); border-color: var(--color-primary-deep); background: var(--color-surface); box-shadow: none; }
.page-auth .dashboard-tab:active { transform: scale(.97); }
.page-auth .dashboard-tab.is-active { background: var(--color-primary); border-color: var(--color-primary-deep); color: var(--color-primary-ink); box-shadow: 0 6px 18px -6px var(--color-primary-glow); }
[data-tab-panel] { display: none !important; }
[data-tab-panel].is-active { display: block !important; animation: sb-dashboard-panel-in .22s var(--ease-out); }
@keyframes sb-dashboard-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-auth #profile-card form { margin-top: 0; }
.page-auth #totp-setup, .page-auth #totp-lost-actions, .page-auth #recovery-box { margin-top: 22px; }
.page-auth #totp-setup form, .page-auth #totp-lost-actions form { margin-top: 18px; }
.page-auth #totp-setup p, .page-auth #totp-lost-actions p, .page-auth #recovery-box p { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { [data-tab-panel].is-active { animation: none; } }
@media (max-width: 640px) { .dashboard-tabs { gap: 6px; padding-top: 8px; padding-bottom: 10px; } .page-auth .dashboard-tab { padding: 10px 12px; } }
@media (min-width: 641px) {
  .device-card { grid-template-columns: 1fr auto; align-items: center; }
  .device-card button { width: auto; min-width: 112px; }
  .page-auth .card { padding: 24px; }
  .child-actions button { width: auto; }
}

/* Profil élève (profile.html) */
.student-profile-page { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.student-profile-page h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3rem); }
.student-profile-page h2 { margin: 0 0 16px; font-size: 1.45rem; }
.student-profile-lead { color: var(--color-text-dim); margin-bottom: 24px; }
.student-profile-card { margin: 20px 0; padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.student-profile-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.student-profile-info div { padding: 13px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--night-950); }
.student-profile-info dt { color: var(--color-text-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.student-profile-info dd { margin: 3px 0 0; color: var(--color-text); font-weight: 700; }
.student-device-list { display: grid; gap: 10px; }
.student-device { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--night-950); }
.student-device__name { color: var(--color-text); font-weight: 700; }
.student-device__meta { margin-top: 4px; color: var(--color-text-dim); font-size: .82rem; }
.student-device__current { display: inline-block; margin-left: 7px; padding: 3px 8px; border-radius: var(--radius-pill); color: var(--color-primary-ink); background: var(--color-primary); font-size: .72rem; font-weight: 800; }
.student-device .btn { flex: 0 0 auto; }
.student-profile-message { color: var(--color-text-dim); }
.student-profile-message.is-error { color: #f0938b; }
@media (max-width: 560px) { .student-profile-info { grid-template-columns: 1fr; } .student-device { align-items: flex-start; flex-direction: column; } .student-device .btn { width: 100%; } }

/* Journal de classe, position de l'élève, résultats et plan de la semaine (accueil élève) */
.journal-entry-card, .journal-result, .journal-entry { margin: 24px 0; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.pupil-position-card { margin: 18px 0; padding: 20px; border: 1px solid rgba(245, 197, 66, .35); border-radius: 16px; background: var(--color-surface); }
.pupil-position-card h2 { margin: 5px 0 8px; }
.pupil-position-card p { color: var(--color-text-dim); line-height: 1.6; }
.pupil-position-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.journal-help { position: relative; margin: 14px 0; padding: 18px 42px 18px 18px; border: 1px solid rgba(245, 197, 66, .45); border-radius: 14px; background: rgba(245, 197, 66, .08); }
.journal-help h2 { margin-top: 0; }
.journal-help p { line-height: 1.55; }
.journal-help a { color: var(--color-primary); }
.journal-help__close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--color-text); font-size: 1.4rem; cursor: pointer; }
.journal-entry-card { display: grid; gap: 10px; }
.journal-subject-confirm { margin: 16px 0; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--night-950); }
.journal-subject-confirm h2 { margin: 0 0 8px; }
.journal-entry-card h2, .journal-page h1 { margin: 4px 0 8px; }
.journal-entry-card p, .journal-lead, .journal-muted { color: var(--color-text-dim); line-height: 1.6; }
.journal-entry-card__eyebrow, .journal-status, .journal-subject { color: var(--color-primary); font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.journal-page { max-width: 760px; margin: 0 auto; padding-top: 24px; }
.journal-filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; margin: 18px 0; }
.journal-filters label { color: var(--color-text-dim); font-size: .85rem; }
.journal-filters select, .journal-filters input { margin-bottom: 0; }
.journal-page select, .journal-page input[type="date"], .journal-page textarea { width: 100%; margin: 6px 0 16px; padding: 12px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--night-950); color: var(--color-text); font: inherit; }
.field-label { display: block; color: var(--color-text); font-weight: 700; }
.voice-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voice-controls [data-voice-status] { color: var(--color-primary); font-size: .85rem; }
.voice-text-input.is-recording textarea { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-glow); }
.voice-text-input.is-recording [data-voice-start] { animation: journal-pulse 1.2s infinite; }
@keyframes journal-pulse { 50% { opacity: .5; } }
.journal-submit { margin: 8px 0; }
.journal-match { display: grid; gap: 7px; margin: 12px 0; padding: 14px; border-left: 3px solid var(--color-primary); background: var(--color-surface-2); }
.journal-match strong { color: var(--color-text); }
.journal-badge, .journal-practice { color: var(--color-primary); font-size: .82rem; }
.journal-pick { display: block; padding: 9px; color: var(--color-text-dim); }
.journal-coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.journal-coverage > div { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.journal-coverage strong { font: 800 1.8rem var(--font-display); color: var(--color-primary); }
.journal-coverage span { color: var(--color-text-dim); font-size: .88rem; }
.journal-entry time { color: var(--color-text-dim); font-family: var(--font-mono); font-size: .8rem; }
.journal-state-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; color: var(--color-text-dim); font-size: .8rem; }
.journal-state-row span { padding: 4px 7px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); }
@media (max-width: 520px) { .journal-coverage { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .journal-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .journal-subject-confirm { padding: 12px; } .journal-subject-confirm .btn { width: 100%; } }

.results-area { max-width: 760px; margin: 0 auto; padding: 24px 0 var(--qcm-content-bottom-clearance); }
.results-lead, .results-empty { color: var(--color-text-dim); font-size: 1rem; line-height: 1.5; }
.results-list { display: grid; gap: 14px; margin-top: 22px; }
.result-card { padding: 18px; border: 1px solid var(--color-line); border-left: 5px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-surface); }
.result-card--corrected { border-left-color: var(--color-success); }
.result-card--deferred { border-left-color: var(--color-danger); }
.result-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.result-card h2 { margin: 0; font-size: 1.15rem; }
.result-card time { color: var(--color-text-faint); font-size: .9rem; }
.result-card p { line-height: 1.5; }
.result-card__state { color: var(--color-primary); }
.result-card--corrected .result-card__state { color: var(--color-success); }
.result-card--deferred .result-card__state { color: #f0938b; }
.result-card__score { margin-top: 8px; }
.result-card__partial { color: var(--color-primary); font-weight: 700; }
.results-badge, .sb-results-badge { display: inline-flex; min-width: 20px; height: 20px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-danger); color: white; font-size: .78rem; font-weight: 800; vertical-align: middle; }
@media (max-width: 640px) { .result-card__top { display: block; } .result-card time { display: block; margin-top: 5px; } }
.week-plan { display: grid; gap: 12px; margin: 20px 0; padding: 20px; border: 1px solid rgba(245, 197, 66, .45); border-radius: 14px; background: rgba(245, 197, 66, .08); }
.week-plan h2 { margin: 0; }
.week-plan > p { margin: 0; color: var(--color-text-dim); line-height: 1.5; }
.week-plan__item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-line); }
.week-plan__item strong, .week-plan__item p { display: block; margin: 4px 0 0; }
.week-plan__item p { color: var(--color-text-dim); }
.week-plan__item time { flex: 0 0 auto; color: var(--color-text-dim); font-family: var(--font-mono); font-size: .8rem; }
.week-plan__kind { display: block; color: var(--color-primary); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; }
.week-plan__offer { padding-top: 8px; }
.week-plan__offer p { margin: 0 0 10px; line-height: 1.5; }
.week-plan__cap { font-size: .86rem; }
@media (max-width: 520px) { .week-plan__item { display: grid; gap: 5px; } }

/* =========================================================================
   11. PAGE D'ACCUEIL PUBLIQUE (homepage.html)
   ========================================================================= */
.page-home a { color: inherit; text-decoration: none; }
.page-home .wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }
.hero { position: relative; padding: clamp(48px, 10vw, 100px) var(--space-5) clamp(56px, 8vw, 88px); text-align: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(245,197,66,0.12), transparent 70%),
    radial-gradient(40% 40% at 85% 15%, rgba(127,167,232,0.10), transparent 70%);
}
.hero__eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-5); opacity: 0; animation: rise-in .6s .1s var(--ease-out) forwards; }
.hero__seal { width: 15px; height: 15px; flex-shrink: 0; }
.hero h1 { position: relative; font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.08; max-width: 820px; margin: 0 auto var(--space-5); opacity: 0; animation: rise-in .7s .2s var(--ease-out) forwards; }
.hero h1 em { font-style: normal; color: var(--color-primary); }
.hero__sub { position: relative; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: var(--color-text-dim); max-width: 560px; margin: 0 auto var(--space-6); opacity: 0; animation: rise-in .7s .32s var(--ease-out) forwards; }
.hero__ctas { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); opacity: 0; animation: rise-in .7s .44s var(--ease-out) forwards; }
.hero__stamp { position: relative; width: 108px; height: 108px; margin: 0 auto; opacity: 0; color: var(--color-primary); }
.hero__stamp svg { width: 100%; height: 100%; stroke: currentColor; }
@media (prefers-reduced-motion: no-preference) { .hero__stamp { animation: seal-stamp .5s .62s var(--ease-out) forwards; } }
@media (prefers-reduced-motion: reduce) { .hero__stamp, .hero__eyebrow, .hero h1, .hero__sub, .hero__ctas { opacity: 1; animation: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rankstrip { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: var(--space-4) var(--space-5) var(--space-8); }
.rankstrip__item { display: flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line); font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-faint); }
.rankstrip__item svg { width: 14px; height: 14px; }
.rankstrip__item--gold { color: var(--color-primary); border-color: var(--color-primary-deep); }
.rankstrip__arrow { color: var(--color-line-strong); font-size: 0.8rem; }
.page-home section { padding: var(--space-8) var(--space-5); }
.section__eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-3); text-align: center; }
.section__title { font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.1rem); text-align: center; max-width: 640px; margin: 0 auto var(--space-7); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 1080px; margin: 0 auto; }
@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }
.feature { padding: var(--space-6) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.feature__icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); color: var(--color-primary); margin-bottom: var(--space-4); }
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 { font-weight: 600; font-size: 1.12rem; margin: 0 0 10px; }
.feature p { color: var(--color-text-dim); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.why { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.why__row { display: flex; align-items: flex-start; gap: 14px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.why__row svg { width: 20px; height: 20px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.why__row p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--color-text); }
.why__row b { color: var(--color-primary); }
.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); max-width: 780px; margin: 0 auto; }
@media (max-width: 680px) { .pricing { grid-template-columns: 1fr; } }
.page-home .plan { position: relative; padding: var(--space-6) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.plan--best { border-color: var(--color-primary-deep); box-shadow: 0 0 0 1px var(--color-primary-deep); }
.plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-primary-ink); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: var(--space-3); }
.plan__price { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 700; color: var(--color-text); display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan__price span { font-size: 0.85rem; font-weight: 400; color: var(--color-text-faint); }
.plan__note { font-size: 0.82rem; color: var(--color-text-faint); margin-bottom: var(--space-5); }
.plan__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; color: var(--color-text-dim); }
.plan__list svg { width: 15px; height: 15px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.page-home .plan .btn-primary, .page-home .plan .btn-ghost { justify-content: center; margin-top: auto; }
.page-home footer { padding: var(--space-6) var(--space-5) var(--space-7); border-top: 1px solid var(--color-line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); max-width: 1080px; margin: 0 auto; font-size: 0.82rem; color: var(--color-text-faint); }
.page-home footer a { color: var(--color-text-dim); }
.page-home footer a:hover { color: var(--color-text); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* =========================================================================
   12. PAIEMENT (billing/checkout.html)
   ========================================================================= */
.page-checkout .wrap { max-width: 640px; margin: 0 auto; padding: var(--space-5) var(--space-4) 64px; }
.page-checkout h1 { font-weight: 700; font-size: 1.7rem; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.page-checkout h2 { font-style: italic; font-weight: 700; font-size: 1.15rem; color: var(--color-primary); margin: var(--space-6) 0 0; }
.page-checkout .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); margin-top: var(--space-4); animation: card-in .35s var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-checkout .card { animation: none; } }
.page-checkout .plans { display: flex; gap: var(--space-3); }
.page-checkout .plan { flex: 1; border: 1.5px solid var(--color-line); background: var(--night-950); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); cursor: pointer; text-align: center; transition: border-color .15s, background .15s, transform .18s var(--ease-out); }
.page-checkout .plan:hover { border-color: var(--color-line-strong); transform: translateY(-2px); }
.page-checkout .plan.selected { border-color: var(--color-primary); background: rgba(245, 197, 66, 0.1); box-shadow: 0 0 0 1px rgba(245,197,66,0.14), 0 6px 18px -6px var(--color-primary-glow); }
.page-checkout .plan .price { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; color: var(--color-primary); }
.page-checkout .plan .price small { font-size: 14px; }
.page-checkout .plan .note { font-size: 0.8rem; color: var(--color-text-dim); margin-top: 4px; line-height: 1.4; }
.page-checkout label { display: block; margin: var(--space-4) 0 4px; font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.page-checkout input, .page-checkout select { width: 100%; min-height: 48px; padding: 11px 12px; color: var(--color-text); background: var(--night-950); border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); }
.page-checkout input::placeholder { color: var(--color-text-faint); }
.page-checkout input:focus, .page-checkout select:focus { border-color: var(--color-primary); }
.page-checkout .row { display: flex; gap: var(--space-2); align-items: flex-end; }
.page-checkout .row input { flex: 1; }
.page-checkout button.secondary { min-height: 48px; padding: 11px 18px; font-size: 16px; font-weight: 700; background: var(--color-surface-2); border: 1px solid var(--color-line-strong); color: var(--color-text); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.page-checkout button.secondary:hover { background: var(--color-line); }
.page-checkout .msg { margin-top: var(--space-2); font-size: 0.88rem; color: var(--color-text-dim); }
.page-checkout .msg.ok { color: var(--color-success); }
.page-checkout .msg.err { color: var(--color-danger); }
.page-checkout .step-help { margin: var(--space-2) 0 0; color: var(--color-primary); font-size: .92rem; }
.page-checkout .total { font-size: 1.1rem; margin-top: var(--space-4); color: var(--color-text); }
.page-checkout .total strong { font-family: var(--font-mono); font-size: 1.2rem; color: var(--color-primary); }
.page-checkout .total .list-price { text-decoration: line-through; color: var(--color-text-faint); }
.page-checkout .legal { font-size: 0.92rem; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--night-950); border: 1px solid var(--color-line); border-radius: var(--radius-md); color: var(--color-text); line-height: 1.5; }
.page-checkout .legal label { display: flex; gap: 10px; font-weight: 400; align-items: flex-start; margin: var(--space-2) 0; color: var(--color-text); }
.page-checkout .legal input { width: 18px; height: 18px; min-height: 0; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-primary); }
.page-checkout .legal strong { color: var(--color-primary); }
/* Boutons PayPal : rendus par PayPal, panneau clair natif derrière */
.page-checkout #paypal-buttons { margin-top: var(--space-4); min-height: 48px; background: var(--cream); border-radius: var(--radius-md); padding: var(--space-4); }
.page-checkout #paypal-buttons:empty { background: transparent; padding: 0; }
.page-checkout table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.page-checkout th, .page-checkout td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--color-line); color: var(--color-text); }
.page-checkout tr:last-child td { border-bottom: none; }
.pill { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; background: var(--color-line); color: var(--color-info); }
.pill.active { background: rgba(111,207,151,0.2); color: var(--color-success); }
.pill.cancelled, .pill.expired, .pill.suspended { background: rgba(224,87,76,0.2); color: var(--color-danger); }

/* =========================================================================
   13. PAGES LÉGALES ET ATTRIBUTIONS
   ========================================================================= */
.legal-page { max-width: 760px; margin: 0 auto; padding: var(--space-6) var(--space-4) 80px; color: var(--color-text); }
.legal-page a.home-link { display: inline-block; margin-bottom: 24px; font-weight: 600; color: var(--color-text-dim); text-decoration: none; }
.legal-page h1 { font-size: 2rem; margin-bottom: 8px; }
.legal-page .maj { color: var(--color-text-faint); font-size: 0.85rem; margin-bottom: 32px; }
.legal-page h2 { font-size: 1.2rem; margin-top: 32px; margin-bottom: 8px; color: var(--color-text); }
.legal-page h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-top: 20px; color: var(--color-text-dim); }
.legal-page p, .legal-page li { line-height: 1.6; color: var(--color-text-dim); }
.legal-page ul { list-style: disc; padding-left: 22px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.legal-page th, .legal-page td { text-align: left; padding: 8px 12px; border: 1px solid var(--color-line-strong); font-size: 0.92rem; }
.legal-page .important { background: rgba(224,87,76,.12); border: 1px solid var(--color-danger); border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0; }
.legal-page .important, .legal-page .important p, .legal-page .important strong { color: var(--color-text); }
.legal-page .kid-box { background: rgba(245,197,66,.10); border-radius: var(--radius-md); padding: 16px 20px; margin: 16px 0; border: 1px solid var(--color-primary-deep); }
.legal-page .kid-box h3, .legal-page .kid-box p { color: var(--color-text); }
.legal-page .todo { background: rgba(245,197,66,.10); border: 1px solid var(--color-primary-deep); border-radius: var(--radius-sm); padding: 12px 16px; margin: 16px 0; font-size: 0.9rem; }
.legal-page .back-home { margin-top: 40px; }

/* Pages minimales rendues par le serveur (lien invalide, retour de connexion) */
.page-notice { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px; }
.page-notice main { max-width: 440px; text-align: center; }
.page-notice h1 { font-size: 1.4rem; margin-bottom: 12px; }
.page-notice p { color: var(--color-text-dim); line-height: 1.5; }
.page-notice a { color: var(--color-info); }

/* =========================================================================
   14. GRANDS ÉCRANS
   ========================================================================= */
@media (min-width: 700px) {
  #app { padding-bottom: var(--space-6); }
  .tabbar { position: static; background: none; padding: 0 var(--journey-gutter) var(--space-3); justify-content: flex-start; max-width: var(--journey-content); margin-inline: auto; }
  .view, #view { padding-bottom: var(--space-7); }
  .greeting h1 { font-size: 2rem; }
  .btn-row { flex-direction: row; }
  .btn-row .btn { flex: 1; }
  .quiz-subject-grid, .quiz-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-stars .icon { width: 48px; height: 48px; }
  .results-area { padding-bottom: 40px; }
}
@media (min-width: 760px) { .view, #view { max-width: 760px; } }
@media (min-width: 960px) {
  #app { max-width: 800px; }
  .view, #view { max-width: 960px; }
  .chapter-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (orientation: landscape) and (min-width: 700px) {
  #app { max-width: 900px; }
  .view, #view { max-width: 1040px; }
  .quiz-subject-grid, .quiz-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .positioning-hero { align-items: flex-start; padding: var(--space-4); }
  .positioning-hero__icon { flex-basis: 40px; width: 40px; height: 40px; }
  .positioning-hero__icon .icon { width: 21px; height: 21px; }
  .positioning-hero__title { font-size: 1.15rem; }
}

/* =========================================================================
   15. TRANSITIONS DE PAGE, RÉVÉLATION AU DÉFILEMENT, PROPOSITION DE PASSKEY
   (utilisés par /js/transitions.js, /js/scroll-reveal.js, /js/passkey-prompt.js)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease-out); }
  html.sb-anim body { animation: sb-page-in .32s var(--ease-out); }
  @keyframes sb-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  html.sb-page-leaving body { opacity: 0 !important; transform: translateY(-4px) !important; transition: opacity .16s ease-out, transform .16s ease-out !important; }
}
[data-reveal].sb-reveal:not(.sb-reveal-visible) { opacity: 0 !important; transform: translateY(24px) !important; transition: none !important; }
[data-reveal].sb-reveal.sb-reveal-visible {
  opacity: 1 !important; transform: none !important;
  transition: opacity .7s var(--ease-out) var(--sb-reveal-delay, 0ms), transform .7s var(--ease-out) var(--sb-reveal-delay, 0ms) !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].sb-reveal:not(.sb-reveal-visible), [data-reveal].sb-reveal.sb-reveal-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.sb-passkey-proposal { position: relative; z-index: 60; width: 100%; max-width: 760px; margin: 16px auto; padding: 20px 22px; background: var(--color-surface-2); border: 2px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); color: var(--color-text); }
.sb-passkey-proposal h2 { margin: 0 0 8px; }
.sb-passkey-proposal p { margin: 0 0 14px; line-height: 1.5; color: var(--color-text-dim); }
.sb-passkey-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sb-passkey-actions button { min-height: 44px; padding: 10px 15px; border-radius: var(--radius-sm); border: 1px solid var(--color-primary-deep); background: var(--color-primary); color: var(--color-primary-ink); font-weight: 800; cursor: pointer; }
.sb-passkey-actions .sb-passkey-later { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }