/* skin clean : bannières d'événements en « toast flottant » (variante A). Toutes les règles sous body.skin-clean.
   Une carte d'encre en haut au centre du plateau : tuile de la couleur du type à gauche (icône à l'encre, portrait,
   monstre, relique, sort), titre Lexend 700 en capitales, sous-titre, fine ligne lime du temps restant en bas.
   Entrée : fondu + 12 px vers le bas (220 ms) ; sortie : fondu + 6 px vers le haut à --out (posé par showBanner).
   À plat : ni ruban, ni filet, ni éclats, ni biais, ni ombre. Le DOM vient de app-events.js (plateHtml / bigHtml) :
   .ev-row et .ev-plate passent en display: contents pour que la tuile, le titre et le sous-titre tombent dans la
   grille de la carte (.ev-drift ; .ev-big pour le Défi). Une seule bannière à la fois (file de app-events.js). */
body.skin-clean #banner { --tk: #15121d; --tk-line: #2c2540; --tk-sub: #dcd6f2; --tk-lime: #c8e20a; --tk-gold: #ffd23f; --tk-silver: #cfd6de;
  --tk-bronze: #e08a3c; --tk-indigo: #6a5cff; --tk-red: #ff3b5c; --kc: var(--tk-gold);
  top: 170px; height: auto; justify-content: flex-start; padding: 0; }   /* PC : sous les pods flottants (prépa, écran 120-160) et la frise de combat (écran 68-120) */
/* PC : les petites notifs (#toast, top 180) descendent sous la carte tant qu'une bannière est là */
body.skin-clean:not(.mobile) #toast { transition: top .22s cubic-bezier(.22,1,.36,1); }
body.skin-clean:not(.mobile) #game.bn-on #toast { top: 252px; }
body.skin-clean.mobile #banner, body.skin-clean.mobile #banner.duel, body.skin-clean.mobile #banner.prep { top: calc(var(--evy, var(--by, 44px)) + 6px); height: auto; padding: 0; }

/* couleur de la tuile par type (kind de app-events.js : level, family, gold = rôle / dieu / Défi, legend = relique / sort / fusion) */
body.skin-clean #banner.level { --kc: var(--tk-lime); }
body.skin-clean #banner.family { --kc: var(--tk-silver); }
body.skin-clean #banner.gold .ev-cell { --kc: var(--tk-bronze); }   /* palier max d'un rôle */
body.skin-clean #banner.legend { --kc: var(--tk-gold); }   /* relique, fusion ★★★★ */
body.skin-clean #banner.legend .ev-emb.spell, body.skin-clean #banner.legend .ev-cell { --kc: var(--tk-indigo); }   /* sort évolué */

/* tout le décor « Esport + Ruban » se tait */
body.skin-clean #banner .ev-rb, body.skin-clean #banner .ev-rbl, body.skin-clean #banner .ev-ln, body.skin-clean #banner .ev-px,
body.skin-clean #banner .ev-sw, body.skin-clean #banner .ev-fl, body.skin-clean #banner .ev-emb-bg, body.skin-clean #banner .ev-pf > i,
body.skin-clean #banner .ev-dot, body.skin-clean #banner .ev-in, body.skin-clean #banner .ev-who, body.skin-clean #banner .ev-vs > i,
body.skin-clean #banner .ev-pk { display: none; }

/* ------------------------------------------------------------------ la carte (bannière ordinaire) */
body.skin-clean #banner .ev-drift, body.skin-clean #banner .ev-big { position: relative; box-sizing: border-box; display: grid; grid-template-columns: auto auto;
  grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-content: center; align-items: center; justify-items: start;
  width: auto; max-width: 92%; height: 68px; padding: 0 24px 0 8px; overflow: hidden;
  background: var(--tk); border: 1px solid var(--tk-line); border-radius: 14px; color: #fff;
  animation: tkCardIn .22s cubic-bezier(.22,1,.36,1) both, tkCardOut .3s cubic-bezier(.55,0,.8,.2) var(--out) forwards; }
body.skin-clean #banner .ev-row, body.skin-clean #banner .ev-plate { display: contents; }
/* fine ligne lime en bas : se vide pendant la tenue (de la fin de l'entrée à la sortie) */
body.skin-clean #banner .ev-bar, body.skin-clean #banner .ev-big::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tk-lime);
  transform-origin: 0 50%; animation: tkLine calc(var(--out) - 220ms) linear .22s both; }

/* la tuile : 52 px, couleur du type, contenu centré */
body.skin-clean #banner .ev-emb, body.skin-clean #banner .ev-cell { position: relative; grid-column: 1; grid-row: 1 / span 2; left: auto; top: auto; margin: 0;
  width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; background: var(--kc); border-radius: 10px; clip-path: none; transform: none;
  animation: tkPop .3s cubic-bezier(.22,1,.36,1) .08s both; }
