/* ═══════════════════════════════════════════════════════════════════════════
   LE FIL NOIR — feuille commune v6 « tableau d'enquêteur » (06/10/2026)
   Un bureau de bois sombre, un panneau encadré, des photos épinglées qui penchent, du fil entre
   les épingles, des fiches sur papier ancien tapées à la machine et tamponnées.
   Textures : photographies générées (assets/tex/*.webp), jamais dessinées.
   Polices locales : IM Fell English (titres), Special Elite (machine à écrire, Apache 2.0),
   EB Garamond (corps), Caveat (annotations à la main).
   Défaut (choix de Rain, 06/10 03h33) : feutre vert, épingles de laiton, fil ivoire.
   ?da=a : liège, épingles rouges, fil noir.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-var.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-var-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:"IM Fell English";src:url(/assets/fonts/im-fell-english-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IM Fell English";src:url(/assets/fonts/im-fell-english-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Special Elite";src:url(/assets/fonts/special-elite-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caveat";src:url(/assets/fonts/caveat-var.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --bois:url(/assets/tex/bois.webp); --panneau:url(/assets/tex/feutre.webp); --papier:url(/assets/tex/papier.webp);
  --cadre:#2a1a10; --cadre-clair:#4a2f1d;
  --ivoire:#efe6d2; --ivoire-doux:#cdbfa3; --ivoire-pale:#9d8f74;
  --encre:#2a211a; --encre-douce:#5c4e3f; --encre-pale:#8e7f6c; --filet:#cdbf9f;
  --rouge:#9b1f1a; --rouge-soft:rgb(155 31 26 / .12); --vert:#2f5e45; --vert-soft:rgb(47 94 69 / .12); --ocre:#a56f1d; --ocre-soft:rgb(165 111 29 / .14);
  --fil:#e8dcc0; --fil-soupcon:#d9453c; --fil-acquis:#d4a84b; --epingle:#c9a04a; --epingle-ombre:#5a4210;
  --titre:"IM Fell English",Georgia,serif; --machine:"Special Elite","Courier New",monospace; --corps:"EB Garamond",Georgia,serif; --main:Caveat,"Segoe Script",cursive;
  --ease:cubic-bezier(.2,.7,.3,1); color-scheme:light;
}
:root[data-da="a"]{--panneau:url(/assets/tex/liege.webp); --fil:#17120e; --fil-soupcon:#a51f1a; --fil-acquis:#8a6a1e; --epingle:#b8231c; --epingle-ombre:#4a0d0a}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#1a110b}
body{margin:0;min-height:100vh;color:var(--ivoire);font:400 15.5px/1.55 var(--corps);
  background:
    radial-gradient(1100px 700px at 12% -5%, rgb(255 196 120 / .16), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgb(0 0 0 / .45), transparent 60%),
    linear-gradient(rgb(0 0 0 / .32), rgb(0 0 0 / .32)), var(--bois) center/900px repeat;
  background-attachment:fixed}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--epingle);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── BANDEAU ─── */
.bandeau{position:sticky;top:0;z-index:20;background:rgb(16 10 6 / .9);backdrop-filter:blur(6px);border-bottom:1px solid rgb(239 230 210 / .12);box-shadow:0 8px 24px rgb(0 0 0 / .35)}
.bandeau-in{max-width:1680px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:24px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marque i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgb(255 255 255 / .55),transparent 40%),radial-gradient(circle,var(--epingle),var(--epingle-ombre) 95%);box-shadow:0 2px 3px rgb(0 0 0 / .6)}
.marque b{font:400 24px/1 var(--titre);color:var(--ivoire);letter-spacing:.01em}
.marque small{display:block;margin-top:3px;font:400 11px/1 var(--machine);color:var(--ivoire-pale);letter-spacing:.04em}
.nav{margin-left:auto;display:flex;gap:4px;height:100%}
.nav a{display:flex;align-items:center;gap:7px;padding:0 14px;text-decoration:none;font:400 13px/1 var(--machine);letter-spacing:.06em;text-transform:uppercase;color:var(--ivoire-doux);border-bottom:2px solid transparent}
.nav a i{font-style:normal;color:var(--ivoire-pale);font-size:11px}
.nav a:hover{color:var(--ivoire)}
.nav a[aria-current="page"]{color:var(--ivoire);border-bottom-color:var(--epingle)}
.nav a[aria-current="page"] i{color:var(--epingle)}

