/* Illustrations des fenêtres (reprises de la v2). */
/* ---------- objets ---------- */
.obj { position: relative; min-width: 0; min-height: 220px; max-width: 100%; padding: var(--space-md); background: var(--color-paper-2); overflow: clip; }
.obj--graphite { background: var(--color-graphite); color: var(--color-graphite-ink); border-color: var(--color-graphite-2); }
@media (prefers-color-scheme: dark) { .obj--graphite { border-color: var(--color-rule); } }
@media (min-width: 960px) { .obj { min-height: 240px; } }

.caret { display: inline-block; flex: none; width: 1px; height: 18px; margin-left: 2px; background: var(--color-accent); vertical-align: middle; }

/* pellicule */
.obj--film { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); padding: var(--space-lg) 0; }
.film__clip { overflow: clip; }
.film__strip { display: flex; width: max-content; }
.film__half { display: flex; flex-direction: column; gap: var(--space-xs); width: max-content; }
.film__perf { display: block; width: 0; min-width: 100%; overflow: clip; white-space: pre; font: 400 var(--text-xs)/1 var(--font-outlier); color: var(--color-graphite-muted); }
.film__frames { display: flex; }
.film__frame { flex: none; margin: 0 var(--space-md) 0 0; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-graphite-2); font: 400 var(--text-sm)/1.25 var(--font-outlier); color: var(--color-graphite-muted); }
.film__frame .hl { color: var(--color-accent-2); }
.film__meta { padding-inline: var(--space-lg); font: 400 var(--text-xs)/1.4 var(--font-outlier); color: var(--color-graphite-muted); white-space: pre-wrap; }

/* fiche de demande */
.obj--request { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); }
.fakefield { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input); color: var(--color-muted); font: 400 var(--text-base)/1.2 var(--font-body); }
@supports (corner-shape: bevel) { .fakefield { border-radius: var(--cut) 3px var(--cut) 3px; corner-shape: bevel round bevel round; } }
.fakefield .caret { margin-left: var(--space-xs); }
.optiontray { display: flex; gap: var(--space-sm); width: fit-content; padding: var(--space-xs); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); }
.status { padding-top: var(--space-xs); }
.status__line { position: relative; height: 10px; }
.status__line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--color-rule-2); }
.status__bar { position: absolute; left: 0; right: 0; top: 4px; height: 2px; margin-top: -0.5px; background: var(--color-accent); transform-origin: left; }
.status__tick { position: absolute; top: 0; width: 1px; height: 10px; background: var(--color-rule-2); }
.status__tick--0 { left: 0; } .status__tick--50 { left: 50%; } .status__tick--100 { right: 0; }
.status__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-xs); font: 500 var(--text-sm)/1.2 var(--font-display); color: var(--color-muted); }
.status__labels > span:nth-child(2) { text-align: center; }
.status__last { display: grid; justify-items: end; }
.status__last > span { grid-area: 1 / 1; }
.status__off { opacity: 0; }
.status__off::after { content: "Disponible"; color: var(--color-muted); }
.status__on { color: var(--color-ink); }

/* étagère */
.obj--shelf { padding: 20px var(--space-md) var(--space-sm); }
.shelf { display: flex; align-items: flex-end; gap: var(--space-2xs); height: 168px; border-bottom: 2px solid var(--color-rule-2); overflow-x: auto; overflow-y: clip; padding-inline: 2px; scrollbar-width: none; }
.book { flex: none; position: relative; border: var(--rule-hair) solid var(--color-rule-2); border-bottom: 0; background-color: var(--color-key-face);
  background-image: linear-gradient(var(--color-rule-2), var(--color-rule-2)), linear-gradient(var(--color-rule-2), var(--color-rule-2));
  background-size: 100% 1px, 100% 1px; background-position: 0 12px, 0 calc(100% - 12px); background-repeat: no-repeat;
  transition: transform var(--dur-short) var(--ease-out); }
