/* Loot Fracture — habillage « taverne sombre » (0.5.1)
   Pierre et bois sombres, cadres dorés, parchemin, lueur violette de la Fracture. */
@font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url('../fonts/cinzel-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 900; font-display: swap; src: url('../fonts/cinzel-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel Decorative'; font-weight: 900; font-display: swap; src: url('../fonts/cinzel-decorative-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-display: swap; src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-display: swap; src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }

:root {
  --nuit: #0c090b;
  --pierre: #1e1719;
  --or: #e2b552;
  --or-clair: #ffe7a3;
  --or-sombre: #8a6424;
  --encre-p: #2b1d12;
  --encre: #f3e9d6;
  --sourdine: #b7a58a;
  --faille: #a87bff;
  --faille2: #4fe3d4;
  --sang: #e0483f;
  --bon: #7fe0a0;
  --vert-jouable: #6dff9e;
  --display: 'Cinzel', Georgia, serif;
  --logo: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --texte: 'Source Sans 3', system-ui, sans-serif;
  /* Grain de pierre (bruit SVG) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .36 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --cadre: 0 0 0 1px #0a0607, 0 0 0 3px var(--or-sombre), 0 0 0 4px #0a0607, 0 10px 30px rgba(0, 0, 0, .55);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--nuit);
  background-image: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(168, 123, 255, .12), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(226, 181, 82, .08), transparent 60%), var(--grain);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; margin: 0; letter-spacing: .02em; }
h2, h3 { color: var(--or-clair); text-shadow: 0 2px 0 #000, 0 0 18px rgba(226, 181, 82, .25); }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--faille2); outline-offset: 3px; }
.discret { color: var(--sourdine); font-size: 13px; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; min-height: 42px; padding: 8px 16px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .03em; color: var(--encre);
  background: linear-gradient(#3e3033, #241b1d); border: 1px solid #000; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .18), 0 0 0 2px var(--or-sombre), 0 3px 8px rgba(0, 0, 0, .5);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .25), 0 0 0 2px var(--or), 0 0 16px rgba(226, 181, 82, .3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-principal {
  color: #2a1606; text-shadow: 0 1px 0 rgba(255, 245, 210, .6);
  background: linear-gradient(#ffe089, #e9a93b 55%, #b9741c);
  box-shadow: inset 0 1px 0 #fff3c4, inset 0 -2px 0 rgba(90, 40, 0, .4), 0 0 0 2px #5a3410, 0 0 18px rgba(255, 196, 80, .35), 0 4px 10px rgba(0, 0, 0, .5);
}
.btn-principal:hover:not(:disabled) { box-shadow: inset 0 1px 0 #fff3c4, 0 0 0 2px #7a4a16, 0 0 26px rgba(255, 200, 90, .6); }
.btn-discret { background: transparent; box-shadow: none; border-color: transparent; color: var(--sourdine); }
.btn-discret:hover:not(:disabled) { color: var(--or-clair); box-shadow: none; }
.btn-mini { min-height: 30px; padding: 3px 10px; font-size: 12px; }
.btn-grand { min-height: 54px; padding: 12px 28px; font-size: 18px; border-radius: 14px; }

select, input {
  background: #120d0e; border: 1px solid var(--or-sombre); border-radius: 8px; padding: 8px 10px; min-height: 40px; color: var(--encre);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
select:focus, input:focus { border-color: var(--or); }
input[type="checkbox"] { min-height: 0; accent-color: var(--or); }

/* ---------- Panneaux ornés ---------- */
.config, .action, .fiche, .journal-panneau, .fenetre, .at-paquet, .ca-chap, .ed-paquet, .progression, .carte-joueur-config {
  background: linear-gradient(180deg, rgba(255, 220, 160, .05), transparent 30%), linear-gradient(#2a2022, #1a1315);
  border-radius: 14px; box-shadow: var(--cadre);
}

/* ---------- Page titre ---------- */
#titre { min-height: 100vh; overflow-x: hidden; }
.heros { position: relative; min-height: min(100vh, 860px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px; padding: 48px max(24px, 6vw) 64px; overflow: hidden; isolation: isolate; }
.heros-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.heros-fond .lueur { position: absolute; inset: -20%; background: radial-gradient(ellipse 40% 50% at 70% 50%, rgba(168, 123, 255, .28), transparent 70%), radial-gradient(ellipse 35% 40% at 20% 80%, rgba(226, 120, 60, .16), transparent 70%); }
.heros-fond .faille-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.faille-trace { fill: none; stroke: var(--faille); stroke-width: 3; filter: drop-shadow(0 0 6px var(--faille)) drop-shadow(0 0 18px var(--faille)); animation: pulse-faille 4s ease-in-out infinite; }
.faille-trace.fine { stroke: #e9dcff; stroke-width: 1.2; }
@keyframes pulse-faille { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.braise { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffb35c; box-shadow: 0 0 8px 2px rgba(255, 140, 50, .7); animation: braise linear infinite; opacity: 0; }
.braise.violette { background: #d6c2ff; box-shadow: 0 0 8px 2px rgba(168, 123, 255, .8); }
@keyframes braise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx, 30px), -105vh); opacity: 0; } }
.heros-texte { max-width: 620px; }
.heros-sur { font-family: var(--display); font-weight: 700; color: var(--faille2); letter-spacing: .08em; margin: 0 0 6px; font-size: 14px; }
.logo { font-family: var(--logo); font-weight: 900; line-height: .9; font-size: clamp(48px, 6.3vw, 100px); margin: 0 0 18px; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff6d6 0%, #ffd77a 38%, #c98a2c 62%, #7a4a14 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2a1406) drop-shadow(0 0 24px rgba(255, 190, 80, .35)); }
.logo span { display: block; position: relative; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.heros-accroche { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: #e8dcc4; max-width: 34em; margin: 0 0 26px; }
.heros-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.heros-scene { position: relative; height: min(70vh, 600px); min-height: 380px; perspective: 1400px; }
.mini-plateau { position: absolute; left: 50%; top: 44%; width: min(520px, 90%); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-38deg);
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .7)); animation: flotte 9s ease-in-out infinite; }
.mini-plateau svg { width: 100%; height: 100%; display: block; }
@keyframes flotte { 0%, 100% { transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-38deg); } 50% { transform: translate(-50%, -53%) rotateX(54deg) rotateZ(-34deg); } }
.eventail { position: absolute; right: 2%; bottom: 0; width: min(420px, 80%); height: 280px; }
.eventail .carte { position: absolute; bottom: 0; width: 150px; transform-origin: 50% 140%; transition: transform .35s cubic-bezier(.2, .8, .2, 1.2); cursor: default; }
.eventail .carte:nth-child(1) { left: 6%; transform: rotate(-16deg); }
.eventail .carte:nth-child(2) { left: 32%; transform: rotate(-2deg) translateY(-18px); z-index: 2; }
.eventail .carte:nth-child(3) { left: 58%; transform: rotate(13deg); }
.eventail:hover .carte:nth-child(1) { transform: rotate(-22deg) translateX(-14px); }
.eventail:hover .carte:nth-child(3) { transform: rotate(19deg) translateX(14px); }
.eventail:hover .carte:nth-child(2) { transform: rotate(-2deg) translateY(-34px); }

.titre-section { padding: 56px max(20px, 6vw); max-width: 1240px; margin: 0 auto; }
.titre-section > h2 { font-size: clamp(28px, 3.4vw, 40px); text-align: center; margin-bottom: 8px; }
.titre-section > .intro { text-align: center; color: var(--sourdine); max-width: 46em; margin: 0 auto 36px; font-size: 17px; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: etape; }
.etape { position: relative; text-align: center; padding: 28px 18px 22px; background: linear-gradient(#2a2022, #191214); border-radius: 16px; box-shadow: var(--cadre); counter-increment: etape; }
.etape::before { content: counter(etape); position: absolute; top: -17px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; color: #2a1606; background: radial-gradient(circle at 35% 30%, #fff1b8, #e3a640 60%, #8a5a18); box-shadow: 0 0 0 2px #2a1406, 0 0 12px rgba(255, 190, 80, .5); }
.etape .sigil { width: 64px; height: 64px; color: var(--or); filter: drop-shadow(0 0 10px rgba(226, 181, 82, .35)); margin-bottom: 8px; }
.etape h3 { font-size: 19px; margin-bottom: 6px; }
.etape p { margin: 0; color: #d9ccb4; font-size: 15px; }
.victoires { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.victoire-bloc { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 14px; background: linear-gradient(90deg, rgba(168, 123, 255, .14), transparent), #1a1315; box-shadow: var(--cadre); }
.victoire-bloc .sigil { flex: 0 0 52px; width: 52px; height: 52px; }
.victoire-bloc h3 { font-size: 18px; }
.victoire-bloc p { margin: 2px 0 0; color: #d9ccb4; }
.mondes-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.mondes-grille .monde { grid-column: span 2; }
.monde { position: relative; overflow: hidden; border-radius: 16px; padding: 22px; min-height: 200px; box-shadow: var(--cadre); background: var(--m-fond); }
.monde .sigil { position: absolute; right: -18px; bottom: -18px; width: 150px; height: 150px; opacity: .22; color: #fff; }
.monde h3 { font-size: 24px; }
.monde p { color: #efe3cc; max-width: 26em; position: relative; }
.vedettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: end; }
.vedettes .carte { cursor: default; }
.vedettes .carte:hover { transform: translateY(-8px) rotate(-1deg); }
.titre-fin { text-align: center; padding: 30px 20px 60px; }
.titre-fin .heros-cta { justify-content: center; }
.pied-titre { text-align: center; color: var(--sourdine); font-size: 13px; padding: 0 20px 30px; }
@media (max-width: 980px) {
  .heros { grid-template-columns: 1fr; padding-top: 32px; min-height: 0; }
  .heros-scene { height: 400px; min-height: 0; }
  .etapes { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .vedettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vedettes .carte:nth-child(n+4) { display: none; }
}
@media (max-width: 620px) {
  .heros { padding: 24px 16px 40px; }
  .heros-scene { height: 300px; }
  .eventail { width: 100%; right: 0; height: 210px; }
  .eventail .carte { width: 112px; }
  .etapes, .victoires, .mondes-grille { grid-template-columns: 1fr; }
  .vedettes { grid-template-columns: 1fr 1fr; }
  .vedettes .carte:nth-child(n+3) { display: none; }
  .btn-grand { padding: 10px 20px; font-size: 16px; }
}

/* ---------- Nouvelle partie ---------- */
#accueil { min-height: 100%; display: flex; justify-content: center; padding: 20px 16px 40px; }
.accueil-cadre { width: 100%; max-width: 700px; }
.accueil-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.titre-jeu { font-family: var(--logo); font-size: clamp(34px, 7vw, 54px); line-height: 1; background: linear-gradient(#fff2c8, #e0a542 60%, #8a5a18); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1406); }
.sous-titre { color: var(--sourdine); margin: 6px 0 20px; font-size: 17px; }
.bloc-continuer, .bloc-atelier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.config { padding: 20px; }
.config h2 { font-size: 26px; margin-bottom: 14px; }
.ligne-format { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.ligne-format label { font-family: var(--display); font-weight: 700; color: var(--or); font-size: 13px; }
.liste-joueurs { display: flex; flex-direction: column; gap: 12px; }
.carte-joueur-config { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 12px; }
.carte-joueur-config .pastille { width: 14px; border-radius: 7px; }
.cjc-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cjc-champs label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--sourdine); }
.cjc-champs .large { grid-column: 1 / -1; }
.cjc-bas { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cjc-resume { font-size: 13px; color: var(--sourdine); }
.config-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.avance { margin-top: 14px; color: var(--sourdine); }
.avance summary { cursor: pointer; }
.avance label { display: block; margin: 10px 0 4px; font-size: 13px; }
.avance .btn { margin-top: 10px; }
.pied { color: var(--sourdine); font-size: 13px; margin-top: 18px; }
@media (max-width: 520px) { .cjc-champs { grid-template-columns: 1fr; } }

/* ---------- Cartes (portrait, façon jeu de cartes) ---------- */
.carte {
  --rar: #b9b2a4; --cadre-c: var(--or-sombre);
  /* 2.3 : fond selon le type de carte (créature brun, sort violet, objet acier, dé sarcelle) */
  --fond1: #4a3523; --fond2: #2a1b12; --fond3: #1c120c; --nom1: #6b4527; --nom2: #3f2614;
  position: relative; display: grid; grid-template-rows: 46% auto 1fr auto; width: 100%; aspect-ratio: 5 / 7; padding: 0; margin: 0;
  container-type: inline-size; text-align: center; cursor: default; color: var(--encre); overflow: visible;
  background: linear-gradient(170deg, var(--fond1), var(--fond2) 55%, var(--fond3));
  border: 0; border-radius: 9% / 6.5%;
  box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--cadre-c), inset 0 0 0 5px #120a06, 0 6px 14px rgba(0, 0, 0, .6);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1.2), box-shadow .18s, filter .18s;
}
.carte.r-R { --rar: #4ea3ff; } .carte.r-E { --rar: #c27bff; } .carte.r-L { --rar: #ffab36; } .carte.r-M { --rar: #ff4f7a; } .carte.r-S { --rar: #ffe08a; --cadre-c: #d9a640; }
.carte.r-L, .carte.r-M { --cadre-c: #c48a2a; }
.c-art { position: relative; margin: 6% 6% 0; border-radius: 8% / 12%; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--el) 80%, #fff 18%), color-mix(in srgb, var(--el) 70%, #000 30%) 55%, color-mix(in srgb, var(--el) 30%, #000 70%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 -10px 18px rgba(0, 0, 0, .45); }
.carte.t-sort { --fond1: #4b3170; --fond2: #2a1a42; --fond3: #170e26; --nom1: #6a4596; --nom2: #3a2459; }
.carte.t-objet { --fond1: #3d4d5e; --fond2: #222c38; --fond3: #121820; --nom1: #56687c; --nom2: #2e3b4a; }
.carte.t-de { --fond1: #1f5a5a; --fond2: #123636; --fond3: #0a1f20; --nom1: #2e7774; --nom2: #174443; }
.carte.t-creature .c-art { border-radius: 50% / 50%; margin: 5% 10% 0; }
.carte.t-sort .c-art { border-radius: 40% 40% 10% 10% / 50% 50% 10% 10%; }
.c-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-cout { position: absolute; top: -4%; left: -5%; width: 25cqw; height: 25cqw; display: grid; place-items: center; z-index: 3;
  font-family: var(--display); font-weight: 900; font-size: 11cqw; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 0 2px #000;
  background: radial-gradient(circle at 35% 30%, #b8e2ff, #3b8be0 45%, #123d86); border-radius: 50%;
  box-shadow: 0 0 0 1.5px #0b1630, 0 0 0 3px var(--or), 0 2px 6px rgba(0, 0, 0, .6); }
.c-nom { position: relative; z-index: 2; margin: -6% 3% 0; padding: 1.8cqw 3cqw; min-height: 13cqw; display: grid; place-items: center;
  background: linear-gradient(var(--nom1), var(--nom2)); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .3), 0 0 0 1px #120a06, 0 0 0 2px var(--or-sombre), 0 3px 5px rgba(0, 0, 0, .55); }
.c-nom span { font-family: var(--display); font-weight: 700; font-size: 8.4cqw; line-height: 1.05; color: #fbeccb; text-shadow: 0 1px 0 #000; }
.c-texte { margin: 3cqw 6cqw 0; padding: 2.5cqw 3.5cqw; border-radius: 4px; overflow: hidden;
  font-size: 7.4cqw; line-height: 1.22; color: var(--encre-p);
  background: linear-gradient(#efe1bf, #d9c496); box-shadow: inset 0 0 6px rgba(90, 60, 20, .35);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; align-self: start; }
/* 3.2.0 : textes longs (plusieurs capacités, invocation restrictive) : police plus petite, plus de lignes */
.c-texte.tx-long { font-size: 6.4cqw; line-height: 1.16; -webkit-line-clamp: 6; }
.c-texte.tx-tres-long { font-size: 5.7cqw; line-height: 1.12; -webkit-line-clamp: 7; }
.c-pied { font-size: 5.6cqw; color: #c9b48a; padding: 1.5cqw 18cqw 4.5cqw; line-height: 1.1; }
.c-atk, .c-pv { position: absolute; bottom: -3%; width: 22cqw; height: 22cqw; display: grid; place-items: center; z-index: 3;
  font-family: var(--display); font-weight: 900; font-size: 9.5cqw; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.c-atk { left: -4%; background: radial-gradient(circle at 35% 30%, #ffe08a, #e0a23a 50%, #8a5a12); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.c-pv { right: -4%; background: radial-gradient(circle at 35% 30%, #ffb3a8, #e0483f 50%, #7a1612); border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%; }
.c-rar { position: absolute; left: 50%; top: 3.5%; width: 7cqw; height: 7cqw; transform: translateX(-50%) rotate(45deg); z-index: 3;
  background: var(--rar); box-shadow: 0 0 0 1px #000, 0 0 6px var(--rar); }
.carte.r-C .c-rar { opacity: .75; }
.carte.jouable { cursor: pointer; box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--vert-jouable), inset 0 0 0 5px #120a06, 0 0 14px 3px rgba(109, 255, 158, .55), 0 6px 14px rgba(0, 0, 0, .6); }
.carte.jouable:hover { transform: translateY(-6px) scale(1.04); z-index: 5; }
.carte.choisie { transform: translateY(-8px) scale(1.05); box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--or-clair), inset 0 0 0 5px #120a06, 0 0 22px 6px rgba(255, 210, 120, .7); z-index: 6; }
.carte.grise { filter: grayscale(.65) brightness(.62); }
button.carte:focus-visible { outline: 3px solid var(--faille2); outline-offset: 3px; }
.carte-loupe { width: min(280px, 72vw); margin: 4px auto 10px; }

/* ---------- Jeu (0.6.1 : joueurs à gauche, plateau au centre, actions et journal à droite, main en bas) ---------- */
#jeu { --lc: clamp(100px, 8.2vw, 134px); --peek: calc(var(--lc) * .8); --col-g: 250px; --col-d: 340px;
  height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(168, 123, 255, .10), transparent 70%); }
#jeu[hidden] { display: none; }
.barre { display: flex; align-items: center; gap: 14px; padding: 6px 14px; background: linear-gradient(#24191b, #140e10); box-shadow: 0 1px 0 var(--or-sombre), 0 4px 14px rgba(0, 0, 0, .5); position: relative; z-index: 4; }
.infos-partie { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--sourdine); align-items: center; flex: 1; }
.infos-partie b { color: var(--or-clair); font-family: var(--display); }
.infos-partie .ms { color: #ff8a80; font-weight: 700; animation: pulse-faille 1.6s infinite; }
.progres-tour { display: inline-block; width: 90px; height: 5px; border-radius: 3px; background: #0c0809; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3a2a22; vertical-align: middle; margin-left: 8px; overflow: hidden; }
.progres-tour i { display: block; height: 100%; background: linear-gradient(90deg, var(--or-sombre), var(--or-clair)); transition: width .6s; }
.jeu-grille { display: grid; grid-template-columns: var(--col-g) minmax(0, 1fr) var(--col-d); gap: 14px; padding: 12px 14px calc(var(--peek) + 10px); min-height: 0; }
.zone-joueurs, .zone-cote { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--or-sombre) transparent; }
.zone-plateau { position: relative; min-height: 0; min-width: 0; display: grid; place-items: center; }
#plateau { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
#plateau.secousse { animation: secousse .4s; }
.zone-cote { display: flex; flex-direction: column; gap: 12px; }

/* Bannière de tour */
.banniere-tour { position: absolute; left: 0; right: 0; top: 42%; pointer-events: none; opacity: 0; z-index: 3; text-align: center; }
.banniere-tour.joue { animation: banniere 1.5s cubic-bezier(.2, .8, .2, 1) forwards; }
.banniere-tour span { display: inline-block; padding: 12px 64px; font-family: var(--logo); font-weight: 900; font-size: clamp(22px, 3vw, 40px); color: #fff4d6;
  text-shadow: 0 2px 0 #000, 0 0 18px var(--c); letter-spacing: .02em;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 45%, #120b0d) 18%, color-mix(in srgb, var(--c) 45%, #120b0d) 82%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--c) 70%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--c) 70%, #fff); }
.banniere-tour small { display: block; font-family: var(--display); font-size: 14px; color: var(--sourdine); margin-top: 4px; text-shadow: 0 1px 0 #000; }
@keyframes banniere { 0% { opacity: 0; transform: translateX(-30%) skewX(-12deg); } 18% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translateX(2%); } 100% { opacity: 0; transform: translateX(30%) skewX(12deg); } }

/* Main (en bas, en éventail ; survol = carte entière) */
.zone-main { position: fixed; left: 0; right: 0; bottom: 0; height: var(--peek); z-index: 20; pointer-events: none; }
.zone-main::before { content: ''; position: absolute; inset: -30px 0 0; background: linear-gradient(transparent, rgba(8, 5, 7, .75)); pointer-events: none; }
.main { position: absolute; left: calc(var(--col-g) + 28px); right: calc(var(--col-d) + 28px); bottom: 0; height: var(--peek); display: flex; justify-content: center; align-items: flex-end; }
.emplacement { position: relative; flex: 0 0 var(--lc); width: var(--lc); margin: 0 var(--chev, calc(var(--lc) * -.16)); pointer-events: auto;
  transform-origin: 50% 100%; transform: translateY(calc(var(--lc) * 1.4 - var(--peek) + 8px + var(--dy, 0px))) rotate(var(--rot, 0deg));
  transition: transform .28s cubic-bezier(.2, .8, .2, 1.15), filter .2s; z-index: var(--z, 1); }
.emplacement .carte, .emplacement .carte:hover, .emplacement .carte.choisie { transform: none; }
@media (hover: hover) { .emplacement:hover { transform: translateY(-16px) scale(1.55); z-index: 40; } }
.emplacement.levee { transform: translateY(-16px) scale(1.55); z-index: 40; }
.emplacement.choisie { transform: translateY(calc(var(--lc) * 1.4 - var(--peek) - 40px)) rotate(0deg); z-index: 30; }
.emplacement.pioche { animation: pioche .7s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes pioche { from { transform: translate(40vw, 30px) rotate(25deg) scale(.6); opacity: 0; } }
.main-vide { align-self: center; pointer-events: auto; color: var(--sourdine); font-size: 13px; font-style: italic; padding: 8px 18px; border-radius: 10px; background: rgba(12, 9, 11, .8); box-shadow: var(--cadre); }
.pile { position: absolute; left: 18px; bottom: 12px; pointer-events: auto; display: flex; gap: 10px; align-items: flex-end; }
.pile:empty { display: none; }
.pile-tas { position: relative; width: 46px; height: 64px; border-radius: 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 16px; color: var(--or-clair); text-shadow: 0 1px 0 #000;
  background: repeating-linear-gradient(45deg, #3a2618 0 6px, #2c1c12 6px 12px); box-shadow: 0 0 0 1px #0a0607, 0 0 0 3px var(--or-sombre), 3px 3px 0 #1a100a, 6px 6px 0 #120a06, 0 8px 14px rgba(0, 0, 0, .6); }
.pile-tas.defausse { background: linear-gradient(#2a2022, #1a1315); box-shadow: 0 0 0 1px #0a0607, 0 0 0 2px #5a4a40; color: var(--sourdine); }
.pile-tas small { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); font-family: var(--texte); font-weight: 400; font-size: 11px; color: var(--sourdine); white-space: nowrap; }

@media (max-width: 1250px) { #jeu { --col-g: 215px; --col-d: 290px; } }
@media (max-width: 1000px) {
  #jeu { --lc: 92px; --peek: 72px; height: auto; min-height: 100vh; display: block; overflow: visible; padding-bottom: calc(var(--peek) + 14px); }
  .barre { position: sticky; top: 0; }
  .jeu-grille { display: flex; flex-direction: column; padding: 8px; }
  .zone-joueurs, .zone-cote { overflow: visible; padding: 0; }
  .joueurs { flex-direction: row !important; overflow-x: auto; padding: 4px 4px 8px; scroll-snap-type: x mandatory; }
  .joueurs .fiche { flex: 0 0 min(230px, 72vw); scroll-snap-align: start; }
  .zone-plateau { order: 0; }
  #plateau { height: auto; }
  .zone-cote { order: 1; }
  .main { left: 0; right: 0; }
  .pile { display: none; }
  .journal { max-height: 220px; }
}

/* Plateau (SVG) */
.case-txt { font-family: var(--display); font-weight: 700; font-size: 13px; fill: #fff3d6; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.case-nom { font-family: var(--display); font-weight: 900; font-size: 15px; fill: #2a1606; }
.niveau-case { font-family: var(--display); font-weight: 900; font-size: 34px; fill: #ffe7a3; paint-order: stroke; stroke: #2a1406; stroke-width: 5px; }
.surbrillance { fill: none; stroke: var(--vert-jouable); stroke-width: 5; stroke-dasharray: 10 8; animation: defile 1s linear infinite; filter: drop-shadow(0 0 6px var(--vert-jouable)); }
@keyframes defile { to { stroke-dashoffset: -36; } }
.cliquable { cursor: pointer; }
.pion { transition: transform .11s linear; }
.centre-titre { font-family: var(--logo); font-size: 44px; text-anchor: middle; fill: url(#pj-or); paint-order: stroke; stroke: #1a0d04; stroke-width: 4px; }
.centre-txt { font-family: var(--display); font-weight: 700; font-size: 20px; fill: var(--sourdine); text-anchor: middle; }
.centre-log { font-family: var(--texte); font-weight: 700; fill: #f3e9d6; paint-order: stroke; stroke: #0c0809; stroke-width: 4px; }
.centre-log.magie { fill: #ffd76a; } .centre-log.pv, .centre-log.alerte { fill: #ff9b91; } .centre-log.bon { fill: #8affb0; } .centre-log.victoire { fill: #ffe7a3; }
.centre-fond { fill: rgba(10, 6, 8, .62); stroke: rgba(226, 181, 82, .35); stroke-width: 1.5; }
.de { fill: url(#pj-de); stroke: #2a1406; stroke-width: 3; }
.de-pt { fill: #2a1406; }
.de-roule { animation: roule .5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes roule { 0% { transform: rotate(-220deg) scale(.5); } 100% { transform: none; } }
@keyframes secousse { 20% { transform: var(--incl, none) translate(6px, -3px); } 40% { transform: var(--incl, none) translate(-6px, 4px); } 60% { transform: var(--incl, none) translate(4px, 2px); } 80% { transform: var(--incl, none) translate(-3px, -2px); } }
.maudit { font: 900 26px var(--display); paint-order: stroke; stroke: #000; stroke-width: 3px; }
.alliance-marque { font: 700 20px var(--texte); fill: #c9a8ff; paint-order: stroke; stroke: #1a0d2a; stroke-width: 3px; }

/* Portraits des joueurs */
.joueurs { display: flex; flex-direction: column; gap: 12px; }
.fiche { transition: transform .3s, box-shadow .3s, opacity .3s; }
.fiche.active { transform: translateX(4px); }
.fiche.touche { animation: touche .5s; }
@keyframes touche { 15% { transform: translateX(-5px); background: linear-gradient(#5a1d1d, #2a1315); } 35% { transform: translateX(5px); } 55% { transform: translateX(-3px); } }
.jauge.objectif { height: 5px; }
.jauge.objectif > i { background: linear-gradient(90deg, #8a6424, #ffe7a3); }
.fiche-cartes { display: flex; gap: 10px; color: var(--sourdine); font-size: 11.5px; margin-top: 2px; }
.case { transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.case.cliquable:hover, .case:hover { transform: translateY(-3px); }
.fiche { position: relative; padding: 9px 9px 9px 62px; font-size: 12.5px; min-height: 92px; }
.fiche.active { box-shadow: 0 0 0 1px #0a0607, 0 0 0 3px var(--c), 0 0 0 4px #0a0607, 0 0 22px color-mix(in srgb, var(--c) 55%, transparent), 0 10px 30px rgba(0, 0, 0, .55); }
.fiche.elimine { opacity: .45; filter: grayscale(.8); }
.portrait { position: absolute; left: 8px; top: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--av) 85%, #fff 15%), color-mix(in srgb, var(--av) 45%, #000) 75%);
  box-shadow: 0 0 0 2px #0a0607, 0 0 0 4px var(--c), 0 0 0 5px #0a0607, 0 4px 10px rgba(0, 0, 0, .6); }
.portrait .sigil { width: 60%; height: 60%; color: #fff6dc; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.portrait .heritage-pastille { position: absolute; bottom: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#3e3033, #1a1214); box-shadow: 0 0 0 1.5px var(--or); }
.portrait .heritage-pastille .sigil { width: 15px; height: 15px; color: var(--or-clair); }
.fiche.transforme .portrait { animation: halo 1.6s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 2px #0a0607, 0 0 0 4px var(--c), 0 0 0 5px #0a0607, 0 0 22px 6px var(--av); } }
.fiche-nom { font-family: var(--display); font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; color: var(--encre); }
.fiche-perso { color: var(--sourdine); font-size: 12px; line-height: 1.25; }
.jauge { height: 8px; background: #0c0809; border-radius: 4px; overflow: hidden; margin: 5px 0 2px; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3a2a22; }
.jauge > i { display: block; height: 100%; background: linear-gradient(#ff8075, #b4241c); transition: width .4s; }
.jauge.avatar > i { background: linear-gradient(#d3baff, #7b4be0); }
.jauge.transfo > i { background: linear-gradient(#ffe7a3, #c48a2a); }
.fiche-chiffres { display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.fiche-chiffres .magie { color: var(--or-clair); font-weight: 700; }
.bans { letter-spacing: 2px; font-family: var(--display); font-weight: 900; font-size: 11px; }
.bans .ok { color: var(--or); text-shadow: 0 0 6px rgba(226, 181, 82, .6); }
.bans .non { color: #5a4a40; }
.etiquette { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(#d3baff, #7b4be0); color: #160a2a; font-weight: 700; font-family: var(--texte); }
.flottant { position: absolute; left: 26px; top: 20px; z-index: 8; pointer-events: none; font-family: var(--display); font-weight: 900; font-size: 22px;
  text-shadow: 0 0 2px #000, 0 2px 4px #000, 0 0 1px #000; animation: flotter 1.4s ease-out forwards; white-space: nowrap; }
.flottant.moins { color: #ff6b5e; } .flottant.plus { color: #8affb0; } .flottant.or { color: #ffd76a; }
@keyframes flotter { 0% { transform: translateY(6px) scale(.7); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; } 100% { transform: translateY(-38px) scale(1); opacity: 0; } }

/* Panneau d'action */
.action { padding: 14px; min-height: 64px; flex: 0 0 auto; }
.action h3 { font-size: 20px; margin-bottom: 4px; }
.action p { margin: 4px 0 10px; color: #dccfb6; }
.action.apparait > * { animation: apparait .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.action.apparait > :nth-child(2) { animation-delay: .05s; } .action.apparait > :nth-child(3) { animation-delay: .1s; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } }
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix .btn { flex: 1 1 auto; text-align: left; font-family: var(--texte); font-weight: 700; letter-spacing: 0; }
.choix .btn-principal { font-family: var(--display); }
.attente-ia { color: var(--sourdine); font-style: italic; }
.attente-ia { animation: respire 1.6s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .55; } }

/* Journal */
.journal-panneau { padding: 10px 12px; flex: 1 1 auto; min-height: 140px; display: flex; flex-direction: column; }
.journal-panneau h3 { font-size: 15px; color: var(--sourdine); margin: 0 0 6px; }
.journal { list-style: none; margin: 0; padding: 0 4px 0 0; flex: 1; min-height: 0; overflow-y: auto; font-size: 13px; scrollbar-width: thin; scrollbar-color: var(--or-sombre) transparent; }
.journal li { padding: 3px 0; border-bottom: 1px solid #2c2124; }
.journal li.neuf { animation: neuf 1.6s ease-out; }
@keyframes neuf { 0% { background: rgba(226, 181, 82, .28); transform: translateX(10px); opacity: 0; } 20% { opacity: 1; transform: none; } 100% { background: transparent; } }
.journal .tour { color: var(--faille); font-weight: 700; padding-top: 6px; font-family: var(--display); }
.journal .alerte, .journal .pv { color: #ff9b91; }
.journal .bon { color: var(--bon); }
.journal .magie { color: var(--or); }
.journal .victoire { color: var(--or-clair); font-weight: 700; }

/* ---------- Fenêtres ---------- */
.voile { position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(20, 10, 30, .72), rgba(4, 2, 4, .9)); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; animation: apparait .2s; }
@keyframes apparait { from { opacity: 0; } }
.fenetre { padding: 22px; width: 100%; max-width: 540px; max-height: 92vh; overflow: auto; animation: monte .28s cubic-bezier(.2, .8, .2, 1.2); }
@keyframes monte { from { transform: translateY(18px) scale(.96); opacity: 0; } }
.fenetre h2 { font-size: 28px; margin-bottom: 8px; }
.fenetre .choix { margin-top: 16px; }
.fenetre:has(.coffre) { max-width: 720px; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 14px 0; }
.duel .contre { font-family: var(--logo); font-size: 26px; color: var(--faille); text-shadow: 0 0 14px var(--faille); }
.duel .cote { background: #120d0e; border-radius: 12px; padding: 10px; border-top: 5px solid var(--c); box-shadow: inset 0 0 0 1px #3a2a22; }
.duel .cote b { display: block; font-family: var(--display); }
.duel .res { font-family: var(--display); font-size: 22px; font-weight: 900; margin-top: 6px; }
.duel .res.ko { color: var(--sang); } .duel .res.ok { color: var(--bon); }
.bulle { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; max-width: 92vw; padding: 10px 18px; border-radius: 12px;
  background: linear-gradient(#2a2022, #1a1315); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--faille), 0 0 24px rgba(168, 123, 255, .4); }
.ecran-tour { text-align: center; }
.ecran-tour .grand { font-family: var(--logo); font-size: 40px; color: var(--c); text-shadow: 0 0 20px var(--c); }

/* Coffre de fin de partie */
.coffre { margin-top: 14px; border-top: 1px solid var(--or-sombre); padding-top: 12px; }
.coffre h3 { font-size: 22px; }
.coffre-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; margin-top: 12px; }
.coffre-item { display: flex; flex-direction: column; gap: 6px; animation: revele .55s ease-out both; }
.coffre-tag { font-size: 12px; color: var(--or-clair); font-weight: 700; text-align: center; }
@keyframes revele { from { opacity: 0; transform: rotateY(90deg) scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- Atelier, collection, campagne ---------- */
#atelier, #ecran-campagne { min-height: 100%; padding: 16px; }
.atelier-cadre { max-width: 1180px; margin: 0 auto; }
.atelier-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.atelier-tete h2 { font-size: 30px; flex: 1; }
.eclats { color: var(--faille); font-weight: 700; font-family: var(--display); text-shadow: 0 0 10px rgba(168, 123, 255, .5); }
.onglets { display: flex; gap: 4px; margin: 14px 0; border-bottom: 1px solid var(--or-sombre); }
.onglet { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 16px; cursor: pointer; color: var(--sourdine); font-family: var(--display); font-weight: 700; font-size: 15px; }
.onglet[aria-selected="true"] { color: var(--or-clair); border-bottom-color: var(--or); text-shadow: 0 0 10px rgba(226, 181, 82, .4); }
.at-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.at-champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sourdine); }
.at-large { flex: 1 1 260px; }
.at-liste { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.at-paquet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.at-paquet b { font-family: var(--display); color: var(--or-clair); }
.at-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.at-resume { font-size: 16px; }
.ed-tete { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ed-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-grille { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.ed-filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.ed-filtres label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sourdine); }
.ed-filtres .ed-recherche { flex: 1 1 140px; }
.ed-filtres .ed-coche { flex-direction: row; align-items: center; gap: 6px; min-height: 40px; font-size: 13px; }
.ed-cartes, .col-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 18px 14px; padding-top: 6px; }
.ed-tuile { display: flex; flex-direction: column; gap: 6px; }
.ed-tuile.absente .carte { filter: grayscale(.9) brightness(.5); }
.ed-tuile-bas { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; padding-top: 4px; }
.ed-tuile-bas .discret { flex: 1; text-align: right; font-size: 12px; }
.ed-paquet { position: sticky; top: 10px; padding: 14px; max-height: calc(100vh - 20px); overflow-y: auto; }
.ed-compte { font-size: 18px; margin-bottom: 6px; color: #ff9b91; font-family: var(--display); }
.ed-compte.ok { color: var(--bon); }
.ed-compte b { font-size: 28px; }
.ed-stats, .ed-els { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--sourdine); }
.ed-els i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.ed-courbe { display: flex; gap: 6px; align-items: flex-end; margin: 10px 0; height: 86px; }
.ed-barre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--sourdine); }
.ed-barre i { display: block; width: 100%; background: linear-gradient(#ffd77a, #b9741c); border-radius: 4px 4px 0 0; min-height: 2px; }
.ed-barre b { color: var(--encre); font-size: 12px; }
.ed-erreurs { margin: 8px 0; padding-left: 18px; font-size: 13px; color: #ff9b91; }
.ed-erreurs .avert { color: var(--or); }
.ed-ok { color: var(--bon); font-weight: 700; }
.ed-liste { list-style: none; padding: 0; margin: 8px 0 0; }
.ed-ligne { width: 100%; display: flex; gap: 6px; align-items: baseline; background: none; border: 0; border-bottom: 1px solid #2c2124; padding: 6px 2px; cursor: pointer; color: var(--encre); text-align: left; font-size: 13px; }
.ed-ligne:hover { background: rgba(226, 181, 82, .08); }
.ed-n { width: 26px; color: var(--sourdine); }
.ed-nom { flex: 1; }
.ed-nom::before { content: '◆ '; color: var(--rar, #b9b2a4); }
.ed-nom.r-R { --rar: #4ea3ff; } .ed-nom.r-E { --rar: #c27bff; } .ed-nom.r-L { --rar: #ffab36; } .ed-nom.r-M { --rar: #ff4f7a; }
.ed-manque { font-size: 11px; color: var(--or); }
.ed-cout { color: #7fbaff; font-family: var(--display); font-weight: 700; }
@media (max-width: 860px) { .ed-grille { grid-template-columns: 1fr; } .ed-paquet { position: static; max-height: none; order: -1; } }
.progression { margin: 18px 0 10px; padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.progression p { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--sourdine); }
.ca-perso { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; }
.ca-perso label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--sourdine); }
.ca-perso .ca-paquet { flex: 1 1 220px; }
.ca-chapitres { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ca-chap { padding: 16px; position: relative; overflow: hidden; }
.ca-chap::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(168, 123, 255, .16), transparent 70%); pointer-events: none; }
.ca-chap p { margin: 6px 0; font-size: 14px; }
.ca-chap .btn { margin-top: 10px; }
.ca-chap-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ca-chap h3 { font-size: 21px; }
.ca-etat { font-size: 12px; color: var(--sourdine); white-space: nowrap; font-family: var(--display); font-weight: 700; }
.ca-chap.fait { box-shadow: 0 0 0 1px #0a0607, 0 0 0 3px var(--or), 0 0 0 4px #0a0607, 0 0 20px rgba(226, 181, 82, .25); }
.ca-chap.fait .ca-etat { color: var(--or-clair); }
.ca-chap.verrou { opacity: .5; filter: grayscale(.5); }
.ca-recit { font-style: italic; color: var(--sourdine); }
@media (max-width: 520px) { .atelier-tete h2 { font-size: 22px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .braise { display: none; }
}

/* ----- 0.6 : langues et partie par lien ----- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.choix-langue select { min-height: 34px; padding: 4px 8px; font-size: 14px; }
.langue-titre { position: absolute; top: 14px; right: 16px; z-index: 5; }
#titre { position: relative; }
.accueil-tete { justify-content: space-between; }
.menu-langue { margin: 8px 0 4px; }
.mode-aide { margin: -4px 0 14px; font-size: 14px; }
.liste-liens { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--or-sombre); border-radius: 10px; background: rgba(168, 123, 255, .07); }
.liste-liens h3 { margin: 0 0 8px; font-size: 18px; }
.liste-liens ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-liens li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.liste-liens li b { font-family: var(--display); color: var(--or-clair); }
.lien-url { width: 100%; font-size: 13px; font-family: ui-monospace, monospace; margin: 6px 0 10px; }
.qr { width: min(260px, 70vw); margin: 4px auto 8px; padding: 10px; background: #fff; border-radius: 8px; }
.qr svg { display: block; width: 100%; height: auto; }
.verif { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid; }
.verif.ok { border-color: var(--bon); background: rgba(127, 224, 160, .08); }
.verif.ko { border-color: var(--sang); background: rgba(224, 72, 63, .1); }
.verif h3 { margin: 0 0 4px; font-size: 18px; }
.lien-etiquette { color: var(--faille2); }
@media (max-width: 900px) { .langue-titre { position: static; display: flex; justify-content: flex-end; padding: 10px 16px 0; } }
.fiche .magie.monte { color: #fff3b0; text-shadow: 0 0 10px rgba(255, 215, 106, .9); }
.fiche .magie.baisse { color: #ff9b91; }
.fiche-perso { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1600px) { #jeu { --col-g: 290px; --col-d: 400px; } }

/* ----- 1.0 : fiches des joueurs ----- */
.fiche { padding: 10px 12px 9px; min-height: 0; font-size: 12.5px; display: flex; flex-direction: column; gap: 5px; }
.fiche.active { transform: none; box-shadow: 0 0 0 1px #0a0607, 0 0 0 3px var(--c), 0 0 0 4px #0a0607, 0 0 20px color-mix(in srgb, var(--c) 50%, transparent), 0 10px 26px rgba(0, 0, 0, .55); }
.fiche.active::before { content: ''; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.fiche-tete { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; }
.fiche .portrait { position: relative; left: auto; top: auto; width: 46px; height: 46px; }
.fiche-id { min-width: 0; }
.fiche-nom { display: flex; align-items: baseline; gap: 6px; justify-content: flex-start; min-width: 0; }
.fiche-nom .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fiche-nom .tag { flex: none; font-family: var(--texte); font-weight: 700; font-size: 10.5px; color: var(--sourdine); padding: 0 5px; border: 1px solid #4a3a32; border-radius: 5px; }
.fiche-perso { font-size: 11.5px; }
.fiche .bans { margin-left: auto; font-size: 11px; letter-spacing: 2px; }
.barre-pv { position: relative; height: 17px; border-radius: 5px; overflow: hidden; background: #0c0809; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #3a2a22; }
.barre-pv > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff8075, #b4241c); transition: width .5s; }
.barre-pv.avatar > i { background: linear-gradient(#d3baff, #7b4be0); }
.barre-pv > span { position: relative; display: block; text-align: center; line-height: 17px; font-weight: 700; font-size: 11.5px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.ligne-fine { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; color: var(--sourdine); font-size: 11px; }
.ligne-fine .ico { color: var(--or); }
.barre-fine { height: 6px; border-radius: 3px; overflow: hidden; background: #0c0809; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3a2a22; }
.barre-fine > i { display: block; height: 100%; transition: width .5s; }
.barre-fine.transfo > i { background: linear-gradient(90deg, #8a5cd6, #d3baff); }
.barre-fine.objectif > i { background: linear-gradient(90deg, #8a6424, #ffe7a3); }
.fiche-magie { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-top: 2px; white-space: nowrap; }
.fiche-magie .magie { font-family: var(--display); font-weight: 900; font-size: 17px; color: var(--or-clair); }
.fiche-magie .total { color: var(--sourdine); font-size: 11.5px; }
.fiche-pied { display: flex; gap: 12px; color: var(--sourdine); font-size: 11px; }
.effets { display: flex; flex-wrap: wrap; gap: 4px; }
.effet { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: #2c2124; color: var(--encre); }
.effet.avatar { background: linear-gradient(#d3baff, #7b4be0); color: #160a2a; font-weight: 700; }
.effet.mort { background: #5a1d1d; }
.zone-joueurs { padding: 6px 8px; }
.banniere-tour { overflow: hidden; }
.banniere-tour span { max-width: 100%; box-sizing: border-box; }
@media (max-width: 1000px) { .banniere-tour span { padding: 10px 24px; font-size: 22px; } }
.fiche .fiche-perso { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
@media (max-width: 1000px) { .zone-joueurs, .zone-cote, .zone-plateau { min-width: 0; max-width: 100%; } .joueurs { width: 100%; } }
.zone-plateau, .zone-main { overflow-x: clip; }
.bloc-perso { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: -2px 0 14px; }
.bloc-perso[hidden] { display: none; }
.bloc-perso label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sourdine); }
@media (max-width: 520px) { .bloc-perso { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .mondes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mondes-grille .monde { grid-column: auto; } }
@media (max-width: 620px) { .mondes-grille { grid-template-columns: 1fr; } }

/* ----- 1.1.1 : journal du centre en entier, fiches plus aérées ----- */
.centre-journal { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3em; overflow: hidden; font-family: var(--texte); }
.centre-journal p { margin: 0; max-width: 100%; padding: .3em .8em; border-radius: .55em; text-align: center; line-height: 1.22; font-weight: 700; color: #f3e9d6;
  background: rgba(10, 6, 8, .74); border: 1px solid rgba(226, 181, 82, .35); text-shadow: 0 1px 2px #000; }
.centre-journal p.ancien { opacity: .62; font-weight: 400; font-size: .86em; }
.centre-journal p.magie { color: #ffd76a; } .centre-journal p.pv, .centre-journal p.alerte { color: #ff9b91; } .centre-journal p.bon { color: #8affb0; } .centre-journal p.victoire { color: #ffe7a3; }
.centre-journal p.combat { color: #ffc49b; }
.fiche { padding: 13px 15px 12px; gap: 8px; font-size: 13px; }
.fiche-tete { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding-bottom: 8px; }
.fiche .portrait { width: 52px; height: 52px; }
.fiche-nom .nom { font-size: 16px; }
.fiche .fiche-perso { font-size: 12px; margin-top: 2px; }
.barre-pv { height: 20px; border-radius: 6px; }
.barre-pv > span { line-height: 20px; font-size: 12.5px; }
.ligne-fine { font-size: 11.5px; gap: 8px; }
.barre-fine { height: 7px; }
.fiche-magie { margin-top: 4px; }
.fiche-magie .magie { font-size: 19px; }
.fiche-magie .total { font-size: 12px; }
.fiche-pied { font-size: 11.5px; margin-top: 2px; }
.joueurs { gap: 14px; }
#jeu { --col-g: 270px; }
@media (max-width: 1250px) { #jeu { --col-g: 240px; --col-d: 290px; } }
@media (min-width: 1600px) { #jeu { --col-g: 300px; --col-d: 400px; } }

/* ===== 1.3 : sons ===== */
.btn-icone { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; min-width: 40px; }
.btn-icone.muet { opacity: .6; }
.volume { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; font-size: .9rem; }
.volume input[type=range] { width: 100%; accent-color: var(--or, #e2b54a); }

/* ===== 1.3 : partie en direct ===== */
.direct-etiquette { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; padding: 2px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--texte, #eee); border: 1px solid rgba(255,255,255,.18); }
.direct-etiquette i { width: 8px; height: 8px; border-radius: 50%; background: #d9534f; box-shadow: 0 0 6px currentColor; }
.direct-etiquette.ok i { background: #4cd07d; animation: pouls-direct 2s ease-in-out infinite; }
.direct-etiquette.partiel i { background: #e8b84a; }
@keyframes pouls-direct { 50% { opacity: .45; } }
.salle-direct { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.salle-direct li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.salle-direct li .btn { margin-left: auto; }
.salle-direct .pastille { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.etat-direct { font-size: .85rem; opacity: .8; }
.etat-direct.connecte { color: #4cd07d; opacity: 1; }
.etat-direct.echec, .etat-direct.perdu { color: #ff8a80; opacity: 1; }
.etapes-direct { padding-left: 20px; display: grid; gap: 12px; }
.etapes-direct p { margin: 0 0 6px; }
textarea.lien-url { width: 100%; resize: vertical; font-family: ui-monospace, monospace; font-size: .75rem; word-break: break-all; }
.choix.choix-gauche { justify-content: flex-start; margin-top: 6px; }
.qr-replie summary { cursor: pointer; font-size: .85rem; opacity: .8; margin-top: 6px; }
.erreur-direct { color: #ff8a80; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.reactions .btn-mini { font-size: .72rem; padding: 3px 8px; }
.flottant.reaction { color: #fff; background: rgba(125, 91, 166, .85); padding: 2px 8px; border-radius: 8px; font-size: .8rem; white-space: nowrap; }
.flottant.reaction { left: auto; right: 10px; top: 6px !important; font-family: inherit; }
[data-langue] { display: flex; align-items: center; gap: 6px; }
.menu-langue { display: block; }

/* ===== 1.4 : tutoriel ===== */
.coach { position: fixed; z-index: 60; right: 18px; bottom: 150px; width: min(360px, calc(100vw - 32px));
  background: linear-gradient(180deg, #2c2034, #1c1419); color: var(--encre); border-radius: 14px; padding: 12px 16px 14px;
  box-shadow: 0 0 0 1px #0a0607, 0 0 0 3px var(--faille), 0 0 0 4px #0a0607, 0 14px 40px rgba(0,0,0,.6); }
.coach[hidden] { display: none; }
.coach.apparait { animation: coach-entre .35s ease-out; }
@keyframes coach-entre { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.coach h3 { font-family: var(--display); color: var(--or-clair); margin: 6px 0 4px; font-size: 1.05rem; }
.coach p { margin: 0 0 10px; line-height: 1.45; font-size: .95rem; }
.coach-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coach-etiquette { font-family: var(--display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faille); }
.coach-quitter { background: none; border: 0; color: var(--sourdine); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 2px; }
.coach .choix { justify-content: flex-start; }
.tuto-cible { outline: 3px solid var(--faille) !important; outline-offset: 3px; border-radius: 10px; animation: tuto-pouls 1.4s ease-in-out infinite; }
@keyframes tuto-pouls { 50% { outline-color: rgba(168, 123, 255, .25); } }
.invite-tuto { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 12px 16px;
  border-radius: 12px; background: rgba(168, 123, 255, .1); border: 1px solid rgba(168, 123, 255, .45); }
.invite-tuto p { margin: 0; }
.invite-tuto[hidden] { display: none; }
@media (max-width: 760px) {
  .coach { left: 12px; right: 12px; width: auto; bottom: auto; top: 64px; }
}

/* ===== 1.5 : barre de navigation ===== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: linear-gradient(180deg, rgba(20, 13, 16, .97), rgba(20, 13, 16, .88)); border-bottom: 1px solid rgba(226, 181, 82, .28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.nav[hidden] { display: none; }
.nav-logo { background: none; border: 0; cursor: pointer; font-family: var(--logo); font-size: 20px; letter-spacing: .02em; color: var(--or-clair); white-space: nowrap; padding: 4px 0; transition: opacity .3s; }
.nav-logo span { color: var(--or); }
.nav-liens { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-lien { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; color: var(--sourdine); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  padding: 8px 14px; border-radius: 10px; position: relative; transition: color .2s, background .2s; }
.nav-lien svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.nav-lien:hover { color: var(--or-clair); background: rgba(255, 220, 150, .06); }
.nav-lien.actif { color: var(--or-clair); background: rgba(226, 181, 82, .12); }
.nav-lien.actif::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -9px; height: 3px; border-radius: 3px; background: var(--or); box-shadow: 0 0 10px var(--or); }
.nav-outils { display: flex; align-items: center; gap: 6px; }
body.avec-nav { padding-top: 58px; }
.titre-ecran { font-family: var(--display); font-size: clamp(26px, 4vw, 36px); color: var(--or-clair); margin: 6px 0 2px; flex: 1; }
@media (max-width: 760px) {
  .nav { height: 52px; gap: 10px; padding: 0 12px; backdrop-filter: none; background: rgba(20, 13, 16, .97); }
  body.avec-nav { padding-top: 52px; padding-bottom: 72px; }
  .nav-liens { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; justify-content: space-around; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: rgba(20, 13, 16, .97); border-top: 1px solid rgba(226, 181, 82, .28); box-shadow: 0 -6px 20px rgba(0, 0, 0, .45); }
  .nav-lien { flex-direction: column; gap: 2px; font-size: 10.5px; padding: 6px 4px; flex: 1; letter-spacing: 0; }
  .nav-lien svg { width: 22px; height: 22px; }
  .nav-lien.actif::after { top: -5px; bottom: auto; left: 30%; right: 30%; }
  .nav-logo { font-size: 17px; flex: 1; text-align: left; }
}

/* ===== 1.5 : nouvelle partie ===== */
#accueil .accueil-cadre { max-width: 980px; }
.config h2 { font-size: 28px; }
.etape-config { margin: 18px 0 6px; text-align: left; }
.etape-config h3 { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 17px; color: var(--or-clair); margin: 0 0 10px; }
.etape-config h3 .num { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 14px; color: #2a1606;
  background: linear-gradient(#ffe089, #c98a2c); box-shadow: 0 0 10px rgba(255, 196, 80, .35); }
.tuiles { display: grid; gap: 10px; }
.tuiles-mode { grid-template-columns: repeat(3, 1fr); }
.tuiles-plateau { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.tuile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 10px; cursor: pointer; color: var(--encre);
  background: linear-gradient(180deg, rgba(255, 220, 160, .05), rgba(0, 0, 0, .15)), #1b1416; border: 1px solid rgba(226, 181, 82, .22); border-radius: 14px;
  transition: transform .15s, border-color .15s, box-shadow .15s; font: inherit; }
.tuile:hover { transform: translateY(-2px); border-color: rgba(226, 181, 82, .55); }
.tuile.choisie { border-color: var(--or); box-shadow: 0 0 0 2px rgba(226, 181, 82, .35), 0 0 22px rgba(226, 181, 82, .22); background: linear-gradient(180deg, rgba(255, 220, 160, .14), rgba(0, 0, 0, .1)), #221a1b; }
.tuile b { font-family: var(--display); font-size: 14px; color: var(--or-clair); }
.tuile small { color: var(--sourdine); font-size: 12px; line-height: 1.3; }
.tuiles-mode svg { width: 40px; height: 40px; fill: currentColor; color: var(--or); }
.tuile-plateau svg { width: 72px; height: 72px; }
.tuile-plateau .hasard { width: 72px; height: 72px; display: grid; place-items: center; font-family: var(--logo); font-size: 44px; color: var(--faille); text-shadow: 0 0 14px var(--faille); }
.segments { display: flex; flex-wrap: wrap; gap: 8px; }
.segment { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 10px 12px; cursor: pointer; border-radius: 12px; color: var(--encre); font: inherit;
  background: #1b1416; border: 1px solid rgba(226, 181, 82, .22); transition: border-color .15s, box-shadow .15s; }
.segment b { font-family: var(--display); color: var(--or-clair); font-size: 14px; }
.segment small { color: var(--sourdine); font-size: 12px; }
.segment.choisi { border-color: var(--or); box-shadow: 0 0 0 2px rgba(226, 181, 82, .35); background: #261d1e; }
.segments-petits .segment { flex: 0 1 auto; padding: 6px 14px; }
.bloc-perso { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.bloc-perso label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sourdine); }
.liste-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.fiche-config { position: relative; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 55%), #1b1416;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: inset 4px 0 0 var(--c); }
.fc-tete { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fc-medaillon { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 50%, #000)); box-shadow: 0 0 0 3px #1a1213, 0 0 0 5px var(--c), 0 0 16px var(--c); }
.fc-medaillon > .sigil { width: 34px; height: 34px; }
.fc-heritage { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: #f1dfb6; display: grid; place-items: center; box-shadow: 0 0 0 2px #1a1213; }
.fc-heritage .sigil { width: 15px; height: 15px; }
.fc-ident { flex: 1; display: grid; gap: 6px; min-width: 0; }
.fc-ident input { font-family: var(--display); font-weight: 700; font-size: 16px; }
.fc-retirer { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--sourdine); font-size: 22px; cursor: pointer; line-height: 1; }
.fc-retirer:hover { color: var(--sang); }
.fc-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fc-champs label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sourdine); }
.fc-champs .large { grid-column: 1 / -1; }
.fc-resume { margin: 10px 0 0; font-size: 12.5px; color: var(--sourdine); line-height: 1.45; }
.fc-resume b { color: var(--encre); }
.btn-ajout { margin-top: 12px; width: 100%; border-style: dashed; }
.barre-lancer { position: sticky; bottom: 10px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 12px 14px;
  border-radius: 16px; background: rgba(24, 17, 19, .96); border: 1px solid rgba(226, 181, 82, .4); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.resume-partie { font-size: 13.5px; color: var(--sourdine); line-height: 1.4; }
.resume-partie b { color: var(--or-clair); }
@media (max-width: 760px) {
  .tuiles-mode { grid-template-columns: 1fr; }
  .tuiles-mode .tuile { flex-direction: row; text-align: left; align-items: center; }
  .tuiles-mode .tuile b { min-width: 120px; }
  .tuiles-plateau { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .tuile-plateau svg, .tuile-plateau .hasard { width: 56px; height: 56px; }
  .barre-lancer { bottom: 72px; padding: 8px 10px; gap: 10px; }
  .barre-lancer .resume-partie { font-size: 11.5px; }
  .barre-lancer .btn-grand { min-height: 44px; padding: 8px 14px; font-size: 15px; flex: none; }
  .fc-champs { grid-template-columns: 1fr; }
}

/* ===== 1.5 : paramètres ===== */
.param-cadre { max-width: 980px; padding: 10px 16px 40px; }
.param-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-top: 12px; }
.fenetre .param-grille { grid-template-columns: 1fr; }
.param-bloc { padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 220, 160, .05), transparent 40%), #1b1416; border: 1px solid rgba(226, 181, 82, .22); }
.param-bloc h2 { font-family: var(--display); font-size: 18px; color: var(--or-clair); margin: 0 0 12px; }
.param-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.param-ligne > span { flex: 1 1 140px; font-weight: 700; }
.param-ligne > span small { display: block; font-weight: 400; color: var(--sourdine); font-size: 12px; }
.param-ligne input[type=range] { flex: 2 1 160px; accent-color: var(--or); }
.param-ligne output { width: 36px; text-align: right; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.param-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.param-code { display: flex; gap: 8px; }
.param-code input { flex: 1; text-transform: uppercase; letter-spacing: .12em; font-family: var(--display); }
.param-puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce { padding: 3px 10px; border-radius: 999px; background: rgba(127, 224, 160, .12); color: var(--bon); font-size: 12.5px; border: 1px solid rgba(127, 224, 160, .35); }
.btn.danger { color: #ff8a80; }
.lien-texte { background: none; border: 0; padding: 0; color: var(--or); text-decoration: underline; cursor: pointer; font: inherit; }

/* ===== 1.5 : fond animé du plateau ===== */
.fond-anime { position: absolute; z-index: 0; pointer-events: none; border-radius: 12px; }
.fond-anime[hidden] { display: none; }
#plateau { position: relative; z-index: 1; }
body.avec-fond-anime .fond-table { opacity: 0; }
body.anim-reduites .tuile:hover { transform: none; }

/* ===== 1.5.1 : page titre ===== */
.heros { min-height: min(calc(100vh - 58px), 820px); }
.heros-cta .btn-grand { min-width: 170px; }
.ti-installer { margin-top: 12px; }
.raccourcis { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 1120px; margin: -36px auto 10px; padding: 0 24px; }
.raccourci { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 18px; border-radius: 16px; cursor: pointer; color: var(--encre); font: inherit;
  background: linear-gradient(180deg, rgba(255, 220, 160, .07), transparent 60%), linear-gradient(#2a2022, #191214); box-shadow: var(--cadre); transition: transform .15s, box-shadow .15s; }
.raccourci:hover { transform: translateY(-3px); box-shadow: var(--cadre), 0 0 24px rgba(226, 181, 82, .25); }
.raccourci-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4a3a2a, #1c1416); box-shadow: inset 0 0 0 1px rgba(226, 181, 82, .35); }
.raccourci-ico .sigil { width: 30px; height: 30px; color: var(--or); filter: drop-shadow(0 0 8px rgba(226, 181, 82, .4)); }
.raccourci-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.raccourci-txt b { font-family: var(--display); font-size: 17px; color: var(--or-clair); }
.raccourci-txt small { color: #d9ccb4; font-size: 14px; line-height: 1.45; }
.raccourci-info { font-size: 12.5px; color: var(--sourdine); margin-top: 2px; }
.raccourci-barre { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.raccourci-barre i { display: block; height: 100%; background: linear-gradient(90deg, #b9741c, #ffe089); }
@media (max-width: 900px) { .raccourcis { grid-template-columns: 1fr; margin-top: 0; padding: 0 16px; } }

/* ===== 1.5.1 : nouvelle partie plus aérée ===== */
.config { padding: 28px 30px 24px; }
.config h2 { margin-bottom: 6px; }
.etape-config { margin: 0; padding: 26px 0 8px; }
.etape-config + .etape-config { border-top: 1px solid rgba(226, 181, 82, .14); margin-top: 18px; }
.etape-config h3 { margin-bottom: 16px; font-size: 18px; }
.tuiles { gap: 14px; }
.tuile { padding: 18px 14px 16px; gap: 9px; }
.tuile b { line-height: 1.25; }
.tuile small { line-height: 1.45; }
.tuiles-mode svg { margin-bottom: 2px; }
.mode-aide { margin: 14px 2px 0; font-size: 14px; line-height: 1.55; color: var(--sourdine); }
.segments { gap: 12px; }
.segment { padding: 14px 14px; gap: 5px; }
.bloc-perso { gap: 18px; margin-top: 16px; }
.liste-joueurs { gap: 18px; }
.fiche-config { padding: 18px 20px 18px 22px; }
.fc-tete { gap: 16px; margin-bottom: 16px; }
.fc-ident { gap: 8px; }
.fc-champs { gap: 14px 14px; }
.fc-champs label { gap: 6px; font-size: 12.5px; }
.fc-resume { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px; line-height: 1.6; }
.btn-ajout { margin-top: 18px; }
.avance { margin-top: 22px; }
.avance label { margin: 14px 0 6px; }
.barre-lancer { margin-top: 26px; padding: 14px 18px; }
.sous-titre { margin: 6px 0 22px; }
.invite-tuto { margin: 0 0 22px; padding: 16px 20px; gap: 16px; }
.invite-tuto p { line-height: 1.5; }
.bloc-continuer { margin-bottom: 22px; }
@media (max-width: 760px) {
  .config { padding: 20px 16px; }
  .fiche-config { padding: 16px; }
  .tuiles-mode .tuile { gap: 14px; padding: 14px; }
}
.ca-acte { font-family: var(--display); color: var(--or-clair); font-size: 22px; margin: 28px 0 14px; display: flex; align-items: center; gap: 12px; }
.ca-acte::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(226, 181, 82, .5), transparent); }

/* ===== 1.6 : mode daltonien ===== */
.marque-joueur { width: 14px; height: 14px; flex: none; margin-right: 5px; vertical-align: -2px; }
.fiche-nom { display: flex; align-items: center; }
.raccourcis-clavier { border-collapse: collapse; width: 100%; margin: 6px 0 4px; }
.raccourcis-clavier td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
.raccourcis-clavier td:first-child { width: 1%; white-space: nowrap; }
kbd { display: inline-block; min-width: 26px; text-align: center; padding: 3px 8px; border-radius: 6px; font: 700 13px var(--texte); color: #2a1606;
  background: linear-gradient(#fff2c8, #e0b860); box-shadow: 0 2px 0 #8a6424, inset 0 1px 0 #fff; }
.carte:focus-visible { outline: 3px solid var(--faille); outline-offset: 2px; }

/* ===== 1.6 : succès et statistiques ===== */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.su-onglets { max-width: 420px; margin: 0 auto 22px; }
.succes-entete { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto 26px; }
.succes-compte { font-family: 'Cinzel', serif; font-size: 1.1rem; white-space: nowrap; }
.succes-compte b { font-size: 1.8rem; color: var(--or); }
.jauge-succes, .succes-prog { flex: 1; height: 10px; border-radius: 6px; background: #1a1314; box-shadow: inset 0 0 0 1px rgba(226, 181, 82, .3); overflow: hidden; }
.jauge-succes span, .succes-prog span { display: block; height: 100%; background: linear-gradient(90deg, #a87a2a, var(--or)); border-radius: inherit; }
.succes-cat { margin-bottom: 28px; }
.succes-cat h2 { font-family: 'Cinzel', serif; font-size: 1.15rem; margin: 0 0 12px; color: var(--or); }
.succes-cat h2 small { color: var(--encre); opacity: .6; font-size: .85rem; margin-left: 6px; }
.succes-grille { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.succes { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 14px; background: linear-gradient(#1f1719, #161011); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); opacity: .72; }
.succes.fait { opacity: 1; background: linear-gradient(180deg, rgba(226, 181, 82, .12), transparent 70%), linear-gradient(#2a2022, #191214); box-shadow: inset 0 0 0 1px rgba(226, 181, 82, .55), 0 0 18px rgba(226, 181, 82, .12); }
.succes-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; color: #8a7a6a; background: #0f0b0c; box-shadow: inset 0 0 0 2px #3a2e2a; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif; font-variant-emoji: text; }
.succes.fait .succes-ic { color: #1b1203; background: radial-gradient(circle at 35% 30%, #ffe7a6, var(--or) 60%, #8a6220); box-shadow: 0 0 12px rgba(226, 181, 82, .45); }
.succes.cache .succes-ic { color: #5a4c44; }
.succes-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.succes-txt b { font-family: 'Cinzel', serif; font-size: .98rem; }
.succes-txt > span { font-size: .9rem; opacity: .85; line-height: 1.35; }
.succes-txt .succes-prog { flex: none; height: 6px; margin-top: 4px; }
.succes-chiffre, .succes-date { font-size: .78rem; opacity: .7; }
.succes-date { color: var(--or); opacity: .85; }
.succes-gagnes .succes-mini { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; text-align: left; }
.succes-mini li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.succes-mini .succes-ic { width: 32px; height: 32px; font-size: 1rem; color: #1b1203; background: radial-gradient(circle at 35% 30%, #ffe7a6, var(--or) 60%, #8a6220); box-shadow: none; }
.stats-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 26px; }
.stats-tuiles.petites { margin-bottom: 0; }
.stat-tuile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: linear-gradient(#211a1b, #171112); box-shadow: inset 0 0 0 1px rgba(226, 181, 82, .2); }
.stat-tuile b { font-family: 'Cinzel', serif; font-size: 1.45rem; color: var(--or); }
.stat-tuile span { font-size: .85rem; opacity: .8; }
.stats-bloc { margin-bottom: 24px; }
.stats-bloc h2 { font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--or); margin: 0 0 10px; }
.stats-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 24px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stats-table th, .stats-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.stats-table th[scope="row"], .stats-table thead th:first-child { text-align: left; font-weight: 600; }
.stats-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; font-weight: 600; }
.stats-fav { margin: 0; padding-left: 22px; display: grid; gap: 6px; max-width: 480px; }
.stats-fav li span { margin-right: 8px; }
.stats-fav li b { color: var(--or); font-weight: 600; font-size: .9rem; }
.vide-stats { text-align: center; opacity: .8; padding: 30px 10px; }
@media (max-width: 600px) { .stats-grille { grid-template-columns: 1fr; } .succes-grille { grid-template-columns: 1fr; } }

/* ===== 1.7.2 : effets brillants — dans l'illustration + liseré ; transparence simple (léger à afficher) ===== */
.c-foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.c-foil::before, .c-foil::after { content: ''; position: absolute; }
/* Reflet de lumière : passe toutes les 6 s ; au survol, il suit la souris */
.c-foil::before { inset: -10% -80%;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .22) 44%, rgba(255, 255, 255, .78) 50%, rgba(255, 255, 255, .22) 56%, transparent 64%);
  transform: translateX(-70%); animation: foil-balayage 6s ease-in-out infinite; }
.carte:hover .c-foil::before, .loupe-carte .c-foil::before { animation: none; inset: 0; transform: none;
  background: radial-gradient(circle at calc(var(--mx, .3) * 100%) calc(var(--my, .25) * 100%), rgba(255, 255, 255, .55), rgba(255, 255, 255, .14) 32%, transparent 62%); }
.r-L .c-foil::before { background: linear-gradient(105deg, transparent 36%, rgba(255, 226, 150, .22) 44%, rgba(255, 236, 170, .7) 50%, rgba(255, 226, 150, .22) 56%, transparent 64%); }
.r-L.carte:hover .c-foil::before, .loupe-carte .r-L .c-foil::before { background: radial-gradient(circle at calc(var(--mx, .3) * 100%) calc(var(--my, .25) * 100%), rgba(255, 238, 180, .6), rgba(255, 220, 140, .16) 32%, transparent 62%); }
/* Rare : voile argenté */
.r-R .c-foil { background: linear-gradient(135deg, rgba(220, 235, 255, .2), transparent 40%, transparent 60%, rgba(220, 235, 255, .16)); }
/* Épique : irisation qui glisse */
.r-E .c-foil::after { inset: -40%; opacity: .34;
  background: linear-gradient(125deg, #ff7aa0, #ffd36e 18%, #8dffa0 34%, #6fe2ff 50%, #9a8aff 66%, #ff8ae8 82%, #ff7aa0);
  animation: foil-irise 10s ease-in-out infinite alternate; }
/* Légendaire : éclat doré + paillettes */
.r-L .c-foil { background: linear-gradient(140deg, rgba(255, 205, 100, .3), rgba(255, 230, 160, .06) 45%, rgba(255, 190, 80, .26)); }
.r-L .c-foil::after, .r-M .c-foil::after { inset: 0;
  background-image: radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 2.4px), radial-gradient(circle at 72% 22%, #fff7d8 0 1.3px, transparent 2.8px),
    radial-gradient(circle at 46% 64%, #fff 0 1px, transparent 2.2px), radial-gradient(circle at 84% 70%, #ffe9a8 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 30% 82%, #fff 0 .9px, transparent 2px), radial-gradient(circle at 60% 40%, #fffbe8 0 .9px, transparent 2px),
    radial-gradient(circle at 10% 58%, #fff 0 .8px, transparent 1.8px), radial-gradient(circle at 90% 40%, #fff 0 .8px, transparent 1.8px);
  animation: foil-scintille 2.8s ease-in-out infinite; }
/* Mythique : prisme qui tourne */
.r-M .c-foil { background: conic-gradient(from var(--angle, 0deg) at 50% 55%, rgba(255, 90, 130, .19), rgba(255, 200, 90, .19), rgba(120, 255, 160, .19), rgba(90, 210, 255, .19), rgba(170, 120, 255, .19), rgba(255, 90, 130, .19));
  animation: foil-prisme 14s linear infinite; }
/* Liseré du cadre : argent (Rare), irisé (Épique), or (Légendaire), arc-en-ciel (Mythique) */
.c-liseret { position: absolute; inset: 3px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.r-R .c-liseret { background: linear-gradient(115deg, #6d7a8a, #f2f7ff 25%, #8a96a6 50%, #f2f7ff 75%, #6d7a8a); background-size: 200% 200%; animation: foil-liseret 8s linear infinite; opacity: .7; }
.r-E .c-liseret { background: linear-gradient(115deg, #ff7aa0, #ffd36e, #8dffa0, #6fe2ff, #9a8aff, #ff8ae8, #ff7aa0); background-size: 200% 200%; animation: foil-liseret 7s linear infinite; opacity: .8; }
.r-L .c-liseret { background: linear-gradient(115deg, #8a5a14 0%, #ffe39a 18%, #b07a20 36%, #8a5a14 50%, #ffe39a 68%, #b07a20 86%, #8a5a14 100%); background-size: 200% 200%; animation: foil-liseret 5s linear infinite; }
.r-M .c-liseret { padding: 2.5px; background: conic-gradient(from var(--angle, 0deg), #ff5a82, #ffc85a, #78ffa0, #5ad2ff, #aa78ff, #ff5a82); animation: foil-prisme 8s linear infinite; }
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes foil-balayage { 0%, 50% { transform: translateX(-70%); } 80%, 100% { transform: translateX(70%); } }
@keyframes foil-irise { from { transform: translate(-14%, -10%) rotate(0deg); } to { transform: translate(14%, 10%) rotate(8deg); } }
@keyframes foil-scintille { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes foil-prisme { to { --angle: 360deg; } }
@keyframes foil-liseret { to { background-position: 200% 200%; } }
.carte.r-M:not(.jouable):not(.choisie) { box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--cadre-c), inset 0 0 0 5px #120a06, 0 0 14px rgba(255, 110, 150, .3), 0 6px 14px rgba(0, 0, 0, .6); }
.carte.r-L:not(.jouable):not(.choisie) { box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--cadre-c), inset 0 0 0 5px #120a06, 0 0 12px rgba(255, 190, 80, .22), 0 6px 14px rgba(0, 0, 0, .6); }
/* Dans les grilles (collection, éditeur), l'effet ne bouge qu'au survol */
.col-cartes .carte:not(:hover) :is(.c-foil, .c-liseret), .ed-cartes .carte:not(:hover) :is(.c-foil, .c-liseret),
.col-cartes .carte:not(:hover) .c-foil::before, .col-cartes .carte:not(:hover) .c-foil::after,
.ed-cartes .carte:not(:hover) .c-foil::before, .ed-cartes .carte:not(:hover) .c-foil::after { animation-play-state: paused; }
.anim-reduites .c-foil, .anim-reduites .c-foil::before, .anim-reduites .c-foil::after, .anim-reduites .c-liseret { animation: none; }
.sans-foil .c-foil, .sans-foil .c-liseret { display: none; }
.sans-foil .carte.r-M:not(.jouable):not(.choisie), .sans-foil .carte.r-L:not(.jouable):not(.choisie) { box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--cadre-c), inset 0 0 0 5px #120a06, 0 6px 14px rgba(0, 0, 0, .6); }
.carte.grise .c-foil, .carte.grise .c-liseret { display: none; }

/* ===== 1.7 : loupe de la collection ===== */
.col-cartes .carte { cursor: zoom-in; }
.loupe { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
.loupe-carte { perspective: 900px; }
.loupe-carte .carte { width: 100%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; cursor: default; }
.loupe-info h2 { margin-top: 0; overflow-wrap: anywhere; }
.loupe-info h2.r-R { color: #8ec3ff; } .loupe-info h2.r-E { color: #d6a6ff; } .loupe-info h2.r-L { color: #ffc46a; } .loupe-info h2.r-M { color: #ff86a2; }
#fenetre:has(.loupe) { max-width: min(860px, 94vw); width: min(860px, 94vw); }
.loupe-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0; }
.loupe-info dt { opacity: .7; }
.loupe-info dd { margin: 0; font-weight: 600; }
.loupe-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.loupe-rar { color: var(--rar, #b9b2a4); }
@media (max-width: 640px) { .loupe { grid-template-columns: 1fr; } .loupe-carte { width: min(300px, 74vw); margin: 0 auto; } }
.epilogue p { line-height: 1.6; }
.epilogue-fin { text-align: center; font-family: 'Cinzel', serif; color: var(--or); font-size: 1.3rem; margin-top: 18px; }
.ca-epilogue { margin-top: 30px; }
/* 1.7 : les fenêtres ne passent plus sous la barre de navigation */
body.avec-nav .voile { padding-top: 66px; }
body.avec-nav .voile .fenetre { max-height: calc(100vh - 82px); }
@media (max-width: 760px) {
  body.avec-nav .voile { padding-top: 60px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.avec-nav .voile .fenetre { max-height: calc(100vh - 140px); }
}
/* 1.7.2 : grilles légères — le navigateur saute les cartes hors de l'écran ; effets brillants seulement sur les cartes à l'écran */
/* La tuile reçoit une marge intérieure (compensée) : sans elle, les pastilles de coût, d'ATK et de PV,
   la lueur et le survol des cartes, qui dépassent du cadre, seraient coupés par content-visibility. */
.col-cartes .ed-tuile, .ed-cartes .ed-tuile { content-visibility: auto; contain-intrinsic-size: auto 290px; padding: 18px; margin: -18px; }
.col-cartes .carte:not(.en-vue) :is(.c-foil, .c-liseret), .ed-cartes .carte:not(.en-vue) :is(.c-foil, .c-liseret) { display: none; }

/* ===== 1.7.4 : numéro de collection (coin haut droit) et icône d'élément ===== */
.c-num { position: absolute; top: 12.6cqw; right: 12.6cqw; width: 0; height: 0; z-index: 3; pointer-events: none; }
.c-num i { position: absolute; left: 0; top: 0; font-style: normal; font-family: var(--display); font-weight: 700; font-size: 5cqw; line-height: 1;
  color: #ecd9a8; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .9);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-7.4cqw); }
.c-el { position: absolute; top: 44cqw; right: 3.5cqw; z-index: 3; width: 14cqw; height: 14cqw; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--elc) 65%, #fff 35%), var(--elc) 55%, color-mix(in srgb, var(--elc) 60%, #000 40%));
  box-shadow: 0 0 0 1.2px #120a06, 0 0 0 2.4px var(--or-sombre), 0 2px 4px rgba(0, 0, 0, .6); }
.c-el .sigil { width: 64%; height: 64%; color: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45)); }

/* ===== 1.7.6 : pastilles de coût (gemme), d'attaque (écu) et de PV (cœur) ===== */
.c-cout, .c-atk, .c-pv { background: none !important; box-shadow: none !important; clip-path: none !important; border-radius: 0 !important;
  display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }
.c-cout svg, .c-atk svg, .c-pv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-cout b, .c-atk b, .c-pv b { position: relative; font-weight: 900; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 1px 0 #000, 0 0 2px #000, 1px 0 0 rgba(0, 0, 0, .7), -1px 0 0 rgba(0, 0, 0, .7); }
.c-cout { top: -4.5%; left: -5.5%; width: 26cqw; height: 26cqw; }
.c-cout b { font-size: 11cqw; }
.c-atk, .c-pv { width: 23cqw; height: 23cqw; bottom: -3.5%; }
.c-atk { left: -4.5%; } .c-pv { right: -4.5%; }
.c-atk b { font-size: 9.6cqw; transform: translateY(-1cqw); }
.c-pv b { font-size: 9.6cqw; transform: translateY(-1.6cqw); }
.carte.grise :is(.c-cout, .c-atk, .c-pv) { filter: none; }

/* ===== 1.7.6 : fiche d'une case du plateau ===== */
#fenetre:has(.info-case) { max-width: min(640px, 94vw); width: min(640px, 94vw); }
.info-case h2 { margin-top: 0; }
.ic-corps { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.ic-gauche { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ic-carte { width: 170px; }
.ic-pvbarre { position: relative; width: 170px; height: 18px; border-radius: 9px; background: #1a1112; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.ic-pvbarre i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a1c22, #e0484d); }
.ic-pvbarre span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 18px; font-weight: 700; text-shadow: 0 1px 0 #000; }
.ic-embleme { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--elc, #8a6a3a) 65%, #fff 35%), var(--elc, #8a6a3a) 55%, color-mix(in srgb, var(--elc, #8a6a3a) 55%, #000 45%));
  box-shadow: 0 0 0 3px #120a06, 0 0 0 6px var(--or-sombre), 0 8px 20px rgba(0, 0, 0, .6); }
.ic-embleme .sigil { width: 60%; height: 60%; color: #fff; }
.ic-embleme.special { --elc: #6a4a2a; }
.ic-embleme.special .sigil { color: var(--or-clair); }
.ic-embleme.petit { display: inline-grid; width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; box-shadow: 0 0 0 1px #120a06; }
.ic-embleme.petit .sigil { width: 70%; height: 70%; }
.ic-proprio { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 4px; color: var(--c); }
.ic-proprio .marque-joueur { width: 20px; height: 20px; }
.ic-niveau { margin: 0 0 10px; font-size: 1.25rem; letter-spacing: 2px; color: #5a4a3a; }
.ic-niveau .plein { color: var(--or); text-shadow: 0 0 6px rgba(226, 181, 82, .5); }
.ic-niveau small { font-size: .8rem; letter-spacing: 0; color: var(--sourdine); margin-left: 6px; }
.ic-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 10px; }
.ic-dl dt { color: var(--sourdine); }
.ic-dl dd { margin: 0; }
.ic-dl small { color: var(--sourdine); }
.ic-gros { font-family: var(--display); font-size: 1.25rem; color: var(--or-clair); }
.ic-alerte { color: #ff9ab0; } .ic-bonus { color: #c9a8ff; }
.ic-ici { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--sourdine); }
.ic-joueur { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; color: var(--encre); background: color-mix(in srgb, var(--c) 22%, #1a1214); box-shadow: inset 0 0 0 1px var(--c); }
.ic-joueur .marque-joueur { width: 14px; height: 14px; }
@media (max-width: 560px) { .ic-corps { grid-template-columns: 1fr; } .ic-gauche { order: 0; } }

/* ===== 1.7.6 : défausse ===== */
button.pile-tas { cursor: pointer; font: inherit; font-family: var(--display); font-weight: 900; font-size: 16px; border: 0; padding: 0; }
button.pile-tas.defausse { color: var(--sourdine); }
button.pile-tas.defausse:hover { color: var(--or-clair); box-shadow: 0 0 0 1px #0a0607, 0 0 0 2px var(--or), 0 0 12px rgba(226, 181, 82, .4); }
#fenetre:has(.defausse-fen) { max-width: min(860px, 94vw); width: min(860px, 94vw); }
.defausse-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 12px; padding: 8px 6px 4px; }
.defausse-carte { position: relative; }
.defausse-n { position: absolute; top: -6px; right: -4px; z-index: 5; padding: 2px 7px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--or); color: #1b1203; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }

/* 1.7.7 : limites de construction dans l'éditeur */
.ed-limites { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 4px; font-size: 13px; color: var(--sourdine); }
.ed-limites .plein b { color: var(--or); }
.ed-limites .trop b { color: #ff8a8a; }

/* ===== 1.7.8 : signe de rareté déplacé (pastille ronde en bas à gauche de l'illustration, symétrique de l'élément) ===== */
.c-rar { left: 3.5cqw !important; top: 44cqw !important; width: 14cqw !important; height: 14cqw !important; transform: none !important; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3a30, #1c1214 70%) !important;
  box-shadow: 0 0 0 1.2px #120a06, 0 0 0 2.4px var(--or-sombre), 0 2px 4px rgba(0, 0, 0, .6) !important; display: grid; place-items: center; pointer-events: none; }
.c-rar::after { content: ''; width: 46%; height: 46%; transform: rotate(45deg); background: linear-gradient(135deg, color-mix(in srgb, var(--rar) 55%, #fff 45%), var(--rar) 55%, color-mix(in srgb, var(--rar) 60%, #000 40%));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 5px var(--rar); }
.carte.r-C .c-rar { opacity: 1; }
.carte.r-C .c-rar::after { box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }

/* 1.7.8 : texte d'ambiance (seulement dans les vues de détail) */
.saveur { font-style: italic; color: #d8c49a; border-left: 3px solid var(--or-sombre); padding: 4px 0 4px 12px; margin: 10px 0; line-height: 1.45; }
.carte-loupe + .saveur { max-width: 420px; margin: 0 auto 12px; }
.ic-gauche .saveur { font-size: 13px; max-width: 180px; margin: 4px 0 0; }

/* ===== 1.9 : salles en direct (relais) ===== */
.config.mode-salle .etape-config ~ .etape-config, .config.mode-salle .avance, .config.mode-salle .barre-lancer { display: none; }
.bloc-salle { margin-top: 14px; }
.salle-revenir { margin-bottom: 14px; }
.salle-accueil { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sa-col { padding: 16px; border-radius: 14px; background: #1b1416; border: 1px solid rgba(226, 181, 82, .25); display: flex; flex-direction: column; gap: 8px; }
.sa-col h4 { margin: 0; font-family: var(--display); color: var(--or-clair); font-size: 17px; }
.sa-col p { margin: 0 0 4px; flex: 1; }
.sa-col > .btn { align-self: flex-start; }
.sa-rejoindre { display: flex; gap: 8px; }
.code-saisie { width: 7.2em; text-transform: uppercase; font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: .22em; text-align: center; padding: 6px 8px; }
@media (max-width: 640px) { .salle-accueil { grid-template-columns: 1fr; } }

#salle { min-height: 100%; display: flex; justify-content: center; padding: 16px 16px 30px; }
.salle-cadre { width: 100%; max-width: 1120px; }
.salle-tete { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: #1b1416; border: 1px solid rgba(226, 181, 82, .35); }
.salle-code-bloc { display: flex; flex-direction: column; line-height: 1.1; }
.code-salle { font-family: var(--logo); font-size: clamp(34px, 6vw, 46px); letter-spacing: .14em; color: var(--or-clair); text-shadow: 0 0 18px rgba(226, 181, 82, .45); user-select: all; }
.salle-partage { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
.salle-partage .qr-replie { position: relative; }
.salle-partage .qr-replie summary { cursor: pointer; color: var(--sourdine); font-size: 13px; }
.salle-partage .qr-replie[open] .qr { position: absolute; z-index: 20; top: 26px; left: 0; width: 190px; padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.salle-etat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sourdine); margin: 0; }
.salle-etat i { width: 9px; height: 9px; border-radius: 50%; background: #d9534f; }
.salle-etat.ok i { background: #4cd07d; animation: pouls-direct 2s ease-in-out infinite; }
.salle-aide { margin: 10px 4px 0; }
.salle-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "joueurs reglages" "joueurs chat"; gap: 16px; margin-top: 14px; align-items: start; }
.salle-joueurs, .salle-en-cours { grid-area: joueurs; }
.salle-reglages { grid-area: reglages; }
.salle-chat { grid-area: chat; }
.salle-en-cours + .salle-chat { grid-area: reglages / reglages / chat / chat; }
.salle-bloc { padding: 16px; border-radius: 16px; background: rgba(27, 20, 22, .92); border: 1px solid rgba(255, 255, 255, .07); }
.salle-bloc h2 { font-size: 20px; margin: 0 0 12px; }
.salle-bloc h2 small { font-family: var(--texte); font-size: 13px; color: var(--sourdine); font-weight: 400; }
.salle-bloc h3 { font-size: 14px; color: var(--sourdine); margin: 14px 0 6px; }
.salle-joueurs .liste-joueurs { grid-template-columns: 1fr; gap: 12px; }
.salle-joueurs .fiche-config { padding: 14px 16px; }
.salle-joueurs .fc-tete { margin-bottom: 10px; gap: 12px; }
.salle-joueurs .fc-resume { margin-top: 10px; padding-top: 10px; font-size: 12.5px; }
.salle-joueurs .btn-ajout { width: auto; flex: 1; margin-top: 0; }
.salle-joueurs .choix { margin-top: 10px; }
.fiche-moi { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 8px 26px rgba(0, 0, 0, .35); }
.fiche-libre { border-style: dashed; opacity: .92; }
.fc-vide { font-family: var(--display); font-size: 26px; color: var(--sourdine); background: rgba(255, 255, 255, .05) !important; }
.fc-nom { font-family: var(--display); font-size: 17px; color: var(--encre); }
.fc-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.fc-tags .tag, .salle-direct .tag { font-weight: 700; font-size: 10.5px; color: var(--sourdine); padding: 0 6px; border: 1px solid #4a3a32; border-radius: 5px; }
.tag.tag-hote { color: var(--or); border-color: var(--or-sombre); }
.fc-pret { font-weight: 700; padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.fc-pret.oui { background: rgba(76, 208, 125, .16); color: #7fe6a2; }
.fc-pret.non { background: rgba(255, 255, 255, .06); color: var(--sourdine); }
.presence { width: 9px; height: 9px; border-radius: 50%; background: #6b5a52; }
.presence.oui { background: #4cd07d; box-shadow: 0 0 6px #4cd07d; }
input.a-remplir { box-shadow: 0 0 0 2px var(--or); }
.salle-spect { margin: 0; color: var(--encre); font-size: 14px; }
.salle-spect .absent { opacity: .55; }
.salle-apercu { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.salle-apercu p { margin: 0; flex: 1; min-width: 180px; }
.sa-mini svg, .sa-mini.hasard { width: 92px; height: 92px; display: grid; place-items: center; font-family: var(--display); font-size: 40px; color: var(--or); }
.salle-reglages .tuiles-plateau { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.salle-reglages .tuile-plateau svg, .salle-reglages .tuile-plateau .hasard { width: 52px; height: 52px; }
.salle-reglages .segments { flex-wrap: wrap; }
.salle-reglages .bloc-perso { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.salle-chat { display: flex; flex-direction: column; }
.chat-liste { list-style: none; margin: 0 0 10px; padding: 0 4px 0 0; max-height: 300px; min-height: 120px; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 5px; scrollbar-width: thin; }
.chat-liste li { line-height: 1.4; overflow-wrap: anywhere; }
.chat-saisie { display: flex; gap: 8px; }
.chat-saisie input { flex: 1; min-width: 0; }
.salle-barre { bottom: 12px; }
.salle-barre .resume-partie { flex: 1; }
.salle-raison { color: #f0c27a; }
.salle-version { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 4px 0; padding: 10px 14px; border: 1px solid #b0503c; border-radius: 10px; background: rgba(140, 40, 28, .25); color: #ffd9c8; }
.salle-version p { margin: 0; flex: 1 1 260px; }
.tag.tag-alerte { color: #ffb39e; border-color: #b0503c; }
.salle-en-cours p { color: var(--sourdine); }
@media (max-width: 860px) {
  .salle-grille { grid-template-columns: 1fr; grid-template-areas: "joueurs" "reglages" "chat"; }
  .salle-en-cours + .salle-chat { grid-area: chat; }
  .salle-barre { bottom: 8px; flex-wrap: wrap; }
  .salle-barre .resume-partie { flex-basis: 100%; }
  .salle-barre .btn-grand { flex: 1; }
}
/* Discussion dans le journal de la partie */
.journal li.chat { color: #f3e9d6; background: rgba(95, 240, 210, .06); border-left: 2px solid rgba(95, 240, 210, .5); padding-left: 6px; }
.journal li.chat i { color: var(--or-clair); }
#chat-jeu { margin-top: 8px; }
#chat-jeu input { font-size: 13px; padding: 5px 8px; }
.salle-joueurs .fc-tete:has(.fc-retirer) { padding-right: 24px; }
.salle-reglages .tuiles-plateau { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.salle-reglages .tuile-plateau { padding: 8px 4px; }
.salle-reglages .tuile-plateau b { font-size: 11.5px; line-height: 1.15; }
.salle-reglages .tuile-plateau svg, .salle-reglages .tuile-plateau .hasard { width: 44px; height: 44px; }
.salle-reglages .segment small { font-size: 11px; }

/* ===== 2.0 : fiches de joueur (héritage, avatar, niveau), jauge d'avatar, infos, journal repliable ===== */
button.portrait { border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.portrait:hover, button.portrait:focus-visible { outline: none; box-shadow: 0 0 0 2px #0a0607, 0 0 0 4px var(--or-clair), 0 0 14px rgba(255, 215, 120, .5); }
.fiche-nom .niv { margin-left: auto; flex: none; font-family: var(--texte); font-weight: 700; font-size: 10.5px; color: #1b1203; background: linear-gradient(#ffe7a3, #c8963a); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.fiche .fiche-perso { display: flex; flex-direction: column; gap: 1px; white-space: normal; -webkit-line-clamp: unset; overflow: visible; margin-top: 3px; }
.fiche-perso > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.fiche-perso .fp-her { color: var(--encre); font-weight: 700; font-size: .95em; }
.fiche-perso .fp-av { color: color-mix(in srgb, var(--av) 55%, #e8dcc4); }
.ligne-capa { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; color: var(--sourdine); font-size: 11px; }
.ligne-capa .ico { color: #c9a8ff; }
.ligne-capa .lc-nom { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-fine.jauge > i { background: linear-gradient(90deg, #8a5cd6, #d3baff); }
.ligne-capa.prete { color: #e6d4ff; font-weight: 700; }
.ligne-capa.prete .barre-fine.jauge > i { background: linear-gradient(90deg, #c9a8ff, #fff2c8); box-shadow: 0 0 8px #c9a8ff; }
.fiche.capa-prete .portrait { animation: halo 1.6s ease-in-out infinite; }
.infos-joueur h2 { color: var(--c); }
.ij-bloc { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.ij-bloc h3 { margin: 2px 0 6px; font-size: 16px; color: var(--or-clair); }
.ij-bloc p { margin: 0 0 6px; line-height: 1.45; }
.ij-sigil { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4a3a30, #1c1214 70%); box-shadow: 0 0 0 2px var(--or-sombre); }
.ij-sigil.avatar { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--av) 70%, #fff 10%), color-mix(in srgb, var(--av) 40%, #000 60%)); }
.ij-sigil .sigil { width: 60%; height: 60%; color: #fff6dc; }
.infos-joueur .ligne-capa { margin: 8px 0; font-size: 12.5px; }
.journal-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.journal-tete h3 { margin: 0 !important; }
#btn-journal { font-size: 11px; padding: 2px 8px; min-height: 0; }
.journal-panneau.j-court { flex: 0 0 auto; min-height: 0; }
.journal-panneau.j-court .journal { flex: none; max-height: 7.5em; }
.journal-panneau.j-ferme { flex: 0 0 auto; min-height: 0; }
.journal-panneau.j-ferme .journal { display: none; }
#voir-pioche:hover { box-shadow: 0 0 0 1px #0a0607, 0 0 0 2px var(--or), 0 0 12px rgba(226, 181, 82, .4); }
/* 2.0 : pas de défilement horizontal de 2 px dans l'éditeur sur téléphone (marges des tuiles) */
#atelier { overflow-x: clip; }
/* 2.1 : nouveaux plateaux (arène, jumelles, ponts-levis et jetées) */
.arene-marque { font: 700 26px var(--texte); fill: #ff8a5c; paint-order: stroke; stroke: #2a0d06; stroke-width: 4px; pointer-events: none; }
.jumelle-marque circle { fill: #1b1030; stroke: #c9a8ff; stroke-width: 2.5; }
.jumelle-marque text { font: 700 18px var(--texte); fill: #ead9ff; }
.jumelle-marque { pointer-events: none; }
.porte circle { stroke-width: 3; }
.porte.ouverte circle { fill: #173a1c; stroke: #7ee08a; }
.porte.fermee circle { fill: #3a1212; stroke: #ff6b6b; }
.porte text { font: 700 20px var(--texte); fill: #fff; pointer-events: none; }

/* 2.2 : terre qui change d'élément */
.case.terraforme { animation: terraforme .9s ease-out; }
@keyframes terraforme { 0% { filter: brightness(2.4) saturate(1.8); } 60% { filter: brightness(1.4); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .case.terraforme { animation: none; } }
.etage-bande { fill: #000; pointer-events: none; }
.etage-nom { font: 600 19px var(--texte); fill: #d8b977; opacity: .75; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
/* 2.3.2 : réglage « cacher les boutons Apprendre à jouer » */
body.sans-tuto [data-tuto], body.sans-tuto #invite-tuto { display: none !important; }

/* ---------- 3.1 : plateau en vue inclinée, pions en figurines ---------- */
body.vue-inclinee .zone-plateau { perspective: 2200px; perspective-origin: 50% 10%; }
body.vue-inclinee #plateau { --incl: rotateX(30deg) scale(.93); transform: var(--incl); transform-origin: 50% 62%; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .65)); }
.figurines { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.figurine { position: absolute; left: 0; top: 0; width: var(--w); height: calc(var(--w) * 1.3); transition: transform .12s linear; will-change: transform; }
.fig-ombre { position: absolute; left: 6%; right: 6%; bottom: -4%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.fig-socle { position: absolute; left: 12%; right: 12%; bottom: 0; height: 20%; border-radius: 50%;
  background: linear-gradient(color-mix(in srgb, var(--c) 85%, #fff 15%), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 0 0 2px #120a06, inset 0 2px 0 rgba(255, 255, 255, .35); }
.fig-pied { position: absolute; left: 44%; right: 44%; bottom: 10%; height: 26%; background: linear-gradient(90deg, #6a4a24, #e2b552, #6a4a24); box-shadow: 0 0 0 1px #120a06; }
.fig-medaillon { position: absolute; left: 4%; right: 4%; top: 0; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 0 0 2px #ffe7a3, 0 0 0 4px #120a06, 0 6px 10px rgba(0, 0, 0, .55); transform-origin: 50% 120%; }
.fig-medaillon .sigil { width: 64%; height: 64%; }
.fig-marque { position: absolute; right: -8%; bottom: -6%; width: 40%; height: 40%; }
.fig-marque svg { width: 100%; height: 100%; }
.figurine.active .fig-medaillon { animation: fig-bond 1.4s ease-in-out infinite; box-shadow: 0 0 0 2px #ffe7a3, 0 0 0 4px #120a06, 0 0 18px 4px var(--c), 0 6px 10px rgba(0, 0, 0, .55); }
.figurine.prete .fig-medaillon::after { content: ''; position: absolute; inset: -9%; border-radius: 50%; border: 2px solid #ffe7a3; box-shadow: 0 0 10px 3px rgba(255, 210, 120, .8); animation: fig-prete 1.6s ease-in-out infinite; pointer-events: none; }
.figurine.prete .fig-medaillon::before { content: '✦'; position: absolute; right: -14%; top: -14%; width: 38%; height: 38%; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--w) * .2); line-height: 1; color: #1a0e08; background: #ffe7a3; box-shadow: 0 0 0 2px #120a06, 0 0 8px #ffd27a; z-index: 2; }
@keyframes fig-prete { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes fig-bond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }
body.anim-reduites .figurine { transition: none; }
body.anim-reduites .figurine.active .fig-medaillon { animation: none; }

/* ---------- 3.1 : combat animé ---------- */
.duel-anime { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 10px 0 6px; }
.duel-anime .contre { font-family: var(--logo); font-size: 26px; color: var(--faille); text-shadow: 0 0 14px var(--faille); }
.dc { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dc { min-width: 0; }
.dc-carte { position: relative; width: min(170px, 100%); }
.dc-carte .carte { pointer-events: none; }
.dc-nom { font-family: var(--display); color: var(--c); font-weight: 700; text-shadow: 0 1px 0 #000; }
.dc-stats { display: flex; gap: 8px; align-items: center; width: min(170px, 100%); }
.dc-atk { font-family: var(--display); font-weight: 900; color: #ffd27a; white-space: nowrap; }
.dc-pv { position: relative; flex: 1; height: 16px; border-radius: 8px; background: #1a0a0a; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #4a2a22; overflow: hidden; }
.dc-pv i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#ff7a6a, #b0261e); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.dc-pv b { position: relative; display: block; text-align: center; font: 900 12px/16px var(--display); color: #fff; text-shadow: 0 1px 0 #000; }
.dc-objet { font-size: 12px; color: var(--or-clair); } .dc-extra { font-size: 12px; color: var(--sourdine); text-align: center; }
.dc-degats { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 6; font: 900 34px var(--display); color: #ff4a3a; text-shadow: 0 2px 0 #000, 0 0 10px #000; pointer-events: none; animation: dc-degats 1.1s ease-out forwards; }
.dc-degats.epines { color: #9be27a; }
@keyframes dc-degats { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.dc.brise .dc-carte { animation: dc-brise .8s ease-in forwards; }
.dc.brise .dc-carte::after, .dc.brise-fixe .dc-carte::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 47%, rgba(0, 0, 0, .85) 48%, rgba(255, 230, 180, .8) 49%, transparent 50.5%), linear-gradient(35deg, transparent 58%, rgba(0, 0, 0, .8) 59%, rgba(255, 230, 180, .7) 60%, transparent 61.5%), linear-gradient(170deg, transparent 30%, rgba(0, 0, 0, .7) 31%, transparent 32.5%); }
.dc.brise-fixe .dc-carte { filter: grayscale(.8) brightness(.6); }
@keyframes dc-brise { 0% { filter: none; transform: none; } 25% { filter: brightness(1.6); transform: rotate(-2deg) scale(1.03); } 100% { filter: grayscale(.85) brightness(.55); transform: rotate(4deg) translateY(10px) scale(.95); } }
.dc.vainqueur .dc-carte .carte { box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--or-clair), 0 0 22px 6px color-mix(in srgb, var(--c) 60%, transparent); }
@media (max-width: 520px) { .duel-anime { gap: 4px; } .duel-anime .contre { font-size: 13px; } .dc-stats { gap: 4px; } .dc-atk { font-size: 12px; } }

/* ---------- 3.1 : carte jouée qui vole vers le plateau ---------- */
.carte-vol { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.carte-vol .carte { pointer-events: none; box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px var(--or-clair), 0 12px 26px rgba(0, 0, 0, .7); }
.carte-vol.sort .carte { box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px #c39bff, 0 0 40px 12px rgba(168, 123, 255, .55); }

/* ---------- 3.1 : écran de fin de partie ---------- */
.recit { margin: 8px 0 4px; }
.recit-titre { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #140d0e), #140d0e); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent); }
.recit-titre small { display: block; font-size: 12px; color: var(--sourdine); }
.recit-titre b { font-family: var(--logo); font-size: 24px; color: #fff4d6; text-shadow: 0 0 12px var(--c); }
.recit-sigil { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 0 2px #ffe7a3, 0 0 16px var(--c); color: #1a0e08; }
.recit-sigil .sigil { width: 70%; height: 70%; }
.courbe { width: 100%; height: auto; margin: 10px 0 2px; display: block; }
.courbe-grille { stroke: #3a2a22; stroke-width: 1; }
.courbe-objectif { stroke: var(--or); stroke-width: 1.5; stroke-dasharray: 6 5; }
.courbe-txt { font: 11px var(--texte); fill: var(--sourdine); } .courbe-txt.or { fill: var(--or-clair); }
.courbe-ligne { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: .85; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: courbe-trace 1.8s ease-out forwards; }
.courbe-ligne.gagnant { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 4px var(--c)); }
@keyframes courbe-trace { to { stroke-dashoffset: 0; } }
body.anim-reduites .courbe-ligne { animation: none; stroke-dashoffset: 0; }
.recit-moments { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--encre); }
.recit-moments li { margin: 3px 0; }

/* ---------- 3.1 : dos de carte et ouverture de coffre ---------- */
.dos-carte { width: 100%; aspect-ratio: 5 / 7; border-radius: 9% / 6.5%; overflow: hidden; box-shadow: inset 0 0 0 2px #120a06, 0 6px 14px rgba(0, 0, 0, .6); }
.dos-carte svg { width: 100%; height: 100%; display: block; }
.coffre-item { animation: none; }
.coffre-item .flip { position: relative; perspective: 900px; }
.coffre-item .flip-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: none; }
.coffre-item .flip-dos { position: absolute; inset: 0; z-index: 2; animation: flip-dos .6s ease-in var(--d) forwards; }
.coffre-item .flip-recto { position: relative; transform: rotateY(180deg); animation: flip-recto .6s ease-out var(--d) forwards; }
@keyframes flip-dos { 0% { transform: rotateY(0); } 60% { transform: rotateY(-100deg) scale(1.05); } 100% { transform: rotateY(-180deg); visibility: hidden; } }
@keyframes flip-recto { 0% { transform: rotateY(180deg); } 40% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } }
.coffre-item .coffre-tag { opacity: 0; animation: revele .4s ease-out calc(var(--d) + .5s) forwards; }
.coffre-eclat { position: absolute; inset: -20%; z-index: -1; border-radius: 50%; opacity: 0; pointer-events: none; }
.coffre-item:is(.r-R, .r-E, .r-L, .r-M) .coffre-eclat { animation: coffre-eclat 1.4s ease-out calc(var(--d) + .45s) forwards; }
.coffre-item.r-R .coffre-eclat { background: radial-gradient(closest-side, rgba(78, 163, 255, .7), transparent); }
.coffre-item.r-E .coffre-eclat { background: radial-gradient(closest-side, rgba(194, 123, 255, .75), transparent); }
.coffre-item.r-L .coffre-eclat { background: radial-gradient(closest-side, rgba(255, 171, 54, .85), transparent); }
.coffre-item.r-M .coffre-eclat { background: radial-gradient(closest-side, rgba(255, 79, 122, .85), transparent); }
@keyframes coffre-eclat { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: .35; transform: scale(1); } }
body.anim-reduites .coffre-item .flip-dos { display: none; }
body.anim-reduites .coffre-item .flip-recto { transform: none; animation: none; }
body.anim-reduites .coffre-item .coffre-tag { opacity: 1; animation: none; }
/* Pile du paquet : le dos de carte */
.pile-tas:not(.defausse) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Crect width='100' height='140' rx='9' fill='%23281520'/%3E%3Crect x='6' y='6' width='88' height='128' rx='6' fill='none' stroke='%23e3a640' stroke-width='2'/%3E%3Cpath d='M50 22L78 70L50 118L22 70Z' fill='none' stroke='%23e3a640' stroke-width='2'/%3E%3Cpath d='M54 12L44 44L56 62L42 92L52 128' fill='none' stroke='%23c39bff' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ===== 3.1.1 : la page d'accueil devient un site, séparé du jeu =====
   Plus de barre de navigation du jeu ici : un en-tête de site (liens vers les sections, langue, « Lancer le jeu »),
   des bandes pleine largeur aux couleurs alternées (parchemin / nuit / faille) et un vrai pied de page. */
#titre.site { --parch: #efe2c4; --parch2: #e3d1aa; --encre-site: #2a1c12; --encre-site2: #5a4430; }
#titre .heros { min-height: min(calc(100vh - 64px), 820px); }
.site-tete { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 max(16px, 4vw);
  background: rgba(12, 9, 11, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(226, 181, 82, .14); transition: background .2s, box-shadow .2s; }
.site-tete.defile { background: rgba(12, 9, 11, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); border-bottom-color: rgba(226, 181, 82, .3); }
.site-logo, .site-logo-pied { font-family: var(--logo); font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: .01em; white-space: nowrap; border: 0; background: none; padding: 6px 0; cursor: pointer; margin: 0;
  background: linear-gradient(180deg, #fff6d6, #ffd77a 45%, #c98a2c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-logo span, .site-logo-pied span { color: transparent; }
.site-liens { display: flex; gap: 4px; margin: 0 auto; }
.site-liens button { font: 700 13px/1 var(--display); letter-spacing: .06em; color: #d9ccb4; background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.site-liens button:hover, .site-liens button:focus-visible { color: var(--or-clair); background: rgba(226, 181, 82, .1); }
.site-outils { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-liens + .site-outils { margin-left: 0; }
.site-langue { display: flex; align-items: center; gap: 6px; }
.site-jouer { min-height: 38px; padding: 6px 16px; font-size: 14px; }
.heros-gratuit { margin: 16px 0 0; color: var(--sourdine); font-size: 14px; }
#titre .raccourcis { margin-bottom: 56px; }

.bande { position: relative; padding: 76px max(20px, 6vw); scroll-margin-top: 64px; }
.bande-int { max-width: 1200px; margin: 0 auto; }
.bande-etroite { max-width: 820px; }
.bande h2 { font-size: clamp(28px, 3.4vw, 42px); text-align: center; margin-bottom: 10px; }
.bande .intro { text-align: center; max-width: 46em; margin: 0 auto 38px; font-size: 17px; color: var(--sourdine); }
.bande-sur { text-align: center; margin: 0 0 6px; font: 700 13px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--faille2); }

/* Parchemin : bords « fendus » en haut et en bas */
.bande-parchemin { color: var(--encre-site); background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, .35), transparent 70%), var(--grain), linear-gradient(var(--parch), var(--parch2));
  clip-path: polygon(0 14px, 8% 0, 17% 12px, 29% 2px, 41% 15px, 52% 3px, 63% 13px, 74% 1px, 86% 14px, 94% 4px, 100% 12px, 100% calc(100% - 12px), 92% 100%, 81% calc(100% - 13px), 69% calc(100% - 2px), 57% calc(100% - 15px), 46% calc(100% - 3px), 34% calc(100% - 14px), 22% 100%, 11% calc(100% - 12px), 0 calc(100% - 3px)); }
.bande-parchemin h2, .bande-parchemin h3 { color: #3a220e; text-shadow: none; }
.bande-parchemin .intro { color: var(--encre-site2); }
.bande-parchemin .bande-sur { color: #7a4a9a; }
.bande-parchemin .etape { background: linear-gradient(#fbf3df, #f1e3c2); box-shadow: 0 0 0 1px #b8935a, 0 10px 24px rgba(70, 40, 10, .18); }
.bande-parchemin .etape p { color: var(--encre-site2); }
.bande-parchemin .etape .sigil { color: #a8701c; filter: none; }
.bande-parchemin .victoire-bloc { background: linear-gradient(90deg, rgba(122, 74, 154, .14), transparent), #f7ecd3; box-shadow: 0 0 0 1px #b8935a; }
.bande-parchemin .victoire-bloc p { color: var(--encre-site2); }
.bande-parchemin .victoire-bloc .sigil { color: #7a4a9a; }

.bande-sombre { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .25) 70%, transparent); }
.bande-faille { background: radial-gradient(ellipse 60% 70% at 80% 30%, rgba(168, 123, 255, .3), transparent 70%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(79, 227, 212, .14), transparent 70%), linear-gradient(#1a1030, #0f0a18);
  border-top: 1px solid rgba(168, 123, 255, .35); border-bottom: 1px solid rgba(168, 123, 255, .35); }
.bande-faille .intro { color: #cbbbe6; }
.chiffres { list-style: none; margin: -14px auto 42px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.chiffres li { min-width: 120px; padding: 12px 18px; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(168, 123, 255, .4); }
.chiffres b { display: block; font: 900 30px/1 var(--display); color: var(--or-clair); text-shadow: 0 0 16px rgba(226, 181, 82, .35); }
.chiffres span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #cbbbe6; }

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-q { border-radius: 12px; background: #f8eed8; box-shadow: 0 0 0 1px #c3a06a; }
.faq-q summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; position: relative; font: 700 17px/1.3 var(--display); color: #3a220e; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 900 22px/1 var(--texte); color: #a8701c; }
.faq-q[open] summary::after { content: '–'; }
.faq-q summary:focus-visible { outline: 2px solid #7a4a9a; outline-offset: 2px; border-radius: 12px; }
.faq-q p { margin: 0; padding: 0 18px 18px; color: var(--encre-site2); font-size: 16px; }

#titre .titre-fin { padding: 80px 20px 70px; text-align: center; }
.site-pied { border-top: 1px solid rgba(226, 181, 82, .2); background: rgba(0, 0, 0, .35); padding: 44px max(20px, 6vw) 10px; }
.site-pied-int { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.site-pied-marque p:not(.site-logo-pied) { color: var(--sourdine); margin: 10px 0 0; max-width: 26em; }
.site-logo-pied { cursor: default; font-size: 24px; }
.site-pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.site-pied-col h3 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; text-shadow: none; }
.site-pied-col button { background: none; border: 0; padding: 4px 0; color: #d9ccb4; font: inherit; cursor: pointer; }
.site-pied-col button:hover, .site-pied-col button:focus-visible { color: var(--or-clair); text-decoration: underline; }
#titre .pied-titre { margin: 32px auto 0; padding: 16px 0 24px; border-top: 1px solid rgba(255, 255, 255, .06); max-width: 1200px; }

@media (max-width: 980px) {
  .site-liens { display: none; }
  .site-outils { margin-left: auto; }
}
@media (max-width: 620px) {
  .site-tete { height: 56px; gap: 10px; padding: 0 12px; }
  .site-logo { font-size: 17px; }
  .site-jouer { display: none; }
  #titre .heros { min-height: 0; }
  .bande { padding: 56px 16px; scroll-margin-top: 56px; }
  .chiffres li { min-width: 0; flex: 1 1 40%; }
  .site-pied-int { grid-template-columns: 1fr 1fr; }
  .site-pied-marque { grid-column: 1 / -1; }
}
.heros-fond { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.bande-parchemin .etape .sigil { width: 76px; height: 76px; padding: 14px; border-radius: 50%; color: var(--or); background: radial-gradient(circle at 35% 30%, #3a2a22, #160f10 75%);
  box-shadow: 0 0 0 2px #b8935a, 0 6px 14px rgba(70, 40, 10, .3); filter: none; }
.bande-parchemin .victoire-bloc .sigil { flex-basis: 56px; width: 56px; height: 56px; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2a22, #160f10 75%); box-shadow: 0 0 0 2px #b8935a; color: var(--faille); }
.bande-parchemin .victoire-bloc .sigil.or { color: var(--or); }

/* ===== 3.1.1 : Guide des mots-clés (panneau latéral, non bloquant) ===== */
.guide { position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: min(420px, 100vw); display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 220, 160, .05), transparent 30%), linear-gradient(#211a1c, #141012); box-shadow: 1px 0 0 #0a0607, 4px 0 0 var(--or-sombre), 18px 0 40px rgba(0, 0, 0, .6); animation: guide-entre .22s ease-out; }
.guide[hidden] { display: none; }
@keyframes guide-entre { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guide-tete h2 { font-size: 24px; }
.guide-fermer { font-size: 18px; }
.guide-intro { margin: 0; color: var(--sourdine); font-size: 14px; }
.guide-champ { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--or-sombre); background: #0f0b0c; color: var(--encre); font: inherit; }
.guide-champ:focus-visible { outline: 2px solid var(--faille2); outline-offset: 1px; }
.guide-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-cat { font: 600 13px/1 var(--texte); padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(226, 181, 82, .35); background: rgba(255, 255, 255, .03); color: #d9ccb4; cursor: pointer; }
.guide-cat.actif { background: var(--or); color: #2a1606; border-color: var(--or); }
.guide-liste { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 10px; scroll-padding-top: 6px; }
.guide-groupe h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--faille2); text-shadow: none; margin: 14px 0 6px; }
.guide-entree { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); margin-bottom: 6px; outline: none; }
.guide-entree h4 { margin: 0 0 4px; font: 700 16px/1.25 var(--display); color: var(--or-clair); }
.guide-entree p { margin: 0; color: #e3d6bf; font-size: 14.5px; }
.guide-entree .guide-voir { margin-top: 6px; font-size: 13px; color: var(--sourdine); }
.guide-voir button { background: none; border: 0; padding: 0 2px; color: var(--faille2); font: inherit; text-decoration: underline; cursor: pointer; }
.guide-entree.eclaire { animation: guide-eclaire 1.6s ease-out; }
@keyframes guide-eclaire { 0%, 30% { background: rgba(226, 181, 82, .28); box-shadow: inset 0 0 0 1px var(--or); } 100% { background: rgba(255, 255, 255, .03); box-shadow: none; } }
.guide-vide { color: var(--sourdine); text-align: center; margin-top: 30px; }
/* Mots-clés soulignés et puces sous les cartes */
.mot-guide { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help; text-decoration: underline dotted rgba(79, 227, 212, .85); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.mot-guide:hover, .mot-guide:focus-visible { color: var(--faille2); outline: none; }
body.sans-mots-guide .mot-guide { text-decoration: none; cursor: inherit; pointer-events: none; }
.guide-puces { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--sourdine); }
.puce-guide { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(79, 227, 212, .5); background: rgba(79, 227, 212, .08); color: #bff6ee; font: 600 13px/1.2 var(--texte); cursor: help; }
.puce-guide:hover, .puce-guide:focus-visible { background: rgba(79, 227, 212, .2); }
.ic-gauche .guide-puces { justify-content: flex-start; }
@media (max-width: 620px) { .guide { width: 100vw; top: auto; height: 78vh; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 0 var(--or-sombre), 0 -18px 40px rgba(0, 0, 0, .6); animation-name: guide-monte; } }
@keyframes guide-monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 620px) {
  .guide-intro { display: none; }
  .guide-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .guide-cat { flex: none; }
  /* Barre de jeu sur deux rangées : boutons, puis infos de la partie sur une ligne */
  #jeu .barre { flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px; }
  #jeu .barre > .btn { padding-left: 12px; padding-right: 12px; }
  #jeu .infos-partie { flex: 1 1 100%; gap: 2px 14px; font-size: 13px; }
  #jeu .infos-partie .nom-plateau { display: none; }
}

/* ===== 3.1.2 : éditeur de paquets ===== */
body.avec-nav .ed-paquet { top: 70px; max-height: calc(100vh - 82px); }
.ed-compte small { display: block; font-family: var(--texte); font-size: 13px; color: var(--sourdine); margin-top: 2px; }
.ed-compte.trop { color: #ffb36b; }
.ed-flottant { display: none; }
@media (max-width: 860px) {
  .ed-flottant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; position: sticky; top: 0; z-index: 6; margin: 0 -4px 10px; padding: 8px 12px; border-radius: 0 0 12px 12px;
    background: rgba(20, 13, 16, .96); box-shadow: 0 1px 0 var(--or-sombre), 0 6px 16px rgba(0, 0, 0, .5); font-family: var(--display); color: #ff9b91; }
  body.avec-nav .ed-flottant { top: 58px; }
  .ed-flottant b { font-size: 20px; }
  .ed-flottant.ok { color: var(--bon); }
  .ed-flottant.trop { color: #ffb36b; }
  .ed-flottant span { font-family: var(--texte); font-size: 12.5px; color: var(--sourdine); }
}
@media (max-width: 760px) { body.avec-nav .ed-flottant { top: 52px; } }

/* ===== 3.1.2 : boutique de pochettes ===== */
.ecus { color: #ffd77a; text-shadow: 0 0 10px rgba(255, 200, 90, .45); margin-left: 14px; }
.ecu { color: #ffd77a; text-shadow: 0 0 8px rgba(255, 200, 90, .6); }
.coffre-ecus { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 215, 122, .08); box-shadow: inset 0 0 0 1px rgba(255, 215, 122, .3); color: #f3e2b8; }
.bq-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 4px 0 8px; }
.bq-tete .discret { flex: 1 1 320px; margin: 0; }
.bq-solde { font-family: var(--display); font-size: 18px; color: #f3e2b8; display: flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 12px; background: rgba(255, 215, 122, .07); box-shadow: inset 0 0 0 1px rgba(255, 215, 122, .35); }
.bq-solde b { font-size: 30px; color: #ffe7a3; }
.bq-solde .ecu { font-size: 22px; }
.bq-groupe { margin-top: 22px; }
.bq-groupe h2 { font-size: 20px; margin-bottom: 10px; }
.bq-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.bq-pochette { display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--bq) 16%, transparent), transparent 70%), linear-gradient(#251c1e, #171113); box-shadow: var(--cadre); }
.bq-visuel { position: relative; flex: none; width: 84px; height: 112px; border-radius: 8px 8px 10px 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bq) 85%, #fff 15%), color-mix(in srgb, var(--bq) 55%, #000 45%));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 8px 18px rgba(0, 0, 0, .5);
  clip-path: polygon(0 6px, 8% 0, 17% 6px, 25% 0, 33% 6px, 42% 0, 50% 6px, 58% 0, 67% 6px, 75% 0, 83% 6px, 92% 0, 100% 6px, 100% 100%, 0 100%); }
.bq-visuel .sigil { width: 50px; height: 50px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); opacity: .92; }
.bq-scelle { position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: rgba(0, 0, 0, .25); box-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.bq-nb { position: absolute; bottom: 6px; right: 7px; font: 900 13px/1 var(--display); color: #fff; text-shadow: 0 1px 2px #000; }
.bq-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.bq-corps h3 { font-size: 17px; }
.bq-corps p { margin: 0; font-size: 13.5px; color: #d9ccb4; }
.bq-corps .bq-manque { font-size: 12.5px; color: var(--sourdine); }
.bq-barre { height: 5px; border-radius: 3px; background: #0c0809; box-shadow: inset 0 0 0 1px #3a2a22; overflow: hidden; }
.bq-barre i { display: block; height: 100%; background: var(--bq); }
.bq-corps .btn { margin-top: auto; align-self: flex-start; }
.bq-chances { margin-top: 22px; }
.bq-ouverture h2 { text-align: center; }
.bq-ouverture .coffre-cartes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bq-bilan { text-align: center; font-weight: 700; margin: 14px 0 2px; color: #f3e2b8; }
.bq-ouverture .discret { text-align: center; margin: 0; }
@media (max-width: 760px) { .bq-ouverture .coffre-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .bq-ouverture .coffre-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { body.avec-nav .bulle { bottom: calc(80px + env(safe-area-inset-bottom)); } }
.bq-achat { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.bq-prix { font-family: var(--display); font-weight: 700; color: #ffe7a3; white-space: nowrap; }
.bq-prix.cher { color: var(--sourdine); }
.bq-achat .btn { white-space: nowrap; }
.fenetre:has(.bq-ouverture) { width: min(920px, 100%); max-width: 920px; }

/* ===== 3.1.3 ===== */
.case.detruite { animation: case-detruite .9s ease-out; }
@keyframes case-detruite { 0% { filter: brightness(2.6) sepia(1) hue-rotate(-40deg) saturate(4); } 30% { filter: brightness(1.6) saturate(2); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .case.detruite { animation: none; } }
/* Défausse : les cartes brillent en rouge */
.carte.jouable.a-defausser { box-shadow: inset 0 0 0 2px #120a06, inset 0 0 0 4px #ff5a4a, inset 0 0 0 5px #120a06, 0 0 16px 4px rgba(255, 70, 60, .65), 0 6px 14px rgba(0, 0, 0, .6); animation: defausse-pulse 1.4s ease-in-out infinite; }
@keyframes defausse-pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 80, 60, .6)); } }
.main.phase-defausse::before { content: ''; position: absolute; inset: -10px 0 auto; height: 60%; pointer-events: none; background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255, 60, 50, .22), transparent 70%); }
body.anim-reduites .carte.jouable.a-defausser { animation: none; }
/* Niveau des terres */
.niv-pastilles rect { stroke: #120a06; stroke-width: 1.2; }
.niv-pastilles .plein { fill: #ffd77a; }
.niv-pastilles .vide { fill: rgba(0, 0, 0, .45); }
.niv-pastilles.libre .plein { fill: #e8dcc4; opacity: .85; }
.niveau-libre { font-family: var(--display); font-weight: 700; font-size: 15px; fill: #fff4dc; paint-order: stroke; stroke: #120a06; stroke-width: 3px; letter-spacing: .04em; }
/* Bannières du joueur suivi */
.ban-anneau { fill: none; stroke: var(--bc); stroke-width: 6; filter: drop-shadow(0 0 6px var(--bc)); pointer-events: none; }
.ban-ok { fill: var(--bc); stroke: #120a06; stroke-width: 2.5; pointer-events: none; }
.ban-ok-txt { font: 900 18px/1 var(--texte); fill: #120a06; pointer-events: none; }
.ban-attente { fill: none; stroke: #ffe7a3; stroke-width: 4; stroke-dasharray: 12 8; opacity: .8; animation: ban-pulse 1.8s ease-in-out infinite; pointer-events: none; }
.chateau-attend .ban-attente { stroke: var(--bc); stroke-width: 6; stroke-dasharray: none; filter: drop-shadow(0 0 8px var(--bc)); }
@keyframes ban-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
body.anim-reduites .ban-attente { animation: none; }
/* Cases à parcourir au-dessus du pion */
.fig-pas { position: absolute; left: 50%; top: calc(var(--w) * -0.55); transform: translateX(-50%); min-width: calc(var(--w) * .62); height: calc(var(--w) * .62); padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font: 900 calc(var(--w) * .38)/1 var(--display); color: #1a0e08; background: radial-gradient(circle at 35% 30%, #fff6d6, #ffd77a 60%, #c98a2c);
  box-shadow: 0 0 0 2px #120a06, 0 0 12px rgba(255, 215, 122, .8); z-index: 3; pointer-events: none; }
.pion-pas circle { fill: #ffd77a; stroke: #120a06; stroke-width: 3; }
.pion-pas text { font: 900 22px/1 var(--display); fill: #1a0e08; }
/* Dé à 8 */
.de-arete { fill: none; stroke: #2a1406; stroke-width: 2.5; opacity: .45; }
.de-num { font: 900 56px/1 var(--display); fill: #2a1406; }
/* Fenêtre « tour de plateau » */
.tour-plateau { text-align: center; }
.tp-embleme { width: 70px; height: 70px; margin: 0 auto 6px; color: var(--or); filter: drop-shadow(0 0 14px rgba(226, 181, 82, .6)); }
.tp-embleme .sigil { width: 100%; height: 100%; }
.tp-detail { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 15px; }
.tp-detail th { text-align: left; font-weight: 400; color: #d9ccb4; padding: 7px 4px; border-bottom: 1px solid #2c2124; }
.tp-detail td { text-align: right; font-family: var(--display); font-weight: 700; color: #ffe7a3; padding: 7px 4px; border-bottom: 1px solid #2c2124; white-space: nowrap; }
.tp-detail .total th { color: var(--encre); font-weight: 700; border-bottom: 0; }
.tp-detail .total td { font-size: 22px; border-bottom: 0; }
.tp-plus { list-style: none; padding: 0; margin: 4px 0 0; font-size: 14px; color: var(--sourdine); display: grid; gap: 4px; }
/* 3.1.4 : boutique, prix et bouton sous la pochette */
.bq-gauche { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bq-gauche .bq-visuel { width: 84px; }
.bq-gauche .bq-prix { font-size: 14px; text-align: center; }
.bq-gauche .btn { width: 100%; white-space: nowrap; }
.bq-corps .bq-barre { margin-top: 2px; }
/* 3.1.6 : pochettes à deux éléments */
.bq-pochette[style*="--bq2"] .bq-visuel { background: linear-gradient(135deg, color-mix(in srgb, var(--bq) 80%, #fff 10%) 0 50%, color-mix(in srgb, var(--bq2) 80%, #fff 10%) 50% 100%); }
.bq-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 70px; }
.bq-duo .sigil { width: 34px; height: 34px; }
.bq-duo .sigil:first-child { margin-bottom: 22px; } .bq-duo .sigil:last-child { margin-top: 22px; }
.chateau-victoire .ban-attente { stroke: #ffd76a; animation: chateauVictoire 1.2s ease-in-out infinite alternate; }
@keyframes chateauVictoire { from { filter: drop-shadow(0 0 4px #ffd76a); } to { filter: drop-shadow(0 0 14px #ffd76a); } }
@media (prefers-reduced-motion: reduce) { .chateau-victoire .ban-attente { animation: none; } }