/* index.html — reconstruit en tableau de bord dense : hero (point faible +
   Fig. 1 dépliée + cartes dues) puis une ligne de trois figures (Fig. 2, 3,
   Tabl. 1), comme la maquette pilotage. Page --largeur-donnees (famille
   des écrans denses, cf. gyre-system.css § LARGEURS) : main perd son
   plafond --largeur-prose par défaut. */

main.dashboard-container{ max-width:var(--largeur-donnees); margin:0 auto; padding:0; }

/* Le conteneur n'a pas de padding propre (chaque bloc du tableau de bord
   pose le sien, cf. .dash-hero ci-dessous) : le chargement et l'état vide
   doivent faire de même plutôt que coller aux bords. */
#dashLoading, #dashEmpty{ padding:0 var(--e-6); }

/* ---- Hero : point faible + Fig. 1 + cartes dues ---- */
.dash-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--e-7);
  padding:var(--e-6);
  border-bottom:var(--trait-1) solid var(--trait);
}
.dash-hero-main{ max-width:560px; }
.dash-hero-eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-10);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--urgence);
  margin:0 0 var(--e-3);
}
.dash-hero-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:var(--t-40);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:0 0 var(--e-3);
}
.dash-hero-meta{
  font-family:var(--f-mono);
  font-size:var(--t-12);
  color:var(--texte-2);
  margin:0 0 var(--e-5);
}
.dash-hero-side{
  flex:none;
  border-left:var(--trait-1) solid var(--trait);
  padding-left:var(--e-6);
}
.dash-hero-gauge{ width:280px; }
.dash-hero-due{ width:220px; }
.dash-hero-due-value{
  font-family:var(--f-display);
  font-weight:700;
  font-size:var(--t-64);
  line-height:.92;
  letter-spacing:-.04em;
  margin:0;
}
.dash-hero-bilan{
  font-family:var(--f-mono);
  font-size:var(--t-11);
  color:var(--texte-2);
  line-height:1.6;
  margin:var(--e-4) 0 0;
  padding-top:var(--e-3);
  border-top:var(--trait-1) solid var(--trait);
}

/* ---- Ligne des figures ----
   Tabl. 1 (actionnable — chaque ligne mène à un chapitre) passe avant
   Fig. 3, comme sur mobile (@media max-width:600px plus bas) — permuté
   par `order` seul, l'ordre du DOM ne bouge pas, aucun JS à toucher.
   Tabl. 2 « Chapitres à reprendre » (design/…RECAP-passe-desktop.md)
   s'ajoute en 4e position, toujours par `order` — quatrième figure du
   tableau de bord, pas un remplacement des trois existantes.
   Deux colonnes de 1000 à 1599px (donc à 936px) — quatre au-delà de
   1600px, plus de piste fixe à 380px : à quatre, les fractions ci-dessous
   donnent à peu près la même largeur à Tabl. 1 qu'avant. */
.dash-figures{ display:grid; grid-template-columns:1fr 1fr; }
.dash-fig-repartition, .dash-fig-courbe, .dash-fig-table, .dash-fig-chapitres{
  padding:var(--e-5) var(--e-6) var(--e-6);
}
.dash-fig-repartition{ order:1; }
.dash-fig-table{ order:2; }
.dash-fig-courbe{ order:3; }
.dash-fig-chapitres{ order:4; }
/* Palier 1000–1599 (deux colonnes) : la colonne de gauche de chaque
   rangée (repartition, courbe) porte le filet vertical ; la première
   rangée (repartition, table) porte le filet horizontal. */
.dash-fig-repartition, .dash-fig-courbe{ border-right:var(--trait-1) solid var(--trait); }
.dash-fig-repartition, .dash-fig-table{ border-bottom:var(--trait-1) solid var(--trait); }