body.skin-clean #banner .ev-cell .ev-ico { width: 34px; height: 34px; margin: 0; background: #15121d; animation: none; }   /* icône à l'encre sur tuile claire */
body.skin-clean #banner .ev-emb > img, body.skin-clean #banner .ev-emb > canvas { position: static; margin: 0; width: 40px; height: 40px; object-fit: contain; border-radius: 0; animation: none; }
body.skin-clean #banner .ev-emb.relic > img { width: 42px; height: 42px; }
body.skin-clean #banner .ev-emb.spell > img { width: 42px; height: 42px; border-radius: 8px; }
body.skin-clean #banner .ev-emb.god > img { width: 50px; height: 50px; object-fit: contain; }   /* portrait du dieu, entier */
body.skin-clean #banner .ev-emb.spr > canvas { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -30px 0 0 -33px; }   /* monstre de la famille / fusionné */

/* titre et sous-titre */
body.skin-clean #banner .ev-txt { grid-column: 2; grid-row: 1; align-self: end; padding: 0; }
body.skin-clean #banner .ev-title { font: 700 20px/1 Lexend, sans-serif; letter-spacing: .045em; text-transform: uppercase; color: #fff; white-space: nowrap; }
body.skin-clean #banner .ev-l { animation: none; }
body.skin-clean #banner .ev-stars { margin-left: .35em; gap: .04em; }
body.skin-clean #banner .ev-star { width: .85em; height: .85em; background: var(--tk-gold); animation: none; }
body.skin-clean #banner .bn-sub { grid-column: 2; grid-row: 2; align-self: start; display: block; height: auto; margin: 0; padding: 0; translate: none; transform: none;
  background: none; border-radius: 0; font: 600 12px/1.25 Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: var(--tk-sub); white-space: nowrap; animation: none; }
body.skin-clean #banner .bn-sub > span { display: inline; transform: none; animation: none; }
body.skin-clean #banner .bn-sub em, body.skin-clean #banner .bn-sub b { color: var(--tk-lime); font-weight: 700; }
/* sans tuile (cas rare) : le texte seul, marge gauche symétrique */
body.skin-clean #banner .ev-drift:not(:has(.ev-emb, .ev-cell)) { padding-left: 24px; }
body.skin-clean #banner .ev-drift:not(:has(.ev-emb, .ev-cell)) .ev-txt, body.skin-clean #banner .ev-drift:not(:has(.ev-emb, .ev-cell)) .bn-sub { grid-column: 1 / span 2; }

/* ------------------------------------------------------------------ grands moments : même carte */
body.skin-clean #banner .ev-hd { grid-column: 2; grid-row: 1; align-self: end; height: auto; padding: 0; margin: 0; background: none; box-shadow: none; transform: none; animation: none; }
body.skin-clean #banner .ev-hd span { transform: none; color: #fff; font: 700 20px/1 Lexend, sans-serif; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
body.skin-clean #banner .ev-big .bn-sub { margin: 0; }
/* Défi révélé : tuile or, toi (contour lime) et ton/tes adversaire(s) (contour rouge) en portraits ronds, pastille « VS » d'encre */
body.skin-clean #banner .ev-big.duel .ev-band { grid-column: 1; grid-row: 1 / span 2; position: relative; display: flex; align-items: center; gap: 2px;
  width: auto; min-width: 96px; height: 52px; margin: 0; padding: 0 5px; box-sizing: border-box; clip-path: none; background: var(--tk-gold); border-radius: 10px;
  animation: tkPop .3s cubic-bezier(.22,1,.36,1) .08s both; }
