/* ================================================
   MENUS.CSS — Identité visuelle des menus
   ------------------------------------------------
   S'applique à accueil, catalogue, matiere, compte et mentions légales. PAS aux épreuves ni
   à la correction : tout est cantonné sous `body.home-page`, que
   seules ces trois pages portent.

   À charger EN DERNIER, après common.css / home.css / catalogue.css
   / matiere.css, pour pouvoir les surcharger sans `!important`.

   Le remappage des variables de common.css est délibéré : il fait
   hériter la nouvelle palette à tous les composants existants
   (modales, listes déroulantes de recherche, cartes d'annale) sans
   avoir à les réécrire un par un. Les variables sont posées sur
   `body.home-page` et non sur `:root`, sinon elles fuiraient vers
   les épreuves.
   ================================================ */

/* ══════════ JETONS ══════════ */

/* ── La voix de la page de garde ──
   Décision du 2026-10-08 : les menus prennent l'identité de la garde
   (index.html) — « atelier de papier chaud, encre graphite ». Les
   valeurs `--g-*` viennent de css/theme-garde.css (classe `g-theme`
   sur <body>, fichier chargé AVANT celui-ci) ; on ne fait ici que
   les remapper sur les jetons `--m-*` qu'emploie le reste du fichier.

     · toile de lin, cartes blanches cernées d'un filet à l'encre ;
     · une seule famille, Switzer, en 400-500 : les titres murmurent ;
     · commandes en capsule, aplat graphite, aucun relief ;
     · le vert #4CC02B rationné aux états (années faites). */

body.home-page {
  --m-ink:       var(--g-text);
  --m-ink-soft:  var(--g-nav);
  --m-ink-faint: var(--g-label);
  --m-ground:    var(--g-canvas);
  --m-surface:   var(--g-surface);
  --m-surface-2: var(--g-canvas);
  --m-rule:      var(--g-quartz);
  --m-rule-soft: var(--g-quartz);
  --m-hairline:  var(--g-hairline);

  /* L'accent, c'est l'encre : CTA, onglet courant, jauges. */
  --m-accent:      var(--g-ink);
  --m-accent-deep: var(--g-ink);
  --m-accent-wash: var(--g-stone);
  --m-accent-ink:  var(--g-on-ink);
  --m-pulse:       var(--g-pulse);

  /* Anciens jetons secondaires, ramenés au graphite. */
  --m-blue:      var(--g-ink);
  --m-blue-deep: var(--g-ink);
  --m-blue-wash: var(--g-stone);
  --m-navy:      var(--g-ink);

  --font-display: var(--g-font);
  --font-body:    var(--g-font);
  --font-mono:    var(--g-font);   /* alignement par tabular-nums */
  --m-sans: var(--font-body);
  --m-mono: var(--font-mono);

  --m-r-sm:   var(--g-r-sm);
  --m-r:      var(--g-r);
  --m-r-lg:   var(--g-r);
  --m-r-pill: var(--g-r-pill);

  /* Remappage de common.css : les composants existants suivent. */
  --bg-page:        var(--m-ground);
  --bg-card:        var(--m-surface);
  --bg-subtle:      var(--m-surface-2);
  --bg-sidebar:     var(--m-surface);
  --border:         var(--m-rule);
  --border-strong:  var(--m-ink-faint);
  --text-primary:   var(--m-ink);
  --text-secondary: var(--m-ink-soft);
  --text-muted:     var(--m-ink-faint);
  --primary-blue:       var(--m-accent);
  --primary-blue-hover: var(--g-text);
  --primary-blue-light: var(--m-accent-wash);
  --primary-blue-soft:  var(--g-quartz);
  --radius-sm: var(--m-r-sm);
  --radius:    var(--m-r);
  --radius-lg: var(--m-r-lg);
  --radius-xl: var(--m-r-lg);

  background: var(--m-ground);
  color: var(--m-ink);
  font-family: var(--font-body);
}

/* Chiffres à chasse fixe partout où ils comptent. */
body.home-page .m-num { font-family: var(--m-mono); font-variant-numeric: tabular-nums; }

/* ── Où le display a droit de cité ──
   Mêmes emplacements qu'avant — titres de page, noms de matière,
   en-têtes de dossier — mais la distinction ne passe plus par la
   famille : elle passe par la graisse. C'est le « shout/whisper »
   du système : 800 pour ce qui crie, 700 pour tout le reste. */