@media (min-width:1600px){
  .dash-figures{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,1.15fr); }
  /* Une seule rangée de quatre : filet vertical sur les trois premières,
     jamais de filet horizontal. */
  .dash-fig-table{ border-right:var(--trait-1) solid var(--trait); }
  .dash-fig-repartition, .dash-fig-table{ border-bottom:none; }
}

/* ---- Fig. 2 : répartition par bande de loges ---- */
.dash-dist-row{ margin-bottom:var(--e-3); }
.dash-dist-row-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--e-1);
}
.dash-dist-row-head span:first-child{ font-size:var(--t-13); }
.dash-dist-row-head span:last-child{ font-family:var(--f-mono); font-size:var(--t-15); }
.dash-dist-bar-track{
  height:var(--e-2);
  background:var(--surface-creux);
  border:var(--trait-1) solid var(--trait);
  border-radius:var(--r-controle);
  overflow:hidden;
}
.dash-dist-bar-fill{ height:100%; }

/* ---- Tabl. 1 : deux matières ---- */
.dash-table-head{
  display:grid;
  grid-template-columns:1fr 60px 70px;
  gap:0 var(--e-3);
  font-family:var(--f-mono);
  font-size:var(--t-10);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--texte-3);
  padding-bottom:var(--e-2);
  border-bottom:var(--trait-1) solid var(--trait-fort);
}
.dash-table-row{
  display:grid;
  grid-template-columns:1fr 60px 70px;
  gap:0 var(--e-3);
  align-items:center;
  padding:var(--e-2) 0;
  border-bottom:var(--trait-1) solid var(--trait);
  color:inherit;
  text-decoration:none;
  transition:border-color var(--t-instant) var(--courbe);
}
.dash-table-row:hover{ border-color:var(--trait-fort); }
.dash-table-row-pct.gy-maths{ color:var(--maths-texte); }
.dash-table-row-pct.gy-physique{ color:var(--physique-texte); }
/* Matières au-delà de maths/physique — voir gySubjectClass() (js/gyre-chrome.js). */
.dash-table-row-pct.gy-cycle-1{ color:var(--cycle-1-texte); }
.dash-table-row-pct.gy-cycle-2{ color:var(--cycle-2-texte); }
.dash-table-row-pct.gy-cycle-3{ color:var(--cycle-3-texte); }
.dash-table-row-pct.gy-cycle-4{ color:var(--cycle-4-texte); }
.dash-table-row-pct.gy-neutre{ color:var(--texte-2); }
/* Détail ("N cartes dues") : redondant sur desktop avec la colonne Dues
   déjà affichée à droite de la ligne — rendu dans le DOM sur les deux
   paliers (js/app.js), visible seulement dans la carte mobile ci-dessous. */
.dash-table-row-detail{ display:none; }
/* Barre de progression des matières — pas la jauge à loges (réservée aux
   chapitres, cf. commentaire js/app.js). Pleine largeur de la ligne
   (grid-column:1/-1 : la grille 3 colonnes ci-dessus ne lui réserve
   sinon qu'une seule cellule), fine strie sous nom/%/dues plutôt qu'une
   colonne de plus — visible aux deux paliers, desktop comme mobile
   (ci-dessous, patron carte). */
.dash-table-row-gauge{
  grid-column:1 / -1;
  height:6px;
  margin-top:var(--e-1);
  border-radius:var(--r-loge);
  background:var(--surface-creux);
  border:var(--trait-1) solid var(--trait);
  overflow:hidden;
}
.dash-progress-fill{
  display:block;
  height:100%;
  border-radius:var(--r-loge);
}

