/* Bascuñana · Gabarits : le plan du site, le mur de l'enquêteur (15 novembre 2026).
   Un tableau de liège, des épingles, des photos, des fiches, des coupures, des étiquettes, et le fil rouge.
   Le mur garde ses propres couleurs la nuit : le papier reste du papier, seule la pièce s'assombrit. */

@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/permanent-marker-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil Display'; font-style: normal; font-weight: 800; font-display: swap; src: url(visages/polices/big-shoulders-stencil-display-latin-800-normal.woff2) format('woff2'); }

.bsc-plan {
  --m-eprouver: #6B3A5B; --m-penser: #2E4756; --m-combattre: #A8321E; --m-batir: #7A5A22;
  --m-papier: #FBF9F4; --m-papier-2: #F3EFE6; --m-encre: #1F1C19; --m-texte: #35302B; --m-doux: #6A6158; --m-lave: #A8321E;
  --liege: #B6895A; --liege-fond: #A97C4E; --bois: #3A2A1C; --bois-clair: #5A412B;
  --fil: #B4271D; --fil-vif: #E0392B; --laiton: #C9A24A;
  --marqueur: 'Permanent Marker', 'Comic Sans MS', cursive;
}

/* ---------------- L'en-tête de la page ---------------- */
.bsc-plan-tete { padding: clamp(48px, 7vw, 96px) 0 28px; background: var(--papier); }
.bsc-plan-tete .bsc-chapo { max-width: 46rem; }
.bsc-plan-outils { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin-top: 26px; }
.bsc-plan-cherche { display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; max-width: 420px; }
.bsc-plan-cherche input { font: 400 17px/1.3 var(--lecture); color: var(--encre); background: var(--marbre); border: 1px solid var(--filet); border-radius: 2px; padding: 11px 14px; min-height: 46px; }
.bsc-plan-cherche input:focus { outline: 2px solid var(--lave); outline-offset: 1px; }
.bsc-plan-outils .bsc-bouton { min-height: 46px; }
.bsc-plan-chiffres { flex-basis: 100%; color: var(--doux); }
.bsc-plan-chiffres strong { color: var(--lave); font-weight: 500; }

/* ---------------- Le mur ---------------- */
.bsc-plan-bande { padding: 8px 0 clamp(56px, 7vw, 96px); background: var(--papier); }
.bsc-mur { max-width: 1520px; margin: 0 auto; padding: 0 clamp(6px, 1.6vw, 24px); }
.bsc-mur-cadre {
  position: relative; padding: 64px clamp(16px, 2.4vw, 34px) 84px; border-radius: 4px;
  background-color: var(--liege);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 236, 205, .16) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 70% 70%, rgba(62, 34, 12, .30) 0 .9px, transparent 1.8px),
    radial-gradient(circle at 50% 20%, rgba(62, 34, 12, .22) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 15% 85%, rgba(255, 236, 205, .12) 0 1px, transparent 2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25  0 0 0 0 .15  0 0 0 0 .06  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(40, 22, 8, .35));
  background-size: 7px 9px, 11px 13px, 17px 19px, 5px 7px, 220px 220px, 100% 100%;
  border: 16px solid var(--bois);
  border-image: linear-gradient(135deg, #4A3523 0%, #2E2015 35%, #5B412A 60%, #2A1C11 100%) 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 10px 30px rgba(0, 0, 0, .28), 0 26px 60px rgba(31, 24, 18, .28);
  overflow: hidden;
}
.bsc-mur-cadre::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .6s; }
:where(.bsc-mur) ul { list-style: none; margin: 0; padding: 0; }
:where(.bsc-mur) li { margin: 0; padding: 0; }
:where(.bsc-mur) li::before, :where(.bsc-mur) li::after { content: none; }

