/* « La visite du mois » : situations d'entrée, choix du mois, récit, carte qui se recadre, volet des références. */

/* Situations d'usage : trois entrées cliquables dans la visite. */
.labo-visite-situations { margin: 0 0 24px; }
.labo-visite-situations-titre { margin: 0 0 8px; font: 600 20px/1.3 var(--titre); color: var(--bleu-froid); }
.labo-visite-situations-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.labo-visite-situations-liste li { display: flex; }
.labo-visite-situation {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; padding: 16px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  font: 400 16px/1.5 var(--texte); color: var(--encre); text-align: left; cursor: pointer;
}
.labo-visite-situation:hover { border-color: var(--bleu-froid); }
.labo-visite-situation:focus-visible { outline: 2px solid var(--bleu-froid); outline-offset: 2px; }
.labo-visite-situation-tete { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-froid); }
.labo-visite-situation-aller { margin-top: auto; font-weight: 600; color: var(--bleu-froid); text-decoration: underline; }

/* Mois affiché et choix d'un mois précédent. */
.labo-visite-barre-mois { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 16px; padding: 8px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.labo-visite-mois-titre { margin: 0; font-size: 16px; color: var(--ardoise); }
.labo-visite-mois-titre strong { font: 600 18px var(--titre); color: var(--encre); }
.labo-visite-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; }
.labo-visite-choix label { font-weight: 600; color: var(--encre); }
.labo-visite-select {
  min-height: 44px; max-width: 100%; padding: 0 8px; font: 400 15px var(--texte); color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.labo-visite-select:hover { border-color: var(--bleu-froid); }
.labo-visite-attente { color: var(--ardoise); }

.labo-visite-bandeau {
  margin: 0 0 8px; padding: 8px 16px; background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon); font-size: 14px; line-height: 1.5; color: var(--ardoise);
}
.labo-visite-mode { margin: 0 0 24px; color: var(--ardoise); font-size: 15px; }

/* Grand écran : récit | carte | références. La carte et le volet restent à l'écran pendant que le récit défile. */
.labo-visite-corps {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  grid-template-areas: "recit carte volet"; gap: 24px; align-items: start;
}
.labo-visite-recit { grid-area: recit; }
.labo-visite-panneau { grid-area: carte; }
.labo-visite-volet { grid-area: volet; }

/* Récit */
.labo-visite-etapes { list-style: none; margin: 0; padding: 0; }
.labo-visite-etape { margin: 0 0 48vh; }
.labo-visite-etape:last-child { margin-bottom: 48px; }
.labo-visite-bloc {
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 24px;
  transition: border-color .4s ease;
}
/* Le récit de l'étape, mis en valeur comme le cartel d'une œuvre. */
.labo-visite-histoire { margin: 0 0 8px; padding: 16px 24px; background: var(--bleu-pale); border-left: 4px solid var(--bleu-froid); border-radius: var(--rayon); }
.labo-visite-histoire p { margin: 0; font: 400 19px/1.6 var(--titre); color: var(--encre); }
.labo-visite-active .labo-visite-bloc { border-color: var(--bleu-froid); }
.labo-visite-surtitre { margin: 0 0 8px; font: 500 13px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
.labo-visite-titre-etape { font: 600 24px/1.25 var(--titre); color: var(--bleu-froid); margin: 0 0 16px; }
.labo-visite-titre-etape:focus { outline: none; }
.labo-visite-titre-etape:focus-visible { outline: 2px solid var(--bleu-froid); outline-offset: 4px; }
.labo-visite-etiquette { margin: 24px 0 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }

.labo-visite-descs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.labo-visite-desc {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 16px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  font-size: 15px; line-height: 1.3; color: var(--encre); text-decoration: none;
}
.labo-visite-desc:hover { border-color: var(--bleu-froid); color: var(--bleu-froid); }
.labo-visite-desc .pastille { width: 10px; height: 10px; }
.labo-visite-n { font: 500 13px var(--mono); color: var(--ardoise); background: var(--brume); border-radius: var(--rayon); padding: 0 8px; }

.labo-visite-pied { margin: 24px 0 0; padding-top: 8px; border-top: 1px solid var(--brume); display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 15px; }
.labo-visite-pied a { display: inline-flex; align-items: center; min-height: 44px; }
.labo-visite-remonter { margin-left: auto; }

/* Dernière étape : nouveaux sujets, rapprochement, hausse et recul. */
.labo-visite-paire { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.labo-visite-et { font-style: italic; color: var(--ardoise); }
.labo-visite-fin { margin: 0 0 24vh; padding: 24px; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--blanc); }
.labo-visite-fin p { margin: 0 0 16px; font: 400 18px/1.5 var(--titre); color: var(--encre); }

/* Pour les spécialistes (replié). */
.labo-visite-specialistes { margin: 24px 0 0; padding: 0 16px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }
.labo-visite-specialistes summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--bleu-froid); cursor: pointer; }
.labo-visite-specialistes-corps { padding: 0 0 16px; max-width: 72ch; font-size: 15px; line-height: 1.6; color: var(--encre); }
.labo-visite-specialistes-corps p { margin: 0 0 8px; }