body.skin-clean #banner .ev-big.duel .ev-half { display: none; }
body.skin-clean #banner .ev-big.duel .ev-side { position: static; display: flex; align-items: center; gap: 0; width: auto; padding: 0; animation: none; }
body.skin-clean #banner .ev-big.duel .ev-side.R { margin-left: auto; }
body.skin-clean #banner .ev-big .ev-pf { position: relative; flex: none; box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: #2b2246; border: 2px solid var(--tk-lime); animation: none; }
body.skin-clean #banner .ev-big .ev-side.R .ev-pf { border-color: var(--tk-red); }
body.skin-clean #banner .ev-big .ev-side.R .ev-pf + .ev-pf { margin-left: -12px; }
body.skin-clean #banner .ev-big .ev-pf > img { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
body.skin-clean #banner .ev-big.duel.n3 .ev-side.R .ev-pf { width: 42px; height: 42px; }
body.skin-clean #banner .ev-big.duel .ev-vs { position: absolute; z-index: 2; left: 48px; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: var(--tk); display: grid; place-items: center; animation: none; }
body.skin-clean #banner .ev-big.duel .ev-vs::after { content: 'VS'; color: var(--tk-gold); font: 700 10.5px/1 Lexend, sans-serif; letter-spacing: .02em; }
/* Défi (préparation) : tuile or aux épées croisées, « Choisis ton adversaire » en sous-titre lime */
body.skin-clean #banner .ev-big.prep .ev-band { display: contents; }
body.skin-clean #banner .ev-big.prep .ev-half.F { grid-column: 1; grid-row: 1 / span 2; position: relative; left: auto; right: auto; top: auto; bottom: auto;
  width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; background: var(--tk-gold); border-radius: 10px; transform: none; clip-path: none;
  animation: tkPop .3s cubic-bezier(.22,1,.36,1) .08s both; }
body.skin-clean #banner .ev-big.prep .ev-half.F::after { content: ''; width: 34px; height: 34px; background: #15121d;
  -webkit-mask: url(dofus/assets/ui/ic/crossedSwords.png) center / contain no-repeat; mask: url(dofus/assets/ui/ic/crossedSwords.png) center / contain no-repeat; }
body.skin-clean #banner .ev-big.prep .ev-btitle { grid-column: 2; grid-row: 2; align-self: start; position: static; translate: none; display: block;
  font: 700 12px/1.25 Lexend, sans-serif; letter-spacing: 0; text-transform: none; color: var(--tk-lime); white-space: nowrap; animation: none; }

/* ------------------------------------------------------------------ téléphone : carte de 60 px (unités de la scène) */
body.skin-clean.mobile #banner .ev-drift, body.skin-clean.mobile #banner .ev-big { height: 60px; column-gap: 12px; row-gap: 5px; padding: 0 20px 0 7px; border-radius: 12px; max-width: 96%; }
body.skin-clean.mobile #banner .ev-emb, body.skin-clean.mobile #banner .ev-cell, body.skin-clean.mobile #banner .ev-big.prep .ev-half.F { width: 46px; height: 46px; border-radius: 9px; }
body.skin-clean.mobile #banner .ev-cell .ev-ico, body.skin-clean.mobile #banner .ev-big.prep .ev-half.F::after { width: 30px; height: 30px; }
body.skin-clean.mobile #banner .ev-emb.spr > canvas { width: 58px; height: 58px; margin: -26px 0 0 -29px; }
body.skin-clean.mobile #banner .ev-emb.god > img { width: 44px; height: 44px; }
body.skin-clean.mobile #banner .ev-title, body.skin-clean.mobile #banner .ev-hd span { font-size: 21px; }
body.skin-clean.mobile #banner .bn-sub, body.skin-clean.mobile #banner .ev-big.prep .ev-btitle { font-size: 14px; }
body.skin-clean.mobile #banner .ev-big.duel .ev-band { min-width: 86px; height: 46px; padding: 0 4px; }
body.skin-clean.mobile #banner .ev-big .ev-pf { width: 38px; height: 38px; }
body.skin-clean.mobile #banner .ev-big.duel .ev-vs { left: 43px; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
body.skin-clean.mobile #banner .ev-big.duel .ev-vs::after { font-size: 10px; }

body.skin-clean.noanim #banner .ev-drift, body.skin-clean.noanim #banner .ev-big, body.skin-clean.noanim #banner .ev-emb, body.skin-clean.noanim #banner .ev-cell,
body.skin-clean.noanim #banner .ev-big .ev-band, body.skin-clean.noanim #banner .ev-half.F { animation: none; }
body.skin-clean.noanim #banner .ev-bar, body.skin-clean.noanim #banner .ev-big::after { animation: none; }

