/* =========================================================================
   SCRIPTORIUM V3 (2026-10-06) : les styles des ajouts.
   Prefixe `v3-` pour tout ce qui est neuf : rien ici ne doit capturer une
   regle de l'atelier existant. A fusionner dans la feuille de l'atelier au
   portage, en gardant des noms bloc-modificateur.
   ========================================================================= */
[hidden]{ display:none !important }

/* Le bandeau de la copie locale : il ne doit jamais partir en ligne. */
.v3-bandeau{
  position:fixed; top:6px; right:10px; z-index:200; pointer-events:none;
  font:600 11px/1 Fredoka, sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:#160401; background:#c9a84c; padding:5px 9px; border-radius:3px;
}

/* ── Le bouton des sons ─────────────────────────────────────────────────── */
.sc-outils .v3-sons{ min-width:34px; padding-left:8px; padding-right:8px;
  display:inline-flex; align-items:center; justify-content:center }
.v3-sons svg{ display:block }
.v3-sons[aria-pressed="true"] .v3-son-barre{ display:none }
.v3-sons[aria-pressed="false"] .v3-son-onde{ display:none }
.v3-sons[aria-pressed="false"]{ opacity:.7 }

/* ── Le sceau coule a la main (cire.js) ─────────────────────────────────── */
/* La coulure d'origine laisse la place aux coulures tirees de la graine. */
.ch-sceau.v3-coulee .ch-sceau-coulure{ display:none }
.v3-coulure{
  position:absolute; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%, var(--cire-c,#8b2500), var(--cire-sombre,#4d1300));
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.ch-sceau .ch-sceau-galette{ z-index:1 }
.ch-sceau .ch-empreinte{ z-index:2 }

/* La chauffe : --v3-chaleur va de 0 a 1 pendant l'appui. La cire gonfle,
   s'eclaircit, et l'empreinte fond (elle reapparait a la pression). */
.ch-sceau.v3-chauffe .ch-sceau-galette{
  transform:scale(calc(1 + .05 * var(--v3-chaleur, 0)));
  filter:brightness(calc(1 + .28 * var(--v3-chaleur, 0))) saturate(calc(1 + .25 * var(--v3-chaleur, 0)));
}
.ch-sceau.v3-chauffe .ch-empreinte{ opacity:calc(1 - .85 * var(--v3-chaleur, 0)) }
.ch-sceau.v3-chauffe{
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.55))
         drop-shadow(0 0 calc(10px * var(--v3-chaleur, 0)) rgba(255,150,70,.55));
  cursor:grabbing;
}
/* La pression : un coup sourd, la cire s'ecrase puis revient. */
.ch-sceau.v3-presse{ animation:v3-presse .42s cubic-bezier(.3,.7,.4,1) }
@keyframes v3-presse{
  0%  { transform-origin:50% 50%; scale:1.07 }
  35% { scale:.95 }
  70% { scale:1.015 }
  100%{ scale:1 }
}

/* Le bloc dans l'inspecteur */
.v3-couler{ display:grid; gap:6px; margin-top:10px }
.v3-couler-bouton{
  font:600 .82rem Fredoka, sans-serif; padding:9px 12px; border-radius:6px; cursor:pointer;
  color:#f3e5c2; background:linear-gradient(180deg,#8b2500,#5a1700);
  border:1px solid rgba(255,210,150,.25); touch-action:none; user-select:none;
}
.v3-couler-bouton:active{ filter:brightness(1.15) }
.v3-couler-aide{ margin:0; font-size:.72rem; line-height:1.35; opacity:.75 }
.v3-couler-origine{
  justify-self:start; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.74rem; color:inherit; opacity:.8; text-decoration:underline;
}

/* ── Le deballage a l'ouverture (deballage.js) ─────────────────────────── */
.v3-deb{
  position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  opacity:0; transition:opacity .35s ease; font-family:Fredoka, system-ui, sans-serif;
  color:#f5ead0; padding:16px; overflow-y:auto;
}
.v3-deb--la{ opacity:1 }
.v3-deb-voile{ position:fixed; inset:0; background:rgba(18,5,3,.78); backdrop-filter:blur(3px) }
.v3-deb-scene{
  position:relative; width:min(560px, 100%); display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:6px; min-width:0;
}
.v3-deb-titre{ margin:0; font:400 1.7rem/1.15 MedievalSharp, cursive; color:#e2c25c;
  text-shadow:0 2px 0 rgba(0,0,0,.4) }
.v3-deb-sous{ margin:0 0 6px; font-size:.92rem; opacity:.85; max-width:42ch }
.v3-deb-aide{ margin:8px 0 0; min-height:1.3em; font-size:.85rem; opacity:.75 }
.v3-deb-actions{ display:flex; gap:10px; justify-content:center; margin-top:6px }
.v3-deb-actions button, .v3-deb-case button{
  font:600 .85rem Fredoka, sans-serif; color:#f5ead0; cursor:pointer;
  background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.45);
  border-radius:6px; padding:8px 16px;
}
.v3-deb-actions button:hover, .v3-deb-case button:hover{ background:rgba(201,168,76,.25) }
.v3-deb-plus-tard{ opacity:.8 }

/* Le pli : un dos, une poche devant, un rabat qui se souleve, un sceau. La
   piece sort ENTRE le dos et la poche, donc elle monte de l'interieur. */