/* Barres des pôles (étape 1) */
.labo-visite-poles ul { list-style: none; margin: 0; padding: 0; }
.labo-visite-poles li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--brume); font-size: 15px; }
.labo-visite-pole-nom { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.labo-visite-barre { position: relative; height: 16px; background: var(--brume); border-radius: var(--rayon); grid-column: 1 / -1; grid-row: 2; }
.labo-visite-barre-val { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--rayon); }
.labo-visite-barre-avant { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--encre); }
.labo-visite-pole-n { font-variant-numeric: tabular-nums; color: var(--ardoise); white-space: nowrap; }
.labo-visite-pole-n strong { color: var(--encre); }
.labo-visite-note { margin: 8px 0 0; font-size: 14px; color: var(--ardoise); }

/* Carte */
.labo-visite-panneau {
  position: sticky; top: 16px; z-index: 1; display: flex; flex-direction: column;
  height: calc(100vh - 32px); max-height: 800px; min-height: 440px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.labo-visite-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; border-bottom: 1px solid var(--filet); background: var(--blanc); }
.labo-visite-compteur { margin: 0; font: 500 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
/* Trois colonnes : le numéro d'étape figure déjà dans le récit et le volet ; le compteur reste lu par les lecteurs d'écran. */
.labo-visite-panneau .labo-visite-compteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.labo-visite-court { display: none; }
.labo-visite-btn[disabled] { opacity: .45; cursor: default; }
.labo-visite-debut { margin-left: auto; }
.labo-visite-debut[disabled] { opacity: .45; cursor: default; text-decoration: none; }
.labo-visite-carte { flex: 1; min-height: 0; position: relative; background: var(--papier); }
.labo-visite-svg { display: block; width: 100%; height: 100%; }
.labo-visite-legende { list-style: none; margin: 0; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--filet); font-size: 13px; color: var(--ardoise); }
.labo-visite-legende li { display: inline-flex; align-items: center; gap: 8px; }
.labo-visite-legende .pastille { width: 10px; height: 10px; }

/* Volet des références de l'étape */
.labo-visite-volet {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--blanc); border: 1px solid var(--filet); border-top: 4px solid var(--bleu-froid);
  border-radius: var(--rayon); padding: 16px;
}
.labo-visite-volet-etape { margin: 0 0 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ardoise); }
.labo-visite-volet-titre { margin: 0 0 8px; font: 600 20px/1.25 var(--titre); color: var(--bleu-froid); }
.labo-visite-volet-intro { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ardoise); }
.labo-visite-volet-pied { margin: 8px 0 0; font-size: 15px; }
.labo-visite-volet-pied a { display: inline-flex; align-items: center; min-height: 44px; }

.labo-visite-refs { list-style: none; margin: 0; padding: 0; }
.labo-visite-ref { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; border-radius: var(--rayon); transition: background-color .2s ease; }
.labo-visite-ref:last-child { border-bottom: 0; }
.labo-visite-ref.labo-visite-ref-active { background: var(--bleu-pale); }
.labo-visite-ref .ref-titre { font-size: 17px; }
.labo-visite-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 2px;
  background: var(--bleu-froid); color: var(--blanc); border-radius: var(--rayon); font: 500 13px/1 var(--mono);
}
.labo-visite-ref-active .labo-visite-num { background: var(--encre); }
.labo-visite-num-petit { width: 16px; height: 16px; font-size: 11px; margin: 0; }
.labo-visite-lecture { margin: 0; font-size: 15px; }
.labo-visite-lecture a { display: inline-flex; align-items: center; min-height: 44px; }
.labo-visite-sans-lien { color: var(--ardoise); font-style: italic; }