body.home-page h1,
body.home-page .compte-title,
body.home-page .subject-banner-name,
body.home-page .subject-tile-name,
body.home-page .cat-folder-name,
body.home-page .resume-card-title,
body.home-page .modal-header h2,
body.home-page .mode-card-desc {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.home-page .subject-tile-name,
body.home-page .resume-card-title { font-weight: 800; }
body.home-page h1,
body.home-page .compte-title,
body.home-page .subject-banner-name { font-weight: 800; }

/* ══════════ BARRE DE NAVIGATION ══════════ */

.onav {
  position: sticky; top: 0; z-index: 100;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-rule);
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  height: 56px;
}

.onav-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; color: inherit; }
.onav-mark {
  font-family: var(--m-mono); font-weight: 600; font-size: 15px;
  letter-spacing: -0.04em;
  color: var(--m-accent-ink); background: var(--m-accent);
  width: 26px; height: 26px; border-radius: var(--m-r-sm);
  display: grid; place-items: center; flex-shrink: 0;
}
.onav-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.onav-name { font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }
.onav-sub  { font-family: var(--m-mono); font-size: 10.5px; color: var(--m-ink-faint); letter-spacing: 0.03em; }

.onav-tabs { display: flex; gap: 2px; margin: 0 auto; }
.onav-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--m-r);
  color: var(--m-ink-soft); text-decoration: none;
  font-size: 14px; font-weight: 450;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.onav-tab:hover { background: var(--m-surface-2); color: var(--m-ink); }
.onav-tab[aria-current="page"] {
  background: var(--m-accent-wash); color: var(--m-accent);
  border-color: color-mix(in srgb, var(--m-accent) 22%, transparent);
  font-weight: 500;
}
.onav-tab:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
body.home-page .onav-tab svg { width: 17px; height: 17px; flex-shrink: 0; }

/* `.home-header-actions` est conservé : authUI.js s'y accroche pour
   injecter le bouton de compte (js/authUI.js:35). Le renommer
   ferait tomber le bouton en bas de <body>. */
.onav .home-header-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; margin: 0;
}

/* ══════════ RECHERCHE ══════════ */

body.home-page .search-wrapper {
  display: flex; align-items: center;
  background: var(--m-ground); border: 1px solid var(--m-rule);
  border-radius: var(--m-r); height: 34px; width: 220px;
  padding: 0 10px; gap: 8px;
  position: relative;
}
[data-theme="dark"] body.home-page .search-wrapper { background: var(--m-surface-2); }
body.home-page .search-wrapper:focus-within { border-color: var(--m-accent); }

body.home-page .search-icon {
  position: static; font-size: 0; line-height: 0;
  color: var(--m-ink-faint); flex-shrink: 0;
}
body.home-page .search-icon svg { width: 15px; height: 15px; display: block; }

body.home-page .search-input,
body.home-page .search-input:focus {
  width: 100%; height: auto; padding: 0;
  border: 0; background: none; box-shadow: none;
  font-family: var(--m-sans); font-size: 13.5px; color: var(--m-ink);
}
body.home-page .search-input::placeholder { color: var(--m-ink-faint); }
body.home-page .search-dropdown { top: calc(100% + 6px); border-radius: var(--m-r); }

/* ══════════ COMMANDES ══════════ */

body.home-page .theme-toggle-btn,
body.home-page .onav-icon-btn {
  width: 34px; height: 34px; min-height: 0; padding: 0;
  border-radius: var(--m-r);
  border: 1px solid var(--m-rule); background: var(--m-surface);
  color: var(--m-ink-soft);
  display: grid; place-items: center; flex-shrink: 0;
}
body.home-page .theme-toggle-btn:hover:not(:disabled),
body.home-page .onav-icon-btn:hover {
  background: var(--m-surface-2); color: var(--m-ink); transform: none;
}
body.home-page .theme-toggle-btn svg,
body.home-page .onav-icon-btn svg { width: 16px; height: 16px; }

/* Le chip de niveau devient une commande sobre. */
body.home-page .level-chip {
  height: 34px; padding: 0 13px; border-radius: var(--m-r);
  font-family: var(--m-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--m-accent-wash); color: var(--m-accent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent);
}
body.home-page .level-chip:hover { background: var(--m-accent-wash); filter: brightness(0.97); }

/* ══════════ PAGE ══════════ */

body.home-page .home-main {
  max-width: 1180px; margin: 0 auto;
  padding: 28px 20px 80px;
}

body.home-page .eyebrow {
  font-size: 14px; font-weight: 500;
  color: var(--m-ink-faint);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
body.home-page .eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--m-rule-soft);
}

body.home-page .section-label {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--m-ink); margin: 0;
}