/* ─── PAGE (sur le bureau) ─── */
.page{max-width:1680px;margin:0 auto;padding:22px 24px 36px}
.chapitre{margin:0 0 16px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.chapitre .num{margin:0;font:400 12px/1 var(--machine);letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-pale)}
.chapitre h1{margin:0;font:400 34px/1.05 var(--titre);color:var(--ivoire);text-shadow:0 2px 6px rgb(0 0 0 / .5)}
.chapitre p{margin:0;font:400 20px/1.2 var(--main);color:var(--ivoire-doux);max-width:70ch}
.rubrique{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px;font:400 24px/1.2 var(--titre);color:var(--ivoire);text-shadow:0 2px 6px rgb(0 0 0 / .5)}
.rubrique small{font:400 11px/1 var(--machine);letter-spacing:.1em;text-transform:uppercase;color:var(--ivoire-pale)}
.pied-page{margin-top:16px;padding-top:10px;border-top:1px solid rgb(239 230 210 / .15);font:400 12px/1.6 var(--machine);color:var(--ivoire-pale)}
.doute{display:inline-block;margin-left:3px;font:700 12px/1 var(--machine);color:var(--rouge);vertical-align:super}

/* ─── PAPIER : une note épinglée sur le bureau ─── */
.papier{position:relative;color:var(--encre);background:var(--papier) center/700px repeat,#ece3cf;box-shadow:0 1px 0 rgb(255 255 255 / .35) inset,0 12px 26px rgb(0 0 0 / .55)}
.papier::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(0 0 0 / .03),transparent 12%,transparent 88%,rgb(0 0 0 / .05))}
.epingle::after{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 35%,rgb(255 255 255 / .6),transparent 40%),radial-gradient(circle,var(--epingle),var(--epingle-ombre) 95%);box-shadow:0 3px 4px rgb(0 0 0 / .6)}
.pench-1{transform:rotate(-.7deg)}.pench-2{transform:rotate(.55deg)}.pench-3{transform:rotate(-.35deg)}
.papier b,.papier strong{color:var(--encre)}

/* ─── COLONNES DU PLATEAU (le Mur) ─── */
.plateau{display:grid;grid-template-columns:258px minmax(0,1fr) 352px;gap:18px;height:max(560px,calc(100dvh - 206px))}
.colonne{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative;
  color:var(--encre);background:var(--papier) center/700px repeat,#ece3cf;box-shadow:0 1px 0 rgb(255 255 255 / .35) inset,0 14px 30px rgb(0 0 0 / .55)}
.colonne::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(0 0 0 / .03),transparent 12%,transparent 88%,rgb(0 0 0 / .05))}
.colonne .tete{padding:12px 16px 10px;border-bottom:1px solid var(--filet);font:400 13px/1.2 var(--machine);letter-spacing:.12em;text-transform:uppercase;color:var(--encre);display:flex;align-items:center;gap:8px;min-height:44px}
.colonne .tete small{margin-left:auto;font:400 11px/1 var(--machine);color:var(--encre-pale);letter-spacing:.04em;text-transform:none}
.defile{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--filet) transparent;min-height:0}

