.ext-head { display: grid; gap: 3rem var(--gap); }
.ext-head-text > .over { display: block; color: var(--muted); margin-bottom: 0.75rem; }
.ext-open-text { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.ext-head-fig { margin: 0; }
.ext-head-fig figcaption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ext-pair { gap: var(--gap); }
@media (min-width: 900px) {
  .ext-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .ext-head-text { grid-column: 1 / 7; }
  .ext-head-fig { grid-column: 7 / 13; }
}

.dp-pick-grid.ext-pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap); }
.ext-pick-grid .dp-tile { grid-column: span 2; }
.ext-pick-grid .ext-tile-ecusson { grid-column: 2 / 4; }
@media (min-width: 900px) {
  .dp-pick-grid.ext-pick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ext-pick-grid .dp-tile, .ext-pick-grid .ext-tile-ecusson { grid-column: auto; }
}

.ext-sim { display: grid; gap: 1.5rem; min-width: 0; }
.ext-sim > * { min-width: 0; }
.ext-scope { font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.ext-scope a { color: var(--ink); }
.ext-ctl { gap: 1.5rem; }
.ext-field { display: grid; gap: 0.5rem; }
.ext-aide { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.ext .dp-num input { -moz-appearance: textfield; appearance: textfield; }
.ext .dp-num input[readonly] { color: var(--muted); border-bottom-style: dashed; }
.ext .dp-num input::-webkit-outer-spin-button, .ext .dp-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ext-intro { font-family: var(--display); font-weight: 500; font-size: 1rem; line-height: 1.5; max-width: 48ch; }
.ext-foot { font-size: 0.8125rem; color: var(--muted); }
.ext-sim .pr-more { margin-top: 0; justify-self: start; }
.ext-out { margin-top: 1rem; }
.ext-live[hidden], .ext-ex[hidden] { display: none; }
.ext.is-live .ext-nojs { display: none; }

.ext-sim .jg { --below: 0; }
.ext-sim .jg-row { grid-template-columns: minmax(0, 1fr); }
.ext-sim .jg-plot { display: none; }
.ext-sim .jg-track > .jg-v { display: block; }
.ext-sim .jg-unit-t { text-align: left; transform: none; }
.ext-sim .jg-you span { background: var(--grege); }
.ext-sim .jg-you { transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.ext-sim .jg-row .jg-at { font-family: var(--display); font-weight: 500; }
.ext-sim .jg-t small { display: block; font-family: var(--sans); font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin-top: 0.25rem; }
.ext-sim h4.jg-t { font-size: 1rem; }
.ext-sim .jg-row.is-you .jg-t { margin-bottom: 1rem; }
.ext-tot .jg-seg.is-ajout { background: var(--paper); }

.dp-v[data-k="abf"] .s::before { top: 0; height: 1rem; background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--ink); }
.ext-ecu ul { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding-left: 1rem; list-style: none; }
.ext-ecu li { position: relative; }
.ext-ecu li::before { content: ""; position: absolute; left: -1rem; top: 0.75em; width: 0.5rem; height: 1px; background: currentColor; }
.ext-case .pr-more { margin-top: 0; justify-self: start; }

.ext-planche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--gap); margin: 0; padding: 0; list-style: none; }
.ext-pc { grid-template-rows: auto auto; background: var(--paper); border: 1px solid var(--rule); }
.ext-pc .pc-img { display: block; box-sizing: border-box; aspect-ratio: 16 / 9; height: auto; padding: 0.75rem; background: #fff; border-bottom: 1px solid var(--rule); }
.ext-pc .pc-img img { object-fit: contain; }
.ext-pc a.pc-img { cursor: zoom-in; }
.ext-pc a.pc-img:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
.ext-pc-vide .pc-img { background: none; }
.ext-pc-photo .pc-img { padding: 0; }
.ext-pc-photo .pc-img img { object-fit: cover; }
.ext-pc .pc-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-planche-cap { margin-top: 1.5rem; font-size: 0.875rem; color: var(--muted); }
.ext-planche-cap a { color: var(--ink); }
@media (min-width: 700px) {
  .ext-planche { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ext-pc { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) { .ext-sim .jg-you { transition: none; } }

@media (max-width: 700px) {
  .ext-planche {
    display: flex; gap: var(--gap);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  }
  .ext-planche > .ext-pc { flex: 0 0 calc(100vw - 2 * var(--gutter) - 3rem); scroll-snap-align: start; }
}