body.home-page .catalogue-intro {
  font-size: 13.5px; color: var(--m-ink-faint);
  max-width: 62ch; margin-bottom: 26px;
}

/* ══════════ GRILLE DE MATIÈRES ══════════ */

body.home-page .subjects-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

body.home-page .subject-tile {
  background: var(--m-surface);
  border: 1px solid var(--m-rule);
  border-left: 1px solid var(--m-rule);   /* annule le liseré coloré */
  border-radius: var(--m-r-lg);
  padding: 15px 16px 13px;
  box-shadow: none;
  display: flex; flex-direction: column; gap: 13px;
  text-decoration: none; color: inherit;
  animation: none;                         /* plus d'entrée en cascade */
  transition: border-color 130ms ease, transform 130ms ease;
}
body.home-page .subject-tile:hover {
  border-color: color-mix(in srgb, var(--m-tint, var(--m-accent)) 55%, var(--m-rule));
  transform: translateY(-1px);
  box-shadow: none;
}
body.home-page .subject-tile:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
body.home-page .subject-tile.disabled { opacity: 0.55; pointer-events: none; }

.st-top { display: flex; align-items: flex-start; gap: 12px; }

.st-glyph {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--m-r);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--m-tint) 13%, transparent);
  color: var(--m-tint);
  border: 1px solid color-mix(in srgb, var(--m-tint) 22%, transparent);
}
[data-theme="dark"] .st-glyph { background: color-mix(in srgb, var(--m-tint) 18%, transparent); }
.st-glyph svg { width: 21px; height: 21px; }

.st-id { min-width: 0; flex: 1; }
body.home-page .subject-tile-name {
  font-size: 15px; font-weight: 600; letter-spacing: -0.012em;
  line-height: 1.3; margin: 0 0 3px;
  color: var(--m-ink);
}
body.home-page .subject-tile-code {
  font-family: var(--m-mono); font-size: 11px; color: var(--m-ink-faint);
  margin: 0; text-transform: none; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-level {
  font-family: var(--m-mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--m-ink-faint); border: 1px solid var(--m-rule);
  padding: 2px 6px; border-radius: var(--m-r-sm); flex-shrink: 0;
}

/* ── Signature : le bandeau d'années ──
   Chaque millésime porte son état. C'est par l'année que les
   étudiants cherchent une annale : l'information remplace la
   décoration. */
.st-ledger { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.st-yr {
  font-family: var(--m-mono); font-size: 11.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px; border-radius: var(--m-r-sm);
  border: 1px solid var(--m-rule);
  color: var(--m-ink-faint);
  background: transparent;
}
.st-yr.is-done {
  background: var(--m-accent); color: var(--m-accent-ink);
  border-color: var(--m-accent);
}
.st-yr.is-wip {
  color: var(--m-accent);
  border-color: color-mix(in srgb, var(--m-accent) 45%, transparent);
  background: var(--m-accent-wash);
}

.st-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 11px; border-top: 1px solid var(--m-rule-soft);
  font-size: 12.5px; color: var(--m-ink-faint);
}
.st-count { font-family: var(--m-mono); font-variant-numeric: tabular-nums; }
.st-go { display: flex; align-items: center; gap: 5px; color: var(--m-ink-soft); }
.st-go svg { width: 13px; height: 13px; }

.st-empty { font-size: 12.5px; color: var(--m-ink-faint); font-style: italic; }

/* ── Légende du bandeau ── */
.st-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--m-ink-faint);
  margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--m-rule-soft);
}
.st-legend span { display: flex; align-items: center; gap: 6px; }
.st-swatch { width: 22px; height: 15px; border-radius: var(--m-r-sm); border: 1px solid var(--m-rule); }
.st-swatch.is-done { background: var(--m-accent); border-color: var(--m-accent); }
.st-swatch.is-wip { background: var(--m-accent-wash); border-color: color-mix(in srgb, var(--m-accent) 45%, transparent); }

/* ══════════ CARTES « REPRENDRE » ══════════ */

body.home-page .resume-card {
  background: var(--m-surface);
  border: 1px solid var(--m-rule);
  border-radius: var(--m-r-lg);
  box-shadow: none;
}
body.home-page .resume-card:hover { border-color: var(--m-ink-faint); transform: translateY(-1px); box-shadow: none; }

body.home-page .resume-card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em;
  color: var(--m-ink);
}
.rc-glyph {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--m-r); display: grid; place-items: center;
  background: color-mix(in srgb, var(--m-tint) 13%, transparent);
  color: var(--m-tint);
  border: 1px solid color-mix(in srgb, var(--m-tint) 22%, transparent);
}
[data-theme="dark"] .rc-glyph { background: color-mix(in srgb, var(--m-tint) 18%, transparent); }
.rc-glyph svg { width: 16px; height: 16px; }