.bsc-mur-fils { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.bsc-mur-fils .fil { fill: none; stroke: var(--fil); stroke-width: 1.9; stroke-linecap: round; transition: opacity .25s, stroke-width .25s, stroke .25s; }
.bsc-mur-fils .ombre { fill: none; stroke: rgba(35, 14, 4, .32); stroke-width: 2.4; stroke-linecap: round; transition: opacity .25s; }
.bsc-mur-fils .clou { fill: var(--laiton); stroke: #6B5122; stroke-width: .9; transition: opacity .25s; }
.bsc-mur-fils.focus .fil, .bsc-mur-fils.focus .ombre, .bsc-mur-fils.focus .clou { opacity: .22; }
.bsc-mur-fils.focus .fil.allume { opacity: 1; stroke: var(--fil-vif); stroke-width: 3; }
.bsc-mur-fils.focus .ombre.allume, .bsc-mur-fils.focus .clou.allume { opacity: 1; }
.bsc-mur-fils.trace .fil, .bsc-mur-fils.trace .ombre { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); animation: bsc-tendre 1.1s cubic-bezier(.3, .6, .2, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes bsc-tendre { to { stroke-dashoffset: 0; } }

/* Les notes au marqueur, à même le mur (sur des bandes de papier collant). */
.bsc-mur-note { position: absolute; z-index: 5; margin: 0; font: 400 19px/1.1 var(--marqueur); color: var(--m-encre); background: rgba(246, 236, 210, .92); padding: 6px 12px 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); pointer-events: none; }
.bsc-mur-note::before { content: ""; position: absolute; left: -6px; right: -6px; top: -7px; height: 13px; background: rgba(232, 222, 190, .75); clip-path: polygon(0 20%, 4% 0, 10% 25%, 16% 5%, 24% 20%, 30% 0, 38% 22%, 46% 4%, 54% 24%, 62% 2%, 70% 22%, 78% 6%, 86% 24%, 94% 2%, 100% 18%, 100% 100%, 0 100%); }
.bsc-mur-note--depart { left: calc(50% - 300px); top: 92px; rotate: -6deg; }
.bsc-mur-note--depart::after { content: "↘"; position: absolute; right: -30px; top: 6px; font-size: 26px; color: var(--fil); }
.bsc-mur-note--legende { right: 34px; top: 26px; rotate: 3deg; color: var(--fil); }

/* ---------------- L'organigramme ---------------- */
.bsc-mur .bsc-mur-n0 { position: relative; z-index: 3; }
.bsc-mur .bsc-mur-n0 > li { display: flex; flex-direction: column; align-items: center; }
.bsc-mur .bsc-mur-n1 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 24px; width: 100%; margin-top: 96px; align-items: start; }
.bsc-mur .bsc-mur-col { display: flex; flex-direction: column; min-width: 0; }
.bsc-mur .bsc-mur-n2 { display: flex; flex-direction: column; gap: 24px; margin-top: 30px; padding-left: 26px; }
.bsc-mur .bsc-mur-n2 > li, .bsc-mur .bsc-mur-dossier > li { display: flex; flex-direction: column; min-width: 0; }
.bsc-mur .bsc-mur-n2 > li:has(> .bsc-piece--dymo) { align-items: flex-start; }
.bsc-mur .bsc-mur-dossier { display: flex; flex-direction: column; gap: 13px; margin-top: 12px; padding-left: 24px; }

/* Les dossiers : un onglet de chemise cartonnée. */
.bsc-tiroir-mur { margin-top: 10px; }
.bsc-tiroir-mur > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; margin-left: 22px; padding: 7px 12px 6px 10px; cursor: pointer; position: relative; z-index: 3;
  font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3B2A1C; background: #D8B878; border-radius: 6px 6px 1px 1px;
  box-shadow: 0 2px 0 #B7954F, 0 5px 10px rgba(30, 16, 4, .3); }
.bsc-tiroir-mur > summary::-webkit-details-marker { display: none; }
.bsc-tiroir-mur > summary::before { content: "▸"; font-size: 12px; transition: rotate .2s; }
.bsc-tiroir-mur[open] > summary::before { rotate: 90deg; }
.bsc-tiroir-mur > summary:hover, .bsc-tiroir-mur > summary:focus-visible { background: #E6C98A; outline: none; }
.bsc-tiroir-mur > summary:focus-visible { box-shadow: 0 0 0 2px var(--m-encre), 0 5px 10px rgba(30, 16, 4, .3); }
.bsc-tiroir-mur-nb { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--m-encre); color: #FFF8EC; font-size: 10.5px; letter-spacing: 0; }
.bsc-mur .bsc-mur-annee { font: 400 17px/1 var(--marqueur); color: var(--m-encre); background: rgba(240, 228, 196, .9); align-self: flex-start; padding: 5px 12px 4px; margin: 10px 0 0 -8px; rotate: -2deg; box-shadow: 0 2px 5px rgba(0, 0, 0, .16); }

/* ---------------- Les pièces ---------------- */
.bsc-piece { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--m-texte); background: var(--m-papier);
  rotate: var(--r0, 0deg); transform-origin: 50% 0; border: 0; text-align: left; font: inherit; cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 10px 18px -6px rgba(32, 18, 6, .45);
  transition: box-shadow .2s, translate .2s, opacity .25s, filter .25s; z-index: 3; }
.bsc-piece:hover, .bsc-piece:focus-visible { box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 18px 26px -8px rgba(32, 18, 6, .55); translate: 0 -2px; z-index: 5; outline: none; }
.bsc-piece:focus-visible { box-shadow: 0 0 0 3px var(--fil-vif), 0 18px 26px -8px rgba(32, 18, 6, .55); }
.bsc-piece-oeil { font: 500 10.5px/1.25 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--r, var(--m-lave)); }
.bsc-piece-titre { font-family: var(--titre); font-weight: 600; font-size: 21px; line-height: 1.04; color: var(--m-encre); text-wrap: balance; }
.bsc-piece-texte { font: 400 13.5px/1.45 var(--lecture); color: var(--m-texte); }
.bsc-piece-pied { font: 400 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--m-doux); margin-top: 2px; }

