/* ============================================================
   SpiLi — La visite conduite de l'Atlas
   Identité « Le Filet » · lot 3-2
   ------------------------------------------------------------
   Une station est une scène et un cartel. La scène est un SVG
   produit à la compilation : cette feuille l'habille, elle ne
   le fabrique pas.

   La palette de la scène est plus sombre que le régime
   `.spili-atlas` (#0E0E10) — une carte a besoin de plus de
   dynamique qu'un panneau. Ces valeurs valent pour la scène
   cartographique seule ; tout le reste du régime sombre garde
   les jetons du système. C'est une exception écrite, pas une
   dérive : elle est bornée à `.scene`.

   Grammaire des signes, inchangée depuis le lot 3a :
   — la FORME dit la nature : disque = entrée, carré = ville ;
   — la TRAME dit la précision : plein pour une étendue dont le
     contour est chargé, tireté pour l'emprise approchée,
     pointillé pour le repère indicatif ;
   — l'ACCENT ne dit qu'un état.
   Aucune couleur ne code un contenu.
   ============================================================ */

.visite-seuil { padding: 54px 0 0; }
.visite-seuil h1 { font-size: clamp(2rem, 4.4vw, 2.85rem); margin: 6px 0 14px; }

.visite-rang {
  font-family: var(--spili-data); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}

.visite-these {
  font-size: 1.12rem; line-height: 1.62; max-width: 68ch;
  color: var(--spili-texte-doux);
}

/* La mention « doc. » : un parcours dont les stations ne sont pas écrites.
   Elle se lit, elle ne se devine pas à une nuance de gris. */
.visite-doc-marque {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-accent);
}

.visite-avertissement {
  margin-top: 20px; padding: 14px 18px;
  border-left: var(--spili-notation) solid var(--spili-texte);
  background: var(--spili-fond-carte);
  font-size: 0.95rem; line-height: 1.6; max-width: 74ch;
}

/* ---------- Le seuil : les sept parcours en lignes ---------- */

.visite-liste { padding: 34px 0 60px; }
.visite-liste ul { list-style: none; margin: 0; padding: 0; }

.visite-ligne {
  display: grid; grid-template-columns: 46px 1fr 200px;
  gap: 18px; align-items: baseline;
  padding: 17px 6px 18px;
  border-bottom: 1px solid var(--spili-trait);
}
.visite-ligne:first-child { border-top: 1px solid var(--spili-trait); }

.visite-ligne-numero {
  font-family: var(--spili-data); font-size: 12px;
  color: var(--spili-texte-faible);
}
.visite-ligne-corps a { font-size: 1.06rem; font-weight: 500; }
.visite-ligne-corps p {
  margin: 6px 0 0; font-size: 0.9rem; line-height: 1.55;
  color: var(--spili-texte-faible); max-width: 62ch;
}
.visite-ligne-etat {
  font-family: var(--spili-data); font-size: 11px;
  color: var(--spili-texte-faible); text-align: right;
}

@media (max-width: 860px) {
  .visite-ligne { grid-template-columns: 34px 1fr; }
  .visite-ligne-etat { grid-column: 2; text-align: left; }
}

/* ---------- Une station ---------- */

.visite-stations { padding: 28px 0 0; }

.station {
  display: grid; grid-template-columns: 1fr 296px;
  gap: 30px; align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--spili-trait);
}

/* L'habillage de la scène vit désormais dans `css/scene.css`, partagé avec
   les cartouches des fiches de l'Atlas (lot V-1). Les pages de visite le
   chargent avant celle-ci. */

/* ---------- Le cartel ---------- */

.station-surtitre {
  font-family: var(--spili-data); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-accent); margin-bottom: 10px;
}
.station-cartel h2 {
  font-size: 1.6rem; line-height: 1.14; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.station-texte { font-size: 0.94rem; line-height: 1.62; max-width: 70ch; }

.station-doc {
  margin-top: 12px; font-size: 0.88rem; line-height: 1.55;
  color: var(--spili-texte-faible);
}

.station-appareil { margin: 18px 0 0; display: grid; gap: 7px; }
.station-appareil div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
.station-appareil dt {
  font-family: var(--spili-data); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spili-texte-faible);
}
.station-appareil dd { margin: 0; font-size: 0.88rem; line-height: 1.45; }

