/* « Le pont entre deux thèmes », version définitive : toutes les classes commencent par .labo-pont. */
.labo-pont { padding: 8px 0 0; }
.labo-pont .labo-pont-libelle { display: block; margin: 0 0 8px; font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
.labo-pont .labo-pont-h3 { font: 600 24px/1.25 var(--titre); color: var(--bleu-froid); margin: 0 0 24px; overflow-wrap: anywhere; }
.labo-pont .labo-pont-h3:focus { outline: none; }
.labo-pont .labo-pont-h3:focus-visible { outline: 2px solid var(--bleu-froid); outline-offset: 2px; }
.labo-pont .labo-pont-h4 { font: 600 17px/1.3 var(--titre); color: var(--bleu-froid); margin: 24px 0 8px; }
.labo-pont .labo-pont-h4:first-child { margin-top: 0; }
.labo-pont .labo-pont-aide { font-size: 15px; color: var(--ardoise); margin: 0 0 16px; max-width: 48em; }
.labo-pont .labo-pont-detail { margin: 0 0 8px; font-size: 14px; color: var(--ardoise); }
.labo-pont .labo-pont-bouton { min-height: 44px; font-size: 14px; text-align: left; line-height: 1.3; padding: 8px 16px; }
.labo-pont .labo-pont-bouton[aria-pressed="true"] { background: var(--bleu-pale); border-color: var(--bleu-froid); }
.labo-pont .labo-pont-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Situations d'usage */
.labo-pont .labo-pont-cas-bloc { margin: 0 0 24px; }
.labo-pont .labo-pont-situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.labo-pont .labo-pont-situation {
  display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 16px; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); font: 400 16px/1.45 var(--texte); color: var(--encre);
}
.labo-pont .labo-pont-situation:hover { border-color: var(--bleu-froid); }
.labo-pont .labo-pont-situation[aria-pressed="true"] { background: var(--bleu-pale); border-color: var(--bleu-froid); }
.labo-pont .labo-pont-qui { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-froid); }
.labo-pont .labo-pont-cas { font-weight: 600; }
.labo-pont .labo-pont-trajet { margin-top: auto; font-size: 14px; color: var(--ardoise); }
.labo-pont .labo-pont-trajet .pastille { width: 8px; height: 8px; margin: 0 4px; }
.labo-pont .labo-pont-vers { font-style: italic; }

/* Choix des thèmes */
.labo-pont .labo-pont-commandes {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: end;
  padding: 16px; margin: 0 0 40px; background: var(--brume); border-radius: var(--rayon);
}
.labo-pont .labo-pont-choix { min-width: 0; }
.labo-pont .labo-pont-select {
  width: 100%; min-height: 44px; padding: 0 8px; font: 600 15px var(--texte); color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.labo-pont .labo-pont-select:hover, .labo-pont .labo-pont-select:focus { border-color: var(--bleu-froid); }

/* La chaîne de lecture */
.labo-pont .labo-pont-resultat { max-width: 52em; margin: 0 0 40px; }
.labo-pont .labo-pont-fil { list-style: none; margin: 0 0 24px; padding: 0; position: relative; }
.labo-pont .labo-pont-fil::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--bleu-pale); }
.labo-pont .labo-pont-etape { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.labo-pont .labo-pont-etape + .labo-pont-etape { margin-top: 16px; }
.labo-pont .labo-pont-borne { justify-self: center; width: 16px; height: 16px; margin-top: 8px; border: 2px solid var(--blanc); outline: 1px solid var(--encre); border-radius: var(--rayon); }
.labo-pont .labo-pont-depart .labo-pont-borne, .labo-pont .labo-pont-arrivee .labo-pont-borne { width: 24px; height: 24px; margin-top: 4px; }
.labo-pont .labo-pont-etiquette { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
.labo-pont .labo-pont-theme { margin: 0 0 4px; font: 600 20px/1.3 var(--titre); color: var(--encre); overflow-wrap: anywhere; }
.labo-pont .labo-pont-etape-theme .labo-pont-detail a { display: inline-flex; align-items: center; min-height: 44px; }
.labo-pont .labo-pont-numero {
  justify-self: center; width: 32px; height: 32px; margin-top: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--bleu-froid); color: var(--blanc); font: 600 15px var(--mono); border-radius: var(--rayon);
}
.labo-pont .labo-pont-lecture { min-width: 0; background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid var(--bleu-froid); border-radius: var(--rayon); padding: 16px 24px; }
.labo-pont .labo-pont-lecture .labo-pont-etiquette { color: var(--bleu-froid); margin-bottom: 8px; }
.labo-pont .labo-pont-titre-ref { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.labo-pont .labo-pont-pourquoi { margin: 0 0 8px; font-size: 15px; }
.labo-pont .labo-pont-pourquoi strong { font-weight: 600; }
.labo-pont .labo-pont-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0; }
.labo-pont .labo-pont-lire { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.labo-pont .labo-pont-sans-lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ardoise); font-style: italic; }
.labo-pont .labo-pont-variantes { margin-top: 8px; border-top: 1px solid var(--brume); font-size: 14px; }
.labo-pont .labo-pont-variantes summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--bleu-froid); font-weight: 600; }
.labo-pont .labo-pont-variantes ul { list-style: none; margin: 0; padding: 0; }
.labo-pont .labo-pont-variantes li { padding: 8px 0; border-top: 1px solid var(--brume); }
.labo-pont .labo-pont-variantes p { margin: 0; }
.labo-pont .labo-pont-variante-titre { font: 600 16px/1.35 var(--titre); color: var(--encre); overflow-wrap: anywhere; }