body.home-page .resume-card-text {
  font-family: var(--m-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--m-ink-faint);
}
body.home-page .resume-card-bar { background: var(--m-surface-2); border-radius: 999px; }
body.home-page .resume-card-bar-fill { background: var(--m-accent); }

body.home-page .empty-state {
  border: 1px dashed var(--m-rule);
  border-radius: var(--m-r-lg); padding: 32px 20px;
  color: var(--m-ink-faint); font-size: 13.5px; text-align: center;
  background: none;
}

/* ══════════ PAGE MATIÈRE ══════════ */

body.home-page .subject-banner {
  background: var(--m-surface);
  border: 1px solid var(--m-rule);
  border-left: 1px solid var(--m-rule);   /* annule le liseré coloré */
  border-radius: var(--m-r-lg);
  box-shadow: none;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
}
body.home-page .subject-banner-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--m-r-lg); display: grid; place-items: center;
  font-size: 0;                            /* neutralise l'ancien emoji */
  background: color-mix(in srgb, var(--m-tint) 13%, transparent);
  color: var(--m-tint);
  border: 1px solid color-mix(in srgb, var(--m-tint) 22%, transparent);
}
[data-theme="dark"] body.home-page .subject-banner-icon { background: color-mix(in srgb, var(--m-tint) 18%, transparent); }
body.home-page .subject-banner-icon svg { width: 25px; height: 25px; }

body.home-page .subject-banner-name {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--m-ink);
}
body.home-page .subject-banner-meta {
  font-family: var(--m-mono); font-size: 12px; color: var(--m-ink-faint);
  font-variant-numeric: tabular-nums;
}
body.home-page .subject-banner-desc { font-size: 13.5px; color: var(--m-ink-soft); }

body.home-page .annale-card {
  background: var(--m-surface);
  border: 1px solid var(--m-rule);
  border-radius: var(--m-r-lg);
  box-shadow: none;
  animation: none;
}
body.home-page .annale-card:hover { border-color: var(--m-ink-faint); box-shadow: none; }

body.home-page .annale-card-score-value,
body.home-page .annale-card-progress-label {
  font-family: var(--m-mono); font-variant-numeric: tabular-nums;
}

body.home-page .back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--m-ink-soft);
  margin-bottom: 18px;
}
body.home-page .back-btn:hover { color: var(--m-ink); }

/* ── Cartes de mode (modale) ── */
body.home-page .mode-card {
  background: var(--m-surface);
  border: 1px solid var(--m-rule);
  border-radius: var(--m-r-lg);
}
body.home-page .mode-card-icon {
  width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: var(--m-r); display: grid; place-items: center;
  font-size: 0;                            /* neutralise l'ancien emoji */
  background: var(--m-accent-wash); color: var(--m-accent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent);
}
body.home-page .mode-card-icon svg { width: 22px; height: 22px; }
body.home-page .mode-card-title {
  font-family: var(--m-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.07em; color: var(--m-ink);
}

/* ══════════ PAGE « MON COMPTE » ══════════
   compte.css est écrit sur les variables de marque `--o-*` définies
   par cover.css. Plutôt que de le réécrire, on remappe ces variables
   sur la palette des menus : toute la page suit.

   `body.compte-page` (0,1,1) l'emporte sur `.cover-page` (0,1,0).
   En revanche il PERD contre `[data-theme="dark"] .cover-page`
   (0,2,0) : deux classes battent une classe + un type, et l'ordre
   de chargement n'y change rien. D'où le second bloc ci-dessous —
   sans lui, les cartes gardaient le bleu marine de cover.css en
   thème sombre. */

body.compte-page,
[data-theme="dark"] body.compte-page {
  --o-ink:        var(--m-ink);
  --o-ink-soft:   var(--m-ink-soft);
  --o-blue:       var(--m-accent);
  --o-blue-deep:  var(--m-accent);
  --o-blue-text:  var(--m-accent);
  --o-btn-bg:     var(--m-accent);
  --o-blue-tint:  var(--m-accent-wash);
  --o-gold:       var(--m-accent);
  --o-gold-tint:  var(--m-accent-wash);
  --o-surface:    var(--m-surface);
  --o-surface-2:  var(--m-surface);
  --o-mist:       var(--m-ground);
  --o-line:       var(--m-rule);
  --o-shadow:     none;
  --o-shadow-sm:  none;
}

/* La page de garde pose un dégradé d'ambiance : hors sujet ici. */
body.compte-page { background: var(--m-ground); }
body.compte-page::before,
body.compte-page::after { display: none; }

body.compte-page .compte-wrap { padding: 30px 20px 80px; }

body.compte-page .compte-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; letter-spacing: -0.005em;
}
body.compte-page .compte-sub { font-size: 13.5px; color: var(--m-ink-faint); }