/* L'épingle : une tête ronde qui accroche la lumière, son ombre portée sur le papier. */
.bsc-epingle { position: absolute; left: 50%; top: -9px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; z-index: 6; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #FFD6CC 0 12%, var(--pin, #C1302A) 34%, #6E1510 100%);
  box-shadow: 2px 3px 2px rgba(20, 8, 2, .35); transition: translate .15s, scale .15s; }
.bsc-piece--reg .bsc-epingle { --pin: var(--r); background: radial-gradient(circle at 34% 30%, #fff 0 10%, var(--r) 36%, color-mix(in srgb, var(--r) 55%, #000) 100%); }
.bsc-piece:hover .bsc-epingle { translate: 0 1px; scale: .93; }

/* Le polaroïd : l'accueil, « Qui parle ? ». */
.bsc-piece--polaroid { padding: 12px 12px 14px; background: #FDFCF8; gap: 4px; align-items: center; text-align: center; }
.bsc-piece--polaroid .bsc-piece-cliche { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #2A241E; }
.bsc-piece--polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: sepia(.18) contrast(1.04); }
.bsc-piece--polaroid .bsc-piece-legende { font: 400 21px/1.1 var(--marqueur); color: var(--m-encre); margin-top: 10px; }
.bsc-piece--polaroid .bsc-piece-oeil { color: var(--m-lave); }
.bsc-mur-n0 > li > .bsc-piece--polaroid { width: 232px; }

/* La fiche de registre : un bristol à bandeau, son tampon. */
.bsc-piece--registre { padding: 22px 18px 18px; border-top: 10px solid var(--r); background: linear-gradient(var(--m-papier), var(--m-papier)) padding-box, var(--m-papier); min-height: 172px; }
.bsc-piece--registre .bsc-piece-titre { font-size: clamp(28px, 2.4vw, 36px); line-height: 1; }
.bsc-piece--registre .bsc-piece-texte { font-family: var(--titre); font-style: italic; font-size: 19px; line-height: 1.2; color: var(--m-doux); }
.bsc-piece--registre .bsc-piece-pied { margin-top: auto; color: var(--r); font-weight: 500; }
.bsc-piece-tampon { position: absolute; right: 8px; bottom: 12px; rotate: -11deg; font: 800 14px/1 'Big Shoulders Stencil Display', var(--mono); letter-spacing: .08em; color: rgba(168, 50, 30, .62); border: 2px solid rgba(168, 50, 30, .55); padding: 4px 6px 3px; border-radius: 3px; mix-blend-mode: multiply; pointer-events: none; }

/* Le carnet : les chemins de traverse. */
.bsc-piece--carnet { padding: 20px 16px 18px 30px; min-height: 172px;
  background: radial-gradient(circle at 12px 18px, var(--liege-fond) 0 4.5px, transparent 5px) 0 0 / 100% 26px repeat-y,
    linear-gradient(90deg, transparent 22px, rgba(168, 50, 30, .45) 22px 23px, transparent 23px),
    repeating-linear-gradient(transparent 0 25px, rgba(46, 71, 86, .16) 25px 26px), var(--m-papier); }
.bsc-piece--carnet .bsc-piece-titre { font-size: clamp(25px, 2vw, 30px); }
.bsc-piece--carnet .bsc-piece-texte { font-family: var(--titre); font-style: italic; font-size: 18px; color: var(--m-doux); }

/* La fiche bristol lignée. */
.bsc-piece--fiche { padding: 16px 15px 14px; border-top: 3px solid var(--r, var(--m-lave));
  background: repeating-linear-gradient(transparent 0 21px, rgba(46, 71, 86, .14) 21px 22px) 0 34px / 100% calc(100% - 34px) no-repeat, var(--m-papier); }

/* La photo : un tirage à marge blanche, l'image de partage du dernier texte. */
.bsc-piece--photo { padding: 9px 9px 13px; background: #FDFCF8; }
.bsc-piece--photo .bsc-piece-cliche { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: #24201C; margin-bottom: 6px; }
.bsc-piece--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bsc-piece-vide { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #2E2924, #1B1815); }
.bsc-piece--photo .bsc-piece-titre { font-size: 19px; }

/* La photo-texte : un éclat tapé sur papier sombre. */
.bsc-piece--photo-texte { padding: 18px 16px 15px; background: #1F1B17; color: #E8E1D3; }
.bsc-piece--photo-texte .bsc-piece-oeil { color: #F07255; }
.bsc-piece-citation { font-family: var(--titre); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.18; color: #FFF8EC; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bsc-piece--photo-texte .bsc-piece-citation::before { content: "« "; } .bsc-piece--photo-texte .bsc-piece-citation::after { content: " »"; }
.bsc-piece--photo-texte .bsc-piece-pied { color: #B3A894; }

/* Le pense-bête, couleur de lave pâle, le coin qui rebique. */
.bsc-piece--postit { padding: 16px 15px 16px; background: linear-gradient(170deg, #F6DCCF 0%, #F0CDBD 100%); }
.bsc-piece--postit::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(135deg, rgba(0, 0, 0, .0) 50%, rgba(120, 50, 30, .18) 50%, #E7B9A6 62%); pointer-events: none; }
.bsc-piece--postit .bsc-piece-titre { color: #7E2416; }

/* La coupure : un bout de journal découpé aux ciseaux. */
.bsc-piece--coupure { padding: 11px 12px 10px 13px; gap: 4px; background: var(--m-papier-2);
  clip-path: polygon(0 3%, 6% 0, 18% 2%, 31% 0, 44% 3%, 58% 0, 71% 2%, 85% 0, 100% 3%, 99% 30%, 100% 62%, 98% 100%, 82% 97%, 66% 100%, 50% 98%, 34% 100%, 18% 97%, 4% 100%, 1% 70%, 0 38%);
  filter: drop-shadow(0 6px 5px rgba(32, 18, 6, .35)); box-shadow: none; }
.bsc-piece--coupure:hover, .bsc-piece--coupure:focus-visible { box-shadow: none; filter: drop-shadow(0 10px 8px rgba(32, 18, 6, .45)); }
.bsc-piece--coupure .bsc-piece-titre { font: 600 14px/1.25 var(--lecture); text-wrap: pretty; }
.bsc-piece--coupure .bsc-piece-pied { font-size: 10.5px; }
.bsc-piece--coupure .bsc-epingle { width: 12px; height: 12px; margin-left: -6px; top: 3px; }
.bsc-piece--coupure-grande { padding: 14px 14px 12px; background: var(--m-papier-2); border-left: 4px solid var(--r, var(--m-lave)); }
.bsc-piece--coupure-grande .bsc-piece-titre { font-size: 20px; }

/* L'étiquette Dymo : le ruban gaufré, lettres en relief. */
.bsc-piece--dymo { display: inline-flex; flex-direction: row; align-items: center; padding: 6px 12px 6px 22px; background: var(--r, #24201C); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 4px 8px -2px rgba(32, 18, 6, .5); max-width: 100%; }
.bsc-piece--dymo .bsc-piece-titre { font: 600 11px/1.25 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #FFF8EC; text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .15); }
.bsc-piece--dymo .bsc-epingle { left: 10px; top: 50%; margin: -6px 0 0 -6px; width: 12px; height: 12px; }
button.bsc-piece--dymo { cursor: pointer; }

/* ---------------- Les animations au pointeur ---------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bsc-piece--registre:hover, .bsc-piece--fiche:hover, .bsc-piece--carnet:hover { animation: bsc-secousse .62s ease-out; }
  .bsc-piece--polaroid:hover, .bsc-piece--photo:hover, .bsc-piece--photo-texte:hover { animation: bsc-balancier 1.5s cubic-bezier(.3, .7, .3, 1); }
  .bsc-piece--coupure:hover, .bsc-piece--coupure-grande:hover { animation: bsc-frisson .42s linear; }
  .bsc-piece--postit:hover { animation: bsc-souffle .9s ease-out; }
  .bsc-piece--dymo:hover { animation: bsc-claque .36s ease-out; }
  .bsc-tiroir-mur > summary:hover { animation: bsc-tiroir .35s ease-out; }
}
@keyframes bsc-secousse {
  0% { rotate: var(--r0); } 18% { rotate: calc(var(--r0) - 2.6deg); translate: -1px -2px; } 36% { rotate: calc(var(--r0) + 2deg); }
  54% { rotate: calc(var(--r0) - 1.2deg); } 72% { rotate: calc(var(--r0) + .6deg); } 100% { rotate: var(--r0); translate: 0 -2px; } }
@keyframes bsc-balancier {
  0% { rotate: var(--r0); } 14% { rotate: calc(var(--r0) + 4.5deg); } 32% { rotate: calc(var(--r0) - 3.4deg); } 50% { rotate: calc(var(--r0) + 2.2deg); }
  68% { rotate: calc(var(--r0) - 1.2deg); } 84% { rotate: calc(var(--r0) + .5deg); } 100% { rotate: var(--r0); } }
@keyframes bsc-frisson {
  0%, 100% { translate: 0 -2px; } 15% { translate: -1.6px -2px; rotate: calc(var(--r0) - .8deg); } 30% { translate: 1.4px -3px; rotate: calc(var(--r0) + .9deg); }
  45% { translate: -1px -2px; } 60% { translate: .8px -2.5px; rotate: calc(var(--r0) - .4deg); } 80% { translate: -.4px -2px; } }
@keyframes bsc-souffle {
  0% { rotate: var(--r0); scale: 1; } 25% { rotate: calc(var(--r0) - 3deg); scale: 1.035 1.02; translate: 0 -5px; } 55% { rotate: calc(var(--r0) + 1.5deg); scale: 1.02; }
  100% { rotate: var(--r0); scale: 1; translate: 0 -2px; } }
@keyframes bsc-claque { 0% { translate: 0 0; } 30% { translate: 0 -3px; scale: 1.04; } 60% { translate: 0 1px; scale: .99; } 100% { translate: 0 -1px; scale: 1; } }
@keyframes bsc-tiroir { 0% { translate: 0 0; } 40% { translate: 0 -3px; } 100% { translate: 0 0; } }

/* Les pièces sur le chemin du fil allumé, et celles que la recherche trouve. */
.bsc-piece.sur-le-fil { box-shadow: 0 0 0 2px rgba(224, 57, 43, .55), 0 14px 22px -8px rgba(32, 18, 6, .5); }
.bsc-piece--coupure.sur-le-fil { filter: drop-shadow(0 0 2px rgba(224, 57, 43, .9)) drop-shadow(0 8px 6px rgba(32, 18, 6, .4)); }
.bsc-mur.filtre .bsc-piece { opacity: .3; filter: grayscale(.4); }
.bsc-mur.filtre .bsc-piece.trouve { opacity: 1; filter: none; box-shadow: 0 0 0 3px #F2C14E, 0 14px 22px -8px rgba(32, 18, 6, .55); }
.bsc-mur.filtre .bsc-piece--coupure.trouve { filter: drop-shadow(0 0 3px #F2C14E) drop-shadow(0 8px 6px rgba(32, 18, 6, .4)); box-shadow: none; }

/* ---------------- L'aperçu : la fiche d'indice qui suit le pointeur ---------------- */
.bsc-mur-apercu { position: fixed; left: 0; top: 0; z-index: 900; width: 320px; max-width: calc(100vw - 24px); pointer-events: none;
  background: #FDFCF8; color: var(--m-texte); box-shadow: 0 2px 2px rgba(0, 0, 0, .12), 0 22px 44px -10px rgba(20, 12, 4, .55); padding: 0 0 14px;
  rotate: -1deg; opacity: 0; translate: 0 6px; transition: opacity .16s, translate .16s; }
.bsc-mur-apercu.vu { opacity: 1; translate: 0 0; }
.bsc-mur-apercu::before { content: ""; position: absolute; left: 22px; top: -14px; width: 16px; height: 46px; border: 2.5px solid #8C8F93; border-radius: 9px; border-bottom-color: transparent; rotate: 8deg; z-index: 2; }
.bsc-mur-apercu img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: #24201C; }
.bsc-mur-apercu-corps { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.bsc-mur-apercu .o { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--m-lave); }
.bsc-mur-apercu .t { font: 600 22px/1.06 var(--titre); color: var(--m-encre); }
.bsc-mur-apercu .x { font: 400 13.5px/1.45 var(--lecture); color: var(--m-texte); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bsc-mur-apercu .m { font: 400 11px/1.3 var(--mono); color: var(--m-doux); }
.bsc-mur-apercu .va { font: 400 15px/1 var(--marqueur); color: var(--fil); margin-top: 4px; }

/* ---------------- La nuit : la pièce s'éteint, la lampe de l'enquêteur suit le pointeur ---------------- */
html.insomnie .bsc-mur-cadre { --liege: #5C432B; --liege-fond: #4C3723; filter: none; }
html.insomnie .bsc-mur-cadre::after { opacity: 1; background: radial-gradient(circle 460px at var(--lx, 50%) var(--ly, 22%), rgba(255, 214, 150, .16), transparent 70%), radial-gradient(140% 100% at 50% 40%, transparent 40%, rgba(0, 0, 0, .38)); mix-blend-mode: normal; }
html.insomnie .bsc-mur .bsc-piece { filter: brightness(.9) saturate(.92); }
html.insomnie .bsc-mur .bsc-piece--coupure { filter: brightness(.9) drop-shadow(0 6px 5px rgba(0, 0, 0, .55)); }
html.insomnie .bsc-mur-note { background: rgba(232, 220, 190, .82); }
html.insomnie .bsc-mur-fils .fil { stroke: #D23A2C; }
@media (prefers-color-scheme: dark) {
  html:not(.jour) .bsc-mur-cadre { --liege: #5C432B; --liege-fond: #4C3723; }
  html:not(.jour) .bsc-mur-cadre::after { opacity: 1; background: radial-gradient(circle 460px at var(--lx, 50%) var(--ly, 22%), rgba(255, 214, 150, .16), transparent 70%), radial-gradient(140% 100% at 50% 40%, transparent 40%, rgba(0, 0, 0, .38)); }
  html:not(.jour) .bsc-mur .bsc-piece { filter: brightness(.9) saturate(.92); }
  html:not(.jour) .bsc-mur-fils .fil { stroke: #D23A2C; }
}

/* ---------------- Écrans moyens et téléphones ---------------- */
/* La colonne de partage flotte à droite (64 px, à 32 px du bord) dès 1 024 px à la souris : le mur lui laisse sa marge. */
@media (min-width: 1024px) and (max-width: 1760px) and (hover: hover) {
  .bsc-mur { max-width: none; padding: 0 108px 0 28px; }
}
@media (max-width: 1240px) {
  .bsc-mur .bsc-mur-n1 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; padding-left: 18px; }
  .bsc-mur-note--depart { left: 18px; }
}
@media (max-width: 720px) {
  .bsc-mur-cadre { padding: 54px 12px 64px 10px; border-width: 10px; }
  .bsc-mur .bsc-mur-n1 { grid-template-columns: minmax(0, 1fr); row-gap: 44px; margin-top: 64px; padding-left: 26px; }
  .bsc-mur .bsc-mur-n2 { padding-left: 24px; }
  .bsc-mur-note--legende { display: none; }
  .bsc-mur-cadre { padding-top: 66px; }
  .bsc-mur-note--depart { top: 16px; left: 10px; font-size: 16px; rotate: -3deg; }
  .bsc-mur-note--depart::after { content: "↓"; right: -24px; top: 4px; font-size: 22px; }
  .bsc-mur-n0 > li > .bsc-piece--polaroid { width: 190px; }
  .bsc-piece-tampon { font-size: 12px; }
  .bsc-mur-apercu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bsc-mur-fils.trace .fil, .bsc-mur-fils.trace .ombre { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .bsc-piece, .bsc-mur-apercu { transition: none; }
}
@media print {
  .bsc-mur-cadre { background: #fff; border: 1px solid #999; box-shadow: none; }
  .bsc-mur-cadre::after, .bsc-mur-note, .bsc-mur-apercu { display: none; }
  .bsc-tiroir-mur > .bsc-mur-dossier { display: flex; }
}