.labo-pont .labo-pont-apport { padding: 16px 24px; background: var(--papier); border: 1px solid var(--filet); border-left: 4px solid var(--bleu-froid); border-radius: var(--rayon); }
.labo-pont .labo-pont-apport-texte { margin: 0 0 8px; font-size: 18px; line-height: 1.55; color: var(--encre); }
.labo-pont .labo-pont-apport .labo-pont-detail:last-child { margin: 0; }
.labo-pont .labo-pont-apport a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Aller plus loin */
.labo-pont .labo-pont-suite { display: grid; gap: 8px; border-top: 1px solid var(--filet); padding-top: 24px; }
.labo-pont .labo-pont-plus { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); }
.labo-pont .labo-pont-plus > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 44px; padding: 8px 16px; cursor: pointer; list-style: none;
}
.labo-pont .labo-pont-plus > summary::-webkit-details-marker { display: none; }
.labo-pont .labo-pont-plus > summary::before { content: "+"; font: 600 18px/1 var(--mono); color: var(--bleu-froid); width: 16px; }
.labo-pont .labo-pont-plus[open] > summary::before { content: "−"; }
.labo-pont .labo-pont-plus > summary:hover .labo-pont-plus-titre { text-decoration: underline; text-underline-offset: 2px; }
.labo-pont .labo-pont-plus-sur { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
.labo-pont .labo-pont-plus-titre { font-weight: 600; color: var(--bleu-froid); }
.labo-pont .labo-pont-plus > :not(summary) { margin: 0 16px 16px; }
.labo-pont .labo-pont-plus-corps { padding-top: 8px; border-top: 1px solid var(--brume); }
.labo-pont .labo-pont-specialistes .labo-pont-plus-corps p { font-size: 15px; color: var(--ardoise); max-width: 52em; }
.labo-pont .labo-pont-case { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 8px 0; font-size: 15px; color: var(--encre); cursor: pointer; max-width: 48em; }
.labo-pont .labo-pont-case input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--bleu-froid); }

.labo-pont .labo-pont-autres { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.labo-pont .labo-pont-autre {
  width: 100%; min-height: 44px; display: flex; flex-direction: column; gap: 4px; padding: 8px 16px; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); font: 400 15px/1.4 var(--texte); color: var(--encre);
}
.labo-pont .labo-pont-autre:hover { border-color: var(--bleu-froid); }
.labo-pont .labo-pont-autre[aria-pressed="true"] { background: var(--bleu-pale); border-color: var(--bleu-froid); }
.labo-pont .labo-pont-autre-num { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-froid); }
.labo-pont .labo-pont-autre-suite .pastille { width: 8px; height: 8px; }
.labo-pont .labo-pont-sep { color: var(--ardoise); }