/* ---- Tabl. 2 : chapitres à reprendre ---- */
.dash-chap-head, .dash-chap-row{
  display:grid;
  grid-template-columns:1fr 72px 54px;
  gap:0 var(--e-3);
  align-items:center;
}
.dash-chap-head{
  font-family:var(--f-mono);
  font-size:var(--t-10);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--texte-3);
  padding-bottom:var(--e-2);
  border-bottom:var(--trait-1) solid var(--trait-fort);
}
.dash-chap-head span:last-child{ text-align:right; }
.dash-chap-row{
  padding:var(--e-2) 0;
  border-bottom:var(--trait-1) solid var(--trait);
  color:inherit;
  text-decoration:none;
  transition:border-color var(--t-instant) var(--courbe);
}
.dash-chap-row:hover{ border-color:var(--trait-fort); }
.dash-chap-row-name{
  display:flex;
  align-items:center;
  gap:var(--e-2);
  font-size:var(--t-13);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dash-chap-row-name .gy-chip-dot{ width:7px; height:7px; border-radius:var(--r-loge); flex:none; }
.dash-chap-row-gauge{ display:flex; gap:1px; }
.dash-chap-row-due{
  text-align:right;
  font-family:var(--f-mono);
  font-size:var(--t-13);
}

/* Point de rupture canonique (gyre-system.css § LARGEURS) : 800px — la
   grille passe à une seule colonne. Le palier 1000px n'a plus de règle
   propre ici : la base ci-dessus (deux colonnes) le couvre déjà jusqu'à
   1600px, il n'y a plus rien à changer précisément à 1000px pour cette
   grille. */
@media (max-width:800px){
  .dash-hero{ flex-wrap:wrap; }
  .dash-hero-side{ border-left:none; padding-left:0; border-top:var(--trait-1) solid var(--trait); padding-top:var(--e-4); }
  .dash-figures{ grid-template-columns:1fr; }
  /* Empilées, dans l'ordre visuel (order) : repartition, table, courbe,
     chapitres — les trois premières de la pile gardent un filet bas. */
  .dash-fig-repartition, .dash-fig-table, .dash-fig-courbe{ border-right:none; border-bottom:var(--trait-1) solid var(--trait); }
  .dash-table-head, .dash-table-row{ grid-template-columns:1fr 46px 56px; }
}

/* ============================================================
   MOBILE (design/mobile-redesign-brief-phase2.md) : l'action la plus
   fréquente de l'app ("Réviser les flashcards") ne doit pas rester
   noyée sous la jauge et le bilan des cartes dues — le hero se
   réordonne. Fig. 3 se tasse pour la densité mobile. Tabl. 1 devient
   une carte à trois étages, même patron que erreurs/planning.
   ============================================================ */
@media (max-width:600px){
  /* Tabl. 2 est une addition de la passe desktop (design/…RECAP-passe-
     desktop.dc.html) : le mobile a été refondu et validé sans elle —
     masquée ici plutôt que d'y improviser un patron non testé sur
     téléphone. */
  .dash-fig-chapitres{ display:none; }

  /* Le hero empile trois blocs à densité desktop (deux nombres à 64px,
     jauge dépliée à 8 loges numérotées) — sur 375px, ça pousse Fig. 2/3/
     Tabl. 1 loin sous le pli (retour de test réel : "pas assez
     d'info visible sans scroller"). Resserré une première fois avec un
     empilement vertical (order), puis retour de test réel n°2 : Fig. 1
     et les cartes dues restaient chacune sur toute la largeur alors
     qu'elles tiennent très bien côte à côte — passage en grille 2
     colonnes, seul « Le plus faible » (texte + bouton) garde la pleine
     largeur en haut. */
  .dash-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "main main"
      "gauge due";
    column-gap:var(--e-4);
    row-gap:0;
    padding:var(--e-4);
  }
  /* Barre de séparation continue plutôt que deux filets indépendants sur
     .dash-hero-gauge/.dash-hero-due — ces deux-là partagent une même
     ligne de grille mais avec un column-gap entre eux, donc leurs
     border-top respectifs ne se rejoignaient jamais (retour de test réel :
     "certaines [barres] se touchent, pas d'autres"). Un seul filet, porté
     par .dash-hero-main qui occupe toute la largeur de la ligne du haut,
     couvre tout le vide y compris le column-gap. */
  .dash-hero-main{
    grid-area:main;
    max-width:none;
    padding-bottom:var(--e-4);
    border-bottom:var(--trait-1) solid var(--trait);
    margin-bottom:var(--e-4);
  }
  .dash-hero-gauge{
    grid-area:gauge;
    width:auto;
    border-left:none;
    padding-left:0;
    /* Annule .dash-hero-side{border-top:...} posé par le palier 800px
       ci-dessus (toujours actif à 600px, une media query ne désactive pas
       les autres) — sinon le filet du bloc .dash-hero-main ci-dessus se
       retrouve doublé d'un second, plus court, juste en dessous. */
    border-top:none;
    padding-top:0;
  }
  .dash-hero-due{
    grid-area:due;
    width:auto;
    border-left:var(--trait-1) solid var(--trait);
    padding-left:var(--e-4);
    border-top:none;
    padding-top:0;
  }
  .dash-hero-due-value{ font-size:var(--t-34); }
  .dash-hero-bilan{ margin-top:var(--e-2); padding-top:var(--e-2); }
  /* renderLogeGaugeDeplié() (js/gyre-chrome.js, partagée par plusieurs
     écrans) sort ses tailles en style inline — un média query externe ne
     peut pas les battre sans !important. Portée volontairement limitée
     au hero du dashboard mobile, pas à la fonction elle-même (chapter.html
     et stats.html gardent leur densité, déjà traitée séparément). */
  #weakestGauge p:first-child{ font-size:var(--t-40) !important; }
  #weakestGauge p:nth-child(2){ margin-top:var(--e-1) !important; }
  #weakestGauge > div:first-of-type{ margin-top:var(--e-3) !important; }

  .dash-courbe-svg{ height:108px; }
  .dash-fig-courbe{ overflow-x:auto; }

  /* Tabl. 1 (matières, avec ses liens vers chaque chapitre) remonte avant
     Fig. 2/3 — les liens actionnables ne doivent pas rester enterrés sous
     les deux figures purement informatives (retour de test réel). */
  .dash-fig-table{ order:1; border-bottom:var(--trait-1) solid var(--trait); }
  .dash-fig-repartition{ order:2; }
  .dash-fig-courbe{ order:3; }

  .dash-table-head{ display:none; }
  .dash-table-row{
    display:block;
    background:var(--surface-bloc);
    border:var(--trait-1) solid var(--trait);
    border-radius:var(--r-bloc);
    padding:var(--e-3);
    margin-bottom:var(--e-2);
  }
  .dash-table-row:last-child{ margin-bottom:0; }
  .dash-table-row-name{
    display:inline-block;
    font-family:var(--f-mono) !important;
    font-size:var(--t-10) !important;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .dash-table-row-name.gy-maths{ color:var(--maths-texte); }
  .dash-table-row-name.gy-physique{ color:var(--physique-texte); }
  .dash-table-row-name.gy-cycle-1{ color:var(--cycle-1-texte); }
  .dash-table-row-name.gy-cycle-2{ color:var(--cycle-2-texte); }
  .dash-table-row-name.gy-cycle-3{ color:var(--cycle-3-texte); }
  .dash-table-row-name.gy-cycle-4{ color:var(--cycle-4-texte); }
  .dash-table-row-name.gy-neutre{ color:var(--texte-2); }
  .dash-table-row-pct{
    display:block;
    font-family:var(--f-display) !important;
    font-weight:700;
    font-size:var(--t-22) !important;
    letter-spacing:-.02em;
    text-align:left !important;
  }
  .dash-table-row-due{ display:none; }
  .dash-table-row-gauge{
    height:var(--e-2); /* 8px : pas d'ancienne jauge à raccorder ici, e-2 fait aussi bien que le 9px hors échelle */
    margin:var(--e-2) 0;
  }
  .dash-table-row-detail{
    display:block;
    font-family:var(--f-mono);
    font-size:var(--t-11);
    color:var(--texte-2);
  }
}