@keyframes tkCardIn { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes tkCardOut { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -6px; } }
@keyframes tkLine { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tkPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* ================================================================== titres des scènes (sceneTitle : Top 4, Éliminé, Top 1, Sanctuaire)
   la même carte d'encre, en grand (tailles en --u de l'hôte) : tuile de la couleur du type (couronne or, crâne rouge), titre
   blanc, filet de la couleur du type en bas ; sous-titre en pilule indigo au texte lime (comme le titre « Ton sort évolue »).
   Ni ruban, ni hachures, ni filets, ni biais. La fenêtre d'évolution garde son propre titre (skin-evo.css). */
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct { --tkc: #15121d; clip-path: none; gap: calc(12 * var(--u)); }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct :is(.ev-rb, .ev-rbl, .ev-ln, .ev-pk, .ev-px, .ev-sw, .ev-fl, .ev-dot) { display: none; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-plate { height: calc(92 * var(--u)); overflow: hidden; clip-path: none; transform: none;
  background: var(--tkc); border: 1px solid #2c2540; border-radius: calc(16 * var(--u)); animation: tkCardIn .26s cubic-bezier(.22,1,.36,1) both; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-cell { width: calc(72 * var(--u)); height: calc(72 * var(--u)); margin-left: calc(10 * var(--u));
  border-radius: calc(13 * var(--u)); clip-path: none; background: var(--c); }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-cell .ev-ico { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0; background: #15121d; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct.kc-red .ev-cell .ev-ico { background: #fff; }   /* crâne blanc sur la tuile rouge */
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-txt { padding: 0 calc(36 * var(--u)) 0 calc(22 * var(--u)); }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-cell + .ev-txt { padding-left: calc(20 * var(--u)); }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-title { color: #fff; font-size: max(var(--fmin), calc(50 * var(--u) * var(--fit, 1))); letter-spacing: .03em; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-l { animation: none; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .ev-bar { height: calc(4 * var(--u)); background: var(--c); animation: none; transform: none; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .bn-sub { height: calc(34 * var(--u)); margin: 0; padding: 0 calc(18 * var(--u)); border-radius: calc(17 * var(--u));
  translate: none; transform: none; background: #170f3a; color: #c8e20a; font: 700 max(var(--fmin), calc(15 * var(--u)))/1 Lexend, sans-serif; letter-spacing: .1em;
  animation: tkCardIn .26s cubic-bezier(.22,1,.36,1) .08s both; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .bn-sub > span { transform: none; gap: .4em; animation: none; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct .bn-sub :is(em, b) { color: #fff; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct > .ev-hd { margin: 0; height: auto; padding: 0; background: none; box-shadow: none; transform: none; animation: tkCardIn .26s both; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct > .ev-hd span { transform: none; color: #ffd23f; font-size: max(var(--fmin), calc(18 * var(--u))); letter-spacing: .2em; }
body.skin-clean :is(.t4-head, .el-box, .ch-title, .lb-title) .sct.out :is(.ev-plate, .bn-sub, .ev-hd) { animation: tkCardOut .3s cubic-bezier(.55,0,.8,.2) forwards; }
body.skin-clean.noanim :is(.t4-head, .el-box, .ch-title, .lb-title) .sct :is(.ev-plate, .bn-sub, .ev-hd) { animation: none; }

/* ================================================================== petites notifs (#toast, makeToaster) : la même carte d'encre en petit
   (le fond var(--ink) du style d'origine est un triplet RGB dans le skin : la plaque y devenait transparente) ; tuile
   arrondie de la couleur du type, pas de biais ; entrée fondu + 8 px vers le bas, sortie fondu + 4 px vers le haut */
body.skin-clean .ev-toast { align-items: center; gap: calc(12 * var(--u)); min-height: calc(46 * var(--u)); padding: calc(5 * var(--u)); box-sizing: border-box;
  background: #15121d; border: 1px solid #2c2540; border-radius: calc(11 * var(--u)); clip-path: none; overflow: hidden; font-size: max(var(--fmin), calc(16 * var(--u)));
  animation: tkToastIn .22s cubic-bezier(.22,1,.36,1) both; }
body.skin-clean .ev-toast.out { animation: tkToastOut .26s cubic-bezier(.55,0,.8,.2) forwards; }
body.skin-clean .ev-toast > b { padding: 0 calc(18 * var(--u)) 0 0; }
body.skin-clean .tk-ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); align-self: center; border-radius: calc(8 * var(--u)); clip-path: none; background: var(--c); }
body.skin-clean .tk-ic:has(> img) { background: #2b2246; }
body.skin-clean .tk-ic > img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: 0; animation: none; }
body.skin-clean .tk-ic > .ev-ico { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: 0; background: #15121d; animation: none; }
body.skin-clean .ev-toast:is(.k-err, .k-net) .tk-ic > .ev-ico { background: #fff; }
body.skin-clean .tk-n { margin: 0 calc(16 * var(--u)) 0 calc(-8 * var(--u)); font-size: max(var(--fmin), calc(16 * var(--u))); }
body.skin-clean .tk-bar { height: calc(2 * var(--u)); animation: none; }
body.skin-clean.noanim .ev-toast { animation: none; }
@keyframes tkToastIn { from { opacity: 0; translate: 0 calc(-8 * var(--u)); } to { opacity: 1; translate: 0 0; } }
@keyframes tkToastOut { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 calc(-4 * var(--u)); } }