/* Étape 1 : les chroniques du mois dans le volet. */
.labo-visite-chron-aller {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 44px; padding: 0;
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--encre);
}
.labo-visite-chron-n { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
.labo-visite-chron-theme { font: 600 17px/1.35 var(--titre); color: var(--bleu-froid); text-decoration: underline; text-underline-offset: 3px; }
.labo-visite-chron-aller:hover .labo-visite-chron-theme { color: var(--encre); }

/* Éléments SVG */
.labo-visite-noeud { transition: opacity .6s ease; stroke: var(--blanc); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.labo-visite-eteint { opacity: .14; }
.labo-visite-lot { opacity: .32; }
.labo-visite-mois { opacity: .7; }
.labo-visite-lie { opacity: .9; }
.labo-visite-allume { opacity: 1; stroke: var(--bleu-froid); stroke-width: 3px; }
.labo-visite-etiq { font-family: var(--texte); font-weight: 600; fill: var(--encre); stroke: var(--papier); paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.labo-visite-trait { stroke: var(--bleu-moyen); stroke-width: 1px; opacity: .55; animation: labo-visite-apparition .6s ease both; }
.labo-visite-croisement { stroke: var(--bleu-froid); stroke-width: 2.5px; stroke-dasharray: 6 4; animation: labo-visite-apparition .6s ease both; }
.labo-visite-repere { animation: labo-visite-apparition .6s ease .2s both; cursor: default; }
.labo-visite-repere rect { fill: var(--bleu-froid); stroke: var(--blanc); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.labo-visite-repere text { fill: var(--blanc); font-family: var(--mono); font-weight: 500; pointer-events: none; }
.labo-visite-repere.labo-visite-repere-actif rect { fill: var(--encre); }
@keyframes labo-visite-apparition { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .labo-visite-bloc, .labo-visite-noeud, .labo-visite-ref { transition: none; }
  .labo-visite-trait, .labo-visite-croisement, .labo-visite-repere { animation: none; }
}

/* Pas à pas (sous 1 100 px) : une seule étape affichée, les boutons collés en haut de l'écran.
   Tablette : récit et carte côte à côte, références dessous. */
@media (max-width: 1099px) {
  .labo-visite-corps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "commandes commandes" "recit carte" "volet volet";
  }
  .labo-visite-corps > .labo-visite-commandes {
    grid-area: commandes; position: sticky; top: 0; z-index: 2;
    border: 1px solid var(--filet); border-radius: var(--rayon);
  }
  .labo-visite-etape, .labo-visite-etape:last-child { margin: 0; }
  .labo-visite-etape:not(.labo-visite-active) { display: none; }
  .labo-visite-bloc { border-color: var(--filet); }
  .labo-visite-fin { display: none; }
  .labo-visite-situations-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .labo-visite-panneau { position: static; height: 560px; max-height: none; min-height: 0; }
  .labo-visite-volet { position: static; max-height: none; overflow: visible; }
  .labo-visite-volet .labo-visite-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 24px; }
  .labo-visite-ref:last-child { border-bottom: 1px solid var(--brume); }
}

/* Téléphone : récit, puis carte, puis références, les uns sous les autres. */
@media (max-width: 860px) {
  .labo-visite-corps { grid-template-columns: minmax(0, 1fr); grid-template-areas: "commandes" "recit" "carte" "volet"; gap: 16px; }
  .labo-visite-panneau { height: 64vh; min-height: 320px; max-height: 520px; }
  .labo-visite-legende { gap: 4px 8px; font-size: 12px; padding: 8px; }
  .labo-visite-commandes { padding: 4px 8px; gap: 8px; }
  .labo-visite-compteur { font-size: 12px; letter-spacing: .02em; }
  .labo-visite-long { display: none; }
  .labo-visite-court { display: inline; }
  .labo-visite-btn { padding: 0 8px; font-size: 14px; }
  .labo-visite-bloc { padding: 16px; }
  .labo-visite-situation { padding: 8px 16px; gap: 4px; font-size: 15px; }
  .labo-visite-situation-aller { display: none; }
  .labo-visite-situation-tete::after { content: " ›"; }
  .labo-visite-histoire { padding: 16px; }
  .labo-visite-histoire p { font-size: 17px; }
  .labo-visite-remonter { margin-left: 0; }
}
@media (max-width: 480px) {
  .labo-visite-compteur { display: none; }
  .labo-visite-volet .labo-visite-refs { grid-template-columns: minmax(0, 1fr); }
}