body.compte-page .settings-card {
  border-radius: var(--m-r-lg);
  padding: 20px 20px 18px;
  box-shadow: none;
  margin-bottom: 12px;
}
body.compte-page .settings-h2 {
  font-family: var(--m-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--m-ink-faint);
  padding-bottom: 12px; margin-bottom: 18px;
}

body.compte-page .field label {
  font-size: 12.5px; font-weight: 500; color: var(--m-ink-soft);
}
body.compte-page .field input,
body.compte-page .field select {
  border-radius: var(--m-r); border: 1px solid var(--m-rule);
  background: var(--m-ground); color: var(--m-ink);
}
[data-theme="dark"] body.compte-page .field input,
[data-theme="dark"] body.compte-page .field select { background: var(--m-surface-2); }
body.compte-page .field input:focus,
body.compte-page .field select:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px var(--m-accent-wash);
}
body.compte-page .hint { font-size: 12px; color: var(--m-ink-faint); }

body.compte-page .avatar {
  background: var(--m-accent-wash);
  border: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent);
}
body.compte-page .avatar-initials {
  font-family: var(--m-mono); font-weight: 600; color: var(--m-accent);
}

body.compte-page .omega-btn {
  border-radius: var(--m-r); font-family: var(--m-sans);
  font-size: 13.5px; font-weight: 500; box-shadow: none;
}
body.compte-page .omega-btn-primary { background: var(--m-accent); color: var(--m-accent-ink); }
body.compte-page .omega-btn-primary:hover { background: var(--m-accent); filter: brightness(1.08); }
body.compte-page .omega-btn-soft {
  background: var(--m-accent-wash); color: var(--m-accent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent);
}
body.compte-page .omega-btn-ghost {
  background: var(--m-surface); color: var(--m-ink-soft);
  border: 1px solid var(--m-rule);
}
body.compte-page .btn-text { color: var(--m-accent); font-size: 13px; }

body.compte-page .pref-row {
  border-top: 1px solid var(--m-rule-soft);
  padding-top: 16px; margin-top: 4px;
}
body.compte-page .save-msg { font-size: 12.5px; color: var(--m-ink-faint); }

@media (max-width: 860px) {
  body.compte-page .compte-wrap { padding: 22px 14px 60px; }
}

@media (max-width: 768px) {
  /* Zoom automatique de Safari iOS sous 16 px. La règle générale de
     common.css (`html select`) perd contre `.field select` d'auth.css :
     une classe bat deux types. On la rejoue ici, plus spécifique. */
  body.compte-page .field input,
  body.compte-page .field select { font-size: 16px; }
}

/* ══════════ SÉLECTEUR DE NIVEAU ══════════ */

.m-seg {
  display: flex; border: 1px solid var(--m-rule);
  border-radius: var(--m-r); overflow: hidden; background: var(--m-surface);
  width: fit-content;
}
.m-seg button {
  font-family: var(--m-mono); font-size: 12.5px; font-weight: 500;
  padding: 8px 16px; border: 0; background: none; cursor: pointer;
  color: var(--m-ink-soft); border-right: 1px solid var(--m-rule);
  transition: background 120ms ease, color 120ms ease;
}
.m-seg button:last-child { border-right: 0; }
.m-seg button:hover { background: var(--m-surface-2); color: var(--m-ink); }
.m-seg button[aria-pressed="true"] { background: var(--m-accent); color: var(--m-accent-ink); }
.m-seg button:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; }

.m-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.m-hint { font-size: 13px; color: var(--m-ink-faint); }

/* ══════════ DOSSIERS DE NIVEAU (catalogue) ══════════ */

body.home-page .cat-folder {
  border: 1px solid var(--m-rule);
  border-radius: var(--m-r-lg);
  background: var(--m-surface);
  margin-bottom: 12px;
  overflow: hidden;
}

body.home-page .cat-folder-head {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 14px 16px;
  background: none; border: 0; cursor: pointer;
  text-align: left; color: var(--m-ink);
  font-family: var(--m-sans); font-size: 15px; font-weight: 600;
  letter-spacing: -0.012em;
}
body.home-page .cat-folder-head:hover { background: var(--m-surface-2); }
body.home-page .cat-folder-head:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; }