.v3-deb-pli{
  --l:min(300px, 78vw); position:relative; width:var(--l); height:calc(var(--l) * .64);
  margin-top:calc(var(--l) * .95); perspective:900px;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));
}
.v3-deb-dos, .v3-deb-devant, .v3-deb-rabat{
  position:absolute; inset:0; border-radius:4px;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(139,115,85,.14), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(107,66,38,.16), transparent 50%),
    linear-gradient(160deg,#f7eed6,#ead9b6 55%,#dfcaa2);
}
/* Le grain comme sur la carte : un calque a part, a 30 %. En `background` melange
   en multiply avec le reste, il noircissait tout le pli. */
.v3-deb-dos::after, .v3-deb-devant::after, .v3-deb-rabat::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../carte/grain.webp') center/220px; opacity:.3; mix-blend-mode:multiply;
}
.v3-deb-dos{ z-index:1; filter:brightness(.86) }
.v3-deb-sortie{ position:absolute; z-index:2; left:0; right:0; top:4%; height:0 }
.v3-deb-devant{
  z-index:3; clip-path:polygon(0 100%, 0 28%, 50% 66%, 100% 28%, 100% 100%);
  box-shadow:inset 0 -6px 14px rgba(107,66,38,.18);
}
.v3-deb-rabat{
  z-index:4; height:66%; border-radius:4px 4px 0 0; transform-origin:50% 0;
  clip-path:polygon(0 0, 100% 0, 50% 100%); filter:brightness(.95);
  transition:transform .7s cubic-bezier(.5,0,.3,1), z-index 0s .35s;
}
.v3-deb--ouvert .v3-deb-rabat{ transform:rotateX(178deg); z-index:0; filter:brightness(.78) }

.v3-deb-sceau{
  position:absolute; z-index:5; left:50%; top:66%; width:64px; height:64px;
  transform:translate(-50%,-50%); border:0; padding:0; background:none; cursor:pointer;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));
  transition:transform .2s ease;
}
.v3-deb-sceau:hover{ transform:translate(-50%,-50%) scale(1.06) }
.v3-deb-sceau:focus-visible{ outline:2px solid #e2c25c; outline-offset:4px; border-radius:50% }
.v3-deb-cire, .v3-deb-emp{ position:absolute; inset:0 }
.v3-deb-cire{
  clip-path:polygon(50% 0%,64% 3%,74% 9%,86% 12%,92% 22%,97% 33%,100% 48%,96% 62%,97% 74%,
    87% 82%,79% 91%,66% 96%,52% 100%,38% 97%,25% 93%,15% 85%,7% 75%,2% 62%,0% 48%,3% 34%,
    9% 22%,18% 12%,30% 6%,38% 2%);
  background:
    radial-gradient(circle at 33% 26%, rgba(255,255,255,.38), transparent 42%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.5), transparent 55%),
    radial-gradient(circle at 50% 50%, #a83a12 0%, #8b2500 62%, #4d1300 100%);
  box-shadow:inset 0 -4px 9px rgba(0,0,0,.45);
}
/* Le masque est pose EN LIGNE par le script (url resolue contre la page) :
   passee par une variable, une url() relative se resout contre CETTE feuille. */
.v3-deb-emp{
  inset:14px; background:#4d1300; opacity:.85;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* Le sceau brise : il se fend et tombe. */
.v3-deb--brise .v3-deb-sceau{ pointer-events:none; animation:v3-deb-bris .7s cubic-bezier(.5,0,.8,.6) forwards }
@keyframes v3-deb-bris{
  0%  { transform:translate(-50%,-50%) scale(1.08) }
  20% { transform:translate(-50%,-50%) scale(.94) rotate(-4deg) }
  100%{ transform:translate(-50%,40%) rotate(-28deg) scale(.8); opacity:0 }
}

/* Une piece qui sort du pli */
.v3-deb-piece{
  position:absolute; left:50%; bottom:0; margin:0; width:min(210px, 60vw);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transform:translate(-50%, 95%) scale(.45); opacity:0;
  animation:v3-deb-sort .75s cubic-bezier(.2,.9,.3,1.15) forwards;
}
@keyframes v3-deb-sort{
  60% { opacity:1 }
  100%{ transform:translate(-50%, -18px) scale(1); opacity:1 }
}
.v3-deb-piece--partie{ animation:v3-deb-part .5s ease forwards }
@keyframes v3-deb-part{
  from{ transform:translate(-50%, -18px) scale(1); opacity:1 }
  to  { transform:translate(-50%, -60px) scale(.85); opacity:0 }
}
.v3-deb-image{ position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center }
.v3-deb-image img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)) }
.v3-deb-piece figcaption{
  display:flex; flex-direction:column; gap:2px; padding:8px 14px; border-radius:6px;
  background:rgba(22,6,3,.82); border:1px solid rgba(201,168,76,.35); min-width:0; max-width:100%;
}
.v3-deb-piece figcaption b{ font:400 1.05rem MedievalSharp, cursive; color:#f5ead0 }
.v3-deb-piece figcaption i{ font-style:normal; font-size:.78rem; opacity:.75 }
.v3-deb-mention{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#e2c25c }
/* La brillante : un eclat qui passe une fois, puis un halo dore. */
.v3-deb-piece--brillante .v3-deb-image::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,245,210,.75) 50%, transparent 65%);
  background-size:250% 100%; background-position:120% 0; mix-blend-mode:screen;
  animation:v3-deb-eclat 1.3s ease .6s forwards;
}
@keyframes v3-deb-eclat{ to{ background-position:-120% 0 } }
.v3-deb-piece--brillante .v3-deb-image img{
  filter:drop-shadow(0 0 14px rgba(226,194,92,.55)) drop-shadow(0 8px 10px rgba(0,0,0,.45));
}

