/* MATIERE PAR FACE (2026-09-06) : les attributs `data-champ`, `data-cadre`,
   `data-silhouette` et `data-encre` peuvent etre portes par la CARTE, comme
   avant, ou par chaque `.ch-face`, ce qui rend la matiere independante d'un cote
   a l'autre. Les selecteurs sont volontairement NUS pour accepter les deux :
   n'y remettez pas `.ch-carte` devant. */

/* ══════════════════════════════════════════════════════════════════
   CHARTE D'AVENTURIER - prototype v2
   Palette Entrecarte (outils-da/palette-data.json)
   Données réelles : viewers.json du FTP (CyberBoloss)

   Architecture des matériaux reprise de Nanake (card-texture-system) :
   deux calques distincts par matériau, comme dans pokemon-cards-css.
     .ch-shine  = le motif de la matière, suit --px/--py
     .ch-glare  = le reflet spéculaire, suit --px/--py
   Toutes les classes sont préfixées ch-* : le composant tournera dans
   overlay-rpg ET sur le site, deux feuilles de style différentes.
   ══════════════════════════════════════════════════════════════════ */

/* UN ELEMENT MASQUE PAR SON AUTEUR.
   La regle vit ICI et non dans l'atelier, sinon une carte masquant son
   portrait le reafficherait partout ailleurs : sur l'overlay, sur le profil,
   dans l'export. Le generateur n'a qu'a poser la classe.
   `display:none` et non `visibility` : l'export saute deja ce qui n'est pas
   affiche, donc il n'y a rien a lui apprendre. */
.ch-cache{ display:none !important }

@property --px { syntax:'<percentage>'; initial-value:50%; inherits:true }
@property --py { syntax:'<percentage>'; initial-value:50%; inherits:true }
@property --pxn { syntax:'<number>'; initial-value:0.5; inherits:true }
@property --pyn { syntax:'<number>'; initial-value:0.5; inherits:true }

:root{
  --parchment:#f5ead0; --parchment-dk:#e8d9b5;
  --wood:#6b4226; --wood-light:#8b6340; --wood-dark:#4a2c14;
  --gold:#a78a7f; --glow:#c9a84c;
  --cream:#fdf6e3; --ink:#2c1810; --ink-soft:#4a3728;
  --sepia:#8b7355; --wax:#8b2500; --moss:#6b7c5e;
  /* Fredoka comme sur le site : le serif se lisait mal aux petites tailles du
     panneau, et la charte de fontes de l'Entrecarte est MedievalSharp + Fredoka. */
  --font-title:'Cinzel',serif; --font-body:'Fredoka',system-ui,sans-serif;
  --font-accent:'MedievalSharp',cursive;
  --px:50%; --py:50%; --pxn:.5; --pyn:.5;

  /* Palette Entrecarte, copiee de overlay-rpg/overlay/style.css ou elle porte
     deja ce nom. L'atelier doit pouvoir se greffer sur le site sans detonner :
     le violet fabrique pour le prototype n'existait nulle part ailleurs. */
  --ec-fond:#160401;
  --ec-panneau-h:#3f0418; --ec-panneau-b:#370617;
  --ec-nav:#38040e; --ec-ligne:#641220;
  --ec-mauve:#735751; --ec-rose:#a78a7f;
}

