/* Bloc « specimen » : plans fictifs annotés. Le dessin est en SVG en ligne, ses couleurs suivent le thème (encre sur papier / trait clair sur nuit). */
.sp-sec { --sp-side: minmax(0, 1fr); }
.sp-layout { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 3rem); grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); align-items: start; }
.sp-fig { margin: 0; min-width: 0; container-type: inline-size; position: sticky; top: 6.2rem; }
.sp-sheet { background: var(--sp-paper); border: 1px solid var(--sp-hair); border-radius: 6px; box-shadow: 0 34px 60px -40px rgba(11, 13, 34, .6), 0 1px 0 rgba(255, 255, 255, .4) inset; overflow: hidden; }
.sp-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - 7.5rem); margin-inline: auto; touch-action: manipulation; }
.sp-cap { margin: .6rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.sp-now { margin: .7rem 0 0; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1.5; }
.sp-now b { display: block; margin-bottom: .1rem; }
.sp-now[hidden] { display: none; }

/* Couleurs du dessin */
.sp-layout { --sp-paper: #fdfbf5; --sp-ink: #1c1d33; --sp-fine: #7c7f97; --sp-red: #c0172d; --sp-blue: #1a5f96; --sp-green: #3c7a35; --sp-wm: rgba(28, 29, 51, .075); --sp-hair: rgba(28, 29, 51, .16); --sp-accent: #b75a12; --sp-accent-t: #fff; --sp-wallf: rgba(28, 29, 51, .26); --sp-curve: rgba(110, 72, 30, .95); --sp-curve-f: rgba(110, 72, 30, .55); }
:root[data-theme="dark"] .sp-layout { --sp-paper: #12153c; --sp-ink: #e9e7fb; --sp-fine: #9799bc; --sp-red: #ff8d7c; --sp-blue: #7cc5f3; --sp-green: #80cc84; --sp-wm: rgba(233, 231, 251, .08); --sp-hair: rgba(233, 231, 251, .22); --sp-accent: #e0995c; --sp-accent-t: #14173d; --sp-wallf: rgba(233, 231, 251, .24); --sp-curve: rgba(236, 196, 150, .9); --sp-curve-f: rgba(236, 196, 150, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp-layout { --sp-paper: #12153c; --sp-ink: #e9e7fb; --sp-fine: #9799bc; --sp-red: #ff8d7c; --sp-blue: #7cc5f3; --sp-green: #80cc84; --sp-wm: rgba(233, 231, 251, .08); --sp-hair: rgba(233, 231, 251, .22); --sp-accent: #e0995c; --sp-accent-t: #14173d; --sp-wallf: rgba(233, 231, 251, .24); --sp-curve: rgba(236, 196, 150, .9); --sp-curve-f: rgba(236, 196, 150, .45); } }

/* Traits : largeur constante à l'écran, quel que soit le zoom du dessin */
.sp-svg * { vector-effect: non-scaling-stroke; }
.sp-svg line, .sp-svg path, .sp-svg rect, .sp-svg circle { fill: none; stroke: none; }
.sp-svg text { fill: var(--sp-ink); font-family: var(--mono); font-size: 11px; direction: ltr; unicode-bidi: plaintext; }
.sp-paper { fill: var(--sp-paper) !important; }
.sp-svg .sp-pp { fill: var(--sp-paper); } .sp-svg .sp-pf { fill: var(--sp-paper); }
.sp-svg .sp-fi { fill: var(--sp-ink); }
.sp-svg .sp-nf { fill: none; }
.sp-svg .sp-0 { display: none; }
.sp-svg .sp-lf { stroke: var(--sp-fine); stroke-width: .5; }
.sp-svg .sp-lh { stroke: var(--sp-ink); stroke-width: .5; opacity: .75; }
.sp-svg .sp-lt { stroke: var(--sp-ink); stroke-width: .75; }
.sp-svg .sp-lm { stroke: var(--sp-ink); stroke-width: 1.3; }
.sp-svg .sp-lb { stroke: var(--sp-red); stroke-width: 1.5; }
.sp-svg .sp-lr { stroke: var(--sp-red); stroke-width: 2.2; }
.sp-svg .sp-lw { stroke: var(--sp-blue); stroke-width: 1.1; stroke-dasharray: 9 3 2 3; }
.sp-svg .sp-lg { stroke: var(--sp-green); stroke-width: .8; }
.sp-svg .sp-lk { stroke: var(--sp-ink); stroke-width: .9; }
.sp-svg .sp-la { stroke: var(--sp-fine); stroke-width: .6; stroke-dasharray: 12 5; }
.sp-svg .sp-lz { stroke: var(--sp-red); stroke-width: .9; stroke-dasharray: 7 4; }
.sp-svg .sp-ld { stroke: var(--sp-blue); stroke-width: .65; stroke-dasharray: 3 3; }
.sp-svg .sp-lc { stroke: var(--sp-blue); stroke-width: 1.9; }
.sp-svg .sp-ls { stroke: var(--sp-blue); stroke-width: 1.4; }
.sp-svg .sp-cm { stroke: var(--sp-curve); stroke-width: 1.2; }
.sp-svg .sp-cf { stroke: var(--sp-curve-f); stroke-width: .7; }
.sp-svg .sp-road { fill: var(--sp-paper); }
.sp-svg .sp-dg { fill: var(--sp-green); }
.sp-svg .sp-ds { fill: var(--sp-blue); }
.sp-svg .sp-lead { stroke: var(--sp-accent); stroke-width: .9; }
.sp-svg .sp-wall { fill: var(--sp-wallf); stroke: var(--sp-ink); stroke-width: .9; }
.sp-svg .sp-wall2 { fill: var(--sp-wallf); stroke: var(--sp-ink); stroke-width: .9; }
.sp-svg .sp-mit { fill: var(--sp-ink); }
.sp-svg .sp-ldh { stroke: var(--sp-ink); stroke-width: 1; stroke-dasharray: 6 3; }
.sp-svg .sp-fr-b { fill: var(--sp-paper); stroke: var(--sp-ink); stroke-width: 1.2; }
.sp-svg .sp-fr-t { font-size: 12px; font-weight: 700; text-anchor: middle; }
.sp-svg .sp-narrow { display: none; }
.sp-svg .sp-wm { fill: var(--sp-wm); font-size: 86px; font-weight: 700; letter-spacing: .06em; }

/* Textes du dessin */
.sp-svg .sp-xl { font-size: 15px; } .sp-svg .sp-t { font-size: 15.5px; } .sp-svg .sp-l { font-size: 12.5px; } .sp-svg .sp-m { font-size: 12px; } .sp-svg .sp-s2 { font-size: 11.5px; } .sp-svg .sp-s { font-size: 10.5px; } .sp-svg .sp-xs { font-size: 9.5px; fill: var(--sp-ink); }
.sp-svg .sp-b { font-weight: 700; } .sp-svg .sp-r { fill: var(--sp-red); } .sp-svg .sp-g { fill: var(--sp-green); font-style: italic; } .sp-svg .sp-bl { fill: var(--sp-blue); } .sp-svg .sp-cl { fill: var(--sp-curve); }
.sp-svg .sp-mid { text-anchor: middle; } .sp-svg .sp-end { text-anchor: end; }

/* Repères */
.sp-pin { cursor: pointer; outline: none; }
.sp-hit { fill: transparent; stroke: none; }
.sp-svg .sp-pin-b { fill: var(--sp-accent); stroke: var(--sp-paper); stroke-width: 1.6; transition: r .15s; }
.sp-svg .sp-pin-t { fill: var(--sp-accent-t); font-size: 12.5px; font-weight: 700; text-anchor: middle; font-family: var(--mono); }
.sp-pin:focus-visible .sp-pin-b { stroke: var(--sp-ink); stroke-width: 3; }
.sp-pin.is-on .sp-pin-b { stroke: var(--sp-ink); stroke-width: 2.4; }

/* Mise en valeur */
.sp-svg.has-on [data-sp]:not(.is-on) { opacity: .34; }
.sp-svg [data-sp] { transition: opacity .15s; }
.sp-layout.has-on .sp-leg li.is-on { border-color: var(--copper-ink); background: var(--surface); }

/* Légendes */
.sp-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sp-leg li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .75rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); transition: border-color .15s, background-color .15s; }
.sp-ln { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--copper-ink); color: var(--paper); font-family: var(--mono); font-size: .88rem; font-weight: 700; }
.sp-lt { margin: 0; font-weight: 750; font-size: 1.06rem; line-height: 1.4; color: var(--text); }
.sp-lt button { all: unset; display: inline; cursor: pointer; border-radius: 4px; }
.sp-lt button:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-lt button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.sp-ld { margin: .15rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--muted); }