body.home-page .cat-folder-caret {
  display: grid; place-items: center;
  color: var(--m-ink-faint); flex-shrink: 0;
  transition: transform 160ms ease;
}
body.home-page .cat-folder-caret svg { width: 15px; height: 15px; display: block; }
body.home-page .cat-folder.open .cat-folder-caret { transform: rotate(90deg); }

body.home-page .cat-folder-name { flex: 1; min-width: 0; }

body.home-page .cat-folder-you {
  font-family: var(--m-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--m-accent-wash); color: var(--m-accent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 25%, transparent);
  padding: 2px 7px; border-radius: var(--m-r-sm);
}

body.home-page .cat-folder-count {
  font-family: var(--m-mono); font-size: 12px; font-weight: 400;
  color: var(--m-ink-faint); flex-shrink: 0;
}

body.home-page .cat-folder-body { padding: 0 16px 16px; }
body.home-page .cat-folder:not(.open) .cat-folder-body { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.home-page .cat-folder-caret { transition: none; }
}

/* ══════════ EN-TÊTES DE GROUPE (catalogue) ══════════ */

body.home-page .level-group-header {
  display: flex; align-items: baseline; gap: 12px;
  margin: 34px 0 14px; padding: 0; border: 0; background: none;
}
body.home-page .level-group-header:first-child { margin-top: 0; }
body.home-page .level-group-title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--m-ink);
}
body.home-page .level-group-count {
  font-family: var(--m-mono); font-size: 12px; color: var(--m-ink-faint);
}

/* ══════════ RESPONSIVE ══════════ */

@media (max-width: 860px) {
  /* Deux rangées, pas quatre : marque + actions, puis les onglets
     sur une rangée qui défile. La recherche se replie en icône —
     empilée en pleine largeur, la barre montait à 181 px. */
  .onav {
    flex-wrap: wrap; height: auto;
    padding: 9px 14px; gap: 9px;
    position: static;
  }
  /* `flex-wrap: wrap` vient de home.css (palier 640) : dans la barre
     il empilait recherche et thème sur deux rangées, portant la
     hauteur à 141 px. */
  .onav .home-header-actions { margin-left: auto; flex-wrap: nowrap; }
  .onav-tabs {
    order: 3; width: 100%; margin: 0; gap: 4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .onav-tabs::-webkit-scrollbar { display: none; }
  .onav-tab { flex-shrink: 0; }

  body.home-page .search-wrapper { width: 34px; padding: 0; justify-content: center; }
  body.home-page .search-input { display: none; }

  /* Le chip fait 154 px avec « Choisir mon année » : il poussait le
     groupe d'actions sur sa propre rangée (barre à 138 px). Rien
     n'est perdu — sans année choisie le sélecteur segmenté est déjà
     dans la page, et l'onglet « Mon compte » permet d'en changer. */
  body.home-page .onav .level-chip { display: none; }
  body.home-page .search-dropdown { left: auto; right: 0; min-width: 280px; }

  body.home-page .home-main { padding: 22px 14px 60px; }
  body.home-page .subjects-grid { grid-template-columns: 1fr; }
  .m-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .subject-tile,
  .onav-tab { transition: none; }
  body.home-page .subject-tile:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   FINITION « GARDE » — la matière, par-dessus la mise en page
   ----------------------------------------------------------------
   Remplace l'essai Duolingo (filets de 2 px, reliefs pressables,
   capitales en 800). La disposition au-dessus ne bouge pas.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Les titres murmurent ── */
body.home-page h1,
body.home-page .compte-title,
body.home-page .subject-banner-name {
  font-weight: 400; letter-spacing: -0.02em;
}
body.home-page h1,
body.home-page .compte-title { font-size: clamp(26px, 3.2vw, 34px); }
body.home-page .subject-banner-name { font-size: 26px; }
body.home-page .subject-tile-name,
body.home-page .resume-card-title,
body.home-page .cat-folder-name,
body.home-page .cat-folder-head,
body.home-page .section-label,
body.home-page .level-group-title,
body.home-page .modal-header h2 { font-weight: 500; }
body.home-page .section-label,
body.home-page .level-group-title { font-size: 19px; }
body.home-page .subject-tile-name { font-size: 17px; }

/* ── 2. Cartes blanches, filet à l'encre, rayon 12 ── */
body.home-page .subject-tile,
body.home-page .resume-card,
body.home-page .annale-card,
body.home-page .subject-banner,
body.home-page .cat-folder,
body.home-page .mode-card,
body.home-page .onboarding-card,
body.home-page .settings-card {
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-r);
  box-shadow: none;
}
body.home-page .subject-tile:hover,
body.home-page .resume-card:hover,
body.home-page .annale-card:hover {
  border-color: var(--m-hairline);
  transform: translateY(-1px);
  box-shadow: none;
}

