/* guide.html — reconstruit sur la composition de la maquette pilotage :
   Fig. 1 pleine largeur (étapes réelles de scheduler.js), Fig. 2 grille de
   six cartes avec aperçu vivant. Page statique, sauf les deux aperçus
   calculés depuis les vraies données (js/guide.js). */

/* Page --largeur-donnees (gyre-system.css § LARGEURS), pas --largeur-prose
   par défaut de main : la colonne de lecture (titre, sous-titre, texte de
   Fig. 1) reste plafonnée à 760px ci-dessous, mais ce qui l'entoure —
   Fig. 1 pleine largeur, Fig. 2 en plusieurs cartes de front — a besoin de
   la largeur dense pour ne pas rester coincé à 760px comme aujourd'hui
   (design/desktop-redesign-brief*.md : « le travail porte sur ce qui
   entoure la colonne de lecture »). */
main.guide-container{ max-width:var(--largeur-donnees); padding:var(--e-7) var(--e-6); }
.guide-container { display: flex; flex-direction: column; }
.guide-container .gy-page-title{ max-width:760px; }

/* ---- Fig. 1 ---- */
.guide-fig1 {
    background: var(--surface-bloc);
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-bloc);
    padding: var(--e-6);
    margin-bottom: var(--e-6);
}
.guide-fig1 h3 {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-22);
    letter-spacing: -.02em;
    margin: 0 0 var(--e-3);
}
.guide-fig1 p {
    font-size: var(--t-15);
    line-height: 1.8;
    color: var(--texte-2);
    margin: 0 0 var(--e-5);
    max-width: 820px;
}
.interval-row {
    display: flex;
    gap: var(--e-1);
}
.interval-item { flex: 1; min-width: 0; }
.interval-pill {
    height: var(--e-5);
    border-radius: var(--r-loge);
    background: var(--surface-creux);
    border: var(--trait-1) solid var(--trait);
    /* Le numéro de loge est écrit DANS la pastille, en texte principal. */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-size: var(--t-11);
    color: var(--texte);
}
.interval-label {
    font-family: var(--f-mono);
    font-size: var(--t-11);
    text-align: center;
    color: var(--texte-2);
    margin: var(--e-2) 0 0;
}

/* ---- Fig. 2 ---- */
.guide-fig2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-5);
}
.guide-fig2-choix { margin-bottom: var(--e-6); }
.guide-card {
    background: var(--surface-bloc);
    border: var(--trait-1) solid var(--trait);
    border-radius: var(--r-bloc);
    padding: var(--e-5);
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    min-width: 0;
}
.guide-card h3 {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--t-22);
    letter-spacing: -.02em;
    margin: 0;
}
.guide-card p {
    font-size: var(--t-13);
    line-height: 1.8;
    color: var(--texte-2);
    margin: 0;
}
.guide-card-preview {
    margin-top: auto;
    padding-top: var(--e-3);
    border-top: var(--trait-1) solid var(--trait);
}
.guide-card-preview-row { display: flex; gap: var(--e-2); }
/* Les touches A B C D de l'aperçu QCM sont illustratives, pas des raccourcis
   clavier : gyre-system.css masque .gy-kbd sous pointeur grossier (téléphone,
   où aucun raccourci n'existe) — ici elles doivent rester visibles, sinon
   l'aperçu du QCM est vide sur mobile. */
.guide-card-preview .gy-kbd { display: inline-block; }
.guide-card-mono {
    font-family: var(--f-mono);
    font-size: var(--t-11);
    color: var(--texte-2);
    margin: 0;
}
.guide-photo-swatch {
    border: var(--trait-2) dashed var(--trait);
    border-radius: var(--r-controle);
    padding: var(--e-4);
    text-align: center;
    font-family: var(--f-mono);
    font-size: var(--t-10);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-3);
}
.guide-badge {
    font-family: var(--f-mono);
    font-size: var(--t-10);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: var(--e-1) var(--e-2);
    border-radius: var(--r-controle);
    border: var(--trait-1) solid var(--trait);
    color: var(--texte-2);
}
.guide-badge-cours { background: var(--urgence); border-color: var(--urgence); color: var(--texte-negatif); }
.guide-badge-raisonnement { border-color: var(--trait-fort); color: var(--texte); }
.guide-badge-calcul { color: var(--texte-2); }