/* Le recapitulatif */
.v3-deb--recap .v3-deb-pli, .v3-deb--recap .v3-deb-aide{ display:none }
.v3-deb-grille{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px;
  width:100%; max-height:min(52vh, 460px); overflow-y:auto; padding:6px; margin-top:6px;
}
.v3-deb-case{
  min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px;
  background:rgba(22,6,3,.7); border:1px solid rgba(201,168,76,.25); border-radius:8px;
  animation:v3-deb-case .4s ease both;
}
.v3-deb-case--brillante{ border-color:rgba(226,194,92,.7); box-shadow:0 0 12px rgba(226,194,92,.25) }
@keyframes v3-deb-case{ from{ opacity:0; transform:translateY(8px) } }
.v3-deb-case img{ width:64px; height:64px; object-fit:contain }
.v3-deb-case span{ font-size:.74rem; line-height:1.2; overflow-wrap:anywhere }
.v3-deb-case button{ padding:5px 12px; font-size:.75rem }
.v3-deb-case button:disabled{ opacity:.5; cursor:default }

@media (prefers-reduced-motion: reduce){
  .v3-deb-piece, .v3-deb-piece--partie, .v3-deb--brise .v3-deb-sceau{ animation-duration:.01s }
  .v3-deb-rabat{ transition-duration:.01s }
}

/* ── Le blasonnement (blason.js) ───────────────────────────────────────── */
/* Le module herite de l'encre de la face, comme les autres : il s'eclaircit
   tout seul sur un champ sombre. */
.v3-blason{ display:flex; flex-direction:column; gap:.3em; text-align:center; padding:.2em .4em }
.v3-blason-tag{
  font:400 .95em/1.1 MedievalSharp, cursive; letter-spacing:.04em;
  color:var(--txt-mod, currentColor);
}
.v3-blason-texte{
  margin:0; font:italic 400 .78em/1.35 Fredoka, system-ui, sans-serif;
  color:var(--txt-mod, currentColor); text-wrap:pretty;
}
.v3-blason-outils{ display:grid; gap:6px; margin-top:10px }
.v3-blason-outils button{
  font:600 .8rem Fredoka, sans-serif; padding:8px 12px; border-radius:6px; cursor:pointer;
  color:#f3e5c2; background:rgba(201,168,76,.14); border:1px solid rgba(201,168,76,.45);
}
.v3-blason-outils p{ margin:0; font-size:.72rem; line-height:1.35; opacity:.75 }