/* ── 3. Barre de navigation : toile translucide, capsules ── */
.onav {
  height: 64px;
  background: color-mix(in srgb, var(--m-ground) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--m-rule);
}
.onav-mark {
  width: 32px; height: 32px; font-size: 16px;
  border-radius: var(--g-r-full);
  background: var(--g-ink); color: var(--g-on-ink);
  font-family: var(--font-body); font-weight: 500;
}
.onav-name { font-size: 18px; font-weight: 500; }
.onav-sub  { font-size: 10.5px; letter-spacing: 0.06em; }
body.home-page .onav-tab {
  padding: 8px 15px; border-radius: var(--m-r-pill);
  font-size: 15px; font-weight: 400;
  border: 1px solid transparent;
}
body.home-page .onav-tab:hover { background: var(--g-quartz); color: var(--m-ink); }
body.home-page .onav-tab[aria-current="page"] {
  background: var(--g-stone); color: var(--g-ink);
  border-color: transparent; font-weight: 500;
}
/* Pastille de l'onglet Discussions : fils suivis avec du nouveau
   (js/discussionsBadge.js). À l'encre : le vert reste aux états. */
body.home-page .onav-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: -1px;
  border-radius: var(--m-r-pill);
  background: var(--g-ink); color: var(--g-on-ink);
  font-family: var(--m-mono); font-size: 10.5px; font-weight: 500; line-height: 1;
}
[data-theme="dark"] body.home-page .onav-badge { color: var(--g-canvas); }
/* Téléphone : avec quatre onglets, la barre défilait et la pastille sortait
   de l'écran. Les onglets inactifs n'y gardent que leur icône (le libellé
   reste lu par les lecteurs d'écran) ; l'onglet courant garde le sien. */
@media (max-width: 520px) {
  body.home-page .onav-tab:not([aria-current="page"]) { font-size: 0; gap: 0; padding: 9px 12px; }
  body.home-page .onav-tab:not([aria-current="page"]) .onav-badge { margin-left: 5px; }
}