/* I. le registre */
.recherche{padding:10px 12px;border-bottom:1px solid var(--filet)}
.champ{width:100%;padding:8px 10px;background:rgb(255 255 255 / .45);border:1px solid var(--filet);color:var(--encre);font:400 14px/1.3 var(--machine)}
.champ::placeholder{color:var(--encre-pale)}
.champ:focus{outline:none;border-color:var(--encre-douce)}
.tris{padding:9px 12px;border-bottom:1px solid var(--filet);display:flex;flex-wrap:wrap;gap:5px}
.puces{display:flex;flex-wrap:wrap;gap:6px}
.puce{min-height:28px;padding:5px 10px;cursor:pointer;font:400 11.5px/1.2 var(--machine);letter-spacing:.05em;text-transform:uppercase;color:var(--encre-douce);background:#ece3cf;border:1px solid var(--filet);border-radius:2px;box-shadow:0 1px 2px rgb(0 0 0 / .25);transition:all .15s var(--ease)}
.puce:hover{border-color:var(--encre-douce);color:var(--encre)}
.puce[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--ivoire)}
.puce b{font-weight:400;opacity:.7;margin-left:5px;color:inherit}
.groupe-titre{margin:0;padding:12px 16px 5px;font:400 11px/1 var(--machine);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-pale);position:sticky;top:0;z-index:2;background:var(--papier) center/700px repeat,#ece3cf}
.rangee{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:6px 16px;background:transparent;border:0;border-left:3px solid transparent;cursor:pointer;text-align:left;color:var(--encre-douce);font:500 15px/1.3 var(--corps)}
.rangee:hover{background:rgb(0 0 0 / .05);color:var(--encre)}
.rangee[aria-current=true]{background:var(--rouge-soft);border-left-color:var(--rouge);color:var(--encre)}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--filet);box-shadow:inset 0 1px 1px rgb(0 0 0 / .25)}
.rangee.pivot .pastille{background:var(--ocre)}.rangee.hostile .pastille{background:var(--rouge)}.rangee.allie .pastille{background:var(--vert)}
.rangee .q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rangee .sur-mur{font:400 9.5px/1 var(--machine);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-pale);border:1px solid var(--filet);padding:3px 5px}