/* Feuille haute (copropriété) : pas de plan collant, le dessin garde sa largeur */
.sp-tall .sp-fig { position: static; }
.sp-tall .sp-svg { max-height: none; }

/* Dans un guide : dessin puis légendes en dessous */
.sp-embed { grid-template-columns: minmax(0, 1fr); margin-block: 1.6rem; }
.sp-embed .sp-fig { position: static; max-width: 40rem; margin-inline: auto; width: 100%; }
.sp-embed .sp-svg { max-height: none; }
@media (min-width: 60rem) { .sp-embed .sp-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Petit écran : le dessin prend toute la largeur */
@media (max-width: 899px) {
  .sp-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-fig { position: static; margin-inline: calc(-1 * clamp(.2rem, 2.5vw, 1rem)); }
  .sp-svg { max-height: none; }
}
@media (min-width: 900px) { .sp-now { display: none; } }

/* Petit dessin (conteneur étroit) : textes agrandis, détails fins retirés */
@container (max-width: 480px) {
  .sp-svg .sp-wide { display: none; }
  .sp-svg .sp-narrow { display: inline; }
  .sp-fr-i { transform: scale(1.25); }
  .sp-svg .sp-xs { font-size: 13px; }
  .sp-svg .sp-xl { font-size: 19px; } .sp-svg .sp-t { font-size: 21px; } .sp-svg .sp-l { font-size: 19px; } .sp-svg .sp-m { font-size: 17px; } .sp-svg .sp-s2 { font-size: 16.5px; } .sp-svg .sp-s { font-size: 15px; }
  .sp-pin-i { transform: scale(1.5); }
}
@media (forced-colors: active) { .sp-svg text { fill: CanvasText; } .sp-svg .sp-lf, .sp-svg .sp-lt, .sp-svg .sp-lm { stroke: CanvasText; } }
@media (prefers-reduced-motion: reduce) { .sp-svg [data-sp], .sp-leg li, .sp-svg .sp-pin-b { transition: none; } }
.a11y-rm .sp-svg [data-sp], .a11y-rm .sp-leg li, .a11y-rm .sp-pin-b { transition: none; }