/* Couloir des machines (page Infrastructure de Claude), règles du couloir seulement. */
.hud { font-family: var(--police-donnees); font-size: var(--t-donnees); line-height: 1.55; letter-spacing: 0.01em; color: var(--texte-doux); }
.tape__vu { user-select: none; }
.tape__reste { opacity: 0; }
.tape__curseur { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -0.15em; }
.tape__curseur::after { content: ""; position: absolute; left: 1px; top: 0; width: 0.6em; height: 1.05em; background: var(--accent); }
.hud-coins { position: absolute; z-index: 1; pointer-events: none; inset: var(--coins-haut, 12%) var(--coins-droite, 8%) var(--coins-bas, 12%) var(--coins-gauche, 8%); }
.hud-coins i { position: absolute; width: clamp(18px, 2.2vw, 30px); height: clamp(18px, 2.2vw, 30px); border: 0 solid var(--accent); }
.hud-coins i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud-coins i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud-coins i:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.hud-coins i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.couloir:not(.anime) .hud-coins { display: none; }
.js-mouvement .anime .hud-coins { opacity: 0; transform: scale(1.08); transition: opacity 500ms var(--courbe), transform 700ms var(--courbe-sortie); }
.js-mouvement .anime.coins-on .hud-coins { opacity: 1; transform: none; }
.couloir { position: relative; margin: var(--marge-panneau) var(--marge-panneau) 0; border-radius: var(--rayon-panneau); overflow: clip; background: var(--fond); color: var(--texte); }
.couloir__collant { position: relative; }
.couloir { height: 280svh; }
.couloir__collant { position: sticky; top: 0; height: 100svh; }
.couloir__toile { position: absolute; inset: 0; width: 100%; height: 100%; }
.couloir .hud-coins { --coins-haut: 30%; --coins-bas: 14%; --coins-gauche: 38%; --coins-droite: 6%; }
.couloir__phrase { position: absolute; z-index: 1; left: var(--gouttiere); bottom: clamp(24px, 6svh, 64px); max-width: 34ch; margin: 0; font-size: clamp(0.9375rem, 0.8rem + 0.35vw, 1.0625rem); color: var(--texte); }
.couloir__phrase::before { content: "//"; content: "//" / ""; margin-right: 0.6em; color: var(--accent); }
.couloir__fiche { position: absolute; z-index: 1; left: var(--gouttiere); top: calc(var(--barre) + clamp(24px, 6svh, 72px)); width: min(40rem, 40vw); display: grid; gap: var(--e-4); }
.couloir__sur { margin: 0; }
.couloir__titre { font-size: clamp(2rem, 0.6rem + 3.4vw, 4.25rem); letter-spacing: -0.045em; line-height: 0.95; text-wrap: balance; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.couloir__liste { margin: var(--e-2) 0 0; display: grid; gap: var(--e-2); border-top: var(--trame) solid color-mix(in srgb, var(--texte) 18%, transparent); padding-top: var(--e-4); }
.couloir__liste div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--e-3); }
.couloir__liste dt { color: var(--accent); }
.couloir__liste dt::after { content: " :"; }
.couloir__liste dd { margin: 0; color: var(--texte); }
@media (max-width: 599px) {
  .couloir__liste div { grid-template-columns: 1fr; gap: 2px; }
}
.js-mouvement .couloir.anime .couloir__phrase, .js-mouvement .couloir.anime .couloir__fiche > * { opacity: 0; transition: opacity 400ms var(--courbe); }
.js-mouvement .couloir.temps-1 .couloir__phrase { opacity: 1; }
.js-mouvement .couloir.temps-2 .couloir__phrase { opacity: 0; }
.js-mouvement .couloir.temps-2 .couloir__fiche > * { opacity: 1; }
.js-mouvement .couloir.tout-montre .couloir__phrase, .js-mouvement .couloir.tout-montre .couloir__fiche > * { opacity: 1; }
@media (max-width: 1099px) {
  .couloir__collant { display: grid; padding: calc(var(--barre) + var(--e-6)) var(--gouttiere) var(--e-8); gap: var(--e-6); }
  .couloir__toile { position: relative; inset: auto; order: 2; height: auto; aspect-ratio: 4 / 3; border-radius: var(--rayon); }
  .couloir__fiche { position: relative; inset: auto; width: auto; order: 1; }
  .couloir__phrase { position: relative; inset: auto; order: 3; max-width: none; }
}
.no-mouvement .couloir,
html:not(.js) .couloir { height: auto; }
.no-mouvement .couloir__collant,
html:not(.js) .couloir__collant { position: relative; height: auto; display: grid; gap: var(--e-6); padding: calc(var(--barre) + var(--e-6)) var(--gouttiere) var(--e-12); }
.no-mouvement .couloir__fiche, .no-mouvement .couloir__phrase,
html:not(.js) .couloir__fiche, html:not(.js) .couloir__phrase { position: relative; inset: auto; width: auto; max-width: 48rem; }
.no-mouvement .couloir__fiche { order: 1; }
.no-mouvement .couloir__toile { order: 2; }
.no-mouvement .couloir__phrase { order: 3; }
.no-mouvement .couloir__toile { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; border-radius: var(--rayon); }
.no-mouvement .hud-coins, html:not(.js) .hud-coins, html:not(.js) .couloir__toile { display: none; }
@media (max-width: 899px) {
  .no-mouvement .couloir__toile { aspect-ratio: 4 / 3; }
}