/* ============================================================
   TOEFL — page d'accueil uniquement
   Couche 3 : styles propres à /toefl/index.html.
   Les composants partagés du service restent dans toefl.css.
   ============================================================ */

/* Styles spécifiques à la page d'accueil. Le chrome (header, burger,
     toggle, titre de page) vient du design system commun (style.css) :
     header standard `.header` › `.header-left` / `.header-right`, identique
     aux autres pages du site. Aucun override de chrome ici. */

  /* === Sections de catégories === */
  .category-section {
    margin-bottom: 48px;
  }
  .category-section:last-of-type {
    margin-bottom: 64px;
  }

  .category-section .section-label {
    margin-bottom: 16px;
  }

  /* Grille de cartes catégories (style « home des jeux ») */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
  }
  @media (max-width: 480px) {
    .cat-grid { grid-template-columns: 1fr; }
  }


  /* === Cartes catégories (look « home des jeux », police du site) === */
  .cat-card {
    --band: var(--color-text);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    position: relative;
    min-height: 200px;
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-med);
  }
  .cat-band {
    height: 56px;
    background: var(--band);
    transition: height var(--t-med);
  }
  .cat-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
  }
  .cat-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
  }
  .cat-num { font-weight: 700; color: var(--band); }
  .cat-status { color: var(--color-text); font-weight: 600; text-align: right; }
  .cat-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
  }
  .cat-desc {
    font-size: 0.875rem;
    color: var(--color-text-soft);
    line-height: 1.45;
    flex: 1;
    margin: 0;
  }
  .cat-arrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--mono-weight);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    margin-top: var(--space-sm);
    transition: color var(--t-fast), transform var(--t-fast);
  }
  .cat-card:hover {
    border-color: var(--band);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--band) 40%, transparent);
  }
  .cat-card:hover .cat-band { height: 72px; }
  .cat-card:hover .cat-arrow { color: var(--band); transform: translateX(4px); }
  .cat-card:focus-visible { outline: 2px solid var(--band); outline-offset: 2px; }
  .cat-card--soon { cursor: default; pointer-events: none; }
  .cat-card--soon .cat-band { opacity: 0.4; }
  .cat-card--soon .cat-title,
  .cat-card--soon .cat-num { color: var(--color-text-faint); }
  @media (max-width: 480px) {
    .cat-title { font-size: 1.375rem; }
    .cat-band { height: 48px; }
  }

  /* === Bouton de reset === */
  .reset-btn {
    background: none;
    border: none;
    color: var(--ink-mute);
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    cursor: pointer;
    padding: 4px 8px;
    margin: 0;
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
  }

  .reset-btn:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
  }

  /* Variante pour le reset global, à côté des stats globales */
  .reset-global {
    margin-top: 16px;
    align-self: flex-start;
  }

  /* Variante pour le reset d'une catégorie, dans le coin de la tuile */
  .category-tile .reset-btn {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 9px;
    padding: 2px 6px;
  }

  .category-tile.disabled .reset-btn {
    display: none;
  }

/* === Onglets de la page d'accueil (barre .sub-tabs mutualisée) === */
  .home-tabs { margin-top: 28px; }

  /* === Tableaux de stats en cartes-lignes (catégorie / niveau / format) === */
  .stat-rows { display: flex; flex-direction: column; gap: 10px; }
  .stat-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg, 8px);
    padding: 14px 16px;
  }
  .stat-row--empty { opacity: 0.65; }
  .stat-row-main { flex: 1; min-width: 0; }
  .stat-row-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
  .stat-row-meta { font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 12px; color: var(--ink-mute); margin-top: 3px; }
  .stat-row-pct { font-family: var(--font-display); font-style: italic; font-size: 20px; min-width: 56px; text-align: right; }
  .stat-row-pct.pct-good { color: var(--good); }
  .stat-row-pct.pct-mid  { color: var(--ink); }
  .stat-row-pct.pct-bad  { color: var(--accent); }
  .stat-row-pct.pct-none { color: var(--ink-mute); }
  .stat-revise {
    font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
    padding: 7px 14px; border: 1px solid var(--rule); border-radius: var(--radius-md, 4px);
    background: transparent; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
  }
  .stat-revise:hover { border-color: var(--ink); color: var(--ink); }
  .stat-reset {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none;
    border: 1px solid var(--rule); border-radius: var(--radius-md, 4px);
    background: transparent; color: var(--ink-mute); cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .stat-reset:hover { border-color: var(--accent); color: var(--accent); }
  @media (max-width: 600px) {
    .stat-row { flex-wrap: wrap; gap: 10px 12px; }
    .stat-row-pct { min-width: 0; }
  }

  /* === Popin de confirmation de réinitialisation === */
  /* Modale de confirmation (.confirm-*) : portée dans toefl.css — composant partagé
     entre la home et review-session.html. */
  /* === Onglet Parcours : trois entrées + popup de configuration === */
  .home-modes { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 4px; }
  @media (min-width: 48rem) { .home-modes { grid-template-columns: repeat(3, 1fr); } }
  .mode-block {
    --c-bg: #96B4C9; --c-fg: #1F2E44;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 168px; padding: 22px; border: 0; border-radius: 14px;
    background: var(--c-bg); color: var(--c-fg); text-align: left; text-decoration: none;
    cursor: pointer; font-family: var(--font-display);
    transition: transform .12s ease, filter .2s ease;
  }
  .mode-block:hover { transform: translateY(-2px); filter: brightness(0.98); }
  .mode-block:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .mode-title { font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
  .mode-desc { margin-top: 8px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; opacity: 0.85; }

  .cfg-overlay {
    position: fixed; inset: 0; background: rgba(20,30,45,.45);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 100; opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .cfg-overlay.is-open { opacity: 1; pointer-events: auto; }
  @media (min-width: 48rem) { .cfg-overlay { align-items: center; padding: 24px; } }
  .cfg-modal {
    background: var(--bg); width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; padding: 24px 22px max(24px, env(safe-area-inset-bottom));
    transform: translateY(16px); transition: transform .2s ease; -webkit-overflow-scrolling: touch;
  }
  .cfg-overlay.is-open .cfg-modal { transform: translateY(0); }
  @media (min-width: 48rem) { .cfg-modal { border-radius: 16px; padding: 28px; } }
  .cfg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .cfg-title { font-family: var(--font-display); font-size: clamp(1.5rem, 6vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
  .cfg-close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-mute); cursor: pointer; padding: 4px 8px; }
  .cfg-close:hover { color: var(--ink); }
  .cfg-sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }
  .cfg-group { margin-bottom: 20px; }
  .cfg-group-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); margin-bottom: 10px; }
  .cfg-choices { display: flex; flex-wrap: wrap; gap: 8px; }
  .cfg-launch { width: 100%; margin-top: 6px; padding: 16px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; cursor: pointer; transition: filter .15s ease; }
  .cfg-launch:hover { filter: brightness(1.08); }
  .cfg-launch:disabled { opacity: 0.5; cursor: default; }
  .cfg-launch-sub { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.03em; opacity: 0.8; }