/* Cercles */
.labo-pont .labo-pont-carte { position: relative; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; margin-bottom: 8px; }
.labo-pont .labo-pont-svg { display: block; width: 100%; height: min(64vh, 600px); min-height: 360px; touch-action: none; cursor: grab; user-select: none; }
.labo-pont .labo-pont-svg.labo-pont-glisse { cursor: grabbing; }
.labo-pont .labo-pont-cercle { fill: none; stroke: var(--bleu-pale); stroke-width: 2; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-num { font: 500 17px var(--mono); fill: var(--bleu-moyen); letter-spacing: .08em; paint-order: stroke; stroke: var(--blanc); stroke-width: 4px; }
.labo-pont .labo-pont-arbre line { stroke: var(--ardoise); stroke-opacity: .14; stroke-width: 1; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-trace { fill: none; stroke: var(--bleu-froid); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-trace-autre { fill: none; stroke: var(--bleu-moyen); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-marque { fill: var(--blanc); stroke: var(--bleu-froid); stroke-width: 2; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-noeud { cursor: pointer; }
.labo-pont .labo-pont-noeud:focus { outline: none; }
.labo-pont .labo-pont-zone { fill: transparent; pointer-events: all; }
.labo-pont .labo-pont-disque { stroke: var(--encre); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-noeud text {
  display: none; font: 600 22px var(--texte); fill: var(--encre); pointer-events: none;
  paint-order: stroke; stroke: var(--blanc); stroke-width: 6px; stroke-linejoin: round;
}
.labo-pont .labo-pont-noeud:hover text, .labo-pont .labo-pont-noeud:focus-visible text,
.labo-pont .labo-pont-est-depart text, .labo-pont .labo-pont-est-arrivee text, .labo-pont .labo-pont-sur-chemin text { display: inline; }
.labo-pont .labo-pont-noeud:focus-visible .labo-pont-zone { stroke: var(--encre); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.labo-pont .labo-pont-est-depart .labo-pont-disque { stroke-opacity: 1; stroke-width: 3; }
.labo-pont .labo-pont-est-depart text { font-size: 26px; }
.labo-pont .labo-pont-sur-chemin .labo-pont-disque { stroke: var(--bleu-froid); stroke-opacity: 1; stroke-width: 3; }
.labo-pont .labo-pont-est-arrivee .labo-pont-disque { stroke: var(--encre); stroke-opacity: 1; stroke-width: 4; }
.labo-pont .labo-pont-hors { opacity: .55; }
.labo-pont .labo-pont-hors text { display: inline; font-weight: 400; fill: var(--ardoise); }
.labo-pont .labo-pont-zoom { position: absolute; top: 8px; right: 8px; display: flex; gap: 8px; }
.labo-pont .labo-pont-zoom .labo-pont-bouton { min-width: 44px; font-size: 16px; text-align: center; }
.labo-pont .labo-pont-bulle {
  position: absolute; margin: 0; padding: 8px; max-width: 264px; pointer-events: none; z-index: 2;
  background: var(--encre); color: var(--blanc); font-size: 14px; line-height: 1.35; border-radius: var(--rayon);
}

/* Lectures carrefours */
.labo-pont .labo-pont-carrefours { margin: 0 0 16px; padding: 0 0 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.labo-pont .labo-pont-carrefours > li { padding: 8px 0 16px; border-bottom: 1px solid var(--filet); min-width: 0; }
.labo-pont .labo-pont-carrefours > li::marker { font: 600 15px var(--mono); color: var(--bleu-froid); }
.labo-pont .labo-pont-part { margin: 0 0 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu-moyen); }
.labo-pont .labo-pont-carrefours .labo-pont-titre-ref { font-size: 17px; }
.labo-pont .labo-pont-puces { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
.labo-pont .labo-pont-lien-theme {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; background: none; border: 0;
  font: 400 14px/1.3 var(--texte); color: var(--bleu-froid); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left;
}
.labo-pont .labo-pont-lien-theme:hover { color: var(--encre); }
.labo-pont .labo-pont-lien-theme .pastille { width: 8px; height: 8px; }
.labo-pont .labo-pont-themes { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--ardoise); }

@media (max-width: 960px) {
  .labo-pont .labo-pont-situations { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .labo-pont .labo-pont-carrefours { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .labo-pont { padding: 0; }
  .labo-pont .labo-pont-commandes { grid-template-columns: minmax(0, 1fr); }
  .labo-pont .labo-pont-inverser { justify-self: start; }
  .labo-pont .labo-pont-h3 { font-size: 21px; }
  .labo-pont .labo-pont-etape { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
  .labo-pont .labo-pont-fil::before { left: 11px; }
  .labo-pont .labo-pont-numero { width: 24px; height: 24px; font-size: 13px; }
  .labo-pont .labo-pont-borne, .labo-pont .labo-pont-depart .labo-pont-borne, .labo-pont .labo-pont-arrivee .labo-pont-borne { width: 16px; height: 16px; margin-top: 4px; }
  .labo-pont .labo-pont-lecture, .labo-pont .labo-pont-apport { padding: 16px; }
  .labo-pont .labo-pont-apport-texte { font-size: 17px; }
  .labo-pont .labo-pont-svg { height: 420px; min-height: 0; }
  .labo-pont .labo-pont-plus > :not(summary) { margin: 0 8px 16px; }
}