/* II. le panneau */
.colonne.mur-col{background:var(--cadre);padding:11px;box-shadow:0 14px 30px rgb(0 0 0 / .6),inset 0 0 0 1px rgb(255 255 255 / .06),inset 0 0 0 3px var(--cadre-clair)}
.colonne.mur-col::before{display:none}
.colonne.mur-col .tete{color:var(--ivoire);border-bottom:0;padding:4px 8px 10px;min-height:0}
.legende{display:flex;gap:16px;margin-left:auto;font:400 11px/1 var(--machine);letter-spacing:.04em;text-transform:none;color:var(--ivoire-doux)}
.legende i{font-style:normal;display:inline-flex;align-items:center;gap:7px}
.legende b{width:22px;height:0;display:inline-block;border-top:2px solid var(--fil);box-shadow:0 1px 1px rgb(0 0 0 / .5)}
.legende b.soupcon{border-top-color:var(--fil-soupcon)}.legende b.acquis{border-top-color:var(--fil-acquis)}
.planche{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:8px;
  background:var(--panneau) center/680px repeat,#2f4a3a;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .35),inset 0 0 60px rgb(0 0 0 / .35)}
.planche svg{width:100%;height:auto;max-width:1200px;min-width:880px;overflow:visible}
.etat-mur{margin:0;padding:9px 8px 2px;font:400 12px/1.4 var(--machine);color:var(--ivoire-doux)}
.noeud{cursor:pointer;transition:opacity .18s var(--ease)}
.noeud .photo{fill:#f3eee2;stroke:rgb(0 0 0 / .18);stroke-width:.6;filter:url(#ombre-carte)}
.noeud .cliche{fill:#d9d0bb}
.noeud .initiales{font:400 26px/1 var(--titre);fill:#7d6f5c;pointer-events:none}
.noeud .sans{font:400 7.5px/1 var(--machine);letter-spacing:.08em;fill:#9a8c77;pointer-events:none}
.noeud .n-nom{font:400 11px/1 var(--machine);fill:var(--encre);pointer-events:none}
.noeud .n-sous{font:italic 10px/1 var(--corps);fill:var(--encre-pale);pointer-events:none}
.noeud .liseret{fill:none;stroke:transparent;stroke-width:3}
.noeud.hostile .liseret{stroke:var(--rouge)}.noeud.allie .liseret{stroke:var(--vert)}.noeud.pivot .liseret{stroke:var(--ocre)}
.noeud .pin-ombre{fill:rgb(0 0 0 / .45)}
.noeud .pin{fill:var(--epingle);stroke:var(--epingle-ombre);stroke-width:.8}
.noeud .pin-reflet{fill:rgb(255 255 255 / .75)}
.noeud:hover .photo,.noeud:focus-visible .photo{stroke:var(--encre);stroke-width:1}
.noeud:focus{outline:none}
.noeud.cible .photo{stroke:var(--rouge);stroke-width:2.5}
.noeud.pale{opacity:.4}
.fil{fill:none;stroke:var(--fil);stroke-width:2.2;stroke-linecap:round;filter:url(#ombre-fil);transition:opacity .18s var(--ease),stroke-width .18s var(--ease)}
.fil.soupcon{stroke:var(--fil-soupcon)}
.fil.acquis{stroke:var(--fil-acquis)}
.fil.vif{stroke-width:3.4}
.fil.pale{opacity:.14}
.f-lbl{opacity:0;transition:opacity .18s var(--ease);pointer-events:none}
.f-lbl rect{fill:#f3eee2;stroke:rgb(0 0 0 / .25);stroke-width:.5;filter:url(#ombre-carte)}
.f-lbl text{font:400 10px/1 var(--machine);fill:var(--encre);letter-spacing:.02em}
.f-lbl.vu{opacity:1}

/* III. la fiche — et tout ce qui est écrit sur papier */
.fiche{padding:16px 18px 22px}
.f-cadre{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px;position:relative;padding-right:78px}
.medaillon{position:relative;flex:none;width:var(--m,64px);height:calc(var(--m,64px) * 1.2);border-radius:1px;background:#d9d0bb;border:4px solid #f3eee2;box-shadow:0 2px 6px rgb(0 0 0 / .35);overflow:hidden;display:grid;place-items:center;transform:rotate(-2deg)}
.medaillon img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.medaillon span{font:400 calc(var(--m,64px) * .4)/1 var(--titre);color:#7d6f5c}
.medaillon .pas-vu{display:none}
.medaillon.hostile{box-shadow:0 0 0 2px var(--rouge),0 2px 6px rgb(0 0 0 / .35)}
.medaillon.allie{box-shadow:0 0 0 2px var(--vert),0 2px 6px rgb(0 0 0 / .35)}
.medaillon.pivot{box-shadow:0 0 0 2px var(--ocre),0 2px 6px rgb(0 0 0 / .35)}
.f-role,.role{margin:2px 0 4px;font:400 10.5px/1.3 var(--machine);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-pale)}
.f-nom{margin:0;font:400 25px/1.1 var(--titre);color:var(--encre)}
.tampon{position:absolute;right:-6px;top:-4px;padding:3px 8px;border:2px solid currentColor;border-radius:3px;font:400 12px/1 var(--machine);letter-spacing:.16em;text-transform:uppercase;transform:rotate(-9deg);opacity:.85;
  mask:radial-gradient(circle at 30% 40%,#000 70%,transparent 100%)}
.tampon.hostile{color:var(--rouge)}.tampon.allie{color:var(--vert)}.tampon.pivot{color:var(--ocre)}
.f-corps{margin:0 0 12px;font-size:15.5px;line-height:1.5;color:var(--encre-douce)}
.f-corps b{color:var(--encre)}
.etiq{display:flex;flex-wrap:wrap;gap:6px}
.e{display:inline-block;padding:2px 8px;font:400 10.5px/1.4 var(--machine);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--filet);color:var(--encre-douce);background:rgb(255 255 255 / .3)}
.e.r{border-color:var(--rouge);color:var(--rouge)}.e.v{border-color:var(--vert);color:var(--vert)}.e.o{border-color:var(--ocre);color:var(--ocre)}.e.u{border-style:dashed}
.approche{margin:12px 0 0;padding:0 0 0 12px;border-left:2px solid var(--vert);font:500 20px/1.25 var(--main);color:var(--vert)}
.interdit{margin:12px 0 0;padding:8px 11px;border:1.5px solid var(--rouge);color:var(--rouge);font:400 11.5px/1.5 var(--machine);letter-spacing:.03em;background:var(--rouge-soft)}
.pieces{margin:10px 0 0;font:400 12px/1.5 var(--machine)}
.pieces a{color:var(--rouge);text-decoration:none;border-bottom:1px solid var(--rouge)}
.lien-mur{font:400 11px/1.2 var(--machine);letter-spacing:.06em;text-transform:uppercase;color:var(--rouge);text-decoration:none;border-bottom:1px solid rgb(155 31 26 / .4)}
.lien-mur:hover{border-bottom-color:var(--rouge)}
.f-titre{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font:400 11px/1.2 var(--machine);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-pale)}
.f-titre::after{content:"";flex:1;height:1px;background:var(--filet)}
.f-liens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.f-liens button,.f-liens a{display:block;width:100%;text-align:left;background:rgb(255 255 255 / .3);border:1px solid var(--filet);cursor:pointer;padding:7px 10px;color:var(--encre);font:500 15px/1.35 var(--corps);text-decoration:none;transition:border-color .15s var(--ease)}
.f-liens button:hover,.f-liens a:hover{border-color:var(--encre-douce);background:rgb(255 255 255 / .55)}
.f-liens b{display:block;font:400 10.5px/1.2 var(--machine);letter-spacing:.04em;color:var(--encre-pale);margin-bottom:2px;font-weight:400}
.f-liens b.soupcon,.f-liens b.ouverte{color:var(--rouge)}.f-liens b.acquis,.f-liens b.piste{color:var(--ocre)}.f-liens b.resolue{color:var(--vert)}
.f-vide{color:var(--encre-pale);font:italic 15px/1.5 var(--corps);margin:0}
.rang-medaillons{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}
.mini-fiche{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--encre-douce);font:500 14px/1.2 var(--corps)}
.mini-fiche .medaillon{--m:28px;border-width:2px;transform:none}
.mini-fiche:hover{color:var(--rouge)}
.pied{padding:10px 14px;border-top:1px solid var(--filet);display:flex;gap:8px}
.pied a{flex:1;text-align:center;padding:8px 6px;text-decoration:none;border:1px solid var(--encre-douce);color:var(--encre);font:400 11.5px/1.3 var(--machine);letter-spacing:.06em;text-transform:uppercase}
.pied a:hover{background:var(--encre);color:var(--ivoire)}
.vide{padding:16px;border:1px dashed var(--filet);color:var(--encre-pale);font:italic 14px/1.5 var(--corps);text-align:center}
.badge{display:inline-block;padding:2px 7px;border:1.5px solid currentColor;border-radius:2px;font:400 10.5px/1.4 var(--machine);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-pale);transform:rotate(-2deg);white-space:nowrap}
.badge.ouverte,.badge.soupcon{color:var(--rouge)}.badge.piste,.badge.acquis{color:var(--ocre)}.badge.resolue{color:var(--vert)}.badge.etabli{color:var(--encre-douce)}

@media (max-width:1180px){
  .bandeau-in{height:auto;flex-wrap:wrap;gap:8px;padding:10px 16px}
  .marque small{display:none}
  .nav{margin-left:0;width:100%;height:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .nav a{justify-content:center;padding:0 4px;font-size:11px}
  .nav a i{display:none}
  .page{padding:16px 12px 24px}
  .chapitre{flex-direction:column;gap:6px}
  .chapitre h1{font-size:28px}
  .plateau{grid-template-columns:1fr;height:auto}
  .colonne.index .defile{max-height:46vh}
  .planche{display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}