.book:nth-child(even) { background-color: var(--color-paper-3); }
.book:nth-child(1) { width: 18px; height: 150px; } .book:nth-child(2) { width: 24px; height: 132px; } .book:nth-child(3) { width: 14px; height: 162px; }
.book:nth-child(4) { width: 28px; height: 120px; } .book:nth-child(5) { width: 20px; height: 168px; } .book:nth-child(6) { width: 16px; height: 140px; }
.book:nth-child(7) { width: 26px; height: 156px; } .book:nth-child(8) { width: 22px; height: 128px; } .book:nth-child(9) { width: 18px; height: 146px; }
.book--current { background-color: var(--color-accent-wash) !important; border-color: var(--color-accent-edge); transform: translateY(-14px); }
@media (hover: hover) and (pointer: fine) { .obj--shelf:hover .book--current { transform: translateY(-20px); } }
.gauge { margin-top: var(--space-sm); font: 400 var(--text-sm)/1.2 var(--font-outlier); white-space: nowrap; overflow: clip; }
.gauge__on { color: var(--color-glyph-5); } .gauge__off { color: var(--color-muted); }
.shelf__caption { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

/* méta-recherche */
.obj--search { display: grid; align-content: center; padding: var(--space-md); }
.search { display: grid; grid-template-columns: minmax(0, 0.8fr) 56px minmax(0, 1.5fr); align-items: start; }
.pane { min-width: 0; overflow-x: auto; overflow-y: clip; background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule); scrollbar-width: thin; }
.pane__head { height: 28px; padding: 0 var(--space-sm); font: 500 var(--text-sm)/28px var(--font-display); color: var(--color-muted); }
.pane__row { display: flex; align-items: center; height: 28px; padding: 0 var(--space-sm); font: 400 var(--text-sm)/28px var(--font-outlier); color: var(--color-ink); white-space: pre; }
.res--hot { background: var(--color-accent-wash); }
.search__links { display: block; width: 56px; height: 168px; }
.link { stroke: var(--color-rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.link--hot { stroke: var(--color-accent); }
@media (max-width: 719px) {
  .search { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .search__links { display: none; }
  .obj--search { padding: var(--space-sm); }
}

/* itinéraire */
.obj--trip { display: grid; place-items: center; padding: var(--space-md); background-color: var(--color-paper-2); background-image: radial-gradient(circle, var(--color-glyph-1) 1px, transparent 1.5px); background-size: 8px 16px; }
.trip { position: relative; width: min(100%, 460px); }
.trip svg { display: block; }
.trip__path, .trip__boat { stroke: var(--color-ink-2); stroke-width: 1.5; }
.trip__boat { stroke-dasharray: 4 4; }
.chip { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; margin: calc(var(--space-sm) * -1) 0 0 calc(var(--space-sm) * -1); background: var(--color-key-face); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 4px; font: 500 var(--text-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
@supports (corner-shape: bevel) { .chip { border-radius: var(--cut) 2px var(--cut) 2px; corner-shape: bevel round bevel round; } }
.chip--1 { left: 8.333%; top: 75%; } .chip--2 { left: 27.083%; top: 50%; } .chip--3 { left: 45.833%; top: 62.5%; }
.chip--4 { left: 64.583%; top: 29.167%; } .chip--5 { left: 91.667%; top: 37.5%; }
.tag-next { position: absolute; left: 64.583%; top: calc(29.167% - 46px); margin-left: calc(var(--space-sm) * -1); padding: var(--space-2xs) var(--space-xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-accent); border-radius: 4px; font: 500 var(--text-sm)/1.2 var(--font-display); color: var(--color-ink); white-space: nowrap; }
@supports (corner-shape: bevel) { .tag-next { border-radius: var(--cut) 2px var(--cut) 2px; corner-shape: bevel round bevel round; } }
.cote { position: absolute; bottom: 0; height: 10px; border-inline: var(--rule-hair) solid var(--color-rule-2); background: linear-gradient(var(--color-rule-2), var(--color-rule-2)) 0 50% / 100% 1px no-repeat; }
.cote span { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 400 var(--text-sm)/1 var(--font-body); color: var(--color-muted); }
.cote--1 { left: 8.333%; width: 18.75%; } .cote--2 { left: 27.083%; width: 37.5%; } .cote--3 { left: 64.583%; width: 27.083%; }

/* arbre */
.obj--tree { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); padding: var(--space-lg); }
.tree { font: 400 0.875rem/1.45 var(--font-outlier); color: var(--color-graphite-muted); overflow-x: auto; padding-bottom: var(--space-2xs); }
.node { position: relative; display: inline-block; }
.node::after { content: "( )"; position: absolute; left: 0; top: 0; color: var(--color-accent-2); }
.tag { position: absolute; left: 100%; top: 0; margin-left: var(--space-sm); font: 400 var(--text-xs)/1.45 var(--font-outlier); color: var(--color-graphite-ink); white-space: nowrap; }
.tree__note { font-size: var(--text-sm); color: var(--color-graphite-muted); }

/* ---------- mouvement des objets (sous .js seulement : sans script, l'état final) ---------- */
@keyframes film { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes status-bar { 0% { transform: scaleX(0); } 30%, 70% { transform: scaleX(0.5); } 100% { transform: scaleX(1); } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lit { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes tagshow { 0% { opacity: 0; transform: translateX(-4px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateX(-4px); } }

.js .film__strip { animation: film 40s linear infinite; }
.js .caret { animation: blink 1s steps(2) infinite; }
.js .status__bar { animation: status-bar 2s linear both; }
.js .status__on { animation: show 120ms linear 2s both; }
.js .status__off { animation: hide 120ms linear 2s both; }
.js .res { animation: rise 200ms var(--ease-out) both; }
.js .res:nth-of-type(2) { animation-delay: 0ms; } .js .res:nth-of-type(3) { animation-delay: 150ms; } .js .res:nth-of-type(4) { animation-delay: 300ms; }
.js .chip, .js .tag-next { animation: drop 180ms var(--ease-out) both; }
.js .chip--1 { animation-delay: 0ms; } .js .chip--2 { animation-delay: 120ms; } .js .chip--3 { animation-delay: 240ms; }
.js .chip--4 { animation-delay: 360ms; } .js .chip--5 { animation-delay: 480ms; } .js .tag-next { animation-delay: 600ms; }
.js .node::after { animation: lit 9.6s linear infinite; }
.js .tag { animation: tagshow 9.6s linear infinite; }
.js .node--1::after, .js .node--1 .tag { animation-delay: -9.6s; }
.js .node--2::after, .js .node--2 .tag { animation-delay: -7.2s; }
.js .node--3::after, .js .node--3 .tag { animation-delay: -4.8s; }
.js .node--4::after, .js .node--4 .tag { animation-delay: -2.4s; }
.js [data-object] .anim, .js [data-object] .film__strip, .js [data-object] .caret, .js [data-object] .status__bar, .js [data-object] .status__on, .js [data-object] .status__off,
.js [data-object] .res, .js [data-object] .chip, .js [data-object] .tag-next, .js [data-object] .node::after, .js [data-object] .tag { animation-play-state: paused; }
.js [data-object].is-on .anim, .js [data-object].is-on .film__strip, .js [data-object].is-on .caret, .js [data-object].is-on .status__bar, .js [data-object].is-on .status__on, .js [data-object].is-on .status__off,
.js [data-object].is-on .res, .js [data-object].is-on .chip, .js [data-object].is-on .tag-next, .js [data-object].is-on .node::after, .js [data-object].is-on .tag { animation-play-state: running; }