/* ============================================================
   PALIER DENSE — 1600px (gyre-system.css § LARGEURS). En dessous,
   jusqu'à 600px (y compris 936px), la composition ci-dessus ne bouge
   pas : c'est déjà celle du palier 800–999 (deux cartes, frise resserrée).
   ============================================================ */
@media (min-width:1600px){
  .guide-container .gy-page-title{ font-size:var(--t-64); }
  /* Titre + texte d'intro de Fig. 1 passent en deux colonnes (280px +
     flexible) plutôt qu'empilés — #intervalRow reste seul sur sa ligne,
     en dessous, pleine largeur (grid-column). */
  .guide-fig1{
    display:grid;
    grid-template-columns:280px minmax(0, 1fr);
    column-gap:var(--e-7);
    row-gap:var(--e-4);
  }
  .guide-fig1 h3{ margin:0; }
  .guide-fig1 p{ margin:0; }
  .interval-row{ grid-column:1 / -1; }
  .interval-pill{ height:var(--e-6); }
  .guide-fig2{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   MOBILE (≤ 600 px) — les MÊMES composants que le desktop ; seuls changent
   l'espacement, l'échelle typographique et le sens d'empilement (colonnes
   qui passent en lignes) : la frise passe de 8 colonnes à 4 colonnes sur 2
   rangées (Apprentissage, loges 1 à 3 / loges 4 à 7), les grilles de cartes
   d'une colonne. Aucune version « allégée » : une carte reste une carte,
   avec son aperçu. (Avant le 20 sept. 2026, ce palier remplaçait la frise
   par une jauge + un tableau et les cartes par des tableaux/un index.)
   ============================================================ */
@media (max-width:600px){
  /* Compaction (audit UI/UX du 6 sept. : "1,5 écran pour 8 étapes") :
     main.guide-container{padding:var(--e-7) var(--e-6)} (règle de base,
     non conditionnelle) est plus spécifique que le repli générique
     main{padding-top:e-2} de gyre-system.css — sur mobile, ce repli
     générique ne s'applique donc JAMAIS ici, contrairement à ce que son
     propre commentaire annonce ("dashboard/chapitre/exercice s'en sortent
     déjà, ils annulent ce padding eux-mêmes" — guide n'était pas dans ce
     lot). Même geste que ces pages : .guide-container reprend son propre
     padding mobile plutôt que de compter sur la règle générique. */
  main.guide-container{ padding:var(--e-2) var(--e-4) var(--e-4); }
  .guide-fig1{ padding:var(--e-4); margin-bottom:var(--e-4); }
  .guide-fig1 h3{ margin-bottom:var(--e-2); }
  /* Interlignes resserrés (demande explicite) : 1.8 vient de la colonne de
     lecture desktop (Fig. 1 sur 820px) — beaucoup trop aéré une fois le
     texte réduit à la largeur d'un écran de téléphone. */
  .guide-fig1 p{ line-height:1.6; margin-bottom:var(--e-3); }

  /* Frise : 4 colonnes sur 2 rangées, ordre de lecture gauche-droite puis
     ligne suivante ; le numéro de loge reste dans chaque pastille. */
  .interval-row{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--e-3) var(--e-1);
  }
  /* « Apprentissage » (13 signes) dépasse la colonne (~74 px) : coupure
     typographique française plutôt qu'un débordement. */
  .interval-label{ hyphens:auto; overflow-wrap:break-word; }
  /* La pastille de l'apprentissage (« avant la loge 1 ») passe sur deux
     lignes dans une colonne de ~74 px : toutes les pastilles prennent la
     même hauteur, texte centré, pour que la rangée reste alignée. */
  .interval-pill{
    height:auto;
    min-height:calc(var(--e-5) + var(--e-3));
    padding:var(--e-0) var(--e-1);
    line-height:1.2;
    text-align:center;
  }

  /* Grilles de cartes : une colonne, cartes compactées. */
  .guide-fig2{ grid-template-columns:minmax(0, 1fr); gap:var(--e-3); }
  .guide-fig2-choix{ margin-bottom:var(--e-4); }
  .guide-card{ padding:var(--e-4); gap:var(--e-2); }
  .guide-card p{ line-height:1.6; }
  .guide-card-preview{ padding-top:var(--e-2); }
}