.station-cartel .spili-preuve { margin: 16px 0; width: 100%; }

.station-entrees { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.station-entrees a { font-size: 0.88rem; }

@media (max-width: 860px) {
  /* Sous 860 px le cartel passe sous la carte : la scène garde sa largeur,
     parce qu'elle est déjà cadrée et n'a rien à explorer au doigt. */
  .station { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- La sortie ---------- */

.visite-sortie {
  padding: 40px 0 70px;
  border-top: var(--spili-notation) solid var(--spili-texte);
  margin-top: 30px;
}
.visite-sortie h2 { font-size: 1.5rem; margin: 6px 0 20px; max-width: 30ch; }

.visite-compte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 22px; }
.visite-compte dt {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible); margin-bottom: 5px;
}
.visite-compte dd { margin: 0; font-size: 1.05rem; }

@media (max-width: 700px) {
  .visite-compte { grid-template-columns: 1fr; gap: 14px; }
}

.visite-reste {
  font-size: 0.9rem; line-height: 1.6; max-width: 74ch;
  color: var(--spili-texte-faible); margin-bottom: 12px;
}

.visite-portes { margin-top: 28px; }
.visite-portes h3 {
  font-family: var(--spili-data); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-texte-faible); margin-bottom: 12px;
}
.visite-portes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* ============================================================
   La conduite — lot 3-3
   ------------------------------------------------------------
   Tout ce qui suit ne s'applique qu'une fois `data-conduite`
   posé par `js/visite.js`. Sans script, la salle reste la
   séquence du lot 3-2 : les sélecteurs ci-dessous ne mordent
   sur rien, et c'est voulu.

   Les mesures viennent du §4 de `01-ATLAS-SALLE.md` : rail de
   246 px, surtitre en 9,5 px, filet d'accent de 3 px sur la
   station active. Le régime reste clair — le sombre s'arrête au
   SVG.
   ============================================================ */

/* `.station` est une grille : sans cette règle, `display: grid`
   l'emporterait sur le `display: none` que l'attribut `hidden`
   applique par défaut, et le masquage n'aurait aucun effet. */
.station[hidden],
.visite-sortie[hidden] { display: none; }

.station:focus-visible,
.visite-sortie:focus-visible {
  outline: 2px solid var(--spili-accent);
  outline-offset: 4px;
}

.visite-salle[data-conduite] .visite-salle-grille {
  display: grid;
  grid-template-columns: 246px 1fr;
  gap: 34px;
  align-items: start;
}

/* Un enfant de grille vaut `min-width: auto` : il refuse de descendre sous la
   largeur de son contenu, et le rail — une rangée de titres qui ne se coupent
   pas — pousse alors la page à près de mille pixels sur un téléphone. Ces deux
   lignes sont ce qui autorise le rail à défiler dans sa colonne au lieu
   d'élargir tout le document. */
.visite-salle[data-conduite] .visite-salle-grille > * { min-width: 0; }
.visite-rail ol { max-width: 100%; }

/* ---------- Le rail ---------- */

/* Le rail se colle SOUS l'en-tête, qui est collant lui aussi : à `top: 22px`
   il se rangeait derrière et perdait son titre. `--spili-entete` porte la
   hauteur, et suit les ruptures de la navigation. */
.visite-rail {
  padding: 28px 0 0;
  position: sticky; top: calc(var(--spili-entete) + 22px);
  max-height: calc(100vh - var(--spili-entete) - 44px);
  overflow-y: auto;
}

.visite-rail > .visite-rail-titre {
  font-family: var(--spili-data); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 10px; padding-bottom: 9px;
  border-bottom: 1px solid var(--spili-trait);
}

.visite-rail ol { list-style: none; margin: 0; padding: 0; }

.visite-rail li { border-bottom: 1px solid var(--spili-trait-faible); }

.visite-rail a {
  display: block; padding: 11px 12px 12px;
  text-decoration: none;
  /* Le filet gauche existe dès le repos, transparent : sans lui, la station
     active décalerait le texte de trois pixels en s'activant. */
  border-left: var(--spili-notation) solid transparent;
  transition: background var(--spili-transition), border-color var(--spili-transition);
}

.visite-rail a:hover { background: var(--spili-accent-trace); }

