/* Glyphum — habillage (partout, chargé par index.html après styles.css).
   Deux couleurs, violet et orange, et leur mélange : le violet porte les actions (boutons, liens, sélection), l'orange les repères
   (onglet actif, niveaux, progression) ; le dégradé orange → violet n'apparaît que sur le logo et les barres de progression.
   Fond ivoire chaud, traits fins plutôt qu'ombres, titres en semi-gras serrés : l'interface s'efface devant les textes et les lettres.
   Il surcharge les valeurs de styles.css ; une fusion des deux fichiers reste possible plus tard. */

:root {
  --bg: #f8f6f3;
  --surface: #ffffff;
  --surface-2: #fbf9f7;
  --text: #1f1a24;
  --muted: #6d6672;
  --line: rgba(45, 25, 60, .10);
  --accent: #5b3d99;                          /* violet : actions */
  --accent-hover: #4b3084;
  --accent-solid: #5b3d99;                    /* fond des boutons principaux (texte blanc) */
  --accent-tint: rgba(91, 61, 153, .09);      /* sélection, bouton secondaire */
  --accent-soft: rgba(45, 25, 60, .045);      /* fond neutre discret (styles.css l'utilise partout) */
  --accent-2: #c9661f;                        /* orange : repères */
  --accent-2-tint: rgba(216, 116, 44, .13);
  --brand-gradient: linear-gradient(135deg, #e8873a 0%, #b4523f 48%, #5b3d99 100%);
  --good: #1d7f3c;
  --good-bg: #eaf6ed;
  --warn: #9a5b00;
  --warn-bg: #fff4e0;
  --bad: #c4222d;
  --bad-bg: #fdecee;
  --shadow: 0 1px 2px rgba(45, 25, 60, .05), 0 10px 30px rgba(45, 25, 60, .05);
  --radius: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
html[data-theme="dark"] {
  --bg: #121016;
  --surface: #1c1a21;
  --surface-2: #232028;
  --text: #f4f1f6;
  --muted: #a39dab;
  --line: rgba(255, 255, 255, .11);
  --accent: #b9a1ec;
  --accent-hover: #cbb7f2;
  --accent-solid: #7556c2;
  --accent-tint: rgba(185, 161, 236, .15);
  --accent-soft: rgba(255, 255, 255, .07);
  --accent-2: #f0a062;
  --accent-2-tint: rgba(240, 160, 98, .16);
  --brand-gradient: linear-gradient(135deg, #f3a15f 0%, #d0705c 45%, #a587e6 100%);
  --good: #32d74b;
  --good-bg: #12301b;
  --warn: #ffb340;
  --warn-bg: #33270f;
  --bad: #ff6961;
  --bad-bg: #3a1a1a;
  --shadow: none;
}

/* ---- texte */
body {
  font-family: "PolyglotPhoenician", "PolyglotSyriac", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .page-head h1, .home-v14-title h1, .brand strong, .home-resume-copy h2 {
  font-weight: 600;
  letter-spacing: -.028em;
}
h1, .page-head h1, .home-v14-title h1 { letter-spacing: -.034em; }
.kicker, .eyebrow, .card-label, .metric-label, .analysis-section-title, .explanation-block h4 {
  text-transform: none;
  letter-spacing: -.005em;
  font-weight: 600;
  color: var(--muted);
}
strong, b { font-weight: 600; }

/* ---- barre latérale */
.sidebar {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--line);
}
html[data-theme="dark"] .sidebar { background: rgba(18, 16, 22, .78); }
.brand { padding: 6px 12px 22px; gap: 12px; }
.brand-mark, html[data-theme="dark"] .brand-mark {
  width: 38px; height: 38px; border-radius: 0; box-shadow: none; flex: 0 0 38px;
  background: var(--brand-gradient); color: transparent; font-size: 0;
  -webkit-mask: url("/logo.svg?v=20261018-212-1") center / contain no-repeat; mask: url("/logo.svg?v=20261018-212-1") center / contain no-repeat;
}
.brand strong { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.brand small { font-size: 11px; color: var(--muted); letter-spacing: 0; }
.nav { gap: 2px; }
.nav-item {
  min-height: 40px; padding: 0 12px; border-radius: 10px; gap: 12px;
  font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: -.012em;
  transform: none; box-shadow: none; background: transparent;
}
.nav-item:hover { background: var(--accent-soft); color: var(--text); transform: none; box-shadow: none; }
.nav-item.active {
  background: var(--accent-2-tint); color: var(--text); font-weight: 600; box-shadow: none;
}
html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .nav-item.active { background: var(--accent-2-tint); }
.nav-glyph, .nav-item:hover .nav-glyph, .nav-item.active .nav-glyph { background: transparent; color: var(--muted); width: 18px; font-size: 14px; }
.nav-item.active .nav-glyph { color: var(--accent-2); }
.nav-count {
  background: transparent; color: var(--muted); min-width: 0; height: auto; padding: 0; font-size: 12px; font-weight: 500;
}

/* ---- barre du haut */
.topbar { min-height: 64px; }
.language-select, select, .search, .settings-select, textarea, input[type="text"], input[type="search"], input[type="email"], input[type="password"] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text);
  font-weight: 500; box-shadow: none;
}
.language-select:focus, select:focus, .search:focus, textarea:focus, input:focus { border-color: var(--accent); outline: 3px solid var(--accent-tint); outline-offset: 0; }
.icon-btn { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.script-switch { background: rgba(0, 0, 0, .06); border-radius: 9px; }
html[data-theme="dark"] .script-switch { background: rgba(255, 255, 255, .1); }
.script-btn { font-weight: 500; color: var(--muted); }
.script-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

/* ---- boutons */
.btn, .cr-btn, .text-btn {
  border-radius: 999px; font-weight: 500; letter-spacing: -.01em; box-shadow: none; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.btn.primary, .cr-btn.primary, html[data-theme="dark"] .btn.primary,
.home-resume-button, html[data-theme="dark"] .home-resume-button, .exercise-start-btn {
  background: var(--accent-solid); color: #fff; border-color: transparent;
}
.btn.primary:hover, .cr-btn.primary:hover, .home-resume-button:hover, .exercise-start-btn:hover { background: color-mix(in srgb, var(--accent-solid) 88%, #000); transform: none; }
.btn.secondary, .btn.tertiary, html[data-theme="dark"] .btn.secondary, html[data-theme="dark"] .btn.tertiary, .cr-btn:not(.primary) {
  background: var(--accent-tint); color: var(--accent); border-color: transparent;
}
.btn.secondary:hover, .btn.tertiary:hover, .cr-btn:not(.primary):hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.btn.danger { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.home-resume-button { border-radius: 999px; padding: 12px 24px; font-size: 15px; font-weight: 500; }

/* ---- cartes */
.home-resume-card, .home-stats-card, .metric-card, .level-card, .panel, .settings-card, .profile-header-card, .progress-hero-card,
.lexicon-table, .alphabet-letter, .alphabet-option, .breakdown-item, .conj-card, .social-list-card, .cr-card, .cr-block, .course-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.home-resume-card, .home-stats-card { border-radius: 22px; box-shadow: var(--shadow); }
.explanation-block, .alphabet-example { background: var(--surface-2); border-color: var(--line); border-radius: 12px; }
.home-resume-icon { background: var(--accent-2-tint); color: var(--accent-2); border-radius: 12px; }
.home-stat span { font-weight: 500; }
.home-stat strong { font-weight: 600; }

/* ---- puces et sélections */
.nav-count, .chip, .tag, .badge { font-weight: 500; }
.alphabet-letter:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: none; }
.alphabet-letter.learned { background: var(--good-bg); border-color: transparent; }

/* ---- icônes de navigation : traits fins (remplacent les symboles texte) */
.nav-item[data-route] .nav-glyph, .nav-item[data-route]:hover .nav-glyph, .nav-item[data-route].active .nav-glyph {
  font-size: 0; width: 20px; height: 20px; flex: 0 0 20px; display: inline-block;
  background: currentColor !important; color: var(--muted) !important; -webkit-mask: var(--ico) center / 20px 20px no-repeat; mask: var(--ico) center / 20px 20px no-repeat;
}
.nav-item[data-route].active .nav-glyph { color: var(--accent-2) !important; }
.nav-item[data-route="home"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2011.2%2012%204l8.5%207.2M5.8%209.8V19h12.4V9.8%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="read"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206.6C10%205.2%207.2%204.7%204%205.1V18c3.2-.4%206%20.1%208%201.5%202-1.4%204.8-1.9%208-1.5V5.1c-3.2-.4-6%20.1-8%201.5zM12%206.6v12.9%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="alphabet"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2019%208.5%205l5%2014M5.5%2014h6M15%2019l2.4-6.5L19.8%2019M15.9%2017h3.1%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="review"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208h12a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2zM7.5%205h9%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="conjugator"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h14m-3-3%203%203-3%203M20%2016H6m3-3-3%203%203%203%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="exercises"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2019.5l.9-4L16.6%204.3a2.1%202.1%200%200%201%203%203L8.4%2018.6l-3.9.9zM14.6%206.3l3%203%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="lexicon"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206.5h11M9%2012h11M9%2017.5h11M4.5%206.5h.01M4.5%2012h.01M4.5%2017.5h.01%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="progress"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%205v14.5H20M8.5%2015.5v-4M12.5%2015.5V8M16.5%2015.5v-6%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="social"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011.2a3%203%200%201%200%200-6%203%203%200%200%200%200%206zM3.6%2019c.4-3%202.6-4.6%205.4-4.6s5%201.6%205.4%204.6M16.4%206.4a2.7%202.7%200%200%201%200%205M17.4%2014.6c1.8.5%203%202%203.2%204.4%22%2F%3E%3C%2Fsvg%3E"); }
.nav-item[data-route="settings"] .nav-glyph { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%207.5h8M17%207.5h2.5M4.5%2016.5H7M11.5%2016.5h8M12.5%207.5a2%202%200%201%200%204%200%202%202%200%200%200-4%200zM6.8%2016.5a2%202%200%201%200%204%200%202%202%200%200%200-4%200z%22%2F%3E%3C%2Fsvg%3E"); }

/* ---- Lire & écrire (cours) */
.cr-choice, .cr-key, .cr-chip, .cr-input, .cr-rulebtn {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.cr-chip { border-radius: 999px; }
.cr-choice:hover, .cr-key:hover, .cr-chip:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cr-choice.selected { border-color: var(--accent); background: var(--accent-tint); }
.cr-choice.right { border-color: var(--good); background: var(--good-bg); }
.cr-choice.wrong { border-color: var(--bad); background: var(--bad-bg); }
.cr-key.ok { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.cr-input { border-width: 1px; }
.cr-input:focus { border-color: var(--accent); outline: 3px solid var(--accent-tint); }
.cr-bar { height: 4px; background: var(--accent-soft); }
html[data-theme="dark"] .cr-bar { background: rgba(255, 255, 255, .14); }
.cr-bar i { background: var(--brand-gradient); }
.cr-banner { border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .12); backdrop-filter: saturate(180%) blur(20px); }
.cr-banner.good { border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.cr-banner.bad { border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.cr-banner .cr-next { border-radius: 999px; font-weight: 500; }
#courseRoot a, .cr-link, .back-btn { color: var(--accent); text-decoration: none; font-weight: 500; }
#courseRoot a:hover, .cr-link:hover, .back-btn:hover { text-decoration: underline; }

/* ---- Lire (choix du texte) */
#view-read .topic-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
#view-read .topic-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: none; box-shadow: var(--shadow); }

#view-read .topic-card h3 { font-weight: 600; letter-spacing: -.02em; }
.coverage-chip, #view-read .coverage-chip { background: var(--accent-soft); color: var(--muted); font-weight: 500; }
html[data-theme="dark"] .coverage-chip, html[data-theme="dark"] #view-read .coverage-chip { background: rgba(255, 255, 255, .1); }

/* ---- choix des langues */
.onboarding-card { border-radius: 24px; }
.onboarding-language-card { background: var(--surface-2); border-radius: 20px; font-weight: 600; letter-spacing: -.02em; font-size: 19px; min-height: 190px; }
.onboarding-language-card:hover { transform: none; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.onboarding-language-card.selected { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.language-space h2, .language-space-head h2 { font-weight: 600; text-transform: none; letter-spacing: -.01em; }

/* ---- barre du bas (téléphone) */
@media (max-width: 780px) {
  .sidebar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
  .sidebar .nav > .nav-item { border-radius: 10px; background: transparent !important; }
  .sidebar .nav > .nav-item span:not(.nav-glyph):not(.nav-count) { font-size: 10px; font-weight: 500; color: var(--muted); }
  .sidebar .nav > .nav-item.active span:not(.nav-glyph):not(.nav-count) { color: var(--accent-2); font-weight: 600; }
  .nav-count { background: var(--accent-2) !important; color: #fff !important; font-weight: 600; }
}

/* ---- lisibilité : les textes d'explication suivent les couleurs du thème (styles.css en a de fixes, trop sombres en mode sombre) */
.selection-breakdown h4, .selection-breakdown .sb-meta, .breakdown-gloss, .word-form-line, .context-translation { color: var(--muted) !important; }
.selection-breakdown p, .selection-breakdown li, .selection-breakdown strong, .analysis-prose p, .analysis-prose strong, .breakdown-item p, .explanation-block p { color: var(--text) !important; }
.selection-breakdown .sb-formation { color: var(--muted) !important; }
.analysis-context-main { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .breakdown-item { background: var(--surface-2); }

/* ---- textes par niveau : le niveau est un repère (orange), la carte suit la palette */
.level-id { background: var(--accent-2-tint); color: var(--accent-2); font-weight: 600; letter-spacing: -.01em; }
#view-read .topic-label-v15 { color: var(--accent-2); font-weight: 600; }
.level-teaches summary { color: var(--accent); }

/* ---- sélection de texte et mots du lecteur */
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.word:hover { background: var(--accent-tint); border-radius: 4px; }