/* ── 4. Commandes en capsule, sans relief ── */
body.home-page .omega-btn,
body.home-page .btn-primary,
body.home-page .btn-success,
body.home-page .btn-ghost,
body.home-page .level-chip,
.m-seg button {
  font-family: var(--font-body);
  font-weight: 500; letter-spacing: -0.005em; text-transform: none;
  box-shadow: none;
}
body.home-page .omega-btn,
body.home-page .btn-primary,
body.home-page .btn-success { border-radius: var(--m-r-pill); padding-inline: 22px; }
body.home-page .omega-btn-primary,
body.home-page .btn-primary {
  background: var(--g-ink); color: var(--g-on-ink); border: 1px solid transparent;
}
body.home-page .omega-btn-primary:hover,
body.home-page .btn-primary:hover {
  background: var(--g-text); color: var(--g-on-ink);
  filter: none; transform: translateY(-1px); box-shadow: none;
}
[data-theme="dark"] body.home-page .omega-btn-primary:hover,
[data-theme="dark"] body.home-page .btn-primary:hover { background: #FFFFFF; }
/* Entraînement (secondaire) : la pierre, pour le distinguer de l'examen. */
body.home-page .btn-success,
body.home-page .omega-btn-ghost,
body.home-page .omega-btn-soft {
  background: var(--g-stone); color: var(--g-ink); border: 1px solid transparent;
}
body.home-page .btn-success:hover,
body.home-page .omega-btn-ghost:hover,
body.home-page .omega-btn-soft:hover {
  background: var(--g-pebble); color: var(--g-ink);
  filter: none; transform: translateY(-1px); box-shadow: none;
}
body.home-page .btn-ghost { border: 1px solid var(--m-rule); }
body.home-page .theme-toggle-btn,
body.home-page .onav-icon-btn {
  width: 38px; height: 38px; border-radius: var(--g-r-full);
  border: 1px solid var(--m-rule); background: transparent;
}
body.home-page .search-wrapper {
  height: 38px; border-radius: var(--m-r-pill);
  background: var(--m-surface);
}
body.home-page .search-wrapper:focus-within { border-color: var(--m-hairline); }
body.home-page .level-chip {
  height: 38px; border-radius: var(--m-r-pill);
  background: var(--g-stone); color: var(--g-ink); border: 1px solid transparent;
}

.m-seg { border-radius: var(--m-r-pill); padding: 3px; gap: 2px; border: 1px solid var(--m-rule); }
.m-seg button { border: 0; border-radius: var(--m-r-pill); padding: 7px 16px; }
.m-seg button:last-child { border-right: 0; }
.m-seg button[aria-pressed="true"] { background: var(--g-ink); color: var(--g-on-ink); }

/* ── 5. Pastilles de matière : la teinte reste, en lavis ── */
.st-glyph,
.rc-glyph,
body.home-page .subject-banner-icon { border-radius: var(--g-r-full); }

/* ── 6. Le bandeau d'années ──
   Le vert ne sert qu'ici : il dit « fait ». « En cours » passe à la
   pierre cernée d'encre. */
.st-yr { border-radius: var(--m-r-pill); padding: 3px 9px; }
.st-yr.is-done {
  background: var(--m-pulse); color: #141414; border-color: var(--m-pulse);
}
.st-yr.is-wip {
  background: var(--g-stone); color: var(--g-ink); border-color: var(--g-ink);
}
.st-swatch { border-radius: var(--m-r-pill); }
.st-swatch.is-done { background: var(--m-pulse); border-color: var(--m-pulse); }
.st-swatch.is-wip  { background: var(--g-stone); border-color: var(--g-ink); }

/* ── 7. Jauges : filet fin, remplissage graphite ── */
.st-bar {
  flex: 1; min-width: 0; height: 6px; display: block;
  border-radius: var(--g-r-full); background: var(--g-quartz);
  overflow: hidden;
}
.st-bar-fill {
  display: block; height: 100%;
  border-radius: var(--g-r-full); background: var(--g-ink);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.home-page .st-count {
  font-size: 13px; font-weight: 500; color: var(--m-ink-soft);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
body.home-page .st-foot { gap: 12px; }
body.home-page .resume-card-bar { height: 6px; background: var(--g-quartz); border: 0; }
body.home-page .resume-card-bar-fill { background: var(--g-ink); }

/* ── 8. Champs et puces ── */
body.home-page .field input,
body.home-page .field select,
body.compte-page .field input,
body.compte-page .field select {
  border: 1px solid var(--m-rule); border-radius: var(--m-r-sm);
  background: var(--m-surface); font-weight: 400;
}
body.compte-page .field input:focus,
body.compte-page .field select:focus {
  border-color: var(--m-hairline); box-shadow: 0 0 0 3px var(--g-stone);
}
body.home-page .cat-folder-you,
body.home-page .mode-card-icon,
body.compte-page .avatar {
  background: var(--g-stone); color: var(--g-ink); border-color: transparent;
}
body.compte-page .avatar-initials { color: var(--g-ink); }
body.compte-page .btn-text { color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; }
body.compte-page .settings-h2 { color: var(--g-label); border-color: var(--m-rule); }

/* ── 9. Focus : le filet à l'encre ── */
body.home-page a:focus-visible,
body.home-page button:focus-visible,
body.home-page .subject-tile:focus-visible,
.onav-tab:focus-visible {
  outline: 2px solid var(--m-hairline);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .subject-tile,
  body.home-page .resume-card,
  body.home-page .annale-card,
  .st-bar-fill { transition: none; }
  body.home-page .subject-tile:hover,
  body.home-page .resume-card:hover,
  body.home-page .annale-card:hover { transform: none; }
}

/* ── Rattrapage responsive ──
   `.onav { height: 64px }` ci-dessus est posé après le palier 860 :
   on rejoue la hauteur automatique en dernier. */
@media (max-width: 860px) {
  .onav { height: auto; }
  body.home-page .subjects-grid { grid-template-columns: 1fr; }
}

/* ══════════ ANNONCES (accueil) ══════════
   Rédigées dans le panel admin, table `site_messages` (js/siteMessages.js). */
body.home-page .site-messages { display: grid; gap: 12px; margin-bottom: 28px; }
body.home-page .site-message {
  background: var(--m-surface);
  border: 1px solid var(--m-hairline);
  border-radius: var(--m-r);
  padding: 18px 20px;
}
body.home-page .site-message-title {
  font-size: 19px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--m-ink); margin: 0 0 8px;
}
body.home-page .site-message-lines {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
  font-size: 14px; color: var(--m-ink-soft);
}
body.home-page .site-message-lines li::before { content: "— "; color: var(--m-ink-faint); }