.visite-rail a:focus-visible {
  outline: 2px solid var(--spili-accent);
  outline-offset: -2px;
}

.visite-rail-kicker {
  display: block;
  font-family: var(--spili-data); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-bottom: 3px;
}

.visite-rail-nom {
  display: block; font-size: 13.5px; line-height: 1.3;
  color: var(--spili-texte-doux);
}

.visite-rail .est-active > a {
  background: var(--spili-accent-voile);
  border-left-color: var(--spili-accent);
}
.visite-rail .est-active .visite-rail-nom { color: var(--spili-texte); }
.visite-rail .est-active .visite-rail-kicker { color: var(--spili-accent); }

/* Une station déjà traversée s'efface, elle ne disparaît pas : le visiteur doit
   pouvoir y revenir, et voir d'un coup d'œil où il en est. */
.visite-rail .est-passee .visite-rail-nom,
.visite-rail .est-passee .visite-rail-kicker { color: var(--spili-texte-faible); }

/* ---------- La conduite ---------- */

.visite-conduite {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 26px;
  margin-top: 26px; padding: 16px 0 40px;
  border-top: 1px solid var(--spili-trait);
}

.visite-progression {
  display: flex; align-items: center; gap: 14px;
  margin: 0; margin-right: auto;
}

.visite-compteur {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--spili-texte-faible); white-space: nowrap;
}

.visite-pastilles { display: flex; align-items: center; gap: 5px; }

.visite-pastilles span {
  width: 6px; height: 6px;
  background: var(--spili-trait);
  transition: width var(--spili-transition), background var(--spili-transition);
}
.visite-pastilles .est-faite { background: var(--spili-accent-doux); }
.visite-pastilles .est-courante { width: 18px; background: var(--spili-accent); }

.visite-boutons { display: flex; gap: 10px; }

.visite-bouton {
  font: inherit; font-size: 12px;
  padding: 7px 13px; white-space: nowrap;
  color: var(--spili-texte); background: transparent;
  border: 1px solid var(--spili-trait); border-radius: var(--spili-rayon);
  cursor: pointer;
  transition: border-color var(--spili-transition), color var(--spili-transition);
}
.visite-bouton:hover:not(:disabled) { border-color: var(--spili-texte); }
.visite-bouton--suivant { border-color: var(--spili-accent); color: var(--spili-accent); }
.visite-bouton--suivant:hover:not(:disabled) { border-color: var(--spili-accent-fort); color: var(--spili-accent-fort); }
.visite-bouton:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; }

/* Un bouton désactivé reste lisible : il indique une borne du parcours, il ne
   se cache pas. Le contraste tient le seuil AA. */
.visite-bouton:disabled { color: var(--spili-texte-faible); cursor: default; }

.visite-aide {
  margin: 0; flex-basis: 100%;
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--spili-texte-faible);
}
.visite-aide kbd {
  font-family: var(--spili-data); font-size: 10.5px;
  padding: 1px 5px; border: 1px solid var(--spili-trait);
}

/* ---------- Ruptures ---------- */

/* Sous 860 px, le rail passe en bandeau horizontal défilable au-dessus de la
   scène (§5 du handoff). La navigation, elle, reste toujours visible : c'est
   par elle qu'on avance quand le rail sort de l'écran. */
@media (max-width: 860px) {
  .visite-salle[data-conduite] .visite-salle-grille {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .visite-rail {
    position: static; padding: 22px 0 0;
    border-bottom: 1px solid var(--spili-trait);
  }
  .visite-rail ol {
    display: flex; gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .visite-rail li {
    flex: 0 0 auto; max-width: 210px;
    border-bottom: 0; border-right: 1px solid var(--spili-trait-faible);
  }
  .visite-rail a {
    border-left: 0;
    border-bottom: var(--spili-notation) solid transparent;
    padding: 10px 14px;
  }
  .visite-rail .est-active > a {
    border-left-color: transparent;
    border-bottom-color: var(--spili-accent);
  }
  .visite-rail-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
  .visite-conduite { gap: 14px 16px; }
  .visite-progression { margin-right: 0; flex-basis: 100%; }
  .visite-boutons { flex-basis: 100%; }
  .visite-bouton { flex: 1; text-align: center; }
}