*{box-sizing:border-box}
body{
  margin:0; padding:30px 24px 80px;
  background:
    radial-gradient(ellipse 900px 600px at 30% -10%, rgba(63,4,24,.55) 0%, transparent 70%),
    linear-gradient(#1c0509, var(--ec-fond) 60%);
  color:var(--parchment); font-family:var(--font-body); min-height:100vh;
}
h1{font-family:var(--font-title); font-weight:700; letter-spacing:.08em;
   font-size:1.5rem; margin:0 0 4px; color:var(--glow); text-align:center}
.page-sub{text-align:center; color:#8a7968; font-style:italic; margin:0 0 26px; font-size:.95rem}
.stage{display:flex; gap:40px; align-items:flex-start; justify-content:center; flex-wrap:wrap; max-width:1460px; margin:0 auto}

/* ══════════════════ LA CHARTE ══════════════════ */
.ch-scene{ perspective:1600px; flex:0 0 auto }

.ch-carte{
  position:relative; width:420px; height:588px;
  transform-style:preserve-3d; transition:transform .9s cubic-bezier(.4,.05,.2,1), width .4s ease, height .4s ease;
  cursor:pointer;
  /* PAS de filter ici : il forcerait transform-style:flat et casserait
     backface-visibility (le flip montrerait le recto en miroir). */
}
.ch-carte[data-format="paysage"]{ width:588px; height:420px }
.ch-carte.flipped{ transform:rotateY(180deg) }

.ch-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:6px; overflow:hidden; display:flex; flex-direction:column;
  background:var(--parchment); color:var(--ink);
  box-shadow: inset 0 0 0 1px rgba(44,24,16,.35), inset 0 0 60px rgba(107,66,38,.18),
              0 24px 40px rgba(0,0,0,.75);
}
.ch-face--verso{ transform:rotateY(180deg) }

/* ─── calques de matière ─── */
.ch-base,.ch-shine,.ch-glare{position:absolute; inset:0; pointer-events:none}
.ch-base{z-index:1}
.ch-shine{z-index:2; opacity:0}
.ch-glare{z-index:3; opacity:0}
.ch-grain{
  position:absolute; inset:0; pointer-events:none; z-index:6;
  background:url('../carte/grain.webp') center/220px; opacity:.30; mix-blend-mode:multiply;
}

/* ══════════ SLOT 1 - SUPPORT (le matériau) ══════════ */

/* - communs, sans reflet - */
[data-support="parchemin"] .ch-base{
  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);
}
[data-support="velin"] .ch-base{ background:linear-gradient(155deg,#fdf6e6,#f4ead4 60%,#e9dcc2) }
[data-support="chiffon"] .ch-base{
  background:
    repeating-linear-gradient(115deg, rgba(120,110,95,.06) 0 3px, transparent 3px 7px),
    linear-gradient(150deg,#e6e0d2,#d5cdbb 60%,#c4bca8);
}

/* - REVERSE HOLO : le holo léger des cartes non-rares.
     Motif holographique cantonné au fond, le texte reste sur parchemin net. - */
[data-support="reverse"] .ch-base{ background:linear-gradient(160deg,#f7eed6,#ead9b6 55%,#dfcaa2) }
[data-support="reverse"] .ch-shine{
  opacity:.42;
  background-image:
    repeating-linear-gradient(110deg,#c929f1,#0dbde9,#21e985,#eedf10,#f80e35,#c929f1,#0dbde9,#21e985,#eedf10,#f80e35),
    radial-gradient(circle at 50% 50%, #fff 1px, transparent 1.6px);
  background-size:300% 300%, 13px 13px;
  background-position:var(--px) var(--py), 0 0;
  background-blend-mode:overlay;
  mix-blend-mode:color-dodge; filter:saturate(.75) brightness(.9);
}
[data-support="reverse"] .ch-glare{
  opacity:.35;
  background-image:radial-gradient(farthest-corner circle at var(--px) var(--py),
    hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,.15) 32%, hsla(0,0%,0%,.28) 90%);
  mix-blend-mode:overlay;
}

/* - bois gravé - */
[data-support="bois"] .ch-base{
  background:
    repeating-linear-gradient(92deg, rgba(74,44,20,.30) 0 2px, rgba(139,99,64,.10) 2px 9px,
      rgba(74,44,20,.18) 9px 11px, transparent 11px 26px),
    linear-gradient(160deg,#a8794c,#8b6340 50%,#6b4226);
}
[data-support="bois"] .ch-face{ color:#f2e2c4 }

/* - étoffe brodée : fil qui accroche la lumière - */
[data-support="etoffe"] .ch-base{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 4px),
    linear-gradient(150deg,#3f3b52,#2e2a3d 60%,#221f30);
}
[data-support="etoffe"] .ch-glare{
  opacity:.30;
  background:radial-gradient(ellipse 55% 40% at var(--px) var(--py), rgba(210,190,255,.7), transparent 70%);
  mix-blend-mode:screen;
}
[data-support="etoffe"] .ch-face{ color:#e7dcc4 }

/* - ARGENT NIELLÉ : technique "radiant" de Nanake, barres de métal tressées - */
[data-support="argent"] .ch-base{ background:linear-gradient(150deg,#b9bec6,#8d949d 45%,#cdd2d7 60%,#767d86) }
[data-support="argent"] .ch-shine{
  opacity:1;
  background-image:
    repeating-linear-gradient(45deg,
      hsl(0,0%,10%) 0%, hsl(0,0%,20%) 10%, hsl(0,0%,35%) 20%, hsl(0,0%,42.5%) 30%,
      hsl(0,0%,50%) 40%, hsl(0,0%,42.5%) 50%, hsl(0,0%,35%) 60%, hsl(0,0%,20%) 70%,
      hsl(0,0%,10%) 80%, hsl(0,0%,0%) 90%, hsl(0,0%,0%) 100%),
    repeating-linear-gradient(-45deg,
      hsl(0,0%,10%) 0%, hsl(0,0%,20%) 10%, hsl(0,0%,35%) 20%, hsl(0,0%,42.5%) 30%,
      hsl(0,0%,50%) 40%, hsl(0,0%,42.5%) 50%, hsl(0,0%,35%) 60%, hsl(0,0%,20%) 70%,
      hsl(0,0%,10%) 80%, hsl(0,0%,0%) 90%, hsl(0,0%,0%) 100%);
  background-size:210% 210%, 210% 210%;
  background-position:var(--px) var(--py), var(--px) var(--py);
  background-blend-mode:darken; mix-blend-mode:color-dodge;
  filter:brightness(.55) contrast(2) saturate(.3);
}
[data-support="argent"] .ch-glare{
  opacity:.45; background-image:url('../carte/trainerbg.png');
  background-size:40%; background-position:var(--px) var(--py); mix-blend-mode:soft-light;
}
[data-support="argent"] .ch-face{ color:#1a1c20 }

/* - ★ FEUILLE D'OR : technique "secretgold", la dorure d'enluminure - */
[data-support="or"] .ch-base{ background:linear-gradient(150deg,#e2c477,#b8912f 45%,#f0dda2 62%,#8a6416) }
[data-support="or"] .ch-shine{
  opacity:.55;
  background-image:
    url('../carte/glitter.png'),
    conic-gradient(from 0deg,#d8bb74,#f5eecb,#a98a4a,#d8bb74),
    radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(0,0,0,.9) 10%, rgba(255,255,255,.15) 90%);
  background-size:cover, cover, cover;
  background-blend-mode:soft-light, hard-light;
  mix-blend-mode:color-dodge; filter:brightness(.95) contrast(1.05);
}
[data-support="or"] .ch-shine::after{
  content:''; position:absolute; inset:0;
  background:url('../carte/geometric.png') center/cover;
  mix-blend-mode:hard-light; opacity:.18;
}
[data-support="or"] .ch-glare{
  opacity:.6;
  background:radial-gradient(ellipse 32% 55% at var(--px) var(--py),
    rgba(255,252,232,.95), rgba(255,222,150,.3) 45%, transparent 75%);
  mix-blend-mode:soft-light; filter:brightness(1.15) saturate(.65);
}
[data-support="or"] .ch-face{ color:#2b1e05 }

/* - POUSSIÈRE D'ÉTOILES : technique "cosmos", glitter + arc-en-ciel à 82°, color-burn - */
[data-support="poussiere"] .ch-base{ background:linear-gradient(160deg,#241a35,#140f22 60%,#0b0814) }
[data-support="poussiere"] .ch-shine{
  opacity:1;
  background-image:
    url('../carte/glitter.png'),
    repeating-linear-gradient(82deg,#ff0080,#ff8c00,#40e0d0,#7b68ee,#ff0080);
  background-size:cover, 250% 250%;
  background-position:var(--px) var(--py), var(--px) var(--py);
  background-blend-mode:soft-light;
  filter:contrast(1.3) saturate(1.4); mix-blend-mode:color-burn;
}
[data-support="poussiere"] .ch-face{ color:#f3ecdb }

/* - PRISME DE PLUIE : technique "prism", un seul rai chromatique - */
[data-support="prisme"] .ch-base{ background:linear-gradient(160deg,#efe6cf,#ddd0b0 60%,#c9bb99) }
[data-support="prisme"] .ch-shine{
  opacity:1;
  background:linear-gradient(100deg,
    transparent 0%, transparent calc(var(--px) - 16%),
    rgba(255,70,70,.5) calc(var(--px) - 12%),
    rgba(255,170,70,.5) calc(var(--px) - 8%),
    rgba(255,235,70,.5) calc(var(--px) - 4%),
    rgba(255,255,255,.35) var(--px),
    rgba(120,230,150,.5) calc(var(--px) + 4%),
    rgba(70,220,230,.5) calc(var(--px) + 8%),
    rgba(120,140,255,.5) calc(var(--px) + 12%),
    transparent calc(var(--px) + 16%), transparent 100%);
  mix-blend-mode:overlay; filter:blur(1px);
}

/* - GRAVURE D'ATELIER : technique "Trainer Gallery", trame de burin + reflet doux - */
[data-support="gravure"] .ch-base{
  background:
    repeating-linear-gradient(58deg, rgba(44,24,16,.16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-58deg, rgba(44,24,16,.10) 0 1px, transparent 1px 9px),
    linear-gradient(150deg,#e9dcc0,#d6c49f 60%,#bfa87e);
}
[data-support="gravure"] .ch-shine{
  opacity:.55;
  background-image:url('../carte/trainerbg.png'),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  background-size:55%, 200% 200%;
  background-position:var(--px) var(--py), var(--px) var(--py);
  mix-blend-mode:soft-light;
}
[data-support="gravure"] .ch-glare{
  opacity:.4;
  background:radial-gradient(ellipse 45% 40% at var(--px) var(--py), rgba(255,250,225,.8), transparent 70%);
  mix-blend-mode:overlay;
}

/* - AURA DE RELIQUE : technique "Amazing Rare", rayons colorés depuis le centre - */
[data-support="relique"] .ch-base{ background:linear-gradient(160deg,#f2e8d0,#e0d2b0 60%,#cbb98f) }
[data-support="relique"] .ch-shine{
  opacity:.75;
  background-image:
    repeating-conic-gradient(from calc(var(--pxn) * 90deg) at 50% 42%,
      #ff5f6d 0deg 8deg, #ffc371 8deg 16deg, #47e0b0 16deg 24deg,
      #4fa3f7 24deg 32deg, #b06ff5 32deg 40deg);
  mix-blend-mode:color-dodge;
  filter:blur(2px) saturate(1.3) brightness(.8);
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 42%, #000 25%, transparent 78%);
          mask-image:radial-gradient(ellipse 62% 52% at 50% 42%, #000 25%, transparent 78%);
}
[data-support="relique"] .ch-glare{
  opacity:.45;
  background:radial-gradient(farthest-corner circle at var(--px) var(--py),
    hsla(0,0%,100%,.65) 0%, hsla(0,0%,100%,.15) 35%, hsla(0,0%,0%,.25) 90%);
  mix-blend-mode:overlay;
}

/* - VITRAIL - */
[data-support="vitrail"] .ch-base{
  background:
    linear-gradient(115deg, rgba(0,0,0,.55) 0 2px, transparent 2px 60px),
    linear-gradient(-115deg, rgba(0,0,0,.55) 0 2px, transparent 2px 78px),
    linear-gradient(0deg, rgba(0,0,0,.45) 0 2px, transparent 2px 92px),
    conic-gradient(from 200deg at 40% 30%, #7b2d8b,#1e3a5f 25%,#2e8b73 45%,#a4161a 65%,#c9a84c 82%,#7b2d8b);
  filter:saturate(1.3) brightness(.95);
}
[data-support="vitrail"] .ch-glare{
  opacity:.8;
  background:radial-gradient(ellipse 70% 55% at var(--px) var(--py), rgba(255,240,200,.65), transparent 65%);
  mix-blend-mode:screen;
}
[data-support="vitrail"] .ch-face{ color:#fdf6e3 }

/* - PALIMPSESTE - */
[data-support="palimpseste"] .ch-base{
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(90,60,40,.20) 13px 15px),
    linear-gradient(150deg,#efe2c6,#e1d0ac 60%,#d0bc94);
}
[data-support="palimpseste"] .ch-shine{
  opacity:1;
  background:repeating-linear-gradient(-4deg, transparent 0 6px, rgba(120,40,30,.24) 6px 8px, transparent 8px 22px);
  mix-blend-mode:multiply; animation:ch-ghost 7s ease-in-out infinite;
}
@keyframes ch-ghost{0%,100%{opacity:.10}45%{opacity:.60}}

/* - NACRE DE DRAGON : technique "rainbow rare", luminosity + contraste fort - */
[data-support="nacre"] .ch-base{ background:linear-gradient(160deg,#cfd8dd,#9fb0bb 55%,#7d919e) }
[data-support="nacre"] .ch-shine{
  opacity:1;
  --r1:hsl(0,70%,50%); --r2:hsl(40,70%,50%); --r3:hsl(90,70%,50%); --r4:hsl(180,70%,50%);
  --r5:hsl(220,70%,50%); --r6:hsl(280,70%,50%); --r7:hsl(320,70%,50%);
  background-image:
    linear-gradient(-45deg, var(--r1), var(--r5)),
    linear-gradient(-30deg, var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7),
      var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7),
      var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7),var(--r1));
  background-blend-mode:luminosity;
  background-size:200% 200%, 400% 400%;
  background-position:var(--px) var(--py), var(--px) var(--py);
  filter:contrast(1.8) saturate(.9); mix-blend-mode:color-dodge;
}
[data-support="nacre"] .ch-glare{
  opacity:.55; background-image:url('../carte/illusion-mask.png');
  background-size:45%; background-blend-mode:difference; mix-blend-mode:darken;
}
[data-support="nacre"] .ch-face{ color:#14141c }

/* ══════════ SLOT 2 - CHAMP (le fond) ══════════ */
/* z-index 5 : AU-DESSUS du voile (4). Le voile lisse la matiere, il ne doit
   pas manger le champ, qui est un choix cosmetique explicite. */
.ch-champ{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden}
/* Le verso PEUT porter un paysage depuis le 2026-09-06. Il ne le fait que si on
   lui en donne un : sans champ choisi, il reste sur parchemin nu, comme avant.
   L'ancienne regle `display:none` inconditionnelle interdisait le fond au dos. */
.ch-face--verso[data-champ="uni"] .ch-champ,
.ch-face--verso:not([data-champ]) .ch-champ{display:none}
/* Le voile clair du verso sert a lire les statistiques. Il se retire des qu'un
   champ illustre est pose, sinon il delaverait le paysage. */
.ch-face--verso .ch-voile{background:rgba(245,234,208,.30); box-shadow:inset 0 0 0 1px rgba(44,24,16,.14)}
.ch-face--verso[data-champ]:not([data-champ="uni"]) .ch-voile{
  background:rgba(10,12,20,.28); box-shadow:none;
}
.ch-face--verso{color:var(--ink)}
.ch-champ::before,.ch-champ::after{content:''; position:absolute; inset:0}
.ch-stars{position:absolute; inset:0; display:none; width:100%; height:100%}
[data-champ="uni"] .ch-champ{display:none}


/* le lys est bien un lys : lys2.png fourni par l'autrice */
/* Etoiles remontees au-dessus du seuil de perception : des points de 1 px
   dores sur beige clair mesuraient +0,013 d'ecart-type contre une carte
   sans champ du tout. Points plus gros, halo, et deux couches qui ne
   scintillent pas en phase. */
@keyframes ch-twinkle{0%,100%{opacity:.60}50%{opacity:1}}

/* champ de nuit en perspective - repris du starfield2 de Nanake (canvas + rAF) */

@keyframes ch-drift{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}

/* Les deux ciels peints, recadres au format portrait (640x896 WebP, ~50 Ko).
   Les PNG d'origine faisaient 33 Mo en 4632x3712 : ~69 Mo decodes en RAM
   chacun, pour une boite de 420x588. Rediihibitoire en Browser Source OBS.
   Le ::after beige qui montait a .55 est supprime : c'est lui qui lavait
   l'image en aplat lavande. */

/* Fond de nuit indispensable : sans lui les blobs en screen sont inoperants. */
/* quelques etoiles fixes derriere l'aurore, sinon le ciel est un aplat */
.ch-blob{position:absolute; display:none; border-radius:50%; filter:blur(26px); mix-blend-mode:screen}
/* durees premieres entre elles : la boucle globale n'est jamais percue */
@keyframes ch-blob1{
  0%,100%{transform:translate(-6%,0) scale(1)   ; filter:blur(26px) hue-rotate(0deg)}
  50%    {transform:translate(14%,7%) scale(1.25); filter:blur(32px) hue-rotate(38deg)}}
@keyframes ch-blob2{
  0%,100%{transform:translate(8%,4%) scale(1.15); filter:blur(30px) hue-rotate(0deg)}
  50%    {transform:translate(-12%,-6%) scale(.9); filter:blur(24px) hue-rotate(-32deg)}}
@keyframes ch-blob3{
  0%,100%{transform:translate(-10%,3%) scale(.95); filter:blur(28px) hue-rotate(0deg)}
  50%    {transform:translate(10%,-5%) scale(1.3); filter:blur(36px) hue-rotate(45deg)}}
@keyframes ch-blob4{
  0%,100%{transform:translate(6%,-3%) scale(1.1); filter:blur(24px) hue-rotate(0deg)}
  50%    {transform:translate(-8%,6%) scale(.85); filter:blur(30px) hue-rotate(-24deg)}}

/* ══ Champs illustres du pack 2 ══════════════════════════════════
   Recadres en portrait EN AMONT (640x896 WebP, ~100 Ko), pas par un
   background-size:cover qui n'aurait montre que 40% de la largeur.
   Ils couvrent toute la carte : le support ne se voit plus dessous,
   c'est assume, le champ est un choix cosmetique explicite. */
[data-champ="chateau-ciel-nu"] .ch-champ::before{
  background:url('../img/champs/chateau-ciel-nu.webp') center/cover no-repeat;
}
[data-champ="chateau-licorne"] .ch-champ::before{
  background:url('../img/champs/chateau-licorne.webp') center/cover no-repeat;
}
[data-champ="cite-licorne"] .ch-champ::before{
  background:url('../img/champs/cite-licorne.webp') center/cover no-repeat;
}
[data-champ="brume-serpent"] .ch-champ::before{
  background:url('../img/champs/brume-serpent.webp') center/cover no-repeat;
}
[data-champ="lune-de-sang"] .ch-champ::before{
  background:url('../img/champs/lune-de-sang.webp') center/cover no-repeat;
}
[data-champ="lune-de-sang-dragon"] .ch-champ::before{
  background:url('../img/champs/lune-de-sang-dragon.webp') center/cover no-repeat;
}
[data-champ="pic-violet-serpent"] .ch-champ::before{
  background:url('../img/champs/pic-violet-serpent.webp') center/cover no-repeat;
}
[data-champ="pic-violet-licorne"] .ch-champ::before{
  background:url('../img/champs/pic-violet-licorne.webp') center/cover no-repeat;
}
/* Le groupe qui vivait ici etait un sous-ensemble de celui plus bas, et mort
   pour la meme raison. Voir l'explication la-bas. */
[data-champ="chateau-ciel-nu"] .ch-voile,
[data-champ="chateau-licorne"] .ch-voile,
[data-champ="cite-licorne"] .ch-voile,
[data-champ="brume-serpent"] .ch-voile,
[data-champ="lune-de-sang"] .ch-voile,
[data-champ="lune-de-sang-dragon"] .ch-voile,
[data-champ="pic-violet-serpent"] .ch-voile,
[data-champ="pic-violet-licorne"] .ch-voile{
  background:rgba(10,12,20,.50);
  box-shadow:inset 0 0 0 1px rgba(245,234,208,.20), inset 0 0 34px rgba(0,0,0,.32);
}
[data-champ="chateau-ciel-nu"] .ch-cadre i,
[data-champ="chateau-licorne"] .ch-cadre i,
[data-champ="cite-licorne"] .ch-cadre i,
[data-champ="brume-serpent"] .ch-cadre i,
[data-champ="lune-de-sang"] .ch-cadre i,
[data-champ="lune-de-sang-dragon"] .ch-cadre i,
[data-champ="pic-violet-serpent"] .ch-cadre i,
[data-champ="pic-violet-licorne"] .ch-cadre i{ filter:sepia(.4) saturate(.5) brightness(2.4) contrast(.9) }
[data-champ="chateau-ciel-nu"] .ch-succes img,
[data-champ="chateau-licorne"] .ch-succes img,
[data-champ="cite-licorne"] .ch-succes img,
[data-champ="brume-serpent"] .ch-succes img,
[data-champ="lune-de-sang"] .ch-succes img,
[data-champ="lune-de-sang-dragon"] .ch-succes img,
[data-champ="pic-violet-serpent"] .ch-succes img,
[data-champ="pic-violet-licorne"] .ch-succes img{ background:rgba(245,234,208,.82) }
[data-champ="chateau-ciel-nu"][data-encre="commune"] .ch-nom,
[data-champ="chateau-licorne"][data-encre="commune"] .ch-nom,
[data-champ="cite-licorne"][data-encre="commune"] .ch-nom,
[data-champ="brume-serpent"][data-encre="commune"] .ch-nom,
[data-champ="lune-de-sang"][data-encre="commune"] .ch-nom,
[data-champ="lune-de-sang-dragon"][data-encre="commune"] .ch-nom,
[data-champ="pic-violet-serpent"][data-encre="commune"] .ch-nom,
[data-champ="pic-violet-licorne"][data-encre="commune"] .ch-nom{
  background-image:
    repeating-linear-gradient(94deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
    linear-gradient(102deg,#f3ead4,#fffdf6 22%,#dcd0b4 45%,#fbf5e6 70%,#efe4cc);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}

/* ══ Champs illustres du pack 2 ═══════════════════════════════════
   Recadres EN AMONT au format portrait, la fenetre de recadrage etant
   calee sur la position du chateau MESUREE dans chaque illustration.
   Ils couvrent toute la carte, c'est pour ca que le slot Support a
   ete retire : il ne se voyait plus. */
[data-champ="chateau-ciel-nu"] .ch-champ::before{ background:url('../img/champs/chateau-ciel-nu.webp') center/cover no-repeat }
[data-champ="chateau-licorne"] .ch-champ::before{ background:url('../img/champs/chateau-licorne.webp') center/cover no-repeat }
[data-champ="cite-licorne"] .ch-champ::before{ background:url('../img/champs/cite-licorne.webp') center/cover no-repeat }
[data-champ="cite-lune"] .ch-champ::before{ background:url('../img/champs/cite-lune.webp') center/cover no-repeat }
[data-champ="brume-licorne"] .ch-champ::before{ background:url('../img/champs/brume-licorne.webp') center/cover no-repeat }
[data-champ="brume-serpent"] .ch-champ::before{ background:url('../img/champs/brume-serpent.webp') center/cover no-repeat }
[data-champ="lune-de-sang"] .ch-champ::before{ background:url('../img/champs/lune-de-sang.webp') center/cover no-repeat }
[data-champ="lune-de-sang-dragon"] .ch-champ::before{ background:url('../img/champs/lune-de-sang-dragon.webp') center/cover no-repeat }
[data-champ="soleil-ambre"] .ch-champ::before{ background:url('../img/champs/soleil-ambre.webp') center/cover no-repeat }
[data-champ="soleil-ambre-dragon"] .ch-champ::before{ background:url('../img/champs/soleil-ambre-dragon.webp') center/cover no-repeat }
[data-champ="pic-violet-serpent"] .ch-champ::before{ background:url('../img/champs/pic-violet-serpent.webp') center/cover no-repeat }
[data-champ="pic-violet-licorne"] .ch-champ::before{ background:url('../img/champs/pic-violet-licorne.webp') center/cover no-repeat }
/* ══ LE TEXTE CLAIR SUR UN CHAMP SOMBRE (repare le 2026-09-25) ═══════════
   Il y avait ici deux groupes de selecteurs en `[data-champ="X"] .ch-face`,
   listant douze champs. **AUCUN DES DEUX N'A JAMAIS RIEN FAIT.** `data-champ`
   est pose SUR LA FACE (`f.dataset.champ`), or un descendant ne peut pas etre
   son propre ancetre : `[data-champ] .ch-face` cherchait une face DANS une
   face. L'intention etait juste, l'ecriture ne pouvait pas marcher, et le
   defaut est passe inapercu parce qu'un texte sans regle reste simplement a
   l'encre par defaut, sans rien casser.

   Symptome cote vieweuses : « ca se lit mal selon le fond choisi ».

   MESURE du 2026-09-25, contraste WCAG au pire des zones de texte reelles, le
   fond etant rendu seul (contenu en `display:none`, seule forme de masquage que
   l'exportateur respecte) :

     champ                  encre brune   creme
     uni                        11,54       1,22   -> sombre
     brume-licorne               2,54       3,90   -> clair
     brume-serpent               2,66       3,42   -> clair
     cite-lune                   3,13       3,42   -> clair
     cite-licorne                2,35       4,18   -> clair
     chateau-ciel-nu             1,71       5,92   -> clair
     chateau-licorne             1,71       5,92   -> clair
     soleil-ambre                1,05       6,99   -> clair
     soleil-ambre-dragon         1,05       7,32   -> clair
     pic-violet-licorne          1,08       7,48   -> clair
     pic-violet-serpent          1,08       7,47   -> clair
     lune-de-sang                1,04      13,61   -> clair
     lune-de-sang-dragon         1,05      13,61   -> clair

   Un contraste de 1,04 veut dire indiscernable. DOUZE CHAMPS SUR TREIZE
   demandent le texte clair, et le seul qui n'en veut pas est le parchemin nu.
   La regle se dit donc mieux a l'envers : tout champ SAUF `uni`.
   Elle couvre aussi les champs neufs, qui sont des images et seront donc
   sombres par construction.

   Specificite 0,3,0 : elle passe devant les regles par support (0,2,0), ce qui
   est correct puisque le champ est peint AU-DESSUS du support. Et une couleur
   choisie a la main dans le Scriptorium s'ecrit en ligne, donc elle passe
   devant celle-ci. */
.ch-face[data-champ]:not([data-champ="uni"]){ color:#f2ead8 }
[data-champ="chateau-ciel-nu"] .ch-voile,
[data-champ="chateau-licorne"] .ch-voile,
[data-champ="cite-licorne"] .ch-voile,
[data-champ="cite-lune"] .ch-voile,
[data-champ="brume-licorne"] .ch-voile,
[data-champ="brume-serpent"] .ch-voile,
[data-champ="lune-de-sang"] .ch-voile,
[data-champ="lune-de-sang-dragon"] .ch-voile,
[data-champ="soleil-ambre"] .ch-voile,
[data-champ="soleil-ambre-dragon"] .ch-voile,
[data-champ="pic-violet-serpent"] .ch-voile,
[data-champ="pic-violet-licorne"] .ch-voile{
  background:rgba(10,12,20,.50);
  box-shadow:inset 0 0 0 1px rgba(245,234,208,.20), inset 0 0 34px rgba(0,0,0,.32);
}
[data-champ="chateau-ciel-nu"] .ch-cadre i,
[data-champ="chateau-licorne"] .ch-cadre i,
[data-champ="cite-licorne"] .ch-cadre i,
[data-champ="cite-lune"] .ch-cadre i,
[data-champ="brume-licorne"] .ch-cadre i,
[data-champ="brume-serpent"] .ch-cadre i,
[data-champ="lune-de-sang"] .ch-cadre i,
[data-champ="lune-de-sang-dragon"] .ch-cadre i,
[data-champ="soleil-ambre"] .ch-cadre i,
[data-champ="soleil-ambre-dragon"] .ch-cadre i,
[data-champ="pic-violet-serpent"] .ch-cadre i,
[data-champ="pic-violet-licorne"] .ch-cadre i{ filter:sepia(.4) saturate(.5) brightness(2.4) contrast(.9) }
[data-champ="chateau-ciel-nu"] .ch-succes img,
[data-champ="chateau-licorne"] .ch-succes img,
[data-champ="cite-licorne"] .ch-succes img,
[data-champ="cite-lune"] .ch-succes img,
[data-champ="brume-licorne"] .ch-succes img,
[data-champ="brume-serpent"] .ch-succes img,
[data-champ="lune-de-sang"] .ch-succes img,
[data-champ="lune-de-sang-dragon"] .ch-succes img,
[data-champ="soleil-ambre"] .ch-succes img,
[data-champ="soleil-ambre-dragon"] .ch-succes img,
[data-champ="pic-violet-serpent"] .ch-succes img,
[data-champ="pic-violet-licorne"] .ch-succes img{ background:rgba(245,234,208,.82) }
[data-champ="chateau-ciel-nu"][data-encre="commune"] .ch-nom,
[data-champ="chateau-licorne"][data-encre="commune"] .ch-nom,
[data-champ="cite-licorne"][data-encre="commune"] .ch-nom,
[data-champ="cite-lune"][data-encre="commune"] .ch-nom,
[data-champ="brume-licorne"][data-encre="commune"] .ch-nom,
[data-champ="brume-serpent"][data-encre="commune"] .ch-nom,
[data-champ="lune-de-sang"][data-encre="commune"] .ch-nom,
[data-champ="lune-de-sang-dragon"][data-encre="commune"] .ch-nom,
[data-champ="soleil-ambre"][data-encre="commune"] .ch-nom,
[data-champ="soleil-ambre-dragon"][data-encre="commune"] .ch-nom,
[data-champ="pic-violet-serpent"][data-encre="commune"] .ch-nom,
[data-champ="pic-violet-licorne"][data-encre="commune"] .ch-nom{
  background-image:
    repeating-linear-gradient(94deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
    linear-gradient(102deg,#f3ead4,#fffdf6 22%,#dcd0b4 45%,#fbf5e6 70%,#efe4cc);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}


/* ══ ONGLETS DU SCRIPTORIUM ════════════════════════════════════════════════
   Les neuf reglages se suivaient en une colonne : il fallait defiler pour tout
   voir, et la carte sortait du champ pendant qu'on reglait. */
.onglets{
  display:flex; gap:2px; margin:0 0 16px; flex-wrap:wrap;
  border-bottom:1px solid var(--ec-ligne);
}
.onglets button{
  font:inherit; font-size:.82rem; padding:8px 15px; cursor:pointer;
  background:transparent; color:#8a7a70; border:0; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.onglets button:hover{ color:var(--ec-rose) }
.onglets button[aria-selected="true"]{ color:var(--glow); border-bottom-color:var(--glow) }
.pane[hidden]{ display:none }

/* ══ ONGLET DONNEES ════════════════════════════════════════════════════════
   Une cartouche est un emplacement de la carte. Elle est vide par defaut : la
   contrainte de place est ce qui force un choix, et un choix est ce qui fait
   ressembler la carte a quelqu'un. */
.cartouches{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px }
.cart-titre{
  grid-column:1/-1; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:#6a5a50; margin:6px 0 1px;
}
.cart{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:4px;
  background:rgba(167,138,127,.05); border:1px solid rgba(167,138,127,.16);
  cursor:pointer; text-align:left; font:inherit; color:inherit; transition:all .15s;
}
.cart:hover{ background:rgba(201,168,76,.10); border-color:rgba(201,168,76,.35) }
.cart[aria-pressed="true"]{ background:rgba(201,168,76,.16); border-color:rgba(201,168,76,.6) }
.cart-num{
  width:20px; height:20px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-size:.62rem; color:#6a5a50; border:1px solid rgba(167,138,127,.28);
}
.cart-txt{ min-width:0; line-height:1.25 }
.cart-txt b{ display:block; font-size:.78rem; font-weight:600; color:#f0e4cd;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cart-txt span{ display:block; font-size:.68rem; color:#7a6a60; font-style:italic;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cart--vide .cart-txt b{ color:#6a5a50; font-weight:400; font-style:italic }
.cart-x{
  margin-left:auto; flex:0 0 auto; font-size:.9rem; line-height:1; color:#6a5a50;
  background:none; border:0; cursor:pointer; padding:2px 4px;
}
.cart-x:hover{ color:#c9a84c }

.modules{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px }
.modules button{
  font:inherit; font-size:.74rem; padding:9px 6px; border-radius:4px; cursor:pointer;
  background:rgba(167,138,127,.05); border:1px solid rgba(167,138,127,.16); color:#c9b89a;
}
.modules button:hover{ background:rgba(201,168,76,.10); border-color:rgba(201,168,76,.35) }
.modules button[aria-pressed="true"]{ background:rgba(201,168,76,.18);
  border-color:rgba(201,168,76,.6); color:#f0e4cd }
.sous-choix{ max-height:290px; overflow-y:auto; display:flex;
  flex-direction:column; gap:4px }
/* Les listes courtes se lisent en colonne. Le butin, lui, en compte 47 : une
   colonne imposerait un defilement interminable pour une information tenant en
   trois mots. Il passe en grille, ou l'icone fait le reperage. */
/* Double classe volontaire : `.choix`, declaree plus bas dans la feuille, pose
   `display:flex` a specificite egale et l'emportait. Monter la specificite vaut
   mieux que deplacer une regle, qui casserait un autre equilibre. */
.sous-choix.sous-choix--grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px }
.sous-choix--grille button{ flex-direction:column; align-items:flex-start; gap:5px;
  padding:8px 9px }
.sous-choix--grille img{ width:30px; height:30px }
.sous-choix--grille .s-nom{ white-space:normal; line-height:1.2; font-size:.76rem }
.sous-choix--grille .s-val{ margin-left:0; font-size:.68rem }

/* Le selecteur de lieu : 27 entrees, dont 9 regions et 18 lieux nommes. Les
   deux familles sont separees par un intertitre, ce ne sont pas les memes
   objets, une region est une etendue et un lieu un point. */
.lieux{ max-height:250px; overflow-y:auto }
.lieux .lieu-grp{
  flex-basis:100%; width:100%; margin:8px 0 2px;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#6a5a50;
}
.lieux .lieu-grp:first-child{ margin-top:2px }
/* Le sous-selecteur ne se lit pas comme une tuile de cosmetique : il porte une
   valeur, et une valeur collee a son libelle ne se lit pas. Icone a gauche,
   nom sur sa ligne, valeur detachee a droite. */
.sous-choix button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 10px; border-radius:4px; font:inherit; font-size:.8rem; cursor:pointer;
  background:rgba(167,138,127,.05); border:1px solid rgba(167,138,127,.16); color:#c9b89a;
}
.sous-choix button:hover{ background:rgba(201,168,76,.10); border-color:rgba(201,168,76,.35) }
.sous-choix button[aria-pressed="true"]{ background:rgba(201,168,76,.18);
  border-color:rgba(201,168,76,.6); color:#f0e4cd }
.sous-choix img{ width:24px; height:24px; object-fit:contain; flex:0 0 auto }
.sous-choix img.rond{ border-radius:50% }
.sous-choix .s-nom{ min-width:0; flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.sous-choix .s-val{ flex:0 0 auto; margin-left:auto; font-size:.74rem;
  color:#8a7a70; font-style:italic; white-space:nowrap }
.sous-choix button[aria-pressed="true"] .s-val{ color:#c9a84c; font-style:normal }

/* ══ LES CARTOUCHES SUR LA CARTE ═══════════════════════════════════════════
   Elles se lisent comme le reste de la fiche : petite capitale pour le
   libelle, valeur en gras. Le picto reste optionnel, toutes les donnees n'en
   ont pas. */
.ch-cartouches{ display:flex; flex-direction:column; gap:7px; margin-top:10px }
.ch-cart{
  display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:4px;
  background:rgba(107,66,38,.10); border:1px solid rgba(107,66,38,.20);
}
.ch-cart img{ width:26px; height:26px; object-fit:contain; flex:0 0 auto }
.ch-cart-txt{ min-width:0; flex:1 }
.ch-cart-txt i{
  display:block; font-size:.52rem; letter-spacing:.05em; text-transform:uppercase;
  opacity:.6; font-style:normal; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ch-cart-txt b{ display:block; font-size:.8rem; font-weight:600; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ch-cart-val{
  margin-left:auto; flex:0 0 auto; font-size:.95rem; font-weight:700;
  font-family:var(--font-title, inherit); letter-spacing:.02em;
}
.ch-cart-sur{ font-size:.64rem; opacity:.6; font-weight:400 }
/* Le classement est le module qui se montre. Sa devise passe en italique
   discret, et le rang prend la droite en gros : c'est la que l'oeil le trouve
   sans avoir a lire la ligne. */
.ch-cart--rang .ch-cart-txt b{ font-size:.7rem; font-weight:400; font-style:italic; opacity:.7 }
.ch-cart--rang .ch-cart-sur{
  font-size:1.3rem; font-weight:700; line-height:1; opacity:1;
  color:#7a3f10; text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.ch-cart--rang .ch-cart-sur sup{ font-size:.5em; vertical-align:super; margin-left:1px }

/* ══ SLOT : SILHOUETTE ═════════════════════════════════════════════════
   Deplacee au VERSO le 2026-09-05. Au recto elle se battait avec les champs
   illustres et rendait mal ; au verso, sur parchemin nu impose, elle a toute
   la place. Elle garde ses couleurs d'origine : pas de mix-blend-mode, pas de
   voile, juste une opacite legere pour laisser lire le texte par-dessus. */
.ch-silhouette{
  position:absolute; z-index:3; pointer-events:none; display:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  height:88%; width:calc(88% * 588 / 420 / var(--sr, 2.165));
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.55;
}
/* Les deux faces : la silhouette etait reservee au verso depuis le lot de
   finition, la streameuse la veut aussi au recto. */
[data-silhouette]:not([data-silhouette=""]) .ch-silhouette{display:block}
/* Teintee, elle passe en MASQUE et sa couleur vient du fond, exactement comme
   un encadrement. Le dessin d'origine sert de pochoir : aucun trait n'est
   ajoute, on ne fait que remplacer ses couleurs. L'image reste memorisee dans
   `data-masque` pour que l'export la retrouve, `background-image` valant alors
   `none`. Les proprietes de masque vivent ici, l'URL est posee par le script. */
.ch-silhouette[data-masque]{
  background-image:none !important;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
[data-silhouette="licorne-aux-volutes"] .ch-silhouette{background-image:url('../carte/silhouettes/licorne-aux-volutes.webp'); --sr:2.165}
[data-silhouette="licorne-aux-volutes-pale"] .ch-silhouette{background-image:url('../carte/silhouettes/licorne-aux-volutes-pale.webp'); --sr:2.165}
[data-silhouette="licorne-aux-volutes-bleue"] .ch-silhouette{background-image:url('../carte/silhouettes/licorne-aux-volutes-bleue.webp'); --sr:2.165}
[data-silhouette="licorne-aux-volutes-olive"] .ch-silhouette{background-image:url('../carte/silhouettes/licorne-aux-volutes-olive.webp'); --sr:2.165}
[data-silhouette="epees-jumelles"] .ch-silhouette{background-image:url('../carte/silhouettes/epees-jumelles.webp'); --sr:2.165}
[data-silhouette="epees-jumelles-verte"] .ch-silhouette{background-image:url('../carte/silhouettes/epees-jumelles-verte.webp'); --sr:2.165}
[data-silhouette="epees-jumelles-bleue"] .ch-silhouette{background-image:url('../carte/silhouettes/epees-jumelles-bleue.webp'); --sr:2.165}
[data-silhouette="epees-jumelles-violette"] .ch-silhouette{background-image:url('../carte/silhouettes/epees-jumelles-violette.webp'); --sr:2.165}
[data-silhouette="epees-jumelles-sombre"] .ch-silhouette{background-image:url('../carte/silhouettes/epees-jumelles-sombre.webp'); --sr:2.165}
[data-silhouette="dragon-a-la-tour"] .ch-silhouette{background-image:url('../carte/silhouettes/dragon-a-la-tour.webp'); --sr:2.165}

/* ══ SLOT 3 : ENCADREMENT ══════════════════════════════════════════════
   Le quadrant etire de la version precedente deformait les motifs. Ici chaque
   coin est decoupe sur sa boite alpha REELLE, donc il garde ses proportions,
   et la boite CSS reprend exactement ce ratio : aucun etirement possible.
   La largeur est calculee par cadre pour que haut + bas couvrent la hauteur de
   la carte. Faisable parce que les cadres iPhone sont symetriques, l'ecart
   entre cote gauche et cote droit ne depasse pas 0,4 px. */
.ch-cadre{position:absolute; inset:0; pointer-events:none; z-index:7}
/* L'image du coin vit dans `--img`, declaree une fois par cadre plus bas. Deux
   regles la consomment : celle-ci pour le fond, celle de la teinte pour le
   masque. Avant, la version teintee effacait le fond et comptait sur un script
   pour reposer l'image en masque : partout ou ce script ne tournait pas,
   l'encadrement disparaissait. */
.ch-cadre i{
  position:absolute; display:block;
  width:var(--cw, 137px); height:calc(var(--cw, 137px) * var(--cr, 2));
  background-image:var(--img);
  background-repeat:no-repeat; background-size:100% 100%;
  opacity:0; transition:opacity .5s ease;
  filter:sepia(.6) saturate(.5) hue-rotate(-14deg) brightness(.55);
}
.ch-cadre i.tl{top:0;left:0}
.ch-cadre i.tr{top:0;right:0}
.ch-cadre i.bl{bottom:0;left:0}
.ch-cadre i.br{bottom:0;right:0}
.ch-cadre i.tl{opacity:calc(var(--pousse) - 0)}
.ch-cadre i.tr{opacity:calc(var(--pousse) - 1)}
.ch-cadre i.br{opacity:calc(var(--pousse) - 2)}
.ch-cadre i.bl{opacity:calc(var(--pousse) - 3)}
[data-cadre="aucune"] .ch-cadre{display:none}

/* UN ENCADREMENT TEINTE, sans la moindre ligne de script. L'image du coin sert
   de pochoir et la couleur vient du fond : ce sont des dessins au trait sur
   transparence, donc le masque rend exactement le trait, la ou un filtre de
   teinte aurait bave sur les bords.
   Cette regle vivait dans `scriptorium.html`, donc la teinte n'existait QUE
   dans l'atelier : ailleurs, les cadres repeints en blanc restaient blancs sur
   du parchemin creme, c'est-a-dire invisibles.
   Le filtre de vieillissement ne s'applique pas ici : ecrit pour les cadres
   d'origine, il desature la teinte de moitie, la fait tourner de 14 degres et
   l'assombrit a 55 %. La teinte EST la couleur, elle ne se vieillit pas. */
/* AU PORTAGE : la COULEUR ne peut pas se lire depuis l'attribut, `attr()` ne
   sait pas produire une couleur. Le generateur de carte doit donc poser
   `style="--cadre-teinte: #xxxxxx"` sur la face, en plus de
   `data-cadre-teinte`. Sans cela le cadre s'affiche, mais toujours dans la
   couleur de repli ci-dessous. L'atelier, lui, la pose deja. */
[data-cadre-teinte] .ch-cadre i{
  background-image:none;
  background-color:var(--cadre-teinte, #556c47);
  filter:none;
  -webkit-mask-image:var(--img); mask-image:var(--img);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}

/* Cadre en bandes : `fleuron-simple` n'est pas quatre coins, ce sont deux
   ornements symetriques coupes en leur milieu. Colles aux bords ils couraient
   d'un cote a l'autre et remplissaient toute la largeur. Les deux moities se
   rejoignent donc au centre, et la largeur commune decide de la taille de
   l'ornement au lieu d'etre imposee par la carte.
   `fleurons` etait ici aussi : la fleur centrale de ses deux pieces hautes a ete
   retiree a l'image le 2026-09-06, elles sont devenues de vrais coins et le
   cadre a rejoint la pose commune. */
[data-cadre="fleuron-simple"] .ch-cadre i.tl{ left:auto; right:50%; top:12px }
[data-cadre="fleuron-simple"] .ch-cadre i.tr{ right:auto; left:50%; top:12px }
[data-cadre="fleuron-simple"] .ch-cadre i.bl{ left:auto; right:50%; bottom:12px }
[data-cadre="fleuron-simple"] .ch-cadre i.br{ right:auto; left:50%; bottom:12px }

/* Deux coins isoles n'ont pas a faire la moitie de la carte : ils marquent une
   diagonale, ils ne l'encadrent pas. */
[data-cadre="coins-legers"] .ch-cadre i.tl{ top:8px; left:8px }
[data-cadre="coins-legers"] .ch-cadre i.br{ bottom:8px; right:8px }
[data-cadre="volutes-riches"] .ch-cadre i{--cw:130.9px}
[data-cadre="volutes-riches"] .ch-cadre i.tl{--cr:2.2415; --img:url('../carte/cadres4-blancs/volutes-riches-tl.webp')}
[data-cadre="volutes-riches"] .ch-cadre i.tr{--cr:2.2377; --img:url('../carte/cadres4-blancs/volutes-riches-tr.webp')}
[data-cadre="volutes-riches"] .ch-cadre i.bl{--cr:2.2585; --img:url('../carte/cadres4-blancs/volutes-riches-bl.webp')}
[data-cadre="volutes-riches"] .ch-cadre i.br{--cr:2.2547; --img:url('../carte/cadres4-blancs/volutes-riches-br.webp')}
[data-cadre="volutes"] .ch-cadre i{--cw:157.2px}
[data-cadre="volutes"] .ch-cadre i.tl{--cr:2.1452; --img:url('../carte/cadres4-blancs/volutes-tl.webp')}
[data-cadre="volutes"] .ch-cadre i.tr{--cr:2.1401; --img:url('../carte/cadres4-blancs/volutes-tr.webp')}
[data-cadre="volutes"] .ch-cadre i.bl{--cr:1.6013; --img:url('../carte/cadres4-blancs/volutes-bl.webp')}
[data-cadre="volutes"] .ch-cadre i.br{--cr:1.6003; --img:url('../carte/cadres4-blancs/volutes-br.webp')}
[data-cadre="croisettes"] .ch-cadre i{--cw:135.9px}
[data-cadre="croisettes"] .ch-cadre i.tl{--cr:2.1601; --img:url('../carte/cadres4-blancs/croisettes-tl.webp')}
[data-cadre="croisettes"] .ch-cadre i.tr{--cr:2.1637; --img:url('../carte/cadres4-blancs/croisettes-tr.webp')}
[data-cadre="croisettes"] .ch-cadre i.bl{--cr:2.1669; --img:url('../carte/cadres4-blancs/croisettes-bl.webp')}
[data-cadre="croisettes"] .ch-cadre i.br{--cr:2.1776; --img:url('../carte/cadres4-blancs/croisettes-br.webp')}
[data-cadre="coins-legers"] .ch-cadre i{--cw:132px}
[data-cadre="coins-legers"] .ch-cadre i.tl{--cr:1.1856; --img:url('../carte/cadres4-blancs/coins-legers-tl.webp')}
[data-cadre="coins-legers"] .ch-cadre i.tr{display:none}
[data-cadre="coins-legers"] .ch-cadre i.bl{display:none}
[data-cadre="coins-legers"] .ch-cadre i.br{--cr:1.2129; --img:url('../carte/cadres4-blancs/coins-legers-br.webp')}
/* Quatre coins plats : la largeur ne se prend pas sur la hauteur de la carte
   comme pour les cadres hauts, mais sur sa LARGEUR, deux pieces de 190 px et un
   passage de 40 px au centre. Ratios remesures sur la boite alpha apres retrait
   de la fleur centrale. */
[data-cadre="fleurons"] .ch-cadre i{--cw:190px}
[data-cadre="fleurons"] .ch-cadre i.tl{--cr:0.6223; --img:url('../carte/cadres4-blancs/fleurons-tl.webp')}
[data-cadre="fleurons"] .ch-cadre i.tr{--cr:0.6208; --img:url('../carte/cadres4-blancs/fleurons-tr.webp')}
[data-cadre="fleurons"] .ch-cadre i.bl{--cr:0.5478; --img:url('../carte/cadres4-blancs/fleurons-bl.webp')}
[data-cadre="fleurons"] .ch-cadre i.br{--cr:0.5478; --img:url('../carte/cadres4-blancs/fleurons-br.webp')}
[data-cadre="ronces"] .ch-cadre i{--cw:137.7px}
[data-cadre="ronces"] .ch-cadre i.tl{--cr:2.1588; --img:url('../carte/cadres4-blancs/ronces-tl.webp')}
[data-cadre="ronces"] .ch-cadre i.tr{--cr:2.1553; --img:url('../carte/cadres4-blancs/ronces-tr.webp')}
[data-cadre="ronces"] .ch-cadre i.bl{--cr:2.1179; --img:url('../carte/cadres4-blancs/ronces-bl.webp')}
[data-cadre="ronces"] .ch-cadre i.br{--cr:2.1145; --img:url('../carte/cadres4-blancs/ronces-br.webp')}

/* ── VOLUTES HAUTES : pose « colonnes » ──────────────────────────────────
   Ni quatre coins ni deux bandes : deux demi-cadres pleine hauteur, poses aux
   bords gauche et droit. Mesure de la boite alpha : ratio 4.354 et 4.376,
   d'ou une largeur de 134.4 px pour couvrir les 588 px de la carte, et
   151 px de passage au centre. */
[data-cadre="volutes-hautes"] .ch-cadre i{ width:134.4px; height:100%; top:0 }
[data-cadre="volutes-hautes"] .ch-cadre i.tl{
  left:0; right:auto;
  --img:url('../carte/cadres5-blancs/volutes-hautes-g.webp');
}
[data-cadre="volutes-hautes"] .ch-cadre i.tr{
  right:0; left:auto;
  --img:url('../carte/cadres5-blancs/volutes-hautes-d.webp');
}
[data-cadre="volutes-hautes"] .ch-cadre i.bl,
[data-cadre="volutes-hautes"] .ch-cadre i.br{ display:none }

[data-cadre="fleuron-simple"] .ch-cadre i{--cw:132px}
[data-cadre="fleuron-simple"] .ch-cadre i.tl{--cr:0.3613; --img:url('../carte/cadres4-blancs/fleuron-simple-tl.webp')}
[data-cadre="fleuron-simple"] .ch-cadre i.tr{--cr:0.3606; --img:url('../carte/cadres4-blancs/fleuron-simple-tr.webp')}
[data-cadre="fleuron-simple"] .ch-cadre i.bl{--cr:0.3194; --img:url('../carte/cadres4-blancs/fleuron-simple-bl.webp')}
[data-cadre="fleuron-simple"] .ch-cadre i.br{--cr:0.3188; --img:url('../carte/cadres4-blancs/fleuron-simple-br.webp')}

[data-support="vitrail"] .ch-cadre i,[data-support="etoffe"] .ch-cadre i,
[data-support="bois"] .ch-cadre i,[data-support="poussiere"] .ch-cadre i{
  filter:sepia(.5) saturate(.4) brightness(2.6) contrast(.85);
}
.ch-carte[data-dore="1"] .ch-cadre i{
  filter:sepia(1) saturate(2.6) hue-rotate(-6deg) brightness(1.05) drop-shadow(0 0 5px rgba(201,168,76,.65));
}

/* ══════════ CONTENU ══════════ */
.ch-inner{position:relative; z-index:8; padding:34px 38px 28px; display:flex; flex-direction:column; height:100%}
.ch-voile{
  position:absolute; inset:13px; z-index:4; border-radius:4px;
  background:rgba(245,234,208,.30); backdrop-filter:blur(1.5px);
  box-shadow:inset 0 0 0 1px rgba(44,24,16,.14); pointer-events:none;
}
/* Sur matière saturée le voile doit monter fort, sinon le texte disparaît. */
[data-support="or"] .ch-voile,[data-support="nacre"] .ch-voile,[data-support="argent"] .ch-voile,
[data-support="relique"] .ch-voile,[data-support="prisme"] .ch-voile{
  background:rgba(253,246,227,.62);
  box-shadow:inset 0 0 0 1px rgba(44,24,16,.25), inset 0 0 34px rgba(0,0,0,.10);
}
[data-support="vitrail"] .ch-voile,[data-support="etoffe"] .ch-voile,
[data-support="bois"] .ch-voile,[data-support="poussiere"] .ch-voile{
  background:rgba(18,10,8,.52);
  box-shadow:inset 0 0 0 1px rgba(245,234,208,.20), inset 0 0 34px rgba(0,0,0,.30);
}

/* La lisibilité ne peut pas se décider sur le seul support : un champ sombre
   posé sur un support clair donnait du texte foncé sur fond foncé. Ces règles
   viennent APRÈS celles du support, donc elles gagnent à specificité égale. */

.ch-entete{text-align:center; padding:0 4px}
.ch-compagnie{font-family:var(--font-title); font-size:.55rem; letter-spacing:.32em;
  text-transform:uppercase; opacity:.62; margin:0}

/* ══════════ SLOT 5 - ENCRE DU NOM ══════════ */
.ch-nom{
  font-family:var(--font-title); font-weight:700; font-size:1.62rem;
  line-height:1.08; margin:5px 0 3px; letter-spacing:.02em;
  position:relative; display:inline-block;
}
.ch-nom-lettrine{font-size:1em}

/* encre commune : n'est plus un texte plat. Fibre du papier qui boit l'encre,
   variation d'intensité le long du tracé, et une lente respiration. */
[data-encre="commune"] .ch-nom{
  background-image:
    repeating-linear-gradient(94deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px),
    linear-gradient(102deg,#2c1810,#4a3728 22%,#241209 45%,#3d2a1c 70%,#2c1810);
  background-size:100% 100%, 180% 100%;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px .5px rgba(44,24,16,.35));
  animation:ch-encre 9s ease-in-out infinite;
}
@keyframes ch-encre{0%,100%{background-position:0 0, 0% 0}50%{background-position:0 0, 100% 0}}

/* Feuille d'or, d'apres la recette Gold-Foil de text-effects.colorion.co.
   Huit arrets au lieu de cinq, et surtout la saturation qui monte au passage du
   reflet : c'est ce changement de VIVACITE, et non le seul deplacement, qui
   fait la feuille battue plutot qu'un degrade jaune qui glisse. L'ombre haute
   pose l'embossage, l'ombre basse decolle la lettre du parchemin. */
[data-encre="or"] .ch-nom{
  /* La derniere couleur est LA MEME que la premiere. Un fond repete met bout a
     bout deux copies du degrade : si le debut et la fin different, la jonction
     est une cassure nette, et c'est elle qu'on voyait passer au milieu du cycle
     comme une tranche. La recette d'origine finit sur #c98218 et commence sur
     #7a4a08 ; elle n'etait pas prevue pour boucler. */
  background-image:linear-gradient(108deg,
    #7a4a08 0%, #f2c15d 16%, #fff4b8 22%, #b87014 34%,
    #f6d66d 48%, #8e560b 64%, #fff0a2 74%, #c98218 88%, #7a4a08 100%);
  background-size:230% 100%;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,244,184,.4), 0 3px 7px rgba(44,24,16,.3);
  animation:ch-foil 8s linear infinite;
}
/* Le reflet traverse TOUJOURS dans le meme sens, a vitesse constante. Il faisait
   un aller-retour : on voyait la lumiere revenir en arriere, ce qui ne ressemble
   a rien de reel. La saturation monte quand le reflet passe au milieu, et la
   boucle est exacte, 230 / 130 x 100 = 176,9231 %. */
@keyframes ch-foil{
  0%{ background-position:0 0; filter:saturate(1.05) }
  50%{ filter:saturate(1.32) brightness(1.08) }
  100%{ background-position:176.9231% 0; filter:saturate(1.05) }
}
/* Metal brosse, d'apres Chromia. Le principe de la recette : une bande blanche
   TRES etroite au milieu d'un metal sombre, et un balayage large. La recette
   fond ses bords vers `transparent` ; sur un parchemin clair cela revenait a
   effacer les lettres, alors ils sont remplaces par des gris pleins. */
[data-encre="argent"] .ch-nom{
  background-image:linear-gradient(105deg,
    #5a6169 0 40%, #9aa2ab 47%, #ffffff 50%, #9aa2ab 53%, #5a6169 60% 100%);
  /* 320 et non 260 : plus le fond est etire, moins on voit de periodes a la
     fois. A 260 % la raie suivante entrait par la droite avant que la premiere
     ne soit sortie, d'ou les DEUX raies. */
  background-size:320% 100%;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 2px rgba(44,24,16,.35);
  animation:ch-chrome 7s linear infinite;
}
/* Un seul sens, vitesse constante, et une periode exacte : 320 / 220 x 100 =
   145,4545 %. L'ancienne version restait immobile de 60 a 100 % du cycle, puis
   revenait d'un bond a son point de depart : c'est le « freeze puis reset ». */
@keyframes ch-chrome{
  0%{ background-position:0 0 }
  100%{ background-position:145.4545% 0 }
}
/* LA PERIODE D'UN BALAYAGE. Un fond repete ne boucle sans couture que si on le
   translate d'un nombre ENTIER de periodes. Or `background-position` en % ne
   mesure pas la largeur du fond mais la course disponible, `largeur_boite moins
   largeur_fond`. Pour un fond de S %, une periode complete vaut donc

       S / (S - 100) x 100 %

   et pas 100, ni la valeur ronde qu'on choisit d'instinct. Toutes les encres
   utilisaient une valeur ronde : au bouclage le motif se retrouvait decale, et
   ca sautait. Chaque encre pose sa valeur dans `--balayage`, calculee. */
@keyframes ch-glint{ to{ background-position:var(--balayage, 200%) 0 } }

/* nouvelles encres */
[data-encre="bronze"] .ch-nom{
  /* Un bronze patine n'est pas un degrade vert : c'est un metal CHAUD mange
     par l'oxydation. Il faut les deux, le cuivre et le vert-de-gris, sinon on
     ne lit qu'une couleur. */
  background-image:
    repeating-linear-gradient(102deg,
      rgba(74,143,111,.85) 0 6px, transparent 6px 14px,
      rgba(96,168,132,.55) 14px 19px, transparent 19px 31px),
    linear-gradient(100deg,#5a2f0e,#b87333 22%,#e8a55c 38%,#8a4c18 52%,#c98a3e 70%,#5a2f0e);
  background-size:180% 100%, 240% 100%;
  --balayage:171.4286%;   /* 240 / 140 x 100 */
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
  animation:ch-glint 26s linear infinite;
}

/* Eau dormante, d'apres Still-Water : le nom flotte au-dessus de son propre
   reflet. Le bond de la recette vaut 6 px ; sur une carte il deplacerait le nom
   sous les yeux et pousserait la devise. Deux pixels suffisent a donner la
   respiration sans deranger la mise en page. */
[data-encre="eau-dormante"] .ch-nom{
  background-image:linear-gradient(100deg,#1d4f63,#3b8ea5 30%,#8fd2e3 48%,#2a6a80 66%,#1d4f63);
  background-size:210% 100%;
  --balayage:190.9091%;   /* 210 / 110 x 100 */
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  /* Le reflet partait a mi-hauteur et plafonnait a 22 % : on ne le voyait pas.
     Il commence maintenant sous le texte, franc. Mais il s'eteint VITE : porte
     jusqu'a 78 % il descendait sur la devise, qui ne laisse que 8 px
     d'interligne. Le rentrer dans ces 8 px l'a fait disparaitre : c'etait
     resoudre le mauvais probleme. On FAIT DE LA PLACE a la place, avec une
     marge sous le nom, reservee a cette encre. Le reflet peut alors etre franc.
     Mesure : nom de 42 px, reflet eteint a 48 % soit 20 px, marge portee a
     24 px pour qu'il tienne sans toucher la devise.
     A savoir : l'export ne dessine pas `-webkit-box-reflect`. Sur l'image, le
     nom aura donc cette marge sans le reflet qui la justifie. */
  /* Decalage NEGATIF : `below 0` place le reflet sous la BOITE du texte, qui
     comprend la descente de la police, soit une dizaine de pixels de vide sous
     les lettres. On remonte d'autant pour que le reflet touche le bas des
     lettres, et non le bas de la boite. */
  -webkit-box-reflect:below -11px
    linear-gradient(rgba(255,255,255,.78) 0%, rgba(255,255,255,.42) 22%, transparent 48%);
  animation:ch-glint 22s linear infinite, ch-flot 4.2s ease-in-out infinite;
}

/* LE REPLI POUR FIREFOX.
   `-webkit-box-reflect` n'existe que dans Chrome et Safari. C'est la SEULE des
   neuf encres a dependre d'une propriete non standard ; les huit autres sont
   en `@keyframes` et jouent partout.

   Ecrit en repli et non en remplacement : la regle ne s'applique que la ou la
   propriete manque. Chrome et l'overlay OBS gardent donc exactement le rendu
   deja valide, et rien de ce qui a ete juge bon n'est remis en jeu pour
   reparer un navigateur ou personne n'a encore regarde.

   Le reflet se reconstruit avec ce qui existe deja : `preparerNom` range le
   texte dans `data-texte`, un pseudo-element le reecrit, le retourne et le
   fond. Il n'a pas besoin de connaitre l'encre, il en herite. */
@supports not (-webkit-box-reflect: below 0) {
  [data-encre="eau-dormante"] .ch-nom{ position:relative }
  [data-encre="eau-dormante"] .ch-nom::after{
    content:attr(data-texte);
    position:absolute; left:0; right:0; top:100%;
    /* Les memes 11 px que le decalage d'origine : la boite du texte comprend
       la descente de la police, soit une dizaine de pixels de vide sous les
       lettres. On remonte d'autant pour que le reflet touche le bas des
       lettres et non le bas de la boite. */
    margin-top:-11px;
    transform:scaleY(-1);
    /* Le fondu reprend les memes arrets que le degrade d'origine, pour que les
       deux navigateurs eteignent le reflet au meme endroit. */
    -webkit-mask-image:linear-gradient(rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.42) 22%, transparent 48%);
    mask-image:linear-gradient(rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.42) 22%, transparent 48%);
    pointer-events:none;
    /* L'animation de balayage ne se rejoue pas sur le reflet : deux balayages
       desynchronises sur une image et son miroir donnent un scintillement que
       l'oeil lit comme un defaut. */
    animation:none;
  }
}
/* La place du reflet. Elle n'est prise que par cette encre : les autres gardent
   la mise en page d'origine. */
/* Le nom descend de quelques pixels et le vide sous le reflet se resserre : le
   bloc nom plus reflet etait pose trop haut, et la devise flottait loin en
   dessous. Le defaut est `5px 0 3px`. */
[data-encre="eau-dormante"] .ch-nom{ margin:14px 0 12px }
@keyframes ch-flot{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-2px) }
}

/* Scribe, d'apres Teletype mais EN UNE PASSE. La recette boucle sans fin ; un
   nom qui se reecrit en permanence sur une carte qu'on regarde serait
   insupportable. Il s'ecrit a l'ouverture, puis reste.
   Chaque LETTRE apparait a son tour. La version precedente decoupait la largeur
   totale en pas egaux avec `clip-path` : sur une police a chasse variable, un
   pas ne vaut pas une lettre, donc deux lettres etroites sortaient ensemble et
   une lettre large se retrouvait tranchee en son milieu. Le decoupage en
   lettres, deja fait pour l'encre fantome, resout cela exactement : le rang de
   chaque lettre donne son retard. */
[data-encre="scribe"] .ch-nom{
  color:#2c1810; -webkit-text-fill-color:#2c1810;
}
/* La duree est de 200 ms, pas de 10. Une animation plus courte qu'une image
   d'ecran, 16,7 ms a 60 Hz, peut etre marquee terminee sans que son etat final
   ait ete composite : c'est une lettre qui reste invisible pour toujours,
   mesuree ici sur le `y` de CyberBoloss. `steps(1)` garde l'apparition seche,
   la duree la rend fiable. La lettre parait donc a `delai + 200 ms`, et l'ecart
   entre deux lettres reste celui du delai. */
[data-encre="scribe"] .ch-nom b{
  font-weight:inherit; opacity:0;
  animation:ch-scribe .2s steps(1) forwards;
  animation-delay:calc(var(--i, 0) * .085s);
}
@keyframes ch-scribe{ to{ opacity:1 } }

/* ── DEUX ENCRES DE MATIERE ────────────────────────────────────────────────
   Elles ne se distinguent pas par leur couleur mais par leur IRREGULARITE. Un
   `repeating-linear-gradient` est parfaitement regulier ; passe dans un bruit
   de Perlin (`feTurbulence` puis `feDisplacementMap`, voir `#ch-filtres` dans
   `index.html`), il en ressort sinueux. C'est ce qui separe une matiere d'un
   degrade colore, et c'est ce qui manquait aux versions precedentes.

   La matiere reste un degrade CSS : l'export continue de la lire. Seul le
   mouvement vient du filtre, et lui ne sort pas sur l'image. */

/* Une pierre a bandes. Les veines sont serrees, de largeurs inegales, et le
   filtre les fait onduler : c'est le desordre qui fait le caillou. */
[data-encre="malachite"] .ch-nom{
  background-image:
    repeating-linear-gradient(97deg,
      rgba(216,255,232,.55) 0 1.5px, transparent 1.5px 4px,
      rgba(6,42,26,.6) 4px 6px, transparent 6px 9px,
      rgba(150,230,186,.4) 9px 11px, transparent 11px 17px),
    linear-gradient(100deg,#0b3722,#2b8a59 26%,#6fc796 42%,#1a7a4e 58%,#0b3722);
  background-size:100% 100%, 200% 100%;
  --balayage:200%;   /* 200 / 100 x 100 */
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  color:#2b8a59;
  filter:url(#ch-f-malachite) drop-shadow(0 1px 1px rgba(0,0,0,.45));
  animation:ch-glint 34s linear infinite;
}

/* Du feu. Le degrade monte du blanc-jaune vers le rouge sombre, comme une
   flamme, et le filtre lui donne son leche : c'est l'ondulation qui fait le
   feu, pas l'orange, qu'un simple degrade aurait donne aussi. */
[data-encre="braise"] .ch-nom{
  background-image:
    linear-gradient(4deg,
      #fff3c4 0%, #ffc247 14%, #ff8c1a 32%, #f2560f 52%,
      #b12708 72%, #5c1405 88%, #2a0c04 100%);
  background-size:100% 190%;
  background-position:0 100%;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  color:#f2560f;
  filter:url(#ch-f-braise);
  /* La lueur monte : ombres portees VERS LE HAUT, de plus en plus larges et de
     moins en moins opaques, d'apres Emberglow. C'est ce qui dit la chaleur ;
     un halo centre n'aurait dit que « ca brille ». */
  animation:ch-braise 5s ease-in-out infinite, ch-ember 1.9s ease-in-out infinite alternate;
}
@keyframes ch-braise{
  0%,100%{ background-position:0 100% }
  50%{ background-position:0 62% }
}
@keyframes ch-ember{
  0%{ text-shadow:0 -1px 4px #ffab40, 0 -4px 9px rgba(255,109,0,.75),
        0 -8px 18px rgba(221,44,0,.5), 0 -13px 28px rgba(213,0,0,.3) }
  100%{ text-shadow:0 -2px 5px #ffc46b, 0 -6px 13px rgba(255,143,31,.85),
        0 -12px 25px rgba(255,61,0,.55), 0 -20px 40px rgba(213,0,0,.42) }
}

/* Spectre, avec la derive de mise au point de Lens-Drift : les lettres entrent
   et sortent du flou l'une apres l'autre, decalees par leur rang. C'est la
   seule encre qui demande un decoupage du nom, fait par `preparerNom` ; sans
   lui, le mot entier flouterait d'un bloc et ne dirait plus rien. */
[data-encre="fantome"] .ch-nom{
  color:#8fa9c8; -webkit-text-fill-color:#8fa9c8;
  text-shadow:0 0 8px rgba(190,215,255,.8), 0 0 18px rgba(140,180,255,.4);
}
[data-encre="fantome"] .ch-nom b{
  font-weight:inherit; display:inline-block;
  animation:ch-derive 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .16s);
}
@keyframes ch-derive{
  0%,100%{ filter:blur(0); opacity:1 }
  50%{ filter:blur(4px); opacity:.4 }
}
/* Sans decoupage, le mot entier respire : moins beau, mais jamais casse. */
[data-encre="fantome"] .ch-nom:not(:has(b)){
  animation:ch-derive 3.4s ease-in-out infinite;
}

@keyframes ch-spectre{
  0%,100%{opacity:.85; transform:translateX(0)}
  50%    {opacity:.45; transform:translateX(-1.5px)}}
@keyframes ch-spectre-2{
  0%,100%{opacity:.25; transform:translate(2px,-1px)}
  50%    {opacity:.6;  transform:translate(-2px,1px)}}

/* ── Lisibilite de l'encre sur champ sombre ──────────────────────────
   Les encres qui se clippent sur le texte ignorent le `color` de la face.
   Il faut donc une regle croisee encre x champ, pas un reglage de face.
   Placee apres les definitions d'encre pour gagner a specificite egale. */
.ch-carte[data-lettrine="1"] .ch-nom-lettrine{
  /* Capitale ornee dans son cartouche : cadre double, fond d'or brosse, lettre
     en rouge minium, ombre portee qui la decolle du mot, fleuron d'angle. */
  font-family:var(--font-accent); font-size:1.62em; line-height:.78;
  color:#8e1218; -webkit-text-fill-color:#8e1218;
  padding:3px 8px 1px 6px; margin-right:3px; display:inline-block;
  vertical-align:-.17em; position:relative;
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,.22) 0 1px, transparent 1px 5px),
    linear-gradient(150deg,#fdf0c6,#e9c96f 42%,#c9a84c 62%,#d9b45a 78%,#b8912f);
  border:2px solid #8a6416; border-radius:3px;
  box-shadow:0 2px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,248,220,.5);
  text-shadow:0 1px 0 rgba(255,240,190,.7);
}
.ch-carte[data-lettrine="1"] .ch-nom-lettrine::after{
  content:'\276E'; position:absolute; right:-2px; bottom:-5px;
  font-size:.3em; color:#8a6416; -webkit-text-fill-color:#8a6416;
}
.ch-devise{font-style:italic; font-size:.85rem; opacity:.75; margin-top:2px}

.ch-trait{display:flex; align-items:center; gap:10px; margin:10px 0; opacity:.45}
.ch-trait::before,.ch-trait::after{content:''; flex:1; height:1px; background:currentColor}
.ch-trait span{font-size:.8rem; font-family:var(--font-accent); line-height:1}

/* portrait */
.ch-portrait{display:flex; gap:16px; align-items:center; margin:2px 0; padding:4px 0}
.ch-medaillon{position:relative; width:94px; height:94px; flex:0 0 auto}
/* rotate(90) + scaleX(-1) : le remplissage part du haut, descend par la
   gauche puis remonte par la droite. Un <circle> SVG se trace sinon dans le
   sens horaire, ce qui donnait un remplissage a l'envers. */
.ch-medaillon svg{position:absolute; inset:-6px; width:106px; height:106px;
  transform:rotate(90deg) scaleX(-1)}
.ch-medaillon svg circle{fill:none; stroke-width:3}
.ch-anneau-bg{stroke:rgba(44,24,16,.20)}
.ch-anneau{stroke:var(--glow); stroke-linecap:round; transition:stroke-dashoffset 1.2s ease .3s}
.ch-medaillon img{width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2px solid rgba(44,24,16,.45); background:#2c1810}
.ch-niveau{
  position:absolute; bottom:-4px; right:-6px; min-width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(#f3dea3,#c9a84c); color:#3a2a06;
  font-family:var(--font-title); font-weight:700; font-size:.8rem;
  border:1.5px solid #8a6416; box-shadow:0 2px 5px rgba(0,0,0,.4);
}
/* Le mot "Classe" est retire : "La Cartographe" se comprend sans etiquette.
   Le picto passe au-dessus et grossit, il porte l'identite de la classe. */
.ch-classe{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px}
.ch-classe img{width:58px; height:58px; object-fit:contain; opacity:.92}
.ch-classe-nom{font-family:var(--font-accent); font-size:1.06rem; line-height:1.15; text-align:center}

/* distinctions - modificateurs scopés, jamais de .sub ni .vip nus */
/* Contre le medaillon, en colonne, du meme cote que la pastille de niveau.
   Elles etaient une rangee de texte sous le portrait, deplacable et editable :
   trois lignes a placer soi-meme pour une information qu'on ne choisit pas.
   Ce sont des indicateurs de compte, comme le niveau ; ils se posent tout
   seuls et ne se composent plus. */
/* A LA SUITE de la pastille de niveau, et elles remontent EN SUIVANT LE CERCLE
   du portrait. En colonne droite elles s'ecartaient du medaillon a mesure
   qu'elles montaient ; sur l'arc, elles restent a la meme distance du bord.

   La geometrie, mesuree et non estimee : le medaillon fait 94 px, son centre
   est donc a (47, 47) ; la pastille de niveau, 26 px de cote posee a -4 en bas
   et -6 a droite, a son centre a (87, 85), soit a 55 px du centre et 43,5
   degres sous l'horizontale. Les statuts partagent ce rayon et remontent d'un
   pas de 26,3 degres, l'angle qui separe deux pastilles de 21 px espacees de 4
   sur un cercle de 55. La double rotation garde le symbole droit. */
.ch-distinctions{ position:absolute; left:50%; top:50%; width:0; height:0 }
.ch-dist{
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:2px; border:1px solid currentColor;
  opacity:.78; font-family:var(--font-title);
  margin:0; font-style:normal; line-height:1.35; white-space:nowrap;
}
/* Le symbole seul, dans une pastille ronde du gabarit de la pastille de niveau.
   Les symboles sont ceux que la commande affiche deja en stream. */
.ch-dist--icone{
  position:absolute; left:0; top:0; margin:-.725em 0 0 -.725em;
  width:1.45em; height:1.45em; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem; letter-spacing:0; line-height:1; opacity:.9;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  --a:calc(17.2deg - var(--i, 0) * 26.3deg);
  transform:rotate(var(--a)) translate(55px) rotate(calc(-1 * var(--a)));
}
.ch-dist--sub{background:rgba(201,168,76,.20); border-color:rgba(201,168,76,.75)}
.ch-dist--vip{background:rgba(155,89,182,.18); border-color:rgba(155,89,182,.7)}
.ch-dist--mod{background:rgba(212,56,75,.16); border-color:rgba(212,56,75,.7)}

/* succès : les vraies icônes du site */
.ch-succes{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:11px 0 0}
.ch-succes img{
  width:35px; height:35px; object-fit:contain;
  border-radius:3px; padding:2px;
  background:rgba(245,234,208,.35); border:1px solid rgba(44,24,16,.22);
}
[data-support="vitrail"] .ch-succes img,[data-support="bois"] .ch-succes img,
[data-support="etoffe"] .ch-succes img,[data-support="poussiere"] .ch-succes img{
  background:rgba(245,234,208,.82);
}
.ch-succes-plus{font-size:.72rem; opacity:.6; font-style:italic}

/* Une seule ligne, pleine largeur : le lieu a gauche, le butin en icone a
   droite. La fiche s'affiche quelques secondes en stream, moins il y a a lire
   mieux c'est. */
.ch-derniere{
  margin-top:12px; display:flex; align-items:stretch; gap:12px;
  padding:6px 9px; border-radius:4px;
  background:rgba(107,66,38,.10); border:1px solid rgba(107,66,38,.22);
}
/* Mesure : les deux libelles au long occupent 227 px des 342 disponibles, il ne
   restait que 57 px pour le lieu, soit "Les Bois ...". Le libelle passe donc
   au-dessus de sa valeur : un seul bloc, pleine largeur, mais le lieu retrouve
   ses 110 px et s'affiche en entier.
   Le lieu reste le seul element autorise a se retrecir, c'est le seul dont on
   peut perdre la fin sans perdre l'information : une icone rognee ne veut rien
   dire, le butin garde donc sa taille. */
.ch-derniere > span{display:flex; flex-direction:column; align-items:flex-start; gap:3px}
.ch-derniere > span:first-child{flex:1 1 auto; min-width:0}
.ch-derniere > span:last-child{flex:0 0 auto}
.ch-derniere i{font-size:.52rem; letter-spacing:.05em; text-transform:uppercase;
  opacity:.6; font-style:normal; white-space:nowrap; flex:0 0 auto}
.ch-derniere b{font-size:.8rem; max-width:100%; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0}
.ch-derniere img{width:28px; height:28px; object-fit:contain; flex:0 0 auto}

/* ══ ESSAI : le lieu montre sa carte ═══════════════════════════════════════
   Les cartes de region pesent 4 a 9 Mo. On en sert une BANDE recadree sur la
   partie la plus dense en relief, 108 px de haut, environ 15 Ko.
   Le voile de parchemin par-dessus evite que la carte, qui a ses propres verts
   et bleus, ne fasse tache sur une fiche couleur parchemin. */
.ch-lieu{
  position:relative; margin-top:12px; border-radius:4px; overflow:hidden;
  border:1px solid rgba(107,66,38,.28); background:rgba(107,66,38,.10);
}
.ch-lieu-vue{
  position:relative; height:3.5em; background-position:center; background-size:cover;
  background-repeat:no-repeat; filter:sepia(.35) saturate(.75) brightness(.98);
}
/* Le nom porte SON fond, un bandeau uni, au lieu de se poser sur un degrade
   dessine en pseudo-element. Mesure a l'export : le degrade n'y etait pas rendu,
   les pseudo-elements n'ayant pas de rectangle a lire, et le nom sortait clair
   sur clair, luminance 185 a 234. Un fond uni porte par un vrai element est lu
   par l'export comme par l'ecran : un seul rendu, aucune divergence possible. */
.ch-lieu-nom{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.75em .62em .4em;
  background:rgba(44,24,16,.68);
  font-size:.84em; font-weight:600; color:#f5ead0; line-height:1.1;
  text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
/* Le libelle, lui, sort de l'image : en haut il tombait sur une zone claire de
   la carte et restait illisible malgre son ombre. */
.ch-lieu-tag{
  display:block; padding:.31em .62em .25em;
  font-size:.52em; letter-spacing:.05em; text-transform:uppercase;
  opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ── LE REPAIRE ────────────────────────────────────────────────────────────
   Meme donnee que le lieu de passage, cadrage inverse. Le nom quitte l'image et
   descend dans le parchemin, sur une ligne a lui : la vignette devient un objet
   encadre qu'on a accroche, plutot qu'une photo prise en marchant. */
.ch-lieu--repaire{ text-align:center; padding:.4em }
.ch-lieu--repaire .ch-lieu-vue{
  height:auto; aspect-ratio:1 / 1; border-radius:3px;
  filter:sepia(.42) saturate(.9) brightness(.98);
  box-shadow:0 0 0 1px rgba(107,66,38,.45), 0 2px 5px rgba(44,24,16,.28);
}
/* La plaque : parchemin et encre, la ou le lieu de passage met du sombre et du
   clair. Deux ecritures qui disent la meme chose de deux facons opposees, ce
   qui est exactement ce qu'on cherchait a rendre lisible d'un coup d'oeil. */
/* Plus haute et plus lisible : le libelle etait a .52em et 65 % d'opacite,
   c'est-a-dire illisible des que le module retrecissait. */
.ch-lieu-plaque{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:block; padding:.55em .5em .6em; text-align:center;
  background:rgba(245,234,208,.93);
  border-top:1px solid rgba(107,66,38,.35);
  color:var(--ink);
}
.ch-lieu-plaque i{
  display:block; font-style:normal; font-size:.68em; letter-spacing:.1em;
  text-transform:uppercase; opacity:.8; margin-bottom:.25em;
}
.ch-lieu-plaque b{
  display:block; font-weight:600; font-size:.9em; line-height:1.2;
}
.ch-lieu-butin{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-top:1px solid rgba(107,66,38,.22);
}
.ch-lieu-butin i{
  font-size:.52rem; letter-spacing:.05em; text-transform:uppercase;
  opacity:.6; font-style:normal; white-space:nowrap;
}
.ch-lieu-butin img{width:26px; height:26px; object-fit:contain; flex:0 0 auto; margin-left:auto}
/* Le bandeau remplace l'ancienne ligne a deux cellules, valide le 2026-09-05. */
.ch-derniere{display:none}
.ch-sep-v{width:1px; align-self:stretch; flex:0 0 auto; background:currentColor; opacity:.22; flex:0 0 auto}
.ch-spacer{flex:1; min-height:2px}

.ch-stats{display:flex; flex-direction:column; gap:8px; padding-right:92px}
.ch-stat{display:grid; grid-template-columns:1fr auto; gap:2px 8px; font-size:.72rem}
.ch-stat b{font-weight:600; letter-spacing:.05em}
.ch-jauge{grid-column:1/-1; height:5px; background:rgba(44,24,16,.18); border-radius:3px; overflow:hidden}
.ch-jauge i{display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--wood-light),var(--glow)); transition:width 1s ease .4s}

/* ══════════ SLOT 4 - LE SCEAU DE CIRE ══════════
   Refait : bord irrégulier, coulures, matière mate, empreinte en relief. */
.ch-sceau{
  position:absolute; z-index:8; bottom:24px; right:22px;
  width:76px; height:76px;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.55));
}
.ch-sceau-galette{
  position:absolute; inset:0;
  /* bord irrégulier : ce n'est plus un rond parfait */
  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:
    /* Grain NON directionnel. L'ancien repeating-conic-gradient produisait des
       rayons qui faisaient lire un objet strie au lieu d'une cire. */
    radial-gradient(circle at 22% 68%, rgba(0,0,0,.10) 0 3px, transparent 3px),
    radial-gradient(circle at 63% 21%, rgba(255,255,255,.09) 0 2px, transparent 2px),
    radial-gradient(circle at 81% 55%, rgba(0,0,0,.08) 0 2px, transparent 2px),
    radial-gradient(circle at 41% 84%, rgba(255,255,255,.07) 0 3px, transparent 3px),
    radial-gradient(circle at 33% 26%, rgba(255,255,255,.38), transparent 42%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.50), transparent 55%),
    radial-gradient(circle at 50% 50%, var(--cire-clair,#a83a12) 0%, var(--cire-c,#8b2500) 62%, var(--cire-sombre,#4d1300) 100%);
  box-shadow:
    inset 0 -4px 9px rgba(0,0,0,.45),
    inset 0 4px 7px rgba(255,255,255,.20),
    inset 3px 0 6px rgba(0,0,0,.18);
}
/* bourrelet écrasé : la cire déborde là où le sceau a appuyé */
.ch-sceau-galette::after{
  content:''; position:absolute; inset:5px; border-radius:46% 54% 51% 49% / 52% 47% 53% 48%;
  box-shadow:inset 0 0 7px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.07);
}
/* coulure */
.ch-sceau-coulure{
  position:absolute; bottom:-7px; left:52%; width:15px; height:19px;
  background:radial-gradient(ellipse at 50% 20%, var(--cire-c,#8b2500), var(--cire-sombre,#4d1300));
  clip-path:polygon(28% 0,72% 0,88% 55%,62% 100%,38% 96%,12% 52%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
/* l'empreinte, en creux : une ombre décalée + une lumière décalée = relief */
/* Sans masque pose, ces trois calques sont des rectangles pleins : on voyait un
   carre net au milieu de la cire tant qu'aucune empreinte n'etait choisie. Ils
   n'existent que si le sceau porte une empreinte. */
.ch-sceau:not([data-empreinte]) .ch-empreinte{ display:none }
.ch-empreinte{
  position:absolute; inset:16px;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.ch-empreinte--creux{ background:var(--cire-sombre,#4d1300); opacity:.85; transform:translate(-.5px,-.5px) }
.ch-empreinte--lumiere{ background:var(--cire-clair,#a83a12); opacity:.65; transform:translate(1px,1.5px) }
.ch-empreinte--corps{ background:var(--cire-c,#8b2500); opacity:.95 }

.ch-sceau.brise .ch-sceau-galette{
  clip-path:polygon(50% 0%,38% 2%,30% 6%,18% 12%,9% 22%,3% 34%,0% 48%,2% 62%,
    7% 75%,15% 85%,25% 93%,38% 97%,46% 99%,43% 62%,47% 40%,44% 18%);
}
.ch-sceau.brise .ch-empreinte{ -webkit-mask-image:none !important; mask-image:none !important }

/* ══════════ SLOT 6 - BRELOQUES ══════════ */

/* ══ SLOT 6 - BRELOQUES (artworks du pack 2) ═══════════════════════════════
   Quatre emplacements, parce qu'une banniere large et un embleme carre ne se
   posent pas au meme endroit. La hauteur est calculee depuis le ratio mesure
   du fichier : aucune deformation possible. */
.ch-bijou{
  /* z-index 6 : au-dessus du champ (5) mais SOUS le texte (8). Une breloque
     decore, elle ne doit jamais passer devant un libelle de statistique. */
  position:absolute; z-index:6; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));
}
/* bandeau : suspendu en haut, entierement dans la carte */
.ch-bijou[data-pose="bandeau"]{
  /* Le faire deborder par le haut le faisait rogner par la face, qui masque ce
     qui sort. Il tient donc entierement a l'interieur, et c'est le contenu qui
     descend de la hauteur reellement rendue, mesuree apres la pose et passee en
     --bandeau-h : les ratios de banniere vont du simple au double, une valeur
     ecrite en dur conviendrait a une seule d'entre elles. */
  /* z-index 9 : au-dessus de l'encadrement, qui est a 7. Pose derriere, un
     fanion disparaissait purement et simplement des que la vieweuse activait
     un cadre. C'est la seule breloque concernee : les autres restent sous le
     texte, a 6, parce qu'elles decorent le corps de la carte. */
  z-index:9;
  top:18px; left:50%; width:30%;
  transform:translateX(-50%);
  height:calc(30% * 420 / 588 * var(--r));
}
/* Degagement sous ce qui occupe le haut de la carte : l'ornement du cadre, et
   la breloque bandeau. Les deux vivent dans la MEME bande, donc on prend le plus
   grand et non la somme, sinon le contenu descend deux fois pour un seul
   obstacle.

   CE QUI A CHANGE le 2026-09-05 : le degagement se mesurait a l'execution, en
   demandant qu'un coin traverse le milieu de la carte. Or un coin large ne
   traverse pas le milieu et barre quand meme le surtitre, qui court d'un bord a
   l'autre. Le test etait donc faux pour les sept cadres a la fois, et rendait
   zero partout. Il est remplace par une mesure du dessin, faite hors navigateur
   et posee en constante par cadre. */
.ch-inner{
  padding-top:max(34px, var(--cadre-haut, 0px));
  padding-bottom:max(28px, var(--cadre-bas, 0px));
}
/* --cadre-haut mesure : hauteur reellement peinte par l'ornement sur la bande
   du surtitre, relevee sur l'image a sa taille d'affichage et non sur la boite
   de l'element, qui est presque entierement transparente. Voir le commentaire
   ci-dessus. */
[data-cadre="volutes-riches"]{ --cadre-haut:49px; --cadre-bas:80px }
[data-cadre="volutes"]{ --cadre-haut:49px; --cadre-bas:79px }
[data-cadre="croisettes"]{ --cadre-haut:37px; --cadre-bas:31px }
[data-cadre="coins-legers"]{ --cadre-haut:47px; --cadre-bas:92px }
[data-cadre="fleurons"]{ --cadre-haut:46px; --cadre-bas:14px }
[data-cadre="ronces"]{ --cadre-haut:35px; --cadre-bas:35px }
[data-cadre="fleuron-simple"]{ --cadre-haut:60px; --cadre-bas:54px }
.ch-carte[data-bandeau="1"] .ch-inner{
  padding-top:max(34px, calc(var(--bandeau-h, 0px) + 12px), var(--cadre-haut, 0px));
}
/* fleuron : signe la bascule vers les statistiques */
/* Le fleuron flottait au milieu de la carte. Il rejoint le bas centre, au
   meme niveau que les armes, ou il se lit comme une signature. */
.ch-bijou[data-pose="fleuron"]{
  bottom:10px; left:50%; width:46%;
  transform:translateX(-50%);
  height:calc(46% * 420 / 588 * var(--r));
}
/* embleme : coin bas gauche, a l'oppose du sceau */
.ch-bijou[data-pose="embleme"]{
  bottom:16px; left:14px; width:31%;
  height:calc(31% * 420 / 588 * var(--r));
}
/* armes : posees en travers, sous le bloc de stats */
.ch-bijou[data-pose="armes"]{
  bottom:8px; left:50%; width:56%;
  transform:translateX(-50%) rotate(-3deg);
  height:calc(56% * 420 / 588 * var(--r));
}
.ch-carte[data-format="paysage"] .ch-bijou[data-pose="bandeau"]{ width:24%; top:12px }
.ch-carte[data-format="paysage"] .ch-bijou[data-pose="fleuron"]{ width:38%; bottom:96px }

.ch-breloque{position:absolute; z-index:9; pointer-events:none}

/* ruban de soie : tissage visible + pli d'ombre, plus une simple couleur plate */
.ch-breloque--ruban{
  top:-3px; left:44px; width:28px; height:80px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px),
    linear-gradient(100deg,#7d0f14 0%,#c1342c 32%,#e0574a 46%,#a4161a 62%,#6d0b12 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);
  box-shadow:2px 0 6px rgba(0,0,0,.45), inset -4px 0 7px rgba(0,0,0,.30);
}
.ch-breloque--ruban::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  clip-path:inherit;
}

/* signet : cousu dans la reliure, dépasse en bas et non plus sur le côté */
.ch-breloque--signet{
  bottom:-26px; left:78px; width:24px; height:96px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    linear-gradient(96deg,#3b4a2f 0%,#6b7c5e 34%,#8ea179 50%,#4a5a3a 66%,#2e3a24 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);
  box-shadow:2px 2px 7px rgba(0,0,0,.5), inset -4px 0 6px rgba(0,0,0,.28);
}

/* brûlure : posée exactement dans l'angle choisi, sans liseré clair résiduel */
/* le bord carbonisé mange vraiment le coin : il déborde d'un pixel sur l'extérieur */

/* coin corné : le papier se replie et montre son REVERS, avec l'ombre du pli
   et le vide sombre laissé derrière. Plus un triangle beige posé là. */
.ch-breloque--corne{ top:0; right:0; width:66px; height:66px }
.ch-breloque--corne .ch-corne-trou{
  position:absolute; inset:0;
  background:linear-gradient(225deg, rgba(10,6,4,.92) 0 50%, transparent 50%);
}
.ch-breloque--corne .ch-corne-pli{
  position:absolute; top:0; right:0; width:66px; height:66px;
  background:
    repeating-linear-gradient(48deg, rgba(120,95,62,.10) 0 2px, transparent 2px 6px),
    linear-gradient(224deg,#fbf3df 0%,#e6d6b2 38%,#c4ab7e 72%,#9c8459 100%);
  clip-path:polygon(100% 0,100% 100%,0 0);
  box-shadow:-3px 3px 7px rgba(0,0,0,.5);
}
/* fibre arrachée le long du pli */
.ch-breloque--corne .ch-corne-pli::after{
  content:''; position:absolute; inset:0; clip-path:inherit;
  background:linear-gradient(224deg, transparent 62%, rgba(90,66,40,.45) 88%, rgba(60,42,24,.7) 100%);
}

/* ══════════ VERSO ══════════ */
.ch-face--verso .ch-inner{padding:32px 34px 26px}
.ch-verso-titre{font-family:var(--font-title); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; opacity:.62; text-align:center}
.ch-grille{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:12px 0; font-size:.75rem}
.ch-grille div{display:flex; justify-content:space-between; gap:6px;
  border-bottom:1px dotted rgba(44,24,16,.28); padding-bottom:3px}
.ch-grille b{font-weight:600}
/* Les faits d'armes portaient un corps de .68rem, soit environ 11 px : c'est
   sous le seuil de lecture d'une fiche qui passe quelques secondes a l'ecran.
   Ils remontent a .82rem, avec un picto a 28 px et de l'air entre les lignes. */
.ch-exploits{display:flex; flex-direction:column; gap:9px; margin:12px 0}
.ch-exploit{display:flex; align-items:center; gap:10px; font-size:.82rem; line-height:1.25}
.ch-exploit img{width:28px; height:28px; object-fit:contain; flex:0 0 auto}
.ch-cachet{margin-top:auto; text-align:center; font-style:italic; font-size:.66rem; opacity:.62; padding-top:8px}

/* ══════════ PANNEAU ══════════ */
.atelier{
  flex:1 1 500px; max-width:660px;
  /* Le panneau reprend le bordeaux des encarts du site plutot qu'un violet
     invente pour le prototype : c'est ce qui lui permettra de se greffer sur
     l'Entrecarte sans retouche. */
  background:linear-gradient(160deg, var(--ec-panneau-h), var(--ec-panneau-b));
  border:1px solid rgba(115,87,81,.45); border-radius:8px;
  padding:22px 24px 26px; box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.atelier h2{font-family:var(--font-title); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--glow); margin:0 0 4px}
.atelier .hint{font-size:.8rem; color:#8a7968; font-style:italic; margin:0 0 16px}

.barre-outils{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
.mode-test,.toggle-format{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 12px; border-radius:4px; font-size:.82rem; color:#c9b89a;
  background:rgba(201,168,76,.09); border:1px solid rgba(201,168,76,.30);
}
.mode-test input,.toggle-format input{accent-color:var(--glow); width:15px; height:15px; cursor:pointer}
.mode-test em{font-size:.75rem; color:#7a6a60; font-style:italic}

/* Case discrete : la version precedente reprenait le style du bloc "mode test"
   et pesait visuellement autant que les cinq encres reunies. */
.opt-ligne{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  margin-top:7px; font-size:.78rem; color:#a89684}
.opt-ligne input{accent-color:var(--glow); width:13px; height:13px; cursor:pointer}
.opt-ligne:hover span{color:#c9b89a}

.slot{margin-bottom:16px}
.slot > label{display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-title); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:#c9b89a; margin-bottom:7px}
.slot > label em{font-family:var(--font-body); font-style:italic; text-transform:none;
  letter-spacing:0; font-size:.76rem; opacity:.5}

.choix{display:flex; flex-wrap:wrap; gap:6px}
.choix button{
  font-family:var(--font-body); font-size:.79rem; padding:5px 11px; border-radius:3px;
  cursor:pointer; background:rgba(167,138,127,.08); color:#c9b89a;
  border:1px solid rgba(167,138,127,.26); transition:all .16s ease; position:relative;
}
.choix button:hover{background:rgba(201,168,76,.16); border-color:rgba(201,168,76,.5)}
.choix button[aria-pressed="true"]{
  background:linear-gradient(#c9a84c,#a1802f); color:#241703; font-weight:600; border-color:#e0c169}
.choix button.lock{opacity:.42; cursor:not-allowed; filter:grayscale(1)}
.choix button.lock::after{
  content:'🔒 ' attr(data-cond);
  position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
  white-space:nowrap; font-size:.68rem; padding:4px 8px; border-radius:3px;
  background:#2c1810; color:#e8d9b5; border:1px solid rgba(201,168,76,.4);
  opacity:0; pointer-events:none; transition:opacity .15s; z-index:20;
}
.choix button.lock:hover::after{opacity:1}

.rar{display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle}
.rar-commun{background:#8a8a8a} .rar-rare{background:#4a7cb5}
.rar-epique{background:#9b59b6} .rar-legend{background:#c9a84c} .rar-mythe{background:#d4384b}

.rangee{display:flex; gap:18px; flex-wrap:wrap}
.rangee .slot{flex:1 1 220px}

.empreintes{display:grid; grid-template-columns:repeat(8,1fr); gap:5px}
.empreintes button{aspect-ratio:1; padding:0; display:grid; place-items:center; background:rgba(167,138,127,.07)}
.empreintes button i{width:76%; height:76%; display:block; background:#c9b89a;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center}
.empreintes button[aria-pressed="true"] i{background:#241703}


/* ── Selecteur d'empreintes : 150 icones, filtre par famille ────────────── */
.familles{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px}
.familles button{
  font-family:var(--font-body); font-size:.74rem; padding:4px 9px; border-radius:3px;
  cursor:pointer; background:rgba(167,138,127,.08); color:#a89684;
  border:1px solid rgba(167,138,127,.22); transition:all .14s ease;
}
.familles button:hover{background:rgba(201,168,76,.14); color:#c9b89a}
.familles button[aria-pressed="true"]{
  background:linear-gradient(#c9a84c,#a1802f); color:#241703; font-weight:600; border-color:#e0c169}
.familles button i{font-style:normal; opacity:.55; margin-left:4px; font-size:.9em}

.empreintes-recherche{
  width:100%; margin-bottom:8px; padding:6px 10px; border-radius:3px;
  font-family:var(--font-body); font-size:.82rem;
  background:rgba(0,0,0,.28); color:#e7d7c1; border:1px solid rgba(167,138,127,.26);
}
.empreintes-recherche::placeholder{color:#7a6a60; font-style:italic}

/* la grille defile : 150 icones ne tiennent pas dans le panneau */
.empreintes{
  display:grid; grid-template-columns:repeat(9,1fr); gap:4px;
  max-height:270px; overflow-y:auto; padding-right:4px;
}
.empreintes::-webkit-scrollbar{width:8px}
.empreintes::-webkit-scrollbar-thumb{background:rgba(167,138,127,.3); border-radius:4px}
.empreintes button{aspect-ratio:1; padding:0; display:grid; place-items:center;
  background:rgba(167,138,127,.07); position:relative}
.empreintes button i{width:80%; height:80%; display:block; background:#c9b89a;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center}
.empreintes button[aria-pressed="true"]{
  background:linear-gradient(#c9a84c,#a1802f); border-color:#e0c169}
.empreintes button[aria-pressed="true"] i{background:#241703}
.empreintes-vide{grid-column:1/-1; text-align:center; padding:18px 0;
  font-size:.8rem; color:#7a6a60; font-style:italic}
.empreintes-compte{font-size:.72rem; color:#7a6a60; font-style:italic; margin-top:5px}

.cires{display:flex; gap:8px; flex-wrap:wrap}
.cires button{width:34px; height:34px; padding:0; border-radius:4px}

.pousse-row{display:flex; align-items:center; gap:12px}
.pousse-row input{flex:1; accent-color:var(--glow)}
.pousse-row output{font-size:.78rem; color:#8a7968; min-width:120px}

.actions{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap}
.actions button{
  font-family:var(--font-title); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 15px; border-radius:3px; cursor:pointer;
  background:linear-gradient(#8b6340,#5a3a20); color:#f5ead0; border:1px solid rgba(201,168,76,.4);
}
.actions button:hover{background:linear-gradient(#a1764c,#6b4226)}
.actions button.ghost{background:transparent; color:#8a7968; border-color:rgba(167,138,127,.25)}

.note{margin-top:16px; font-size:.76rem; color:#7a6a60; line-height:1.55; font-style:italic;
  border-left:2px solid rgba(201,168,76,.3); padding-left:11px}

/* séquence !fiche */
.ch-scene.jouer .ch-carte{animation:ch-arrivee 1.3s cubic-bezier(.22,.9,.3,1) both}
@keyframes ch-arrivee{
  0%{transform:translate(-520px,150px) rotate(-16deg) scale(.55); opacity:0}
  45%{transform:translate(0,14px) rotate(2.5deg) scale(1.03); opacity:1}
  62%{transform:translate(0,0) rotate(-1deg) scale(.99)}
  100%{transform:none; opacity:1}
}
.ch-scene.jouer .ch-sceau{animation:ch-bris 1.1s ease .95s both}
@keyframes ch-bris{
  0%{transform:scale(1.35); opacity:0}
  40%{transform:scale(1.12); opacity:1}
  60%{transform:scale(1.2) rotate(-4deg)}
  100%{transform:none; opacity:1}
}
.ch-scene.jouer .ch-voile,.ch-scene.jouer .ch-inner{animation:ch-deroule .8s ease .75s both}
@keyframes ch-deroule{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}

/* ══════════ MODULE BUTIN ══════════
   Le coffre dit de quoi il s'agit, l'icone montre l'objet, l'anneau colore
   donne la rarete. Les couleurs viennent de la palette deja en service sur le
   site (`profil.css`) : en inventer d'autres aurait donne deux ors differents
   pour un meme objet legendaire, dans l'inventaire et sur la carte. */
/* `max-content` : le bloc fait la largeur de son texte. Il faisait la largeur
   qu'on lui imposait, et « Dague pas suspecte » flottait au milieu d'un pave
   deux fois trop large. Le `min-width` evite qu'un nom d'un seul mot ne donne
   une vignette ridicule autour de l'anneau de rarete. */
.ch-butin{
  border-radius:4px; overflow:hidden;
  border:1px solid rgba(107,66,38,.28); background:rgba(107,66,38,.10);
  width:max-content; max-width:100%; min-width:6.5em; margin-inline:auto;
}
.ch-butin-tag{
  display:flex; align-items:center; justify-content:center; gap:.4em;
  padding:.4em .7em .3em;
  font-size:.52em; letter-spacing:.05em; text-transform:uppercase; opacity:.7;
}
.ch-butin-tag img{ width:1.15em; height:1.15em; object-fit:contain; opacity:.85 }
/* En pile et non en ligne : etire en largeur, la disposition horizontale ne
   donnait qu'une icone coincee a gauche d'un grand vide, et serree elle faisait
   deborder le nom. En pile, l'objet est au centre et son nom dessous, comme un
   trophee : ca tient a toutes les largeurs. */
.ch-butin-corps{
  display:flex; flex-direction:column; align-items:center; gap:.45em;
  padding:.1em .6em .6em; text-align:center;
}
/* LE CADRE ORNEMENTAL. C'etait un simple anneau colore ; depuis le
   2026-09-23 l'objet est serti dans un cadre dessine, choisi par la
   streameuse. Sa fenetre fait 75,7 % de sa largeur, mesuree sur l'alpha de
   l'image et non a l'oeil : l'objet se loge a 70 % pour que l'anneau de
   rarete tienne dedans.
   La rarete reste lisible, mais elle est passee SUR l'objet : une teinte posee
   sur le cadre aurait mange son or, qui fait tout son interet. */
.ch-butin-cadre{
  position:relative; flex:0 0 auto; display:grid; place-items:center;
  width:4.1em; height:4.1em; border:0; border-radius:0; box-shadow:none;
  background:url('../carte/cadre-cercle.webp') center/cover no-repeat;
}
/* Le disque et l'anneau vivent sur l'IMAGE, pas sur un pseudo-element ni sur
   une ombre portee : l'export sur canevas ne dessine ni l'un ni l'autre, et
   l'ecran et la carte exportee doivent montrer la meme chose. */
.ch-butin-cadre img{
  width:66%; height:66%; object-fit:contain; border-radius:50%;
  border:.1em solid var(--rar, #8a8a8a);
  background:rgba(255,255,255,.35);
}
.ch-butin-texte{ max-width:100%; display:flex; flex-direction:column;
  align-items:center; line-height:1.2 }
/* Le nom se replie sur deux lignes plutot que d'etre coupe : dans un module
   etroit, « Dague pas suspecte » vaut mieux que « Dague pas s... ». */
.ch-butin-nom{
  font-size:.78em; font-weight:600; max-width:100%;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; overflow-wrap:anywhere;
}
/* `--txt-mod` d'abord : quand une couleur de texte est choisie pour le module,
   le mot de rarete la suit. Sans cela il restait seul dans sa teinte de rarete,
   illisible sur un fond sombre, alors meme qu'on venait de regler la couleur.
   L'anneau autour de l'objet garde `--rar` et continue de dire la rarete. */
.ch-butin-rarete{
  font-size:.62em; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt-mod, var(--rar, #8a8a8a)); font-weight:600;
}
/* ══════════ LE LIEN ══════════
   Meme grammaire que le butin, autre sujet : un cartouche, un rond, un nom. Les
   coeurs viennent du profil, ou ils comptent deja les paliers d'affinite ; on
   porte ce vocabulaire au lieu d'en inventer un second. */
.ch-lien{
  border-radius:4px; overflow:hidden;
  border:1px solid rgba(107,66,38,.28); background:rgba(107,66,38,.10);
  width:max-content; max-width:100%; min-width:7em; margin-inline:auto;
}
.ch-lien-tag{
  display:block; padding:.4em .7em .3em; text-align:center;
  font-size:.52em; letter-spacing:.05em; text-transform:uppercase; opacity:.7;
}
.ch-lien-corps{
  display:flex; flex-direction:column; align-items:center; gap:.3em;
  padding:.1em .7em .6em; text-align:center;
}
/* Meme cadre que le butin : les deux modules montrent un rond dans un carre,
   c'est le meme objet visuel et il n'y a aucune raison qu'ils divergent. */
.ch-lien-portrait{
  width:4.1em; height:4.1em; flex:0 0 auto; display:grid; place-items:center;
  border:0; border-radius:0; box-shadow:none;
  background:url('../carte/cadre-cercle.webp') center/cover no-repeat;
}
.ch-lien-portrait img{
  width:66%; height:66%; object-fit:cover; display:block; border-radius:50%;
  border:.1em solid var(--rar, #8a8a8a);
  background:rgba(255,255,255,.35);
}
.ch-lien-nom{
  font-size:.78em; font-weight:600; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ch-lien-coeurs{ display:flex; gap:.12em; font-size:.62em; line-height:1 }
.ch-lien-coeur{ opacity:.35 }
/* Meme raison que le mot de rarete : le palier reste lisible au NOMBRE de
   coeurs pleins, la teinte n'est pas la seule porteuse de l'information. */
.ch-lien-coeur.plein{ opacity:1; color:var(--txt-mod, var(--rar, #8a8a8a)) }
/* Les paliers de lien partagent la palette des raretes : c'est la meme echelle
   sur le site, il n'y a pas de raison d'en avoir deux. */
.ch-lien[data-palier="common"]{ --rar:#8a8a8a }
.ch-lien[data-palier="uncommon"]{ --rar:#4a8c5c }
.ch-lien[data-palier="rare"]{ --rar:#4a7cb5 }
.ch-lien[data-palier="epic"]{ --rar:#9b59b6 }
.ch-lien[data-palier="legendary"]{ --rar:#c9a84c }
.ch-lien[data-palier="cursed"]{ --rar:#a4161a }

.ch-butin-vide{ padding:.25em .6em .55em; font-size:.7em; font-style:italic;
  opacity:.6; text-align:center }

/* Les neuf raretes, reprises de `site-entrecarte/assets/css/profil.css`. */
.ch-butin[data-rarete="common"]{ --rar:#8a8a8a }
.ch-butin[data-rarete="uncommon"]{ --rar:#4a8c5c }
.ch-butin[data-rarete="rare"]{ --rar:#4a7cb5 }
.ch-butin[data-rarete="epic"]{ --rar:#9b59b6 }
.ch-butin[data-rarete="legendary"]{ --rar:#c9a84c }
.ch-butin[data-rarete="lore"]{ --rar:#2d2929 }
.ch-butin[data-rarete="cursed"]{ --rar:#a4161a }
.ch-butin[data-rarete="sealed"]{ --rar:#6a785f }
.ch-butin[data-rarete="altered"]{ --rar:#1e3a5f }
/* Les deux raretes rares s'annoncent aussi par un halo, comme dans l'inventaire. */
/* Le halo des deux plus hautes raretes suit l'objet, maintenant que le cadre
   porte l'ornement. */
.ch-butin[data-rarete="legendary"] .ch-butin-cadre img{ box-shadow:0 0 7px rgba(201,168,76,.45) }
.ch-butin[data-rarete="epic"] .ch-butin-cadre img{ box-shadow:0 0 7px rgba(155,89,182,.4) }