/* ── Les modes de pose et la lumiere unique (poses.js) ─────────────────── */
/* L'autocollant : une ombre fine, du cote oppose a la bougie. */
.sc-piece[data-pose="autocollant"]:not(.sc-piece--holo){
  filter:drop-shadow(var(--v3-ox, 1px) var(--v3-oy, 1.5px) 1.2px rgba(40,20,5,.3));
}
/* L'encre : la piece boit le papier. */
.sc-piece[data-pose="encre"]{
  mix-blend-mode:multiply; filter:saturate(.82) contrast(1.06);
}
/* Repoussee et doree : l'image d'origine laisse la place a ses calques. */
.sc-piece[data-pose="repousse"], .sc-piece[data-pose="dore"]{ background-image:none !important }
.v3-pose{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:var(--v3-img); mask-image:var(--v3-img);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
/* Le relief : l'ombre du cote oppose a la bougie, la lumiere de son cote, et
   un corps a peine plus fonce que le papier, qui laisse passer le grain. */
.v3-pose--ombre{
  background:rgba(60,35,15,.55);
  transform:translate(calc(var(--v3-ox, 1px) * .8), calc(var(--v3-oy, 1.5px) * .8));
  filter:blur(.5px);
}
.v3-pose--lumiere{
  background:rgba(255,250,235,.8);
  transform:translate(calc(var(--v3-ox, 1px) * -.6), calc(var(--v3-oy, 1.5px) * -.6));
  filter:blur(.4px);
}
.v3-pose--corps{ background:rgba(140,105,60,.16); mix-blend-mode:multiply }
/* La dorure : le dessin en gris clair, l'or en multiply par-dessus (les traits
   restent lisibles en or sombre), et un eclat du cote de la bougie. */
.v3-pose--dessin{
  -webkit-mask-image:none; mask-image:none;
  background:var(--v3-img) center/contain no-repeat;
  filter:grayscale(1) brightness(1.3) contrast(1.15);
}
.v3-pose--or{
  background:linear-gradient(var(--v3-la, 135deg),
    #f6e7a1 0%, #d9b452 28%, #b8912c 52%, #8a6a1f 74%, #c9a84c 100%);
  mix-blend-mode:multiply;
}
.v3-pose--eclat{
  background:linear-gradient(var(--v3-la, 135deg),
    rgba(255,248,220,.75) 0%, rgba(255,248,220,0) 38%);
  mix-blend-mode:screen;
}
.sc-piece[data-pose="dore"]{
  filter:drop-shadow(var(--v3-ox, 1px) var(--v3-oy, 1.5px) .8px rgba(60,40,5,.35));
}

/* Le choix dans l'inspecteur */
.v3-poses{ flex-direction:column; align-items:stretch; gap:6px }
.v3-poses-titre{ font-size:.78rem; opacity:.85 }
.v3-poses-choix{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px }
.v3-poses-choix button{
  min-width:0; padding:6px 2px; border-radius:5px; cursor:pointer;
  font:500 .7rem Fredoka, sans-serif; color:inherit;
  background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v3-poses-choix button[aria-checked="true"]{ background:rgba(201,168,76,.32); border-color:#c9a84c; font-weight:600 }

/* ── La dorure qu'on frotte (dorure.js) ────────────────────────────────── */
/* Dorure partielle : l'image d'origine reste, l'or ne couvre que ce qui a ete
   frotte (--v3-feuille, un masque de la taille de la piece). */
.sc-piece[data-pose="dore"][data-feuille]{ background-image:var(--v3-img) !important }
.sc-piece[data-feuille] .v3-pose--or, .sc-piece[data-feuille] .v3-pose--eclat{
  -webkit-mask-image:var(--v3-img), var(--v3-feuille); mask-image:var(--v3-img), var(--v3-feuille);
  -webkit-mask-size:contain, 100% 100%; mask-size:contain, 100% 100%;
  -webkit-mask-position:center, 0 0; mask-position:center, 0 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.sc-piece[data-feuille] .v3-pose--dessin{
  -webkit-mask-image:var(--v3-feuille); mask-image:var(--v3-feuille);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
body.v3-dorer .sc-piece[aria-selected="true"]{ cursor:crosshair }
body.v3-dorer .sc-piece[aria-selected="true"] .sc-poignee{ display:none }
.v3-dorer-zone{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px }
.v3-dorer-zone button{
  flex:1 1 auto; padding:7px 10px; border-radius:6px; cursor:pointer;
  font:600 .76rem Fredoka, sans-serif; color:#2c1810;
  background:linear-gradient(180deg,#f0d77e,#c9a84c); border:1px solid #8a6a1f;
}
.v3-dorer-zone button[aria-pressed="true"]{ background:linear-gradient(180deg,#e2c25c,#a8862c); color:#160401 }
.v3-dorer-zone .v3-dorer-tout{ background:rgba(201,168,76,.12); color:inherit; border-color:rgba(201,168,76,.45) }
/* Les paillettes qui s'envolent sous le doigt */
.v3-paillette{
  position:fixed; z-index:500; width:4px; height:3px; pointer-events:none;
  background:linear-gradient(135deg,#fff3b8,#d9b452 60%,#8a6a1f);
  transform:translate(-50%,-50%) rotate(var(--r));
  animation:v3-paillette .75s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes v3-paillette{
  to{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 22px)) rotate(calc(var(--r) + 220deg)); opacity:0 }
}
@media (prefers-reduced-motion: reduce){ .v3-paillette{ display:none } }

/* ── L'edition (edition.js) ────────────────────────────────────────────── */
.v3-guide{ position:absolute; z-index:40; pointer-events:none; background:rgba(226,194,92,.95);
  box-shadow:0 0 0 .5px rgba(22,6,3,.5) }
.v3-guide--v{ top:0; bottom:0; width:1px; transform:translateX(-.5px) }
.v3-guide--h{ left:0; right:0; height:1px; transform:translateY(-.5px) }
.v3-edition{ display:grid; gap:10px; margin-top:10px }
.v3-edition-groupe{ display:grid; gap:6px }
.v3-edition-titre{ font-size:.78rem; opacity:.85 }
.v3-edition-boutons{ display:flex; flex-wrap:wrap; gap:4px }
.v3-edition-boutons button, .v3-semer-choix button{
  display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border-radius:5px;
  cursor:pointer; color:inherit; background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.3);
  font:500 .74rem Fredoka, sans-serif;
}
.v3-edition-boutons button:hover, .v3-semer-choix button:hover{ background:rgba(201,168,76,.22) }
.v3-edition-boutons button:disabled{ opacity:.35; cursor:default }
.v3-edition-boutons--texte button{ flex:1 1 auto }
.v3-semer-choix{ display:flex; gap:4px }
.v3-semer-choix button{ flex:1 1 0 }

/* ── Les partitions d'ecu (partitions.js) ──────────────────────────────── */
.v3-partition{ position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:multiply;
  border-radius:inherit }
.v3-partition i{ position:absolute; inset:0 }
.v3-part{ flex-direction:column; align-items:stretch; gap:6px }
.v3-part-titre{ font-size:.78rem; opacity:.85 }
.v3-part-sous{ font-size:.72rem; opacity:.75 }
.v3-part-formes{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:4px }
.v3-part-formes button{
  display:grid; place-items:center; min-width:0; height:34px; padding:0; border-radius:5px; cursor:pointer;
  color:inherit; background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.25);
}
.v3-part-formes .v3-part-aucune{ font:500 .66rem Fredoka, sans-serif }
.v3-part-formes button[aria-pressed="true"]{ background:rgba(201,168,76,.3); border-color:#c9a84c }
.v3-part-emaux{ display:flex; gap:5px; flex-wrap:wrap }
.v3-part-emaux button{ width:24px; height:24px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 -2px 3px rgba(0,0,0,.25) }
.v3-part-emaux button[aria-pressed="true"]{ outline:2px solid #e2c25c; outline-offset:2px }
.v3-part-emaux .v3-part-nu{ background:linear-gradient(160deg,#f7eed6,#dfcaa2) }

/* ── Banderole et lettrine (modules-texte.js) ──────────────────────────── */
.v3-texte-mod img{ display:block; width:100%; height:auto; pointer-events:none }
.v3-tm-champ{
  width:100%; min-width:0; padding:6px 8px; border-radius:5px; font:400 .95rem MedievalSharp, cursive;
  color:#2c1810; background:#f5ead0; border:1px solid rgba(201,168,76,.5);
}
.v3-tm-champ--lettre{ width:3.2em; text-align:center; font-size:1.2rem }

/* ── Les filtres du tiroir (tiroir.js) ─────────────────────────────────── */
.v3-filtres{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px }
.v3-filtres button{
  padding:4px 10px; border-radius:999px; cursor:pointer; font:500 .74rem Fredoka, sans-serif;
  color:inherit; background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.35);
}
.v3-filtres button[aria-pressed="true"]{ background:#c9a84c; color:#160401; border-color:#c9a84c; font-weight:600 }

/* ── Calques verrouilles et historique en images (calques-histoire.js) ─── */
.sc-piece[data-verrou]{ pointer-events:none }
.v3-verrou{
  margin-left:auto; display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto;
  padding:0; border-radius:4px; cursor:pointer; color:inherit; opacity:.45;
  background:transparent; border:1px solid transparent;
}
.v3-verrou:hover{ opacity:.9; border-color:rgba(201,168,76,.4) }
.v3-verrou[aria-pressed="true"]{ opacity:1; color:#e2c25c }
.v3-verrou[aria-pressed="false"] .v3-anse{ transform:translate(3px,-2px) rotate(18deg); transform-origin:16px 11px }
.v3-ombre{ position:fixed; left:-10000px; top:0; zoom:1; pointer-events:none; visibility:visible }
.sc-pas .v3-pas-img{ width:34px; height:auto; aspect-ratio:420/588; object-fit:cover; border-radius:3px;
  flex:0 0 auto; margin-right:8px; box-shadow:0 1px 3px rgba(0,0,0,.4) }
.sc-pas:has(.v3-pas-img){ display:flex; align-items:center; text-align:left }

/* ── Le mode photo (photo.js) ──────────────────────────────────────────── */
.v3-photo{
  position:fixed; inset:0; z-index:420; display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:20px; padding:24px; background:rgba(14,4,2,.92); opacity:0; transition:opacity .3s ease;
  font-family:Fredoka, system-ui, sans-serif; color:#f5ead0;
}
.v3-photo--la{ opacity:1 }
.v3-photo-cadre{ display:grid; place-items:center; min-width:0; min-height:0 }
.v3-photo-toile{ max-width:100%; max-height:calc(100vh - 48px); border-radius:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.6) }
.v3-photo-reglages{ display:flex; flex-direction:column; gap:7px; min-width:0; overflow-y:auto }
.v3-photo-titre{ margin:0 0 6px; font:400 1.5rem MedievalSharp, cursive; color:#e2c25c }
.v3-photo-sous{ font-size:.76rem; opacity:.75; margin-top:6px }
.v3-photo-choix{ display:flex; flex-wrap:wrap; gap:5px }
.v3-photo-choix button, .v3-photo-actions button{
  padding:7px 12px; border-radius:6px; cursor:pointer; font:500 .8rem Fredoka, sans-serif; color:inherit;
  background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.35);
}
.v3-photo-choix button[aria-pressed="true"]{ background:#c9a84c; color:#160401; border-color:#c9a84c; font-weight:600 }
.v3-photo-actions{ display:grid; gap:6px; margin-top:14px }
.v3-photo-image{ background:linear-gradient(180deg,#e2c25c,#b8912c) !important; color:#160401 !important; font-weight:600 !important }
.v3-photo-actions button:disabled{ opacity:.5; cursor:wait }
.v3-photo-note{ margin:4px 0 0; min-height:1.2em; font-size:.76rem; opacity:.8 }
@media (max-width: 760px){
  .v3-photo{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,55vh) auto; padding:12px; overflow-y:auto }
  .v3-photo-toile{ max-height:55vh }
}

/* ── Le telephone (mobile.js) ──────────────────────────────────────────── */
@media (pointer: coarse){
  /* Prefixees par la piece : la regle de la page a la meme specificite et
     se charge apres, elle l'emportait. */
  .sc-piece .sc-poignee{ width:24px; height:24px }
  .sc-piece .sc-poignee--taille{ right:-14px; bottom:-14px }
  .sc-piece .sc-poignee--tourne{ top:-34px; margin-left:-12px }
  .v3-poses-choix button, .v3-edition-boutons button, .v3-filtres button{ min-height:38px }
  .v3-part-emaux button{ width:32px; height:32px }
  .v3-part-formes button{ height:42px }
}

/* Sur ecran etroit, le bandeau de la copie locale descend : en haut, il
   masquait le bouton de retour au profil. */
@media (max-width: 1100px){ .v3-bandeau{ top:auto; bottom:76px; right:8px; font-size:9px } }

/* ── La vie discrete et les secrets (vie.js) ──────────────────────────── */
.sc-piece.v3-frais{ animation:v3-frais 2.2s ease-out }
@keyframes v3-frais{
  0%  { filter:brightness(1.22) saturate(1.12) drop-shadow(0 0 6px rgba(255,236,190,.65)) }
  100%{ filter:brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255,236,190,0)) }
}
.v3-secret{
  position:fixed; left:50%; top:22%; z-index:430; transform:translate(-50%, 12px); opacity:0;
  width:min(380px, calc(100vw - 32px)); padding:18px 20px; text-align:center; border-radius:10px;
  background:radial-gradient(circle at 50% 0%, #4a1610, #1c0604 70%); color:#f5ead0;
  border:1px solid rgba(226,194,92,.55); box-shadow:0 18px 40px rgba(0,0,0,.6);
  transition:opacity .35s ease, transform .35s ease; font-family:Fredoka, system-ui, sans-serif;
}
.v3-secret--la{ opacity:1; transform:translate(-50%, 0) }
.v3-secret-oeil{ margin:0; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#e2c25c }
.v3-secret-titre{ margin:6px 0 4px; font:400 1.4rem MedievalSharp, cursive }
.v3-secret-texte{ margin:0 0 12px; font-size:.88rem; line-height:1.45; opacity:.9 }
.v3-secret button{ padding:7px 16px; border-radius:6px; cursor:pointer; font:600 .8rem Fredoka, sans-serif;
  color:#160401; background:linear-gradient(180deg,#e2c25c,#b8912c); border:0 }

/* ── Retours du 2026-10-06 ────────────────────────────────────────────── */
/* L'historique, avec ses vignettes, devenait plus haut que l'ecran : les
   onglets Calques / Historique sortaient par le haut et on ne pouvait plus
   revenir aux calques. La liste defile, les onglets restent. */
#histoire-liste, #couches-liste{ max-height:min(52vh, 440px); overflow-y:auto; overscroll-behavior:contain }
.sc-pas .v3-pas-img{ width:26px }

/* ── L'inspecteur en sections pliables (inspecteur.js, 2026-10-08) ───────── */
.v3-pliable[data-plie] > :not(.v3-pli-tete){ display:none !important }
.v3-pli-masque{ display:none !important }
.v3-pli-tete{
  display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px;
  margin:0; padding:9px 2px; cursor:pointer; color:inherit; background:none; border:0;
  border-top:1px solid rgba(201,168,76,.18); font:600 .8rem Fredoka, sans-serif; text-align:left;
}
.v3-pli-tete svg{ flex:0 0 auto; opacity:.7; transition:transform .18s ease }
.v3-pliable[data-plie] > .v3-pli-tete svg{ transform:rotate(-90deg) }
.v3-pliable:not([data-plie]) > .v3-pli-tete{ color:#e2c25c }
.v3-pli-tete:hover{ color:#e2c25c }
.sc-flottant .v3-pliable{ flex-direction:column; align-items:stretch; gap:6px }
/* La section ouverte deplie ses grilles en entier : un seul defilement, celui
   du panneau, au lieu d'une grille qui defile dans un panneau qui defile. */
.v3-pliable:not([data-plie]) .sc-planche--haute{ max-height:none; overflow:visible }
/* Dans une section en colonne, un curseur ne doit pas s'etirer en hauteur :
   c'etait le grand vide sous « Intensite ». */
.sc-flottant .v3-pliable input[type=range], .sc-flottant .v3-part input[type=range]{ flex:0 0 auto }

/* `.sc-reglage label{flex:0 0 96px}` est faite pour une LIGNE : dans une section
   en colonne, ces 96 px devenaient une hauteur (le vide sous « Intensite »). */
.sc-flottant .v3-pliable > label, .sc-flottant .v3-part label, .sc-flottant .v3-pliable > span{ flex:0 0 auto }
.v3-part-formes .v3-part-aucune{ font-size:.58rem; letter-spacing:-.01em }

/* ── Le cadre du portrait (portrait.js, 2026-10-08) ───────────────────────── */
/* Avatar de 94 px, ouverture mesuree de l'anneau : 75 % de sa largeur. A
   120 px, l'anneau recouvre juste le bord de l'avatar. */
.ch-medaillon .v3-portrait-cadre{
  position:absolute; left:50%; top:50%; width:120px; height:120px; max-width:none;
  transform:translate(-50%,-50%); border:0; border-radius:0; background:none;
  object-fit:contain; pointer-events:none; z-index:2;
  filter:drop-shadow(0 2px 3px rgba(40,20,5,.35));
}
.ch-medaillon[data-v3-cadre] > svg{ display:none }
.ch-medaillon[data-v3-cadre] > img:not(.v3-portrait-cadre){ border-color:transparent }
.ch-medaillon .ch-niveau, .ch-medaillon .ch-distinctions{ z-index:3 }
.v3-portrait-choix{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px }
.v3-portrait-choix button{
  display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:6px 4px;
  border-radius:6px; cursor:pointer; color:inherit; background:rgba(201,168,76,.06);
  border:1px solid rgba(201,168,76,.28); font:500 .66rem Fredoka, sans-serif; line-height:1.15;
}
.v3-portrait-choix button[aria-pressed="true"]{ background:rgba(201,168,76,.28); border-color:#c9a84c }
.v3-portrait-choix img, .v3-portrait-origine{ width:40px; height:40px; object-fit:contain }
.v3-portrait-origine{ display:block; border-radius:50%; border:3px solid #c9a84c; box-sizing:border-box;
  box-shadow:inset 0 0 0 3px rgba(44,24,16,.25) }

/* La case « parchemin nu » de la partition (2026-10-08) */
.v3-part-case{ display:flex !important; align-items:center; gap:7px; font-size:.74rem; cursor:pointer }
.sc-flottant .v3-part .sc-choix-couleur{ flex:0 0 auto }

/* ── Retours du 2026-10-12 ──────────────────────────────────────────────── */
/* Les ascenseurs de l'etabli et de la page, aux couleurs d'Entrecarte : les
   barres grises du systeme juraient sous la carte. */
html, .sc-etabli, .sc-scene{
  scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.45) rgba(22,6,3,.55);
}
.sc-etabli::-webkit-scrollbar, html::-webkit-scrollbar{ width:10px; height:10px }
.sc-etabli::-webkit-scrollbar-track, html::-webkit-scrollbar-track{ background:rgba(22,6,3,.55) }
.sc-etabli::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb{
  background:rgba(201,168,76,.45); border-radius:99px; border:2px solid rgba(22,6,3,.55) }
.sc-etabli::-webkit-scrollbar-corner, html::-webkit-scrollbar-corner{ background:rgba(22,6,3,.55) }
/* Un nom coupe a la main (`<br>`) ne doit plus etre rogne a deux lignes. */
.sc-piece--module .ch-butin-nom{ -webkit-line-clamp:3 }

/* ── Les couleurs de l'en-tete (entete.js) ─────────────────────────────── */
/* Par-dessus l'encre : les encres qui peignent leur degrade posent
   `-webkit-text-fill-color: transparent`, seule une regle croisee les rattrape. */
.ch-face[data-v3-nom] .ch-nom, .ch-face[data-v3-nom] .ch-nom b{
  color:var(--v3-nom) !important; -webkit-text-fill-color:var(--v3-nom) !important;
  background-image:none !important;
}
.ch-face[data-v3-entete] .ch-compagnie, .ch-face[data-v3-entete] .ch-devise{ color:var(--v3-entete) !important }
.v3-entete-encre{ justify-self:start; align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.74rem; color:inherit; opacity:.8; text-decoration:underline }

/* ── Les reglages fins des modules (modules-options.js, 2026-10-12) ─────── */
/* La taille de chaque texte : la taille d'origine multipliee par le curseur. */
.sc-piece--module .ch-lieu-legende-tag{ font-size:calc(.55em * var(--v3-t-tag, 1)) }
.sc-piece--module .ch-lieu-legende-nom{ font-size:calc(.95em * var(--v3-t-nom, 1)) }
.sc-piece--module .ch-butin-tag{ font-size:calc(.52em * var(--v3-t-tag, 1)) }
.sc-piece--module .ch-butin-nom{ font-size:calc(.78em * var(--v3-t-nom, 1)) }
.sc-piece--module .ch-butin-rarete{ font-size:calc(.62em * var(--v3-t-rarete, 1)) }
.sc-piece--module .ch-lien-tag{ font-size:calc(.52em * var(--v3-t-tag, 1)) }
.sc-piece--module .ch-lien-nom{ font-size:calc(.78em * var(--v3-t-nom, 1)) }

/* Le repaire carre : plus de cadre rond, la carte du lieu remplit la scene. */
body .sc-piece[data-v3-forme="carre"] .ch-lieu--repaire .ch-lieu-orne{ display:none !important }
body .sc-piece[data-v3-forme="carre"] .ch-lieu--repaire .ch-lieu-vue{
  inset:0; border-radius:8%; border:2px solid rgba(201,168,76,.9);
}
/* Le repaire rond, cadre fin (l'entrelacs du butin prefere) ou sans cadre. */
body .sc-piece[data-v3-forme="rond"] .ch-lieu--repaire .ch-lieu-orne--fin{ display:block }
body .sc-piece[data-v3-cadre="aucun"] .ch-lieu--repaire .ch-lieu-orne{ display:none !important }
body .sc-piece[data-v3-cadre="aucun"] .ch-lieu--repaire .ch-lieu-vue{
  inset:4%; border-radius:50%; border:2px solid rgba(201,168,76,.9);
}
/* La banniere brillante : une enveloppe porte les paillettes. */
.v3-fanion-holo{ position:absolute; display:block }
.v3-fanion-holo img{ display:block; height:100%; width:auto }

/* Dans l'inspecteur */
.v3-tailles{ display:grid; gap:4px; margin-top:8px }
.v3-taille{ display:grid !important; grid-template-columns:minmax(0, 1fr) 46px; gap:2px 8px; align-items:center;
  font-size:.72rem; flex:0 0 auto !important }
.v3-taille span{ grid-column:1 / -1; opacity:.8 }
.v3-taille input{ width:100%; min-width:0 }
.v3-taille output{ text-align:right; font-size:.7rem; opacity:.8 }
.v3-choix{ display:flex; gap:4px; flex-wrap:wrap }
.v3-choix button, .v3-fanion-brillante{
  flex:1 1 auto; padding:6px 8px; border-radius:5px; cursor:pointer; color:inherit;
  background:rgba(201,168,76,.08); border:1px solid rgba(201,168,76,.3); font:500 .72rem Fredoka, sans-serif;
}
.v3-choix button[aria-pressed="true"], .v3-fanion-brillante[aria-pressed="true"]{ background:rgba(201,168,76,.3); border-color:#c9a84c }
.v3-fanions{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px }
.v3-fanions button{ display:grid; place-items:center; height:46px; min-width:0; padding:3px; border-radius:5px; cursor:pointer;
  color:inherit; background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.25); font:500 .66rem Fredoka, sans-serif }
.v3-fanions button img{ max-width:100%; max-height:100%; object-fit:contain }
.v3-fanions button[aria-pressed="true"]{ background:rgba(201,168,76,.3); border-color:#c9a84c }

/* ── La redimension en deux axes (redim.js, 2026-10-12) ─────────────────── */
.sc-piece .v3-poignee-l, .sc-piece .v3-poignee-h{ border-radius:3px; background:var(--glow) }
.sc-piece .v3-poignee-l{ width:9px; height:20px; right:-7px; top:50%; margin-top:-10px; cursor:ew-resize }
.sc-piece .v3-poignee-h{ width:20px; height:9px; bottom:-7px; left:50%; margin-left:-10px; cursor:ns-resize }
@media (pointer: coarse){
  .sc-piece .v3-poignee-l{ width:14px; height:30px; margin-top:-15px; right:-10px }
  .sc-piece .v3-poignee-h{ width:30px; height:14px; margin-left:-15px; bottom:-10px }
}
/* Un sticker etire remplit sa boite, matieres et paillettes comprises. */
.sc-piece[data-etire]{ background-size:100% 100% !important }
.sc-piece[data-etire] .v3-pose{ -webkit-mask-size:100% 100%; mask-size:100% 100% }
.sc-piece[data-etire] .v3-pose--dessin{ background-size:100% 100% }
.sc-piece[data-etire].sc-piece--holo::before{ -webkit-mask-size:100% 100%, 30px 30px; mask-size:100% 100%, 30px 30px }
.sc-piece[data-etire].sc-piece--holo::after{ -webkit-mask-size:100% 100%; mask-size:100% 100% }

/* ── Le registre des exploits en module (registre.js, 2026-10-12) ───────── */
/* Le bloc ecrit en dur dans le modele s'efface : le module le remplace. */
.ch-face--verso .ch-inner > .ch-verso-titre,
.ch-face--verso .ch-inner > .ch-trait,
.ch-face--verso .ch-inner > .ch-grille{ display:none !important }
.v3-registre{ color:var(--txt-mod, inherit) }
.v3-registre-titre{
  font-family:'MedievalSharp', serif; font-size:calc(.8em * var(--v3-t-tag, 1));
  letter-spacing:.22em; text-transform:uppercase; opacity:.7; text-align:center;
}
/* Un filet plein et non des pointilles : regle de la DA. */
.v3-registre-trait{ display:flex; align-items:center; gap:.6em; margin:.45em 0 .2em; opacity:.55; font-size:.6em }
.v3-registre-trait::before, .v3-registre-trait::after{ content:''; flex:1; height:1px; background:currentColor }
.v3-registre-grille{ display:grid; grid-template-columns:1fr 1fr; gap:.5em 1.15em; margin-top:.8em }
.v3-registre-grille div{ display:flex; justify-content:space-between; gap:.5em; align-items:baseline;
  border-bottom:1px solid rgba(44,24,16,.22); padding-bottom:.25em; min-width:0 }
.v3-registre-grille span{ font-size:calc(1em * var(--v3-t-nom, 1)); min-width:0 }
.v3-registre-grille b{ font-weight:600; font-size:calc(1em * var(--v3-t-rarete, 1)); white-space:nowrap }
.v3-registre-val{ margin-left:auto; font-style:normal; opacity:.6; font-size:.7rem }

/* ── Le volet de droite se replie (volet.js, 2026-11-04) ────────────────── */
/* Replie, il garde une baguette de 34 px qui porte sa poignee : disparu en
   entier, on ne savait plus ou le rouvrir. Les colonnes reprennent celles de
   l'atelier, seule la derniere change. En format etroit le volet est un
   feuillet : rien de tout ceci ne s'applique. */
.v3-volet{ display:none }
@media (min-width: 1101px){
  .v3-volet{
    display:flex; width:fit-content; align-items:center; gap:6px; margin:0 0 10px auto; padding:4px 9px 4px 7px;
    border-radius:4px; cursor:pointer; font:inherit; font-size:.74rem; letter-spacing:.04em;
    color:#a99a8c; background:rgba(0,0,0,.24); border:1px solid rgba(201,168,76,.22);
    transition:background .2s, color .2s;
  }
  .v3-volet:hover{ background:rgba(201,168,76,.16); color:var(--parchment) }
  .v3-volet svg{ display:block; flex:none }
  .sc-app .sc-plan.replie{ grid-template-columns:132px 0 1fr 34px }
  .sc-app .sc-plan.replie.tiroir{ grid-template-columns:132px 288px 1fr 34px }
  .sc-app .sc-plan.replie .sc-panneau{ display:block; padding:10px 0; overflow:hidden }
  .sc-app .sc-plan.replie .sc-panneau > :not(.v3-volet){ display:none }
  /* Repliee, la baguette est doree : c'est le repere qui dit « le volet est
     la, range ». Elle doit se voir sans avoir a la chercher. */
  .sc-plan.replie .v3-volet{
    flex-direction:column; gap:10px; margin:0 auto; padding:9px 0; width:26px;
    color:var(--parchment); background:rgba(201,168,76,.14); border-color:rgba(201,168,76,.5);
  }
  .sc-plan.replie .v3-volet:hover{ background:rgba(201,168,76,.26) }
  /* L'eclat, quand le tiroir vient de ranger le volet : deux battements, puis
     plus rien. */
  .v3-volet--signal{ animation:v3-volet-eclat 1.1s ease-out 2 }
  @keyframes v3-volet-eclat{
    0%  { box-shadow:0 0 0 0 rgba(201,168,76,.6); background:rgba(201,168,76,.34) }
    100%{ box-shadow:0 0 0 8px rgba(201,168,76,0) }
  }
  @media (prefers-reduced-motion: reduce){ .v3-volet--signal{ animation:none } }
  .sc-plan.replie .v3-volet svg{ transform:rotate(180deg) }
  .sc-plan.replie .v3-volet-mot{ writing-mode:vertical-rl; transform:rotate(180deg) }
}
@media (min-width: 1101px) and (max-width: 1440px){
  .sc-app .sc-plan.replie{ grid-template-columns:118px 0 1fr 34px }
  .sc-app .sc-plan.replie.tiroir{ grid-template-columns:118px 250px 1fr 34px }
}