/* =====================================================================
   ALGATOR37 : L'EMPIRE BANGER V3 — REMASTER · style
   ===================================================================== */

:root {
    --p: #b026ff; --s: #ff2e9a; --bg: #07000d; --gold: #ffd700; --danger: #ff4444;
    --panel: #17021f; --text: #ffffff; --accent: #ff6b00; --green: #39ff6a; --ink: #0a0014;
    --ligne: rgba(255, 255, 255, 0.08);
    --doux: rgba(255, 255, 255, 0.05);
    --rayon: 22px;
}

/* ---------- thèmes de la V2 (codes secrets) ---------- */
.pink-mode { --p: #ff80bf; --s: #ffb3d9; --bg: #ffe6f2; --gold: #ff3399; --panel: #fff0f7; --text: #8a0047; --accent: #ff66b3; }
.harleen-mode { --p: #ff9900; --s: #ff6600; --bg: #1a0a00; --gold: #ffcc00; --panel: #2a1500; --text: #ffdd88; --accent: #b36b00; }
.hisoka-mode { --p: #9d4edd; --s: #c77dff; --bg: #10001a; --gold: #e0aaff; --panel: #1f0033; --text: #e8d5ff; --danger: #ff2ee0; --accent: #7b2cbf; }
.maxze-mode { --p: #2e9c3a; --s: #4fd15f; --bg: #041006; --gold: #66ff8f; --panel: #071c0a; --text: #c8ffd4; --accent: #0d3312; }
.antoff-mode { --p: #F54927; --s: #ff8552; --bg: #1a0500; --gold: #ffb347; --panel: #2a0a02; --text: #ffe0cc; --danger: #ff2200; --accent: #ff6a2b; }
.commentateur-mode { --p: #2598AD; --s: #4db8d1; --bg: #00161c; --gold: #6fe3ff; --panel: #002830; --text: #d6f6ff; --accent: #1b7a8c; }
.therock-mode { --p: #AD3DAA; --s: #d16bcf; --bg: #170018; --gold: #ff9ff0; --panel: #26002a; --text: #f5d9f2; --accent: #7a1f78; }
.sharkz-mode { --p: #8A9B01; --s: #b5c93d; --bg: #0e1200; --gold: #d4e84f; --panel: #1a2100; --text: #eaf5b8; --accent: #5c6600; }
.mabiche-mode { --p: #b35a73; --s: #c76b85; --bg: #180a0d; --gold: #e8a1b5; --panel: #260f15; --text: #f5d5dd; --accent: #5c2836; }
.ethan-mode { --p: #EF9B84; --s: #f7c4b5; --bg: #1f0f08; --gold: #ffcbb0; --panel: #2e1710; --text: #ffe8dc; --accent: #a85f47; }
.labubu-mode { --p: #4CAF63; --s: #7fd98f; --bg: #eafff0; --gold: #2e8b45; --panel: #d4ffe0; --text: #1b5e28; --accent: #7fe89a; }
.footastique-mode { --p: #0ADA40; --s: #DA0AA3; --bg: #060810; --gold: #0ADA40; --panel: #10071a; --text: #eaffe8; --accent: #DA0AA3; }
.pitchoune-mode { --p: #9aa144; --s: #2E696E; --bg: #0a0d05; --gold: #a3ab4a; --panel: #131a09; --text: #dfe8c8; --accent: #2E696E; }
.deaox-mode { --p: #3552d6; --s: #c2213f; --bg: #04030a; --gold: #b44fd0; --panel: #0d0a1a; --text: #e8e4ff; --danger: #d0213f; --accent: #288E11; }
.banger37-mode { --p: #08955D; --s: #3fd696; --bg: #01120b; --gold: #4fffb8; --panel: #021f13; --text: #d0ffe9; --accent: #045c3a; }
.gaufre-mode { --p: #C3B455; --s: #e0d488; --bg: #171203; --gold: #e3d27a; --panel: #241d08; --text: #fff6d9; --accent: #7a6f2b; }
.lezard-mode { --p: #14A414; --s: #4fe84f; --bg: #030f03; --gold: #7dff7d; --panel: #081c08; --text: #d4ffd4; --accent: #0a6b0a; }
.fusee-mode { --p: #91A7A3; --s: #c3d4d1; --bg: #0d1211; --gold: #b8ffe8; --panel: #171e1c; --text: #e8f2f0; --accent: #4e6560; }
.orage-mode { --p: #DBFA2E; --s: #eeff8a; --bg: #0a0d02; --gold: #DBFA2E; --panel: #151a05; --text: #f5ffcc; --accent: #8fa314; }
.glace-mode { --p: #C98FBD; --s: #b77aab; --bg: #fdf3fa; --gold: #b45a9c; --panel: #f7e4f3; --text: #6b3a5f; --accent: #b16aa0; }
.flamme-mode { --p: #e08e0b; --s: #ff9d2e; --bg: #150800; --gold: #ffb347; --panel: #241000; --text: #ffe0b8; --accent: #7a4d02; }
.diamant-mode { --p: #45CAE8; --s: #a8ecff; --bg: #010e14; --gold: #d4faff; --panel: #041b22; --text: #e0f9ff; --accent: #1d7a8f; }
.ovni-mode { --p: #2e9c1a; --s: #5fd14a; --bg: #020a01; --gold: #7dff5a; --panel: #0a1505; --text: #c8ffb8; --accent: #145c07; }
.maman-mode { --p: #1cd8c9; --s: #7ff5e8; --bg: #001f1c; --gold: #40e0d0; --panel: #013330; --text: #d9fffb; --accent: #0d7a6e; }
.poire-mode { --p: #6fbf3a; --s: #b8ff6e; --bg: #142b0a; --gold: #d4ff9e; --panel: #1e3d10; --text: #eaffd4; --accent: #3d7a1a; }
.kendji-mode { --p: #d98e2b; --s: #ffcf6e; --bg: #1f1206; --gold: #ffcf6e; --panel: #2e1c0a; --text: #ffe9c2; --accent: #a85f14; }
.crepes-mode { --p: #e0a94a; --s: #ffe0a3; --bg: #241505; --gold: #ffdba3; --panel: #331e08; --text: #fff2d9; --accent: #a86a1f; }
.collab-mode { --p: #2e8bff; --s: #9fd4ff; --bg: #071a2e; --gold: #a8e0ff; --panel: #0d2740; --text: #dcefff; --accent: #1a5ca8; }
.peggle-mode { --p: #a855f7; --s: #ffd23f; --bg: #1a0a2e; --gold: #ffd23f; --panel: #2a1245; --text: #f2e0ff; --accent: #7a2ecf; }
.rainbow-mode { --p: #ff2ee0; --s: #2eeaff; --bg: #0a0a14; --gold: #ffd23f; --panel: #150e26; --text: #f5f0ff; --accent: #7a2ecf; }
.elesis-mode { --p: #ff2222; --s: #ffaaaa; --bg: #1a0606; --gold: #ffaaaa; --panel: #2e0a0a; --text: #ffe0e0; --accent: #a81414; }
.peadle-mode { --p: #ff6b9d; --s: #6bcfff; --bg: #0d1a2e; --gold: #6bcfff; --panel: #142640; --text: #e0f2ff; --accent: #a83d6a; }
.yoogos-mode { --p: #d4af37; --s: #ffdd66; --bg: #0d0505; --gold: #ffdd66; --panel: #1c0c0c; --text: #ffeecc; --accent: #8a6b1a; }
.timiz-mode { --p: #00ffea; --s: #ff00c8; --bg: #05001a; --gold: #ff00c8; --panel: #10052e; --text: #dffffa; --accent: #00b3a0; }
.solajoe-mode { --p: #ffb300; --s: #ffe066; --bg: #2e1a00; --gold: #ffe066; --panel: #402505; --text: #fff2cc; --accent: #cc8800; }
.tristan-mode { --p: #4a90a4; --s: #a8d8e0; --bg: #0d1a1a; --gold: #a8d8e0; --panel: #142828; --text: #dcf2f2; --accent: #2a6070; }
.mindfuck-mode { --p: #ff0055; --s: #aa00ff; --bg: #0a0014; --gold: #ff00aa; --panel: #180026; --text: #ffe0f5; --accent: #7a00cc; }
.green-toon-mode { --p: #39ff6a; --s: #b026ff; --bg: #06170b; --panel: #0d2b14; --gold: #39ff6a; --text: #d8ffe2; --accent: #1b8a3a; }
.joas-mode { --p: #1faa6b; --s: #7de3b4; --bg: #03140c; --gold: #9dffcf; --panel: #062318; --text: #d7ffee; --accent: #0e6b42; }
.kebab-mode { --p: #e63946; --s: #ff9f1c; --bg: #1a0a00; --gold: #ff9f1c; --panel: #2a1000; --text: #ffddaa; --accent: #b3261e; }
.palme-mode { --p: #00b4d8; --s: #90e0ef; --bg: #03045e; --gold: #caf0f8; --panel: #023e8a; --text: #caf0f8; --accent: #0077b6; }
.eminem-mode { --p: #9a9a9a; --s: #e8e8e8; --bg: #0b0b0b; --gold: #ffffff; --panel: #1a1a1a; --text: #f2f2f2; --accent: #555555; }
.lutte-mode { --p: #1f4fd6; --s: #ffffff; --bg: #06112e; --gold: #ffd100; --panel: #0c1c47; --text: #e6ecff; --accent: #0a2a8a; }
.sharkzcity-mode { --p: #ff6b00; --s: #ffcc00; --bg: #0d0d0d; --gold: #ffcc00; --panel: #1a1a2e; --text: #ffffff; --accent: #00d4ff; --green: #00d4ff; }
.antoffempire-mode { --p: #00e676; --s: #69f0ae; --bg: #071a0e; --gold: #ffd700; --panel: #0d2318; --text: #e0ffe8; --danger: #ff4444; --accent: #00bfa5; --green: #69f0ae; }
.mentorfrmonde-mode { --p: #9146ff; --s: #3ddc84; --bg: #0b0616; --gold: #d4b8ff; --panel: #1a1030; --text: #f0e8ff; --danger: #ff4d6d; --accent: #3ddc84; --green: #3ddc84; }
.benafett-mode { --p: #4caf50; --s: #a5d6a7; --bg: #06180c; --gold: #cddc39; --panel: #0d2415; --text: #e7ffe9; --accent: #2e7d32; }
.douza-mode { --p: #ff2e2e; --s: #ff7676; --bg: #150303; --gold: #ff9a3c; --panel: #260707; --text: #ffdede; --danger: #ff2200; --accent: #a30000; }
.ksushi-mode { --p: #ff7597; --s: #ffd1dc; --bg: #1a0710; --gold: #ffe066; --panel: #2a0f1a; --text: #ffe9f0; --accent: #c2185b; }
.dakime-mode { --p: #6c8cff; --s: #a5b8ff; --bg: #070b1c; --gold: #b9c6ff; --panel: #101733; --text: #e6ebff; --accent: #3a4ea8; }
.firewolf-mode { --p: #ff6a00; --s: #ffb347; --bg: #180800; --gold: #ffcc33; --panel: #261000; --text: #ffe6cc; --accent: #b33c00; }
.jeff-mode { --p: #ffd60a; --s: #fff3a0; --bg: #161200; --gold: #ffe94e; --panel: #241d00; --text: #fff8d6; --accent: #9c8400; }
.salim-mode { --p: #fffc00; --s: #fff970; --bg: #101010; --gold: #fffc00; --panel: #1c1c1c; --text: #f7f7f7; --accent: #8f8d00; }
.nathanox-mode { --p: #a44dff; --s: #d6a5ff; --bg: #0e0518; --gold: #ffd166; --panel: #1c0b2e; --text: #f1e6ff; --accent: #6a1fb0; }
.peter-mode { --p: #ff4d4d; --s: #ffb3b3; --bg: #121212; --gold: #e0e0e0; --panel: #1f1f1f; --text: #f5f5f5; --accent: #8b0000; }
.matthieu-mode { --p: #c8a97e; --s: #e8d7b9; --bg: #14100a; --gold: #e8c07d; --panel: #241c12; --text: #f6ecd9; --accent: #7a5c34; }
.piment-mode { --p: #ff4500; --s: #ff6b35; --bg: #1a0500; --gold: #ff8c00; --panel: #2a0a00; --text: #ffcc99; --accent: #cc3700; }
.parachute-mode { --p: #00cfff; --s: #80dfff; --bg: #000d1a; --gold: #00cfff; --panel: #001a33; --text: #b3ecff; --accent: #0090b3; }
.cropcrop-mode { --p: #ff80ab; --s: #ffb3c6; --bg: #1a0010; --gold: #ff4081; --panel: #2a0018; --text: #ffe0ea; --accent: #c2185b; }
.mentorfr-mode { --p: #9146ff; --s: #3ddc84; --bg: #0e0718; --gold: #bf94ff; --panel: #1f1235; --text: #efe6ff; --accent: #3ddc84; }
.tsarbomba-mode { --p: #ff4400; --s: #ffaa00; --bg: #1a0500; --gold: #ffaa00; --panel: #2e0a00; --text: #ffe0c2; --danger: #ff2200; --accent: #cc2200; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; background-color: var(--bg); color: var(--text);
    font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; overflow-x: hidden;
    background-image:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--p) 18%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 88% 90%, color-mix(in srgb, var(--green) 10%, transparent) 0%, transparent 45%),
        radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1.3px, transparent 1.3px);
    background-size: auto, auto, 22px 22px;
    background-attachment: fixed;
    transition: background-color .5s;
    -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; color: inherit; }
img { max-width: 100%; }
.bangers { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-weight: 400; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--p) 70%, transparent); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- en-tête ---------- */
#entete {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1.5px solid color-mix(in srgb, var(--p) 35%, transparent);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.logo { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.65rem; letter-spacing: 2.5px; white-space: nowrap; line-height: 1; }
.logo .l1 { color: var(--p); }
.logo .l2 { color: var(--green); }
.logo .l3 {
    display: inline-block; margin-left: 4px; padding: 3px 9px 1px; border-radius: 10px; font-size: 1.1rem;
    background: linear-gradient(135deg, var(--gold), var(--accent)); color: #1a0a00; transform: rotate(-4deg);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.logo .remaster { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .62rem; letter-spacing: 4px; opacity: .55; margin-top: 3px; }
.entete-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pilule {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--doux); border: 1.5px solid color-mix(in srgb, var(--p) 30%, transparent); font-size: .82rem; white-space: nowrap;
}
.pilule b { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; letter-spacing: 1px; font-size: 1.05rem; color: var(--p); }
.entete-actions { display: flex; gap: 8px; align-items: center; }
.btn-rond {
    width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--p) 40%, transparent);
    background: var(--doux); font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; position: relative;
    transition: transform .12s, background .2s;
}
.btn-rond:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--p) 18%, transparent); }
#indic-save { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); transition: background .3s; }
#indic-save.en-cours { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ---------- bandeau des events globaux ---------- */
#bandeau-events { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 12px; }
#bandeau-events:not(:empty) { padding: 10px 12px 0; }
.bandeau {
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.05rem; padding: 7px 18px; border-radius: 999px;
    background: linear-gradient(90deg, var(--p), var(--green)); color: #000; box-shadow: 0 0 22px color-mix(in srgb, var(--p) 55%, transparent);
    cursor: pointer; border: 0; display: inline-flex; align-items: center; gap: 6px;
}
.bandeau .minuteur { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .85rem; margin-left: 6px; }
.bandeau-mission { font: 900 .78rem 'Nunito', sans-serif; letter-spacing: 0; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .25); }

/* ---------- mise en page ---------- */
#jeu {
    display: grid; grid-template-columns: minmax(330px, 1fr) minmax(330px, 1fr) minmax(360px, 1.12fr);
    gap: 18px; padding: 18px; max-width: 1640px; margin: 0 auto; align-items: start;
}
.panneau {
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--p)) 0%, var(--panel) 60%);
    border-radius: var(--rayon); padding: 16px;
    border: 1.5px solid color-mix(in srgb, var(--green) 20%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
    position: relative;
}
.colonne { min-width: 0; }
#col-boutique .panneau, #col-empire .panneau { max-height: calc(100vh - 110px); display: flex; flex-direction: column; position: sticky; top: 84px; }
.defile { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; margin-right: -4px; flex: 1; min-height: 0; }
.titre-panneau { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.35rem; margin: 0 0 10px; }

/* ---------- onglets ---------- */
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.onglet {
    flex: 1 1 auto; min-width: 0; padding: 9px 8px; border-radius: 14px; cursor: pointer; position: relative;
    border: 1.5px solid color-mix(in srgb, var(--p) 30%, transparent); background: var(--doux);
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .95rem; opacity: .62; transition: all .15s; white-space: nowrap;
}
.onglet:hover { opacity: .9; }
.onglet.actif { opacity: 1; background: linear-gradient(135deg, var(--p), var(--s)); color: #000; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--p) 40%, transparent); }
.onglet .pastille {
    position: absolute; top: -6px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--gold); color: #000; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .7rem; display: grid; place-items: center;
}
.volet { display: none; }
.volet.actif { display: block; }

/* ---------- zone de clic ---------- */
.compteur { text-align: center; margin-bottom: 6px; }
#likes { font-family: 'Bangers', 'Impact', sans-serif; font-size: clamp(2.3rem, 5vw, 3.2rem); letter-spacing: 2px; line-height: 1; color: var(--text); text-shadow: 0 0 22px color-mix(in srgb, var(--p) 70%, transparent), 0 3px 0 rgba(0, 0, 0, .4); word-break: break-all; }
.compteur .unite { font-weight: 900; opacity: .7; font-size: .9rem; }
#lps { font-weight: 900; color: var(--green); font-size: .95rem; margin-top: 2px; }
.combo-ligne { display: flex; align-items: center; gap: 10px; margin: 8px 4px 0; }
#combo-texte { font-family: 'Bangers', 'Impact', sans-serif; color: var(--gold); font-size: 1.15rem; min-width: 92px; letter-spacing: 1px; }
.barre { flex: 1; height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.barre > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--p), var(--gold)); border-radius: inherit; transition: width .12s; }

#zone-clic { --taille: clamp(290px, 27vw, 370px); position: relative; height: calc(var(--taille) + 110px); display: grid; place-items: center; margin: 4px 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: hidden; border-radius: 18px; }
#orbite { position: absolute; inset: 0; pointer-events: none; }
.mini-algaclick {
    position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    animation: orbite linear infinite; filter: drop-shadow(0 0 6px var(--p));
}
.mini-algaclick::after { content: attr(data-e); position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font-size: .75rem; }
@keyframes orbite { from { transform: rotate(0deg) translateX(var(--r, 140px)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r, 140px)) rotate(-360deg); } }
#avatar-btn {
    position: relative; z-index: 5; width: var(--taille); height: var(--taille); border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--p) 30%, transparent), transparent 68%);
    touch-action: manipulation;
}
#avatar {
    width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none;
    filter: drop-shadow(0 0 18px var(--p)); animation: respire 2.6s ease-in-out infinite; transition: transform .08s;
    scale: 1.12;
}
#avatar-btn.appui #avatar { transform: scale(.9) rotate(-3deg); filter: brightness(1.25) drop-shadow(0 0 26px var(--green)); animation: none; }
@keyframes respire { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.avatar-secours { width: 100%; height: 100%; display: grid; place-items: center; font-size: 8rem; }
#avatar-btn.danse #avatar { animation: danse .3s ease infinite; }
@keyframes danse { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } }

.texte-flottant {
    position: fixed; z-index: 2500; pointer-events: none; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px;
    font-size: 1.55rem; color: var(--p); text-shadow: 0 2px 8px rgba(0, 0, 0, .85); animation: monte .75s ease-out forwards; white-space: nowrap;
    transform: translate(-50%, -50%);
}
.texte-flottant.crit { color: var(--gold); font-size: 2.2rem; }
@keyframes monte { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -110px; } }
.onde { position: fixed; border-radius: 50%; border: 3px solid var(--p); pointer-events: none; z-index: 1500; animation: onde .6s ease-out forwards; transform: translate(-50%, -50%); }
@keyframes onde { from { width: 0; height: 0; opacity: .85; } to { width: 160px; height: 160px; opacity: 0; } }
.emoji-tombe { position: fixed; top: -60px; font-size: 2.4rem; z-index: 3000; pointer-events: none; animation: tombe linear forwards; }
@keyframes tombe { to { transform: translateY(118vh) rotate(720deg); } }

#buffs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 10px; margin: 2px 0 8px; }
.buff {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: .78rem; font-weight: 900;
    background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.buff .anneau { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--gold) var(--pct, 100%), transparent 0); }

.bsp { background: rgba(0, 0, 0, .22); border-radius: 16px; padding: 10px 12px; border: 1.5px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.bsp-haut { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; margin-bottom: 6px; gap: 8px; }
.bsp-haut b { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 1.2rem; color: var(--gold); letter-spacing: 1px; }
.bsp .barre { height: 12px; }
.bsp .barre > i { background: linear-gradient(90deg, var(--gold), var(--accent)); }
.btn-renaissance {
    width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, var(--gold), #ff9900); color: #000; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.2rem;
    animation: pulseOr 1s ease infinite alternate;
}
@keyframes pulseOr { from { box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 40%, transparent); } to { box-shadow: 0 0 34px color-mix(in srgb, var(--gold) 90%, transparent); } }

.team-equipee { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; flex-wrap: wrap; }
.slot {
    width: 52px; height: 52px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--text) 25%, transparent); cursor: pointer;
    display: grid; place-items: center; font-size: 1.4rem; overflow: hidden; background: rgba(0, 0, 0, .2); padding: 0;
}
.slot.plein { border: 2px solid var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 40%, transparent); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot.verrou { opacity: .35; cursor: default; }

.codes { margin-top: 12px; background: color-mix(in srgb, var(--gold) 8%, transparent); border: 2px dashed var(--gold); border-radius: 16px; padding: 12px; }
.codes-titre { color: var(--gold); font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: .95rem; margin-bottom: 8px; text-align: center; }
.codes-ligne { display: flex; gap: 8px; }
.champ {
    flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
    background: rgba(0, 0, 0, .45); color: #fff; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem; text-align: center;
}
.champ::placeholder { color: rgba(255, 255, 255, .45); }
.btn {
    border: 0; border-radius: 14px; padding: 10px 16px; cursor: pointer; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.02rem;
    background: linear-gradient(135deg, var(--p), var(--s)); color: #000; box-shadow: 0 5px 0 color-mix(in srgb, var(--p) 45%, #000); transition: transform .08s, box-shadow .08s, opacity .2s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--p) 45%, #000); }
.btn.or { background: linear-gradient(135deg, var(--gold), #ff9900); box-shadow: 0 5px 0 #8a5a00; }
.btn.danger { background: linear-gradient(135deg, #ff5a5a, #b30000); color: #fff; box-shadow: 0 5px 0 #5c0000; }
.btn.fantome { background: var(--doux); color: var(--text); box-shadow: none; border: 1.5px solid var(--ligne); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn.large { width: 100%; }

/* ---------- boutique ---------- */
.quantites { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.quantites span { font-size: .75rem; opacity: .6; font-weight: 800; margin-right: 2px; }
.qte { padding: 5px 10px; border-radius: 10px; border: 1.5px solid var(--ligne); background: var(--doux); cursor: pointer; font-weight: 900; font-size: .8rem; }
.qte.actif { background: var(--gold); color: #000; border-color: var(--gold); }
.article {
    display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; margin-bottom: 8px; border-radius: 16px;
    background: rgba(0, 0, 0, .24); border: 2px solid color-mix(in srgb, var(--green) 14%, transparent); transition: border-color .2s, transform .12s, opacity .2s;
}
.article.abordable { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.article.abordable:hover { transform: translateY(-2px); }
.article.verrouille { opacity: .55; }
.article.verrouille .art-nom { filter: blur(0); }
.art-icone { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.55rem; background: color-mix(in srgb, var(--p) 16%, transparent); overflow: hidden; position: relative; }
.art-icone img { width: 100%; height: 100%; object-fit: contain; }
.art-nb { position: absolute; right: 2px; bottom: 0; font-family: 'Bangers', 'Impact', sans-serif; font-size: .9rem; color: var(--gold); text-shadow: 0 1px 3px #000; letter-spacing: .5px; }
.art-info { min-width: 0; }
.art-nom { font-weight: 900; color: var(--s); font-size: .92rem; line-height: 1.15; }
.art-desc { font-size: .74rem; opacity: .62; line-height: 1.25; margin-top: 2px; }
.art-prod { font-size: .72rem; font-weight: 800; color: var(--green); margin-top: 2px; }
.art-btn {
    min-width: 92px; padding: 9px 10px; border: 0; border-radius: 13px; cursor: pointer; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1rem;
    background: linear-gradient(135deg, var(--p), var(--s)); color: #000; box-shadow: 0 4px 0 color-mix(in srgb, var(--p) 45%, #000); line-height: 1.05;
}
.art-btn small { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .62rem; letter-spacing: 0; opacity: .75; }
.art-btn:disabled { background: color-mix(in srgb, var(--text) 12%, transparent); color: color-mix(in srgb, var(--text) 50%, transparent); box-shadow: none; cursor: not-allowed; }
.art-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--p) 45%, #000); }
.grille-amelios { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.amelio {
    aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--ligne); background: rgba(0, 0, 0, .25); cursor: pointer;
    display: grid; place-items: center; font-size: 1.6rem; position: relative; padding: 0; transition: transform .12s, border-color .2s;
}
.amelio.abordable { border-color: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent); }
.amelio:hover { transform: translateY(-2px) scale(1.04); }
.amelio .tier { position: absolute; bottom: 2px; right: 4px; font-size: .62rem; font-weight: 900; opacity: .8; }
.sous-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; color: var(--gold); font-size: 1rem; margin: 14px 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); padding-bottom: 4px; }
.vide { opacity: .5; font-size: .85rem; text-align: center; padding: 18px 8px; }

/* infobulle */
#bulle {
    position: fixed; z-index: 7000; max-width: 280px; padding: 10px 12px; border-radius: 14px; pointer-events: none;
    background: #0d0616; color: #fff; border: 1.5px solid var(--p); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); font-size: .82rem; line-height: 1.35;
}
#bulle b { color: var(--gold); }
#bulle .prix { color: var(--green); font-weight: 900; }

/* ---------- Team ---------- */
.grille-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.carte-pote {
    border-radius: 18px; padding: 10px 8px 10px; text-align: center; background: rgba(0, 0, 0, .25); border: 2px solid var(--ligne); position: relative; cursor: pointer;
    transition: transform .12s, border-color .2s; display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; color: inherit;
}
.carte-pote:hover { transform: translateY(-3px); }
.carte-pote.equipe { border-color: var(--gold); box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 35%, transparent); }
.carte-pote.cachee { cursor: default; }
.carte-pote.cachee:hover { transform: none; }
.pote-photo { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 2.4rem; background: radial-gradient(circle, color-mix(in srgb, var(--p) 35%, transparent), transparent 70%); }
.pote-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carte-pote.cachee .pote-photo { filter: brightness(0) opacity(.5); }
.pote-nom { font-weight: 900; font-size: .88rem; color: var(--s); }
.pote-titre { font-size: .7rem; opacity: .6; font-style: italic; }
.pote-bonus { font-size: .72rem; line-height: 1.25; color: var(--green); font-weight: 800; }
.carte-pote .etiquette { position: absolute; top: 6px; right: 6px; font-size: .62rem; font-weight: 900; padding: 1px 6px; border-radius: 6px; background: var(--gold); color: #000; }
.garde-robe { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.pastille-theme { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--ligne); display: grid; place-items: center; font-size: 1.3rem; cursor: pointer; background: rgba(0, 0, 0, .25); padding: 0; }
.pastille-theme.actif { border-color: var(--gold); }
.pastille-theme.cachee { opacity: .25; cursor: default; font-size: .9rem; }

/* 🌍 les mondes, en vignettes (avant : dix boutons pleine largeur à la suite) */
.grille-mondes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
.tuile-monde {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 9px 4px 7px; min-height: 74px; border-radius: 14px; cursor: pointer; text-align: center; color: var(--text);
    border: 2px solid color-mix(in srgb, var(--mc, var(--p)) 55%, transparent);
    background: linear-gradient(150deg, color-mix(in srgb, var(--mc, var(--p)) 26%, var(--panel)), var(--panel));
    transition: transform .12s, border-color .12s;
}
.tuile-monde:hover { transform: translateY(-2px); border-color: var(--mc, var(--p)); }
.tuile-monde .tm-e { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.tuile-monde .tm-n { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: .5px; font-size: .78rem; line-height: 1.1; }
.tuile-monde .tm-on { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .55rem; letter-spacing: 1px; color: #000; background: var(--gold); border-radius: 999px; padding: 1px 6px; }
.tuile-monde.actif { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px color-mix(in srgb, var(--gold) 45%, transparent); }
.tuile-monde.cachee {
    display: grid; place-items: center; min-height: 74px; border-radius: 14px; font-size: 1.1rem; opacity: .32;
    border: 2px dashed var(--ligne); background: rgba(0, 0, 0, .25);
}

/* ---------- Renaissance ---------- */
.carte-renaissance { text-align: center; padding: 14px; border-radius: 18px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gold) 20%, transparent), rgba(0, 0, 0, .2) 70%); border: 1.5px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.gros-chiffre { font-family: 'Bangers', 'Impact', sans-serif; font-size: 2.4rem; color: var(--gold); letter-spacing: 2px; line-height: 1.05; text-shadow: 0 0 20px color-mix(in srgb, var(--gold) 50%, transparent); }
.arbre { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ligne-talents { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.talent {
    width: 64px; height: 64px; border-radius: 18px; border: 2px solid var(--ligne); background: rgba(0, 0, 0, .3); cursor: pointer; position: relative;
    display: grid; place-items: center; font-size: 1.6rem; padding: 0; transition: transform .12s;
}
.talent:hover { transform: translateY(-2px); }
.talent.pris { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 20%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 40%, transparent); }
.talent.dispo { border-color: var(--green); animation: talentDispo 1.3s ease-in-out infinite alternate; }
.talent.bloque { opacity: .3; filter: grayscale(1); }
.talent .cout { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 900; background: #000; color: var(--gold); padding: 0 5px; border-radius: 6px; white-space: nowrap; }
@keyframes talentDispo { from { box-shadow: 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); } to { box-shadow: 0 0 16px color-mix(in srgb, var(--green) 60%, transparent); } }
.defi {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; margin-bottom: 8px;
    background: rgba(0, 0, 0, .25); border: 2px solid var(--ligne);
}
.defi.fini { border-color: var(--gold); }
.defi.encours { border-color: var(--danger); box-shadow: 0 0 16px color-mix(in srgb, var(--danger) 40%, transparent); }
.defi .ic { font-size: 1.8rem; text-align: center; }
.defi .regle { font-size: .75rem; opacity: .7; }
.defi .recomp { font-size: .74rem; color: var(--green); font-weight: 800; }

/* ---------- succès, quêtes, stats, classement ---------- */
.filtres { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.filtre { padding: 4px 9px; border-radius: 9px; border: 1.5px solid var(--ligne); background: var(--doux); cursor: pointer; font-size: .74rem; font-weight: 800; }
.filtre.actif { background: var(--gold); color: #000; border-color: var(--gold); }
.resume-succes { font-size: .8rem; opacity: .75; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.grille-succes { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.succes {
    aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(0, 0, 0, .3); border: 2px solid var(--ligne);
    filter: grayscale(1); opacity: .35; cursor: help; padding: 0;
}
.succes.fait { filter: none; opacity: 1; border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.succes.perm.fait { border-color: var(--accent); }
.quete { background: rgba(0, 0, 0, .25); border-radius: 14px; padding: 11px 12px; margin-bottom: 8px; border: 2px solid color-mix(in srgb, var(--green) 20%, transparent); }
.quete.finie { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.quete-titre { font-weight: 900; color: var(--s); font-size: .88rem; display: flex; justify-content: space-between; gap: 6px; }
.quete-titre .etoiles-diff { color: var(--gold); letter-spacing: 1px; }
.quete-desc { font-size: .78rem; opacity: .7; margin: 3px 0 6px; }
.quete-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; font-size: .78rem; }
.quete-bas .recomp { color: var(--gold); font-weight: 800; }
.serie { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 6px 0 12px; }
.jour { border-radius: 10px; padding: 6px 2px; text-align: center; font-size: .66rem; font-weight: 900; background: rgba(0, 0, 0, .25); border: 1.5px solid var(--ligne); }
.jour.fait { background: color-mix(in srgb, var(--green) 22%, transparent); border-color: var(--green); }
.jour.aujourdhui { border-color: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 40%, transparent); }
.jour .e { font-size: 1.05rem; display: block; }
.ligne-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); margin-bottom: 6px; font-size: .84rem; }
.ligne-stat span:first-child { opacity: .75; }
.ligne-stat b { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; color: var(--gold); font-size: 1.08rem; letter-spacing: 1px; text-align: right; }
.lb-ligne { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .24); margin-bottom: 6px; font-size: .86rem; border: 1.5px solid transparent; }
.lb-ligne.moi { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.lb-rang { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.1rem; text-align: center; }
.lb-nom { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: 'Bangers', 'Impact', sans-serif; color: var(--gold); letter-spacing: 1px; text-align: right; line-height: 1.1; }
.lb-score small { display: block; font-family: 'Nunito', sans-serif; color: var(--text); opacity: .55; font-size: .66rem; letter-spacing: 0; }
.note { font-size: .74rem; opacity: .6; line-height: 1.4; margin: 6px 0; }
.boite { background: rgba(0, 0, 0, .22); border: 1.5px solid var(--ligne); border-radius: 14px; padding: 12px; margin-bottom: 10px; }

/* ---------- surcouches ---------- */
.surcouche { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modale {
    width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: linear-gradient(160deg, var(--panel), #0a0014); color: var(--text);
    border: 2.5px solid var(--gold); border-radius: 24px; padding: 22px; position: relative; text-align: center; box-shadow: 0 0 60px color-mix(in srgb, var(--gold) 25%, transparent);
    animation: pop .32s cubic-bezier(.17, .89, .32, 1.3);
}
.modale.large { width: min(640px, 100%); text-align: left; }
.modale h2 { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-weight: 400; color: var(--gold); font-size: 1.8rem; margin: 0 0 10px; text-align: center; }
.modale .fermer { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--doux); cursor: pointer; font-size: 1rem; }
.modale .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.modale .actions .btn { flex: 1; }
@keyframes pop { from { opacity: 0; transform: scale(.8) translateY(20px); } to { opacity: 1; transform: none; } }
.modale textarea { width: 100%; min-height: 90px; border-radius: 12px; background: rgba(0, 0, 0, .45); color: #fff; border: 1.5px solid var(--ligne); padding: 10px; font-family: monospace; font-size: .75rem; resize: vertical; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.reglage label { font-weight: 800; font-size: .9rem; }
.reglage small { display: block; opacity: .55; font-weight: 600; }
.interrupteur { appearance: none; -webkit-appearance: none; width: 48px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .15); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.interrupteur::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.interrupteur:checked { background: var(--green); }
.interrupteur:checked::after { left: 25px; }
input[type=range] { accent-color: var(--p); }

/* toasts */
#toasts { position: fixed; top: 76px; right: 14px; z-index: 6500; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; width: min(320px, calc(100vw - 28px)); }
.toast {
    pointer-events: auto; background: linear-gradient(135deg, var(--panel), #0d1117); color: #fff; padding: 11px 14px; border-radius: 14px; border-left: 5px solid var(--p);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55); font-weight: 800; font-size: .86rem; animation: glisse .3s ease; max-width: 100%;
}
.toast.sort { animation: sort .3s ease forwards; }
.toast.succes-toast { border-left-color: var(--gold); display: flex; gap: 10px; align-items: center; }
.toast.succes-toast .ic { font-size: 1.6rem; }
.toast.succes-toast small { display: block; opacity: .6; font-size: .7rem; }
@keyframes glisse { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sort { to { transform: translateX(110%); opacity: 0; } }

/* likes dorés */
.like-dore {
    position: fixed; z-index: 4000; width: 78px; height: 78px; border: 0; padding: 0; cursor: pointer; background: none; font-size: 3.4rem; line-height: 1;
    filter: drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 30px #ff9900); animation: dore 1.6s ease-in-out infinite;
}
.like-dore.part { animation: dorePart .8s ease forwards; pointer-events: none; }
/* 🖤 le like noir : même bouton, mais il pulse en violet et il tremble */
.like-dore.noir { filter: drop-shadow(0 0 16px #b026ff) drop-shadow(0 0 34px #6a00b0); animation: doreNoir 1.1s ease-in-out infinite; }
@keyframes doreNoir { 0%, 100% { transform: rotate(-12deg) scale(1.02); } 45% { transform: rotate(9deg) scale(1.16); } 55% { transform: rotate(9deg) scale(1.1) translateX(2px); } }
@keyframes dore { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12); } }
@keyframes dorePart { to { transform: scale(0) rotate(180deg); opacity: 0; } }

/* parents */
#parents {
    position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 4500; border: 3px solid #fff; border-radius: 18px; cursor: pointer;
    background: linear-gradient(135deg, #ff4444, #c20000); color: #fff; padding: 16px 24px; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.35rem;
    box-shadow: 0 0 36px rgba(255, 0, 0, .6); animation: alerte .45s ease infinite alternate; text-align: center; max-width: calc(100vw - 32px);
}
#parents small { display: block; font-family: 'Nunito', sans-serif; font-size: .78rem; letter-spacing: 0; font-weight: 900; }
#parents .barre { margin-top: 8px; height: 6px; background: rgba(255, 255, 255, .3); }
#parents .barre > i { background: #fff; transition: none; }
@keyframes alerte { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.06); } }

/* Douza */
#douza {
    position: absolute; z-index: 20; left: 50%; top: 50%; width: 170px; transform: translate(-50%, -50%); cursor: crosshair; border: 0; background: none; padding: 0;
    touch-action: manipulation;
}
#douza svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(255, 40, 40, .7)); }
#douza.touche svg { animation: touche .15s; }
@keyframes touche { 0% { transform: translateX(-6px) scale(.95); filter: brightness(2) drop-shadow(0 0 18px red); } 100% { transform: none; } }
.douza-hud { position: absolute; left: 8px; right: 8px; top: 6px; z-index: 21; text-align: center; pointer-events: none; }
.douza-hud .nom { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; color: var(--danger); font-size: 1.1rem; text-shadow: 0 2px 6px #000; }
.douza-hud .barre { height: 10px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .25); }
.douza-hud .barre > i { background: linear-gradient(90deg, #ff2d2d, #ff9a3c); transition: width .1s; }
.douza-hud .vol { font-size: .74rem; font-weight: 900; margin-top: 3px; color: #ffb3b3; text-shadow: 0 1px 4px #000; }
#zone-clic.douza-la #avatar-btn { opacity: .35; filter: grayscale(.6); }

/* live */
#live-invite {
    position: fixed; left: 16px; bottom: 90px; z-index: 4400; border: 0; border-radius: 18px; cursor: pointer; padding: 12px 16px 12px 12px;
    background: linear-gradient(135deg, #fe2c55, #25f4ee); color: #000; font-weight: 900; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 30px rgba(254, 44, 85, .45);
    animation: glisseG .4s ease; max-width: calc(100vw - 32px); text-align: left;
}
#live-invite .rond { width: 42px; height: 42px; border-radius: 50%; background: #000; color: #fe2c55; display: grid; place-items: center; font-size: 1.3rem; animation: alerte2 .8s infinite alternate; flex-shrink: 0; }
#live-invite b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.15rem; font-weight: 400; display: block; }
@keyframes glisseG { from { transform: translateX(-120%); } to { transform: none; } }
@keyframes alerte2 { to { box-shadow: 0 0 0 6px rgba(0, 0, 0, .25); } }
.live-hud { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; border-radius: 18px; }
.live-top { position: absolute; left: 6px; top: 6px; display: flex; gap: 6px; align-items: center; }
.live-badge { background: #fe2c55; color: #fff; font-weight: 900; font-size: .72rem; padding: 2px 8px; border-radius: 6px; letter-spacing: 1px; }
.live-vues { background: rgba(0, 0, 0, .55); color: #fff; font-weight: 900; font-size: .72rem; padding: 2px 8px; border-radius: 6px; }
.live-chat { position: absolute; left: 6px; bottom: 6px; width: 62%; display: flex; flex-direction: column; gap: 3px; }
.live-chat div { background: rgba(0, 0, 0, .5); color: #fff; font-size: .72rem; padding: 3px 8px; border-radius: 10px; width: fit-content; max-width: 100%; animation: glisseG .25s ease; }
.live-chat div b { color: #25f4ee; margin-right: 4px; }
.cadeau { position: absolute; z-index: 16; font-size: 2.3rem; border: 0; background: none; padding: 4px; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .6)); touch-action: manipulation; }
.cadeau.univers { font-size: 2.9rem; filter: drop-shadow(0 0 14px #b580ff); }

/* anti-triche */
#antitriche { position: fixed; inset: 0; z-index: 9000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #fff; }
#antitriche h1 { font-family: 'Bangers', 'Impact', sans-serif; color: red; font-size: clamp(2.5rem, 9vw, 4.2rem); letter-spacing: 3px; margin: 8px 0; font-weight: 400; }

/* tsar bomba */
#tsar { position: fixed; inset: 0; z-index: 9500; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
#tsar .ic { font-size: 4rem; animation: tourne 2s linear infinite; }
#tsar-compte { font-family: 'Bangers', 'Impact', sans-serif; font-size: 8rem; color: #ff4444; text-shadow: 0 0 60px #ff0000; line-height: 1; }
#tsar-label { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.8rem; color: #ff8800; letter-spacing: 4px; }
#flash { position: fixed; inset: 0; background: #fff4d6; z-index: 9600; pointer-events: none; opacity: 0; }
#flash.go { animation: flash 1.4s ease-out forwards; }
/* ⚠️ photosensibilité : jamais d'éclair blanc plein écran, une lueur douce qui monte puis redescend */
@keyframes flash { 0% { opacity: 0; } 25% { opacity: .18; } 100% { opacity: 0; } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* pubs Twitch */
.pub-twitch {
    position: fixed; right: 16px; bottom: 90px; z-index: 5000; width: min(300px, calc(100vw - 32px)); border-radius: 16px; padding: 16px; text-align: left;
    background: linear-gradient(160deg, var(--panel), #000); border: 2px solid var(--p); box-shadow: 0 0 30px color-mix(in srgb, var(--p) 50%, transparent); animation: pop .4s ease;
}
.pub-twitch .t { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.15rem; color: var(--p); }
.pub-twitch p { font-size: .8rem; font-style: italic; opacity: .85; margin: 6px 0 10px; }
.pub-twitch a { display: block; text-align: center; padding: 10px; border-radius: 10px; text-decoration: none; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; background: linear-gradient(90deg, #9146ff, var(--p)); color: #fff; }
.pub-twitch .x { position: absolute; top: 6px; right: 10px; border: 0; background: none; cursor: pointer; opacity: .6; font-size: 1rem; }

/* guerre */
#guerre { position: fixed; top: 76px; left: 14px; z-index: 5200; width: min(250px, calc(100vw - 28px)); background: linear-gradient(160deg, #2a0808, #150404); border: 2px solid var(--danger); border-radius: 16px; padding: 12px; box-shadow: 0 0 30px rgba(255, 68, 68, .4); }
#guerre .t { font-family: 'Bangers', 'Impact', sans-serif; color: var(--danger); letter-spacing: 1.5px; font-size: 1.05rem; display: flex; justify-content: space-between; }
#guerre .l { display: flex; justify-content: space-between; font-size: .8rem; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .05); margin-top: 3px; }
#guerre .l.moi { background: rgba(255, 215, 0, .16); }

/* radio : le mini-lecteur */
#radio {
    position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px);
    background: color-mix(in srgb, var(--panel) 92%, transparent); border-radius: 999px; padding: 6px 10px 8px 12px; overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--p) 35%, transparent); box-shadow: 0 8px 25px rgba(0, 0, 0, .55); backdrop-filter: blur(8px);
    transition: box-shadow .12s, transform .3s;
}
#radio.joue { border-color: color-mix(in srgb, var(--green) 55%, transparent); }
#radio.pulse { box-shadow: 0 8px 25px rgba(0, 0, 0, .55), 0 0 18px color-mix(in srgb, var(--p) 55%, transparent); }
#radio.change { transform: scale(1.05); }
#radio-viz { width: 42px; height: 22px; flex-shrink: 0; }
#radio .mini { border: 0; background: none; font-size: 1.05rem; cursor: pointer; padding: 3px 4px; line-height: 1; position: relative; border-radius: 50%; }
#radio .mini.gros { width: 36px; height: 36px; background: linear-gradient(135deg, var(--p), var(--s)); color: #000; font-size: 1rem; }
#radio-titre { border: 0; background: none; cursor: pointer; text-align: left; width: 160px; overflow: hidden; padding: 0 4px; color: inherit; }
#radio-nom { display: block; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: var(--p); font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#radio-artiste { display: block; font-size: .68rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
#radio input { width: 70px; }
#radio-nouveau { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.radio-progres { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.radio-progres i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--p)); }

/* le perso bat la mesure */
#avatar-btn.beat #avatar { animation: beatPerso .16s ease-out; }
@keyframes beatPerso { 0% { transform: scale(1.07); filter: drop-shadow(0 0 30px var(--p)) brightness(1.12); } 100% { transform: scale(1); } }
.texte-flottant.rythme { color: var(--green); font-size: 1.8rem; }

/* BANGER FM : la grande fenêtre */
.modale-lecteur { width: min(680px, 100%); padding: 18px; }
.lecteur .lf-haut { display: flex; gap: 16px; align-items: center; margin: 4px 30px 10px 0; }
.pochette { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.5rem; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--p) 45%, #000), color-mix(in srgb, var(--s) 35%, #000)); }
.pochette img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pochette.grande { width: 112px; height: 112px; border-radius: 22px; font-size: 3.6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px color-mix(in srgb, var(--p) 40%, transparent); }
.pochette.grande.tourne { animation: pochetteBalance 2.4s ease-in-out infinite; }
@keyframes pochetteBalance { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) scale(1.03); } }
.lf-infos { min-width: 0; flex: 1; position: relative; }
.lf-station { font-size: .72rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.lf-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.7rem; line-height: 1.05; color: var(--gold); margin: 2px 0; }
.lf-artiste { font-weight: 800; opacity: .75; }
.lf-coeur { position: absolute; right: -4px; bottom: -4px; border: 0; background: none; font-size: 1.5rem; cursor: pointer; }
.lf-viz-zone { position: relative; height: 96px; border-radius: 16px; background: rgba(0, 0, 0, .35); overflow: hidden; margin-bottom: 8px; }
#lf-viz { width: 100%; height: 100%; display: block; }
#lf-beat { position: absolute; top: 8px; right: 10px; font-size: .7rem; font-weight: 900; letter-spacing: 1px; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .5); opacity: .25; transition: opacity .08s; }
#lf-beat.on { opacity: 1; background: var(--green); color: #000; }
.lf-progres { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 800; opacity: .9; }
.lf-progres input { flex: 1; }
.lf-commandes { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 8px 0 4px; }
.lf-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ligne); background: var(--doux); font-size: 1.2rem; cursor: pointer; }
.lf-btn.gros { width: 64px; height: 64px; font-size: 1.6rem; background: linear-gradient(135deg, var(--p), var(--s)); color: #000; border: 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--p) 45%, transparent); }
.lf-btn.actif { border-color: var(--green); background: color-mix(in srgb, var(--green) 20%, transparent); }
.lf-volume { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.lf-volume input { width: min(220px, 50vw); }
.lf-astuce { text-align: center; }
.lf-stations { margin-top: 10px; }
.lf-stations .onglet small { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .65rem; opacity: .8; }
.lf-liste { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; padding-right: 4px; }
.lf-ligne { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: rgba(0, 0, 0, .24); border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.lf-ligne:hover { background: color-mix(in srgb, var(--p) 16%, transparent); }
.lf-ligne.en-cours { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.lf-ligne.en-cours .lf-num { color: var(--green); }
.lf-ligne.verrou { cursor: default; opacity: .55; }
.lf-num { width: 22px; text-align: center; font-family: 'Bangers', 'Impact', sans-serif; font-size: 1rem; opacity: .7; flex-shrink: 0; }
.lf-txt { flex: 1; min-width: 0; }
.lf-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--s); }
.lf-txt small { display: block; opacity: .6; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-mini-coeur { border: 0; background: none; cursor: pointer; font-size: 1.1rem; padding: 4px; }
.lf-pied { font-size: .78rem; text-align: center; opacity: .8; margin-top: 10px; }
#roue-canvas { cursor: grab; border-radius: 50%; max-width: 100%; height: auto; touch-action: none; }

/* message global */
.msg-global { border-color: var(--gold); }
.msg-global .de { font-size: .8rem; opacity: .55; }
.msg-global .texte { font-size: 1.15rem; font-weight: 800; line-height: 1.5; margin: 14px 0; white-space: pre-wrap; }

/* trophée final */
.trophee { font-size: 6rem; animation: flotte 3s ease-in-out infinite; filter: drop-shadow(0 0 30px var(--gold)); }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.confetti { position: fixed; top: -20px; z-index: 9700; pointer-events: none; width: 10px; height: 14px; animation: tombe linear forwards; }

/* ---------- navigation mobile ---------- */
#nav-mobile { display: none; }
.mobile-seul { display: none !important; }

/* ---------- events globaux (effets visuels) ---------- */
/* jamais de filter/transform sur body : ça casse tous les éléments position:fixed */
body.rainbow-event-mode #entete { border-bottom: 4px solid; border-image: linear-gradient(90deg, #ff595e, #ffca3a, #8ac926, #1982c4, #6a4c93) 1; }   /* 🌈 un arc-en-ciel fixe : plus de couleurs qui tournent sur tout l'écran */
@keyframes arcEnCiel { to { filter: hue-rotate(360deg); } }
body.golden-event-mode .panneau { border-color: color-mix(in srgb, #ffd700 50%, transparent); }
body.golden-event-mode #avatar { filter: drop-shadow(0 0 25px #ffd700) sepia(.3) saturate(1.5); }
body.hyperspeed-event-mode .mini-algaclick { animation-duration: 2.5s !important; }
body.night-event-mode { --bg: #02010a; }
body.night-event-mode #jeu { filter: brightness(.9) saturate(1.2); }
body.godmode-event-mode #avatar { filter: drop-shadow(0 0 40px #fff) drop-shadow(0 0 20px var(--gold)); }
body.chaos-event-mode #col-clic .panneau { transform: rotate(-.6deg); } body.chaos-event-mode #col-empire .panneau { transform: rotate(.5deg); }   /* 🌀 penché, mais immobile */
@keyframes secousse { 0%, 100% { transform: none; } 25% { transform: translate(-2px, 1px) rotate(-.3deg); } 75% { transform: translate(2px, -1px) rotate(.3deg); } }
body.glitch-event-mode .logo { text-shadow: -2px 0 #f0f, 2px 0 #0ff; }   /* 📺 un décalage fixe, rien ne bouge */
@keyframes glitch { 0%, 100% { transform: none; text-shadow: none; } 50% { transform: translateX(3px); text-shadow: -3px 0 #f0f, 3px 0 #0ff; } }
body.halloween-event-mode { --p: #ff6b00; --green: #b4ff3a; }
body.blizzard-event-mode #jeu { filter: saturate(.8) brightness(1.05); }
body.disco-event-mode #entete { border-bottom: 4px solid; border-image: linear-gradient(90deg, #f72585, #7209b7, #3a0ca3, #4cc9f0) 1; }
body.freeze-event-mode .panneau { border-color: #8fe3ff; }
body.crazy-frog-mode { background-image: url('https://algator37.neocities.org/fondcrazy.png'); background-size: cover; }
body.mindfuck-secousse #jeu { animation: secousse .35s ease-in-out 4; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
    #jeu { grid-template-columns: 1fr 1fr; }
    #col-empire { grid-column: 1 / -1; }
    #col-empire .panneau { position: static; max-height: none; }
}
@media (max-width: 820px) {
    body { font-size: 14px; padding-bottom: 150px; }
    #entete { padding: 8px 10px; gap: 6px; }
    .logo { font-size: 1.12rem; letter-spacing: 1.5px; }
    .logo .l3 { font-size: .9rem; }
    .btn-rond { width: 34px; height: 34px; font-size: 1rem; }
    .entete-actions { gap: 5px; }
    .pilule { padding: 4px 10px; font-size: .76rem; }
    .mobile-seul { display: inline-flex !important; }
    .compteur #likes { font-size: 2.2rem; }
    .logo .remaster { display: none; }
    .entete-stats { order: 3; width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .entete-stats::-webkit-scrollbar { display: none; }
    #jeu { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
    .colonne { display: none; }
    .colonne.vue-active { display: block; }
    #col-boutique .panneau, #col-empire .panneau { position: static; max-height: none; }
    .defile { overflow: visible; margin-right: 0; padding-right: 0; }
    #zone-clic { --taille: min(300px, 76vw); }
    #nav-mobile {
        display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
        background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); border-top: 1.5px solid color-mix(in srgb, var(--p) 35%, transparent);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    }
    #nav-mobile button { border: 0; background: none; padding: 6px 0; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .95rem; opacity: .55; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; }
    #nav-mobile button span { font-size: 1.35rem; }
    #nav-mobile button.actif { opacity: 1; color: var(--gold); }
    #nav-mobile .pastille { position: absolute; top: 2px; left: 58%; min-width: 17px; height: 17px; border-radius: 99px; background: var(--gold); color: #000; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .66rem; display: grid; place-items: center; padding: 0 4px; }
    #radio { bottom: 78px; right: 10px; left: 10px; padding: 5px 8px 8px; justify-content: space-between; }
    #radio input, #radio-prec { display: none; }
    #radio-titre { flex: 1; width: auto; }
    .lecteur .lf-haut { margin-right: 26px; }
    .pochette.grande { width: 84px; height: 84px; font-size: 2.6rem; }
    .lf-titre { font-size: 1.3rem; }
    .lf-liste { max-height: 44vh; }
    #toasts { top: auto; bottom: 140px; right: 10px; }
    #parents { bottom: 140px; }
    #live-invite { bottom: 140px; left: 10px; }
    .pub-twitch { bottom: 140px; right: 10px; }
    .onglet { font-size: .88rem; padding: 8px 6px; }
    #guerre { top: auto; bottom: 200px; left: 10px; }
}
@media (max-width: 440px) {
    .logo .l1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body.sans-particules .emoji-tombe, body.sans-particules .onde { display: none; }

/* 🦈 Mode Sharkz : « Kylan & Sharkz : L'Empire du City » */
body.mode-sharkz #entete { background: linear-gradient(90deg, #ff6b00, #ffcc00, #ff6b00); background-size: 200% 100%; animation: citySlide 3s linear infinite; border-bottom-color: #ffcc00; }
body.mode-sharkz .logo, body.mode-sharkz .logo .l1, body.mode-sharkz .logo .l2 { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
body.mode-sharkz .logo .l3 { background: #000; color: #ffcc00; }
body.mode-sharkz .logo .remaster { color: #000; opacity: .7; }
body.mode-sharkz .entete-stats .pilule, body.mode-sharkz .btn-rond { background: rgba(0,0,0,.55); color: #fff; }
body.mode-sharkz #avatar { filter: drop-shadow(0 0 22px #ff6b00); }
body.mode-sharkz .panneau { border-color: color-mix(in srgb, #ff6b00 30%, transparent); }
@keyframes citySlide { from { background-position: 0% 0%; } to { background-position: 200% 0%; } }
#avatar-btn.tourne #avatar { animation: tourne .9s linear infinite; }

/* 🐜 Mode Antoff : « Antoff : L'Empire des 15K » */
body.mode-antoff #entete { background: linear-gradient(90deg, #00e676, #69f0ae, #00bfa5, #00e676); background-size: 200% 100%; animation: citySlide 4s linear infinite; border-bottom-color: #69f0ae; }
body.mode-antoff .logo, body.mode-antoff .logo .l1, body.mode-antoff .logo .l2 { color: #071a0e; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
body.mode-antoff .logo .l3 { background: #071a0e; color: #00e676; }
body.mode-antoff .logo .remaster { color: #071a0e; opacity: .7; }
body.mode-antoff .entete-stats .pilule, body.mode-antoff .btn-rond { background: rgba(0,0,0,.55); color: #fff; }
body.mode-antoff #avatar { filter: drop-shadow(0 0 22px #00e676); }
body.mode-antoff .panneau { border-color: color-mix(in srgb, #00e676 25%, transparent); }

/* 🎯 Mode MentorFR : « Projet : trouver des projets » */
/* la barre : violet Twitch côté MentorFR, magenta côté Hisoka, et un reflet qui passe
   (le reflet part et revient hors de l'écran : pas de coupure quand l'animation reboucle) */
body.mode-mentorfr #entete {
    background:
        linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .13) 50%, transparent 60%) 0 0 / 250% 100% no-repeat,
        linear-gradient(90deg, #170b30 0%, #3d2275 22%, #5b2fa8 45%, #7a2a8c 70%, #1f0a26 100%);
    animation: mentorReflet 7s linear infinite;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #9146ff, #3ddc84 50%, #ff4fa3) 1;
    box-shadow: 0 6px 26px rgba(145, 70, 255, .35);
}
@keyframes mentorReflet { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
body.mode-mentorfr .logo .l1 { color: #fff; text-shadow: 0 0 14px rgba(145, 70, 255, .9), 0 2px 0 rgba(0, 0, 0, .5); }
body.mode-mentorfr .logo .l2 { color: #ff7ac8; text-shadow: 0 0 14px rgba(255, 79, 163, .6), 0 2px 0 rgba(0, 0, 0, .5); }
body.mode-mentorfr .logo .l3 { background: #0b0616; color: #3ddc84; border: 1.5px solid #3ddc84; }
body.mode-mentorfr .logo .remaster { color: #e6d9ff; opacity: .85; }
body.mode-mentorfr .entete-stats .pilule { background: rgba(10, 4, 24, .55); border-color: rgba(255, 255, 255, .16); color: #fff; }
body.mode-mentorfr .entete-stats .pilule b { color: #3ddc84; }
body.mode-mentorfr .btn-rond { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; }
body.mode-mentorfr .btn-rond:hover { background: rgba(255, 255, 255, .24); }
body.mode-mentorfr #avatar { filter: drop-shadow(0 0 22px #9146ff); }
body.mode-mentorfr .panneau { border-color: color-mix(in srgb, #9146ff 30%, transparent); }

/* 👀 Zenix qui dépasse d'un bord de l'écran */
#zenix { position: fixed; z-index: 5500; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .9; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .45s; }
#zenix svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
#zenix.zenix-bas { bottom: -22px; transform: translateY(0); animation: zenixBas .5s ease-out; }
#zenix.zenix-gauche { left: -22px; transform: rotate(90deg); animation: zenixGauche .5s ease-out; }
#zenix.zenix-droite { right: -22px; transform: rotate(-90deg); animation: zenixDroite .5s ease-out; }
#zenix.part { opacity: 0; }
@keyframes zenixBas { from { transform: translateY(60px); } }
@keyframes zenixGauche { from { transform: rotate(90deg) translateY(60px); } }
@keyframes zenixDroite { from { transform: rotate(-90deg) translateY(60px); } }

/* 🕛 les 12 Coups de Midi */
.midi { text-align: center; }
.midi-etoile { position: relative; width: 150px; height: 150px; margin: 0 auto 10px; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 0 0 3px var(--gold); }
.midi-etoile img { width: 100%; height: 100%; object-fit: cover; }
.midi-cases { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.midi-cases i { background: linear-gradient(135deg, #2a1a55, #120a26); border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; transition: opacity .5s, transform .5s; }
.midi-cases i::after { content: '⭐'; font-size: .8rem; opacity: .5; font-style: normal; }
.midi-cases i.ouverte { opacity: 0; transform: scale(.6); }
.midi-haut { display: flex; justify-content: space-between; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: var(--gold); margin-bottom: 6px; }
.midi-question { font-weight: 900; font-size: 1.05rem; min-height: 3em; display: grid; place-items: center; }
.midi-chrono { height: 7px; border-radius: 99px; background: var(--doux); overflow: hidden; margin: 8px 0 12px; }
.midi-chrono i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--danger), var(--gold), var(--green)); }
.midi-reponses { display: grid; gap: 8px; }
.midi-rep.juste { background: var(--green); color: #06150c; }
.midi-rep.faux { background: var(--danger); color: #fff; }
.midi-rep:disabled { opacity: 1; }

/* =====================================================================
   🃏 TEAM CARTE
   ===================================================================== */
.sous-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.sous-onglet {
    position: relative; padding: 9px 8px; border-radius: 12px; border: 1.5px solid var(--ligne); background: var(--doux); color: var(--text);
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.02rem; cursor: pointer;
}
.sous-onglet small { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .7rem; opacity: .7; margin-left: 4px; letter-spacing: 0; }
.sous-onglet.actif { background: linear-gradient(135deg, var(--p), var(--s)); color: #000; border-color: transparent; }
.sous-onglet .pastille { position: absolute; top: -7px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger, #ff2e63); color: #fff; font: 900 .68rem/18px 'Nunito', sans-serif; }

.cartes-stock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stock { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 12px; background: var(--doux); border: 1.5px solid var(--ligne); }
.stock .stock-ic { font-size: 1.35rem; }
.stock b { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 1.35rem; line-height: 1; }
.stock small { font-size: .64rem; font-weight: 800; opacity: .7; }
.stock .btn { padding: 4px 10px; font-size: .78rem; margin-top: 4px; }
.stock .btn:disabled { opacity: .35; box-shadow: none; }
.stock.dore { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.raretes-barre { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.rarete-puce { font-size: .66rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; border: 1.5px solid var(--rc); color: var(--rc); background: color-mix(in srgb, var(--rc) 10%, transparent); }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.tcarte {
    --rc: #aab4c3; position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; aspect-ratio: 5 / 7.4;
    padding: 5px 5px 6px; border-radius: 12px; overflow: hidden; cursor: pointer; font: inherit; color: var(--text); text-align: center;
    border: 2px solid var(--rc); background: linear-gradient(170deg, color-mix(in srgb, var(--rc) 24%, var(--panel)), var(--panel) 62%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35); transition: transform .15s;
}
.tcarte:hover { transform: translateY(-3px) rotate(-1deg); }
.tcarte-art { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .35); font-size: 2.3rem; }
.tcarte-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcarte-art.clair { background: #fff; }
.tcarte-art.clair img { object-fit: contain; }
.tcarte-nom { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: .5px; font-size: .82rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcarte-jeu { font-size: .55rem; font-weight: 700; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcarte-rar { font-size: .54rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--rc); }
.tcarte-nb { position: absolute; top: 4px; right: 4px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font-size: .62rem; font-weight: 900; }
.tcarte-monde { position: absolute; top: 3px; left: 4px; font-size: .85rem; filter: drop-shadow(0 1px 2px #000); }
.tcarte.manquante { border-style: dashed; opacity: .5; filter: saturate(.35); }
.tcarte.manquante .tcarte-art { font-family: 'Bangers', 'Impact', sans-serif; font-size: 2.4rem; color: var(--rc); }
.tcarte.r-epique:not(.manquante), .tcarte.r-legendaire:not(.manquante) { box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 50%, transparent); }
/* le reflet qui passe sur les légendaires et les mythiques */
.tcarte.r-legendaire:not(.manquante)::after, .tcarte.r-mythique:not(.manquante)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%) 0 0 / 260% 100% no-repeat;
    animation: carteReflet 3.2s linear infinite;
}
/* la bordure arc-en-ciel des mythiques */
.tcarte.r-mythique:not(.manquante) {
    border-color: transparent;
    background:
        linear-gradient(170deg, color-mix(in srgb, #ff2e63 22%, var(--panel)), var(--panel) 62%) padding-box,
        linear-gradient(135deg, #ff2e63, #ffb800, #3ddc84, #3aa0ff, #b04dff, #ff2e63) 0 0 / 300% 300% border-box;
    box-shadow: 0 0 18px rgba(255, 46, 99, .55);
    animation: carteMythique 4s linear infinite;
}
@keyframes carteReflet { from { background-position: 160% 0; } to { background-position: -160% 0; } }
@keyframes carteMythique { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 300% 50%; } }

.fiche-carte { display: flex; gap: 16px; align-items: center; }
.fiche-carte .tcarte { width: 160px; flex: none; cursor: default; }
.fiche-carte .tcarte:hover { transform: none; }
.fiche-carte .tcarte-nom { font-size: 1rem; }
.fiche-carte .tcarte-jeu { font-size: .68rem; }
.fiche-texte { flex: 1; text-align: left; }
.fiche-desc { font-size: 1rem; font-weight: 700; font-style: italic; }
@media (max-width: 560px) { .fiche-carte { flex-direction: column; } .fiche-texte { text-align: center; } }

/* ouvrir un paquet : les cartes se retournent */
.ouverture-cartes { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 18px; perspective: 900px; }
.flip { --rc: #aab4c3; width: 150px; aspect-ratio: 5 / 7.4; cursor: pointer; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2, .9, .3, 1.25); }
.flip.retournee .flip-in { transform: rotateY(180deg); }
.flip-dos, .flip-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-dos {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 3rem;
    background: repeating-linear-gradient(45deg, #1d1030 0 10px, #28153f 10px 20px); border: 2px solid var(--gold);
    box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 70%, transparent); animation: dosCarte 1.1s ease-in-out infinite alternate;
}
.flip-dos small { font-size: .7rem; font-weight: 900; opacity: .7; letter-spacing: 1px; }
.flip-face { transform: rotateY(180deg); }
.flip.retournee .flip-face { box-shadow: 0 0 30px color-mix(in srgb, var(--rc) 75%, transparent); }
.flip-face .tcarte { width: 100%; height: 100%; aspect-ratio: auto; cursor: default; }
.flip-face .tcarte:hover { transform: none; }
.flip-info { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); z-index: 2; padding: 2px 10px; border-radius: 99px; background: #000; color: #fff; border: 1.5px solid var(--rc); font-size: .74rem; font-weight: 900; white-space: nowrap; }
.flip-info.nouvelle { background: var(--rc); color: #000; }
@keyframes dosCarte { to { box-shadow: 0 0 34px color-mix(in srgb, var(--rc) 95%, transparent); } }
@media (max-width: 560px) { .ouverture-cartes { gap: 8px; } .flip { width: calc(33% - 8px); min-width: 90px; } .flip-dos { font-size: 2rem; } }

/* =====================================================================
   ⚔️ PASSE DE COMBAT
   ===================================================================== */
.pilule-passe { cursor: pointer; }
.passe-entete {
    --sc: #0f2a3d; padding: 12px; border-radius: 16px; text-align: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 85%, #000), color-mix(in srgb, var(--p) 32%, var(--sc)));
    border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.passe-titre { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.5rem; letter-spacing: 2px; color: var(--gold); }
.passe-gratuit { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .6rem; letter-spacing: 1px; padding: 2px 7px; border-radius: 6px; background: var(--green); color: #000; vertical-align: middle; }
.passe-saison { font-size: .78rem; font-weight: 800; opacity: .85; margin: 2px 0 10px; }
.passe-niveau { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.passe-num { display: flex; flex-direction: column; min-width: 64px; font-family: 'Bangers', 'Impact', sans-serif; font-size: 2.5rem; line-height: .9; color: #fff; text-shadow: 0 0 16px var(--gold); }
.passe-num small { font-size: .6rem; letter-spacing: 2px; opacity: .75; }
.passe-progression { flex: 1; text-align: left; }
.passe-progression .barre { height: 13px; }
.passe-progression small { display: block; margin-top: 4px; font-size: .64rem; font-weight: 700; opacity: .75; }
.passe-piste { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.palier {
    position: relative; flex: none; width: 92px; min-height: 128px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px; padding: 7px 5px;
    border-radius: 12px; border: 1.5px solid var(--ligne); background: var(--doux); text-align: center;
}
.palier-n { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1rem; opacity: .8; }
.palier-ic { font-size: 1.7rem; }
.palier-txt { font-size: .6rem; font-weight: 800; line-height: 1.15; opacity: .85; }
.palier-etat { font-size: .6rem; font-weight: 900; }
.palier.pris { opacity: .45; }
.palier.pris .palier-etat { color: var(--green); font-size: .9rem; }
.palier.verrou .palier-ic { filter: grayscale(.7); opacity: .65; }
.palier.prochain { border-color: var(--p); border-style: dashed; }
.palier.grand { width: 120px; border-width: 2px; border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, var(--panel)), var(--panel)); }
.palier.grand .palier-ic { font-size: 2.2rem; }
.palier.dispo { cursor: pointer; opacity: 1; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--panel)); animation: palierDispo .9s ease-in-out infinite alternate; }
.palier.dispo .palier-etat { padding: 1px 6px; border-radius: 6px; background: var(--gold); color: #000; }
@keyframes palierDispo { to { transform: translateY(-3px); box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 60%, transparent); } }
.sous-titre-info { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .64rem; letter-spacing: 0; color: var(--text); opacity: .7; }
.mission { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: var(--doux); border: 1.5px solid var(--ligne); }
.mission-ic { font-size: 1.4rem; }
.mission-corps { flex: 1; min-width: 0; }
.mission-nom { font-size: .8rem; font-weight: 800; margin-bottom: 4px; }
.mission-etat { font-size: .72rem; font-weight: 900; white-space: nowrap; }
.mission.faite { opacity: .65; border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.mission.faite .barre > i { background: var(--green); }
.passe-aide { margin-top: 12px; font-size: .78rem; }
.passe-aide summary { cursor: pointer; font-weight: 900; }
.passe-aide-liste { display: grid; gap: 4px; margin: 8px 0; }

/* 🏆 les succès avec une vraie image (photo du pote, jaquette, dessin du carnet) */
.succes img, .succes svg { width: 80%; height: 80%; object-fit: contain; border-radius: 8px; display: block; }
.succes-grand { width: 96px; height: 96px; margin: 0 auto 6px; display: grid; place-items: center; font-size: 3rem; }
.succes-grand img, .succes-grand svg { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }

/* 👀 Mode Zenix : « La course des toits » (la nuit, le bandeau bleu) */
.zenixmonde-mode { --p: #6ea8ff; --s: #a9ccff; --bg: #060a16; --gold: #cfe2ff; --panel: #0f1730; --text: #e9f1ff; --accent: #2b4a8a; --green: #6ea8ff; }
body.mode-zenix #entete { background: linear-gradient(90deg, #0b1330, #2b4a8a, #6ea8ff, #2b4a8a, #0b1330); background-size: 200% 100%; animation: citySlide 6s linear infinite; border-bottom-color: #6ea8ff; }
body.mode-zenix .logo, body.mode-zenix .logo .l1, body.mode-zenix .logo .l2 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
body.mode-zenix .logo .l3 { background: #060a16; color: #6ea8ff; border: 1.5px solid #6ea8ff; }
body.mode-zenix .logo .remaster { color: #dbe8ff; opacity: .85; }
body.mode-zenix .entete-stats .pilule, body.mode-zenix .btn-rond { background: rgba(0, 0, 0, .5); color: #fff; }
body.mode-zenix #avatar { filter: drop-shadow(0 0 20px #6ea8ff); }
body.mode-zenix .panneau { border-color: color-mix(in srgb, #6ea8ff 28%, transparent); }

/* 🚧 …mais la première fois, c'est la version qu'il a bâclée en 10 minutes */
body.zenix-beta #entete { background: repeating-linear-gradient(45deg, #3a3a3a 0 14px, #4a4a4a 14px 28px); border-bottom: 3px dashed #ffd400; animation: none; }
body.zenix-beta .logo, body.zenix-beta .logo .l1, body.zenix-beta .logo .l2 { font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: 0; color: #ffd400; text-shadow: none; }
body.zenix-beta .logo .l3 { background: #ffd400; color: #000; border: 0; transform: rotate(6deg); }
body.zenix-beta .logo .remaster { color: #fff; opacity: .6; }
body.zenix-beta #avatar { filter: drop-shadow(0 0 10px #ffd400) saturate(.5); }
body.zenix-beta .panneau { border-style: dashed; border-color: rgba(255, 212, 0, .35); }

/* 💥 l'explosion : l'écran fait semblant de planter */
body.crash-zenix #jeu, body.crash-zenix #entete { animation: crashSecousse .6s ease-in-out infinite; filter: hue-rotate(80deg) contrast(1.4); }
@keyframes crashSecousse { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(2px, -3px); } 75% { transform: translate(-2px, -2px); } 100% { transform: translate(3px, 1px); } }
#crash {
    position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; padding: 18px; text-align: center;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .96) 0 2px, rgba(20, 0, 0, .96) 2px 4px);
    animation: crashEntree .25s ease-out;
}
@keyframes crashEntree { from { opacity: 0; } }
.crash-txt { max-width: 560px; color: #ff4d4d; font-family: ui-monospace, Menlo, Consolas, monospace; }
.crash-titre { font-family: 'Bangers', Impact, sans-serif; font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: 3px; color: #ff2e2e; text-shadow: 2px 0 #00e5ff, -2px 0 #ffd400; animation: crashSecousse .6s ease-in-out infinite; }
.crash-txt pre { text-align: left; font-size: .76rem; line-height: 1.5; background: rgba(255, 0, 0, .08); border: 1px solid rgba(255, 77, 77, .4); border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.crash-txt p { color: #fff; font-family: 'Nunito', sans-serif; font-weight: 800; }
.crash-txt small { opacity: .6; }

/* 🙌 Mode 67 — les couleurs du boss caché de Twitch Arena */
.sixsept-mode { --p: #29b6f6; --s: #81d4fa; --bg: #050f1e; --gold: #b3e5fc; --panel: #0d1f38; --text: #e8f6ff; --accent: #0d47a1; --green: #29b6f6; }
body.mode-67 #entete { background: linear-gradient(90deg, #061326, #0d47a1, #29b6f6, #0d47a1, #061326); background-size: 200% 100%; animation: citySlide 6.7s linear infinite; border-bottom-color: #29b6f6; }
body.mode-67 .logo, body.mode-67 .logo .l1, body.mode-67 .logo .l2 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
body.mode-67 .logo .l3 { background: #050f1e; color: #29b6f6; border: 1.5px solid #29b6f6; }
body.mode-67 .logo .remaster { color: #d6f0ff; opacity: .85; }
body.mode-67 .entete-stats .pilule, body.mode-67 .btn-rond { background: rgba(0, 0, 0, .5); color: #fff; }
body.mode-67 #avatar { filter: drop-shadow(0 0 20px #29b6f6); image-rendering: pixelated; }
body.mode-67 .mini-algaclick { image-rendering: pixelated; }
body.mode-67 .panneau { border-color: color-mix(in srgb, #29b6f6 28%, transparent); }

/* ⚔️ Mode Twitch Arena — violet du live, rouge de l'arène */
.arena-mode { --p: #b388ff; --s: #ff2d55; --bg: #0b0616; --gold: #ffd166; --panel: #1a1030; --text: #f2e9ff; --accent: #ff2d55; --green: #b388ff; }
body.mode-arena #entete { background: linear-gradient(90deg, #12081f, #6a35c9, #ff2d55, #6a35c9, #12081f); background-size: 200% 100%; animation: citySlide 7s linear infinite; border-bottom-color: #ff2d55; }
body.mode-arena .logo, body.mode-arena .logo .l1, body.mode-arena .logo .l2 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
body.mode-arena .logo .l3 { background: #0b0616; color: #ff2d55; border: 1.5px solid #ff2d55; }
body.mode-arena .logo .remaster { color: #f0e2ff; opacity: .85; }
body.mode-arena .entete-stats .pilule, body.mode-arena .btn-rond { background: rgba(0, 0, 0, .5); color: #fff; }
body.mode-arena #avatar { filter: drop-shadow(0 0 24px #ff2d55); }
body.mode-arena .panneau { border-color: color-mix(in srgb, #b388ff 30%, transparent); }

/* ⚔️ Mode Légion — le rouge et le vert du 1er REC (mêmes couleurs que son jeu) */
.legion-mode { --p: #cc0000; --s: #228b22; --bg: #0d0d0d; --gold: #c8a800; --panel: #1a1a1a; --text: #e8e0d0; --accent: #d4b483; --green: #228b22; }
body.mode-legion #entete { background: linear-gradient(90deg, #1a0000, #3a0000, #cc0000, #8b0000, #1a3a1a, #228b22, #1a3a1a, #8b0000, #cc0000, #3a0000, #1a0000); background-size: 200% 100%; animation: citySlide 8s linear infinite; border-bottom-color: #c8a800; }
body.mode-legion .logo, body.mode-legion .logo .l1, body.mode-legion .logo .l2 { color: #f0e6c8; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
body.mode-legion .logo .l3 { background: #0d0d0d; color: #c8a800; border: 1.5px solid #c8a800; }
body.mode-legion .logo .remaster { color: #d4b483; opacity: .9; }
body.mode-legion .entete-stats .pilule, body.mode-legion .btn-rond { background: rgba(0, 0, 0, .5); color: #f0e6c8; }
body.mode-legion #avatar { filter: drop-shadow(0 0 20px rgba(204, 0, 0, .7)); }
body.mode-legion .panneau { border-color: color-mix(in srgb, #cc0000 28%, transparent); }

/* 🌌 Star Wars — le code caché de ton jeu de la Légion (bleu sabre + jaune du générique) */
.starwars-mode { --p: #4488ff; --s: #ffe81f; --bg: #000010; --gold: #ffe81f; --panel: #0a0a1a; --text: #e8f0ff; --accent: #ffe81f; --green: #4488ff; }
.starwars-mode .panneau { box-shadow: 0 0 18px rgba(68, 136, 255, .18); }

/* 🫡 Yannick — le légionnaire en tenue, kaki et cuir */
.yannick-mode { --p: #b3603a; --s: #6e7b45; --bg: #12140d; --gold: #d9c27a; --panel: #1e2016; --text: #efe7d2; --accent: #b3603a; --green: #6e7b45; }

/* 🛡️ ÉTAT-MAJOR — le panneau d'Algator37 (js/15-admin.js) */
#admin {
    position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column;
    background: #07070c; color: #e8e8f0; font-family: 'Nunito', sans-serif;
}
.admin-tete {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
    background: linear-gradient(90deg, #14060a, #3a0d16, #14060a); border-bottom: 1px solid rgba(255, 70, 110, .35);
}
.admin-titre { font-family: 'Bangers', Impact, sans-serif; font-size: 1.3rem; letter-spacing: 2px; color: #ff4d6d; }
.admin-titre small { display: block; font-family: 'Nunito', sans-serif; font-size: .62rem; letter-spacing: 2px; opacity: .5; }
.admin-onglets { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.admin-tab {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #b9b9c8;
    border-radius: 8px; padding: 7px 12px; font-size: .82rem; font-weight: 800; cursor: pointer;
}
.admin-tab.actif { background: #ff4d6d; border-color: #ff4d6d; color: #fff; }
.admin-corps { flex: 1; overflow-y: auto; padding: 14px; max-width: 900px; width: 100%; margin: 0 auto; }
.admin-corps .note { font-size: .78rem; opacity: .65; margin: 0 0 12px; }
.admin-corps .sous-titre { margin: 18px 0 8px; font-weight: 900; letter-spacing: 1px; color: #ff4d6d; font-size: .85rem; }
.admin-corps .vide { opacity: .4; font-size: .85rem; padding: 14px 0; text-align: center; }
.admin-alerte {
    background: rgba(255, 184, 0, .1); border: 1px solid rgba(255, 184, 0, .4); color: #ffd98a;
    border-radius: 10px; padding: 10px 12px; font-size: .8rem; margin-bottom: 12px;
}

.admin-ev {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px; padding: 9px 12px; margin-bottom: 7px;
}
.admin-ev.live { border-color: #ff4d6d; background: rgba(255, 77, 109, .1); }
.admin-ev-nom { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 190px; }
.admin-ev-nom .e { font-size: 1.5rem; }
.admin-ev-nom b { display: block; font-size: .9rem; }
.admin-ev-nom small { display: block; opacity: .5; font-size: .72rem; }
.admin-ev-live { font-size: .74rem; font-weight: 900; color: #ff4d6d; letter-spacing: 1px; white-space: nowrap; }
.admin-ev-actions { display: flex; align-items: center; gap: 6px; }
.admin-ev-actions .btn { padding: 7px 11px; font-size: .78rem; }
#admin select, #admin input, #admin textarea,
.admin-form select, .admin-form input, .admin-form textarea {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #e8e8f0;
    border-radius: 8px; padding: 7px 9px; font-family: inherit; font-size: .82rem;
}
#admin select, .admin-form select { cursor: pointer; }
#admin option, .admin-form option { background: #14141c; color: #e8e8f0; }

.admin-form { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 12px; }
.admin-form label { display: block; font-size: .74rem; font-weight: 800; opacity: .6; margin: 8px 0 4px; }
.admin-form input, .admin-form textarea, .admin-form select { width: 100%; }
.admin-form .btn { margin-top: 12px; }
.admin-duo { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-duo > div { flex: 1; min-width: 140px; }

.admin-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px; padding: 9px 12px; margin-bottom: 6px;
}
.admin-item > div { flex: 1; min-width: 0; }
.admin-item b { font-size: .88rem; }
.admin-item small { display: block; font-size: .74rem; opacity: .6; overflow: hidden; text-overflow: ellipsis; }
.admin-item small.gris { font-size: .68rem; opacity: .38; }
.admin-item.mort { opacity: .4; }
.admin-item .btn { padding: 6px 10px; font-size: .78rem; }
/* la fenêtre de confirmation doit passer AU-DESSUS du panneau */
body.admin-ouvert .surcouche { z-index: 9600; }
.admin-cibles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: .8rem; }
.admin-cibles > span { font-weight: 800; opacity: .6; }
.admin-cibles label {
    display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px; padding: 5px 11px; font-weight: 700;
}
.admin-cibles label.coche { background: rgba(255, 77, 109, .16); border-color: #ff4d6d; color: #ffc2ce; }
.admin-cibles input { accent-color: #ff4d6d; margin: 0; }

/* 👤 l'écran du compte : ses chiffres et l'état du nuage */
.compte-chiffres { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.compte-chiffres span {
    flex: 1; min-width: 74px; display: flex; flex-direction: column; align-items: center; padding: 7px 4px;
    border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); text-align: center;
}
.compte-chiffres b { font-family: 'Bangers', Impact, sans-serif; font-size: 1.1rem; letter-spacing: 1px; color: var(--gold); }
.compte-chiffres small { font-size: .62rem; opacity: .6; }
.nuage-etat { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1.5px solid var(--ligne); font-size: .85rem; }
.nuage-etat small { display: block; opacity: .7; font-size: .76rem; margin-top: 2px; }
.nuage-etat.bon { border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.nuage-etat.attention { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nuage-etat.mauvais { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
[data-version-avant] small { font-weight: 700; opacity: .65; font-size: .68rem; display: block; }

/* 🔎 la barre de recherche des listes */
.admin-recherche { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-recherche input { flex: 1; }
.admin-recherche .gris { font-size: .72rem; opacity: .45; white-space: nowrap; }
[data-cherchable].cachee { display: none !important; }   /* (avant : « .cachee » tout court, qui masquait aussi les « ? » des mondes, des thèmes et des potes) */

/* 🏠 le tableau de bord */
.admin-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 4px; }
.admin-tuile {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 8px; border-radius: 12px; text-align: center;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
}
.admin-tuile.live { border-color: #ff4d6d; background: rgba(255, 77, 109, .12); }
.admin-tuile .t-ic { font-size: 1.4rem; }
.admin-tuile b { font-family: 'Bangers', Impact, sans-serif; font-size: 1.5rem; letter-spacing: 1px; line-height: 1.1; }
.admin-tuile small { font-size: .68rem; opacity: .55; line-height: 1.2; }
.admin-enligne { display: flex; flex-wrap: wrap; gap: 5px; }
.pastille-joueur {
    padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.pastille-joueur.moi { background: rgba(255, 77, 109, .2); border-color: #ff4d6d; }
.admin-item.live { border-color: #ff4d6d; background: rgba(255, 77, 109, .1); }
.admin-boutons { display: flex; gap: 5px; flex: none; }
#admin code { font-family: ui-monospace, monospace; font-size: .72rem; opacity: .7; }

/* 👤 l'écran du compte */
.compte-connecte { display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px 14px; }
.compte-rond { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--p); flex: none; }
.compte-connecte b { font-size: 1.05rem; }
.compte-connecte small { display: block; opacity: .6; font-size: .78rem; }
.compte-form { display: flex; flex-direction: column; gap: 8px; }
.compte-form .champ { width: 100%; }
.compte-erreur { color: var(--danger); font-weight: 800; font-size: .85rem; margin: 10px 0 0; }
.compte-ok { color: var(--green); font-weight: 800; font-size: .85rem; margin: 10px 0 0; }
.compte-choix { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.compte-carte { flex: 1; min-width: 180px; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px; font-size: .85rem; line-height: 1.5; }
.compte-carte.mieux { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.compte-carte .t { font-weight: 900; letter-spacing: 1px; margin-bottom: 6px; color: var(--gold); font-size: .78rem; }

/* ---------- les 22 events ajoutés (look) ---------- */
body.printemps-event-mode { --p: #ff8fc7; --green: #7ed957; }
body.ete-event-mode { --p: #ffb300; --gold: #fff06a; }
body.ete-event-mode #jeu { filter: saturate(1.15) brightness(1.03); }
body.rentree-event-mode { --p: #4a7dff; --gold: #ffcf5c; }
body.noel-event-mode { --p: #e01b24; --green: #2ec27e; }
body.noel-event-mode .panneau { border-color: color-mix(in srgb, #2ec27e 45%, transparent); }
body.nouvelan-event-mode #entete { border-bottom: 4px solid; border-image: linear-gradient(90deg, #ffd166, #fff3b0, #ffd166) 1; }
body.nouvelan-event-mode #avatar { filter: drop-shadow(0 0 28px #ffd700); }
body.valentin-event-mode { --p: #ff4d8d; --gold: #ffc2d6; }
body.poisson-event-mode #jeu { transform: rotate(.35deg); }
body.poisson-event-mode .logo { transform: scaleX(-1); }
body.vendredi13-event-mode { --bg: #07070b; --p: #b0b0c0; --gold: #d9d9e6; }
body.vendredi13-event-mode #avatar { filter: grayscale(.7) drop-shadow(0 0 18px #000); }
body.camerone-event-mode { --p: #cc0000; --green: #228b22; --gold: #c8a800; }
body.sixsept-event-mode { --p: #29b6f6; --gold: #b3e5fc; }
body.anniv-event-mode #entete { border-bottom: 4px solid; border-image: linear-gradient(90deg, #ff99c8, #fcf6bd, #d0f4de, #a9def9, #e4c1f9) 1; }
body.nuitblanche-event-mode { --bg: #05060f; }
body.nuitblanche-event-mode #jeu { filter: brightness(.94) saturate(1.1); }
body.banger-event-mode { --p: #ff2e63; --gold: #ffd166; }
body.banger-event-mode #avatar { filter: drop-shadow(0 0 22px #ff2e63); }
body.tacos-event-mode { --p: #ff6b00; --gold: #ffd166; }
body.fourmis-event-mode { --p: #00e676; --gold: #b9f6ca; }
body.fourmis-event-mode .mini-algaclick { animation-duration: 6s !important; }
body.examen-event-mode { --p: #9146ff; --gold: #d8b4ff; }
body.revue-event-mode { --p: #cc0000; --gold: #c8a800; }
body.phonk-event-mode { --bg: #0a0a12; --p: #b388ff; }
body.phonk-event-mode #jeu { filter: contrast(1.08) saturate(1.2); }
body.paquets-event-mode { --p: #3aa0ff; --gold: #ffb800; }
body.eclats-event-mode { --p: #6fe3ff; --gold: #d6f6ff; }
body.eclats-event-mode #avatar { filter: drop-shadow(0 0 24px #6fe3ff); }
body.critique-event-mode { --p: #ff2e2e; }
body.critique-event-mode #avatar { filter: drop-shadow(0 0 20px #ff2e2e); }
body.tranquille-event-mode { --p: #3ddc84; --gold: #b9f6ca; }
.admin-auto { display: inline-block; margin-left: 6px; font-size: .6rem; font-weight: 900; letter-spacing: 1px; color: #7ee787; background: rgba(126, 231, 135, .12); border: 1px solid rgba(126, 231, 135, .35); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }

/* 🐰 Doctor Labubu — le bleu du TARDIS */
.doctorlabubu-mode { --p: #3a6fd8; --s: #7fa6ff; --bg: #0b1a33; --gold: #f2c14e; --panel: #13284d; --text: #eaf1ff; --accent: #f2c14e; --green: #7fa6ff; }
/* 🧑‍🦲 AlgaChauve — le fond vert */
.algachauve-mode { --p: #2fd46b; --s: #8cffb3; --bg: #06210f; --gold: #d4ffe2; --panel: #0d3a1c; --text: #eafff0; --accent: #2fd46b; --green: #2fd46b; }
/* 🧢 Nolan — le rouge de Cappy sur son fond bleu */
.nolan-mode { --p: #e3262b; --s: #ff8a8d; --bg: #0b3a6e; --gold: #ffd84a; --panel: #11508f; --text: #ffffff; --accent: #ffd84a; --green: #5fd0ff; }

/* 🥚 les œufs cachés : un mini-Algator discret, qu'on ne voit que si on cherche */
.oeuf {
    display: inline-block; background: none; border: 0; padding: 2px; margin: 2px; cursor: pointer;
    font-size: 13px; line-height: 1; opacity: .32; filter: grayscale(.4);
    transition: opacity .2s, transform .2s, filter .2s;
}
.oeuf:hover { opacity: 1; filter: none; transform: rotate(-12deg) scale(1.35); }
.oeuf.cache { display: block; margin: 6px auto 2px; }
.oeuf.oeuf-libre {
    position: fixed; z-index: 9400; font-size: 26px; opacity: 1; filter: drop-shadow(0 0 10px #ffd700);
    animation: oeufTombe .6s cubic-bezier(.3, 1.6, .5, 1), oeufBalance 1.4s ease-in-out .6s infinite;
}
.oeuf.eclot { animation: oeufEclot .45s ease-out forwards; pointer-events: none; }
@keyframes oeufTombe { from { transform: translateY(-40px) scale(.3); opacity: 0; } }
@keyframes oeufBalance { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes oeufEclot { to { transform: scale(2.6) rotate(20deg); opacity: 0; } }
/* 🥚 le thème des dix œufs */
.oeufdore-mode { --p: #ffb800; --s: #ffe08a; --bg: #1a1204; --gold: #ffd700; --panel: #2b1f07; --text: #fff6dc; --accent: #ffd700; --green: #b6e05a; }

/* 🤪 Mode WTF — vert fluo, rose bonbon, et rien qui tient droit */
.wtf-mode { --p: #ff3d9a; --s: #b8f03a; --bg: #120a1f; --gold: #b8f03a; --panel: #1f1233; --text: #fff4fb; --accent: #ffe14a; --green: #b8f03a; }
/* le dégradé commence et finit sur la même couleur : pas de couture quand il boucle */
body.mode-wtf #entete { background: linear-gradient(90deg, #2a0f3d, #ff3d9a, #ffe14a, #b8f03a, #3ad6ff, #2a0f3d); background-size: 200% 100%; animation: citySlide 4s linear infinite; border-bottom-color: #b8f03a; }
body.mode-wtf .logo, body.mode-wtf .logo .l1, body.mode-wtf .logo .l2 { color: #fff; text-shadow: 2px 2px 0 #ff3d9a, -2px -1px 0 #3ad6ff; }
body.mode-wtf .logo .l2 { display: inline-block; animation: wtfTremble 1.6s ease-in-out infinite; }
body.mode-wtf .logo .l3 { background: #120a1f; color: #b8f03a; border: 1.5px solid #b8f03a; }
body.mode-wtf .logo .remaster { color: #ffe14a; }
body.mode-wtf .entete-stats .pilule, body.mode-wtf .btn-rond { background: rgba(0, 0, 0, .45); color: #fff; }
body.mode-wtf .panneau { border-color: color-mix(in srgb, #ff3d9a 35%, transparent); }
/* le perso : il penche tout seul, et parfois il rétrécit, grossit ou se retourne (persoWTF) */
body.mode-wtf #avatar { transform: var(--wtf-t, none); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 0 18px #ff3d9a); }
body.mode-wtf #avatar-btn { animation: wtfPenche 3.2s ease-in-out infinite; cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='2' y='26' font-size='26'%3E%F0%9F%8D%8C%3C/text%3E%3C/svg%3E") 6 6, pointer; }
@keyframes wtfPenche { 0%, 100% { rotate: -4deg; } 50% { rotate: 5deg; } }
@keyframes wtfTremble { 0%, 100% { transform: rotate(-2deg) skewX(0); } 25% { transform: rotate(3deg) skewX(-8deg); } 50% { transform: rotate(-1deg) scale(1.08); } 75% { transform: rotate(2deg) skewX(6deg); } }
/* 🎡 la Roue du WTF retourne l'écran : jamais sur body (ça casse les éléments fixes) */
body.wtf-envers #jeu, body.wtf-envers #entete { transform: rotate(180deg); transition: transform .6s cubic-bezier(.5, 0, .3, 1.4); }
#jeu, #entete { transition: transform .6s ease; }

/* 🤪 Le Truc, en pote de la Team : les couleurs du Monde WTF */
.truc-mode { --p: #ff3d9a; --s: #b8f03a; --bg: #120a1f; --gold: #b8f03a; --panel: #1f1233; --text: #fff4fb; --accent: #ffe14a; --green: #b8f03a; }

/* 🦅 le maire Gérard danse sur son canapé banane, en haut du Studio */
.gerard {
    display: flex; flex-direction: column; gap: 6px; cursor: pointer; user-select: none;
    margin-bottom: 8px; padding: 6px 10px; border-radius: 14px;
    background: linear-gradient(90deg, rgba(255, 217, 59, .16), rgba(255, 217, 59, .04));
    border: 1px dashed rgba(255, 217, 59, .55);
}
.gerard:hover { background: linear-gradient(90deg, rgba(255, 217, 59, .26), rgba(255, 217, 59, .08)); }
.gerard img { width: 76px; height: 76px; flex: none; transform-origin: 50% 90%; animation: gerardDanse 1.1s ease-in-out infinite; }
.gerard-txt { display: flex; flex-direction: column; min-width: 0; }
.gerard-txt b { font-size: .9rem; }
.gerard-txt small { font-size: .7rem; opacity: .6; }
.gerard-bulle { margin-top: 3px; font-size: .78rem; font-style: italic; color: var(--gold); }
@keyframes gerardDanse {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    25% { transform: rotate(0deg) translateY(-6px) scaleX(-1); }
    50% { transform: rotate(8deg) translateY(0) scaleX(-1); }
    75% { transform: rotate(0deg) translateY(-6px); }
}
.gerard-haut { display: flex; align-items: center; gap: 10px; }
/* 📜 le décret du jour : un petit papier officiel sous Gérard */
.gerard-decret {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
    background: #fff6d8; color: #4a3500; border: 1px solid #e0c060; box-shadow: 0 2px 0 #c9a640;
}
.gerard-decret b { display: block; font-size: .78rem; letter-spacing: .5px; }
.gerard-decret small { display: block; font-size: .72rem; opacity: .8; }
.gerard-sceau { font-size: 1.3rem; flex: none; }
/* 🗳️ la mairie : le maire de la semaine danse à la place de Gérard, avec la même danse */
.mairie-tete { width: 76px; height: 76px; flex: none; display: grid; place-items: center; font-size: 3rem; transform-origin: 50% 90%; animation: gerardDanse 1.1s ease-in-out infinite; }
.mairie-tete img { width: 100%; height: 100%; object-fit: contain; animation: none; }
.mairie-vote {
    display: block; width: 100%; padding: 6px 10px; border-radius: 10px; cursor: pointer; text-align: left;
    background: rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--text);
    font: 700 .78rem 'Nunito', sans-serif;
}
.mairie-vote:hover { border-color: var(--gold); }
.mairie-vote u { color: var(--gold); text-underline-offset: 2px; font-weight: 900; }

/* 🎓 le tutoriel : un projecteur (tout est assombri sauf la zone) et une bulle qui explique */
.tuto-trou {
    position: fixed; z-index: 5800; pointer-events: none; border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(5, 3, 12, .66), 0 0 0 3px var(--gold), 0 0 26px 6px color-mix(in srgb, var(--gold) 55%, transparent);
    transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
.tuto-bulle {
    position: fixed; z-index: 5900; width: min(360px, calc(100vw - 24px));
    background: var(--panel); color: var(--text); border: 2px solid var(--gold); border-radius: 16px;
    padding: 14px 16px 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    transition: left .35s ease, top .35s ease; animation: tutoArrive .35s cubic-bezier(.3, 1.5, .5, 1);
}
.tuto-bulle.centre { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tuto-bulle h3 { margin: 2px 0 6px; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1.5px; font-size: 1.35rem; color: var(--gold); }
.tuto-bulle p { margin: 0 0 8px; font-size: .9rem; line-height: 1.5; }
.tuto-num { font-size: .68rem; font-weight: 900; letter-spacing: 2px; opacity: .5; }
.tuto-progres { font-size: .82rem; font-weight: 800; color: var(--p); margin-bottom: 8px; }
.tuto-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tuto-lien { background: none; border: 0; color: var(--text); opacity: .55; font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.tuto-lien:hover { opacity: 1; }
@keyframes tutoArrive { from { opacity: 0; scale: .85; } }

/* 🔉 curseurs de volume avec le pourcentage à côté */
.volume-regle { display: inline-flex; align-items: center; gap: 8px; }
.volume-regle input { width: 130px; }
.volume-regle b { min-width: 40px; text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; }

/* 🧱 Mode GATL — le bleu nuit étoilé du Block Blast Friend Edition, le rose #e94560 et la couronne dorée */
.gatl-mode { --p: #e94560; --s: #4ecdc4; --bg: #1a1a2e; --gold: #ffd700; --panel: #16213e; --text: #f4f6ff; --accent: #0f3460; --green: #2ecc71; }
body.mode-gatl {
    background-image: radial-gradient(1px 1px at 20% 15%, rgba(255, 255, 255, .45) 0, transparent 100%), radial-gradient(1px 1px at 70% 30%, rgba(255, 255, 255, .35) 0, transparent 100%),
        radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, .3) 0, transparent 100%), radial-gradient(1px 1px at 85% 80%, rgba(255, 255, 255, .4) 0, transparent 100%);
}
/* le dégradé commence et finit sur la même couleur : pas de couture quand il boucle */
body.mode-gatl #entete { background: linear-gradient(90deg, #16213e, #0f3460, #e94560, #ffd700, #2ecc71, #3498db, #9b59b6, #16213e); background-size: 200% 100%; animation: citySlide 9s linear infinite; border-bottom-color: #ffd700; }
body.mode-gatl .logo, body.mode-gatl .logo .l1, body.mode-gatl .logo .l2 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
body.mode-gatl .logo .l3 { background: #1a1a2e; color: #ffd700; border: 1.5px solid #ffd700; }
body.mode-gatl .logo .remaster { color: #cfe3ff; opacity: .85; }
body.mode-gatl .entete-stats .pilule, body.mode-gatl .btn-rond { background: rgba(0, 0, 0, .45); color: #fff; }
body.mode-gatl .panneau { border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 2px 20px rgba(0, 0, 0, .35); }
body.mode-gatl #avatar { filter: drop-shadow(0 0 22px rgba(233, 69, 96, .55)); border-radius: 18px; }
/* la rangée de 8 cases qui se remplit à chaque clic */
#gatl-rangee { display: none; }
body.mode-gatl #gatl-rangee { display: flex; align-items: center; justify-content: center; gap: 3px; margin: 8px auto 0; padding: 6px; width: max-content; background: rgba(0, 0, 0, .4); border-radius: 10px; }
#gatl-rangee i { width: 22px; height: 22px; border-radius: 5px; background: #1e2d5a; border: 1px solid #2a3f7a; transition: background .12s; }
#gatl-rangee span { margin-left: 6px; font-size: .78rem; font-weight: 900; color: var(--gold); min-width: 30px; }
#gatl-rangee.efface i { animation: gatlLigne .4s ease-out; }
@keyframes gatlLigne { 50% { transform: scale(1.35); filter: brightness(2); } }
/* un pote de GATL pas encore trouvé : un contour de bloc */
.carte-pote.pote-gatl { border: 1.5px dashed rgba(255, 215, 0, .45); }

/* 🧱 la bande de GATL : chacun sa couleur de bloc */
.gatl-loeline-mode  { --p: #2ecc71; --gold: #b6f7cd; --bg: #0c2416; --panel: #143a24; --text: #eafff1; --accent: #2ecc71; --green: #2ecc71; }
.gatl-tigrou-mode   { --p: #e74c3c; --gold: #ffc2bb; --bg: #2a0c0a; --panel: #401512; --text: #fff0ee; --accent: #e74c3c; --green: #2ecc71; }
.gatl-alban-mode    { --p: #3498db; --gold: #bfe3ff; --bg: #0b1e30; --panel: #12304c; --text: #eef7ff; --accent: #3498db; --green: #2ecc71; }
.gatl-ezenix-mode   { --p: #f1c40f; --gold: #fff2b0; --bg: #261f02; --panel: #3a3006; --text: #fffbe6; --accent: #f1c40f; --green: #2ecc71; }
.gatl-peuti-mode    { --p: #e67e22; --gold: #ffd7b0; --bg: #2a1605; --panel: #40230b; --text: #fff4ea; --accent: #e67e22; --green: #2ecc71; }
.gatl-whoisbro-mode { --p: #9b59b6; --gold: #e6c8f2; --bg: #1c0d24; --panel: #2c163a; --text: #f8efff; --accent: #9b59b6; --green: #2ecc71; }
.gatl-voiturre-mode { --p: #1abc9c; --gold: #b3f5e8; --bg: #062520; --panel: #0c3a32; --text: #eafffb; --accent: #1abc9c; --green: #1abc9c; }
.gatl-layann-mode   { --p: #90a4ae; --gold: #cfd8dc; --bg: #0f1518; --panel: #1b2529; --text: #eef3f5; --accent: #546e7a; --green: #2ecc71; }
.gatl-tana-mode     { --p: #7f8c8d; --gold: #34495e; --bg: #ecf0f1; --panel: #dfe6e9; --text: #1c2833; --accent: #bdc3c7; --green: #27ae60; }
.gatl-jisipa-mode   { --p: #95a5a6; --gold: #dfe6e7; --bg: #171c1c; --panel: #252c2c; --text: #f2f5f5; --accent: #95a5a6; --green: #2ecc71; }
.gatl-mael-mode     { --p: #e91e8c; --gold: #ffc0e3; --bg: #28061a; --panel: #3d0c29; --text: #ffeef8; --accent: #e91e8c; --green: #2ecc71; }

/* =====================================================================
   🔴 LE BOUTON INTERDIT (20-bouton.js) — code « ne pas appuyer »
   ===================================================================== */
#bouton-interdit {
    position: absolute; right: 10px; bottom: 10px; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
    transition: left .25s ease, top .25s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
    transform-origin: 100% 100%; -webkit-tap-highlight-color: transparent;
}
#bouton-interdit .bi-rouge {
    width: 50px; height: 50px; border-radius: 50%; border: 3px solid #262626;
    background: radial-gradient(circle at 35% 30%, #ff9a8f, #e10600 55%, #7a0000);
    box-shadow: 0 6px 0 #5a0000, 0 9px 14px rgba(0, 0, 0, .45), inset 0 -4px 8px rgba(0, 0, 0, .35);
}
#bouton-interdit:hover .bi-rouge, #bouton-interdit:focus-visible .bi-rouge { filter: brightness(1.12); }
#bouton-interdit.bi-appuye .bi-rouge { animation: biAppui .25s ease; }
@keyframes biAppui { 40% { transform: translateY(5px); box-shadow: 0 1px 0 #5a0000, 0 2px 6px rgba(0, 0, 0, .45), inset 0 -4px 8px rgba(0, 0, 0, .35); } }
#bouton-interdit .bi-txt {
    font: 800 .55rem/1.1 system-ui, sans-serif; letter-spacing: .06em; text-align: center;
    color: #ffd600; background: #111; border: 1.5px solid #ffd600; border-radius: 4px; padding: 2px 5px;
}
#bouton-interdit .bi-bulle {
    position: absolute; bottom: calc(100% + 8px); right: 0; width: max-content; max-width: 200px;
    background: #fff; color: #111; font: 700 .78rem/1.25 system-ui, sans-serif; text-align: left;
    padding: 6px 9px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); pointer-events: none;
}
#bouton-interdit .bi-bulle::after { content: ''; position: absolute; top: 100%; right: 22px; border: 6px solid transparent; border-top-color: #fff; }
#bouton-interdit .bi-bulle[hidden] { display: none; }
#bouton-interdit.bi-secoue { animation: biSecoue .35s; }
@keyframes biSecoue { 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
#bouton-interdit.bi-geant { transform: scale(2.3); }

/* ses bêtises sur le reste du jeu (jamais sur body : ça casse les éléments fixes) */
body.bi-secousse #jeu, body.bi-secousse #entete { animation: biSecousse .9s; }
@keyframes biSecousse { 10%, 50%, 90% { translate: -6px 3px; } 30%, 70% { translate: 6px -3px; } }
body.bi-gris #jeu, body.bi-gris #entete { filter: grayscale(1); }
body.bi-negatif #jeu, body.bi-negatif #entete { filter: invert(1) hue-rotate(180deg); }
body.bi-croco:not(.sans-curseurs), body.bi-croco:not(.sans-curseurs) * { cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='1' y='25' font-size='24'%3E%F0%9F%90%8A%3C/text%3E%3C/svg%3E") 6 6, pointer !important; }
#avatar-btn.bi-tourne { animation: biTourne 2s cubic-bezier(.3, .1, .3, 1) !important; }
@keyframes biTourne { to { rotate: 1080deg; } }
#likes.bi-beaucoup { color: transparent; position: relative; }
#likes.bi-beaucoup::after { content: 'BEAUCOUP'; position: absolute; inset: 0; color: var(--gold); text-align: center; }

/* ☢️ la fausse Tsar Bomba et 💻 le faux plantage */
#bi-tsar {
    position: fixed; inset: 0; z-index: 9800; display: grid; place-content: center; gap: 6px; text-align: center; padding: 16px;
    background: radial-gradient(circle, rgba(255, 70, 0, .85), rgba(26, 0, 0, .95) 70%); color: #fff;
    animation: biTsarClignote 1.6s ease-in-out infinite alternate;
}
#bi-tsar.bi-rigole { animation: none; background: rgba(0, 0, 0, .85); }
.bi-tsar-titre { font-family: 'Bangers', 'Impact', sans-serif; font-size: clamp(1.8rem, 7vw, 3.2rem); letter-spacing: 3px; }
.bi-tsar-compte { font-family: 'Bangers', 'Impact', sans-serif; font-size: clamp(5rem, 22vw, 10rem); line-height: 1; }
.bi-tsar-sous { font-weight: 700; }
@keyframes biTsarClignote { to { filter: brightness(1.08); } }   /* ⚠️ lent et léger : plus de clignotement rouge */
#bi-erreur {
    position: fixed; inset: 0; z-index: 9800; display: grid; place-content: center; text-align: center; padding: 16px;
    background: #0000aa; color: #fff; font: 700 1.1rem/1.6 'Courier New', monospace;
}
#bi-erreur b { display: block; width: max-content; margin: 0 auto 12px; padding: 0 12px; background: #aaa; color: #0000aa; font-size: 2.2rem; }

/* =====================================================================
   🎴 LES CARTES QUI SERVENT : deck, niveaux, albums, images (12c-collection.js)
   ===================================================================== */
.tcarte-art { position: relative; }
/* la jaquette partagée : l'emoji de la carte en autocollant dans le coin */
.tcarte-sticker {
    position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center;
    width: 1.55em; height: 1.55em; font-size: .95rem; line-height: 1; border-radius: 50%;
    background: rgba(0, 0, 0, .7); border: 1.5px solid var(--rc); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.tcarte-nb { background: color-mix(in srgb, var(--rc) 80%, #000); color: #fff; }
.tcarte.equipee { box-shadow: 0 0 0 2px var(--gold), 0 0 16px color-mix(in srgb, var(--gold) 60%, transparent); }
.tcarte-deck {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; padding: 1px 7px; border-radius: 0 0 8px 8px;
    background: var(--gold); color: #1a1208; font-size: .55rem; font-weight: 900; letter-spacing: .5px; white-space: nowrap;
}

/* le deck : 3 à 5 places */
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.deck-place { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deck-place.vide {
    aspect-ratio: 5 / 7.4; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center;
    border: 2px dashed color-mix(in srgb, var(--text) 30%, transparent); border-radius: 12px; opacity: .75;
}
.deck-place.vide > span { font-size: 1.8rem; font-weight: 900; opacity: .6; }
.deck-place.vide small { font-size: .62rem; line-height: 1.3; }
.deck-place.verrou { opacity: .45; }
.deck-pouvoir {
    font-size: .64rem; font-weight: 900; text-align: center; padding: 3px 4px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--gold) 18%, var(--panel)); color: var(--gold);
}
.deck-resume { line-height: 1.6; }

/* les albums */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.album {
    display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 10px; text-align: left; cursor: pointer;
    font: inherit; color: var(--text); background: color-mix(in srgb, var(--text) 6%, var(--panel)); border: 1.5px solid transparent;
}
.album:hover, .album.actif { border-color: var(--p); }
.album.fini { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel)); }
.album-haut { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.album-haut b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-haut small { font-weight: 900; opacity: .8; }
.album-barre { height: 6px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.album-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--p), var(--gold)); }
.album-bonus { font-size: .6rem; line-height: 1.3; opacity: .8; }

/* la fiche d'une carte */
.fiche-pouvoir { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.fiche-actions { flex-wrap: wrap; justify-content: flex-start; }
.fiche-actions .btn small { opacity: .75; }
.flip-info.niveau { background: var(--gold); color: #1a1208; }
/* le badge du deck dans le coin (le niveau garde l'autre coin) */
.tcarte-deck { left: 4px; top: 3px; transform: none; padding: 1px 4px; border-radius: 6px; font-size: .62rem; }
.tcarte.equipee .tcarte-monde { left: 30px; }
/* les cartes sans image : l'emoji en grand, sur un halo de la couleur de leur rareté */
.tcarte-art:not(:has(img)) {
    font-size: 2.9rem; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 55%, transparent), rgba(0, 0, 0, .45) 72%);
}
.tcarte.manquante .tcarte-art { filter: none; }

/* ✨ les cartes brillantes : un reflet holographique qui passe sur l'image, et le cadre arc-en-ciel */
.tcarte.brillante { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(120, 220, 255, .75), 0 0 30px rgba(255, 120, 220, .45); }
.tcarte.brillante .tcarte-art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .75;
    background: linear-gradient(115deg, rgba(255, 0, 150, .55), rgba(0, 220, 255, .55) 25%, rgba(255, 240, 0, .55) 50%, rgba(0, 255, 140, .55) 75%, rgba(255, 0, 150, .55)) 0 0 / 300% 300%;
    animation: holo 3.5s linear infinite;
}
.tcarte.brillante .tcarte-art::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 75% 60%, #fff 0 1px, transparent 2px), radial-gradient(circle at 45% 85%, #fff 0 1.2px, transparent 2.4px);
    animation: holoEtincelles 1.8s ease-in-out infinite alternate;
}
@keyframes holo { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes holoEtincelles { from { opacity: .2; } to { opacity: 1; } }
.tcarte-brille { position: absolute; bottom: 30%; right: 4px; z-index: 2; font-size: .9rem; filter: drop-shadow(0 0 4px #fff); }
.flip-info.brillante { background: linear-gradient(90deg, #ff4fd8, #4cc9f0, #ffe14a); color: #1a1208; border-color: #fff; }
.fiche-brille { margin: 6px 0; padding: 6px 10px; border-radius: 10px; font-weight: 800; background: linear-gradient(90deg, rgba(255, 79, 216, .25), rgba(76, 201, 240, .25), rgba(255, 225, 74, .25)); }

/* 🖊️ les cartes signées : un cadre doré et l'autographe en travers du bas */
.tcarte.signee { box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(255, 210, 63, .55); }
.tcarte-auto {
    position: absolute; left: 3px; right: 3px; bottom: 30%; z-index: 3; pointer-events: none; overflow: hidden;
    font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: .95rem; color: #fff6c9; text-align: center; white-space: nowrap;
    transform: rotate(-7deg); text-shadow: 0 1px 3px #000, 0 0 8px rgba(255, 210, 63, .9);
}
.fiche-signee {
    margin: 6px 0; padding: 8px 12px; border-radius: 10px; font-weight: 800; line-height: 1.35;
    background: linear-gradient(120deg, rgba(255, 210, 63, .3), rgba(255, 150, 0, .18)); border: 1.5px solid rgba(255, 210, 63, .6);
}
.fiche-signee small { display: block; margin-top: 4px; opacity: .85; font-weight: 700; }

/* 👑 la carte à 1 sur 1 000 000 : cadre en or, halo qui respire */
.tcarte.r-or:not(.manquante) { box-shadow: 0 0 0 2.5px #ffe066, 0 0 22px rgba(255, 224, 102, .8), 0 0 44px rgba(255, 170, 0, .45); animation: orRespire 2.6s ease-in-out infinite; }
.tcarte.r-or .tcarte-rar { color: #1a0f00; background: linear-gradient(90deg, #ffe066, #ffb703); border-radius: 6px; }
@keyframes orRespire { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.deck-resume.or { color: #ffe066; border: 1.5px solid rgba(255, 224, 102, .55); border-radius: 10px; padding: 6px 10px; background: rgba(255, 224, 102, .1); }
/* la pluie d'or quand elle tombe : tout l'écran vire à l'or pendant six secondes */
body.pluie-or::after {
    content: ''; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
    background: radial-gradient(circle at 50% 40%, rgba(255, 224, 102, .35), transparent 65%);
    animation: orFlash 6s ease-out forwards;
}
@keyframes orFlash { 0% { opacity: 0; } 25% { opacity: .6; } 100% { opacity: 0; } }   /* ⚠️ monte lentement, jamais en éclair */

/* 🖤 les cartes maudites : le trait devient noir et une ombre monte du bas */
.tcarte.maudite { box-shadow: 0 0 0 2px #1a0022, 0 0 18px rgba(120, 0, 60, .7); }
.tcarte.maudite .tcarte-art { box-shadow: inset 0 -20px 26px -10px rgba(170, 0, 75, .9), inset 0 0 0 1px rgba(255, 45, 85, .35); }
.tcarte.maudite .tcarte-nom { color: #ffb3c8; }
.tcarte-maudit { position: absolute; top: 3px; right: 3px; z-index: 3; font-size: .8rem; filter: drop-shadow(0 0 4px #ff2d55); }
.tcarte.maudite.equipee { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(160, 0, 70, .8); }
.fiche-maudite {
    margin: 6px 0; padding: 8px 12px; border-radius: 10px; font-weight: 800; line-height: 1.35;
    background: linear-gradient(120deg, rgba(120, 0, 50, .4), rgba(20, 0, 30, .5)); border: 1.5px solid rgba(255, 45, 85, .5); color: #ffd6e0;
}
.fiche-event { margin: 6px 0; padding: 6px 10px; border-radius: 10px; font-weight: 700; background: rgba(155, 93, 229, .22); border: 1.5px solid rgba(155, 93, 229, .5); }
.fiche-or { margin: 6px 0; padding: 8px 12px; border-radius: 10px; font-weight: 800; line-height: 1.35; color: #ffe066; background: linear-gradient(120deg, rgba(255, 224, 102, .22), rgba(255, 150, 0, .12)); border: 1.5px solid rgba(255, 224, 102, .6); }

/* 🏆 les souvenirs de boss : un trophée daté, impossible à retrouver après coup */
.souvenirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.souvenir {
    position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 8px; border-radius: 12px;
    background: linear-gradient(150deg, rgba(120, 60, 200, .28), var(--panel)); border: 1.5px solid rgba(180, 120, 255, .45);
}
.souvenir.or { background: linear-gradient(150deg, rgba(255, 210, 63, .3), var(--panel)); border-color: rgba(255, 210, 63, .7); }
.souvenir b { font-size: .82rem; line-height: 1.15; padding-right: 22px; }
.souvenir small { font-size: .68rem; opacity: .85; }
.souvenir-sceau { position: absolute; top: 6px; right: 7px; font-size: 1.1rem; filter: drop-shadow(0 1px 3px #000); }
.souvenir-vie { color: var(--gold); font-weight: 800; }

/* 🛒 la boutique d'éclats */
.boutique-jour {
    display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--rc) 22%, var(--panel)), var(--panel)); border: 1.5px solid color-mix(in srgb, var(--rc) 60%, transparent);
}
.boutique-jour > .tcarte { width: 96px; flex: none; }
.boutique-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.boutique-info > b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.05rem; }
.boutique-info small { font-size: .7rem; opacity: .85; }
.boutique-prix { display: flex; gap: 8px; align-items: baseline; }
.boutique-prix s { opacity: .55; font-size: .78rem; }
.boutique-prix b { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.2rem; color: var(--gold); letter-spacing: 1px; }
.boutique-fait { font-size: .74rem; font-weight: 800; color: var(--green); }

/* 👹 LE BOSS MONDIAL (21-boss.js) : un Douza géant à la place du perso */
body.boss-mode #avatar-btn, body.boss-mode #orbite, body.boss-mode #gatl-rangee { visibility: hidden; }
#boss-hud { position: absolute; left: 8px; right: 8px; top: 6px; z-index: 21; text-align: center; pointer-events: none; }
#boss-hud .bh-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.15rem; color: #ff4d4d; text-shadow: 0 2px 6px #000, 0 0 12px rgba(255, 60, 60, .6); }
#boss-hud .bh-par { font-size: .7rem; font-weight: 800; color: #ffd6d6; text-shadow: 0 1px 3px #000; margin-bottom: 4px; }
#boss-hud .barre { height: 14px; border-radius: 99px; background: rgba(0, 0, 0, .55); border: 1.5px solid rgba(255, 255, 255, .35); overflow: hidden; }
#boss-hud .barre > i { display: block; height: 100%; background: linear-gradient(90deg, #ff1f1f, #ff7a1a, #ffd23f); box-shadow: 0 0 12px rgba(255, 80, 40, .8); transition: width .25s; }
#boss-hud .bh-vie { font-size: .74rem; font-weight: 900; margin-top: 3px; color: #fff; text-shadow: 0 1px 4px #000; }
#boss-geant {
    position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 20; width: min(78%, 300px);
    padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    animation: bossRespire 1.6s ease-in-out infinite;
}
#boss-geant svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(255, 40, 40, .85)) drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
#boss-geant .bh-couronne { position: absolute; left: 50%; top: -6%; transform: translateX(-50%) rotate(-8deg); font-size: 2.6rem; filter: drop-shadow(0 2px 4px #000); }
#boss-geant.touche svg { animation: touche .12s; }
@keyframes bossRespire { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
#boss-bas {
    position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 21; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px;
    font-size: .74rem; font-weight: 800; color: #fff; text-shadow: 0 1px 4px #000; pointer-events: none;
}
#boss-bas b { color: var(--gold); }
body.boss-mode #zone-clic { background: radial-gradient(circle at 50% 55%, rgba(255, 40, 40, .28), transparent 65%); }
.boss-top { display: flex; flex-direction: column; gap: 4px; margin: 10px auto; max-width: 320px; }
.boss-top > div { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-weight: 800; }
.boss-top > div.moi { background: color-mix(in srgb, var(--gold) 25%, transparent); }

/* 👥 qui est en ligne, dans les Réglages */
.enligne { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.enligne-nb { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.1rem; }
.enligne-nb b { color: var(--green); font-size: 1.35rem; }
.enligne-liste { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.enligne-pastille { padding: 2px 9px; border-radius: 99px; font-size: .74rem; font-weight: 800; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); }
.enligne-pastille.moi { background: color-mix(in srgb, var(--gold) 28%, transparent); border-color: var(--gold); }

/* 🎨 LE MODE GRIFFOPHONE : le carnet, et le dessin qui se déforme de main en main */
/* 🗳️ LES ÉLECTIONS : l'écran des candidats (la mairie, elle, est en haut du Studio) */
.modale.elections h2 { text-align: center; }
.en-poste { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1.5px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.en-poste small { display: block; font-size: .72rem; opacity: .75; }
.en-poste b { display: block; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.25rem; }
.elu-photo { width: 110px; height: 110px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: 3.2rem; border: 2px solid var(--gold); }
.elu-photo.petit { width: 54px; height: 54px; margin: 0; font-size: 1.7rem; flex: none; border-width: 1.5px; }
.elu-photo img { width: 100%; height: 100%; object-fit: cover; }
.candidats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.candidat { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1.5px solid var(--ligne); }
.candidat.sortant { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.candidat.mon-vote { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--green) 30%, transparent); }
.cand-tete { display: flex; gap: 10px; align-items: center; }
.cand-tete b { display: block; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.05rem; }
.cand-tete small { font-size: .7rem; opacity: .65; }
.slogan { margin: 0; font-style: italic; font-weight: 800; color: var(--gold); font-size: .85rem; }
.promesses { margin: 0; padding-left: 18px; font-size: .78rem; line-height: 1.4; }
.casserole { margin: 0; font-size: .72rem; opacity: .6; }
.sondage { position: relative; height: 18px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .35); }
.sondage i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--p), var(--s)); }
.sondage span { position: relative; display: block; text-align: center; font: 800 .68rem/18px 'Nunito', sans-serif; }
.candidat .btn { margin-top: auto; }

/* 🗞️ le journal du scandale */
.journal { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #f4eed8; color: #22170a; border: 2px solid #22170a; text-align: center; font-family: Georgia, serif; }
.journal small { display: block; font: 800 .66rem 'Nunito', sans-serif; letter-spacing: 1px; opacity: .75; }
.journal b { display: block; font-size: 1.05rem; line-height: 1.2; margin: 4px 0; }
.journal.grand b { font-size: 1.3rem; }
.journal .elu-photo { margin: 8px auto; border-color: #22170a; }

/* 📺 le débat */
.debat-face { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 10px; }
.debat-face > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.debat-face img, .debat-face > div > span { width: 64px; height: 64px; object-fit: contain; font-size: 2.6rem; display: grid; place-items: center; }
.debat-face > span { font-family: 'Bangers', Impact, sans-serif; font-size: 1.6rem; color: var(--gold); }
.debat-fil { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; padding: 4px; }
.debat-ligne { display: flex; gap: 8px; align-items: flex-start; max-width: 88%; animation: debatArrive .3s ease; }
.debat-ligne span { font-size: 1.4rem; }
.debat-ligne p { margin: 0; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: .85rem; }
.debat-ligne p b { display: block; font-size: .7rem; opacity: .7; }
.debat-ligne.droite { align-self: flex-end; flex-direction: row-reverse; }
.debat-ligne.droite p { background: color-mix(in srgb, var(--p) 22%, transparent); }
.debat-ligne.presentatrice { align-self: center; max-width: 96%; }
.debat-ligne.presentatrice p { background: color-mix(in srgb, var(--gold) 16%, transparent); font-style: italic; }
@keyframes debatArrive { from { opacity: 0; transform: translateY(8px); } }

/* 🐱 Harleen traverse l'écran */
.harleen-fuit {
    position: fixed; z-index: 7000; left: -140px; border: 0; background: none; cursor: pointer; padding: 0;
    display: flex; flex-direction: column; align-items: center; animation: harleenCourt 9s linear forwards;
}
.harleen-fuit img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 12px #ffd23f); animation: harleenSaute .35s ease-in-out infinite alternate; }
.harleen-fuit span { font: 900 .7rem 'Nunito', sans-serif; color: #000; background: #ffd23f; border-radius: 999px; padding: 2px 8px; }
@keyframes harleenCourt { from { left: -140px; } to { left: calc(100vw + 20px); } }
@keyframes harleenSaute { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-10px) rotate(4deg); } }

/* 🔦 la coupure de courant : une lampe torche qui suit la souris */
#coupure {
    position: fixed; inset: 0; z-index: 6500; pointer-events: none;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 0 85px, rgba(0, 0, 0, .55) 120px, rgba(0, 0, 0, .97) 160px);
    animation: coupureArrive 1.2s ease-out;   /* ⚠️ le noir tombe doucement, pas d'un coup */
}
@keyframes coupureArrive { from { opacity: 0; } }

/* ⚠️ MODE PHOTOSENSIBLE (Réglages) : plus AUCUN éclair, clignotement ni changement de
   couleur de tout l'écran. Les mouvements restent (Harleen, Gérard qui danse…) :
   ce qui déclenche les crises, c'est la lumière qui change vite, pas ce qui bouge. */
body.photosensible #flash, body.photosensible.pluie-or::after, body.photosensible.glitch-rare::after { display: none !important; }
body.photosensible #jeu, body.photosensible #entete { animation: none !important; filter: none !important; }
body.photosensible #avatar, body.photosensible #avatar-btn { filter: none !important; }
body.photosensible.mode-archives #avatar-btn, body.photosensible #bi-tsar, body.photosensible .crash-titre,
body.photosensible.eclipse-rare::before, body.photosensible .tcarte.brillante .tcarte-art::after,
body.photosensible .tcarte.brillante .tcarte-art::before, body.photosensible .tcarte.r-or { animation: none !important; }
body.photosensible #coupure { animation-duration: 3s; }
#coupure span { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: 'Bangers', Impact, sans-serif; letter-spacing: 2px; color: #ffd23f; font-size: 1.1rem; }

/* 🙃 le jour à l'envers */
body.a-l-envers #jeu, body.a-l-envers #entete { transform: rotate(180deg); }
#remettre-endroit { position: fixed; z-index: 6000; left: 10px; bottom: 90px; padding: 8px 12px; border-radius: 999px; border: 2px solid var(--gold); background: rgba(0, 0, 0, .8); color: var(--gold); font: 900 .75rem 'Nunito', sans-serif; cursor: pointer; }

/* 📹 le TikTok de Douza */
.tiktok-liste { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.tiktok-video { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 46, 99, .1); border: 1px solid rgba(255, 46, 99, .35); }
.tt-play { width: 40px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #111; font-size: 1.3rem; }
.tiktok-video b { display: block; font-size: .85rem; }
.tiktok-video small { font-size: .7rem; opacity: .6; }

/* 😤 le client relou et 🕵️ le client mystère (Mode MCV) */
.client-bulle { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.client-e { font-size: 2.6rem; }
.client-bulle p { margin: 0; font-weight: 800; font-style: italic; }
.client-reps { display: flex; flex-direction: column; gap: 6px; }
.client-reps .btn { text-align: left; }
#client-mystere {
    position: fixed; z-index: 5500; top: 70px; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px;
    background: #111; color: #ffd23f; border: 2px solid #ffd23f; font: 900 .85rem 'Nunito', sans-serif; white-space: nowrap;
    box-shadow: 0 0 18px rgba(255, 210, 63, .5);
}

/* 🎪 la kermesse */
.kermesse-tickets { text-align: center; font-size: 1.1rem; margin: 6px 0; }
.kermesse-tickets b { font-family: 'Bangers', Impact, sans-serif; font-size: 1.6rem; color: var(--gold); }
.stands { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.stand { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1.5px dashed var(--ligne); }
.stand-e { font-size: 2rem; }
.stand small { font-size: .72rem; opacity: .7; }
.chamboule, .peche, .tir { margin-top: 10px; text-align: center; }
.cham-boites { font-size: 1.6rem; line-height: 1.2; margin-bottom: 8px; }
.cham-barre { position: relative; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin: 0 auto 10px; max-width: 360px; }
.cham-vert { position: absolute; left: 36%; width: 28%; top: 0; bottom: 0; background: rgba(46, 204, 113, .5); border-radius: 999px; }
.cham-vert::after { content: ''; position: absolute; left: 32%; width: 36%; top: 0; bottom: 0; background: rgba(46, 204, 113, .8); border-radius: 999px; }
.cham-viseur { position: absolute; top: -4px; width: 4px; height: 30px; background: #fff; border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 6px #fff; }
.peche { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(76, 201, 240, .15); }
.canard-k { font-size: 2.2rem; border: 0; background: none; cursor: pointer; animation: canardFlotte 1.6s ease-in-out infinite alternate; }
@keyframes canardFlotte { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-6px) rotate(6deg); } }
.tir-zone { position: relative; height: 220px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--ligne); overflow: hidden; }
.tir-douza { position: absolute; font-size: 2.2rem; border: 0; background: none; cursor: crosshair; animation: debatArrive .15s ease; }
.tir-infos { margin-bottom: 6px; }

/* 🛒 MODE MCV : les couleurs d'un magasin — turquoise, jaune promo, blanc néon */
.mcv-mode { --p: #2ec4b6; --s: #ffbf1f; --bg: #07211f; --gold: #ffd166; --panel: #0d2f2c; --text: #e8fffb; --accent: #ff6b35; --green: #06d6a0; }
/* la zone de clic devient le sol du magasin : des lignes de carrelage */
body.mode-mcv #zone-clic {
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    border: 2px solid rgba(46, 196, 182, .35);
}

/* 📼 MODE ARCHIVES : les couleurs exactes du fichier de la V2, recopiées de son :root */
.archives-mode { --p: #b026ff; --s: #ff2e9a; --bg: #07000d; --gold: #ffd700; --danger: #ff4444; --panel: #17021f; --text: #fff; --accent: #ff6b00; --green: #39ff6a; }
/* l'écran de l'époque : des lignes de balayage et une image qui tremble un peu */
body.mode-archives::before {
    content: ''; position: fixed; inset: 0; z-index: 9500; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
body.mode-archives #avatar-btn { animation: vhs 5s steps(1) infinite; }
/* ⚠️ photosensibilité : juste un petit décalage, plus de changement de couleur */
@keyframes vhs { 0%, 92% { transform: none; } 94% { transform: translateX(2px); } 96% { transform: translateX(-2px); } }
/* ⏳ le compte à rebours d'un monde qui ne dure qu'un moment */
#minuteur-monde {
    width: max-content; max-width: 92%; margin: 0 auto 6px; padding: 5px 16px; border-radius: 999px; white-space: nowrap;
    background: rgba(0, 0, 0, .55); border: 1.5px solid var(--p); color: var(--text);
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .95rem; text-align: center;
    box-shadow: 0 0 14px color-mix(in srgb, var(--p) 45%, transparent);
}

.griffophone-mode { --p: #ffb703; --s: #fb8500; --bg: #17130f; --gold: #ffd166; --panel: #241c15; --text: #fff3dd; --accent: #ffb703; --green: #8ac926; }
body.mode-griffophone #avatar { transform: var(--griffo-t, none); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), filter .45s; }
body.mode-griffophone #zone-clic {
    background: #1d1711;
    background-image: linear-gradient(rgba(255, 214, 140, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 214, 140, .08) 1px, transparent 1px);
    background-size: 100% 26px, 26px 100%;
    border: 2px dashed rgba(255, 183, 3, .45);
}
/* le dessin du carnet est sur fond blanc : on le montre comme une feuille posée sur la table */
body.mode-griffophone #avatar { background: #fffdf5; border-radius: 8px; padding: 6px; box-shadow: 0 12px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 183, 3, .35); }
/* 🎭 les aperçus des surprises dans l'État-Major */
.apercus-surprises { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; }
.apercus-surprises small { width: 100%; }
.apercus-surprises .btn { padding: 6px 10px; font-size: .75rem; }

/* ✨ LES RARETÉS ---------------------------------------------------- */
/* 📜 le message caché : l'écran « décroche » doucement, puis la transmission.
   ⚠️ Photosensibilité : AUCUN changement de couleur ni de lumière, aucun clignotement.
   (La première version inversait les couleurs 8 fois par seconde : c'est exactement
   ce qu'il ne faut jamais faire. Ici, juste un glissement lent et des lignes fixes.) */
body.glitch-rare #jeu, body.glitch-rare #entete { animation: glitchRare 1.8s ease-in-out forwards; }
@keyframes glitchRare { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
body.glitch-rare::after {
    content: ''; position: fixed; inset: 0; z-index: 6000; pointer-events: none;
    background: repeating-linear-gradient(rgba(57, 255, 106, .06) 0 2px, transparent 2px 5px);
}
.message-cache { padding: 16px; border-radius: 10px; background: #020a02; border: 1.5px solid #39ff6a; color: #39ff6a; font-family: ui-monospace, 'Courier New', monospace; text-align: center; box-shadow: 0 0 24px rgba(57, 255, 106, .35); }
.message-cache p { font-size: 1rem; line-height: 1.6; margin: 12px 0; }
.message-cache small { display: block; opacity: .7; font-size: .7rem; letter-spacing: 1px; }

/* 🕳️ le trou noir : tout est aspiré vers le centre */
#trou-noir {
    position: fixed; z-index: 6400; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none;
    background: #000; box-shadow: 0 0 0 6px #7b2cbf, 0 0 60px 30px rgba(123, 44, 191, .7), 0 0 160px 80px rgba(0, 0, 0, .8);
    animation: trouGrandit 8s ease-in forwards;
}
@keyframes trouGrandit { 0% { transform: scale(.2); } 70% { transform: scale(4); } 100% { transform: scale(7); } }
body.aspire #jeu, body.aspire #entete { transform-origin: 50vw 50vh; animation: aspire 8s ease-in forwards; }
@keyframes aspire { 0% { transform: none; opacity: 1; } 85% { transform: scale(.08) rotate(900deg); opacity: .6; } 100% { transform: scale(0) rotate(1080deg); opacity: 0; } }

/* 🌌 l'éclipse : tout devient violet et étoilé */
body.eclipse-rare { background: radial-gradient(circle at 50% 30%, #3c096c, #10002b 55%, #000 90%) !important; }
body.eclipse-rare::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .8;
    background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
        radial-gradient(2px 2px at 60% 30%, #e0aaff, transparent), radial-gradient(1px 1px at 80% 80%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 90% 15%, #fff, transparent), radial-gradient(1px 1px at 45% 50%, #c77dff, transparent);
    animation: holoEtincelles 2s ease-in-out infinite alternate;
}

/* 👑 la visite d'Algator37 */
#visite-bulle {
    position: absolute; z-index: 20; top: 12%; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 14px;
    background: #fff; color: #111; font: 900 .9rem 'Nunito', sans-serif; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    animation: debatArrive .3s ease;
}

/* 🛸 l'enlèvement */
#soucoupe { position: fixed; z-index: 6600; transform: translateX(-50%); border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; animation: soucoupeFlotte 1.2s ease-in-out infinite alternate; }
#soucoupe .ovni { font-size: 4.5rem; filter: drop-shadow(0 0 16px #39ff6a); }
#soucoupe .rayon { width: 120px; height: 180px; margin-top: -14px; clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(57, 255, 106, .6), rgba(57, 255, 106, .05)); pointer-events: none; }
#soucoupe small { font: 900 .75rem 'Nunito', sans-serif; color: #000; background: #39ff6a; border-radius: 999px; padding: 2px 10px; margin-top: -40px; }
@keyframes soucoupeFlotte { from { margin-top: 0; } to { margin-top: -10px; } }
#avatar-btn.enleve #avatar { animation: enleve 20s ease-in forwards; }
@keyframes enleve { to { transform: translateY(-45%) scale(.35) rotate(25deg); opacity: .4; } }
/* 👽 les antennes pour toute la journée */
.antennes { position: absolute; z-index: 6; left: 50%; top: 2%; width: 90px; height: 70px; transform: translateX(-50%); pointer-events: none; }
.antennes::before, .antennes::after {
    content: ''; position: absolute; bottom: 0; width: 4px; height: 60px; background: #39ff6a; border-radius: 2px;
    box-shadow: 0 -4px 0 6px #39ff6a inset;
}
.antennes::before { left: 22px; transform: rotate(-22deg); transform-origin: bottom; }
.antennes::after { right: 22px; transform: rotate(22deg); transform-origin: bottom; }
.antennes::before, .antennes::after { background: linear-gradient(#39ff6a 0 16%, #1b8a3a 16%); border-radius: 50% 50% 2px 2px / 12% 12% 2px 2px; }

/* 🎰 le jackpot */
#jackpot { position: fixed; inset: 0; z-index: 7500; display: grid; place-items: center; background: rgba(0, 0, 0, .55); pointer-events: none; }
#jackpot .machine { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 22px; border-radius: 22px; background: linear-gradient(#ff2e63, #7a0021); border: 4px solid #ffd23f; box-shadow: 0 0 40px rgba(255, 210, 63, .6); }
#jackpot .machine > span { font-size: 2.4rem; }
#jackpot .rouleaux { display: flex; gap: 8px; }
#jackpot .rouleaux b { width: 64px; height: 76px; display: grid; place-items: center; font-size: 2.6rem; background: #fff; border-radius: 10px; border: 3px solid #22223b; }
#jackpot .rouleaux b.stop { animation: debatArrive .2s ease; box-shadow: 0 0 16px #ffd23f; }
#jackpot small { font: 900 1.1rem 'Bangers', Impact, sans-serif; letter-spacing: 2px; color: #ffd23f; }
/* 🧞 le génie de la lampe — que du mouvement : rien ne s'allume ni ne clignote */
#lampe { position: fixed; z-index: 6600; transform: translate(-50%, -50%); border: 0; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; display: flex; flex-direction: column; align-items: center; animation: lampeFlotte 1.6s ease-in-out infinite alternate; }
#lampe .lampe-objet { display: block; font-size: 4.2rem; line-height: 1.1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
#lampe.frotte .lampe-objet { animation: lampeFrotte .25s ease; }
#lampe .lampe-fumee {
    position: absolute; left: 50%; bottom: 60%; width: 96px; height: 116px; transform: translateX(-50%); pointer-events: none; border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 50% 70%, rgba(199, 125, 255, .5), rgba(123, 44, 191, .22) 55%, transparent 72%); opacity: var(--fumee, 0); transition: opacity .8s ease;
}
#lampe small { font: 900 .75rem 'Nunito', sans-serif; color: #111; background: #ffd23f; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
#lampe .genie-sort { position: absolute; left: 50%; bottom: 55%; font-size: 3.6rem; pointer-events: none; animation: genieSort 1.4s ease-out forwards; }
#lampe.partie { animation: lampePart .8s ease-in forwards; }
@keyframes lampeFlotte { from { margin-top: 0; } to { margin-top: -8px; } }
@keyframes lampeFrotte { 0%, 100% { transform: rotate(0); } 30% { transform: translateX(-4px) rotate(-14deg); } 70% { transform: translateX(4px) rotate(12deg); } }
@keyframes genieSort { from { opacity: 0; transform: translate(-50%, 30px) scale(.3); } to { opacity: 1; transform: translate(-50%, -40px) scale(1.2); } }
@keyframes lampePart { to { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
.genie-tete { font-size: 4rem; line-height: 1; animation: lampeFlotte 2.4s ease-in-out infinite alternate; }
.genie-voeux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 8px; }
.genie-voeu { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; white-space: normal; }
.genie-voeu > span { font-size: 2rem; line-height: 1.1; }
.genie-voeu small { font: 700 .68rem 'Nunito', sans-serif; letter-spacing: 0; opacity: .8; }
@media (max-width: 480px) { .genie-voeux { grid-template-columns: 1fr; } }

/* ⚠️ le réglage photosensible se voit en premier */
.reglage.reglage-important { background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 10px; padding: 10px; border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); }

/* 🏆 LE MUR DES LÉGENDES */
.bouton-mur { width: 100%; margin: 8px 0 4px; }
.bouton-mur small { display: block; font: 700 .68rem 'Nunito', sans-serif; letter-spacing: 0; opacity: .75; }
.legende { padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 12%, transparent), rgba(255, 255, 255, .03)); border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.legende.vierge { background: rgba(255, 255, 255, .03); border-style: dashed; border-color: var(--ligne); }
.legende-tete { display: flex; align-items: center; gap: 10px; }
.legende-e { font-size: 1.8rem; flex: none; }
.legende-tete > div { flex: 1; min-width: 0; }
.legende-tete b { display: block; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.05rem; }
.legende-tete small { font-size: .7rem; opacity: .65; }
.legende-nb { flex: none; font: 900 .75rem 'Nunito', sans-serif; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); color: var(--gold); }
.legende.vierge .legende-nb { color: inherit; opacity: .5; }
.legende-noms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.legende-noms span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.legende-noms span.moi { background: color-mix(in srgb, var(--gold) 30%, transparent); }
.legende > small { display: block; margin-top: 6px; }

/* 🦆 LE CANARD EN PLASTIQUE (25-canard.js) — tout petit, il se dandine sur place */
.canard-bain {
    position: absolute; z-index: 5; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 1.35rem; line-height: 30px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
    animation: canardBain 2.6s ease-in-out infinite alternate;
}
@keyframes canardBain { from { transform: rotate(-8deg); } to { transform: rotate(8deg) translateY(-2px); } }

/* 🌙 LE MARCHÉ NOIR DE MINUIT (26-marche-noir.js) */
#marche-noir-btn {
    position: fixed; left: 14px; bottom: 16px; z-index: 5000; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, #240046, #10002b); color: #e0aaff; border: 2px solid #b388ff;
    font: 1rem 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
@media (max-width: 820px) { #marche-noir-btn { bottom: 84px; } }
.mn-vendeur { font-size: 3.6rem; line-height: 1; animation: lampeFlotte 2.4s ease-in-out infinite alternate; }
.mn-pitch { font-style: italic; opacity: .85; }
.mn-chrono { display: inline-block; margin: 2px auto 10px; padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1.5px solid #b388ff; font: .95rem 'Bangers', Impact, sans-serif; letter-spacing: 1px; color: #e0aaff; }
.mn-etal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mn-offre {
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; border-radius: 16px;
    background: rgba(0, 0, 0, .3); border: 1.5px dashed color-mix(in srgb, #b388ff 60%, transparent);
}
.mn-offre.vendu { opacity: .55; }
.mn-offre > b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.02rem; line-height: 1.1; }
.mn-offre > small { font-size: .72rem; opacity: .75; font-style: italic; }
.mn-offre .btn { width: 100%; margin-top: auto; }
.mn-e { font-size: 2.4rem; line-height: 1.1; }
.mn-prix { font: 900 .8rem 'Nunito', sans-serif; padding: 2px 10px; border-radius: 999px; background: #10002b; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.mn-carte .tcarte { width: 104px; cursor: default; }
.mn-carte .tcarte:hover { transform: none; }
@media (max-width: 440px) { .mn-etal { grid-template-columns: 1fr; } }
/* 🎩 le chapeau du vendeur, sur la tête du perso jusqu'à minuit */
.chapeau-louche { position: absolute; z-index: 6; left: 50%; top: -3%; transform: translateX(-50%) rotate(-10deg); font-size: 3.6rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }

/* 🌊 LE MODE MARÉE (27-maree.js) — la plage de Port-Plouf. Que du mouvement lent : rien ne s'allume. */
.maree-mode { --p: #48cae4; --s: #ffd23f; --bg: #03045e; --gold: #ffd166; --panel: #023e8a; --text: #eaf8ff; --accent: #ff9f1c; --green: #06d6a0; }
/* la zone de clic devient la plage : le ciel en haut, le sable en bas, et la mer qui monte dessus */
body.mode-maree #zone-clic { background: linear-gradient(#90e0ef, #caf0f8 40%, #f4d58d 40%, #e9c46a); border: 2px solid rgba(72, 202, 228, .45); }
#mer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; height: 30%; background: linear-gradient(rgba(0, 150, 199, .8), rgba(2, 62, 138, .92)); transition: height 3s ease; }
#mer .vagues {
    position: absolute; left: 0; right: 0; top: -9px; height: 10px; background-size: 40px 10px; background-repeat: repeat-x;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 10 Q10 0 20 5 T40 5 V10 Z' fill='rgba(0,150,199,0.8)'/%3E%3Cpath d='M0 10 Q10 0 20 5 T40 5' fill='none' stroke='white' stroke-opacity='.7' stroke-width='1.4'/%3E%3C/svg%3E");
    animation: vaguesGlissent 7s linear infinite;
}
@keyframes vaguesGlissent { to { background-position-x: 40px; } }
.objet-plage {
    position: absolute; z-index: 6; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 1.9rem; line-height: 40px; text-align: center; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
    animation: objetSort .5s ease-out;
}
.objet-plage img { width: 34px; height: 34px; vertical-align: middle; pointer-events: none; }
.objet-plage.objet-crabe { animation: objetSort .5s ease-out, crabeCourt 1.4s ease-in-out .5s infinite alternate; }
.objet-plage.pris { animation: objetPris .3s ease-in forwards; pointer-events: none; }
.objet-plage.emporte { animation: objetEmporte .9s ease-in forwards; pointer-events: none; }
@keyframes objetSort { from { transform: translateY(14px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes crabeCourt { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes objetPris { to { transform: translateY(-20px) scale(1.3); opacity: 0; } }
@keyframes objetEmporte { to { transform: translateY(10px) scale(.6); opacity: 0; } }
#maree-jauge {
    display: block; width: max-content; max-width: 92%; margin: 0 auto 6px; padding: 5px 16px; border-radius: 999px; cursor: pointer;
    background: rgba(0, 0, 0, .55); border: 1.5px solid #48cae4; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: .95rem 'Bangers', 'Impact', sans-serif; letter-spacing: 1px;
}
.courbe-maree { display: block; width: 100%; max-width: 420px; margin: 8px auto; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.cabane-chiffres { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cabane-chiffres span { flex: 1; min-width: 90px; display: flex; flex-direction: column; align-items: center; padding: 7px 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); }
.cabane-chiffres b { font-family: 'Bangers', Impact, sans-serif; font-size: 1.05rem; letter-spacing: 1px; color: var(--gold); }
.cabane-chiffres small { font-size: .7rem; opacity: .7; }
.bouteille-mot { font-style: italic; padding: 10px 14px; border-radius: 12px; background: #f4e1b6; color: #3d2c1e; }
/* ⚠️ photosensible : même le mouvement lent s'arrête */
body.photosensible #mer .vagues, body.photosensible .canard-bain, body.photosensible .mn-vendeur, body.photosensible .objet-plage.objet-crabe { animation: none !important; }

/* =====================================================================
   📱 LE TÉLÉPHONE (≤ 820 px, là où la barre Clic / Boutique / Empire apparaît)
   Tout est ici, rien ne touche au PC. --nav-h = la vraie hauteur de cette barre,
   mesurée par 12-interface.js (elle grandit avec l'encoche de l'iPhone).
   ===================================================================== */
@media (max-width: 820px) {
    /* 🔍 plus de zoom quand on tape vite (double tap), ni de texte sélectionné par erreur */
    html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
    * { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    #jeu, #entete, #nav-mobile, #radio, #toasts { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    /* sous 16 px, l'iPhone zoome tout seul quand on touche un champ (le code secret) */
    input, textarea, select { font-size: 16px !important; -webkit-user-select: text; user-select: text; }

    /* 🎵 la radio se pose AU-DESSUS de la barre du bas, jamais dessus ; la barre passe devant quoi qu'il arrive */
    body { padding-bottom: calc(var(--nav-h, 70px) + 84px); }
    #nav-mobile { z-index: 3100; }
    #radio { bottom: calc(var(--nav-h, 70px) + 8px); padding: 4px 8px 6px; gap: 4px; }
    #radio-viz { width: 30px; }
    #radio .mini.gros { width: 32px; height: 32px; }

    /* 🔔 les notifications : plus petites, trois au plus, et on clique À TRAVERS (elles ne bloquent plus rien) */
    #toasts { top: auto; bottom: calc(var(--nav-h, 70px) + 64px); right: 8px; width: min(270px, calc(100vw - 16px)); gap: 5px; }
    #toasts, #toasts .toast { pointer-events: none; }
    .toast { font-size: .76rem; padding: 7px 10px; border-radius: 11px; border-left-width: 4px; }
    .toast.succes-toast .ic { font-size: 1.2rem; }
    #toasts .toast:nth-last-child(n+4) { display: none; }

    /* 🪟 les fenêtres tiennent dans l'écran qu'on voit vraiment (dvh : sans la barre d'adresse du navigateur) */
    .surcouche { padding: 10px; }
    .modale { padding: 16px 14px; border-radius: 18px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
    .modale h2 { font-size: 1.4rem; margin-bottom: 8px; padding: 0 30px; }
    .modale .fermer { top: 8px; right: 8px; width: 30px; height: 30px; }
    .modale .actions { gap: 8px; margin-top: 10px; }
    .fiche-carte .tcarte { width: 128px; }
    .pote-photo[style*="130px"] { width: 96px !important; height: 96px !important; }
    .genie-tete, .mn-vendeur { font-size: 3rem; }

    /* 📢 les petites fenêtres flottantes : plus petites, au-dessus de la radio ; celles qui ne font
       qu'afficher (la guerre, le client mystère) laissent passer les doigts */
    .pub-twitch { bottom: calc(var(--nav-h, 70px) + 64px); right: 8px; width: min(240px, calc(100vw - 16px)); padding: 10px 12px; font-size: .8rem; }
    .pub-twitch .t { font-size: .98rem; }
    #live-invite { bottom: calc(var(--nav-h, 70px) + 64px); left: 8px; padding: 8px 12px 8px 8px; font-size: .8rem; }
    #parents { bottom: calc(var(--nav-h, 70px) + 64px); padding: 10px 16px; font-size: 1.1rem; }
    #guerre { top: auto; bottom: calc(var(--nav-h, 70px) + 120px); left: 8px; width: min(200px, calc(100vw - 16px)); padding: 8px 10px; font-size: .75rem; pointer-events: none; }
    #client-mystere { pointer-events: none; font-size: .75rem; }
    #remettre-endroit, #marche-noir-btn { bottom: calc(var(--nav-h, 70px) + 64px); left: 8px; }
    #marche-noir-btn { padding: 7px 12px; font-size: .9rem; }
}

/* =====================================================================
   ✨ LES 50 RARETÉS (28-raretes.js) — que du mouvement lent et des fondus doux :
   rien ne s'allume d'un coup, rien ne clignote.
   ===================================================================== */
.rare-emoji { font-size: 3.4rem; line-height: 1.1; text-align: center; }
.rare-cadre { padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent); text-align: center; }
.rare-lettre { font-style: italic; padding: 12px 14px; border-radius: 12px; background: #fff8e7; color: #3d2c1e; }
.rare-choix { display: grid; gap: 8px; margin-top: 10px; }
#rare-pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 6px; max-width: 94%; }
.rare-pastille { padding: 5px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); border: 1.5px solid var(--gold); color: var(--text); font: .92rem 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; }
/* 🐊 l'Algaclick doré, dans l'orbite pour toujours */
#algaclick-or { z-index: 4; filter: sepia(1) saturate(5) hue-rotate(-12deg) drop-shadow(0 0 6px #ffd23f); }
/* 🍐 la Poire qui traverse l'écran */
.poire-volante { position: fixed; left: -90px; z-index: 5600; width: 72px; height: 72px; padding: 0; border: 0; background: none; cursor: pointer; animation: poireVole 8s linear forwards; }
.poire-volante img { width: 100%; height: 100%; object-fit: contain; animation: poireBattement .9s ease-in-out infinite alternate; }
@keyframes poireVole { to { left: calc(100vw + 20px); } }
@keyframes poireBattement { from { transform: translateY(-10px) rotate(-8deg); } to { transform: translateY(10px) rotate(8deg); } }
/* 🤪 l'œil du Truc */
.oeil-truc { position: fixed; z-index: 5600; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #1b1030; background: radial-gradient(circle at 40% 35%, #fff, #e9ecef); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); animation: objetSort .6s ease-out; }
.oeil-truc .pupille { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #555 0 20%, #111 22%); transition: transform .15s ease-out; }
.oeil-hg { top: 80px; left: 12px; }
.oeil-hd { top: 80px; right: 12px; }
.oeil-bg { bottom: 90px; left: 12px; }
.oeil-bd { bottom: 90px; right: 12px; }
/* 🐱 Harleen sur le clavier */
#harleen-clavier { position: absolute; z-index: 7; left: 50%; top: 6px; transform: translateX(-50%); max-width: 92%; padding: 5px 12px; border-radius: 12px; background: #fff; color: #111; font: 900 .85rem 'Nunito', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
/* 🌠 les étoiles filantes */
.etoile-filante { position: fixed; top: -50px; z-index: 5600; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 2rem; animation: etoileTombe 6.5s linear forwards; }
@keyframes etoileTombe { to { transform: translate(-140px, calc(100vh + 80px)); } }
/* 🌕 la lune bleue : une lune fixe dans le coin, rien d'autre */
#lune-rare { position: fixed; top: 64px; right: 18px; z-index: 5; font-size: 3rem; pointer-events: none; filter: hue-rotate(180deg) drop-shadow(0 0 16px #74c0fc); opacity: .9; }
/* 🌪️ la mini-tornade traverse l'écran, lentement */
.mini-tornade { position: fixed; z-index: 5600; left: -80px; bottom: 30%; font-size: 3.6rem; pointer-events: none; animation: tornadePasse 6s linear forwards; }
@keyframes tornadePasse { to { transform: translateX(calc(100vw + 160px)); } }
/* 🦑 le tentacule du calmar */
.calmar { position: absolute; z-index: 6; bottom: 6%; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 2.6rem; animation: objetSort .6s ease-out, calmarOndule 1.6s ease-in-out .6s infinite alternate; }
@keyframes calmarOndule { from { transform: rotate(-10deg); } to { transform: rotate(10deg) translateY(-6px); } }
/* 🏚️ le séisme : le Studio tangue doucement, 2 pixels */
body.seisme #col-boutique .panneau { animation: seisme 1.2s ease-in-out 3; }
@keyframes seisme { 0%, 100% { transform: none; } 25% { transform: translateX(-2px) rotate(-.3deg); } 75% { transform: translateX(2px) rotate(.3deg); } }
/* 🌑 la nuit polaire : un voile sombre qui arrive en 3 secondes, et repart pareil */
#voile-nuit { position: fixed; inset: 0; z-index: 4000; pointer-events: none; background: rgba(2, 6, 28, .5); opacity: 0; transition: opacity 3s ease; }
body.nuit-polaire #voile-nuit { opacity: 1; }
/* 🚪 la porte de la clé rouillée */
.porte-cachee { position: absolute; z-index: 5; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 1.4rem; line-height: 32px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); opacity: .9; }
/* 🎁 le cadeau qui grossit */
#cadeau-grossit { position: fixed; z-index: 5000; right: 16px; bottom: 84px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 0; }
#cadeau-grossit span { font-size: calc(1.8rem + var(--n, 1) * .22rem); line-height: 1; transition: font-size .6s ease; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
#cadeau-grossit small { font: 900 .7rem 'Nunito', sans-serif; background: #ff5d8f; color: #fff; border-radius: 999px; padding: 1px 8px; }
/* 🥚 l'œuf, puis la créature, à côté du perso */
#creature-rare { position: absolute; z-index: 6; left: 8%; bottom: 6%; font-size: 2.2rem; pointer-events: none; animation: lampeFlotte 2.2s ease-in-out infinite alternate; }
/* 🎲 le dé qui roule (il tourne, c'est tout) */
.de7.roule { animation: deRoule .4s linear 3; }
@keyframes deRoule { to { transform: rotate(360deg); } }
/* 🪞 le miroir, 🐌 le ralenti */
body.miroir #jeu { transform: scaleX(-1); }
body.ralenti .mini-algaclick { animation-duration: 30s !important; }
/* 🚶 le perso qui s'en va, et ses traces de pas */
#avatar-btn.parti { animation: persoPart 2.5s ease-in forwards; }
#avatar-btn.revient { animation: persoRevient 1.5s ease-out; }
@keyframes persoPart { to { transform: translateX(140%); } }
@keyframes persoRevient { from { transform: translateX(140%); } to { transform: none; } }
.traces-pas { position: absolute; z-index: 6; right: 4%; bottom: 10%; display: flex; gap: 10px; align-items: center; font-size: 1.6rem; }
.traces-pas span { opacity: .55; transform: rotate(90deg); }
.traces-pas button { border: 0; background: none; cursor: pointer; font-size: 2rem; padding: 4px; transform: rotate(90deg); }
/* 👯 le clone */
.clone-perso { position: absolute; z-index: 4; left: 4%; bottom: 8%; width: 38%; transform: scaleX(-1); opacity: .9; pointer-events: none; }
/* 👻 le 13ᵉ bâtiment */
#batiment-fantome { margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; border: 1.5px dashed rgba(200, 200, 255, .5); background: rgba(160, 160, 220, .12); font-weight: 800; font-size: .85rem; opacity: .85; }
/* 📺 l'écran de veille : il glisse, il rebondit, il ne change jamais de couleur */
#dvd-rare { position: fixed; left: 0; top: 0; z-index: 5500; pointer-events: none; padding: 8px 16px; border-radius: 12px; background: #1b1030; color: #ffd23f; border: 2px solid #ffd23f; font: 1.2rem 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; will-change: transform; }
/* 💀 le faux GAME OVER : il arrive en fondu, jamais d'un coup */
#faux-gameover { position: fixed; inset: 0; z-index: 9800; display: grid; place-content: center; gap: 10px; text-align: center; background: rgba(0, 0, 0, .92); animation: fonduNoir 1.2s ease; }
#faux-gameover b { font: 4rem 'Bangers', 'Impact', sans-serif; letter-spacing: 6px; color: #ff4d4d; }
#faux-gameover small { font: 900 1.1rem 'Nunito', sans-serif; color: #fff; opacity: .85; }
@keyframes fonduNoir { from { opacity: 0; } to { opacity: 1; } }
/* 🐞 la coccinelle, 🍿 les pop-corn */
.coccinelle { position: absolute; z-index: 7; right: 16%; top: 14%; font-size: 1.8rem; pointer-events: none; animation: lampeFlotte 2s ease-in-out infinite alternate; }
.popcorn { position: fixed; z-index: 5600; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 1.7rem; animation: popcornSaute 1.9s ease-out forwards; }
@keyframes popcornSaute { 0% { transform: translate(0, 0); } 40% { transform: translate(calc(var(--dx) * .5), -110px); } 100% { transform: translate(var(--dx), 60px); opacity: 0; } }
/* 🖼️ le chef-d'œuvre encadré (un cadre fixe, doré) */
#avatar-btn.encadre { box-shadow: 0 0 0 8px #b8860b, 0 0 0 12px #ffd23f, 0 10px 30px rgba(0, 0, 0, .5); border-radius: 12px; }
/* ✨ le doigt d'or : les ondes de clic deviennent dorées */
body.doigt-or .onde { border-color: #ffd23f; }
body.doigt-or:not(.sans-curseurs) #avatar-btn { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 2 L4 22 L9 17 L13 26 L17 24 L13 15 L20 15 Z' fill='%23ffd23f' stroke='%237a5200' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer; }
/* 📓 le carnet des raretés */
.carnet-rares { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.carnet-case { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .04); border: 1.5px dashed var(--ligne); }
.carnet-case b { font-size: 1.8rem; line-height: 1.1; }
.carnet-case span { font-weight: 900; font-size: .8rem; }
.carnet-case small { font-size: .64rem; opacity: .65; }
.carnet-case.vue { border-style: solid; border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
/* 🏆 le mur des légendes : celles que personne n'a vécues, en petites tuiles */
.legendes-vierges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.legendes-vierges span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, .03); border: 1.5px dashed var(--ligne); }
.legendes-vierges b { font-size: 1.5rem; }
.legendes-vierges em { font-style: normal; font-weight: 900; font-size: .72rem; }
.legendes-vierges small { font-size: .6rem; opacity: .6; }
/* 🏅 le CLASSEMENT des raretés (27/09/2026) : le rang dans le carnet, le score, et le classement des chasseurs du mur */
.carnet-case { position: relative; }
.cc-rang { position: absolute; top: 4px; left: 6px; font: 900 .62rem 'Nunito', sans-serif; opacity: .6; }
.carnet-case.vue .cc-rang { opacity: .9; color: var(--rc, var(--gold)); }
.carnet-score { text-align: center; margin: 6px 0 8px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 12%, transparent); }
.carnet-score small { display: block; font-size: .68rem; opacity: .7; margin-top: 2px; }
.carnet-niv { cursor: pointer; background: none; color: inherit; font: inherit; }
.carnet-niv.actif { background: color-mix(in srgb, var(--gold) 22%, transparent); }
.classement-chasseurs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.chasseur { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1.5px solid var(--ligne); }
.chasseur.moi { background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.chasseur:nth-child(-n+3) { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.ch-rang { flex: none; width: 2.2rem; text-align: center; font: 900 1.05rem 'Nunito', sans-serif; }
.chasseur:nth-child(-n+3) .ch-rang { font-size: 1.5rem; }
.ch-nom { flex: 1; min-width: 0; }
.ch-nom b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-nom small { font-size: .68rem; opacity: .65; }
.ch-rare { flex: none; display: flex; flex-direction: column; align-items: center; font-size: 1.4rem; line-height: 1; }
.ch-rare small { font: 900 .5rem 'Nunito', sans-serif; color: var(--rc); margin-top: 2px; }
.ch-pts { flex: none; min-width: 3.2rem; text-align: right; font-family: 'Bangers', Impact, sans-serif; font-size: 1.4rem; color: var(--gold); }
.ch-pts small { font: 900 .6rem 'Nunito', sans-serif; margin-left: 2px; opacity: .8; }
.legende-niv { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font: 900 .55rem 'Nunito', sans-serif; letter-spacing: .5px; color: #111; background: var(--rc); }
.legende-premier { margin-top: 6px; font-size: .72rem; opacity: .85; }
/* 🤖 le jeu qui « bugue » (exprès) — rien ne clignote : tout glisse ou arrive en fondu */
#avatar-btn.fuite { transition: translate .6s ease-in-out; }
.compteur { position: relative; }
.faux-compteur { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: 14px; background: var(--bg);
    font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: clamp(1.6rem, 6vw, 2.6rem); color: #ff4d6d; }
.faux-compteur.parfait { color: var(--gold); }
.chargement-rare { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 9; width: 124px; height: 124px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; font: 900 1.1rem 'Nunito', sans-serif; }
.chargement-rare .cr-rond { position: absolute; inset: 12px; border-radius: 50%; border: 7px solid rgba(255, 255, 255, .2); border-top-color: var(--gold); animation: crTourne 1.2s linear infinite; }
@keyframes crTourne { to { transform: rotate(360deg); } }
body.curseur-geant, body.curseur-geant * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 32 32'%3E%3Cpath d='M2 2 L2 26 L8 20 L12 29 L16 27 L12 18 L20 18Z' fill='white' stroke='%231b1030' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 6, pointer !important; }
#jeu { transition: filter 2s ease; }
body.vieux-film #jeu { filter: grayscale(1) sepia(.35) contrast(1.05); }
/* 📱 le TikTok retrouvé : la vidéo dans sa fenêtre, pas en plein écran (vérifiée sans flash, et c'est le joueur qui la lance) */
.video-rare { display: flex; justify-content: center; margin: 8px 0; }
.video-rare video { display: block; max-width: 100%; max-height: 58vh; width: auto; border-radius: 14px; background: #000; }
/* ☄️ la comète : elle traverse lentement le ciel en 12 s (rien ne clignote) */
.comete-rare { position: fixed; left: -140px; z-index: 5600; width: 120px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; transition: left 12s linear, transform 12s linear; transform: translateY(0) rotate(12deg); }
.comete-rare.passe { left: calc(100vw + 20px); transform: translateY(80px) rotate(12deg); }
.cr-queue { position: absolute; left: 0; top: 14px; width: 92px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255, 214, 10, .55), rgba(255, 255, 255, .85)); }
.cr-tete { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #fff3b0 55%, #ffb703); box-shadow: 0 0 14px rgba(255, 214, 10, .6); }
/* ⚠️ photosensible : on garde les mécaniques, on arrête ce qui bouge pour décorer */
body.photosensible .poire-volante img, body.photosensible #creature-rare, body.photosensible .coccinelle,
body.photosensible.seisme #col-boutique .panneau { animation: none !important; }
body.photosensible .calmar { animation: objetSort .6s ease-out !important; }
@media (max-width: 820px) {
    #cadeau-grossit { right: 8px; bottom: calc(var(--nav-h, 70px) + 130px); }
    .oeil-bg, .oeil-bd { bottom: calc(var(--nav-h, 70px) + 70px); }
    .carnet-rares, .legendes-vierges { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* =====================================================================
   🎉 LES EVENTS, EN MIEUX (29-events-plus.js)
   Une affiche qui glisse, des objets à attraper, une ambiance qui flotte
   lentement derrière le jeu. Rien ne clignote, rien ne tourne en couleur.
   ===================================================================== */
.ev-puce { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); font: 800 .72rem 'Nunito', sans-serif; letter-spacing: 0; color: var(--text); }
.ae-puces { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
/* 📣 l'affiche : elle descend, reste 6 secondes, remonte. On clique à travers. */
.affiche-event {
    position: fixed; z-index: 5900; left: 50%; top: 74px; width: min(480px, calc(100vw - 24px)); transform: translateX(-50%);
    display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 18px; pointer-events: none;
    background: linear-gradient(160deg, var(--panel), #0a0014); border: 2px solid var(--gold); color: var(--text);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6); animation: afficheArrive .5s cubic-bezier(.2, 1.3, .5, 1);
}
.affiche-event.sort { animation: afficheSort .6s ease-in forwards; }
.affiche-event .ae-emoji { font-size: 3rem; line-height: 1; flex: none; }
.affiche-event b { display: block; font: 1.35rem 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; color: var(--gold); }
.affiche-event p { margin: 2px 0; font-size: .86rem; font-weight: 700; }
.affiche-event small { font-size: .72rem; opacity: .75; }
@keyframes afficheArrive { from { transform: translate(-50%, -30px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes afficheSort { to { transform: translate(-50%, -30px); opacity: 0; } }
/* 🎈 les objets de l'event */
.objet-event { position: fixed; z-index: 5600; width: 50px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 2.2rem; line-height: 50px; text-align: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.objet-event.mouv-fixe { animation: objetSort .5s ease-out, lampeFlotte 1.8s ease-in-out .5s infinite alternate; }
.objet-event.mouv-tombe { animation: evTombe var(--duree, 8s) linear forwards; }
.objet-event.mouv-traverse { animation: evTraverse var(--duree, 8s) linear forwards; }
.objet-event.mouv-marche { animation: evMarche var(--duree, 12s) linear forwards; }
@keyframes evTombe { to { transform: translateY(var(--dy)) rotate(40deg); } }
@keyframes evTraverse { 0% { transform: translate(0, 0); } 25% { transform: translate(calc(var(--dx) * .25), -18px); } 50% { transform: translate(calc(var(--dx) * .5), 0); } 75% { transform: translate(calc(var(--dx) * .75), -18px); } 100% { transform: translate(var(--dx), 0); } }
@keyframes evMarche { to { transform: translate(var(--dx), var(--dy)); } }
/* 🌫️ l'ambiance : quelques emojis qui montent très lentement, derrière le jeu */
#ambiance-event { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#ambiance-event span { position: absolute; bottom: -60px; opacity: .28; animation: evMonte linear infinite; }
@keyframes evMonte { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(-100vh - 120px)) rotate(25deg); } }
/* 🏁 le récap de fin */
.recap-event {
    position: fixed; z-index: 5900; left: 16px; bottom: 84px; width: min(320px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, var(--panel), #0a0014); border: 2px solid var(--gold); color: var(--text);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55); font-size: .82rem; font-weight: 800; cursor: pointer; animation: objetSort .5s ease-out;
}
.recap-event b { font: 1.1rem 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: var(--gold); }
.recap-event.sort { animation: afficheSort .6s ease-in forwards; }
/* 🎯 la mission dans le détail d'un event */
.ev-mission { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.ev-mission .barre { margin: 6px 0; }
.ev-mission small { font-size: .74rem; opacity: .8; }
/* 📅 le calendrier des events */
.ev-ligne { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1.5px dashed var(--ligne); }
.ev-ligne.vecu { border-style: solid; border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.ev-ligne.en-cours { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.ev-ligne > div { flex: 1; min-width: 0; }
.ev-ligne b { display: block; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; }
.ev-ligne small { font-size: .72rem; opacity: .7; }
.ev-e { font-size: 1.8rem; flex: none; }
.ev-vu { flex: none; color: var(--gold); font-weight: 900; }
/* ⚠️ photosensible : l'ambiance ne bouge plus, les objets restent là où ils sont */
body.photosensible #ambiance-event span { animation: none !important; bottom: auto; top: 30%; }
body.photosensible .objet-event.mouv-fixe { animation: none !important; }
@media (max-width: 820px) {
    .affiche-event { top: 64px; padding: 10px 12px; }
    .affiche-event .ae-emoji { font-size: 2.3rem; }
    .recap-event { left: 8px; bottom: calc(var(--nav-h, 70px) + 64px); }
    .objet-event { width: 56px; height: 56px; line-height: 56px; }
}

/* =====================================================================
   ✨ LES RARETÉS, EN MIEUX — la grande annonce, les niveaux, le carnet
   (couleur du niveau dans --rc). Rien ne clignote : elle glisse, elle reste, elle repart.
   ===================================================================== */
.annonce-rare {
    position: fixed; z-index: 6700; left: 50%; top: 70px; width: min(500px, calc(100vw - 20px)); transform: translateX(-50%); pointer-events: none;
    border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, var(--panel), #0a0014); color: var(--text);
    border: 3px solid var(--rc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .65), 0 0 40px color-mix(in srgb, var(--rc) 35%, transparent);
    animation: afficheArrive .55s cubic-bezier(.2, 1.3, .5, 1);
}
.annonce-rare.sort { animation: afficheSort .6s ease-in forwards; }
.ar-ruban { text-align: center; padding: 5px 10px; background: var(--rc); color: #120a1e; font: 1.05rem 'Bangers', 'Impact', sans-serif; letter-spacing: 3px; }
.ar-corps { display: flex; gap: 12px; align-items: center; padding: 12px 16px; }
.ar-emoji { font-size: 3.2rem; line-height: 1; flex: none; }
.ar-corps b { display: block; font: 1.5rem 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; color: var(--rc); }
.ar-corps small { display: block; font-size: .74rem; font-weight: 800; opacity: .8; }
.ar-corps p { margin: 4px 0 0; font-size: .86rem; font-weight: 700; }
/* le ruban dans la fenêtre d'une rareté */
.rare-ruban { margin: -6px -6px 8px; padding: 5px 10px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--rc) 22%, transparent); border: 1.5px solid var(--rc); color: var(--rc); font: .95rem 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; }
/* 🌈 l'arc-en-ciel à l'envers : un sourire aux couleurs de l'arc-en-ciel, fixe, en haut de l'écran */
#arc-envers {
    position: fixed; z-index: 4500; left: 50%; top: -24vw; width: 64vw; height: 40vw; transform: translateX(-50%); pointer-events: none; opacity: .5;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    box-shadow: inset 0 -10px 0 #ff595e, inset 0 -20px 0 #ffca3a, inset 0 -30px 0 #8ac926, inset 0 -40px 0 #1982c4, inset 0 -50px 0 #6a4c93;
    animation: fonduNoir 1.2s ease;
}
#arc-envers.part { transition: opacity 1.2s ease; opacity: 0; }
/* 📓 le carnet */
.carnet-haut { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.carnet-haut .barre { flex: 1; }
.carnet-haut b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; color: var(--gold); white-space: nowrap; }
.carnet-chance { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: rgba(6, 214, 160, .1); border: 1.5px solid rgba(6, 214, 160, .45); }
.carnet-chance b { color: #06d6a0; }
.carnet-chance small { display: block; font-size: .74rem; opacity: .8; margin-top: 2px; }
.carnet-filtres { margin: 6px 0; }
.carnet-case { position: relative; border-color: color-mix(in srgb, var(--rc, var(--ligne)) 45%, transparent); padding-top: 18px; }
.carnet-case.vue { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.carnet-case .cc-niv { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font: .58rem 'Bangers', Impact, sans-serif; letter-spacing: 1.5px; color: var(--rc); white-space: nowrap; }
.carnet-case em { font-style: normal; font-size: .66rem; font-weight: 700; opacity: .85; line-height: 1.25; }
@media (max-width: 820px) {
    .annonce-rare { top: 60px; }
    .ar-emoji { font-size: 2.5rem; }
    .ar-corps b { font-size: 1.25rem; }
    #arc-envers { width: 90vw; top: -34vw; height: 56vw; }
}

/* =====================================================================
   📊 LE MODE EXCEL (30-excel.js) — le jeu déguisé en tableur.
   Blanc, gris, un peu de vert, la police des bureaux, des lignes de grille.
   Plus rien ne bouge, ne brille ou ne pleut : ça trahirait.
   ===================================================================== */
.excel-mode { --dg: #217346; --dg-fonce: #185c37; --bg: #ffffff; --panel: #ffffff; --p: var(--dg); --s: #1f1f1f; --gold: var(--dg); --text: #1f1f1f; --green: var(--dg); --accent: var(--dg); --danger: #c00000; --ligne: #d4d4d4; --doux: #f3f3f3; }
.sheets-mode { --dg: #1a73e8; --dg-fonce: #0b57d0; --bg: #ffffff; --panel: #ffffff; --p: var(--dg); --s: #1f1f1f; --gold: var(--dg); --text: #202124; --green: #188038; --accent: var(--dg); --danger: #d93025; --ligne: #e1e3e1; --doux: #f1f3f4; }
body.deguise { background: #ffffff !important; background-image: none !important; color: #1f1f1f; }
body.deguise, body.deguise * { font-family: 'Segoe UI', Calibri, Arial, sans-serif !important; letter-spacing: 0 !important; text-shadow: none !important; animation: none !important; }
/* tout ce qui brille, pleut ou bouge disparaît */
body.deguise #orbite, body.deguise .emoji-tombe, body.deguise .confetti, body.deguise .onde, body.deguise #radio,
body.deguise #bandeau-events, body.deguise #ambiance-event, body.deguise .affiche-event, body.deguise .annonce-rare,
body.deguise .recap-event, body.deguise .objet-event, body.deguise #maree-jauge, body.deguise #rare-pastilles,
body.deguise .pub-twitch, body.deguise #live-invite, body.deguise .entete-stats, body.deguise .combo-ligne,
body.deguise #buffs, body.deguise .team-equipee, body.deguise .codes-titre, body.deguise .harleen-fuit,
body.deguise #minuteur-monde, body.deguise #marche-noir-btn, body.deguise #cadeau-grossit, body.deguise #lune-rare,
body.deguise #arc-envers, body.deguise #creature-rare, body.deguise .canard-bain, body.deguise .porte-cachee,
body.deguise #flash, body.deguise .logo .l3, body.deguise .logo .remaster, body.deguise #guerre, body.deguise #zenix,
body.deguise .gerard[data-gerard], body.deguise .gerard.mairie { display: none !important; }   /* Gérard et la mairie trahiraient le déguisement */

/* la barre de titre verte */
body.deguise #entete { background: var(--dg) !important; border: 0 !important; box-shadow: none !important; padding: 5px 12px !important; min-height: 0; }
body.deguise .logo { font-size: .82rem !important; color: #ffffff !important; font-weight: 400 !important; }
body.deguise .logo .l1, body.deguise .logo .l2 { display: inline !important; color: #ffffff !important; font-size: .82rem !important; font-weight: 400 !important; background: none !important; }
body.deguise .btn-rond { background: transparent !important; border: 0 !important; box-shadow: none !important; width: 28px !important; height: 28px !important; font-size: .8rem !important; filter: grayscale(1) brightness(1.8); }
body.deguise .btn-rond i { display: none; }
/* le ruban, la barre de formule, les lettres des colonnes */
#xl-ruban { background: #f3f3f3; border-bottom: 1px solid #d4d4d4; color: #1f1f1f; font-size: 12px; user-select: none; }
.xl-menus { display: flex; gap: 2px; padding: 0 8px; background: var(--dg); overflow: hidden; }
.xl-menus > * { padding: 5px 11px; color: #ffffff; white-space: nowrap; font-weight: 400; }
.xl-menus b { font-weight: 400; background: var(--dg-fonce); }
.xl-menus .actif { background: #f3f3f3; color: var(--dg); }
.xl-outils { display: flex; gap: 0; padding: 4px 8px 2px; overflow: hidden; background: #f3f3f3; }
.xl-groupe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; padding: 0 10px; border-right: 1px solid #d4d4d4; position: relative; padding-bottom: 16px; }
.xl-groupe em { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10px; color: #6a6a6a; white-space: nowrap; }
.xl-gros { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 4px; font-size: 20px; line-height: 1; color: var(--dg); }
.xl-gros small { font-size: 10px; color: #1f1f1f; }
.xl-petits { display: flex; flex-direction: column; gap: 3px; }
.xl-petits > span { font-size: 12px; }
.xl-rang { display: flex; gap: 4px; align-items: center; }
.xl-rang > * { min-width: 16px; text-align: center; font-size: 12px; color: #1f1f1f; }
.xl-champ { border: 1px solid #c6c6c6; background: #ffffff; padding: 0 16px 0 4px; min-width: 70px !important; text-align: left !important; }
.xl-champ.court { min-width: 24px !important; }
.xl-a { border-bottom: 3px solid #c00000; }
.xl-formule { display: flex; align-items: stretch; border-top: 1px solid #d4d4d4; background: #ffffff; }
.xl-nom { width: 72px; padding: 3px 6px; border-right: 1px solid #d4d4d4; }
.xl-fx { padding: 3px 10px; border-right: 1px solid #d4d4d4; color: #6a6a6a; font-style: italic; }
.xl-contenu { padding: 3px 8px; flex: 1; }
.xl-colonnes { display: flex; background: #f3f3f3; border-top: 1px solid #d4d4d4; overflow: hidden; }
.xl-colonnes span { flex: none; width: 72px; text-align: center; padding: 1px 0; border-right: 1px solid #d4d4d4; font-size: 11px; color: #444444; }
.xl-colonnes .xl-coin { width: 40px; }
/* la feuille : des lignes de grille, les numéros à gauche */
body.deguise #jeu { position: relative; max-width: none !important; margin: 0 !important; padding: 8px 8px 30px 48px !important; gap: 10px !important;
    background-color: #ffffff; background-image: linear-gradient(#e2e2e2 1px, transparent 1px), linear-gradient(90deg, #e2e2e2 1px, transparent 1px);
    background-size: 72px 20px; background-position: 40px 0; }
#xl-lignes { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; overflow: hidden; background: #f3f3f3; border-right: 1px solid #d4d4d4; }
#xl-lignes span { display: block; height: 20px; line-height: 20px; text-align: center; font-size: 11px; color: #444444; border-bottom: 1px solid #e2e2e2; box-sizing: border-box; }
body.deguise .panneau { background: #ffffff !important; border: 1px solid #c6c6c6 !important; border-radius: 0 !important; box-shadow: none !important; }
body.deguise #col-boutique .panneau, body.deguise #col-empire .panneau, body.deguise .modale, body.deguise #toasts { filter: grayscale(1); }
body.deguise .panneau *, body.deguise .modale * { color: #1f1f1f; }
body.deguise .titre-panneau, body.deguise .sous-titre, body.deguise .art-nom { font-weight: 600 !important; color: #1f1f1f !important; }
/* tous les boutons deviennent des boutons de bureau */
body.deguise .btn, body.deguise .onglet, body.deguise .qte, body.deguise .sous-onglet, body.deguise .art-btn, body.deguise .btn-renaissance {
    background: #f3f3f3 !important; color: #1f1f1f !important; border: 1px solid #c6c6c6 !important; border-radius: 2px !important; box-shadow: none !important;
    font-weight: 400 !important; font-size: .8rem !important; transform: none !important;
}
body.deguise .onglet.actif, body.deguise .qte.actif, body.deguise .sous-onglet.actif { background: #ffffff !important; color: var(--dg) !important; border-color: var(--dg) !important; }
body.deguise .art-btn:disabled { color: #9a9a9a !important; }
body.deguise .article { background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #e2e2e2 !important; border-radius: 0 !important; margin: 0 !important; padding: 4px 6px !important; transform: none !important; }
body.deguise .art-icone { background: none !important; border-radius: 0 !important; }
body.deguise .pastille { background: var(--dg) !important; color: #ffffff !important; }
/* les likes : une cellule sélectionnée, le perso : un graphique */
body.deguise .compteur { text-align: left; border: 2px solid var(--dg); padding: 4px 8px; margin-bottom: 8px; }
body.deguise #likes { font-size: 1.15rem !important; font-weight: 400 !important; color: #1f1f1f !important; }
body.deguise #likes-unite, body.deguise #lps { font-size: .75rem !important; color: #595959 !important; font-weight: 400 !important; }
body.deguise #zone-clic { background: #ffffff !important; border: 1px solid #bfbfbf !important; border-radius: 0 !important; }
body.deguise #avatar-btn { background: none !important; }
body.deguise #avatar { filter: none !important; }
body.deguise .bsp { background: #ffffff !important; border: 1px solid #d4d4d4 !important; border-radius: 0 !important; }
body.deguise .barre { background: #e6e6e6 !important; border-radius: 0 !important; }
body.deguise .barre i { background: var(--dg) !important; border-radius: 0 !important; }
body.deguise .codes-ligne .champ { border-radius: 0 !important; border: 1px solid #c6c6c6 !important; background: #ffffff !important; color: #1f1f1f !important; }
/* les parents : une boîte de dialogue, on clique sur OK */
body.deguise #parents { background: #ffffff !important; color: #1f1f1f !important; border: 1px solid #8a8a8a !important; border-top: 24px solid var(--dg) !important;
    border-radius: 2px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .3) !important; font-size: .9rem !important; font-weight: 400 !important; padding: 14px 18px !important; }
body.deguise #parents::after { content: 'OK'; display: block; width: 84px; margin: 12px auto 0; padding: 3px 0; border: 1px solid var(--dg); background: #f3f3f3; font-size: .8rem; }
/* Douza : juste une erreur de cellule */
body.deguise #douza { filter: grayscale(1) opacity(.6); }
body.deguise .douza-hud { background: #ffffff !important; color: #c00000 !important; border: 1px solid #c00000 !important; border-radius: 0 !important; box-shadow: none !important; font-size: .75rem !important; }
/* un like doré : un bouton Σ ; le noir : #N/A */
body.deguise .like-dore { font-size: 0 !important; width: 28px !important; height: 24px !important; background: #ffffff !important; border: 1px solid var(--dg) !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; }
body.deguise .like-dore::after { content: 'Σ'; font-size: 15px; color: var(--dg); }
body.deguise .like-dore.noir::after { content: '#N/A'; font-size: 9px; color: #c00000; }
body.deguise .texte-flottant { color: var(--dg) !important; font-size: .8rem !important; font-weight: 400 !important; }
/* les messages : des petites infobulles grises */
body.deguise .toast { background: #ffffff !important; color: #1f1f1f !important; border: 1px solid #c6c6c6 !important; border-left: 3px solid var(--dg) !important; border-radius: 2px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .2) !important; font-size: .75rem !important; font-weight: 400 !important; }
/* les fenêtres : des boîtes de dialogue */
body.deguise .surcouche { background: rgba(255, 255, 255, .35) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.deguise .modale { background: #ffffff !important; border: 1px solid #8a8a8a !important; border-top: 24px solid var(--dg) !important; border-radius: 2px !important; box-shadow: 0 8px 26px rgba(0, 0, 0, .3) !important; }
body.deguise .modale h2 { color: #1f1f1f !important; font-size: 1rem !important; font-weight: 600 !important; }
/* la barre d'état en bas */
#xl-statut { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; display: flex; align-items: center; gap: 18px; padding: 3px 12px; background: #f3f3f3; border-top: 1px solid #d4d4d4; color: #444444; font: 11px 'Segoe UI', Calibri, Arial, sans-serif; white-space: nowrap; overflow: hidden; }
#xl-statut .xl-somme { margin-left: auto; }
#xl-statut .xl-zoom i { display: inline-block; width: 80px; height: 2px; background: #9a9a9a; vertical-align: middle; position: relative; }
/* sur téléphone : les onglets du bas deviennent Feuil1, Feuil2, Feuil3 */
body.deguise #nav-mobile { background: #f3f3f3 !important; border-top: 1px solid #c6c6c6 !important; backdrop-filter: none !important; }
body.deguise #nav-mobile button { font-size: 0 !important; opacity: 1 !important; color: #1f1f1f !important; border-right: 1px solid #c6c6c6 !important; }
body.deguise #nav-mobile button span, body.deguise #nav-mobile .pastille { display: none !important; }
body.deguise #nav-mobile button::after { font-size: 13px; }
body.deguise #nav-mobile button:nth-child(1)::after { content: 'Feuil1'; }
body.deguise #nav-mobile button:nth-child(2)::after { content: 'Feuil2'; }
body.deguise #nav-mobile button:nth-child(3)::after { content: 'Feuil3'; }
body.deguise #nav-mobile button.actif { background: #ffffff !important; color: var(--dg) !important; border-bottom: 2px solid var(--dg) !important; }
@media (max-width: 820px) {
    .xl-outils, .xl-menus > span:nth-child(n+5), #xl-statut { display: none !important; }
    body.deguise #jeu { padding: 6px 6px 20px 44px !important; }
}

/* =====================================================================
   📗 LE MODE GOOGLE SHEETS (30-excel.js) — même base que le Mode Excel (body.deguise),
   ici seulement ce qui change : en-tête clair, menus en texte, barre d'outils arrondie,
   bouton Partager, sélection bleue, boîtes de dialogue arrondies, « Feuille 1 » en bas.
   ===================================================================== */
body.mode-sheets, body.mode-sheets * { font-family: Roboto, Arial, sans-serif !important; }
body.mode-sheets #entete { background: #f9fbfd !important; padding: 8px 12px 2px !important; }
body.mode-sheets .logo, body.mode-sheets .logo .l1, body.mode-sheets .logo .l2 { color: #1f1f1f !important; font-size: 1.05rem !important; }
body.mode-sheets .logo .l2 { color: #5f6368 !important; }
body.mode-sheets .btn-rond { filter: grayscale(1) !important; }
#xl-ruban.sheets { background: #f9fbfd; border-bottom: 1px solid #e1e3e1; color: #1f1f1f; }
.gs-menus { display: flex; align-items: center; gap: 2px; padding: 0 8px 2px 42px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.gs-menus > span { padding: 3px 7px; border-radius: 4px; }
.gs-partager { margin-left: auto; background: #c2e7ff; color: #001d35; border-radius: 999px; padding: 7px 18px !important; font-weight: 500; }
.gs-outils { display: flex; align-items: center; gap: 11px; margin: 4px 8px 6px; padding: 5px 16px; background: #edf2fa; border-radius: 999px; font-size: 13px; color: #444746; white-space: nowrap; overflow: hidden; }
.gs-outils b, .gs-outils i, .gs-outils s { color: #444746; }
.gs-sep { width: 1px; height: 18px; background: #c7c7c7; flex: none; }
.gs-champ { padding: 0 4px; }
.gs-champ.court { border: 1px solid #c7c7c7; border-radius: 4px; padding: 0 6px; }
.gs-a { border-bottom: 3px solid #000000; line-height: 1.1; }
#xl-ruban.sheets .xl-formule { border-top: 1px solid #e1e3e1; }
#xl-ruban.sheets .xl-nom { width: 92px; color: #1f1f1f; }
#xl-ruban.sheets .xl-fx { font-style: normal; color: #5f6368; }
#xl-ruban.sheets .xl-colonnes { background: #f8f9fa; border-top: 1px solid #e1e3e1; }
#xl-ruban.sheets .xl-colonnes span { width: 100px; border-right-color: #e1e3e1; color: #5f6368; }
#xl-ruban.sheets .xl-colonnes .xl-coin { width: 40px; }
/* la grille de Google : colonnes de 100, lignes de 21, traits très clairs */
body.mode-sheets #jeu { background-image: linear-gradient(#e1e3e1 1px, transparent 1px), linear-gradient(90deg, #e1e3e1 1px, transparent 1px) !important; background-size: 100px 21px !important; }
body.mode-sheets #xl-lignes { background: #f8f9fa; border-right-color: #e1e3e1; }
body.mode-sheets #xl-lignes span { height: 21px; line-height: 21px; color: #5f6368; border-bottom-color: #e1e3e1; }
/* la cellule sélectionnée, avec son petit carré bleu dans le coin */
body.mode-sheets .compteur { position: relative; }
body.mode-sheets .compteur::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 7px; height: 7px; background: #1a73e8; border: 1px solid #ffffff; }
/* les boutons façon Google */
body.mode-sheets .btn, body.mode-sheets .onglet, body.mode-sheets .qte, body.mode-sheets .sous-onglet, body.mode-sheets .art-btn, body.mode-sheets .btn-renaissance {
    background: #ffffff !important; border: 1px solid #dadce0 !important; border-radius: 4px !important; color: #1f1f1f !important;
}
body.mode-sheets .onglet.actif, body.mode-sheets .qte.actif, body.mode-sheets .sous-onglet.actif { background: #e8f0fe !important; color: #1a73e8 !important; border-color: #d2e3fc !important; }
body.mode-sheets .panneau { border-color: #e1e3e1 !important; }
/* les boîtes de dialogue de Google : blanches, arrondies, une ombre douce, pas de bande de couleur */
body.mode-sheets .modale, body.mode-sheets #parents {
    border: 0 !important; border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15) !important;
}
body.mode-sheets .modale { border-top: 0 !important; }
body.mode-sheets .modale h2 { font-size: 1.15rem !important; font-weight: 400 !important; }
body.mode-sheets #parents { padding: 18px 22px 12px !important; text-align: left !important; }
body.mode-sheets #parents::after { border: 0 !important; background: none !important; color: #1a73e8 !important; font-weight: 500; margin: 12px 0 0 auto !important; text-align: right; width: auto !important; }
body.mode-sheets .toast { border-left-color: #1a73e8 !important; border-radius: 8px !important; }
/* la barre du bas : + ☰ « Feuille 1 », et la somme à droite */
#xl-statut.sheets { background: #f9fbfd; border-top: 1px solid #e1e3e1; padding: 4px 10px; gap: 10px; font-size: 13px; color: #444746; }
#xl-statut .gs-plus { width: 28px; text-align: center; font-size: 16px; color: #444746; }
#xl-statut .gs-onglet { background: #e1e9f7; color: #0b57d0; padding: 5px 14px; border-radius: 6px; font-weight: 500; }
#xl-statut .gs-somme { border: 1px solid #c7c7c7; border-radius: 4px; padding: 3px 10px; }
/* sur téléphone : « Feuille 1 / 2 / 3 » */
body.mode-sheets #nav-mobile button:nth-child(1)::after { content: 'Feuille 1'; }
body.mode-sheets #nav-mobile button:nth-child(2)::after { content: 'Feuille 2'; }
body.mode-sheets #nav-mobile button:nth-child(3)::after { content: 'Feuille 3'; }
body.mode-sheets #nav-mobile button.actif { background: #e1e9f7 !important; color: #0b57d0 !important; border-bottom-color: #0b57d0 !important; }
@media (max-width: 820px) {
    .gs-outils, .gs-menus > span:nth-child(n+5):not(.gs-partager) { display: none !important; }
    .gs-menus { padding-left: 8px; }
}
/* 📊📗 déguisé : rien ne doit rester collé au graphique (antennes, chapeau, bouton interdit, coccinelle…) */
body.deguise .antennes, body.deguise .chapeau-louche, body.deguise #bouton-interdit, body.deguise .coccinelle, body.deguise .traces-pas,
body.deguise .clone-perso, body.deguise #algaclick-or, body.deguise .calmar, body.deguise #mer, body.deguise .objet-plage,
body.deguise #harleen-clavier, body.deguise .popcorn, body.deguise .poire-volante, body.deguise .oeil-truc, body.deguise .etoile-filante,
body.deguise .mini-tornade, body.deguise #dvd-rare, body.deguise #voile-nuit { display: none !important; }

/* 📜 MA FRISE (31-frise.js) : une ligne du temps verticale, mois par mois */
.frise-haut { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.frise-haut span { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); text-align: center; }
.frise-haut b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.02rem; color: var(--gold); }
.frise-haut small { font-size: .7rem; opacity: .7; }
.frise-filtres { display: flex !important; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; grid-template-columns: none !important; }
.frise-filtres .sous-onglet { flex: 0 0 auto !important; width: auto !important; padding: 5px 11px !important; font-size: .78rem !important; }
.frise-liste { position: relative; padding-left: 4px; }
.frise-liste::before { content: ''; position: absolute; left: 49px; top: 6px; bottom: 6px; width: 2px; background: color-mix(in srgb, var(--gold) 35%, transparent); }
.frise-mois { position: relative; margin: 12px 0 6px 64px; font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; color: var(--gold); font-size: 1rem; }
.frise-ligne { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.frise-date { width: 28px; text-align: right; font-weight: 900; font-size: .8rem; opacity: .7; flex: none; }
.frise-point { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1rem; background: var(--panel); border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); z-index: 1; }
.frise-texte { font-size: .86rem; font-weight: 700; line-height: 1.3; }
.frise-ligne.k-cartes .frise-point { border-color: #b04dff; }
.frise-ligne.k-mondes .frise-point { border-color: #48cae4; }
.frise-ligne.k-raretes .frise-point { border-color: #ffb800; }
.frise-ligne.k-renaissance .frise-point { border-color: #06d6a0; }
.frise-ligne.k-exploits .frise-point { border-color: #ff2e63; }
.frise-ligne.k-debut .frise-point { border-color: #ff8fab; }

/* =====================================================================
   🌱 LE POTAGER (32-potager.js) — des carrés « cube », rien ne clignote
   ===================================================================== */
.potager-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.potager-haut .arrosoir { flex: 1 1 180px; }
.potager-serie { font-size: .85rem; opacity: .85; }
.potager { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.carre {
    border-radius: 18px; padding: 12px 8px; text-align: center; position: relative; font: inherit; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 150px; justify-content: center;
    background: linear-gradient(180deg, rgba(120, 72, 40, .35), rgba(70, 40, 20, .55)); border: 2px solid rgba(160, 110, 70, .5);
}
button.carre { cursor: pointer; transition: transform .12s, border-color .2s; }
button.carre:hover { transform: translateY(-3px); }
.carre b { font-size: .88rem; }
.carre small { font-size: .72rem; opacity: .8; line-height: 1.25; }
.carre-emoji { font-size: 2.3rem; line-height: 1; }
.carre-emoji.grand { font-size: 3rem; }
.carre-emoji.presque { font-size: 2.6rem; }
.carre.ferme { opacity: .45; background: rgba(0, 0, 0, .25); border-style: dashed; border-color: var(--ligne); }
.carre.vide small { color: var(--gold); font-weight: 900; opacity: 1; }
.carre.mure { border-color: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 30%, transparent); }
.carre.mure small { color: var(--gold); font-weight: 900; opacity: 1; font-size: .8rem; }
.carre.fane { filter: grayscale(.6); }
.carre.sec { border-color: rgba(255, 170, 60, .55); background: linear-gradient(180deg, rgba(160, 120, 70, .25), rgba(110, 80, 40, .45)); }
.carre.sec [data-reste] { color: #ffb347; opacity: 1; font-weight: 800; }
.carre-eau { color: #7fd8ff; }
.carre.sec .carre-eau { color: #ffb347; }
.carre-barre { width: 86%; height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.carre-barre i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #52b788, #b7e4c7); transition: width 1s linear; }
.carre .herbe {
    margin-top: 2px; font: inherit; font-size: .72rem; font-weight: 900; cursor: pointer; color: #062b16;
    padding: 4px 10px; border-radius: 10px; border: 0; background: #7bd389;
}
/* le sachet de graines : une grille de cubes */
.graines { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.graine {
    border-radius: 16px; padding: 10px 6px; text-align: center; font: inherit; color: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: var(--doux); border: 2px solid color-mix(in srgb, var(--green) 40%, transparent); transition: transform .12s;
}
button.graine:hover { transform: translateY(-2px); border-color: var(--green); }
.graine b { font-size: .85rem; }
.graine small { font-size: .7rem; opacity: .8; }
.graine .graine-gain { color: var(--green); opacity: 1; font-weight: 800; }
.graine-emoji { font-size: 2rem; line-height: 1.1; }
.graine.trop-cher { opacity: .55; }
.graine.fermee { opacity: .4; cursor: default; border-style: dashed; border-color: var(--ligne); }
@media (max-width: 820px) {
    .potager { grid-template-columns: repeat(2, 1fr); }
    .graines { grid-template-columns: repeat(2, 1fr); }
    .carre { min-height: 136px; }
}

/* 🎭 les persos du jeu dans la Team : leurs couleurs quand on les met en avant */
.gerard-mode { --p: #3a86ff; --s: #e63946; --bg: #03122b; --gold: #ffd23f; --panel: #0b2147; --text: #f1f6ff; --accent: #e63946; --green: #48cae4; }
.canard-mode { --p: #ffd23f; --s: #48cae4; --bg: #06222e; --gold: #ffd23f; --panel: #0b3444; --text: #fffbe6; --accent: #ff9f1c; --green: #90e0ef; }
.capybara-mode { --p: #c68b59; --s: #ff9f1c; --bg: #120c06; --gold: #ffb347; --panel: #21160c; --text: #fbeee0; --accent: #52b788; --green: #74c69d; }
.genie-mode { --p: #4cc9f0; --s: #c77dff; --bg: #0c0020; --gold: #ffd23f; --panel: #1a0638; --text: #eaf8ff; --accent: #7b2cbf; --green: #4cc9f0; }
.vendeur-mode { --p: #b08968; --s: #ffd23f; --bg: #07090f; --gold: #ffd23f; --panel: #121722; --text: #f0e6d8; --accent: #6b4226; --green: #9bd18b; }
.epouvantail-mode { --p: #e9c46a; --s: #e76f51; --bg: #1a0e04; --gold: #ffd166; --panel: #2a1808; --text: #fff4dc; --accent: #9d0208; --green: #95d5b2; }
.calmar-mode { --p: #c77dff; --s: #48cae4; --bg: #020424; --gold: #e0aaff; --panel: #0a0f3d; --text: #f3e8ff; --accent: #b5179e; --green: #48cae4; }

/* =====================================================================
   📼 L'ALGATOR WRAPPED (33-wrapped.js) — des pages sombres, on avance au doigt.
   ⚠️ Rien ne défile tout seul, rien ne clignote : un simple fondu d'une page à l'autre.
   ===================================================================== */
.wrapped-surcouche { background: rgba(0, 0, 0, .86); }
.wrapped {
    --wc: #ff3d9a;
    width: min(420px, 100%); height: min(760px, calc(100dvh - 32px)); border-radius: 26px; position: relative; overflow: hidden;
    display: flex; flex-direction: column; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none;
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--wc) 30%, #0b0614), #0b0614 70%);
    border: 2px solid color-mix(in srgb, var(--wc) 55%, transparent); transition: border-color .4s, background .4s;
}
.wr-barres { display: flex; gap: 4px; padding: 12px 48px 0 14px; }
.wr-barres span { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.wr-barres span i { display: block; height: 100%; width: 0; background: #fff; }
.wr-barres span.vu i { width: 100%; }
.wr-x { position: absolute; top: 4px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1rem; cursor: pointer; }
.wr-page { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 22px; text-align: center; }
.wr-page.entre { animation: wr-entre .35s ease-out; }
@keyframes wr-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.photosensible .wr-page.entre { animation: none; }
@media (prefers-reduced-motion: reduce) { .wr-page.entre { animation: none; } .wrapped { transition: none; } }
.wr-page h2 { margin: 2px 0; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 2rem; color: #fff; }
.wr-page p { margin: 4px 0; line-height: 1.4; font-size: .98rem; opacity: .92; }
.wr-sur { font-weight: 900; font-size: .78rem; letter-spacing: 2px; color: var(--wc); margin-top: 8px; }
.wr-gros { font-size: 4.4rem; line-height: 1.1; }
.wr-chiffre { font-family: 'Bangers', 'Impact', sans-serif; font-size: 3.4rem; letter-spacing: 2px; line-height: 1.05; color: var(--wc); }
.wr-chiffre.petit { font-size: 2.2rem; }
.wr-note { font-size: .82rem !important; opacity: .7 !important; margin-top: 10px !important; }
.wr-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.wr-grille div { background: rgba(255, 255, 255, .07); border: 1.5px solid color-mix(in srgb, var(--wc) 35%, transparent); border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.wr-grille b { font-size: 1.15rem; }
.wr-grille small { font-size: .74rem; opacity: .7; }
.wr-heures { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 90px; margin-top: 12px; }
.wr-heures i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .22); }
.wr-heures i.top { background: var(--wc); }
.wr-heures-legende { display: flex; justify-content: space-between; width: 100%; font-size: .68rem; opacity: .6; }
.wr-photo { width: 130px !important; height: 130px !important; font-size: 4rem !important; margin: 6px auto; border: 3px solid var(--wc); }
.wr-carte { justify-content: center; margin: 4px 0; }
.wr-carte .tcarte { width: 170px; }
.wr-moment { width: 100%; text-align: left; background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 8px 12px; font-size: .9rem; }
.wr-moment small { display: block; opacity: .6; font-size: .72rem; }
.wr-page .actions { margin-top: 14px; }
.wr-bas { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 12px; }
.wr-fleche { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.wr-fleche:disabled { opacity: .25; cursor: default; }
.wr-num { opacity: .6; font-weight: 800; }
@media (max-width: 480px) {
    .wrapped-surcouche { padding: 0; }
    .wrapped { width: 100%; height: 100dvh; border-radius: 0; border: 0; }
}

/* =====================================================================
   🌍 LES ONZE NOUVEAUX MONDES (00d-mondes-plus.js) — que des décors fixes, rien ne clignote
   ===================================================================== */
.flappy-mode { --p: #7ed957; --s: #ffd23f; --bg: #0b3640; --gold: #ffd23f; --panel: #0f4a55; --text: #f0fff4; --accent: #f28c28; --green: #7ed957; }
body.mode-flappy #zone-clic { background: linear-gradient(90deg, transparent 6%, #73bf2e 6% 14%, transparent 14% 86%, #73bf2e 86% 94%, transparent 94%) 0 0 / 100% 42% no-repeat,
    linear-gradient(90deg, transparent 6%, #73bf2e 6% 14%, transparent 14% 86%, #73bf2e 86% 94%, transparent 94%) 0 100% / 100% 30% no-repeat,
    linear-gradient(#70c5ce 0 88%, #ded895 88%); border: 2px solid rgba(126, 217, 87, .45); }
.nez-mode { --p: #f4a3a8; --s: #ffcdb2; --bg: #2a0f14; --gold: #ffd6a5; --panel: #3d1a20; --text: #ffe9ec; --accent: #e5989b; --green: #a7f3a0; }
body.mode-nez #zone-clic { background: radial-gradient(circle at 50% 45%, rgba(255, 205, 178, .35), transparent 65%); }
.lapins-mode { --p: #ff4d4d; --s: #ffffff; --bg: #1b1b2f; --gold: #ffd23f; --panel: #262640; --text: #ffffff; --accent: #ff9f1c; --green: #7cff5a; }
body.mode-lapins #zone-clic { background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .12), transparent 70%); }
.monde-cookie-mode { --p: #e0a96d; --s: #f4e1c1; --bg: #0e1b2e; --gold: #ffcc4d; --panel: #4a2e17; --text: #fff4e0; --accent: #c05621; --green: #9ae6b4; }
body.mode-cookie #zone-clic { background: radial-gradient(circle at 50% 48%, rgba(255, 204, 77, .18), transparent 62%); }
#monde-news { margin: -2px 10px 6px; min-height: 1.3em; text-align: center; font-size: .8rem; font-style: italic; opacity: .85; color: var(--s); }
.spotify-mode { --p: #1db954; --s: #ffffff; --bg: #121212; --gold: #1ed760; --panel: #181818; --text: #ffffff; --accent: #535353; --green: #1db954; }
.crazyfrog-mode { --p: #8bc34a; --s: #ffeb3b; --bg: #0d1b0d; --gold: #ffeb3b; --panel: #1b2f1b; --text: #f1ffe0; --accent: #ff9800; --green: #8bc34a; }
body.mode-crazyfrog #zone-clic { background: url('https://algator37.neocities.org/fondcrazy.png') center / cover, #1b2f1b; }
.algator00-mode { --p: #b8c6ff; --s: #e0e6ff; --bg: #07080f; --gold: #dfe6ff; --panel: #121626; --text: #dfe6ff; --accent: #7c8cc9; --green: #a8f0d0; }
/* 👻 le fantôme : pâle, bleuté, un halo — tout est fixe */
body.mode-algator00 #avatar { filter: grayscale(1) brightness(1.2) drop-shadow(0 0 18px rgba(184, 198, 255, .75)) !important; opacity: .7; }
body.mode-algator00 #zone-clic { background: radial-gradient(circle at 50% 45%, rgba(184, 198, 255, .14), transparent 65%); }
.v1-mode { --p: #00ff88; --s: #00b3ff; --bg: #0a0a0a; --gold: #ffd700; --panel: #161b22; --text: #ffffff; --accent: #00b3ff; --green: #00ff88; }
body.mode-v1 #entete { background: linear-gradient(90deg, #00ff88, #00b3ff) !important; }
body.mode-v1 #entete .logo, body.mode-v1 #entete .logo * { color: #000000 !important; text-shadow: none !important; }
body.mode-v1 .panneau { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); }
.danse-mode { --p: #ff3df2; --s: #3dfff2; --bg: #12001f; --gold: #ffd23f; --panel: #220036; --text: #fff0ff; --accent: #7b2cbf; --green: #7cff5a; }
body.mode-danse #zone-clic { background: linear-gradient(transparent 70%, rgba(0, 0, 0, .25) 70%), conic-gradient(from 45deg, rgba(255, 61, 242, .18) 0 25%, rgba(61, 255, 242, .18) 0 50%, rgba(255, 210, 63, .18) 0 75%, rgba(124, 255, 90, .18) 0) 0 0 / 60px 60px; }

/* =====================================================================
   🔎📚 LES DÉGUISEMENTS GOOGLE ET WIKIPÉDIA (30-excel.js) — même base que le Mode Excel
   (body.deguise), avec leurs couleurs. En sombre : réglages ⚙️ (body.dg-sombre).
   ===================================================================== */
.google-mode { --dg: #1a73e8; --dg-fonce: #174ea6; --bg: #ffffff; --panel: #ffffff; --p: var(--dg); --s: #202124; --gold: var(--dg); --text: #202124; --green: #188038; }
.wikipedia-mode { --dg: #3366cc; --dg-fonce: #2a4b8d; --bg: #ffffff; --panel: #ffffff; --p: var(--dg); --s: #202122; --gold: var(--dg); --text: #202122; --green: #14866d; }
body.mode-google, body.mode-wikipedia { --w-fond: #ffffff; --w-fond2: #f8f9fa; --w-texte: #202124; --w-gris: #5f6368; --w-bord: #dadce0; --w-lien: #1a0dab; }
body.mode-wikipedia { --w-texte: #202122; --w-gris: #54595d; --w-bord: #a2a9b1; --w-lien: #0645ad; }
body.mode-google.dg-sombre { --w-fond: #202124; --w-fond2: #303134; --w-texte: #e8eaed; --w-gris: #9aa0a6; --w-bord: #3c4043; --w-lien: #8ab4f8; --bg: #202124; --panel: #202124; --text: #e8eaed; --s: #e8eaed; }
body.mode-wikipedia.dg-sombre { --w-fond: #101418; --w-fond2: #202122; --w-texte: #eaecf0; --w-gris: #a2a9b1; --w-bord: #54595d; --w-lien: #88a3e8; --bg: #101418; --panel: #101418; --text: #eaecf0; --s: #eaecf0; }
body.mode-google, body.mode-google * { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !important; }
body.mode-wikipedia, body.mode-wikipedia * { font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important; }
body.mode-wikipedia .titre-panneau, body.mode-wikipedia .sous-titre, body.mode-wikipedia .wk-titre h1, body.mode-wikipedia .wk-logo b, body.mode-wikipedia .modale h2 { font-family: 'Linux Libertine', Georgia, 'Times New Roman', serif !important; font-weight: 400 !important; }
:is(body.mode-google, body.mode-wikipedia) { background: var(--w-fond) !important; color: var(--w-texte); }
:is(body.mode-google, body.mode-wikipedia) #entete { background: var(--w-fond) !important; border-bottom: 0 !important; }
:is(body.mode-google, body.mode-wikipedia) .logo { display: none !important; }
:is(body.mode-google, body.mode-wikipedia) .btn-rond { color: var(--w-gris) !important; }
:is(body.mode-google, body.mode-wikipedia) #jeu { padding: 12px 16px 40px !important; background: var(--w-fond) !important; background-image: none !important; }
:is(body.mode-google, body.mode-wikipedia) .panneau { background: var(--w-fond) !important; border: 1px solid var(--w-bord) !important; }
body.mode-google .panneau { border-radius: 8px !important; }
:is(body.mode-google, body.mode-wikipedia) .panneau *, :is(body.mode-google, body.mode-wikipedia) .modale * { color: var(--w-texte); }
:is(body.mode-google, body.mode-wikipedia) .titre-panneau, :is(body.mode-google, body.mode-wikipedia) .sous-titre { color: var(--w-texte) !important; }
body.mode-wikipedia .titre-panneau, body.mode-wikipedia .sous-titre { border-bottom: 1px solid var(--w-bord); font-size: 1.3rem !important; }
:is(body.mode-google, body.mode-wikipedia) .art-nom { color: var(--w-lien) !important; }
body.mode-google .art-nom { font-size: 1.05rem !important; font-weight: 400 !important; }
:is(body.mode-google, body.mode-wikipedia) .article { background: var(--w-fond) !important; border-bottom: 1px solid var(--w-bord) !important; }
:is(body.mode-google, body.mode-wikipedia) :is(.btn, .onglet, .qte, .sous-onglet, .art-btn, .btn-renaissance) {
    background: var(--w-fond2) !important; color: var(--w-texte) !important; border: 1px solid var(--w-bord) !important; }
body.mode-google :is(.btn, .onglet, .qte, .sous-onglet, .art-btn, .btn-renaissance) { border-radius: 18px !important; }
body.mode-wikipedia :is(.btn, .onglet, .qte, .sous-onglet, .art-btn, .btn-renaissance) { border-radius: 2px !important; }
:is(body.mode-google, body.mode-wikipedia) :is(.onglet.actif, .qte.actif, .sous-onglet.actif) { color: var(--dg) !important; border-bottom: 3px solid var(--dg) !important; }
:is(body.mode-google, body.mode-wikipedia) #zone-clic { background: var(--w-fond2) !important; border: 1px solid var(--w-bord) !important; border-radius: 8px !important; }
:is(body.mode-google, body.mode-wikipedia) .compteur { border: 0 !important; }
:is(body.mode-google, body.mode-wikipedia) #likes { color: var(--w-texte) !important; }
:is(body.mode-google, body.mode-wikipedia) :is(#likes-unite, #lps) { color: var(--w-gris) !important; }
:is(body.mode-google, body.mode-wikipedia) :is(.bsp, .codes-ligne .champ, .champ) { background: var(--w-fond) !important; color: var(--w-texte) !important; border-color: var(--w-bord) !important; }
:is(body.mode-google, body.mode-wikipedia) :is(.modale, #parents, .toast) { background: var(--w-fond) !important; color: var(--w-texte) !important; border: 1px solid var(--w-bord) !important; border-radius: 8px !important; }
:is(body.mode-google, body.mode-wikipedia) #parents::after { border: 0 !important; background: none !important; color: var(--dg) !important; }
:is(body.mode-google, body.mode-wikipedia) #nav-mobile { background: var(--w-fond2) !important; border-top: 1px solid var(--w-bord) !important; }
:is(body.mode-google, body.mode-wikipedia) #nav-mobile button { color: var(--w-texte) !important; border-right-color: var(--w-bord) !important; }
body.mode-google #nav-mobile button:nth-child(1)::after { content: 'Tous'; }
body.mode-google #nav-mobile button:nth-child(2)::after { content: 'Images'; }
body.mode-google #nav-mobile button:nth-child(3)::after { content: 'Vidéos'; }
body.mode-wikipedia #nav-mobile button:nth-child(1)::after { content: 'Article'; }
body.mode-wikipedia #nav-mobile button:nth-child(2)::after { content: 'Discussion'; }
body.mode-wikipedia #nav-mobile button:nth-child(3)::after { content: 'Historique'; }
:is(body.mode-google, body.mode-wikipedia) .like-dore { background: var(--w-fond) !important; border-color: var(--w-bord) !important; }
body.mode-google .like-dore::after { content: '🔍' !important; }
body.mode-wikipedia .like-dore::after { content: '[1]' !important; font-size: 11px !important; color: var(--w-lien) !important; }
/* les barres du haut */
#xl-ruban.google, #xl-ruban.wikipedia { background: var(--w-fond) !important; color: var(--w-texte); border-bottom: 1px solid var(--w-bord); }
.go-haut { display: flex; align-items: center; gap: 22px; padding: 14px 20px 8px; }
.go-logo { font-size: 26px; letter-spacing: -1px; }
.go-logo b { font-weight: 500; }
.go-recherche { flex: 1; max-width: 690px; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 18px; border: 1px solid var(--w-bord); border-radius: 24px; box-shadow: 0 1px 6px rgba(32, 33, 36, .18); background: var(--w-fond); }
.go-recherche span { flex: 1; font-size: 16px; color: var(--w-texte); }
.go-recherche i { font-style: normal; color: var(--w-gris); }
.go-recherche .go-sep { width: 1px; height: 24px; background: var(--w-bord); }
.go-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--w-gris); letter-spacing: -3px; }
.go-avatar { width: 32px; height: 32px; border-radius: 50%; background: #7b1fa2; color: #fff; display: grid; place-items: center; font-weight: 400; letter-spacing: 0; }
.go-onglets { display: flex; gap: 24px; padding: 4px 0 0 148px; font-size: 14px; color: var(--w-gris); }
.go-onglets span { padding-bottom: 10px; }
.go-onglets .actif { color: var(--dg); border-bottom: 3px solid var(--dg); }
.go-outils { margin-left: 24px; }
.go-nb { padding: 10px 0 6px 148px; font-size: 13px; color: var(--w-gris); }
.wk-haut { display: flex; align-items: center; gap: 18px; padding: 8px 18px; }
.wk-menu { font-size: 20px; color: var(--w-gris); }
.wk-logo b { display: block; font-size: 19px; letter-spacing: .12em; color: var(--w-texte); }
.wk-logo small { display: block; font-size: 11px; font-style: italic; color: var(--w-gris); }
.wk-recherche { flex: 1; max-width: 480px; padding: 7px 12px; border: 1px solid var(--w-bord); border-radius: 2px; color: var(--w-gris); font-size: 14px; background: var(--w-fond); }
.wk-droite { margin-left: auto; font-size: 12px; color: var(--w-lien); }
.wk-titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 10px 24px 0; border-bottom: 1px solid var(--w-bord); }
.wk-titre h1 { margin: 0 0 4px; font-size: 30px; color: var(--w-texte); }
.wk-langues { font-size: 13px; color: var(--w-lien); padding-bottom: 6px; }
.wk-onglets { display: flex; gap: 14px; padding: 6px 24px 0; font-size: 13px; color: var(--w-lien); }
.wk-onglets span { padding-bottom: 6px; }
.wk-onglets .actif { color: var(--w-texte); border-bottom: 2px solid var(--w-texte); }
.wk-onglets .wk-sep { flex: 1; }
.wk-sous { padding: 6px 24px 8px; font-size: 12px; color: var(--w-gris); }
#xl-statut.google, #xl-statut.wikipedia { background: var(--w-fond2) !important; border-top: 1px solid var(--w-bord) !important; color: var(--w-gris) !important; font-size: 13px; }
#xl-statut .go-liens { margin-left: 16px; }
@media (max-width: 820px) {
    .go-haut { gap: 10px; padding: 10px 12px 6px; flex-wrap: wrap; }
    .go-logo { font-size: 22px; }
    .go-droite, .go-outils, .wk-droite, .wk-langues, .wk-onglets span:nth-child(n+5) { display: none !important; }
    .go-recherche { order: 3; flex-basis: 100%; height: 40px; }
    .go-onglets, .go-nb { padding-left: 14px; gap: 16px; }
    .wk-titre, .wk-onglets, .wk-sous { margin-left: 12px; margin-right: 12px; padding-left: 0; }
    .wk-titre h1 { font-size: 24px; }
}

/* =====================================================================
   💯 LA BARRE DES 100 % (onglet 🏆 Succès)
   ===================================================================== */
.barre-100 { margin: 8px 0 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1.5px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.b100-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.barre-100 .barre { display: block; height: 12px; }
.barre-100 .barre > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--accent)); }
.barre-100 small { display: block; margin-top: 6px; font-size: .78rem; opacity: .75; }
.barre-100.fini { border-color: var(--gold); }

/* =====================================================================
   👥 LE CODE AMI (35-amis.js)
   ===================================================================== */
.bouton-amis { margin-top: 8px; }
.ami-code { text-align: center; margin: 6px 0 10px; }
.ami-mon-code { font-size: 1.3rem; color: var(--gold); letter-spacing: 1px; }
.ami-code small { display: block; opacity: .7; }
.ami-ajout { display: flex; gap: 8px; }
.ami-ajout .champ { flex: 1; min-width: 0; }
.ami-message { min-height: 1.2em; text-align: center; }
.ami-liste { display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; }
.ami { border-radius: 14px; padding: 10px 12px; background: var(--doux); border: 1.5px solid var(--ligne); text-align: left; }
.ami-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ami-haut .btn.petit { padding: 4px 8px; font-size: .8rem; }
.ami-verdict { margin: 4px 0 6px; }
.ami-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ami-table th, .ami-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--ligne); }
.ami-table th:first-child, .ami-table td:first-child { text-align: left; opacity: .85; }
.ami-table td.gagne { color: var(--green); font-weight: 900; }

/* 🍪 Mode Cookie Clicker : les likes dorés deviennent des cookies dorés */
body.mode-cookie .like-dore:not(.noir) { font-size: 0 !important; }
body.mode-cookie .like-dore:not(.noir)::after { content: "🍪"; font-size: 44px; }
/* 🔎📚 les vrais liens bleus : le filtre gris ne touche que les images et les icônes */
:is(body.mode-google, body.mode-wikipedia) :is(#col-boutique .panneau, #col-empire .panneau, .modale) { filter: none !important; }
:is(body.mode-google, body.mode-wikipedia) :is(.panneau, .modale, #toasts) :is(img, .art-icone, .tcarte-art, .pote-photo) { filter: grayscale(1); }
:is(body.mode-google, body.mode-wikipedia) :is(.onglet.actif, .qte.actif, .sous-onglet.actif) { background: var(--w-fond) !important; }

/* 🐰 Mode Lapins Crétins : leur vrai décor derrière le perso, les toilettes, le lapin qui passe la tête */
body.mode-lapins #zone-clic { background: linear-gradient(rgba(27, 27, 47, .35), rgba(27, 27, 47, .55)), url('../img/lapins/pause.png') center / cover; }
.lapin-toilettes { position: absolute; z-index: 5; width: 64px; height: 64px; font-size: 44px; line-height: 1; border: 3px solid #fff; border-radius: 16px; background: #5c3a1e; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.lapin-passe { position: absolute; z-index: 5; width: 120px; cursor: pointer; transition: transform .6s ease-out; user-select: none; -webkit-user-drag: none; }
.lapin-passe.gauche { left: 0; top: 30%; transform: translateX(-110%) rotate(30deg); }
.lapin-passe.droite { right: 0; top: 34%; transform: translateX(110%) scaleX(-1) rotate(30deg); }
.lapin-passe.bas { left: 40%; bottom: 0; transform: translateY(110%) rotate(-10deg); }
.lapin-passe.gauche.sorti { transform: translateX(-30%) rotate(30deg); }
.lapin-passe.droite.sorti { transform: translateX(30%) scaleX(-1) rotate(30deg); }
.lapin-passe.bas.sorti { transform: translateY(25%) rotate(-10deg); }
@media (prefers-reduced-motion: reduce) { .lapin-passe { transition: none; } }

/* 💪 la muscu du doigt : au-delà de ×500, des bras poussent de chaque côté du perso (fixes) */
body.muscu-bras #zone-clic::before, body.muscu-bras #zone-clic::after { content: '💪'; position: absolute; top: 44%; font-size: 64px; z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
body.muscu-bras #zone-clic::before { left: 6%; transform: scaleX(-1); }
body.muscu-bras #zone-clic::after { right: 6%; }
body.muscu-ultime #zone-clic::before, body.muscu-ultime #zone-clic::after { content: '🦾'; font-size: 76px; }
body.deguise #zone-clic::before, body.deguise #zone-clic::after { display: none !important; }

/* =====================================================================
   🚨 L'INVASION DES LAPINS CRÉTINS (34-mondes-plus.js) — le choc en entrant
   ⚠️ Épilepsie : l'écran s'assombrit UNE fois en fondu, les têtes apparaissent une par une
   en fondu et restent. Aucun clignotement, aucune alternance de couleurs.
   ===================================================================== */
.invasion-lapins { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
    background: radial-gradient(circle at 50% 45%, rgba(90, 0, 0, .92), rgba(8, 0, 0, .97) 70%); animation: inv-entre .45s ease-out; }
.invasion-lapins.fin { opacity: 0; transition: opacity .6s ease; }
@keyframes inv-entre { from { opacity: 0; } to { opacity: 1; } }
.inv-centre { position: relative; z-index: 2; text-align: center; padding: 16px; }
.inv-alerte { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 4px; font-size: clamp(1.1rem, 3vw, 1.6rem); color: #ffd23f; }
.inv-lapin { width: min(260px, 55vw); margin: 6px auto; display: block; filter: drop-shadow(0 0 26px rgba(255, 40, 40, .7)); animation: inv-lapin 1.2s ease-out; }
@keyframes inv-lapin { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.inv-cri { font-family: 'Bangers', 'Impact', sans-serif; font-size: clamp(2rem, 7vw, 4.4rem); letter-spacing: 2px; line-height: 1; color: #ff2e2e;
    text-shadow: 0 4px 0 #3a0000, 0 0 24px rgba(255, 0, 0, .55); word-break: break-all; }
.inv-sous { margin-top: 10px; color: #fff; font-weight: 800; font-size: clamp(.95rem, 2.4vw, 1.2rem); }
.inv-tetes { position: absolute; inset: 0; z-index: 1; }
.inv-tete { position: absolute; width: clamp(56px, 9vw, 96px); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); border-radius: 14px; opacity: 0;
    animation: inv-tete .45s ease-out forwards; box-shadow: 0 8px 18px rgba(0, 0, 0, .6); }
@keyframes inv-tete { from { opacity: 0; transform: translate(-50%, -30%) rotate(var(--r, 0deg)) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); } }
.inv-passer { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .55); z-index: 2; }
body.photosensible .invasion-lapins, body.photosensible .inv-lapin { animation: none; }
body.photosensible .inv-tete { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .invasion-lapins, .inv-lapin { animation: none; } .inv-tete { animation: none; opacity: 1; } }

/* 🪠 le monde envahi : des ventouses collées sur les panneaux, un lapin assis sur la boutique */
.lapin-ventouse { position: absolute; z-index: 4; font-size: 38px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.lapin-ventouse.v0 { top: -14px; right: 18px; transform: rotate(160deg); }
.lapin-ventouse.v1 { top: -16px; left: 22px; transform: rotate(200deg); }
.lapin-ventouse.v2 { top: -14px; right: 60px; transform: rotate(150deg); }
.lapin-assis { position: absolute; z-index: 4; top: -56px; right: -8px; width: 86px; transform: rotate(-12deg); pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
@media (max-width: 820px) { .lapin-assis { width: 64px; top: -40px; } .lapin-ventouse { font-size: 28px; } }

/* 💬 « bwa bwa » en bulles au-dessus du perso */
.bulle-bwa { position: absolute; z-index: 6; top: 10%; transform: translateX(-50%); padding: 6px 14px; border-radius: 16px; background: #fff; color: #1b1030;
    font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.25rem; letter-spacing: 1px; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); pointer-events: none;
    animation: bulle-bwa .3s ease-out; transition: opacity .5s; }
.bulle-bwa::after { content: ''; position: absolute; left: 50%; bottom: -10px; border: 6px solid transparent; border-top: 10px solid #fff; transform: translateX(-50%); }
.bulle-bwa.part { opacity: 0; }
@keyframes bulle-bwa { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } }

/* 👁️ les yeux rouges : un halo rouge FIXE autour du lapin pendant 10 s */
body.yeux-rouges.mode-lapins #avatar { filter: drop-shadow(0 0 24px rgba(255, 0, 0, .9)) drop-shadow(0 0 6px rgba(255, 0, 0, .9)) !important; }
body.yeux-rouges.mode-lapins #zone-clic { box-shadow: inset 0 0 60px rgba(255, 0, 0, .45); }
body.deguise .lapin-deco, body.deguise .bulle-bwa { display: none !important; }
.inv-sous { display: inline-block; padding: 8px 16px; border-radius: 14px; background: rgba(0, 0, 0, .6); }
.inv-centre { isolation: isolate; }
.inv-tetes { pointer-events: none; }

/* =====================================================================
   🐰 ENCORE PLUS CRÉTIN (34-mondes-plus.js)
   ⚠️ Épilepsie : des mouvements lents et uniques, jamais de clignotement.
   ===================================================================== */
/* 🪠 le curseur devient une ventouse */
body.mode-lapins:not(.sans-curseurs), body.mode-lapins:not(.sans-curseurs) * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M5 27 L19 13' stroke='%231b1030' stroke-width='5.5' stroke-linecap='round'/><path d='M5 27 L19 13' stroke='%23b07a4a' stroke-width='3' stroke-linecap='round'/><path d='M15 9 Q21 1 29 7 Q31 11 25 17 Q21 19 15 13 Z' fill='%23c0392b' stroke='%231b1030' stroke-width='1.6'/><path d='M18 8 Q22 5 25 7' stroke='%23ff8a7a' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") 5 27, pointer !important;
}
/* 🙃 les crétineries du lapin du centre */
body.mode-lapins #avatar-btn { transition: rotate .8s ease-in-out, translate .3s ease-out, scale .6s ease-in-out; }
#avatar-btn.cretin-retourne { rotate: 180deg; }
#avatar-btn.cretin-tourne { rotate: 360deg; transition: rotate 1.2s ease-in-out !important; }
#avatar-btn.cretin-saute { translate: 0 -46px; }
#avatar-btn.cretin-petit { scale: .6; }
#avatar-btn.cretin-geant { scale: 1.22; }
#avatar-btn.cretin-miroir { scale: -1 1; }
#avatar-btn.cretin-penche { rotate: 70deg; translate: 20px 30px; }
body.photosensible #avatar-btn { transition: none !important; }
.ventouse-tete { position: absolute; z-index: 6; left: 50%; top: 14%; font-size: 70px; transform: translateX(-50%) rotate(180deg); pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
/* 🌀 la machine à laver à voyager dans le temps */
.machine-laver { position: absolute; z-index: 5; width: 72px; height: 80px; font-size: 40px; border-radius: 14px; border: 3px solid #1b1030; cursor: pointer;
    background: linear-gradient(#f1f3f5 0 22%, #dee2e6 22%); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); padding-top: 14px; }
.machine-laver::before { content: ''; position: absolute; top: 5px; left: 8px; width: 22px; height: 6px; border-radius: 3px; background: #1b1030; }
/* 🐔 le lapin à dos de poule qui traverse */
.poule-volante { position: absolute; z-index: 6; width: 110px; height: 120px; border: 0; background: none; padding: 0; cursor: pointer; transition: left 6s linear; }
.poule-volante img { position: absolute; left: 14px; top: 0; width: 80px; }
.poule-volante span { position: absolute; left: 22px; bottom: -6px; font-size: 58px; line-height: 1; }
.poule-volante.vers-droite { left: -120px; }
.poule-volante.vers-droite.partie { left: calc(100% + 10px); }
.poule-volante.vers-gauche { left: calc(100% + 10px); }
.poule-volante.vers-gauche span, .poule-volante.vers-gauche img { transform: scaleX(-1); }
.poule-volante.vers-gauche.partie { left: -120px; }
@media (prefers-reduced-motion: reduce) { .poule-volante { transition-duration: 6s; } }
body.deguise .ventouse-tete, body.deguise .machine-laver, body.deguise .poule-volante { display: none !important; }

/* =====================================================================
   🏅 LES SUCCÈS EN MÉDAILLES, RANGÉS EN FAMILLES (36-succes.js)
   ===================================================================== */
.s-famille { margin: 10px 0; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 16%, transparent), color-mix(in srgb, var(--c2) 22%, transparent));
    border: 1.5px solid color-mix(in srgb, var(--c1) 40%, transparent); overflow: hidden; }
.s-famille > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; user-select: none; }
.s-famille > summary::-webkit-details-marker { display: none; }
.sf-ic { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4)); }
.sf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sf-txt b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.15rem; line-height: 1.1; }
.sf-txt small { font-size: .72rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-nb { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: .8rem; }
.sf-nb .barre { display: block; width: 84px; height: 7px; flex: none; }
.sf-nb .barre > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c1), var(--gold)); }
.sf-fleche { font-size: 1.1rem; opacity: .7; transition: transform .2s; }
.s-famille[open] .sf-fleche { transform: rotate(180deg); }
.grille-s2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 4px 10px 12px; }
.s-famille:not([open]) .grille-s2 { display: none; }
/* une médaille */
.s2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 14px; cursor: help; font: inherit; color: inherit;
    background: rgba(0, 0, 0, .28); border: 1.5px solid var(--ligne); transition: transform .12s, border-color .2s; }
.s2:hover { transform: translateY(-2px); }
.s2-vis { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.s2-img { width: 64px; height: 64px; display: block; }
.s2-photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: block; border: 4px solid #8d99ae; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); background: #1b1030; }
.s2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-photo.r0 { border-color: #cd8b4a; } .s2-photo.r1 { border-color: #d9dde2; } .s2-photo.r2 { border-color: #ffd23f; } .s2-photo.r3 { border-color: #7fd8ff; } .s2-photo.r4 { border-color: #d68bff; }
.s2-nom { font-size: .68rem; line-height: 1.2; font-weight: 800; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.s2-prog { width: 80%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.s2-prog i { display: block; height: 100%; background: var(--green); }
.s2-ok { position: absolute; right: -4px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem; font-weight: 900;
    background: var(--green); color: #062b16; border: 2px solid #0b0614; }
/* pas encore débloqué : un peu éteint, mais on voit bien ce que c'est */
.s2:not(.fait) .s2-vis { filter: grayscale(.85) brightness(.8); opacity: .75; }
.s2:not(.fait) .s2-nom { opacity: .65; }
.s2.fait { border-color: color-mix(in srgb, var(--gold) 65%, transparent); background: color-mix(in srgb, var(--gold) 10%, rgba(0, 0, 0, .25)); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 22%, transparent); }
.s2.perm.fait { border-color: var(--accent); }
.s2.bonus { border-style: dashed; border-color: color-mix(in srgb, #c77dff 60%, transparent); }
.s2.bonus.fait { border-style: solid; border-color: #c77dff; }
.s2.secret .s2-vis { filter: none; opacity: .6; }
.succes-grand .s2-img, .succes-grand .s2-photo { width: 130px; height: 130px; margin: 0 auto; }
.succes-toast .ic .s2-img, .succes-toast .ic .s2-photo { width: 38px; height: 38px; border-width: 2px; }
@media (max-width: 820px) {
    .grille-s2 { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; padding: 4px 8px 10px; }
    .s2-vis, .s2-img { width: 54px; height: 54px; }
    .s2-photo { width: 48px; height: 48px; }
    .sf-txt small { display: none; }
    .sf-nb .barre { width: 60px; }
}
/* les petites icônes dessinées à la place des emojis */
.s2-mini { width: 1.35em; height: 1.35em; vertical-align: -.32em; margin-right: 3px; display: inline-block; }
.filtre .s2-mini { width: 1.5em; height: 1.5em; vertical-align: -.42em; }
.s2-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 10px; font-size: .74rem; font-weight: 800; opacity: .85; }
.s2-legende span { display: inline-flex; align-items: center; }
.s2-infos { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 800; opacity: .85; }
.s2-caches { cursor: default; border-style: dashed; }
.s2-caches .s2-nom { opacity: .8; }

/* =====================================================================
   🥔 LE MODE PATATE (37-petits-succes.js) : des graphismes nuls, exprès.
   Comic Sans, couleurs de 2005, coins carrés, bordures « Windows 98 »,
   perso pixelisé, et le filigrane de la pire caméra du monde.
   ⚠️ Épilepsie : tout est posé. Pas de motif rayé, rien ne bouge, rien ne clignote.
   ===================================================================== */
body.patate {
    --p: #00ff00 !important; --s: #ff00ff !important; --bg: #000080 !important; --gold: #ffff00 !important; --panel: #000000 !important;
    --text: #ffffff !important; --accent: #ff0000 !important; --green: #00ff00 !important; --ligne: #c0c0c0 !important; --doux: #202020 !important; --rayon: 0px !important;
    background-image: none !important; background-color: #000080 !important;
}
body.patate, body.patate *:not(svg):not(svg *) {
    font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive !important; letter-spacing: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
}
body.patate .panneau { background: #000000 !important; border: 4px ridge #c0c0c0 !important; }
body.patate .colonne:nth-child(odd) .panneau { rotate: -.6deg; }
body.patate .colonne:nth-child(even) .panneau { rotate: .5deg; }
body.patate .btn, body.patate .onglet, body.patate .filtre, body.patate .pilule, body.patate button.album {
    background: #c0c0c0 !important; color: #000000 !important; border: 3px outset #ffffff !important; opacity: 1 !important;
}
body.patate .onglet.actif, body.patate .filtre.actif { border-style: inset !important; background: #a0a0a0 !important; }
body.patate .pilule b { color: #0000ff !important; }
body.patate #likes { color: #ffff00 !important; -webkit-text-stroke: 2px #ff0000; font-weight: 900; }
body.patate .logo .l1 { color: #00ff00 !important; } body.patate .logo .l2 { color: #ff00ff !important; } body.patate .logo .l3 { color: #ffff00 !important; background: #ff0000 !important; }
body.patate .titre-panneau, body.patate .sous-titre { color: #ff00ff !important; text-decoration: underline; }
/* le perso en gros pixels, les autres images en petits */
body.patate #avatar { filter: url(#patate-gros) !important; image-rendering: pixelated; }
body.patate .panneau img:not(#avatar) { filter: url(#patate-petit) !important; image-rendering: pixelated; }
/* 📹 le filigrane des vidéos de 2008 */
#patate-hypercam { display: none; }
body.patate #patate-hypercam {
    display: block; position: fixed; top: 0; left: 0; z-index: 99990; pointer-events: none;
    padding: 1px 5px; background: #ffffff; color: #000000; font: 12px "Arial", sans-serif !important;
}
@media (prefers-reduced-motion: reduce) { body.patate .panneau { rotate: 0deg !important; } }

/* ⏱️ le temps passé dans chaque monde (📊 Stats) */
.temps-mondes { margin-top: 12px; border: 1.5px solid var(--ligne); border-radius: 14px; padding: 6px 10px; background: rgba(0, 0, 0, .18); }
.temps-mondes > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0;
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: var(--gold); font-size: 1rem; }
.temps-mondes > summary::-webkit-details-marker { display: none; }
.temps-mondes > summary small { font-family: 'Nunito', system-ui, sans-serif; letter-spacing: 0; color: var(--text); opacity: .7; font-size: .75rem; }
.tmo { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(50px, 90px) auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ligne); font-size: .82rem; }
.tmo-ic { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #1b1030; font-size: 1rem; }
.tmo-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmo-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmo-barre { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tmo-barre i { display: block; height: 100%; background: var(--c, var(--p)); }
.tmo b { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }

/* 📲 dans l'appli installée (plein écran) : l'en-tête passe sous l'encoche et la barre d'état du téléphone */
body.en-appli #entete { padding-top: calc(10px + env(safe-area-inset-top)); }
.appli-ok { color: var(--green); white-space: nowrap; }

/* =====================================================================
   🤝 L'ONGLET TEAM, RANGÉ (09-codes-team.js, 26/09/2026)
   4 sous-onglets · ta Team en haut · recherche · potes rangés par effet · « ??? » à la fin
   ===================================================================== */
.sous-onglets-4 { grid-template-columns: 1fr 1fr; }
.team-barre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-bottom: 10px; }
.team-slot { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--ligne); background: rgba(0, 0, 0, .25); }
.team-slot.plein { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, rgba(0, 0, 0, .25)); }
.team-slot.libre { border-style: dashed; opacity: .8; }
.team-slot.verrou { opacity: .45; }
.ts-photo { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1.3rem; font-weight: 900;
    background: radial-gradient(circle, color-mix(in srgb, var(--p) 35%, transparent), transparent 70%); }
.ts-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ts-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ts-txt b { font-size: .8rem; color: var(--s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-txt small { font-size: .66rem; opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.team-slot.plein .ts-txt small { color: var(--green); opacity: 1; font-weight: 800; }
.ts-x { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 8px; border: 1.5px solid var(--ligne); background: rgba(0, 0, 0, .35); cursor: pointer; font-size: .7rem; }
.ts-x:hover { border-color: var(--danger); }
.team-outils { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
#team-recherche { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--ligne); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; font-size: .85rem; }
#team-recherche:focus { outline: none; border-color: var(--p); }
.team-compte { font-size: .75rem; opacity: .8; white-space: nowrap; }
.team-aide { margin: 0 0 6px; font-size: .72rem; }
.team-famille { margin-bottom: 10px; }
.tf-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: var(--gold); font-size: .95rem; margin: 6px 0; padding-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.tf-titre small { font-family: 'Nunito', sans-serif; letter-spacing: 0; font-size: .72rem; opacity: .7; margin-left: 4px; }
.grille-potes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.pote { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 5px 6px; text-align: center; cursor: pointer;
    border-radius: 14px; border: 2px solid var(--ligne); background: rgba(0, 0, 0, .25); transition: transform .12s, border-color .2s; }
.pote:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--p) 60%, transparent); }
.pote:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pote.equipe { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, rgba(0, 0, 0, .25)); }
.pote .pote-photo { width: 48px; height: 48px; font-size: 1.6rem; }
/* 01/10/2026 : plus de « … » (« il y a des persos où il y a des … ») : le nom passe à la ligne et le bonus se lit en entier.
   Le bouton ÉQUIPER reste collé en bas (margin-top: auto), donc les cartes d'une même rangée restent alignées. */
.pote .pote-nom { max-width: 100%; font-size: .8rem; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.pote .pote-bonus { font-size: .64rem; line-height: 1.2; overflow-wrap: anywhere; min-height: 2.4em; }
.pote-etat { margin-top: auto; padding: 2px 8px; border-radius: 99px; font-size: .62rem; font-weight: 900; letter-spacing: .5px; background: color-mix(in srgb, var(--p) 25%, transparent); }
.pote.equipe .pote-etat { background: var(--gold); color: #000; }
.pote-etoile { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border-radius: 8px; border: 1.5px solid var(--ligne); background: rgba(0, 0, 0, .35);
    cursor: pointer; font-size: .75rem; filter: grayscale(1); opacity: .6; }
.pote-etoile.actif, .pote-etoile:hover { filter: none; opacity: 1; border-color: var(--gold); }
.pote[hidden], .team-famille[hidden] { display: none !important; }
.potes-caches { margin-top: 10px; padding: 6px 10px; border-radius: 14px; border: 1.5px dashed var(--ligne); background: rgba(0, 0, 0, .15); }
.potes-caches > summary { list-style: none; cursor: pointer; padding: 4px 0; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .95rem; }
.potes-caches > summary::-webkit-details-marker { display: none; }
.potes-caches > summary small { font-family: 'Nunito', sans-serif; letter-spacing: 0; font-size: .72rem; opacity: .65; margin-left: 4px; }
.grille-caches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 6px 0 4px; }
.pote-cache { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; text-align: center; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.pote-cache .pote-photo { width: 40px; height: 40px; font-size: 1.2rem; filter: brightness(0) opacity(.5); }
.pote-cache small { font-size: .62rem; line-height: 1.2; opacity: .75; }
.look-centre { margin-bottom: 8px; }
@media (max-width: 820px) {
    .grille-potes { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* =====================================================================
   ✨ LA RENAISSANCE RANGÉE (10-renaissance.js, 26/09/2026)
   ===================================================================== */
/* 🌳 l'arbre : les liens dessinés derrière les talents */
.arbre { position: relative; }
.arbre-liens { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.arbre-liens line { stroke: var(--ligne); stroke-width: 3; stroke-linecap: round; }
.arbre-liens line.ouvert { stroke: color-mix(in srgb, var(--green) 55%, transparent); stroke-dasharray: 6 5; }
.arbre-liens line.pris { stroke: color-mix(in srgb, var(--gold) 80%, transparent); }
.ligne-talents { position: relative; z-index: 1; }
.talent.conseille::after { content: '👉'; position: absolute; top: -10px; left: -10px; font-size: 1rem; }
.arbre-conseil { margin: 4px 0 2px; }
/* 🏟️ un défi encore secret */
.defi.secret { opacity: .6; border-style: dashed; }
.chrono-speedrun { margin-top: 8px; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.2rem; color: var(--danger); }
/* 🛍️ la boutique des étoiles */
.boutique-etoiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.article-etoiles { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 14px; border: 2px solid var(--ligne); background: rgba(0, 0, 0, .25); min-width: 0; }
.article-etoiles.pris, .article-etoiles.porte { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, rgba(0, 0, 0, .25)); }
.article-etoiles .btn { padding: 6px 10px; font-size: .85rem; white-space: nowrap; }
.ae-ic { font-size: 1.5rem; flex: none; width: 36px; text-align: center; }
.ae-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ae-txt b { font-size: .85rem; }
.ae-txt small { font-size: .68rem; opacity: .75; }
.ae-ok { color: var(--gold); font-weight: 900; font-size: 1.1rem; padding: 0 8px; }
.ae-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .5); }
/* 👑 la Transcendance */
.carte-transcendance { margin-top: 12px; padding: 14px; text-align: center; border-radius: 18px; border: 2px solid #ffd23f;
    background: radial-gradient(circle at 50% 0%, rgba(255, 210, 63, .22), rgba(60, 9, 108, .35) 70%); }
.carte-transcendance.fermee { border-style: dashed; border-color: var(--ligne); background: rgba(0, 0, 0, .2); opacity: .75; }
.ct-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.4rem; color: var(--gold); }
.couronnes-ligne { margin-top: 6px; font-weight: 900; color: var(--gold); font-size: .85rem; }
/* ✨ l'aura autour du perso : une lueur FIXE (rien ne clignote) */
body.avec-aura #avatar { filter: drop-shadow(0 0 14px var(--aura)) drop-shadow(0 0 4px var(--aura)); }
/* (6 talents par rangée depuis le 26/09 : un peu plus petits pour qu'une rangée tienne sur une ligne) */
.ligne-talents { gap: 6px; flex-wrap: nowrap; }
.talent { width: 56px; height: 56px; font-size: 1.4rem; border-radius: 16px; flex: none; }
@media (max-width: 420px) { .talent { width: 50px; height: 50px; font-size: 1.25rem; border-radius: 14px; } .ligne-talents { gap: 5px; } }
/* 👑 la boutique des couronnes */
.boutique-royale { padding: 10px; border-radius: 18px; border: 2px solid #ffd23f; background: radial-gradient(circle at 50% 0%, rgba(255, 210, 63, .16), rgba(60, 9, 108, .28) 75%); }
.article-etoiles.royal { border-color: color-mix(in srgb, #ffd23f 45%, transparent); }
.titres-royaux { display: flex; flex-wrap: wrap; gap: 5px; }
.titre-joueur { text-align: center; margin: -4px 0 10px; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; color: var(--gold); font-size: 1.15rem; }
/* 👑 la couronne sur la tête du perso (fixe, comme le chapeau du vendeur) */
.couronne-tete { position: absolute; z-index: 7; left: 50%; top: -6%; transform: translateX(-50%) rotate(-8deg); font-size: 3.4rem; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
body.deguise .couronne-tete { display: none !important; }

/* =====================================================================
   ⚡ PERFORMANCE (39-performance.js) — pour les téléphones qui rament
   ===================================================================== */
/* 🎞️ le perso figé : un canvas avec la 1re image du GIF, l'image animée est cachée */
#avatar-fige { display: none; }
#avatar-btn.avec-fige #avatar { display: none; }
#avatar-btn.avec-fige #avatar-fige { display: block; width: 100%; height: 100%; object-fit: contain; scale: 1.12; pointer-events: none; filter: drop-shadow(0 0 18px var(--p)); transition: transform .08s; }
#avatar-btn.appui #avatar-fige { transform: scale(.9) rotate(-3deg); }
/* ✨ lueurs, flous et décor animé coupés */
body.perf-effets { background-attachment: scroll !important; }
body.perf-effets #entete, body.perf-effets #nav-mobile, body.perf-effets .surcouche { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.perf-effets #entete, body.perf-effets #nav-mobile { background: var(--panel) !important; }
body.perf-effets #avatar, body.perf-effets #avatar-fige, body.perf-effets .mini-algaclick { filter: none !important; }
body.perf-effets #avatar { animation: none !important; }
body.perf-effets *:not(.mini-algaclick), body.perf-effets *::before, body.perf-effets *::after { animation-iteration-count: 1 !important; }
/* 📊 le compteur d'images par seconde */
#perf-fps { position: fixed; z-index: 99980; top: calc(4px + env(safe-area-inset-top)); left: 4px; pointer-events: none; padding: 2px 7px; border-radius: 8px;
    font: 800 .72rem 'Nunito', system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .7); }
/* 🖱️ curseurs personnalisés coupés (Réglages) : la souris normale partout (les autres sont en :not(.sans-curseurs)) */
body.sans-curseurs.mode-wtf #avatar-btn { cursor: pointer !important; }
/* 🎥 Norman mis en avant (les couleurs de son bonnet) */
.norman-mode { --p: #b5373f; --s: #e0656c; --bg: #0b0f1a; --gold: #ffd166; --panel: #151b2b; --text: #eef1f7; --accent: #8c2a30; --green: #7bd389; }
/* 🐱 le Monde Neocities : le bleu de neocities.org, et sa ville en traits blancs derrière le perso */
.neocities-mode { --p: #3f9ad0; --s: #f7a541; --bg: #0f2433; --gold: #ffd166; --panel: #173a52; --text: #eaf6ff; --accent: #e24e6b; --green: #7ddf8f; }
body.mode-neocities #zone-clic { background: url('../img/neocities/neocity.png') center bottom / 190% auto no-repeat, linear-gradient(#5fb1d6, #2c78a8); }
/* 🍗 le Monde Tasty Crousty : Vice City, rose et cyan, le coucher de soleil derrière la barquette */
.crousty-mode { --p: #ff5fa2; --s: #2de2e6; --bg: #1a0b2e; --gold: #ffd166; --panel: #2a1245; --text: #fff0f7; --accent: #ff9f1c; --green: #7ee8a2; }
body.mode-crousty #zone-clic { background: url('../img/tastycrousty/decor.svg') center / cover no-repeat; }
/* 🎧 le Monde QovqGlfpp : le studio caché, la nuit — violet sombre et vert acide, les lettres du nom qui traînent */
.qovq-mode { --p: #b388ff; --s: #c6ff00; --bg: #0c0716; --gold: #ffd166; --panel: #1a1030; --text: #efe9ff; --accent: #ff3d7f; --green: #7ee8a2; }
body.mode-qovq #zone-clic { background: url('../img/qovq/decor.svg') center / cover no-repeat; }
/* 🧱 le Monde BlockStarPlanet : l'or du logo, le bleu du Nexus ; son fond = une vraie image de BSP (img/bsp/nexus.jpg) */
.bsp-mode { --p: #ffb703; --s: #3a86ff; --bg: #0b1e3f; --gold: #ffd23f; --panel: #12305c; --text: #eaf4ff; --accent: #ff006e; --green: #7ae582; }
body.mode-bsp #zone-clic { background: linear-gradient(rgba(11, 30, 63, .38), rgba(11, 30, 63, .38)), url('../img/bsp/nexus.jpg') center / cover no-repeat, linear-gradient(#8fd3ff, #1d4e89); }
/* ♦️ le Monde Harley Quinn : ses couettes rose et bleu, du noir, du rouge (pas d'image de fond : un dégradé) */
.harley-mode { --p: #ff5ca8; --s: #3a86ff; --bg: #140a14; --gold: #ffd23f; --panel: #24121f; --text: #fff0f7; --accent: #e63946; --green: #7ae582; }
body.mode-harley #zone-clic { background: radial-gradient(circle at 20% 15%, rgba(255, 92, 168, .45), transparent 45%), radial-gradient(circle at 80% 85%, rgba(58, 134, 255, .45), transparent 45%), #140a14; }
.tcarte-art img[src*="img/harley/"] { object-fit: cover; object-position: 50% 20%; }
.tcarte-art img[src$="harley/couettes.jpg"] { object-fit: contain; background: #24121f; }   /* les couettes sont sur les côtés : on montre tout */

/* 🎯 le Monde Peggle : un plateau bleu nuit, le perso plus petit au milieu (c'est un bumper), le plateau dessiné par 40-peggle.js.
   ⚠️ Épilepsie : aucune animation de couleur ici. */
.pegglemonde-mode { --p: #ff7a1a; --s: #2f7de1; --bg: #0b1633; --gold: #ffd23f; --panel: #14244d; --text: #eef4ff; --accent: #2f7de1; }
body.mode-pegglemonde #zone-clic { background: radial-gradient(ellipse at 50% 22%, rgba(90, 150, 255, .3), transparent 65%), linear-gradient(#132a5c, #0a1430); border: 2px solid rgba(255, 122, 26, .35); }
body.mode-pegglemonde #orbite { display: none; }   /* le plateau remplace l'orbite */
body.mode-pegglemonde #avatar-btn { width: calc(var(--taille) * .66); height: calc(var(--taille) * .66); }
#peggle-plateau { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
body.deguise #peggle-plateau { display: none; }
.tcarte-art img[src*="img/peggle/"] { object-fit: contain; background: radial-gradient(circle, #1d3a78, #0b1633); }
.tcarte-art img[src$=".jpg"][src*="img/peggle/"] { object-fit: cover; background: none; }   /* les portraits des Maîtres : carrés, en entier */

/* 🛡️ Léonidas (code « sparta ») : ses couleurs quand il est au centre, et le puits où finit Douza.
   ⚠️ Épilepsie : tout arrive en fondu, Douza tombe en tournant lentement, rien ne clignote. */
.leonidas-mode { --p: #e63946; --s: #d4a24c; --bg: #1a0806; --gold: #ffd23f; --panel: #2b0f0a; --text: #fff1e6; --accent: #9d0208; }
.sparta { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; transition: opacity .5s; }
.sparta.fin { opacity: 0; }
.sparta-puits { position: absolute; left: 50%; bottom: -8%; width: 82%; height: 36%; border-radius: 50%; opacity: 0; transform: translateX(-50%) scale(.2);
    background: radial-gradient(ellipse at 50% 42%, #000 0 52%, #140a05 64%, #4a2f14 80%, #7a5a33 86%, transparent 88%); transition: transform .6s ease-out, opacity .6s; }
.sparta.go .sparta-puits { opacity: 1; transform: translateX(-50%) scale(1); }
.sparta-douza { position: absolute; }
.sparta-douza svg { width: 100%; height: auto; display: block; }
.sparta.go .sparta-douza { animation: spartaChute 3.4s ease-in forwards; }
@keyframes spartaChute {
    0% { transform: translate(0, 0) rotate(0); }
    55% { transform: translate(0, 0) rotate(-5deg); }                                        /* il attend le cri… */
    63% { transform: translate(calc(var(--dx) * .2), -26px) rotate(-22deg); }                /* le coup de pied */
    100% { transform: translate(var(--dx), var(--dy)) rotate(280deg) scale(.06); opacity: .15; }  /* au fond du puits */
}
.sparta-leonidas { position: absolute; left: -34%; bottom: 14%; width: 34%; opacity: 0; }
.sparta.go .sparta-leonidas { animation: spartaLeo 3.4s ease-out forwards; }
@keyframes spartaLeo { 0% { left: -34%; opacity: 0; } 30% { left: 2%; opacity: 1; } 60% { left: 8%; } 68% { left: 16%; } 100% { left: 10%; opacity: 1; } }
.sparta-cri { position: absolute; left: 50%; top: 16%; transform: translateX(-50%) scale(.6); opacity: 0; white-space: nowrap;
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: clamp(1.9rem, 7vw, 3.1rem); color: #ffd23f;
    text-shadow: 0 3px 0 #7a0000, 0 0 16px rgba(0, 0, 0, .85); transition: opacity .5s, transform .6s; }
.sparta.go .sparta-cri { opacity: 1; transform: translateX(-50%) scale(1); }

/* 🥶 le Monde Valouzz · Tchiki Brrr : bleu glacé (brrr) et orange burger. Rien ne clignote. */
.valouzz-mode { --p: #4cc9f0; --s: #ff9f1c; --bg: #0b1a24; --gold: #ffd23f; --panel: #10283a; --text: #eefbff; --accent: #ff9f1c; }
body.mode-valouzz #zone-clic { background: radial-gradient(circle at 50% 42%, rgba(76, 201, 240, .25), transparent 60%), linear-gradient(#10283a, #0b1a24); }
.tcarte-art img[src*="img/valouzz/"], .tcarte-art img[src*="img/desulme/"] { object-fit: cover; }

/* 🎬 les 4 mondes YouTube : un portrait rond au centre (photos libres de Wikimedia Commons), un fond à leur image. Rien ne clignote. */
.cyprien-mode { --p: #ffb703; --s: #219ebc; --bg: #0b1d2a; --gold: #ffd23f; --panel: #12304a; --text: #f4f9ff; --accent: #fb8500; }
body.mode-cyprien #zone-clic { background: radial-gradient(circle at 50% 42%, rgba(255, 183, 3, .25), transparent 62%), linear-gradient(#12304a, #0b1d2a); }
.normanmonde-mode { --p: #ff4d6d; --s: #ffd23f; --bg: #140a0d; --gold: #ffd23f; --panel: #2a1016; --text: #fff0f3; --accent: #c9184a; }
body.mode-normanmonde #zone-clic { background: radial-gradient(circle at 50% 40%, rgba(255, 77, 109, .25), transparent 62%), #140a0d; }
.squeezie-mode { --p: #ffd60a; --s: #003566; --bg: #0b0b12; --gold: #ffd60a; --panel: #16161f; --text: #fffbe6; --accent: #ffc300; }
body.mode-squeezie #zone-clic { background: radial-gradient(circle at 50% 45%, rgba(255, 214, 10, .22), transparent 60%), repeating-conic-gradient(rgba(255, 255, 255, .05) 0 25%, transparent 0 50%) 0 0 / 32px 32px, #0b0b12; }
.joyca-mode { --p: #2ee59d; --s: #ff006e; --bg: #0a0f14; --gold: #ffd23f; --panel: #102029; --text: #eafff6; --accent: #ff006e; }
body.mode-joyca #zone-clic { background: radial-gradient(circle at 50% 45%, rgba(46, 229, 157, .2), transparent 60%), repeating-linear-gradient(90deg, rgba(46, 229, 157, .07) 0 6px, transparent 6px 16px), #0a0f14; }
.tcarte-art img[src*="img/youtubeurs/"] { object-fit: cover; }
.tcarte-art img[src$="youtubeurs/yoko.png"], .tcarte-art img[src$="youtubeurs/minori.jpg"] { object-fit: contain; background: #fff; }
.tcarte-art img[src$="youtubeurs/oxyz.webp"] { object-fit: contain; background: #1b1030; padding: 12%; }

/* 🔄 le Monde 73rotaglA : SA tête et l'orbite en miroir (rien de redessiné), le texte des clics en écriture miroir
   qui DESCEND au lieu de monter, la pluie qui REMONTE, et la ligne du miroir au milieu. Rien ne clignote. */
.rotagla-mode { --p: #00e5a0; --s: #9d4edd; --bg: #07140f; --gold: #ffd23f; --panel: #0e2a1f; --text: #eafff6; --accent: #00b3ff; }
body.mode-rotagla #zone-clic { background: linear-gradient(90deg, rgba(0, 229, 160, .18), rgba(0, 229, 160, .04) 49.5%, rgba(255, 255, 255, .45) 50%, rgba(157, 78, 221, .04) 50.5%, rgba(157, 78, 221, .18)), #07140f; border: 2px solid rgba(0, 229, 160, .3); }
body.mode-rotagla #avatar, body.skin-miroir #avatar { scale: -1.12 1.12; }   /* skin-miroir : le pote 73rotaglA mis au centre, n'importe où */
body.mode-rotagla .mini-algaclick { scale: -1 1; }
body.mode-rotagla .texte-flottant { scale: -1 1; animation-name: descend; }
@keyframes descend { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: 110px; } }
body.mode-rotagla .emoji-tombe { top: auto; bottom: -60px; animation-name: remonte; }
@keyframes remonte { to { transform: translateY(-118vh) rotate(-720deg); } }

/* 🛒 le Monde Super U : le bleu et le rouge des magasins U, la photo du magasin derrière si elle est là */
.superu-mode { --p: #e2001a; --s: #0b5eab; --bg: #081c3a; --gold: #ffd23f; --panel: #0f2d5c; --text: #f1f6ff; --accent: #0b5eab; }
body.mode-superu #zone-clic { background: linear-gradient(rgba(8, 28, 58, .3), rgba(8, 28, 58, .75)), url('../img/superu/magasin.jpg') center / cover, linear-gradient(#0f3f86, #081c3a); }
body.mode-superu #avatar-btn { width: calc(var(--taille) * .8); height: calc(var(--taille) * .8); }   /* un peu plus petit : on voit le magasin derrière */
.caddie-fou { position: absolute; z-index: 7; width: 90px; height: 90px; border: 0; background: none; padding: 0; cursor: pointer; font-size: 64px; line-height: 1; transition: left 6s linear; }
.caddie-fou.vers-droite { left: -100px; }
.caddie-fou.vers-droite.partie { left: calc(100% + 10px); }
.caddie-fou.vers-gauche { left: calc(100% + 10px); transform: scaleX(-1); }
.caddie-fou.vers-gauche.partie { left: -100px; }
body.deguise .caddie-fou { display: none !important; }
.tcarte-art img[src*="img/superu/"] { object-fit: contain; background: #fff; }
.tcarte-art img[src$="superu/magasin.jpg"], .tcarte-art img[src$="superu/range-velos.jpg"] { object-fit: cover; }
/* 🧩 le Monde WikiMasters : le violet du cadre Rare, l'or du cadre Légendaire ; le fond = le cadre Rare officiel, assombri */
.wikimasters-mode { --p: #a66bff; --s: #ffd23f; --bg: #17122a; --gold: #ffd23f; --panel: #231b3d; --text: #f3eeff; --accent: #ff5ca8; --green: #7ae582; }
body.mode-wikimasters #zone-clic { background: linear-gradient(rgba(23, 18, 42, .45), rgba(23, 18, 42, .45)), url('../img/wikimasters/fond.jpg') center / cover no-repeat, #17122a; }
.tcarte-art img[src*="img/wikimasters/wm_"] { object-fit: contain; background: #1e1b2e; }
/* 🌭 le Monde Papa Louie : moutarde, vert du Griller Stadium, ketchup ; le fond = l'écran titre de Hot Doggeria, assombri */
.papalouie-mode { --p: #ffcc00; --s: #1ea879; --bg: #0e2a22; --gold: #ffcc00; --panel: #16392f; --text: #fffbe6; --accent: #e63946; --green: #7ae582; }
body.mode-papalouie #zone-clic { background: linear-gradient(rgba(14, 42, 34, .5), rgba(14, 42, 34, .5)), url('../img/papalouie/titre-hotdoggeria.jpg') center / cover no-repeat, #0e2a22; }
/* les cartes Flipdeck sont en hauteur, les vignettes des restaurants en largeur : on les montre en entier */
.tcarte-art img[src*="img/papalouie/"] { object-fit: contain; background: #16392f; }
img[src*="img/papalouie/carte-"] { object-position: 50% 30%; }
/* 🃏 le Monde Laink & Terracid : le bleu du Wankil Studio, l'or de la WankulCoin, le rouge de l'écharpe de Laink ;
   le fond = le motif officiel aux petites têtes (wankil.fr), assombri */
.wankil-mode { --p: #2f80ed; --s: #ffcf33; --bg: #0c1a33; --gold: #ffcf33; --panel: #13294d; --text: #eef4ff; --accent: #e63946; --green: #7ae582; }
body.mode-wankil #zone-clic { background: linear-gradient(rgba(12, 26, 51, .45), rgba(12, 26, 51, .45)), url('../img/wankil/fond.jpg') center / cover no-repeat, #0c1a33; }
.tcarte-art.clair img[src^="img/wankil/"] { background: linear-gradient(#dbe9ff, #9cc3ff); object-fit: contain; }
.tcarte-art img[src$="wankil/logo-wankul.png"] { object-fit: contain; padding: 10%; background: #13294d; }
/* 💿 le Monde DistroKid : un studio de nuit, bleu et vert « royalties » ; le logo blanc, plus bas pour tenir sur téléphone */
.distrokid-mode { --p: #3b82f6; --s: #22c55e; --bg: #0b0b12; --gold: #ffd166; --panel: #161624; --text: #eef2ff; --accent: #ff4fd8; --green: #22c55e; }
body.mode-distrokid #zone-clic { background: radial-gradient(circle at 50% 40%, rgba(59, 130, 246, .35), transparent 60%), radial-gradient(circle at 80% 90%, rgba(34, 197, 94, .25), transparent 50%), #0b0b12; }
body.mode-distrokid .logo-img { height: 1.2rem; }
/* les cartes du monde : leurs images détourées posées sur le ciel du Nexus */
.tcarte-art.clair img[src^="img/bsp/"] { background: linear-gradient(#8fd3ff, #3a86ff); object-fit: contain; }
/* un logo de monde en image, à la place des lettres */
.logo.avec-image .l1, .logo.avec-image .l2, .logo.avec-image .l3 { display: none; }
.logo-img { height: 2.2rem; width: auto; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

/* =====================================================================
   📦 LES CAISSES (42-caisses.js) — ⚠️ épilepsie : rien ne clignote.
   Les lampes de l'échelle s'allument une fois et restent allumées,
   la lueur change en fondu (0,35 s), le résultat arrive en fondu.
   ===================================================================== */
.caisses-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.caisses-haut .btn { flex: 1 1 220px; }
.caisses-haut small { flex: 1 1 200px; font-size: .78rem; opacity: .8; }
.caisses-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.caisse-cube {
    display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 12px 10px; border-radius: 18px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--k1) 26%, var(--panel)), color-mix(in srgb, var(--k2) 30%, #0a0014));
    border: 2px solid color-mix(in srgb, var(--k1) 65%, transparent); box-shadow: 0 5px 0 color-mix(in srgb, var(--k2) 70%, #000);
}
.caisse-cube img { width: 92px; height: 92px; }
.caisse-cube b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.2px; font-size: 1.15rem; font-weight: 400; color: var(--k1); }
.caisse-cube > small { font-size: .74rem; opacity: .85; min-height: 2.6em; }
.caisse-cube.verrou img { filter: grayscale(1) brightness(.7); }
.caisse-stock { font-size: .85rem; }
.caisse-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.caisse-actions .btn { flex: 1 1 auto; padding: 8px 10px; font-size: .92rem; }
.caisse-verrou { font-size: .74rem; opacity: .8; align-self: center; }
.caisse-chances { font-size: .64rem; line-height: 1.5; font-weight: 800; }
.etagere { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.etagere-objet {
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px 6px 10px; border-radius: 14px;
    background: var(--doux); border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
}
.etagere-objet img { width: 100%; max-width: 110px; aspect-ratio: 1; border-radius: 10px; }
.etagere-objet b { font-size: .78rem; line-height: 1.15; }
.etagere-objet .rang { color: var(--c); font-weight: 900; font-size: .68rem; }
.etagere-objet .effet { font-size: .66rem; opacity: .85; line-height: 1.25; }
.etagere-objet .en-cours { font-size: .66rem; color: var(--green); font-weight: 900; }
.etagere-objet .btn { margin-top: auto; width: 100%; padding: 7px 6px; font-size: .85rem; }
.etagere-objet.inconnu { opacity: .8; border-style: dashed; }
.etagere-objet.inconnu img { filter: brightness(0) opacity(.45); }

/* 🎰 la machine d'ouverture */
.caisse-surcouche { z-index: 6500; }
.caisse-machine {
    width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px; border-radius: 24px; text-align: center; color: var(--text);
    background: linear-gradient(170deg, #161c2a, #0a0e17); border: 2.5px solid var(--k1); box-shadow: 0 0 40px color-mix(in srgb, var(--k1) 25%, transparent);
}
.cm-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.7rem; color: var(--k1); margin-bottom: 10px; }
.cm-titre small { display: block; font-family: 'Nunito', sans-serif; font-size: .72rem; letter-spacing: 0; color: var(--text); opacity: .75; }
.cm-fenetre { position: relative; height: 170px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #1d2436, #0e1320); border: 2px solid rgba(255, 255, 255, .08); }
.cm-lueur { position: absolute; inset: 0; box-shadow: inset 0 0 60px -10px color-mix(in srgb, var(--lueur, transparent) 55%, transparent); transition: box-shadow .35s ease; pointer-events: none; }
.cm-caisse { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; opacity: 0; transform: translateY(-110px); transition: transform .8s cubic-bezier(.2, .8, .3, 1), opacity .5s; }
.cm-caisse.arrivee { opacity: 1; transform: none; }
.cm-caisse.partie { opacity: 0; transition: opacity .25s; }
.cm-bande { position: absolute; left: 0; right: 0; top: 50%; height: 100px; margin-top: -50px; overflow: hidden; }
.cm-piste { display: flex; gap: 12px; width: max-content; will-change: transform; }
.cm-piste span { flex: 0 0 84px; height: 84px; margin-top: 8px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .14); display: grid; place-items: center; box-sizing: border-box; }
.cm-piste img { width: 74px; height: 74px; filter: brightness(0); opacity: .7; }
.cm-repere { position: absolute; left: 50%; width: 3px; height: 14px; margin-left: -1.5px; background: rgba(255, 255, 255, .8); border-radius: 2px; }
.cm-repere.haut { top: 4px; }
.cm-repere.bas { bottom: 4px; }
.cm-gagnant { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; filter: brightness(0); opacity: .75; transition: filter .6s ease, opacity .6s ease; }
.cm-gagnant.revele { filter: none; opacity: 1; }
.cm-echelle { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 12px 0 8px; }
.cm-lampe {
    padding: 6px 2px; border-radius: 10px; font-size: .64rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis;
    border: 2px solid color-mix(in srgb, var(--c) 40%, transparent); color: color-mix(in srgb, var(--c) 50%, #888); background: rgba(255, 255, 255, .03);
    transition: background .3s, color .3s, border-color .3s;
}
.cm-lampe.allumee { background: color-mix(in srgb, var(--c) 30%, transparent); color: #fff; border-color: var(--c); }
.cm-resultat { opacity: 0; transition: opacity .6s ease; }
.cm-resultat.visible { opacity: 1; }
.cm-carte { width: 150px; height: 150px; border-radius: 16px; display: block; margin: 4px auto 8px; }
.cm-nom { display: block; font-size: 1.1rem; }
.cm-rang { display: block; font-weight: 900; font-size: .85rem; margin: 2px 0 6px; }
.cm-texte { font-size: .82rem; opacity: .85; margin: 4px 0; font-style: italic; }
.cm-nouveau { color: var(--gold); font-weight: 900; font-size: .88rem; margin: 6px 0; }
.cm-note { font-size: .82rem; opacity: .9; margin: 6px 0; }
.cm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.cm-mini { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 5px; border-radius: 10px; border: 2px solid var(--c); background: rgba(255, 255, 255, .04); }
.cm-mini img { width: 100%; border-radius: 8px; }
.cm-mini small { font-size: .6rem; line-height: 1.1; }
.cm-mini i { font-style: normal; font-size: .6rem; font-weight: 900; color: var(--gold); }
.cm-boutons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cm-boutons .btn { flex: 1; }

/* 📸 la carte de profil (43-carte-profil.js) : l'aperçu tient dans la fenêtre */
.carte-profil-apercu { display: grid; place-items: center; min-height: 200px; margin: 8px 0; }
.carte-profil-apercu img { max-width: 100%; max-height: 58vh; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }

/* 🖼️ la photo de profil (43-carte-profil.js) */
#btn-profil.avec-photo { padding: 0; overflow: hidden; }
#btn-profil.avec-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top; display: block; }
.pp-entete { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; text-align: left; }
.pp-entete .btn { flex: 1; }
.pp-rond {
    width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; padding: 0;
    font-size: 2rem; background: var(--doux); border: 2.5px solid var(--gold); cursor: pointer; color: var(--text);
}
.pp-rond.grand { width: 92px; height: 92px; font-size: 2.8rem; }
.pp-rond img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pp-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pp-recherche { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--ligne); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; font-size: .85rem; margin-bottom: 8px; }
.pp-recherche:focus { outline: none; border-color: var(--p); }
.pp-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.pp-choix {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 14px; cursor: pointer;
    background: var(--doux); border: 2px solid var(--ligne); color: var(--text); font: inherit;
}
.pp-choix.pp-carte { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.pp-choix img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; }
.pp-choix.pp-carte img { border-radius: 10px; }
.pp-choix small { font-size: .66rem; line-height: 1.15; }
.pp-choix.choisie { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.pp-plus { grid-column: 1 / -1; }
/* 🖼️ la photo de profil dans le classement 🌐 Top (11-en-ligne.js) */
.lb-photo { display: inline-block; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; vertical-align: middle; margin: 0 7px 0 0; background: var(--doux); border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.lb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lb-nom:has(.lb-photo) { padding-block: 2px; }   /* la bordure du rond ne se fait jamais couper */

/* =====================================================================
   🍪 CE QU'ON A REPRIS DE COOKIE CLICKER (44-cookie-clicker.js, 32-potager.js, 45-douzapocalypse.js)
   ⚠️ Épilepsie : rien ne clignote. Les mini-Douza se balancent lentement, la page tombe en 3 s.
   ===================================================================== */
/* 💰 acheter / vendre · 🎤 les Micros d'or */
.studio-plus { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.studio-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.studio-mode .filtre { font-size: .8rem; padding: 6px 12px; }
.studio-mode small { font-size: .72rem; opacity: .75; }
.studio-micros { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, #ffd23f 12%, transparent); border: 1.5px solid color-mix(in srgb, #ffd23f 45%, transparent); }
.studio-micros .micro-ic { font-size: 1.6rem; grid-row: span 2; }
.studio-micros b { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.5rem; color: #ffd23f; grid-row: span 2; letter-spacing: 1px; }
.studio-micros small { font-size: .74rem; opacity: .85; }
.micro-barre { height: 6px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.micro-barre i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb703, #ffd23f); }
.art-niv { margin-left: 6px; padding: 1px 7px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, #ffd23f 45%, transparent); background: rgba(0, 0, 0, .25); color: #ffd23f; font: inherit; font-size: .66rem; font-weight: 900; cursor: pointer; vertical-align: 1px; }
.art-niv.pret { background: #ffd23f; color: #000; border-color: #ffd23f; }
#liste-studio.mode-vente .art-btn:not(:disabled) { background: linear-gradient(135deg, #2ec27e, #00b4d8); }
#liste-studio.mode-vente .article.abordable { border-color: color-mix(in srgb, #00b4d8 55%, transparent); }

/* ✨ le potager en 3 colonnes : les voisins qu'on voit sont les vrais voisins des croisements */
.potager { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) {
    .carre { padding: 10px 4px; min-height: 132px; }
    .carre b { font-size: .76rem; }
    .carre small { font-size: .64rem; }
}

/* 🐛 les mini-Douza, 📜 la page qui tombe, 👑 le Suprême */
.minis-douza { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.mini-douza { position: absolute; width: 46px; height: 46px; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); pointer-events: auto; cursor: crosshair; touch-action: manipulation; animation: miniDouza 3.2s ease-in-out infinite alternate; }
.mini-douza svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
@keyframes miniDouza { from { rotate: -8deg; } to { rotate: 8deg; } }
body.photosensible .mini-douza { animation: none; }
.page-douza { position: absolute; z-index: 25; width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 2rem; cursor: pointer; transition: transform 3s ease-out; }
.page-douza.tombe { transform: translateY(70px) rotate(12deg); }
#douza.supreme { width: 220px; }
#douza.supreme svg { filter: drop-shadow(0 0 18px rgba(255, 200, 40, .6)); }
.journal-douza { text-align: left; background: #f4e1b6; color: #3d2c1e; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.journal-douza small { font-weight: 900; letter-spacing: 1px; opacity: .7; }
.journal-douza h2 { color: #9d0208 !important; text-align: left !important; margin: 4px 0 8px !important; }
.journal-douza p { font-style: italic; line-height: 1.5; margin: 0; }
.journal-pages { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.journal-page { background: #f4e1b6; color: #3d2c1e; border-radius: 10px; padding: 10px 12px; }
.journal-page small { font-weight: 900; font-size: .66rem; letter-spacing: 1px; opacity: .65; display: block; }
.journal-page b { color: #9d0208; }
.journal-page p { margin: 4px 0 0; font-style: italic; font-size: .86rem; line-height: 1.45; }
.journal-page.cachee { background: rgba(255, 255, 255, .06); color: var(--text); opacity: .6; }
.journal-page.cachee b { color: var(--text); }

/* 🃏 LE CLASSEMENT EN CARTES (11-en-ligne.js, 28/09/2026) : le podium (or, argent, bronze) et les cartes-lignes aux couleurs des raretés */
.lb-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 10px 0 12px; }
.lb-marche {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 6px 10px; border-radius: 14px; text-align: center;
    border: 2.5px solid var(--rc); background: linear-gradient(170deg, color-mix(in srgb, var(--rc) 30%, var(--panel)), var(--panel) 70%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 40%, transparent), 0 3px 10px rgba(0, 0, 0, .35);
}
.lb-marche.m1 { padding-top: 16px; padding-bottom: 16px; }
.lb-marche.moi { outline: 2.5px solid var(--green); outline-offset: 2px; }
.lb-medaille { font-size: 1.5rem; line-height: 1; }
.lb-grande-photo { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 3px solid var(--rc); background: #2b2140; flex: none; }
.lb-marche.m1 .lb-grande-photo { width: 72px; height: 72px; }
.lb-grande-photo img, .lb-petite-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lb-marche .lb-nom { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; letter-spacing: .5px; font-size: .95rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-renais { font-family: 'Bangers', 'Impact', sans-serif; color: var(--rc); font-size: 1.1rem; letter-spacing: 1px; }
.lb-marche small { font-size: .62rem; opacity: .75; line-height: 1.2; }
.lb-carte {
    display: grid; grid-template-columns: 34px 40px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; margin-bottom: 6px; border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--rc) 75%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--rc) 20%, var(--panel)), var(--panel) 70%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.lb-carte.moi { border-color: var(--green); background: linear-gradient(100deg, color-mix(in srgb, var(--green) 18%, var(--panel)), var(--panel) 70%); }
.lb-carte .lb-rang { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.15rem; text-align: center; color: var(--rc); }
.lb-petite-photo { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--rc); background: #2b2140; }
.lb-infos { display: flex; flex-direction: column; min-width: 0; }
.lb-infos .lb-nom { font-weight: 900; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-infos small { font-size: .66rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-carte .lb-score { font-family: 'Bangers', 'Impact', sans-serif; color: var(--rc); font-size: 1.05rem; letter-spacing: 1px; }

/* 📈 LA BOURSE DES BANGERS (47-bourse.js) — des tuiles « cube », une couleur par action */
.bourse-haut { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bourse-haut > b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-weight: 400; font-size: 1.2rem; color: var(--gold); }
.bourse-haut small { font-size: .74rem; opacity: .85; }
.monte { color: #3ddc84; }
.baisse { color: #ff5a5a; }
.actions-bourse { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.action {
    display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; min-width: 0;
    border: 2px solid color-mix(in srgb, var(--ac) 70%, transparent); background: linear-gradient(165deg, color-mix(in srgb, var(--ac) 18%, var(--panel)), var(--panel) 70%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.action-haut { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; }
.action-logo { width: 40px; height: 40px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.action-nom { display: flex; flex-direction: column; min-width: 0; }
.action-nom b { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; letter-spacing: 1px; font-size: 1.15rem; color: var(--ac); }
.action-nom small { font-size: .66rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-cours { display: flex; flex-direction: column; align-items: flex-end; }
.action-cours b { font-family: 'Bangers', 'Impact', sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 1px; }
.action-cours small { font-size: .72rem; font-weight: 900; }
.action-courbe { width: 100%; height: 44px; color: var(--text); background: rgba(0, 0, 0, .22); border-radius: 8px; }
.action-infos { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 800; opacity: .8; }
.action-part { font-size: .74rem; }
.action-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.action-btns .btn { padding: 8px 6px; font-size: .78rem; line-height: 1.1; }

/* 📴 le bandeau « pas d'internet » et 🐊 le Croco Runner (46-croco-runner.js) */
#bandeau-hors-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 6px 10px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, #4cc9f0 14%, var(--panel)); border: 1.5px solid color-mix(in srgb, #4cc9f0 50%, transparent); font-size: .82rem; font-weight: 800; text-align: center; }
#bandeau-hors-ligne .btn { padding: 6px 12px; font-size: .9rem; }
.croco-runner { display: block; width: 100%; height: auto; border-radius: 12px; touch-action: manipulation; cursor: pointer; background: #1d1033; }

/* 🗂️ LES ONGLETS (28/09/2026 : « ça fait trop, et moche ») : 4 grands onglets en cubes (l'icône au-dessus, le nom
   en petit), et la petite rangée du grand onglet ouvert. Même style dans la Boutique. */
.familles, .onglets-icones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.famille, .onglets-icones .onglet {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0;
    padding: 7px 2px 6px; border-radius: 14px; cursor: pointer; color: var(--text); white-space: nowrap;
    border: 1.5px solid color-mix(in srgb, var(--p) 30%, transparent); background: var(--doux);
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .82rem; opacity: .7; transition: opacity .15s, transform .12s;
}
.famille:hover, .onglets-icones .onglet:hover { opacity: .95; }
.famille.actif, .onglets-icones .onglet.actif { opacity: 1; background: linear-gradient(135deg, var(--p), var(--s)); color: #000; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--p) 40%, transparent); }
.famille-ic { font-size: 1.3rem; line-height: 1.1; }
.famille .pastille { position: absolute; top: -6px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #000; font: 900 .7rem/19px 'Nunito', sans-serif; font-style: normal; text-align: center; letter-spacing: 0; }
.onglets-fins { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--p) 70%, transparent) transparent; margin-bottom: 10px; padding: 7px 0 6px; }
.onglets-fins::-webkit-scrollbar { height: 6px; }
.onglets-fins::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--p) 70%, transparent); border-radius: 3px; }
.onglets-fins.seul { display: none; }
.onglets-fins .onglet { flex: 1 0 auto; padding: 6px 12px; font-size: .82rem; border-radius: 11px; }
.sous-onglets-4 { grid-template-columns: repeat(4, 1fr); }
.sous-onglets-4 .sous-onglet { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; font-size: .78rem; min-width: 0; }
.sous-onglets-4 .so-ic { font-size: 1.15rem; line-height: 1.1; }
.sous-onglets-4 .so-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sous-onglets-4 .sous-onglet small { margin-left: 0; font-size: .62rem; }
/* 🔧 29/09/2026 : sur ordinateur, le panneau a une hauteur maximale ; la petite rangée (qui défile de côté) se faisait
   ÉCRASER par le contenu en dessous (on n'en voyait que le haut). Tout ce qui est au-dessus de la zone qui défile garde sa hauteur. */
#col-boutique .panneau > :not(.defile), #col-empire .panneau > :not(.defile) { flex-shrink: 0; }

/* 💈 LE MONDE COUPE R9 (29/09/2026) : les couleurs du Brésil 2002 (jaune, vert, bleu), un terrain rayé derrière le perso,
   et le ballon qui traverse en roulant. ⚠️ Épilepsie : rien ne clignote, le ballon roule lentement (6 s). */
.r9-mode { --p: #ffdf00; --s: #009c3b; --bg: #04200d; --gold: #ffdf00; --panel: #0a3318; --text: #f2fff4; --accent: #3a86ff; }
body.mode-r9 #zone-clic { background: radial-gradient(circle at 50% 44%, rgba(255, 223, 0, .22), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 40px, transparent 40px 80px), linear-gradient(#0f5a26, #04200d); }
.ballon-r9 { position: absolute; z-index: 7; width: 64px; height: 64px; border: 0; background: none; padding: 0; cursor: pointer; transition: left 6s linear, transform 6s linear; }
.ballon-r9 img { width: 100%; height: 100%; display: block; pointer-events: none; }
.ballon-r9.vers-droite { left: -80px; }
.ballon-r9.vers-droite.partie { left: calc(100% + 10px); transform: rotate(900deg); }
.ballon-r9.vers-gauche { left: calc(100% + 10px); }
.ballon-r9.vers-gauche.partie { left: -80px; transform: rotate(-900deg); }
body.photosensible .ballon-r9.partie { transform: none; }
body.deguise .ballon-r9 { display: none !important; }

/* 👍 LE MONDE ISAAC DESULME (29/09/2026) : violet et bleu (ses dédicaces sur fond de jeu vidéo), le pouce doré au centre ;
   la trappe de La Cave de Maman et les fans de la Dédicace Frenzy. ⚠️ Épilepsie : tout apparaît en fondu, rien ne clignote. */
.desulme-mode { --p: #b388ff; --s: #3a86ff; --bg: #120a2e; --gold: #ffd23f; --panel: #1f1446; --text: #f3efff; --accent: #3a86ff; }
body.mode-desulme #zone-clic { background: radial-gradient(circle at 50% 42%, rgba(255, 210, 63, .2), transparent 55%), linear-gradient(#2d1b69, #120a2e 70%, #0b1f4d); }
.trappe-ds { position: absolute; z-index: 7; width: 74px; height: 74px; border: 3px solid #1b1030; border-radius: 14px; background: #6b4226; font-size: 40px; line-height: 1;
    cursor: pointer; box-shadow: 0 6px 0 #3d2c1e; animation: apparaitDS .4s ease-out; }
.frenzy-ds { position: absolute; z-index: 8; top: 8px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #1f1446; border: 2px solid var(--gold);
    color: #fff; font-weight: 900; white-space: nowrap; pointer-events: none; animation: apparaitDS .4s ease-out; }
.frenzy-ds .frenzy-combo { color: var(--gold); font-size: 1.25em; margin-left: 4px; }
.fan-ds { position: absolute; z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 6px 8px; border-radius: 14px;
    border: 3px solid #1b1030; background: #f3efff; color: #1b1030; cursor: pointer; box-shadow: 0 5px 0 #1b1030; animation: apparaitDS .25s ease-out; }
.fan-ds span { font-size: 28px; line-height: 1; }
.fan-ds small { font-size: 10px; font-weight: 900; }
.fan-ds.vip { background: #ffd23f; }
@keyframes apparaitDS { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.frenzy-ds { animation-name: apparaitFrenzy; }
@keyframes apparaitFrenzy { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }
body.photosensible .trappe-ds, body.photosensible .fan-ds, body.photosensible .frenzy-ds { animation: none; }
body.deguise .trappe-ds, body.deguise .fan-ds, body.deguise .frenzy-ds { display: none !important; }

/* 🃏 L'ONGLET CARTES REFAIT (29/09/2026, « ça fait moche ») : un en-tête compact, 4 cubes (Collection, Deck, Albums,
   Boutique), les mondes sous un seul filtre, les cartes à trouver repliées, les noms sur 2 lignes (plus de « … »). */
.cartes-entete { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px; margin-bottom: 8px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--p) 16%, var(--panel)), var(--panel)); border: 1.5px solid color-mix(in srgb, var(--p) 35%, transparent); }
@media (min-width: 560px) { .cartes-entete { grid-template-columns: 1fr 1.25fr; align-items: center; } .ce-note { grid-column: 1 / -1; } }
.ce-compte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ce-nb { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1rem; }
.ce-nb b { font-weight: 400; font-size: 1.7rem; color: var(--gold); }
.ce-barre { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.ce-barre i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--p), var(--gold)); }
.ce-compte small { font-size: .68rem; font-weight: 800; opacity: .75; }
.cartes-entete .cartes-stock { gap: 6px; }
.cartes-entete .stock { padding: 6px 4px; background: rgba(0, 0, 0, .2); }
.cartes-entete .stock .stock-ic { font-size: 1.1rem; }
.cartes-entete .stock b { font-size: 1.15rem; }
.ce-note { margin: 0; font-size: .7rem; }
.cartes-vues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.cv {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0;
    padding: 7px 2px 6px; border-radius: 14px; cursor: pointer; color: var(--text); white-space: nowrap;
    border: 1.5px solid color-mix(in srgb, var(--p) 30%, transparent); background: var(--doux);
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .82rem; opacity: .75; transition: opacity .15s;
}
.cv:hover { opacity: .95; }
.cv.actif { opacity: 1; background: linear-gradient(135deg, var(--p), var(--s)); color: #000; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--p) 40%, transparent); }
.cv-ic { font-size: 1.25rem; line-height: 1.1; }
.cv-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cv small { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .6rem; letter-spacing: 0; opacity: .75; }
.cv .pastille { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: #000; font: 900 .68rem/18px 'Nunito', sans-serif; font-style: normal; }
.filtre small { font-size: .62rem; font-weight: 900; opacity: .6; }
.mondes-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; margin: 0 0 8px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.mc { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; min-width: 0; padding: 5px 7px; border-radius: 10px; cursor: pointer; text-align: left;
    font: inherit; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--mc) 40%, transparent); background: color-mix(in srgb, var(--mc) 10%, var(--panel)); }
.mc span { grid-row: 1 / 3; font-size: 1.2rem; }
.mc b { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc small { font-size: .6rem; font-weight: 800; opacity: .7; }
.mc.actif { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 28%, var(--panel)); box-shadow: 0 0 0 1px var(--mc); }
.tcarte-nom { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .76rem; line-height: 1.05; }
.cartes-manquantes { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 8px; padding: 10px; border-radius: 12px; cursor: pointer;
    border: 1.5px dashed color-mix(in srgb, var(--text) 30%, transparent); background: rgba(0, 0, 0, .18); color: var(--text);
    font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .95rem; }
.cartes-manquantes small { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .7rem; letter-spacing: 0; opacity: .7; }
.grille-cartes.manquantes { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.grille-cartes.manquantes .tcarte-nom, .grille-cartes.manquantes .tcarte-jeu, .grille-cartes.manquantes .tcarte-rar { font-size: .55rem; }
.vide-cartes { text-align: center; padding: 18px 8px; }
.album-choisi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.album-choisi .filtre { margin-left: auto; }
.cartes-aide { margin-top: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.cartes-aide summary { cursor: pointer; font-weight: 900; font-size: .8rem; list-style: none; }
.cartes-aide summary::-webkit-details-marker { display: none; }
.cartes-aide .note { margin: 6px 0 0; }
/* 📱 sur téléphone : les 7 filtres en petite grille (2 lignes), les raretés sur une seule ligne qui défile */
.filtres-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; }
.filtres-cartes .filtre { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; padding: 5px 3px; border-radius: 11px; white-space: nowrap; font-size: .7rem; }
.filtres-cartes .filtre span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; letter-spacing: -.1px; }
.filtres-cartes .filtre small { font-size: .6rem; }
#volet-team .raretes-barre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#volet-team .raretes-barre::-webkit-scrollbar { display: none; }
#volet-team .rarete-puce { flex: 0 0 auto; }

/* 🏆 LE MONDE FUZEIII (29/09/2026) : orange et vert, un sol de blocs derrière le trophée ; le diamant qui brille dans
   la roche. ⚠️ Épilepsie : le diamant apparaît en fondu, il ne clignote pas. */
.fuze-mode { --p: #ff7a1a; --s: #3ddc84; --bg: #10140c; --gold: #ffd23f; --panel: #1b2214; --text: #f4fff0; --accent: #3ddc84; }
body.mode-fuze #zone-clic { background: radial-gradient(circle at 50% 40%, rgba(255, 122, 26, .22), transparent 55%),
    linear-gradient(transparent 72%, #6b4226 72%, #6b4226 76%, #4a3020 76%), linear-gradient(#1f3a1a, #10140c 72%); }
.diamant-fz { position: absolute; z-index: 7; width: 70px; height: 70px; border: 3px solid #1b1030; border-radius: 12px; background: #6c757d; font-size: 38px; line-height: 1;
    cursor: pointer; box-shadow: inset 0 0 0 4px #8d99ae, 0 6px 0 #343a40; animation: apparaitDS .4s ease-out; }
body.photosensible .diamant-fz { animation: none; }
body.deguise .diamant-fz { display: none !important; }

/* 🌀 LE MONDE FUSION (29/09/2026) : l'histoire du jeu, la roue des mondes et Douza des Mondes (48-fusion.js).
   ⚠️ Épilepsie : la lueur change de couleur en fondu (1 s), l'orbite tourne lentement (40 s), la cinématique est un
   mouvement lent ; en mode photosensible, rien de tout ça. */
.fusion-mode { --p: #b388ff; --s: #4cc9f0; --bg: #0a0618; --gold: #ffd23f; --panel: #170f2e; --text: #f3efff; --accent: #4cc9f0; }
body.mode-fusion #zone-clic { background: radial-gradient(circle at 50% 42%, rgba(179, 136, 255, .24), transparent 58%), radial-gradient(circle at 18% 82%, rgba(76, 201, 240, .14), transparent 40%),
    radial-gradient(circle at 82% 18%, rgba(255, 93, 143, .14), transparent 40%), linear-gradient(#1a0f33, #0a0618); }
body.mode-fusion #avatar { filter: drop-shadow(0 0 24px var(--fu, #b388ff)); transition: filter 1s; }
.fusion-bandeau { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, #b388ff 22%, var(--panel)), color-mix(in srgb, #4cc9f0 12%, var(--panel))); border: 1.5px solid color-mix(in srgb, #b388ff 55%, transparent); }
.fusion-bandeau.verrou { opacity: .75; filter: saturate(.6); }
.fb-haut { display: flex; align-items: center; gap: 10px; }
.fb-haut .fb-ic { font-size: 1.9rem; line-height: 1; }
.fb-haut b { display: block; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.15rem; color: var(--gold); }
.fb-haut small, .fusion-bandeau > small { font-size: .7rem; font-weight: 800; opacity: .8; }
.fb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-actions .btn { flex: 1 1 auto; }
.cf-barre { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.cf-barre i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #4cc9f0, #b388ff, #ffd23f); }
.chapitre-fusion { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.cf-num { font-weight: 900; font-size: .75rem; opacity: .7; letter-spacing: 1px; }
.chapitre-fusion h2 { margin: 0; }
.cf-texte { font-size: .95rem; line-height: 1.55; margin: 4px 0; }
.chapitre-fusion small { font-size: .72rem; font-weight: 800; opacity: .8; }
.appel-boss { position: absolute; z-index: 8; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; cursor: pointer; white-space: nowrap;
    border: 2px solid #1b1030; background: linear-gradient(135deg, #ff2e63, #9d0208); color: #fff; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1rem;
    box-shadow: 0 5px 0 #1b1030; animation: apparaitDS .4s ease-out; }
.boss-fusion { position: absolute; z-index: 6; top: 6px; left: 50%; transform: translateX(-50%); width: min(94%, 360px); display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 10px; border-radius: 14px; background: rgba(10, 6, 24, .72); border: 2px solid #ff2e63; pointer-events: none; transition: opacity .6s; }
.boss-fusion.part { opacity: 0; }
.bf-haut { display: flex; justify-content: space-between; align-items: center; width: 100%; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: #fff; }
.bf-haut .bf-temps { color: var(--gold); }
.bf-vie { width: 100%; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bf-vie i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ff2e63, #ff9f1c); transition: width .15s; }
.bf-corps { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.bf-douza svg { width: 84px; height: auto; display: block; }
.bf-orbite { position: absolute; inset: 0; animation: tourneBF 40s linear infinite; }
.bf-orbite span { position: absolute; left: 50%; top: 50%; font-size: 1rem; line-height: 1; transform: translate(-50%, -50%) rotate(var(--a)) translate(66px) rotate(calc(-1 * var(--a))); transition: opacity .8s; }
.bf-orbite span.recrache { opacity: 0; }
@keyframes tourneBF { to { transform: rotate(360deg); } }
.bf-aide { font-size: .68rem; font-weight: 800; color: #fff; opacity: .85; }
.fusion-cine { position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; }
.fc-e { position: absolute; transform: translate(-50%, -50%); font-size: 1.5rem; animation: convergeFU 1.6s ease-in var(--d, 0s) forwards; }
@keyframes convergeFU { to { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.fc-final { text-align: center; animation: arriveFU 1s ease-out 1.8s both; }   /* visible par défaut : si les animations sont coupées, le texte est là */
.fc-final img { width: 140px; height: 140px; display: block; margin: 0 auto 6px; }
.fc-final h2 { margin: 0 0 6px; }
.fc-gain { font-weight: 900; color: var(--gold); }
@keyframes arriveFU { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.fusion-cine.doux .fc-final { opacity: 1; animation: none; }
body.photosensible .bf-orbite, body.photosensible .appel-boss { animation: none; }
body.photosensible.mode-fusion #avatar { transition: none; }
body.deguise .boss-fusion, body.deguise .appel-boss { display: none !important; }

/* 🎉 LA FÊTE DE LA VICTOIRE (29/09/2026) : toute la Team autour d'Algator37, Douza en cage, les ballons (49-fete.js).
   ⚠️ Épilepsie : la foule se balance doucement (3 s), les ballons montent lentement (8 s) ; rien ne clignote ;
   en mode photosensible, rien ne bouge. */
.fete-mode { --p: #ffd23f; --s: #ff006e; --bg: #1a0a2e; --gold: #ffd23f; --panel: #2a1245; --text: #fff8e8; --accent: #ff006e; }
body.mode-fete #zone-clic { background: radial-gradient(circle at 50% 45%, rgba(255, 210, 63, .28), transparent 55%), radial-gradient(circle at 15% 20%, rgba(255, 0, 110, .18), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(58, 134, 255, .18), transparent 40%), linear-gradient(#3a0ca3, #1a0a2e); }
body.mode-fete #avatar-btn { position: relative; z-index: 3; }
body.mode-fete #avatar { filter: drop-shadow(0 0 22px #ffd23f); }
.fete-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fete-banniere { position: absolute; top: 4px; left: 0; right: 0; text-align: center; }
.fete-fanions { display: flex; justify-content: center; gap: 2px; }
.fete-fanions i { width: 22px; height: 16px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fete-banniere b { display: inline-block; margin-top: 2px; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 2px; font-size: 1.35rem; color: #ffd23f;
    text-shadow: 0 2px 0 #1b1030, 0 0 12px rgba(255, 210, 63, .5); }
.fete-foule { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.fete-foule .fp { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1.2rem; background: #2a1245;
    border: 2px solid #ffd23f; box-shadow: 0 3px 6px rgba(0, 0, 0, .4); animation: balanceFE 3s ease-in-out var(--d, 0s) infinite; transition: transform .3s; }
.fete-foule .fp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fete-foule .fp.ombre { background: #0d0618; border-color: #5a4a78; color: #8a7aa8; font-family: 'Bangers', 'Impact', sans-serif; }
.fete-foule .fp.parle { transform: translateY(-8px) scale(1.25); }
@keyframes balanceFE { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.fete-cage { position: absolute; z-index: 4; left: 6px; bottom: 50px; width: 64px; height: 70px; padding: 0; border: 0; background: none; cursor: pointer; }
.fete-cage .fc-douza svg { width: 56px; height: auto; display: block; margin: 8px auto 0; }
.fete-cage .fc-barreaux { position: absolute; inset: 0; border-radius: 8px; border-top: 5px solid #6c757d; border-bottom: 5px solid #6c757d;
    background: repeating-linear-gradient(90deg, transparent 0 10px, #adb5bd 10px 13px); }
.fete-photo-btn { position: absolute; z-index: 4; right: 8px; bottom: 54px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #1b1030; background: #ffd23f;
    font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 0 #1b1030; }
.ballon-fe { position: absolute; z-index: 5; bottom: -60px; width: 54px; height: 64px; padding: 0; border: 0; background: none; font-size: 46px; line-height: 1; cursor: pointer; transition: bottom 8s linear; }
.ballon-fe.monte { bottom: calc(100% + 10px); }
body.photosensible .fete-foule .fp { animation: none; }
body.photosensible .ballon-fe { transition: none; bottom: 40%; }
body.deguise .fete-scene, body.deguise .fete-cage, body.deguise .fete-photo-btn, body.deguise .ballon-fe { display: none !important; }

/* 🌱 LE DÉMARRAGE FAÇON COOKIE CLICKER (29/09/2026, 50-demarrage.js) : un nouveau joueur commence avec le perso,
   les likes, le combo et le Studio ; le reste apparaît petit à petit. body.cache-<étape> cache ce qui n'est pas là. */
body.cache-projets [data-demarrage~="projets"], body.cache-radio [data-demarrage~="radio"], body.cache-amelios [data-demarrage~="amelios"],
body.cache-codes [data-demarrage~="codes"], body.cache-mult [data-demarrage~="mult"], body.cache-team [data-demarrage~="team"],
body.cache-quantites [data-demarrage~="quantites"], body.cache-progres [data-demarrage~="progres"], body.cache-bsp [data-demarrage~="bsp"],
body.cache-infos [data-demarrage~="infos"], body.cache-activites [data-demarrage~="activites"], body.cache-bourse [data-demarrage~="bourse"],
body.cache-infos #liste-studio .gerard { display: none !important; }
/* les onglets qui restent se partagent la largeur (au lieu de laisser des trous) */
body.demarrage .familles, body.demarrage .onglets-icones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* sur PC, sans la colonne Empire : deux colonnes centrées */
@media (min-width: 1181px) { body.cache-team #jeu { grid-template-columns: minmax(330px, 1fr) minmax(330px, 1fr); max-width: 1100px; } }

/* 🎯 la barre « prochain objectif » (sous les likes ; mise à jour sur place, rien ne clignote) */
.objectif { display: block; width: 100%; margin: 6px 0 2px; padding: 6px 10px; border-radius: 10px; cursor: pointer; text-align: center;
    font: 800 .76rem 'Nunito', sans-serif; color: var(--text); background: color-mix(in srgb, var(--p) 12%, transparent); border: 1.5px dashed color-mix(in srgb, var(--p) 45%, transparent);
    line-height: 1.35; }
.objectif.pret { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
body.deguise .objectif { display: none !important; }

/* 🗝️ LES CLÉS D'INDICE (51-indices.js) : les « ? » de l'onglet 🌍 Mondes donnent des indices */
.indices-ligne { margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; font-size: .74rem; font-weight: 800; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.tuile-monde.cachee.indice { opacity: 1; border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: color-mix(in srgb, var(--gold) 9%, rgba(0, 0, 0, .25)); font-size: 1.5rem; font-weight: 900; }   /* un « ? » qu on peut toucher ne doit PAS avoir l air éteint */
.tuile-monde.cachee.indice:hover { border-color: var(--gold); }
.tuile-monde.indice { cursor: pointer; border-style: dashed; font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tuile-monde.indice.vu { border-color: var(--gold); font-size: 1.3rem; }
.tuile-monde.indice small { font-size: .5rem; line-height: 1; }
.indices-monde { text-align: left; line-height: 1.6; }
.code-trous { font-family: 'Courier New', monospace; letter-spacing: 1px; color: var(--gold); white-space: pre; }
/* 📤 MA JOURNÉE (52-journee.js) */
.journee-carte { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1.5px solid color-mix(in srgb, var(--p) 35%, transparent); }
.journee-carte pre { margin: 0; font: 700 .78rem/1.5 'Nunito', sans-serif; white-space: pre-wrap; }
.journee-texte { width: 100%; font: 700 .85rem/1.5 'Nunito', sans-serif; }
/* 📈 LA RÉTENTION (État-Major, 15-admin.js) */
.ret-lignes { display: flex; flex-direction: column; gap: 6px; }
.ret-ligne { display: grid; grid-template-columns: 130px 1fr 44px 44px; align-items: center; gap: 8px; font-size: .8rem; }
.ret-ligne small { opacity: .7; text-align: right; }
.ret-barre { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ret-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--p), var(--gold)); }

/* 🥊 BANGER BOXE (53-boxe.js, d'après son mini-jeu) : le ring, le sac, sa photo en garde, la boutique de boxe.
   ⚠️ Épilepsie : l'éclat « POW ! » est petit et translucide ; en mode photosensible, pas d'éclat ni de secousse. */
.boxe { --sac-clair: #ff5a6e; --sac-fonce: #8e0f24; }
.bx-haut { display: flex; align-items: center; gap: 12px; }
.bx-round { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1.2rem; color: var(--gold); white-space: nowrap; line-height: 1.1; }
.bx-round small { display: block; font: 800 .7rem 'Nunito', sans-serif; letter-spacing: 0; opacity: .7; color: var(--text); }
.bx-pv { position: relative; flex: 1; height: 22px; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1.5px solid var(--ligne); overflow: hidden; }
.bx-pv i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #ff3b4f, #ff8a3d 60%, #ffd700); transition: width .12s ease-out; }
.bx-pv span { position: relative; display: block; text-align: center; font-weight: 900; font-size: .74rem; line-height: 19px; text-shadow: 0 1px 2px #000; }
.boxe.beton .bx-pv i { background: linear-gradient(90deg, #77778a, #d8d8e0); }
.boxe.beton .bx-round { color: #d8d8e0; }
.bx-ring { --h: clamp(250px, 42vh, 360px); position: relative; display: block; width: 100%; height: var(--h); margin: 10px 0; padding: 0; cursor: pointer; border: 2px solid rgba(255, 46, 154, .35); border-radius: 18px; overflow: hidden;
    background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(255, 215, 0, .17), transparent 70%), linear-gradient(180deg, #1b0426 0%, #10021a 72%, #2a0838 72%, #170320 100%);
    touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bx-cordes { position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background: linear-gradient(90deg, #ff2e9a, #b026ff) 0 44% / 100% 5px no-repeat, linear-gradient(90deg, #ff2e9a, #b026ff) 0 56% / 100% 5px no-repeat, linear-gradient(90deg, #ff2e9a, #b026ff) 0 68% / 100% 5px no-repeat; }
.bx-sac-wrap { position: absolute; top: 0; left: max(4%, calc(100% + 20px - var(--h) * .95)); height: 80%; aspect-ratio: 120 / 300; z-index: 1; }   /* juste devant son poing */
.bx-sac { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 0; }
.bx-clair { stop-color: var(--sac-clair); }
.bx-fonce { stop-color: var(--sac-fonce); }
.bx-marque { font: 400 22px 'Bangers', 'Impact', sans-serif; fill: #ffd700; letter-spacing: 1px; }
.bx-fissures { display: none; }
.boxe.beton .bx-fissures { display: inline; }
.bx-champion { position: absolute; right: -20px; bottom: 0; height: 94%; width: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35));
    scale: -1 1; }   /* 01/10/2026 : « le perso est du mauvais sens » → retourné, il regarde le sac (à gauche) */
.bx-effets { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bx-astuce { position: absolute; left: 50%; bottom: 10px; z-index: 4; transform: translateX(-50%); font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: .95rem; white-space: nowrap;
    padding: 5px 13px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #ffd700; }
.bx-flottant { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.4rem; letter-spacing: 1px; color: #39ff6a;
    text-shadow: 0 2px 0 #000; animation: bxMonte .9s ease-out forwards; }
.bx-flottant.crit { color: #ffd700; font-size: 1.9rem; }
@keyframes bxMonte { from { transform: translate(-50%, -50%) scale(.8); opacity: 1; } to { transform: translate(-50%, -50%) translateY(-70px) scale(1.1); opacity: 0; } }
.bx-boum { position: absolute; width: 70px; height: 70px; display: grid; place-items: center; font-family: 'Bangers', 'Impact', sans-serif; font-size: 1rem; letter-spacing: 1px; color: #1a0020;
    background: rgba(255, 215, 0, .75); clip-path: polygon(50% 0, 61% 30%, 95% 18%, 72% 48%, 100% 70%, 64% 68%, 58% 100%, 44% 72%, 8% 92%, 28% 60%, 0 36%, 34% 34%);
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: bxBoum .38s ease-out forwards; }
.bx-boum.crit { width: 100px; height: 100px; background: linear-gradient(135deg, rgba(255, 215, 0, .8), rgba(255, 46, 154, .8)); color: #fff; text-shadow: 0 1px 0 #000; }
@keyframes bxBoum { 0% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.4); opacity: .9; } 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); opacity: 0; } }
.bx-ko { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-4deg); white-space: nowrap; font-family: 'Bangers', 'Impact', sans-serif; font-size: clamp(2.6rem, 10vw, 4.4rem);
    letter-spacing: 4px; color: #ffd700; text-shadow: 4px 4px 0 #ff2e9a; animation: bxKo 1.1s ease-out forwards; }
@keyframes bxKo { 0% { transform: translate(-50%, -50%) scale(1.6) rotate(-6deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -60%) rotate(-4deg); opacity: 0; } }
.bx-combo { display: flex; align-items: center; gap: 10px; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; color: #ff2e9a; }
.bx-combo > span:first-child { min-width: 13ch; white-space: nowrap; }
.bx-barre { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bx-barre i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b026ff, #ff2e9a); }
.bx-titre { margin-top: 10px; font-weight: 900; }
.bx-titre small { display: block; font-weight: 700; opacity: .7; font-size: .74rem; }
.bx-boutique { display: flex; flex-direction: column; gap: 7px; }
.bx-amelio { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 13px; cursor: pointer;
    font: inherit; color: var(--text); border: 1.5px solid var(--ligne); background: var(--doux); opacity: .6; }
.bx-amelio.pret { opacity: 1; border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.bx-ico { font-size: 1.4rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(0, 0, 0, .35); }
.bx-amelio b { display: block; font-size: .9rem; }
.bx-amelio small { display: block; font-size: .72rem; opacity: .75; line-height: 1.3; }
.bx-cote { text-align: right; }
.bx-cote b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-weight: 400; font-size: 1.1rem; color: var(--gold); white-space: nowrap; }
.bx-stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0 0; font-size: .84rem; }
.bx-stats dt { opacity: .7; font-weight: 700; }
.bx-stats dd { margin: 0; font-weight: 900; text-align: right; }
body.photosensible .bx-boum { display: none; }
body.photosensible .bx-flottant, body.photosensible .bx-ko { animation-name: bxFondu; }
@keyframes bxFondu { from { opacity: 1; } to { opacity: 0; } }

/* ♾️ LES AMÉLIORATIONS INFINIES (30/09/2026, en haut de ⬆️ Améliorations) : un liseré doré, rien qui clignote */
.article.infini { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 10%, var(--panel)), var(--panel)); }
.article.infini .art-icone { font-size: 1.6rem; }
.article.infini .art-prod { color: var(--gold); }

/* 🖊️ LE MONDE BIC CRISTAL (30/09/2026) : l'encre bleue sur une page de cahier (les lignes et la marge rouge derrière le stylo) ;
   le capuchon tombé sous la table. ⚠️ Épilepsie : il apparaît en glissant doucement, rien ne clignote. */
.bic-mode { --p: #1e5bff; --s: #9fd8ff; --bg: #0a1330; --gold: #ffd23f; --panel: #111c44; --text: #f2f6ff; --accent: #ff5d73; }
body.mode-bic #zone-clic { background: radial-gradient(circle at 50% 42%, rgba(30, 91, 255, .26), transparent 58%),
    linear-gradient(90deg, transparent 14%, rgba(255, 93, 115, .35) 14%, rgba(255, 93, 115, .35) calc(14% + 2px), transparent calc(14% + 2px)),
    repeating-linear-gradient(transparent 0 27px, rgba(159, 216, 255, .16) 27px 28px), linear-gradient(#142158, #0a1330); }
.capuchon-bic { position: absolute; z-index: 7; width: 76px; height: 88px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.capuchon-bic svg { display: block; margin: auto; transform: rotate(var(--r, 0deg)); }
body.photosensible .capuchon-bic { animation: none; }
body.deguise .capuchon-bic { display: none !important; }

/* 🤖 LE 50ᵉ MONDE, CLAUDE (30/09/2026) : un terminal orange et crème, des lignes de code en fond ; le bug qui se
   promène. ⚠️ Épilepsie : le bug marche lentement (8 s d'un bord à l'autre), rien ne clignote ; photosensible = immobile. */
.claudeia-mode { --p: #d97757; --s: #f4e9dc; --bg: #1a1210; --gold: #ffd23f; --panel: #2a1d19; --text: #fbf4ec; --accent: #f4e9dc; }
body.mode-claudeia #zone-clic { background: radial-gradient(circle at 50% 44%, rgba(217, 119, 87, .26), transparent 58%),
    repeating-linear-gradient(transparent 0 22px, rgba(244, 233, 220, .05) 22px 26px, transparent 26px 34px), linear-gradient(#2e1f1a, #1a1210); }
.bug-cl { position: absolute; z-index: 7; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); transition: left 8s linear; }
.bug-cl svg { display: block; margin: auto; transform: rotate(var(--r, 0deg)); }
body.photosensible .bug-cl { transition: none; }
body.deguise .bug-cl { display: none !important; }

/* 🔊🪐 LOOK : le son de clic et ce qui tourne autour (30/09/2026) — des cubes en grille, comme les mondes */
.grille-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; margin-bottom: 6px; }
.tuile-choix { font: inherit; }
.tuile-monde.cachee.tuile-choix { display: flex; flex-direction: column; gap: 2px; font-weight: 900; opacity: .55; }
.tuile-monde.cachee.tuile-choix small { font-size: .56rem; font-weight: 700; line-height: 1.15; text-align: center; padding: 0 4px; }

/* 🪩 LE MODE RAVE (30/09/2026, 54-rave.js) — tout ce qui est fou BOUGE sans clignoter : les lasers balaient
   lentement (6 à 11 s par aller), le perso danse, la boule tourne (aucune couleur qui change toute seule).
   ⚠️ Épilepsie : en mode photosensible, tout est immobile et les éclairs n'existent pas (display: none).
   Les éclairs : derrière le perso, une lueur de couleur à moitié transparente, 2 par seconde au plus (54-rave.js). */
.rave-mode { --p: #ff4dd8; --s: #00e5ff; --bg: #0b0616; --gold: #ffe14d; --panel: #1a0f2e; --text: #fdf4ff; --accent: #00e5ff; }
body.mode-rave #zone-clic { background: linear-gradient(#1f0f3a, #0b0616); }
.rave-lasers { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.rave-lasers::before { content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 42%, rgba(255, 77, 216, .3), transparent 55%), radial-gradient(circle at 18% 82%, rgba(0, 229, 255, .2), transparent 45%),
        radial-gradient(circle at 82% 80%, rgba(157, 123, 255, .22), transparent 45%); }   /* (pas de hue-rotate animé : règle photosensible) */
.rave-laser { position: absolute; top: -12%; left: var(--x); width: 5px; height: 135%; border-radius: 3px; opacity: .45;
    background: linear-gradient(var(--c), transparent 88%); transform-origin: 50% 0; transform: rotate(var(--a));
    animation: raveBalaye 7s ease-in-out infinite alternate; }
@keyframes raveBalaye { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) * -1)); } }
body.mode-rave #avatar { animation: raveDanse .5s ease-in-out infinite alternate; }
@keyframes raveDanse { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7px) rotate(3deg); } }
.rave-eclair { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c, #00e5ff) 55%, transparent), transparent 68%); }
.rave-eclair.parti { animation: raveEclair .38s ease-out; }
@keyframes raveEclair { 0% { opacity: 0; } 30% { opacity: .75; } 100% { opacity: 0; } }
.rave-interrupteur { position: absolute; top: 8px; left: 8px; z-index: 8; padding: 5px 10px; border-radius: 999px; cursor: pointer;
    font: 900 .68rem 'Nunito', sans-serif; color: var(--text); background: rgba(0, 0, 0, .45); border: 1.5px solid color-mix(in srgb, var(--s) 60%, transparent); }
.rave-interrupteur.on { border-color: var(--gold); color: var(--gold); }
.baton-rv { position: absolute; z-index: 7; width: 60px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.baton-rv svg { display: block; margin: auto; transform: rotate(var(--r, 0deg)); }
/* ⚠️ photosensible : rien ne bouge, et AUCUN éclair (même si le réglage « lumières » était resté allumé) */
body.photosensible .rave-eclair, body.photosensible .rave-interrupteur { display: none !important; }
body.photosensible .rave-lasers::before, body.photosensible .rave-laser, body.photosensible.mode-rave #avatar, body.photosensible .baton-rv { animation: none !important; }
body.photosensible .rave-laser { opacity: .22; }
body.deguise .rave-decor, body.deguise .baton-rv { display: none !important; }

/* 🏰 LE MONDE NIORT (01/10/2026) : le ciel, la Sèvre en bas, le Donjon au centre ; la pancarte froissée qui passe.
   ⚠️ Épilepsie : elle apparaît en glissant doucement, rien ne clignote. */
.niort-mode { --p: #2a9d8f; --s: #ffd23f; --bg: #0b1f24; --gold: #ffd23f; --panel: #12303a; --text: #effcfa; --accent: #4cc9f0; }
body.mode-niort #zone-clic { background: linear-gradient(transparent 76%, rgba(42, 157, 143, .55) 76%), radial-gradient(circle at 50% 38%, rgba(76, 201, 240, .22), transparent 58%), linear-gradient(#173f4a, #0b1f24 76%); }
.pancarte-nt { position: absolute; z-index: 7; width: 76px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.pancarte-nt svg { display: block; margin: auto; transform: rotate(var(--r, 0deg)); }
body.photosensible .pancarte-nt { animation: none; }
body.deguise .pancarte-nt { display: none !important; }

/* 🎉 L'EVENT EN COURS, EN HAUT DES QUÊTES (01/10/2026) — avant : un gros bandeau orange et vert tout en haut de l'écran */
.onglet-event { margin-left: 3px; font-size: .9em; }
.ev-quete { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 16px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--p) 16%, var(--panel)), var(--panel)); border: 1.5px solid color-mix(in srgb, var(--p) 45%, transparent); }
.evq-emoji { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.evq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.evq-txt > small { font-size: .74rem; opacity: .8; line-height: 1.3; }
.evq-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.evq-haut b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.15rem; color: var(--gold); }
.evq-temps { font: 800 .72rem 'Nunito', sans-serif; opacity: .75; white-space: nowrap; }
.evq-mission { display: flex; justify-content: space-between; font: 800 .78rem 'Nunito', sans-serif; }
.evq-mission b { color: var(--gold); }
.ev-quete .barre { flex: none; }
.evq-prix { font: 700 .7rem 'Nunito', sans-serif; opacity: .75; }
.evq-detail { align-self: flex-start; padding: 6px 10px; font-size: .72rem; }
@media (max-width: 480px) { .ev-quete { flex-wrap: wrap; } .evq-detail { align-self: auto; margin-left: auto; } }

/* 🎃 HALLOWEEN, POUR DE VRAI (01/10/2026) — « on dirait pas Halloween » : avant, juste un orange et un vert.
   Maintenant : la nuit violette, la pleine lune, des chauves-souris, des toiles d'araignée dans les coins, la brume.
   ⚠️ Épilepsie : tout est FIXE (aucune animation ajoutée ici). Dans un monde, le monde garde ses couleurs. */
body.halloween-event-mode:not([class*="mode-"]) {
    --bg: #0d0614; --panel: #1a0d24; --p: #ff7518; --s: #8338ec; --gold: #ffb703; --green: #7cff4f; --text: #fff4e6; --accent: #8338ec;
    background-image:
        radial-gradient(circle at 93% 17%, #fff3c4 0 30px, rgba(255, 243, 196, .2) 32px, transparent 74px),
        radial-gradient(circle at 10% 100%, rgba(131, 56, 236, .3), transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(255, 117, 24, .16), transparent 45%);
    background-size: auto;
}
body.halloween-event-mode:not([class*="mode-"]) #zone-clic {
    background:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60'%3E%3Cg fill='%23000' fill-opacity='.55'%3E%3Cpath d='M40 30q8-12 16-4 4-8 8 0 8-8 16 4-8-3-11 4-4-3-5 5-1-8-5-5-3-7-11-4z'/%3E%3Cpath transform='translate(150 6) scale(.7)' d='M40 30q8-12 16-4 4-8 8 0 8-8 16 4-8-3-11 4-4-3-5 5-1-8-5-5-3-7-11-4z'/%3E%3Cpath transform='translate(210 20) scale(.9)' d='M40 30q8-12 16-4 4-8 8 0 8-8 16 4-8-3-11 4-4-3-5 5-1-8-5-5-3-7-11-4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 4% / 70% auto,
        linear-gradient(transparent 78%, rgba(200, 190, 255, .12) 90%, rgba(200, 190, 255, .2)),
        radial-gradient(circle at 50% 46%, rgba(255, 117, 24, .32), transparent 55%);
}
body.halloween-event-mode:not([class*="mode-"]) .colonne > .panneau {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M0 0L64 10M0 0L54 34M0 0L34 54M0 0L10 64'/%3E%3Cpath d='M16 3Q12 9 14 14Q9 12 3 16M30 5Q24 17 27 27Q17 24 5 30M46 8Q37 25 41 41Q25 37 8 46'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--s)) 0%, var(--panel) 60%);
    background-repeat: no-repeat; background-size: 70px 70px, auto; background-position: 0 0, 0 0;
    border-color: color-mix(in srgb, var(--p) 30%, transparent);
}
body.halloween-event-mode:not([class*="mode-"]) #avatar { filter: drop-shadow(0 0 20px #ff7518); }
.ev-quete-halloween { background: linear-gradient(135deg, #2b1240, #12071c); border-color: #ff7518; }
.ev-quete-halloween::after { content: ''; position: absolute; right: 0; top: 0; width: 64px; height: 64px; pointer-events: none; transform: scaleX(-1);
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.25' stroke-width='1'%3E%3Cpath d='M0 0L64 10M0 0L54 34M0 0L34 54M0 0L10 64'/%3E%3Cpath d='M16 3Q12 9 14 14Q9 12 3 16M30 5Q24 17 27 27Q17 24 5 30M46 8Q37 25 41 41Q25 37 8 46'/%3E%3C/g%3E%3C/svg%3E") no-repeat; }
.ev-quete-halloween .evq-haut b { color: #ff7518; text-shadow: 0 0 10px rgba(255, 117, 24, .45); }
.ev-quete-halloween .barre > i { background: linear-gradient(90deg, #8338ec, #ff7518); }

/* 🎉 BANGER PARTY (01/10/2026, 56-banger-party.js) : la carte de l'onglet, puis le jeu par-dessus tout l'Empire */
.bp-carte { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 20px; text-align: center;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(176, 38, 255, .28), transparent 70%), linear-gradient(180deg, #240633, #17021f);
    border: 1.5px solid rgba(176, 38, 255, .45); box-shadow: 0 0 30px rgba(176, 38, 255, .18); }
.bp-sur { margin: 0; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: .12em; color: #ffd700; }
.bp-titre { font-family: 'Bangers', 'Impact', sans-serif; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .9; color: #fff; transform: rotate(-3deg);
    text-shadow: 3px 3px 0 #ff2e9a, 6px 6px 0 #b026ff; margin: 4px 0 6px; }
.bp-accroche { margin: 0; color: #dccbea; font-size: .88rem; line-height: 1.45; }
.bp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bp-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.bp-stat small { font-size: .62rem; font-weight: 800; color: #a992bd; }
.bp-stat b { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.4rem; letter-spacing: .04em; color: #ffd700; }
@media (max-width: 420px) { .bp-stats { grid-template-columns: repeat(2, 1fr); } }
#bp-ecran { position: fixed; inset: 0; z-index: 100000; background: #07000d; }
#bp-ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.bp-barre { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 8px; display: flex; gap: 6px; z-index: 2; }
.bp-btn { min-height: 38px; padding: 6px 12px; border-radius: 999px; cursor: pointer; font: 900 .8rem 'Nunito', sans-serif; color: #fff;
    background: rgba(10, 0, 20, .72); border: 1px solid rgba(255, 255, 255, .2); }
@media (max-width: 520px) { .bp-btn span { display: none; } }
body.bp-ouvert { overflow: hidden; }

/* 🐰 LES LAPINS CRÉTINS : L'INVASION (01/10/2026, 57-invasion.js) — le jeu par-dessus tout l'Empire.
   ⚠️ Rien ne clignote : la carte est immobile, seuls les petits textes « +12 🥫 » montent doucement. */
.inv-accueil { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; text-align: center;
    background: linear-gradient(180deg, #ffe66d, #ff9f1c); color: #1b1030; border: 2px solid #1b1030; box-shadow: 0 5px 0 #1b1030; }
.inv-accueil img { max-height: 120px; object-fit: contain; margin: 0 auto; }
.inv-accueil-titre { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.inv-accueil-titre span { font-size: 2.4rem; color: #fff; text-shadow: 3px 3px 0 #1b1030; }
.inv-accueil p { margin: 0; font-size: .86rem; font-weight: 700; }
.inv-accueil .bp-stat { background: rgba(255, 255, 255, .55); border-color: rgba(27, 16, 48, .25); }
.inv-accueil .bp-stat small { color: #5a3d00; } .inv-accueil .bp-stat b { color: #1b1030; }
.inv-accueil .note { color: #3b2a00; }
#inv-ecran { position: fixed; inset: 0; z-index: 100000; display: grid; grid-template-rows: auto 1fr auto; background: #8fd3ff; color: #1b1030; font-family: 'Nunito', sans-serif; }
.inv-hud { display: flex; flex-wrap: wrap; gap: 6px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px; background: #ffe66d; border-bottom: 3px solid #1b1030; }
.inv-r { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 2px solid #1b1030; font-weight: 800; font-size: .85rem; }
.inv-r b { font-size: 1rem; font-weight: 900; } .inv-r small { font-size: .66rem; font-weight: 800; opacity: .7; }
.inv-r.alerte { background: #ffd6d6; }
.inv-niveau { align-items: center; } .inv-xp { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: #eee; overflow: hidden; border: 1px solid #1b1030; }
.inv-xp i { display: block; height: 100%; background: #ff9f1c; }
.inv-scene { position: relative; min-height: 0; overflow: hidden; }
.inv-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.inv-boutons { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.inv-b { min-width: 38px; min-height: 38px; padding: 4px 10px; border-radius: 999px; border: 2px solid #1b1030; background: #fff; font: 900 1rem 'Nunito', sans-serif; cursor: pointer; color: #1b1030; }
.inv-quitter { font-size: .8rem; }
@media (max-width: 560px) { .inv-quitter span { display: none; } }
.inv-message { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: min(92%, 640px); padding: 8px 14px; border-radius: 14px;
    background: rgba(255, 255, 255, .96); border: 2px solid #1b1030; font-weight: 800; font-size: .86rem; text-align: center; box-shadow: 0 4px 0 #1b1030; }
.inv-message.grand { font-size: .95rem; background: #ffe66d; }
.inv-panneau { padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); background: #fff8e1; border-top: 3px solid #1b1030; max-height: 36vh; overflow-y: auto; }
.inv-panneau .btn { width: 100%; }
.inv-panneau .note { color: #3b2a00; margin: 4px 0; }
.inv-titre { display: flex; flex-direction: column; margin-bottom: 6px; } .inv-titre b { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.35rem; letter-spacing: .04em; }
.inv-titre small { font-weight: 800; font-size: .75rem; opacity: .75; }
.inv-barre { height: 10px; border-radius: 99px; background: #eee; border: 2px solid #1b1030; overflow: hidden; margin-bottom: 8px; } .inv-barre i { display: block; height: 100%; background: #ffd23f; }
.inv-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.inv-carte { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 14px; border: 2px solid #1b1030; background: #fff; cursor: pointer; font-family: 'Nunito', sans-serif; color: #1b1030; }
.inv-carte img { height: 40px; } .inv-carte b { font-size: .82rem; } .inv-carte small { font-size: .68rem; font-weight: 700; opacity: .8; }
.inv-carte:disabled { opacity: .45; cursor: default; }
body.inv-ouvert { overflow: hidden; }

/* 🐊🦈 LES DEUX PERSOS DE BANGER PARTY AU CENTRE (01/10/2026, 58-persos.js) : dessinés dans un canvas à la place de la photo */
#avatar-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
body.perso-dessine #avatar-cv { display: block; }
body.perso-dessine #avatar { visibility: hidden; }

/* 🥊 LE SAC BANGER AU CENTRE (01/10/2026, 58-persos.js) : le sac de la Boxe à la place de la photo, et le choix de sa couleur */
#avatar-sac { position: absolute; left: 50%; top: 2%; height: 92%; aspect-ratio: 120 / 300; transform: translateX(-50%); pointer-events: none; display: none; }
#avatar-sac svg { display: block; width: 100%; height: 100%; transform-origin: 50% 0; }
body.perso-sac #avatar-sac { display: block; }
body.perso-sac #avatar { visibility: hidden; }
.sac-couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin: 10px 0; }
.sac-couleur { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .14); color: var(--text); font: 800 .78rem 'Nunito', sans-serif; }
.sac-couleur.actif { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sac-mini { display: block; height: 84px; aspect-ratio: 120 / 300; }
.sac-mini svg { width: 100%; height: 100%; display: block; }

/* 🎨 LE LOOK, EN CARTES (01/10/2026, 09-codes-team.js htmlTeamLook) — « améliore le Look » */
.look-carte { margin: 10px 0; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--p) 10%, var(--panel)), var(--panel));
    border: 1.5px solid color-mix(in srgb, var(--p) 28%, transparent); }
.look-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.look-titre b { font-family: 'Bangers', 'Impact', sans-serif; font-size: 1.2rem; letter-spacing: .05em; color: var(--gold); font-weight: 400; }
.look-titre small { margin-left: auto; font-size: .72rem; font-weight: 800; opacity: .7; }
.look-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--p) 22%, transparent); font-size: 1rem; }
.look-carte .grille-choix { margin-bottom: 0; }
.look-carte .garde-robe { margin: 0; }
.look-carte .note { margin: 6px 0 0; }
.look-petit { font-size: .74rem; opacity: .8; }
.look-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 12px; cursor: pointer;
    background: rgba(0, 0, 0, .22); border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent); color: var(--text); font: 800 .86rem 'Nunito', sans-serif; }
.look-interrupteur b { padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, transparent); font-size: .78rem; }
.look-interrupteur.on { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.look-interrupteur.on b { background: var(--gold); color: #1b1030; }

/* =====================================================================
   🌌 L'ASCENSION ET 💥 L'INFINI (01/10/2026, js/59-ascension.js)
   ⚠️ Rien ne clignote : des couleurs fixes, et des fissures qui se tracent UNE fois, lentement.
   ===================================================================== */
.carte-ascension { border-color: #4cc9f0; background: radial-gradient(circle at 50% 0%, rgba(76, 201, 240, .22), rgba(20, 8, 60, .45) 70%); }
.carte-ascension .ct-titre { color: #8fe3ff; }
.carte-infini { border-color: #ff5d8f; background: radial-gradient(circle at 50% 0%, rgba(255, 93, 143, .18), rgba(12, 4, 24, .55) 70%); }
.carte-infini .ct-titre { color: #ff9ab8; }
.carte-infini .ct-titre small { font-family: 'Nunito', sans-serif; font-size: .8rem; letter-spacing: 0; opacity: .8; }
.barre-infini { height: 12px; margin: 10px 0 6px; }
.barre-infini i { background: linear-gradient(90deg, #4cc9f0, #b026ff, #ff5d8f); }
.boutique-cosmos { margin-bottom: 14px; padding: 10px; border-radius: 18px; border: 2px solid #4cc9f0; background: radial-gradient(circle at 50% 0%, rgba(76, 201, 240, .14), rgba(20, 8, 60, .35) 75%); }
.article-etoiles.cosmos .btn.or { background: linear-gradient(135deg, #4cc9f0, #b026ff); color: #fff; }
.code-telescope { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; padding: 3px 12px; border-radius: 10px; border: 2px dashed #4cc9f0; color: #8fe3ff; user-select: all; }
.modale.modale-infini { background: radial-gradient(circle at 50% 30%, #1a0630, #050008 75%); border-color: #ff5d8f; }
.infini-ecran { text-align: center; }
.infini-titre { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 3px; font-size: clamp(1.7rem, 7vw, 2.6rem); color: #ff9ab8; margin: 4px 0 10px; }
.infini-fissures { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.infini-fissures path { fill: none; stroke: #ff9ab8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 400; stroke-dashoffset: 400; animation: infini-fissure 2.4s ease-out var(--d, 0s) forwards; }
@keyframes infini-fissure { to { stroke-dashoffset: 0; } }
.infini-ecran.calme .infini-fissures path, body.photosensible .infini-fissures path { animation: none; stroke-dashoffset: 0; }

/* 😱 LE SCREAMER (01/10/2026, js/60-screamer.js) — ⚠️ un fond sombre FIXE (il ne change jamais pendant le cri),
   aucune secousse, aucun flash ; il repart en fondu doux */
#screamer { position: fixed; inset: 0; z-index: 2147483000; background: #07000d; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .6s ease; cursor: default; }
#screamer.part { opacity: 0; }
#screamer canvas { width: min(100vw, 177.78vh); height: auto; display: block; }
.screamer-souvenir { display: flex; justify-content: center; margin: 4px 0 8px; }
.screamer-souvenir img { width: min(240px, 70vw); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }

/* 🎬 LE MONDE TRYTOACT (01/10/2026) : les couleurs du site (le violet profond, le texte presque blanc, le doré des
   boutons), une bande de pellicule en bas ; le clap qui passe. ⚠️ Épilepsie : il apparaît en glissant, rien ne clignote. */
.trytoact-mode { --p: #ffb627; --s: #ffd54a; --bg: #1d0a5e; --gold: #ffd54a; --panel: #2a1380; --text: #f4f1ff; --accent: #ff8c1a; }
body.mode-trytoact #zone-clic { background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(244, 241, 255, .55) 10px 18px, transparent 18px 28px) 0 calc(100% - 9px) / 100% 8px no-repeat,
    linear-gradient(transparent calc(100% - 26px), #12063d calc(100% - 26px)),
    radial-gradient(circle at 50% 36%, rgba(255, 213, 74, .18), transparent 58%), linear-gradient(#4a24c9, #3514a5 55%, #1d0a5e); }
.clap-tta { position: absolute; z-index: 7; width: 76px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.clap-tta img { display: block; margin: auto; width: 64px; height: 64px; transform: rotate(var(--r, 0deg)); }
body.photosensible .clap-tta { animation: none; }
body.deguise .clap-tta { display: none !important; }
/* 🎬 TryToAct « comme le site » (01/10/2026) : sa police (Lilita One) partout où le jeu met ses titres, son logo façon BD
   (penché, lettres blanches, gros contour violet-noir en relief), et ses vraies images sur fond violet dans les cartes */
body.mode-trytoact :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .tuile-monde .tm-n,
    .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .btn, .texte-flottant) { font-family: 'Lilita One', 'Bangers', 'Impact', sans-serif; letter-spacing: .3px; }
body.mode-trytoact .logo { font-family: 'Lilita One', 'Bangers', sans-serif; }
body.mode-trytoact .logo .l2 { display: inline-block; color: #fff; transform: rotate(-5deg) skew(-8deg); margin: 2px 4px 4px;
    -webkit-text-stroke: 0; text-shadow:
        -2px -2px 0 #1a1240, 2px -2px 0 #1a1240, -2px 2px 0 #1a1240, 2px 2px 0 #1a1240, 0 -2.5px 0 #1a1240, 0 2.5px 0 #1a1240, -2.5px 0 0 #1a1240, 2.5px 0 0 #1a1240,
        1px 3px 0 #1a1240, 2px 4.5px 0 #1a1240, 3px 6px 0 #1a1240, 4px 7px 1px rgba(0, 0, 0, .4); }
body.mode-trytoact .logo .l3 { display: none; }
body.mode-trytoact .logo .remaster { color: #ffd54a; }
/* les boutons dorés du site (le dégradé jaune → orange, le texte brun foncé) */
body.mode-trytoact .btn.or { background: linear-gradient(#ffe27a 0%, #ffd54a 35%, #ffa726 70%, #ff8c1a 100%); color: #3a2405; }
.tcarte-art.clair img[src^="img/trytoact/"] { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, #6a3df0, #3514a5 70%); object-fit: contain; padding: 4%; }

/* =====================================================================
   🔤 LES 3 MONDES DES POLICES (01/10/2026, 00d MONDES_POLICES · 61-polices.js)
   Chaque monde met SA police sur les titres, le logo, les gros chiffres et les textes qui volent (pas sur les petits
   textes : ils resteraient illisibles). ⚠️ Rien ne clignote : pas de curseur 8 bits qui clignote, pas de néon qui grésille.
   ===================================================================== */
body.mode-sixtyfour :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Sixtyfour', 'Courier New', monospace; letter-spacing: 0; }
body.mode-microbe :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Rubik Microbe', 'Bangers', sans-serif; letter-spacing: .5px; }
body.mode-monoton :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Monoton', 'Bangers', sans-serif; letter-spacing: 1px; font-weight: 400; }
body.mode-sixtyfour .logo .l2 { font-size: .78em; }
body.mode-sixtyfour #likes { font-size: .72em; }

/* 🕹️ Sixtyfour : l'écran bleu du vieil ordinateur, avec son bord plus clair et ses lignes de balayage (fixes) */
.sixtyfour-mode { --p: #a59fe6; --s: #7869c4; --bg: #2a1f6e; --gold: #e8e66f; --panel: #40318d; --text: #d6d3ff; --accent: #7869c4; }
body.mode-sixtyfour #zone-clic { background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, .12) 3px 4px), #40318d; box-shadow: inset 0 0 0 10px #7869c4; }
/* 🦠 Rubik Microbe : la boîte de Petri, verte et ronde */
.microbe-mode { --p: #2ec4b6; --s: #80ed99; --bg: #062925; --gold: #ffd23f; --panel: #0b3d38; --text: #e9fff9; --accent: #80ed99; }
body.mode-microbe #zone-clic { background: radial-gradient(circle at 50% 46%, rgba(184, 242, 230, .35) 0 38%, rgba(46, 196, 182, .25) 39% 41%, transparent 42%),
    radial-gradient(circle at 22% 70%, rgba(128, 237, 153, .2) 0 6%, transparent 7%), radial-gradient(circle at 78% 26%, rgba(128, 237, 153, .18) 0 5%, transparent 6%), linear-gradient(#0e4d45, #062925); }
/* 🪩 Monoton : la rue la nuit, des lignes de néon fixes (aucune animation de lumière) */
.monoton-mode { --p: #ff4fd8; --s: #00e5ff; --bg: #0b0018; --gold: #ffe14d; --panel: #1d0638; --text: #fdf0ff; --accent: #00e5ff; }
body.mode-monoton #zone-clic { background: linear-gradient(transparent 70%, rgba(0, 229, 255, .12) 70% 71%, transparent 71%), linear-gradient(transparent 76%, rgba(255, 79, 216, .14) 76% 77%, transparent 77%),
    radial-gradient(circle at 50% 38%, rgba(255, 79, 216, .2), transparent 58%), linear-gradient(#2a0a52, #0b0018); }
body.mode-monoton .logo .l2 { color: #ff4fd8; text-shadow: 0 0 6px rgba(255, 79, 216, .55); }

/* 🔤 la lettre qui passe, écrite dans la police du monde */
.lettre-pl { position: absolute; z-index: 7; min-width: 64px; height: 64px; padding: 0 10px; border: 0; border-radius: 16px; cursor: pointer;
    font-size: 2.6rem; line-height: 64px; color: var(--text); background: color-mix(in srgb, var(--p) 35%, transparent);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35); transform: rotate(var(--r, 0deg)); animation: apparaitDS .4s ease-out; }
body.photosensible .lettre-pl { animation: none; }
body.deguise .lettre-pl { display: none !important; }

/* 🐱 LE MONDE CHAT (02/10/2026) : chez Harleen, un salon douillet (le parquet, le tapis rond, le rayon de soleil) ;
   la souris en peluche qui passe. ⚠️ Elle glisse doucement, rien ne clignote. */
.chat-mode { --p: #e5989b; --s: #ffb4a2; --bg: #2b2024; --gold: #ffd166; --panel: #3d2c32; --text: #fff4ef; --accent: #c9d36a; }
body.mode-chat #zone-clic { background:
    radial-gradient(ellipse 46% 9% at 50% 86%, rgba(229, 152, 155, .55), transparent 70%),
    linear-gradient(transparent 78%, #6d4c41 78%),
    linear-gradient(115deg, transparent 30%, rgba(255, 209, 102, .16) 30% 46%, transparent 46%),
    linear-gradient(#5a4048, #3d2c32 78%); }
.souris-cha { position: absolute; z-index: 7; width: 78px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.souris-cha svg { display: block; margin: auto; }
body.photosensible .souris-cha { animation: none; }
body.deguise .souris-cha { display: none !important; }

/* 🫧 LE MONDE CIAO KOMBUCHA (02/10/2026) : comme ciaokombucha.com — le brun foncé (#2f2521), le crème (#fcf6ec), les boutons
   blancs au texte brun, le décor de leur page d'accueil (les bouteilles dans l'herbe), le logo « ciao » (img/ciao/logo-ciao.svg).
   Leurs polices sont chargées DEPUIS LEUR SERVEUR (pas de copie sur Neocities) ; si leur serveur refuse, le jeu garde les siennes. */
@font-face { font-family: 'CiaoSalmond'; src: url('https://cdn.prod.website-files.com/696df8a538023aca809d511e/696df8a538023aca809d5164_Salmond%20-%20Bold.woff') format('woff'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'CiaoBlauer'; src: url('https://cdn.prod.website-files.com/696df8a538023aca809d511e/696df8a538023aca809d5168_BlauerNue-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.ciao-mode { --p: #fcf6ec; --s: #fbe863; --bg: #2f2521; --gold: #fbe863; --panel: #3b2f2a; --text: #fcf6ec; --accent: #13ce66; }
body.mode-ciao :is(.bangers, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant, .tcarte-nom, .pilule b) { font-family: 'CiaoSalmond', 'Nunito', sans-serif; font-weight: 700; letter-spacing: 0; }
body.mode-ciao :is(.btn, .onglet, .sous-onglet, .filtre) { font-family: 'CiaoBlauer', 'Nunito', sans-serif; letter-spacing: .2px; }
body.mode-ciao :is(.btn.or, .article.abordable .art-btn) { background: #fff; color: #2f2521; border-radius: 99px; }
body.mode-ciao #zone-clic { background: linear-gradient(rgba(47, 37, 33, .15), rgba(47, 37, 33, .55)), url('../img/ciao/decor.avif') center 60% / cover no-repeat, #5fadde; }
body.mode-ciao .logo .logo-img { max-height: 40px; }
.tcarte-art.clair img[src^="img/ciao/"] { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, #fcf6ec, #fbcf9d 75%); object-fit: contain; padding: 4%; }
.bouteille-ciao { position: absolute; z-index: 7; width: 70px; height: 100px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.bouteille-ciao img { width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--r, 0deg)); }
body.photosensible .bouteille-ciao { animation: none; }
body.deguise .bouteille-ciao { display: none !important; }

/* 🗳️ LES ÉLECTIONS, EN MIEUX (02/10/2026) : les effets du programme en clair, le sondage trié, les anciens maires */
.effets { display: flex; flex-wrap: wrap; gap: 4px; }
.effet { padding: 2px 7px; border-radius: 99px; font: 800 .66rem 'Nunito', sans-serif; border: 1px solid transparent; }
.effet.bon { background: color-mix(in srgb, var(--green) 16%, transparent); border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--green); }
.effet.cout { background: color-mix(in srgb, var(--danger, #ff4d6d) 14%, transparent); border-color: color-mix(in srgb, var(--danger, #ff4d6d) 45%, transparent); color: #ff8fa3; }
.sondage-direct { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1.5px solid var(--ligne); }
.sondage-direct > small { font: 900 .72rem 'Nunito', sans-serif; letter-spacing: .5px; opacity: .8; }
.sd-ligne { display: grid; grid-template-columns: 26px minmax(90px, 140px) 1fr; gap: 8px; align-items: center; }
.sd-rang { text-align: center; font-weight: 900; }
.sd-nom { font: 800 .78rem 'Nunito', sans-serif; line-height: 1.15; overflow-wrap: anywhere; }   /* (pas de « … » : il les déteste) */
.anciens-maires { margin-top: 12px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1.5px solid var(--ligne); }
.anciens-maires summary { cursor: pointer; font-weight: 900; }
.am-ligne { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--ligne); }
.am-ligne small { opacity: .7; margin-left: auto; font-size: .72rem; }
.elu-photo img[src^="img/ciao/"], .elu-photo img[src^="img/trytoact/"], .mairie-tete img[src^="img/ciao/"], .mairie-tete img[src^="img/trytoact/"] { object-fit: contain; background: radial-gradient(circle, #fcf6ec, #fbcf9d); padding: 6%; }   /* l'abeille et le clap, en entier dans leur rond */

/* 🤖 les talents achetés automatiquement (02/10/2026) */
.talents-auto { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; margin: 8px 0; }
.talents-auto .btn { flex: 1; min-width: 200px; }
.talents-auto .look-interrupteur { flex: none; width: auto; margin: 0; }

/* 🏎️ LE MONDE SYLVAIN LEVY (05/10/2026) : le garage (béton gris, bande orange, ligne blanche au sol) ; l'airbag qui passe.
   ⚠️ Il glisse doucement, rien ne clignote. */
.sylvain-mode { --p: #e63946; --s: #f8f9fa; --bg: #16171d; --gold: #ffd166; --panel: #24262f; --text: #f1f3f5; --accent: #e63946; }   /* rouge et blanc, comme le vrai 1000tipla */
body.mode-sylvain #zone-clic { background:
    linear-gradient(transparent 80%, rgba(255, 255, 255, .5) 80% 81%, transparent 81%),
    repeating-linear-gradient(135deg, rgba(255, 183, 3, .08) 0 14px, transparent 14px 28px) 0 0 / 100% 10px no-repeat,
    radial-gradient(circle at 50% 36%, rgba(230, 57, 70, .2), transparent 60%), linear-gradient(#3a3d48, #24262f 80%, #1b1c22); }
.airbag-sl { position: absolute; z-index: 7; width: 72px; height: 72px; padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); animation: apparaitDS .4s ease-out; }
.airbag-sl svg { display: block; margin: auto; }
body.photosensible .airbag-sl { animation: none; }
body.deguise .airbag-sl { display: none !important; }

/* =====================================================================
   🌟 LE POTAGER 2 (05/10/2026, js/32-potager.js) : des dessins à la place des emojis, les mutations (des contours et des
   teintes FIXES, rien ne clignote, rien ne tourne), le panier, la boutique, le marché, le profil.
   ===================================================================== */
.carre-img { position: relative; display: block; width: 74px; height: 74px; }
.carre-img.grand { width: 92px; height: 92px; }
.carre-img svg, .carre-img img { width: 100%; height: 100%; display: block; border-radius: 14px; object-fit: cover; }
.carre-img img.presque { opacity: .8; }
.carre .btn.petit { margin-top: 4px; padding: 4px 10px; font-size: .8rem; }
.carre .herbe { display: inline-flex; align-items: center; gap: 4px; }
.herbe-img { width: 16px; height: 16px; display: inline-block; }
.herbe-img svg { width: 100%; height: 100%; }
.graine-img { width: 64px; height: 64px; display: block; }
.graine-img img, .graine-img svg { width: 100%; height: 100%; border-radius: 12px; display: block; }
/* les badges des mutations : de petits dessins dans une pastille */
.pt-badges { position: absolute; left: 2px; bottom: 2px; display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.pt-badge { width: 20px; height: 20px; border-radius: 50%; background: rgba(16, 0, 43, .78); border: 1.5px solid var(--mc, #fff); display: grid; place-items: center; }
.pt-badge svg { width: 14px; height: 14px; }
/* les mutations sur le dessin : contours et teintes fixes */
.mut-mouille img { box-shadow: inset 0 0 0 3px rgba(76, 201, 240, .6); }
.mut-gele img { filter: saturate(.6) brightness(1.08) hue-rotate(160deg); }
.mut-dore img { filter: sepia(.9) saturate(3) hue-rotate(-12deg) brightness(1.08); }
.mut-arcenciel img { box-shadow: 0 0 0 3px #ff595e, 0 0 0 6px #ffca3a, 0 0 0 9px #8ac926; }
.mut-electrise img { box-shadow: 0 0 0 3px #ffe14d; }
.mut-banger img { box-shadow: 0 0 0 3px #ff006e; }
.mut-divin img { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(255, 210, 63, .7); }
.carre.mure.mut-dore, .carre.mure.mut-divin { border-color: #ffd23f; }
/* l'en-tête : les pièces, le profil, le marché, la météo */
.pt-pieces { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; }
.pt-pieces svg, .pt-valeur svg { width: 18px; height: 18px; vertical-align: middle; }
.potager-haut .btn.petit { padding: 6px 12px; font-size: .9rem; }
.pt-meteo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border-radius: 14px;
    background: color-mix(in srgb, var(--mc) 16%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--mc) 55%, transparent); }
.pt-meteo .pt-badge { width: 34px; height: 34px; flex: none; }
.pt-meteo .pt-badge svg { width: 24px; height: 24px; }
.pt-meteo small { display: block; font-size: .76rem; opacity: .85; }
.pt-effets { color: var(--gold); }
/* le panier */
.pt-panier-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-weight: 800; }
.pt-panier { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pt-case { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 14px; text-align: center;
    background: rgba(255, 255, 255, .04); border: 1.5px solid var(--ligne); }
.pt-case.fav { border-color: var(--gold); }
.pt-case b { font-size: .78rem; line-height: 1.15; }
.pt-case small { font-size: .66rem; opacity: .8; line-height: 1.2; }
.pt-valeur { color: var(--gold); font-weight: 900; opacity: 1 !important; }
.pt-actions { display: flex; gap: 4px; margin-top: 2px; }
.pt-actions button { border: 1.5px solid var(--ligne); background: rgba(0, 0, 0, .25); color: inherit; border-radius: 9px; padding: 3px 7px; cursor: pointer; font-size: .85rem; }
.pt-actions button.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); }
.pt-fruit { position: relative; display: block; width: 64px; height: 64px; }
.pt-fruit.grand { width: 120px; height: 120px; flex: none; }
.pt-fruit img { width: 100%; height: 100%; border-radius: 12px; display: block; object-fit: cover; }
/* la boutique */
.pt-boutique { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pt-article { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 14px; cursor: pointer; font: inherit; color: inherit;
    background: rgba(255, 255, 255, .04); border: 1.5px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.pt-article small { font-size: .72rem; opacity: .8; }
.pt-article span { color: var(--gold); font-weight: 900; }
.pt-article:disabled { opacity: .45; cursor: default; }
/* le marché */
.pt-offres { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.pt-offre { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1.5px solid var(--ligne); }
.pt-offre-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-offre-txt small { font-size: .7rem; opacity: .8; }
.pt-vente { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.pt-vente small { display: block; font-size: .76rem; opacity: .8; }
.pt-choix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; font-weight: 800; }
.pt-choix input[type=number], .pt-choix select { padding: 6px 8px; border-radius: 10px; border: 1.5px solid var(--ligne); background: var(--panel); color: var(--text); font: inherit; }
/* le profil */
.pt-record { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; margin-bottom: 10px;
    background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--gold) 22%, transparent), rgba(0, 0, 0, .2) 70%); border: 1.5px solid color-mix(in srgb, var(--gold) 50%, transparent); }
.pt-record > div { display: flex; flex-direction: column; gap: 3px; }
.pt-record small { font-weight: 900; letter-spacing: .5px; opacity: .8; font-size: .72rem; }
.pt-record b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.4rem; color: var(--gold); }
.pt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pt-stat { padding: 8px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--ligne); }
.pt-stat b { display: block; font-size: 1.05rem; }
.pt-stat small { font-size: .68rem; opacity: .75; }
.pt-muts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pt-mut { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); text-align: center; }
.pt-mut .pt-badge { width: 34px; height: 34px; }
.pt-mut .pt-badge svg { width: 24px; height: 24px; }
.pt-mut small { font-size: .68rem; opacity: .75; }
.pt-mut.pas-vue { opacity: .35; filter: grayscale(1); }
.pt-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.pt-coll { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pt-coll img, .pt-coll svg { width: 64px; height: 64px; border-radius: 10px; }
.pt-coll small { font-size: .64rem; line-height: 1.15; }
.pt-coll.pas-vue { opacity: .4; }

/* =====================================================================
   🌍 LE POTAGER 3 (05/10/2026) : les mondes du potager, les raretés, les 37 mutations, l'encyclopédie, l'animation de récolte
   ⚠️ Épilepsie : AUCUNE animation qui clignote. Les mutations sont des teintes et des contours FIXES ; l'animation de
   récolte grossit une fois doucement puis s'efface (et ne bouge pas du tout en mode photosensible).
   ===================================================================== */
.silhouette { filter: brightness(0) opacity(.5) !important; }
.pt-monde-actuel { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 4px 0 8px; border-radius: 16px; color: var(--text);
    background: linear-gradient(120deg, color-mix(in srgb, var(--b1) 40%, var(--panel, #1b1030)), color-mix(in srgb, var(--b2) 40%, var(--panel, #1b1030))); border: 2px solid var(--b2); border-left-width: 8px; }
.pt-monde-actuel b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.2rem; }
.pt-monde-actuel small { font-size: .76rem; font-weight: 700; opacity: .9; }
.pt-biomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pt-biome { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 14px; cursor: pointer; font: inherit; color: #1b1030;
    background: linear-gradient(160deg, var(--b1), var(--b2)); border: 2px solid rgba(0, 0, 0, .3); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); transition: transform .12s; }
.pt-biome:hover:not(:disabled) { transform: translateY(-2px); }
.pt-biome b { font-size: .78rem; font-weight: 900; background: rgba(255, 255, 255, .85); border-radius: 99px; padding: 0 7px; }
.pt-biome small { font-size: .66rem; font-weight: 800; background: rgba(255, 255, 255, .7); border-radius: 99px; padding: 0 6px; }
.pt-biome.actif { outline: 3px solid var(--gold); outline-offset: 2px; }
.pt-biome:disabled { filter: grayscale(.8); opacity: .55; cursor: default; box-shadow: none; }
/* la rareté : le contour des graines, des cases, des fiches */
.graine[style*="--rc"], .pt-case[style*="--rc"], .pt-fiche { border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.graine-rarete, .pt-fiche-rarete { color: var(--rc); font-weight: 900; opacity: 1 !important; }
.carre-stade { opacity: .65 !important; }
.carre.mure[style*="--rc"] { border-color: var(--rc); }
.carre-img img { object-fit: contain; background: rgba(0, 0, 0, .15); }
.pt-fruit img { object-fit: contain; }
/* 🧬 les 37 mutations : des teintes et des contours fixes (jamais d'animation) */
.mut-geante img { transform: scale(1.06); }
.mut-mini img { transform: scale(.8); }
.mut-brillante img { filter: brightness(1.15) saturate(1.2); box-shadow: 0 0 10px 2px rgba(255, 243, 176, .7); }
.mut-sauvage img { box-shadow: inset 0 0 0 3px #2d6a4f; filter: saturate(1.3); }
.mut-ensablee img { filter: sepia(.6) saturate(1.2); }
.mut-aquatique img { box-shadow: inset 0 0 0 3px #0096c7; filter: hue-rotate(-15deg) saturate(1.2); }
.mut-harleen img { box-shadow: inset 0 0 0 3px #c9b79c; }
.mut-argentee img { filter: grayscale(.85) brightness(1.2) contrast(1.1); box-shadow: 0 0 0 3px #ced4da; }
.mut-cendre img { filter: grayscale(.7) brightness(.8); }
.mut-sombre img { filter: brightness(.65) saturate(1.3) hue-rotate(-20deg); box-shadow: 0 0 0 3px #3c096c; }
.mut-solaire img { box-shadow: 0 0 14px 4px rgba(255, 183, 3, .6); }
.mut-incandescente img { filter: saturate(1.5) hue-rotate(-20deg); box-shadow: 0 0 0 3px #ff6b35, 0 0 14px 3px rgba(255, 107, 53, .5); }
.mut-perliere img { box-shadow: 0 0 0 3px #f8edeb, 0 0 12px 2px rgba(248, 237, 235, .6); }
.mut-neon img { box-shadow: 0 0 0 3px #ff4fd8, 0 0 14px 3px rgba(255, 79, 216, .55); }
.mut-cristallisee img { filter: saturate(.7) brightness(1.15) hue-rotate(180deg); box-shadow: 0 0 0 3px #bde0fe; }
.mut-rgb img { box-shadow: 0 0 0 3px #ff006e, 0 0 0 6px #00f5d4, 0 0 0 9px #4361ee; }
.mut-glitchee img { filter: hue-rotate(90deg) saturate(1.4); box-shadow: 3px 0 0 #f72585, -3px 0 0 #00f5d4; }
.mut-lunaire img { filter: saturate(.5) brightness(1.1); box-shadow: 0 0 14px 3px rgba(224, 225, 221, .6); }
.mut-celeste img { box-shadow: 0 0 0 3px #caf0f8, 0 0 16px 4px rgba(202, 240, 248, .55); }
.mut-corrompue img { filter: hue-rotate(250deg) saturate(1.6) brightness(.85); box-shadow: 0 0 0 3px #7b2cbf; }
.mut-cosmique img { box-shadow: 0 0 0 3px #9d4edd, 0 0 18px 4px rgba(157, 78, 221, .55); }
.mut-obsidienne img { filter: brightness(.45) contrast(1.3); box-shadow: 0 0 0 3px #240046; }
.mut-imperiale img { box-shadow: 0 0 0 3px #ffb703, 0 0 0 6px #7b2cbf; }
.mut-prisme img { box-shadow: 0 0 0 3px #80ffdb, 0 0 0 6px #b388ff, 0 0 0 9px #ffd6a5; }
.mut-void img { filter: invert(.85) hue-rotate(180deg); box-shadow: 0 0 0 3px #10002b, 0 0 0 5px #9d4edd; }
.mut-surcharge img { box-shadow: 0 0 0 3px #ff4800, 0 0 0 6px #ffe14d; }
.mut-dimensionnelle img { box-shadow: 0 0 0 3px #4361ee, 6px 6px 0 2px rgba(67, 97, 238, .5), -6px -6px 0 2px rgba(247, 37, 133, .4); }
.mut-empire img { box-shadow: 0 0 0 3px #7b2cbf, 0 0 0 6px #ffd23f, 0 0 16px 4px rgba(123, 44, 191, .5); }
.mut-infinie img { box-shadow: 0 0 0 3px #ffd23f, 0 0 0 6px #fff, 0 0 20px 6px rgba(255, 210, 63, .6); }
.mut-ultime img { box-shadow: 0 0 0 3px #ff006e, 0 0 0 6px #ffd23f, 0 0 0 9px #7b2cbf, 0 0 24px 6px rgba(255, 0, 110, .5); }
.carre.mure.mut-ultime, .carre.mure.mut-infinie, .carre.mure.mut-empire { border-color: #ffd23f; }
/* 🎉 l'animation de récolte (une fois, lente ; immobile en mode photosensible) */
.pt-anim { position: fixed; inset: 0; z-index: 6500; display: grid; place-items: center; pointer-events: none; padding: 16px; }
.pt-anim > * { grid-area: 1 / 1; }
.pt-anim { overflow: hidden; }
.pt-anim-carte { position: relative; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    max-width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: 18px 22px; border-radius: 22px; background: var(--panel, #1b1030); color: var(--text, #fff);
    border: 3px solid var(--rc); box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 0 6px color-mix(in srgb, var(--rc) 25%, transparent);
    animation: pt-anim-entre .7s ease-out both; }
.pt-anim.part .pt-anim-carte { opacity: 0; transform: translateY(-14px); transition: opacity .6s, transform .6s; }
.pt-anim.part .pt-anim-rayons { opacity: 0; transition: opacity .6s; }
.pt-anim-carte .pt-fruit.grand { width: 130px; height: 130px; margin-bottom: 4px; }
.pt-anim-carte b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.5rem; line-height: 1.1; color: var(--rc); max-width: 100%; overflow-wrap: anywhere; }
.pt-anim-rarete { font-weight: 900; letter-spacing: .6px; font-size: .72rem; opacity: .85; }
.pt-anim-muts { font-weight: 800; font-size: .82rem; color: var(--gold); }
.pt-anim-valeur { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: 1.05rem; color: var(--gold); }
.pt-anim-valeur svg { width: 22px; height: 22px; }
.pt-anim-gain { font-size: .76rem; opacity: .85; }
.pt-anim-recette { margin-top: 4px; padding: 4px 10px; border-radius: 99px; font-weight: 900; font-size: .74rem; background: color-mix(in srgb, var(--gold) 25%, transparent); border: 1.5px solid var(--gold); }
/* les rayons d'une récolte rare : FIXES et doux, ils apparaissent une fois (jamais de rotation ni de clignotement) */
.pt-anim-rayons { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; width: min(560px, 120vw); aspect-ratio: 1; border-radius: 50%; opacity: .5; animation: pt-anim-fondu 1s ease-out both;
    background: radial-gradient(circle, color-mix(in srgb, var(--rc) 50%, transparent) 0 30%, transparent 70%),
        repeating-conic-gradient(color-mix(in srgb, var(--rc) 16%, transparent) 0 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
.pt-anim.rare .pt-anim-carte { border-width: 4px; }
@keyframes pt-anim-entre { from { opacity: 0; transform: scale(.7) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pt-anim-fondu { from { opacity: 0; } to { opacity: .5; } }
.pt-anim.calme .pt-anim-carte, .pt-anim.calme .pt-anim-rayons, body.photosensible .pt-anim-carte, body.photosensible .pt-anim-rayons { animation: none !important; transition: none !important; }
/* 📖 l'encyclopédie */
.pt-encyclo-modale { max-width: 980px; }
.pt-progres { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .82rem; margin-bottom: 6px; }
.pt-progres b { color: var(--gold); }
.pt-barre { height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; margin-bottom: 10px; }
.pt-barre i { display: block; height: 100%; background: linear-gradient(90deg, #52b788, #ffd23f); border-radius: 99px; }
.pt-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pt-page { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 6px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 800; font-size: .8rem;
    color: inherit; background: rgba(255, 255, 255, .05); border: 1.5px solid var(--ligne); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.pt-page small { font-size: .68rem; opacity: .75; }
.pt-page.actif { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.pt-encyclo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pt-fiche { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .04); border: 2px solid var(--ligne); }
.pt-fiche b { font-size: .84rem; line-height: 1.15; }
.pt-fiche small { font-size: .68rem; line-height: 1.25; opacity: .8; }
.pt-fiche.inconnue { border-style: dashed; }
.pt-fiche-img { width: 80px; height: 80px; display: block; }
.pt-fiche-img img, .pt-fiche-img svg { width: 100%; height: 100%; border-radius: 12px; display: block; object-fit: contain; }
.pt-fiche-muts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.pt-recettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pt-recette { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1.5px dashed var(--ligne); }
.pt-recette b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .82rem; }
.pt-recette small { font-size: .7rem; opacity: .8; }
.pt-recette.trouvee { border-style: solid; border-color: var(--gold); }
.pt-recette .pt-badge { display: inline-grid; }
/* 🏅 les badges de collection */
.pt-badge-grand { width: 110px; height: 110px; margin: 0 auto 6px; }
.pt-badge-grand svg { width: 100%; height: 100%; }
.pt-badges-profil { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pt-badge-petit { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pt-badge-petit svg { width: 54px; height: 54px; }
.pt-badge-petit small { font-size: .66rem; font-weight: 800; line-height: 1.15; }
@media (max-width: 560px) {
    .pt-biomes { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .pt-encyclo { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .pt-anim-carte b { font-size: 1.25rem; }
}

/* =====================================================================
   🏁 LE GARAGE DE SYLVAIN (06/10/2026, 63-garage.js) : le drag du 1000tipla, les pièces, le remix, le bateau du klaxon
   ⚠️ Épilepsie : les feux s'allument UNE fois chacun (aucun clignotement) ; le bateau glisse lentement (immobile en photosensible).
   ===================================================================== */
.garage-course { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(0, 0, 0, .25); border: 1.5px solid var(--ligne); margin-bottom: 8px; }
.garage-piste { position: relative; height: 70px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #343a40 0 60%, #212529 60%); }
.garage-route { position: absolute; inset: 0; }
.garage-route::before { content: ''; position: absolute; left: 0; right: 0; top: 58%; border-top: 2px dashed rgba(255, 255, 255, .35); }
.garage-arrivee { position: absolute; right: 4%; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(0deg, #fff 0 8px, #212529 8px 16px); opacity: .85; }
.garage-voiture { position: absolute; left: 0; bottom: 4px; width: 84px; height: 48px; }
.garage-voiture svg { width: 100%; height: 100%; display: block; }
.garage-tableau { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.garage-feux { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #212529; border: 2px solid #1b1030; }
.garage-feux span { width: 22px; height: 22px; border-radius: 50%; background: #3d1a1a; border: 2px solid #1b1030; }
.garage-feux span.rouge { background: #e63946; box-shadow: 0 0 10px rgba(230, 57, 70, .6); }
.garage-feux span.vert { background: #52b788; box-shadow: 0 0 10px rgba(82, 183, 136, .6); }
.garage-tours { width: 100%; max-width: 220px; height: auto; max-height: 150px; }
.garage-chiffres { text-align: right; font-size: .9rem; line-height: 1.4; min-width: 120px; }
.garage-chiffres b { font-size: 1.15rem; color: var(--gold); }
.garage-bouton { font-size: 1.15rem; padding: 16px; touch-action: manipulation; user-select: none; }
.garage-resultat { text-align: center; margin: 0; min-height: 1.3em; line-height: 1.45; }
.garage-medailles { display: flex; gap: 14px; justify-content: center; margin-bottom: 10px; font-size: 1.05rem; }
.garage-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 10px; }
.garage-piece { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 10px 8px; border-radius: 14px; cursor: pointer; font: inherit; color: inherit;
    background: rgba(255, 255, 255, .05); border: 1.5px solid var(--ligne); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.garage-piece:disabled { opacity: .5; cursor: default; }
.garage-piece-ic { font-size: 1.6rem; line-height: 1; }
.garage-piece small { font-size: .7rem; opacity: .8; }
.garage-piece .garage-niv { color: var(--gold); letter-spacing: 2px; opacity: 1; }
.garage-piece span:last-child { color: var(--gold); font-weight: 900; }
.garage-remix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.garage-sous-titre { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; font-size: 1.3rem; color: var(--gold); min-height: 1.4em; }
/* 📯 le bateau du klaxon : il traverse le bas de l'écran en 7 s (on peut le toucher) */
.bateau-sl { position: fixed; bottom: 90px; left: 0; z-index: 2600; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    animation: bateau-sl 7s linear forwards; }
.bateau-sl svg { width: 170px; height: 100px; display: block; }
.bateau-sl b { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 2px; font-size: 1.6rem; color: #ffd166; text-shadow: 0 3px 0 #1b1030; }
.bateau-sl.calme, body.photosensible .bateau-sl { animation: none; left: 50%; transform: translateX(-50%); }
@keyframes bateau-sl { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 20px)); } }
@media (max-width: 560px) {
    .garage-tableau { grid-template-columns: auto 1fr; }
    .garage-chiffres { grid-column: 1 / -1; text-align: center; }
    .bateau-sl svg { width: 130px; height: 76px; }
}

/* =====================================================================
   🔤 LA POLICE CHOISIE DANS 🎨 LOOK (06/10/2026, 09-codes-team.js POLICES_LOOK)
   Sur les titres, le logo, les gros chiffres et les textes qui volent ; les petits textes gardent Nunito (lisibles).
   Un monde qui a SA police la garde (la classe police-… n'est pas mise dedans).
   ===================================================================== */
body.police-trytoact :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .tuile-monde .tm-n, .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .btn, .texte-flottant) { font-family: 'Lilita One', 'Bangers', 'Impact', sans-serif; letter-spacing: .3px; }
body.police-ciao :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .texte-flottant) { font-family: 'CiaoSalmond', 'Nunito', sans-serif; font-weight: 700; letter-spacing: 0; }
body.police-ciao :is(.btn, .onglet, .sous-onglet, .filtre) { font-family: 'CiaoBlauer', 'Nunito', sans-serif; letter-spacing: .2px; }
body.police-sylvain :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .texte-flottant),
body.mode-sylvain :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .texte-flottant) { font-family: 'Racing Sans One', 'Bangers', sans-serif; letter-spacing: .5px; }
body.police-monoton :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Monoton', 'Bangers', sans-serif; letter-spacing: 1px; font-weight: 400; }
body.police-microbe :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Rubik Microbe', 'Bangers', sans-serif; letter-spacing: .5px; }
body.police-sixtyfour :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Sixtyfour', 'Courier New', monospace; letter-spacing: 0; }
body.police-sixtyfour .logo .l2 { font-size: .78em; }
body.police-sixtyfour #likes { font-size: .72em; }
body.police-tungtung :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Rye', 'Bangers', serif; letter-spacing: 1px; }
.tuile-police .tm-n { font-size: 1rem; letter-spacing: .3px; }
/* 🤪 les polices secrètes (codes) : une seule règle, la famille vient de --police-libre (09-codes-team.js) */
body.police-libre :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .texte-flottant) { font-family: var(--police-libre), 'Bangers', sans-serif; letter-spacing: .3px; }

/* =====================================================================
   🥊 LA BOXE 2 (06/10/2026, 53-boxe.js) : rangs, rail des rounds, 9 sacs, 5 coups, paliers de combo, événements, défis,
   chaîne de boxe, boutique en 4 catégories, carrière. Même esprit : violet sombre, magenta, jaune, tout arrondi.
   ⚠️ Épilepsie : les auras sont FIXES, rien ne clignote ; les grands textes grossissent une fois et s'effacent.
   ===================================================================== */
.bx-rang { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.bx-rang-badge { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1.5px; font-size: 1rem; padding: 3px 12px; border-radius: 99px; color: #1a0020;
    background: var(--rc); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.bx-rang small { font-size: .74rem; font-weight: 700; opacity: .8; flex: 1; min-width: 160px; }
/* 🛤️ le rail des rounds */
.bx-rail { margin: 8px 0 2px; }
.bx-cases { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bx-case { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 12px; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: .95rem;
    background: rgba(0, 0, 0, .35); border: 1.5px solid var(--ligne); opacity: .65; }
.bx-case i { font-style: normal; font-size: .9rem; }
.bx-case.fait { opacity: .8; }
.bx-case.actuel { opacity: 1; border-color: #ff2e9a; background: color-mix(in srgb, #ff2e9a 22%, rgba(0, 0, 0, .35)); color: #ffd700; }
.bx-rail small { display: block; text-align: center; margin-top: 4px; font-size: .74rem; font-weight: 800; color: #ffd700; }
/* ⚡ l'événement en cours */
.bx-evt { margin-top: 6px; padding: 6px 12px; border-radius: 12px; text-align: center; font-weight: 900; font-size: .82rem; color: #1a0020;
    background: linear-gradient(90deg, #ffd700, #ff2e9a); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
/* 🎒 les sacs : leurs détails (fixes) */
.bx-eclairs, .bx-facettes, .bx-couronne, .bx-yeux { display: none; }
.boxe.sac-elec .bx-eclairs { display: inline; }
.boxe.sac-cristal .bx-facettes { display: inline; }
.boxe.sac-empereur .bx-couronne, .boxe.sac-boss .bx-couronne { display: inline; }
.boxe.sac-boss .bx-yeux, .boxe.sac-rage .bx-yeux { display: inline; }
.boxe.sac-glitch .bx-sac { filter: drop-shadow(4px 0 0 rgba(255, 0, 110, .55)) drop-shadow(-4px 0 0 rgba(0, 245, 212, .55)); }
.boxe.sac-dore .bx-sac { filter: drop-shadow(0 0 14px rgba(255, 215, 0, .7)); }
.boxe.sac-cristal .bx-sac { opacity: .92; filter: drop-shadow(0 0 10px rgba(189, 224, 254, .6)); }
.boxe.sac-boss .bx-pv i { background: linear-gradient(90deg, #b026ff, #ff2e9a 60%, #ffd700); }
.boxe.sac-boss .bx-round { color: #ff2e9a; }
.boxe.sac-dore .bx-round { color: #ffd700; }
/* 🔥 les auras de combo (fixes) */
.boxe.aura-banger .bx-ring { box-shadow: 0 0 0 3px #ff2e9a, 0 0 26px rgba(255, 46, 154, .45); }
.boxe.aura-legende .bx-ring { box-shadow: 0 0 0 3px #ffd700, 0 0 30px rgba(255, 215, 0, .5); }
.boxe.aura-empereur .bx-ring { box-shadow: 0 0 0 3px #ffd700, 0 0 0 7px #b026ff, 0 0 36px rgba(176, 38, 255, .55); }
.bx-palier { font-size: .76rem; font-weight: 800; opacity: .85; margin-top: 4px; min-height: 1.2em; }
/* 👊 les éclats des coups */
.bx-boum.hook { background: rgba(255, 46, 154, .75); color: #fff; text-shadow: 0 1px 0 #000; }
.bx-boum.uppercut { width: 92px; height: 92px; background: rgba(176, 38, 255, .78); color: #fff; text-shadow: 0 1px 0 #000; }
.bx-boum.cross { background: rgba(255, 138, 61, .78); }
/* les grands textes : K.O., paliers, phases */
.bx-ko.gros { font-size: clamp(2.2rem, 9vw, 4.2rem); color: #fff; text-shadow: 4px 4px 0 #ff2e9a, -2px -2px 0 #b026ff; }
.bx-ko.palier, .bx-ko.phase, .bx-ko.glitch { font-size: clamp(1.4rem, 6vw, 2.2rem); top: 22%; letter-spacing: 2px; }
.bx-ko.phase { color: #ff2e9a; text-shadow: 3px 3px 0 #1a0020; }
.bx-ko.glitch { color: #00f5d4; text-shadow: 3px 0 0 #ff006e; }
/* 🛒 les catégories de la boutique */
.bx-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-bottom: 8px; }
.bx-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 6px; border-radius: 13px; cursor: pointer; font-family: 'Bangers', 'Impact', sans-serif;
    letter-spacing: 1px; font-size: .95rem; color: var(--text); background: rgba(0, 0, 0, .35); border: 1.5px solid var(--ligne); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.bx-cat.actif { color: #1a0020; background: linear-gradient(135deg, #ffd700, #ff8a3d); border-color: #ffd700; }
.bx-cat.verrou { opacity: .45; cursor: default; box-shadow: none; }
.bx-cat small { font: 700 .62rem 'Nunito', sans-serif; letter-spacing: 0; opacity: .8; }
/* 🎯 les défis */
.bx-defis { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.bx-defi { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1.5px solid var(--ligne); font-size: .82rem; font-weight: 800; }
.bx-defi small { font-size: .7rem; opacity: .75; white-space: nowrap; }
.bx-defi.fait { border-color: color-mix(in srgb, #39ff6a 50%, transparent); opacity: .75; }
.bx-defi-barre { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bx-defi-barre i { display: block; height: 100%; background: linear-gradient(90deg, #b026ff, #ff2e9a); }
/* 📸 la chaîne de boxe */
.bx-chaine { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; margin-bottom: 8px; border-radius: 13px; font-size: .78rem; font-weight: 800;
    background: linear-gradient(135deg, rgba(255, 46, 154, .18), rgba(176, 38, 255, .18)); border: 1.5px solid rgba(255, 46, 154, .4); }
.bx-chaine b { width: 100%; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-weight: 400; font-size: 1rem; color: #ffd700; }
.bx-petit { font-size: .76rem; }
/* 📜 la carrière, l'aide */
.bx-carriere, .bx-aide { margin-top: 10px; border-radius: 13px; background: rgba(0, 0, 0, .25); border: 1.5px solid var(--ligne); padding: 8px 12px; }
.bx-carriere summary, .bx-aide summary { cursor: pointer; font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.05rem; color: #ffd700; }
.bx-carriere-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin: 8px 0; }
.bx-carriere-stats span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bx-carriere-stats small { font-size: .68rem; opacity: .75; font-weight: 700; }
.bx-carriere-stats b { font-size: 1rem; }
.bx-titres, .bx-rangs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; }
.bx-titre-c, .bx-rangs span { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 11px; background: rgba(255, 255, 255, .04); border: 1.5px dashed var(--ligne); opacity: .55; }
.bx-titre-c.eu, .bx-rangs span.eu { opacity: 1; border-style: solid; border-color: color-mix(in srgb, var(--rc, #ffd700) 60%, transparent); }
.bx-titre-c small, .bx-rangs small { font-size: .68rem; opacity: .8; }
@media (max-width: 560px) {
    .bx-defi { grid-template-columns: minmax(0, 1fr) 60px; }
    .bx-defi small { grid-column: 1 / -1; }
}

/* =====================================================================
   💻 LE MODE TERMINAL (06/10/2026, 00d MONDES_POLICES) : le hacker des films. Écran noir, texte vert, police VT323.
   ⚠️ Rien ne bouge et rien ne clignote : pas de curseur clignotant, pas de pluie de code ; les lignes de balayage sont fixes.
   ===================================================================== */
.terminal-mode { --p: #39ff6a; --s: #1f8f3a; --bg: #020a04; --gold: #b6ff3b; --panel: #07170c; --text: #c8ffd4; --accent: #39ff6a; --green: #39ff6a; --ligne: rgba(57, 255, 106, .25); }
body.mode-terminal :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant, .tcarte-nom, .pilule b, .btn, .onglet)
    { font-family: 'VT323', Consolas, 'Courier New', monospace; letter-spacing: .5px; font-weight: 400; }
body.mode-terminal #likes { font-size: 1.15em; }
body.mode-terminal #zone-clic { background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, .35) 3px 4px), radial-gradient(ellipse at 50% 40%, #0d2b16, #020a04 75%);
    box-shadow: inset 0 0 0 2px rgba(57, 255, 106, .35), inset 0 0 40px rgba(57, 255, 106, .12); }
body.mode-terminal #zone-clic::after { content: '> connexion établie\A> sudo faire-un-banger\A> ACCÈS AUTORISÉ'; white-space: pre; position: absolute; left: 12px; top: 10px; pointer-events: none;
    font: 15px/1.35 'VT323', Consolas, monospace; color: rgba(57, 255, 106, .45); }
body.mode-terminal .btn.or { background: #39ff6a; color: #020a04; }

/* 🥁 LE MODE TUNG TUNG SAHUR (07/10/2026) : la nuit, le bois, la lune. La rue à réveiller en bas de la zone ;
   le ciel de la rue s'éclaircit en fondu jusqu'à l'aube. Rien ne clignote. */
.tungtung-mode { --p: #d4a373; --s: #6b3f1f; --bg: #0b1026; --gold: #f5e6a8; --panel: #141a36; --text: #f3ead8; --accent: #d4a373; --ligne: rgba(212, 163, 115, .3); }
body.mode-tungtung :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant) { font-family: 'Rye', 'Bangers', serif; letter-spacing: 1px; }
body.mode-tungtung #zone-clic { background: radial-gradient(circle at 84% 18%, rgba(245, 230, 168, .22) 0 28px, transparent 90px),
    radial-gradient(1.5px 1.5px at 12% 30%, #f5e6a8 99%, transparent), radial-gradient(1.5px 1.5px at 40% 22%, #f5e6a8 99%, transparent), radial-gradient(1.5px 1.5px at 66% 36%, #f5e6a8 99%, transparent),
    radial-gradient(1.5px 1.5px at 28% 52%, #f5e6a8 99%, transparent), radial-gradient(1.5px 1.5px at 90% 56%, #f5e6a8 99%, transparent),
    linear-gradient(to bottom, transparent 82%, #4a2c14 82% 84%, #6b3f1f 84%), linear-gradient(#0b1026, #1b2340);
    box-shadow: inset 0 0 0 2px rgba(212, 163, 115, .45); }
.rue-ts { position: absolute; z-index: 6; bottom: 8px; left: 50%; transform: translateX(-50%); width: min(92%, 380px); padding: 6px 8px 8px; border-radius: 12px;
    background: #2a1a0e; box-shadow: inset 0 0 0 2px #6b3f1f, 0 4px 0 rgba(0, 0, 0, .35); overflow: hidden; }
.rue-ts::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#f8b26a, #f5e6a8); opacity: calc(var(--aube, 0) * .35); transition: opacity 1s linear; pointer-events: none; }
.aube-ts { position: relative; height: 10px; margin: 0 4px 6px; border-radius: 5px; background: linear-gradient(90deg, #1b2340, #f8b26a); }
.aube-ts i { position: absolute; top: 50%; left: calc(var(--aube, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: #ffd166; box-shadow: 0 0 0 2px #6b3f1f; transition: left 1s linear; }
.fenetres-ts { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fenetre-ts { position: relative; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.fenetre-ts svg { display: block; width: 100%; height: auto; max-height: 56px; }
.fenetre-ts .vitre, .fenetre-ts .voisin, .fenetre-ts .zzz { transition: fill .8s ease, opacity .8s ease; }
.fenetre-ts.eveillee .vitre { fill: #ffd166; }
.fenetre-ts.eveillee .voisin { opacity: 1; }
.fenetre-ts.eveillee .zzz { opacity: 0; }
.coups-ts { display: flex; justify-content: center; gap: 3px; margin-top: 3px; }
.coups-ts b { width: 6px; height: 6px; border-radius: 50%; background: #4a2c14; box-shadow: inset 0 0 0 1px #d4a373; }
.fenetre-ts:is([data-coups="1"], [data-coups="2"], [data-coups="3"], [data-coups="4"]) .coups-ts b:nth-child(1),
.fenetre-ts:is([data-coups="2"], [data-coups="3"], [data-coups="4"]) .coups-ts b:nth-child(2),
.fenetre-ts:is([data-coups="3"], [data-coups="4"]) .coups-ts b:nth-child(3) { background: #d4a373; }
body.photosensible .aube-ts i, body.photosensible .rue-ts::before { transition: none; }

/* 💃 DOUZA FAIT LA MACARENA (64-macarena.js) : dans un coin, on ne peut pas cliquer dessus. Les bras glissent, rien ne clignote. */
.macarena-douza { position: fixed; left: 8px; bottom: 80px; z-index: 5500; width: clamp(240px, 42vw, 420px); pointer-events: none; }
.macarena-douza svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.macarena-douza .mc-bras, .macarena-douza .mc-corps { transition: transform .35s ease-in-out; }
.macarena-douza .mc-corps { transform-origin: 0 0; }
body.photosensible .macarena-douza .mc-bras, body.photosensible .macarena-douza .mc-corps { transition-duration: .8s; }
body.deguise .macarena-douza { display: none; }

/* 🗺️ LE MODE OPEN WORLD (65-openworld.js) : le clicker disparaît, la ville prend tout l'écran (la radio reste). Rien ne clignote. */
.openworld-mode { --p: #40916c; --s: #2d6a4f; --bg: #1b4332; --gold: #ffd166; --panel: #143326; --text: #f1faee; --accent: #52b788; --ligne: rgba(82, 183, 136, .3); }
body.mode-openworld :is(#entete, #jeu, #nav-mobile, #bandeau-events) { display: none !important; }
#monde-ow { position: fixed; inset: 0; z-index: 2000; background: #5a9e4b; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#monde-ow .ow-carte { position: absolute; inset: 0; display: block; cursor: pointer; }
.ow-hud { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; padding: 8px 14px; border-radius: 16px;
    background: rgba(20, 51, 38, .88); border: 2px solid #52b788; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); pointer-events: none; }
.ow-hud b { font-family: 'Bangers', sans-serif; font-size: 1.6rem; letter-spacing: 1px; line-height: 1.1; }
.ow-hud small { opacity: .85; font-weight: 700; }
.ow-sortir { position: absolute; top: 12px; right: 12px; background: rgba(20, 51, 38, .9) !important; color: #fff !important; border: 2px solid #52b788 !important; }
.ow-mini { position: absolute; left: 12px; bottom: 16px; width: 160px; height: 120px; border-radius: 12px; border: 2px solid #1b1030; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); pointer-events: none; }
.ow-panneau { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 230px); overflow: auto;
    padding: 12px; border-radius: 18px; background: rgba(20, 51, 38, .95); border: 2px solid #ffd166; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); color: #fff; }
.ow-titre { font-family: 'Bangers', sans-serif; font-size: 1.5rem; letter-spacing: 1px; text-align: center; margin-bottom: 8px; color: #ffd166; }
.ow-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.ow-nom { font-weight: 800; }
.ow-nom small { opacity: .7; margin-left: 4px; }
.ow-ligne .btn { flex-shrink: 0; min-width: 110px; }
.ow-ligne .btn:disabled { opacity: .45; }
@media (max-width: 600px) { .ow-mini { width: 112px; height: 84px; bottom: 136px; } .ow-sortir { font-size: .8rem; } }

/* 🤯 LES 15 EVENTS DE FOU (66-events-fous.js) — rien ne clignote : ce qui bouge glisse, ce qui change change en fondu. */
#evf-calque { position: fixed; inset: 0; z-index: 2400; pointer-events: none; overflow: hidden; }
#evf-bandeau { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; pointer-events: none; }
#evf-bandeau[hidden] { display: none; }
#evf-bandeau span { padding: 4px 11px; white-space: nowrap; border-radius: 999px; background: rgba(15, 10, 30, .88); border: 2px solid var(--gold); color: #fff; font-family: 'Bangers', sans-serif; letter-spacing: 1px; font-size: .95rem; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
/* 🃏 Hisoka */
.evf-hisoka { position: absolute; left: -10px; bottom: 90px; width: clamp(90px, 14vw, 150px); opacity: .95; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)); }
.evf-gum { position: absolute; inset: 0; transition: opacity .8s ease-out; }
.evf-gum.part { opacity: 0; }
body.evf-on-hisoka #avatar-btn { translate: var(--evf-tire, 0 0); transition: translate .15s ease-out; }
/* 🕺 Algadanse */
@keyframes evfDanse { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
body.evf-on-algadanse .colonne { animation: evfDanse 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
body.evf-on-algadanse .colonne:nth-child(2n) { animation-delay: -.8s; }
body.evf-on-algadanse #avatar-btn { animation: evfDanse .8s ease-in-out infinite alternate; }
/* 🪞 Miroir */
body.evf-on-miroir :is(#jeu, #entete) { transform: scaleX(-1); }
/* 🐌 Slow motion : l'anneau qui se remplit */
body.evf-on-slowmo #zone-clic { filter: saturate(.6) hue-rotate(-15deg); transition: filter 1s; }
.evf-anneau { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
    background: conic-gradient(rgba(255, 209, 102, .9) var(--p, 0deg), rgba(255, 255, 255, .12) 0); -webkit-mask: radial-gradient(circle, transparent 52px, #000 53px); mask: radial-gradient(circle, transparent 52px, #000 53px); }
.evf-anneau.pret { background: rgba(77, 255, 136, .8); transition: background .3s; }
/* 🧲 Aimant */
.evf-like { position: absolute; left: 0; top: 0; margin: -14px 0 0 -14px; font-size: 26px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
/* ⏱️ Compte à rebours */
.evf-compte { position: absolute; top: 12px; left: 50%; translate: -50% 0; z-index: 8; pointer-events: none; font-family: 'Bangers', sans-serif; font-size: 3.4rem; color: #fff;
    text-shadow: 0 4px 0 #1b1030, 0 0 18px rgba(0, 0, 0, .6); transition: color .3s, scale .3s; }
.evf-compte.zero { color: #4dff88; scale: 1.25; }
/* 📈 Bourse */
.evf-bourse { position: absolute; bottom: 10px; right: 10px; z-index: 8; pointer-events: none; padding: 6px; border-radius: 12px; background: rgba(10, 14, 30, .85); border: 2px solid #4dff88; }
.evf-bourse canvas { display: block; width: 160px; height: 66px; }
.evf-bourse b { position: absolute; left: 10px; top: 4px; font-family: 'Bangers', sans-serif; font-size: 1.3rem; color: #fff; }
/* 🎯 Cible */
.evf-cible { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
    background: radial-gradient(circle, #ff4d6d 0 14%, #fff 14% 32%, #ff4d6d 32% 50%, #fff 50% 68%, #ff4d6d 68% 86%, transparent 86%); opacity: .85; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
/* 🐊 Géant */
body.evf-on-geant #avatar-btn { scale: var(--evf-geant, 1); transition: scale .25s ease-out; z-index: 6; }
/* 🌌 Gravité zéro */
@keyframes evfFlotte { 0% { translate: 0 0; rotate: 0deg; } 50% { translate: 6px -14px; rotate: .8deg; } 100% { translate: -5px 8px; rotate: -.6deg; } }
body.evf-on-gravite .colonne > * { animation: evfFlotte 7s ease-in-out infinite alternate; }
body.evf-on-gravite .colonne > *:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; }
body.evf-on-gravite .colonne > *:nth-child(3n) { animation-duration: 8s; animation-delay: -5s; }
body.evf-on-gravite #entete { animation: evfFlotte 10s ease-in-out infinite alternate; }
/* 🎺 Parade */
.evf-parade { position: absolute; left: 0; width: 64px; height: 64px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: #fff; overflow: hidden; cursor: pointer;
    pointer-events: auto; translate: -80px 0; transition: translate 12s linear; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); }
.evf-parade.marche { translate: calc(100vw + 20px) 0; }
.evf-parade img { width: 100%; height: 100%; object-fit: cover; }
.evf-parade span { font-size: 40px; line-height: 58px; }
/* ✏️ Griffophone */
.evf-dessin { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; cursor: crosshair; touch-action: none; background: rgba(255, 255, 255, .08); }
/* 🎞️ Film muet */
body.evf-on-muet :is(#jeu, #entete, #radio) { filter: grayscale(1) sepia(.35) contrast(1.05); transition: filter 1.2s; }
body.evf-on-muet #evf-calque { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .5)); }
.evf-carton { position: absolute; left: 50%; top: 42%; translate: -50% -50%; padding: 22px 34px; background: #111; border: 3px double #e9e3d5; color: #e9e3d5;
    font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 1.4rem; text-align: center; max-width: 80vw; transition: opacity 1.1s; animation: evfCarton 1.1s ease-out; }
.evf-carton.part { opacity: 0; }
@keyframes evfCarton { from { opacity: 0; } to { opacity: 1; } }
/* 🏁 Course */
.evf-course { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 8; pointer-events: none; padding: 6px 10px; border-radius: 12px; background: rgba(10, 14, 30, .82); border: 2px solid var(--gold); }
.evf-piste { position: relative; height: 30px; border-bottom: 2px dashed rgba(255, 255, 255, .3); }
.evf-piste:last-child { border-bottom: 0; }
.evf-piste::after { content: '🏁'; position: absolute; right: 0; top: 2px; font-size: 20px; }
.evf-piste i { position: absolute; top: 2px; font-style: normal; font-size: 22px; transition: left .2s linear; }
.evf-piste span { position: absolute; left: 34px; top: 7px; font-size: .7rem; font-weight: 900; color: rgba(255, 255, 255, .55); }
/* photosensible : rien ne se balance */
body.photosensible.evf-on-algadanse :is(.colonne, #avatar-btn), body.photosensible.evf-on-gravite :is(.colonne > *, #entete) { animation: none; }

/* 🤯 LES EVENTS DE FOU, 2ᵉ VAGUE (67-events-fous-2.js) — rien ne clignote. */
.evf2-panier { position: absolute; left: 0; top: 0; font-size: 58px; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); }
.evf2-tombe { position: absolute; left: 0; top: 0; font-size: 28px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.evf2-nuit { position: absolute; inset: 0; background: radial-gradient(circle 130px at var(--x, 50%) var(--y, 50%), transparent 0 80%, rgba(0, 0, 0, .94) 100%); }
body.evf-on-loupe #jeu { transform: scale(1.6); transform-origin: var(--evf2-ox, 50%) var(--evf2-oy, 30%); }
body.evf-on-loupe { overflow-x: hidden; }
body.evf-on-envers :is(#jeu, #entete) { transform: rotate(180deg); }
@keyframes evf2Tangue { 0% { rotate: -2.2deg; translate: 0 -4px; } 100% { rotate: 2.2deg; translate: 0 6px; } }
body.evf-on-bateau #jeu { animation: evf2Tangue 6s ease-in-out infinite alternate; transform-origin: 50% 80%; }
.evf2-mer { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: radial-gradient(40px 22px at 40px 0, transparent 95%, rgba(46, 134, 222, .85) 100%) repeat-x 0 0 / 80px 70px, linear-gradient(transparent 20px, rgba(46, 134, 222, .85) 20px); }
.evf2-onde { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border: 4px solid rgba(255, 209, 102, .9); border-radius: 50%; transition: opacity .8s ease-out, scale .8s ease-out; }
.evf2-onde.part { opacity: 0; scale: 1.8; }
.evf2-clone { position: absolute; left: 0; top: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #fff; opacity: .9; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.evf2-clone img { width: 100%; height: 100%; object-fit: cover; }
.evf2-sprint { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 8; pointer-events: none; padding: 6px 10px; border-radius: 12px; background: rgba(10, 14, 30, .85); border: 2px solid #adb5bd; color: #fff; text-align: center; transition: border-color .4s; }
.evf2-sprint b { font-family: 'Bangers', sans-serif; letter-spacing: 1px; font-size: 1.2rem; }
.evf2-sprint i { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: #adb5bd; transition: width .2s linear; }
.evf2-sprint.on { border-color: #4dff88; }
.evf2-sprint.on i { background: #4dff88; }
.evf2-chut { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(10, 14, 30, .85); border: 2px solid #adb5bd; }
.evf2-chut span { font-size: 26px; }
.evf2-chut div { flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.evf2-chut i { display: block; height: 100%; background: #4dff88; transition: background .4s; }
.evf2-chut.danger i { background: #ff6b6b; }
.evf2-tapis { position: absolute; left: 0; right: 0; bottom: 10px; height: 64px; z-index: 8; overflow: hidden; background: repeating-linear-gradient(90deg, #343a40 0 30px, #495057 30px 60px); border-top: 4px solid #212529; border-bottom: 4px solid #212529; }
.evf2-colis { position: absolute; left: 0; top: 6px; width: 50px; height: 50px; padding: 0; border: 0; background: none; font-size: 36px; cursor: pointer; }
.evf2-bonneteau { position: absolute; left: 0; right: 0; bottom: 20px; height: 120px; z-index: 8; }
.evf2-gobelet { position: absolute; bottom: 0; width: 26%; height: 110px; padding: 0; border: 0; background: none; cursor: pointer; transition: left .55s ease-in-out; }
.evf2-gobelet span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 64px; transition: translate .4s; z-index: 1; }
.evf2-gobelet b { position: absolute; left: 0; right: 0; bottom: 6px; font-size: 30px; }
.evf2-gobelet.leve span { translate: 0 -48px; }
.evf2-quiz { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 9; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px; border-radius: 16px; background: rgba(10, 14, 30, .92); border: 2px solid var(--gold); color: #fff; animation: evfCarton .6s ease-out; }
.evf2-quiz b { width: 100%; text-align: center; font-size: 1.05rem; }
.evf2-toile { position: absolute; inset: 0; }
.evf2-pong, .evf2-peinture { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }
.evf2-peinture { z-index: 1; }
body.evf-on-trampoline #avatar-btn { translate: var(--evf2-saut, 0 0); }
body.evf-on-fuite #avatar-btn { translate: var(--evf2-fuite, 0 0); }
.evf2-cochon { position: absolute; right: 16px; bottom: 96px; display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border-radius: 18px; border: 3px solid #ff8fab; background: rgba(255, 240, 243, .95); color: #1b1030; cursor: pointer; pointer-events: auto; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); }
.evf2-cochon span { font-size: 42px; line-height: 1; }
.evf2-cochon b { font-family: 'Bangers', sans-serif; font-size: 1.3rem; }
.evf2-cochon small { font-weight: 900; font-size: .65rem; letter-spacing: 1px; }
.evf2-piano { position: absolute; left: 8px; right: 8px; bottom: 10px; height: 96px; z-index: 9; display: flex; gap: 3px; }
.evf2-piano button { flex: 1; padding: 0 0 8px; border: 2px solid #1b1030; border-radius: 0 0 8px 8px; background: #fff; color: #1b1030; font-weight: 900; font-size: .7rem; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; transition: background .3s; }
.evf2-piano button.suivante { background: #ffd166; }
.evf2-jumeau { position: absolute; width: 100px; height: 100px; margin: -50px 0 0 -100px; padding: 0; border: 4px dashed #fff; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .2); cursor: pointer; pointer-events: auto; }
.evf2-jumeau img { width: 100%; height: 100%; object-fit: cover; scale: -1 1; }
.evf2-ticket { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; z-index: 9; width: 220px; height: 110px; border-radius: 12px; overflow: hidden; border: 3px solid var(--gold); background: #fff8e1; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); }
.evf2-ticket .lot { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Bangers', sans-serif; font-size: 1.4rem; color: #1b1030; }
.evf2-ticket canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; transition: opacity .5s; }
.evf2-ballon { position: absolute; right: 12px; top: 12px; z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.evf2-ballon span { font-size: 48px; transition: scale .15s ease-out; transform-origin: 50% 100%; }
.evf2-tresor { position: absolute; left: 50%; top: 168px; translate: -50% 0; width: min(280px, 80vw); padding: 8px 12px; border-radius: 14px; background: rgba(10, 14, 30, .88); border: 2px solid var(--gold); color: #fff; text-align: center; }
.evf2-tresor b { font-family: 'Bangers', sans-serif; font-size: 1.3rem; letter-spacing: 1px; }
.evf2-tresor div { height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.evf2-tresor i { display: block; height: 100%; background: linear-gradient(90deg, #4cc9f0, #ffd166, #ff4d6d); transition: width .2s; }
body.evf-on-soldes #col-boutique { box-shadow: inset 0 0 0 3px #ff4d6d; border-radius: 18px; }
body.evf-on-soldes #col-boutique::before { content: '🏷️ SOLDES : -50 % SUR TOUT'; display: block; margin: 6px auto 0; width: max-content; padding: 4px 12px; border-radius: 999px; background: #ff4d6d; color: #fff; font-family: 'Bangers', sans-serif; letter-spacing: 1px; }
body.evf-on-vampire #evf-calque { background: radial-gradient(ellipse at center, transparent 60%, rgba(120, 0, 20, .4)); }
@keyframes evf2Cameleon { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
body.evf-on-cameleon :is(#jeu, #entete) { animation: evf2Cameleon 40s linear infinite; }
body.evf-on-aveugle :is(#likes, .entete-stats b, #liste-studio, #liste-projets, #liste-amelios, .gros-chiffre) { filter: blur(7px); }
.evf2-bombe { position: absolute; right: 14px; top: 70px; z-index: 9; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 14px; background: rgba(10, 14, 30, .9); border: 2px solid #ff6b6b; color: #fff; }
.evf2-bombe span { font-size: 38px; }
.evf2-bombe b { font-family: 'Bangers', sans-serif; font-size: 1.2rem; letter-spacing: 1px; }
.evf2-demineur { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 9; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.evf2-demineur button { height: 42px; border-radius: 8px; border: 2px solid #1b1030; background: #adb5bd; font-weight: 900; font-size: 1.1rem; cursor: pointer; transition: background .3s; }
.evf2-demineur button.ok { background: #b7e4c7; }
.evf2-demineur button.bombe { background: #ffb3c1; }
body.photosensible.evf-on-bateau #jeu, body.photosensible.evf-on-cameleon :is(#jeu, #entete) { animation: none; }

/* 🤖 LE JOURNAL DU CLONE (68-clone.js) */
.clone-journal { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: #fff8e1; color: #2b1d0e; text-align: left; border: 2px solid #e0c48c; box-shadow: inset 0 0 0 4px #fff3d6; max-height: 40vh; overflow: auto; }
.clone-titre { font-family: 'Bangers', sans-serif; letter-spacing: 1px; font-size: 1.15rem; color: #8b5a2b; margin-bottom: 6px; text-align: center; }
.clone-journal p { margin: 5px 0; font-family: Georgia, 'Times New Roman', serif; font-size: .92rem; line-height: 1.35; }
.clone-journal p b { font-family: 'Nunito', sans-serif; font-size: .75rem; color: #8b5a2b; margin-right: 4px; }
.clone-journal .clone-canape { margin-top: 8px; font-family: 'Nunito', sans-serif; font-weight: 800; text-align: center; }
.clone-journal details { margin: 6px 0; }
.clone-journal summary { cursor: pointer; font-weight: 800; font-family: 'Nunito', sans-serif; }

/* 🏚️ LES RUINES (69-ruines.js) */
.ruine { margin: 10px 0; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 80%, #7f5539); border: 2px solid color-mix(in srgb, #c68642 50%, transparent); }
.ruine.finie { opacity: .8; }
.ruine-tete { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; }
.ruine-tete b { font-family: 'Bangers', sans-serif; letter-spacing: 1px; font-size: 1.15rem; }
.ruine-tete small { opacity: .7; }
.ruine-grille { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 8px; }
.ruine-case { aspect-ratio: 1; border: 2px solid #3d2b1f; border-radius: 8px; background: linear-gradient(#a47148, #7f5539); cursor: pointer; font-size: 1.1rem; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.ruine-case:disabled { cursor: default; }
.ruine-case.creusee { background: #3d2b1f; color: #c9a46a; box-shadow: none; }
.ruine-case.relique { background: #ffd166; }
.ruine-trouvee { margin: 8px 0 0; font-weight: 800; color: var(--gold); }
@media (max-width: 520px) { .ruine-grille { grid-template-columns: repeat(4, 1fr); } }

/* 🏙️ MA VILLE (70-ville.js) */
body.ow-ville :is(#entete, #jeu, #nav-mobile, #bandeau-events) { display: none !important; }
.ville-carte { padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #2d6a4f, #1b4332); border: 2px solid #52b788; color: #fff; }
.ville-titre { font-family: 'Bangers', sans-serif; font-size: 1.6rem; letter-spacing: 1px; text-align: center; }
.ville-maisons { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 10px; }
.ville-maison { display: flex; flex-direction: column; align-items: center; padding: 8px 4px 6px; border-radius: 10px; background: #fff3d6; color: #1b1030; border-top: 8px solid var(--toit); font-size: 1.5rem; }
.ville-maison b { font-family: 'Bangers', sans-serif; font-size: .95rem; letter-spacing: 1px; }

/* 🏆 LES SAISONS (71-saisons.js) */
.saison-tete { text-align: center; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--p) 45%, var(--panel)), var(--panel)); border: 2px solid var(--gold); }
.saison-nom { font-family: 'Bangers', sans-serif; font-size: 1.5rem; letter-spacing: 1px; }
.saison-moi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--panel) 85%, #000); }
.saison-moi span { display: block; font-size: .8rem; opacity: .75; }
.saison-moi b { font-family: 'Bangers', sans-serif; font-size: 2rem; letter-spacing: 1px; }
.saison-ligue { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--lc); color: var(--lc); font-weight: 900; text-align: center; }
.saison-ligue small { display: block; color: var(--text); opacity: .75; font-weight: 700; }
.saison-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.saison-sources span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 85%, #fff); font-size: .8rem; }
.saison-sources b { font-size: 1.05rem; }
.saison-sources i { font-style: normal; color: var(--gold); font-weight: 800; }
.saison-ligues { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.saison-ligues > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--lc) 60%, transparent); }
.saison-ligues > div.ici { background: color-mix(in srgb, var(--lc) 22%, transparent); }
.saison-ligues b { color: var(--lc); }
.saison-ligues small, .saison-ligues span { font-size: .75rem; opacity: .85; }
.saison-top > div { display: grid; grid-template-columns: 34px 1fr 28px auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; }
.saison-top > div:nth-child(odd) { background: color-mix(in srgb, var(--panel) 85%, #fff); }
.saison-top > div.moi { outline: 2px solid var(--gold); }
.saison-top i { font-style: normal; text-align: center; }

/* 🏛️ LE CONSEIL MUNICIPAL (72-conseil.js) */
.conseil-loi { text-align: center; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #3a2e1f, #1f1810); border: 3px double #d4a373; color: #f3ead8; }
.conseil-loi > small { letter-spacing: 2px; font-weight: 900; opacity: .75; }
.conseil-grande { font-family: 'Bangers', sans-serif; font-size: 1.6rem; letter-spacing: 1px; margin: 6px 0; color: #ffd166; }
.conseil-bulletin { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.conseil-choix { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 85%, #fff); border: 2px solid transparent; }
.conseil-choix.vote { border-color: var(--gold); }
.conseil-nom { font-weight: 900; }
.conseil-choix p { margin: 0; font-size: .82rem; opacity: .85; flex: 1; }
.conseil-barre { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.conseil-barre i { display: block; height: 100%; background: var(--gold); transition: width .6s; }

/* 🎨 SANS TITRE N°37 — LE MODE ŒUVRE D'ART (73-oeuvre.js) : on entre dans la toile. Rien ne clignote. */
.oeuvre-mode { --p: #9b5de5; --s: #3a0ca3; --bg: #0d0d12; --gold: #d4a017; --panel: #16141f; --text: #f8f4ec; --accent: #ff4fa3; --ligne: rgba(212, 160, 23, .35); }
body.mode-oeuvre :is(#entete, #jeu, #nav-mobile, #bandeau-events) { display: none !important; }
#monde-oe { position: fixed; inset: 0; z-index: 2000; background: #0d0d12; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; animation: oeEntree 1.6s ease-out; }
@keyframes oeEntree { from { opacity: 0; } to { opacity: 1; } }
#monde-oe .oe-toile { position: absolute; inset: 0; display: block; cursor: none; }
.oe-cartel { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; max-width: 280px; background: #f8f4ec; color: #1b1030;
    font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); transition: transform 1.2s ease, opacity 1.2s; transform-origin: 0 0; pointer-events: none; }
.oe-cartel b { font-size: 1.15rem; font-style: italic; }
.oe-cartel span { font-size: .8rem; opacity: .7; }
.oe-cartel i { margin-top: 6px; font-size: 1rem; }
.oe-cartel.petit { transform: scale(.7); opacity: .75; }
.oe-haut { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; align-items: center; }
.oe-haut span { padding: 6px 12px; border-radius: 999px; background: rgba(13, 13, 18, .82); border: 1.5px solid var(--gold); color: #fff; font-weight: 800; font-size: .85rem; }
.oe-haut .btn { background: rgba(13, 13, 18, .85) !important; color: #fff !important; border: 1.5px solid var(--gold) !important; }
.oe-bas { position: absolute; left: 50%; bottom: 84px; translate: -50% 0; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 20px); }
.oe-palette { display: flex; gap: 5px; padding: 6px 8px; border-radius: 999px; background: rgba(13, 13, 18, .85); border: 1.5px solid var(--gold); overflow-x: auto; scrollbar-width: thin; }
.oe-regard, .oe-outil { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: #1f1b2e; color: #fff; font-size: 1.15rem; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); transition: border-color .4s, background .4s; }
.oe-outil { width: 48px; height: 48px; background: rgba(13, 13, 18, .85); border-color: var(--gold); }
.oe-regard.appris { border-color: rgba(212, 160, 23, .6); }
.oe-regard.actif { border-color: #ffd166; background: #3a2f12; }
.oe-regard:disabled { opacity: .45; cursor: default; }
.oe-phrase { position: absolute; left: 50%; bottom: 150px; translate: -50% 0; max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 14px; background: rgba(248, 244, 236, .95); color: #1b1030;
    font-family: Georgia, serif; font-style: italic; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: opacity 1s; pointer-events: none; }
.oe-phrase.part { opacity: 0; }
.oe-modale { max-width: 560px; }
.oe-decouverte h2 { margin: 4px 0; }
.oe-fait { font-family: Georgia, serif; font-size: 1.02rem; line-height: 1.45; }
.oe-q { font-weight: 800; margin: 12px 0 8px; }
.oe-choix { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.oe-choix .btn i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 4px; vertical-align: -2px; border: 1.5px solid #1b1030; }
.oe-prisme .btn.pris { opacity: .45; }
.oe-rate { min-height: 1.2em; margin: 8px 0 0; color: var(--accent); font-weight: 700; }
.oe-svg { display: block; width: min(320px, 100%); margin: 6px auto; border-radius: 10px; background: #fff8e1; cursor: crosshair; }
.oe-mondrian { display: grid; grid-template-columns: repeat(3, 70px); gap: 6px; justify-content: center; margin: 8px 0 10px; padding: 6px; background: #111; width: max-content; margin-inline: auto; }
.oe-mondrian button { width: 70px; height: 70px; border: 0; background: #fff; cursor: pointer; transition: background .3s; }
.oe-sons { display: flex; gap: 12px; justify-content: center; margin: 10px 0; }
.oe-sons button { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #1b1030; background: var(--c); opacity: .55; cursor: pointer; transition: opacity .35s, scale .35s; }
.oe-sons button.chante { opacity: 1; scale: 1.15; }
.oe-decouverte { position: relative; overflow: hidden; }
.oe-gorille { position: absolute; left: -60px; top: 40%; font-size: 46px; opacity: .55; pointer-events: none; animation: oeGorille 9s linear 1.2s forwards; }
@keyframes oeGorille { from { translate: 0 0; } to { translate: calc(100vw + 120px) 0; } }
body.photosensible .oe-gorille { animation-duration: 14s; }
.oe-carnet { display: grid; gap: 8px; max-height: 45vh; overflow: auto; text-align: left; }
.oe-carnet > div { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, #fff); }
.oe-carnet > div p { margin: 4px 0 0; font-family: Georgia, serif; font-size: .9rem; }
.oe-carnet > div.cache { opacity: .55; }
.oe-secrets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.oe-secrets span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .85rem; }
.oe-secrets span.ok { background: rgba(212, 160, 23, .3); }
.oe-livre { max-height: 32vh; overflow: auto; text-align: left; font-family: Georgia, serif; }
.oe-livre p { margin: 6px 0; font-style: italic; }
.oe-livre small { font-style: normal; opacity: .65; }
@media (max-width: 600px) { .oe-cartel { max-width: 200px; padding: 10px 12px; } .oe-regard { width: 36px; height: 36px; font-size: 1rem; } .oe-outil { width: 42px; height: 42px; } .oe-haut .btn { font-size: .75rem; } }

/* 🐶 LE MODE DOGGY : simple, bleu comme ses baskets */
.doggy-mode { --p: #3a86ff; --s: #1d4ed8; --bg: #0f1424; --gold: #ffd166; --panel: #151b2e; --text: #f1f5ff; --accent: #3a86ff; --ligne: rgba(58, 134, 255, .3); }

/* 📺 LE MODE WANDA VISION : simple, rouge et violet comme une vieille télé */
.wandavision-mode { --p: #ff2e63; --s: #2b1055; --bg: #120a1f; --gold: #ffd166; --panel: #1c1030; --text: #fbeefe; --accent: #ff2e63; --ligne: rgba(255, 46, 99, .3); }

/* 👁️ LA NUIT (74-la-nuit.js) : sa photo, en très grand, à 14 % d'opacité, au tout premier plan (au-dessus des fenêtres et des messages aussi). On clique à travers. Fondu très lent. */
#la-nuit { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: url('../img/la-nuit.png') center / cover no-repeat; opacity: var(--o, 0); transition: opacity 5s ease; }

/* 🕯️ LA SECTIUM DES ALGATORIUM : violet de capuche, lueur de bougie */
.sectium-mode { --p: #b388ff; --s: #6c4ab6; --bg: #0c0814; --gold: #ffb703; --panel: #160f24; --text: #f3ecff; --accent: #ffb703; --ligne: rgba(179, 136, 255, .3); }

/* 🎵 l'event de fou « Le Blind Test » : la radio cache le titre et l'artiste du son en cours (sinon c'est la réponse) */
body.evf-on-blindtest :is(#radio-nom, #radio-artiste) { font-size: 0 !important; }
body.evf-on-blindtest #radio-nom::after { content: '🎵 ???'; font-size: .98rem; }
body.evf-on-blindtest #radio-artiste::after { content: 'Blind test : devine le son'; font-size: .68rem; }

/* 🥤 LE MODE FANTA : orange pétillant, rouge cerise */
.fanta-mode { --p: #ff7b00; --s: #c1121f; --bg: #1a0d05; --gold: #ffd166; --panel: #24130a; --text: #fff4e6; --accent: #d00000; --ligne: rgba(255, 123, 0, .3); }

/* ▶️ LE DÉGUISEMENT YOUTUBE (30-excel.js) : la police Roboto, le blanc (ou le sombre), le rouge du logo */
.youtube-mode { --dg: #ff0000; --dg-fonce: #cc0000; --bg: #ffffff; --panel: #ffffff; --p: #0f0f0f; --s: #0f0f0f; --gold: #ff0000; --text: #0f0f0f; --green: #065fd4; }
body.mode-youtube { --w-fond: #ffffff; --w-fond2: #f2f2f2; --w-texte: #0f0f0f; --w-gris: #606060; --w-bord: #e5e5e5; --w-lien: #065fd4; }
body.mode-youtube.dg-sombre { --w-fond: #0f0f0f; --w-fond2: #272727; --w-texte: #f1f1f1; --w-gris: #aaaaaa; --w-bord: #3f3f3f; --w-lien: #3ea6ff; --bg: #0f0f0f; --panel: #0f0f0f; --text: #f1f1f1; --p: #f1f1f1; --s: #f1f1f1; }
body.mode-youtube, body.mode-youtube * { font-family: 'Roboto', Arial, sans-serif !important; }
body.mode-youtube { background: var(--w-fond) !important; color: var(--w-texte); }
body.mode-youtube #entete { background: var(--w-fond) !important; border-bottom: 0 !important; }
body.mode-youtube .logo { display: none !important; }
body.mode-youtube .btn-rond { color: var(--w-gris) !important; }
body.mode-youtube #jeu { padding: 12px 16px 40px !important; background: var(--w-fond) !important; background-image: none !important; }
body.mode-youtube .panneau { background: var(--w-fond) !important; border: 0 !important; border-radius: 12px !important; }
body.mode-youtube .panneau *, body.mode-youtube .modale * { color: var(--w-texte); }
body.mode-youtube :is(.titre-panneau, .sous-titre) { color: var(--w-texte) !important; font-weight: 700 !important; }
body.mode-youtube .art-nom { color: var(--w-texte) !important; font-weight: 500 !important; }
body.mode-youtube .article { background: var(--w-fond) !important; border: 0 !important; border-radius: 12px !important; }
body.mode-youtube :is(.btn, .onglet, .qte, .sous-onglet, .art-btn, .btn-renaissance) { background: var(--w-fond2) !important; color: var(--w-texte) !important; border: 0 !important; border-radius: 18px !important; font-weight: 500 !important; }
body.mode-youtube :is(.onglet.actif, .qte.actif, .sous-onglet.actif) { background: var(--w-texte) !important; color: var(--w-fond) !important; }
body.mode-youtube :is(.onglet.actif, .qte.actif, .sous-onglet.actif) * { color: var(--w-fond) !important; }
body.mode-youtube #zone-clic { background: #000 !important; border: 0 !important; border-radius: 12px !important; box-shadow: inset 0 -4px 0 #ff0000 !important; }
body.mode-youtube .compteur { border: 0 !important; }
body.mode-youtube #likes { color: var(--w-texte) !important; font-weight: 700 !important; }
body.mode-youtube :is(#likes-unite, #lps) { color: var(--w-gris) !important; }
body.mode-youtube :is(.bsp, .codes-ligne .champ, .champ) { background: var(--w-fond) !important; color: var(--w-texte) !important; border-color: var(--w-bord) !important; }
body.mode-youtube :is(.modale, #parents, .toast) { background: var(--w-fond) !important; color: var(--w-texte) !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 4px 32px rgba(0, 0, 0, .25) !important; }
body.mode-youtube #parents::after { border: 0 !important; background: none !important; color: var(--w-lien) !important; }
body.mode-youtube #nav-mobile { background: var(--w-fond) !important; border-top: 1px solid var(--w-bord) !important; }
body.mode-youtube #nav-mobile button { color: var(--w-texte) !important; border-right-color: transparent !important; }
body.mode-youtube #nav-mobile button:nth-child(1)::after { content: 'Accueil'; }
body.mode-youtube #nav-mobile button:nth-child(2)::after { content: 'Shorts'; }
body.mode-youtube #nav-mobile button:nth-child(3)::after { content: 'Abonnements'; }
body.mode-youtube .like-dore { background: var(--w-fond) !important; border-color: var(--w-bord) !important; }
body.mode-youtube .like-dore::after { content: '▶' !important; color: #ff0000 !important; }
#xl-ruban.youtube { background: var(--w-fond) !important; color: var(--w-texte); border-bottom: 0; }
.yt-haut { display: flex; align-items: center; gap: 16px; padding: 8px 16px; }
.yt-menu { font-size: 20px; color: var(--w-texte); }
.yt-logo { display: flex; align-items: center; gap: 2px; font-size: 20px; font-weight: 700; letter-spacing: -1px; color: var(--w-texte); }
.yt-logo i { display: grid; place-items: center; width: 30px; height: 21px; border-radius: 6px; background: #ff0000; margin-right: 2px; }
.yt-logo i b { width: 0; height: 0; border-left: 9px solid #fff; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; margin-left: 2px; }
.yt-logo sup { font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--w-gris); margin-left: 2px; }
.yt-recherche { flex: 1; max-width: 560px; margin-left: auto; display: flex; align-items: center; height: 40px; border: 1px solid var(--w-bord); border-radius: 20px; overflow: hidden; }
.yt-recherche span { flex: 1; padding: 0 16px; font-size: 16px; color: var(--w-texte); }
.yt-recherche i { font-style: normal; display: grid; place-items: center; width: 64px; height: 100%; background: var(--w-fond2); border-left: 1px solid var(--w-bord); }
.yt-micro { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--w-fond2); }
.yt-droite { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--w-texte); font-size: 14px; }
.yt-titre { padding: 4px 24px 4px; font-size: 20px; font-weight: 700; color: var(--w-texte); }
.yt-chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 24px 10px; color: var(--w-texte); }
.yt-avatar { width: 40px; height: 40px; border-radius: 50%; background: #3f51b5; color: #fff; display: grid; place-items: center; font-weight: 500; }
.yt-chaine > span:first-of-type b { display: block; font-size: 16px; font-weight: 500; }
.yt-chaine small { display: block; font-size: 12px; color: var(--w-gris); }
.yt-abo { padding: 9px 16px; border-radius: 18px; background: var(--w-texte); color: var(--w-fond); font-size: 14px; font-weight: 500; }
.yt-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.yt-actions span { padding: 8px 14px; border-radius: 18px; background: var(--w-fond2); font-size: 14px; font-weight: 500; }
#xl-statut.youtube { background: var(--w-fond) !important; border-top: 1px solid var(--w-bord) !important; color: var(--w-gris) !important; font-size: 13px; }
#xl-statut .yt-temps { color: var(--w-texte); font-weight: 500; margin-right: 12px; }
@media (max-width: 820px) {
    .yt-haut { gap: 8px; padding: 8px 10px; }
    .yt-recherche { max-width: none; }
    .yt-micro, .yt-droite, .yt-actions span:nth-child(n+3) { display: none; }
    .yt-titre { padding: 4px 12px; font-size: 17px; }
    .yt-chaine { padding: 4px 12px 8px; }
}

/* 🎮 les 4 mondes de jeux (mondeSimple, 00d-mondes-plus.js) */
.fortnite-mode { --p: #9b5de5; --s: #3a0ca3; --bg: #0d0a1f; --gold: #fee440; --panel: #17112e; --text: #f4f0ff; --accent: #00bbf9; --ligne: rgba(155, 93, 229, .3); }
.minecraft-mode { --p: #5bbd4b; --s: #8b5a2b; --bg: #10140c; --gold: #4cc9f0; --panel: #1a2013; --text: #f1f8e9; --accent: #4cc9f0; --ligne: rgba(91, 189, 75, .3); }
.rocketleague-mode { --p: #118ab2; --s: #ff9f1c; --bg: #061c24; --gold: #ff9f1c; --panel: #0b2a35; --text: #e6f7ff; --accent: #06d6a0; --ligne: rgba(17, 138, 178, .35); }
.rider-mode { --p: #c77dff; --s: #5a189a; --bg: #10002b; --gold: #ffffff; --panel: #1a0640; --text: #f6edff; --accent: #ffffff; --ligne: rgba(199, 125, 255, .3); }
.travisscott-mode { --p: #c77dff; --s: #ff70a6; --bg: #12052a; --gold: #fee440; --panel: #1d0a3d; --text: #fbf0ff; --accent: #ff70a6; --ligne: rgba(199, 125, 255, .3); }

/* 🎮 LES MÉCANIQUES DES 5 MONDES DE JEUX (76-mondes-jeux.js) — rien ne clignote */
.mj-el { pointer-events: none; }
.mj-objet { position: absolute; z-index: 9; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; font-size: 44px; line-height: 1; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); animation: mjApparait .5s ease-out; }
@keyframes mjApparait { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
/* 🦙 la tour et le bus */
.mj-tour { position: absolute; left: 10px; bottom: 12px; z-index: 6; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 70px; transition: opacity .8s; }
.mj-tour.part { opacity: 0; }
.mj-tour-nom { margin-top: 4px; padding: 2px 6px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .7rem; font-weight: 900; white-space: nowrap; order: 99; }
.mj-etage { display: block; width: 60px; height: 14px; border: 2px solid #1b1030; border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); animation: mjApparait .4s ease-out; }
.mj-bus { top: 6% !important; left: -90px !important; font-size: 50px; transition: left 10s linear; }
.mj-bus.roule { left: calc(100% + 20px) !important; }
.mj-bus small { position: absolute; left: 50%; top: -28px; translate: -50% 0; font-size: 26px; }
/* ⛏️ le bloc et le creeper */
.mj-bloc { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; }
.mj-cube { width: 64px; height: 64px; border: 3px solid #1b1030; border-radius: 4px; background: var(--c, #8b5a2b); box-shadow: inset 8px 8px 0 rgba(255, 255, 255, .18), inset -8px -8px 0 rgba(0, 0, 0, .2); transition: background .4s; }
.mj-fissure { width: 70px; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.mj-fissure i { display: block; height: 100%; background: #fff; transition: width .15s; }
.mj-bloc small { padding: 2px 6px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .62rem; font-weight: 800; text-align: center; }
.mj-creeper { display: flex; flex-direction: column; align-items: center; }
.mj-creeper small { font-size: .75rem; font-weight: 900; color: #5bbd4b; text-shadow: 0 2px 0 #1b1030; }
/* 🚗 le match et les pastilles */
.mj-match { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 7; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(6, 28, 36, .9); border: 2px solid #118ab2; color: #fff; pointer-events: auto; }
.mj-match b { font-family: 'Bangers', sans-serif; font-size: 1.15rem; letter-spacing: 1px; }
.mj-match span { font-weight: 900; color: #ff9f1c; }
.mj-boost { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.mj-boost i { display: block; height: 100%; background: linear-gradient(90deg, #ff9f1c, #ffd166); transition: width .15s; }
.mj-match [data-tir] { grid-column: 1 / -1; }
.mj-pastille i { display: block; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #ffd166 30%, #ff9f1c 70%); border: 3px solid #1b1030; }
/* 🚲 la piste et la bosse */
.mj-piste { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 70px; z-index: 6; border-radius: 12px; background: rgba(16, 0, 43, .85); border: 2px solid #c77dff; overflow: hidden; }
.mj-piste canvas { width: 100%; height: 100%; display: block; }
.mj-piste span { position: absolute; left: 10px; top: 4px; color: #4dff88; font-family: 'Courier New', monospace; font-weight: 900; font-size: .75rem; }
.mj-bosse { position: absolute; left: 50%; top: 14px; translate: -50% 0; z-index: 8; width: max-content; max-width: 90%; padding: 8px 14px; border-radius: 14px; background: rgba(16, 0, 43, .92); border: 2px solid #fff; color: #fff; font-weight: 900; text-align: center; animation: mjApparait .5s ease-out; }
/* 🎤 la hype et les flammes */
.mj-hype { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 7; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(18, 5, 42, .88); border: 2px solid #ff70a6; color: #fff; }
.mj-hype span { font-family: 'Bangers', sans-serif; letter-spacing: 1px; }
.mj-hype div { flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.mj-hype i { display: block; height: 100%; background: linear-gradient(90deg, #c77dff, #ff70a6, #fee440); }
.mj-hype small { font-weight: 900; white-space: nowrap; }
@keyframes mjSaute { 0% { translate: 0 0; } 40% { translate: 0 -40px; } 100% { translate: 0 0; } }
#avatar-btn.mj-saute { animation: mjSaute .9s ease-out; }
body.photosensible #avatar-btn.mj-saute { animation: none; }

/* 🎮 LES 5 MONDES DE JEUX, HABILLÉS EN ENTIER (09/10/2026) — « avec des polices, tout, son meilleur mode ».
   Chaque monde prend la police, les couleurs et le décor de son jeu. Les boutons restent des pastilles. Rien ne bouge, rien ne clignote. */
:is(body.mode-fortnite, body.mode-minecraft, body.mode-rocketleague, body.mode-rider, body.mode-travisscott) :is(.bangers, .logo, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant, .pilule b, .bsp-haut b, .codes-titre, .btn, .onglet, .art-btn, .art-nb, .tcarte-nom, #radio-nom, .btn-renaissance, .bandeau, .mj-match b, .mj-hype span, .mj-tour-nom)
    { font-family: var(--police-jeu) !important; }

/* 🦙 FORTNITE : le bleu du lobby, le jaune des boutons, la police épaisse en italique, les couleurs de rareté */
body.mode-fortnite { --police-jeu: 'Luckiest Guy', 'Bangers', sans-serif; --p: #ffe633; --s: #ffb800; --gold: #ffe633; --accent: #4cc9f0; --green: #7cff6b;
    --bg: #0a1a52; --panel: #123399; --text: #ffffff; --ligne: rgba(255, 230, 51, .35); background: radial-gradient(ellipse at 50% -10%, #2f6bff, #0a1a52 65%) fixed !important; }
body.mode-fortnite :is(.titre-panneau, #likes, .logo, .onglet, .btn, .art-btn, .sous-titre) { font-style: italic; text-transform: uppercase; letter-spacing: 1px; }
body.mode-fortnite #likes { color: #fff; text-shadow: 0 4px 0 #0a1a52, 0 0 18px rgba(76, 201, 240, .6); }
body.mode-fortnite #lps { color: #ffe633; }
body.mode-fortnite .panneau { background: linear-gradient(180deg, #1d4ed8, #123399 55%, #0e2878) !important; border: 2px solid rgba(255, 255, 255, .25) !important; }
body.mode-fortnite :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #fff27a, #ffd400) !important; color: #0a1a52 !important; box-shadow: 0 5px 0 #b38600 !important; }
body.mode-fortnite .art-btn:disabled { background: rgba(255, 255, 255, .14) !important; color: rgba(255, 255, 255, .55) !important; box-shadow: none !important; }
body.mode-fortnite .onglet { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
body.mode-fortnite .art-nom { color: #fff; }
body.mode-fortnite .article { background: rgba(10, 26, 82, .55); border-left-width: 6px !important; }
body.mode-fortnite .article:nth-child(5n+1) { border-color: #b1b1b1; } body.mode-fortnite .article:nth-child(5n+1) .art-icone { background: linear-gradient(180deg, #bfbfbf, #6e6e6e); }
body.mode-fortnite .article:nth-child(5n+2) { border-color: #60aa3a; } body.mode-fortnite .article:nth-child(5n+2) .art-icone { background: linear-gradient(180deg, #87e339, #2f7c1c); }
body.mode-fortnite .article:nth-child(5n+3) { border-color: #49acf2; } body.mode-fortnite .article:nth-child(5n+3) .art-icone { background: linear-gradient(180deg, #5ac8ff, #1f5fbf); }
body.mode-fortnite .article:nth-child(5n+4) { border-color: #b15be2; } body.mode-fortnite .article:nth-child(5n+4) .art-icone { background: linear-gradient(180deg, #d17aff, #6b2a9e); }
body.mode-fortnite .article:nth-child(5n) { border-color: #ff8b19; } body.mode-fortnite .article:nth-child(5n) .art-icone { background: linear-gradient(180deg, #ffb347, #c25a00); }
body.mode-fortnite #zone-clic { background: radial-gradient(circle at 50% 52%, transparent 58%, rgba(123, 44, 191, .35) 70%, rgba(90, 24, 154, .8) 86%),
    radial-gradient(ellipse 60px 18px at 18% 16%, rgba(255, 255, 255, .85) 98%, transparent), radial-gradient(ellipse 80px 22px at 78% 10%, rgba(255, 255, 255, .8) 98%, transparent),
    linear-gradient(to bottom, transparent 80%, #5bbd4b 80% 84%, #3f8a32 84%), linear-gradient(#4cc9f0, #a0e7ff 78%) !important;
    box-shadow: inset 0 0 0 3px #ffe633; }
body.mode-fortnite .logo .l3 { background: #ffe633; color: #0a1a52; }

/* ⛏️ MINECRAFT : la police en pixels, la terre en fond, les boutons en pierre, la barre d'XP verte */
body.mode-minecraft { --police-jeu: 'Pixelify Sans', 'VT323', monospace; --p: #80ff20; --s: #5bbd4b; --gold: #ffff55; --accent: #55ffff; --green: #80ff20;
    --bg: #2b1d12; --panel: #1e1e1e; --text: #ffffff; --ligne: rgba(0, 0, 0, .6);
    background: repeating-conic-gradient(#3b2a1d 0 25%, #4a3424 0 50%) 0 0 / 32px 32px fixed !important; }
body.mode-minecraft, body.mode-minecraft * { font-family: 'Pixelify Sans', 'VT323', monospace !important; }
body.mode-minecraft :is(.titre-panneau, #likes, .logo, .sous-titre, .modale h2, .art-nom, .pilule b) { text-shadow: 2px 2px 0 #3f3f3f !important; letter-spacing: 0; }
body.mode-minecraft #likes { color: #80ff20; text-shadow: 3px 3px 0 #1d4d00 !important; }
body.mode-minecraft #lps { color: #ffff55; }
body.mode-minecraft .panneau { background: rgba(0, 0, 0, .62) !important; border: 2px solid #000 !important; box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #111, 0 10px 0 rgba(0, 0, 0, .3) !important; }
body.mode-minecraft :is(.btn, .art-btn, .onglet, .qte) { background: #7a7a7a !important; color: #fff !important; border: 2px solid #000 !important;
    box-shadow: inset 2px 2px 0 #aaa, inset -2px -4px 0 #4a4a4a !important; text-shadow: 2px 2px 0 #3f3f3f; opacity: 1; }
body.mode-minecraft :is(.btn, .art-btn, .onglet):hover { border-color: #fff !important; background: #8a8fd8 !important; }
body.mode-minecraft :is(.onglet.actif, .qte.actif) { background: #5bbd4b !important; box-shadow: inset 2px 2px 0 #9be37f, inset -2px -4px 0 #2f6b22 !important; }
body.mode-minecraft .art-btn:disabled { background: #2c2c2c !important; color: #a0a0a0 !important; box-shadow: inset 2px 2px 0 #444 !important; }
body.mode-minecraft .article { background: rgba(0, 0, 0, .35); border: 2px solid #000 !important; }
body.mode-minecraft .art-icone { background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
body.mode-minecraft .barre { background: #1a1a1a; border: 1px solid #000; }
body.mode-minecraft .barre > i { background: #80ff20 !important; }
body.mode-minecraft #zone-clic { background: linear-gradient(to bottom, transparent 78%, #5bbd4b 78% 81%, #8b5a2b 81%),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(0, 0, 0, .12) 31px 32px), linear-gradient(#7ec0ee, #b9e2ff 78%) !important;
    box-shadow: inset 0 0 0 3px #000; border-radius: 10px !important; }
body.mode-minecraft .logo .l3 { background: #ffff55; color: #3f3f3f; }

/* 🚗 ROCKET LEAGUE : le terrain, l'orange contre le bleu, la police sport en italique */
body.mode-rocketleague { --police-jeu: 'Exo 2', 'Racing Sans One', sans-serif; --p: #1f8bff; --s: #ff8a1f; --gold: #ff9f1c; --accent: #06d6a0; --green: #4cc9f0;
    --bg: #060d1f; --panel: #0b1a38; --text: #eaf4ff; --ligne: rgba(31, 139, 255, .35);
    background: linear-gradient(115deg, #0b2a6b, #060d1f 45%, #060d1f 55%, #6b2a0b) fixed !important; }
body.mode-rocketleague :is(.titre-panneau, #likes, .logo, .onglet, .btn, .art-btn, .sous-titre, .pilule b, .mj-match b) { font-style: italic; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 1px; }
body.mode-rocketleague #likes { color: #fff; text-shadow: 3px 3px 0 #1f8bff, -3px -3px 0 #ff8a1f; }
body.mode-rocketleague #lps { color: #ff9f1c; }
body.mode-rocketleague .panneau { background: linear-gradient(160deg, rgba(31, 139, 255, .22), #0b1a38 40%, #0b1a38 70%, rgba(255, 138, 31, .2)) !important; border: 2px solid rgba(255, 255, 255, .14) !important; }
body.mode-rocketleague :is(.btn, .art-btn) { background: linear-gradient(135deg, #1f8bff, #0a4fb3) !important; color: #fff !important; box-shadow: 0 5px 0 #062e6b !important; }
body.mode-rocketleague .btn.or, body.mode-rocketleague .onglet.actif { background: linear-gradient(135deg, #ffb347, #ff6a00) !important; color: #1a0a00 !important; box-shadow: 0 5px 0 #8a3a00 !important; }
body.mode-rocketleague .art-btn:disabled { background: rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .5) !important; box-shadow: none !important; }
body.mode-rocketleague .art-nom { color: #fff; }
body.mode-rocketleague .article:nth-child(odd) { border-left: 5px solid #1f8bff !important; }
body.mode-rocketleague .article:nth-child(even) { border-left: 5px solid #ff8a1f !important; }
body.mode-rocketleague .barre > i { background: linear-gradient(90deg, #ff6a00, #ffd166) !important; }
body.mode-rocketleague #zone-clic { background: radial-gradient(circle at 50% 50%, transparent 0 70px, rgba(255, 255, 255, .55) 70px 73px, transparent 74px),
    linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(255, 255, 255, .55) calc(50% - 1.5px) calc(50% + 1.5px), transparent 0),
    linear-gradient(90deg, rgba(31, 139, 255, .65) 0 14px, transparent 14px calc(100% - 14px), rgba(255, 138, 31, .65) 0),
    repeating-linear-gradient(90deg, #1f6b3a 0 40px, #237a42 40px 80px) !important;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6); }
body.mode-rocketleague .logo .l3 { background: linear-gradient(135deg, #1f8bff, #ff8a1f); color: #fff; }

/* 🚲 GRIFFOPHONE RIDER : le noir, la ligne blanche, le néon violet (lueur fixe) */
body.mode-rider { --police-jeu: 'Orbitron', 'Sixtyfour', sans-serif; --p: #c77dff; --s: #e0aaff; --gold: #ffffff; --accent: #4dff88; --green: #4dff88;
    --bg: #05000f; --panel: #0d0322; --text: #f6edff; --ligne: rgba(199, 125, 255, .4);
    background: linear-gradient(rgba(199, 125, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(199, 125, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px, #05000f fixed !important; }
body.mode-rider :is(.titre-panneau, #likes, .logo, .onglet, .btn, .art-btn, .sous-titre) { font-weight: 900 !important; letter-spacing: 2px; text-transform: uppercase; }
body.mode-rider #likes { color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px #c77dff; }
body.mode-rider #lps { color: #4dff88; }
body.mode-rider .panneau { background: rgba(13, 3, 34, .88) !important; border: 2px solid #c77dff !important; box-shadow: 0 0 18px rgba(199, 125, 255, .35), inset 0 0 18px rgba(199, 125, 255, .12) !important; }
body.mode-rider :is(.btn, .art-btn) { background: transparent !important; color: #fff !important; border: 2px solid #c77dff !important; box-shadow: 0 0 10px rgba(199, 125, 255, .55), inset 0 0 8px rgba(199, 125, 255, .35) !important; }
body.mode-rider .onglet.actif { background: #c77dff !important; color: #05000f !important; box-shadow: 0 0 14px #c77dff !important; }
body.mode-rider .art-btn:disabled { border-color: rgba(255, 255, 255, .2) !important; color: rgba(255, 255, 255, .4) !important; box-shadow: none !important; }
body.mode-rider .art-nom { color: #fff; }
body.mode-rider .article { background: rgba(0, 0, 0, .4); border-color: rgba(199, 125, 255, .35) !important; }
body.mode-rider .barre > i { background: #fff !important; box-shadow: 0 0 8px #c77dff; }
body.mode-rider #zone-clic { background: linear-gradient(rgba(199, 125, 255, .12) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(199, 125, 255, .12) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse at 50% 45%, #1a0640, #05000f 75%) !important; box-shadow: inset 0 0 0 2px #c77dff, inset 0 0 40px rgba(199, 125, 255, .25); }
body.mode-rider .logo .l3 { background: #fff; color: #05000f; }

/* 🎤 TRAVIS SCOTT : la scène d'Astroworld, les projecteurs, le marqueur de Cactus Jack */
body.mode-travisscott { --police-jeu: 'Permanent Marker', 'Bangers', cursive; --p: #ff70a6; --s: #fee440; --gold: #fee440; --accent: #c77dff; --green: #ff9f1c;
    --bg: #0e0420; --panel: #1a0833; --text: #fbf0ff; --ligne: rgba(255, 112, 166, .35);
    background: radial-gradient(ellipse at 50% 120%, #7a2e0e, #0e0420 60%) fixed !important; }
body.mode-travisscott :is(.titre-panneau, .logo, .sous-titre, .modale h2) { text-transform: uppercase; letter-spacing: 1px; }
body.mode-travisscott #likes { color: #fee440; text-shadow: 3px 3px 0 #7a2e0e, 0 0 20px rgba(255, 112, 166, .55); }
body.mode-travisscott #lps { color: #ff9f1c; }
body.mode-travisscott .panneau { background: linear-gradient(180deg, #2a0c4a, #1a0833 60%, #24100c) !important; border: 2px solid rgba(254, 228, 64, .3) !important; }
body.mode-travisscott :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(135deg, #fee440, #ff9f1c 55%, #ff70a6) !important; color: #1a0833 !important; box-shadow: 0 5px 0 #7a2e0e !important; }
body.mode-travisscott .art-btn:disabled { background: rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .5) !important; box-shadow: none !important; }
body.mode-travisscott .art-nom { color: #fee440; }
body.mode-travisscott .article { background: rgba(0, 0, 0, .3); border-color: rgba(255, 159, 28, .35) !important; }
body.mode-travisscott .barre > i { background: linear-gradient(90deg, #c77dff, #ff70a6, #fee440) !important; }
body.mode-travisscott #zone-clic { background: radial-gradient(14px 10px at 8% 100%, #050010 98%, transparent), radial-gradient(14px 12px at 20% 100%, #050010 98%, transparent),
    radial-gradient(14px 10px at 32% 100%, #050010 98%, transparent), radial-gradient(14px 12px at 44% 100%, #050010 98%, transparent), radial-gradient(14px 10px at 56% 100%, #050010 98%, transparent),
    radial-gradient(14px 12px at 68% 100%, #050010 98%, transparent), radial-gradient(14px 10px at 80% 100%, #050010 98%, transparent), radial-gradient(14px 12px at 92% 100%, #050010 98%, transparent),
    conic-gradient(from 160deg at 15% 0%, transparent 0 10deg, rgba(254, 228, 64, .16) 10deg 22deg, transparent 22deg),
    conic-gradient(from 178deg at 85% 0%, transparent 0 10deg, rgba(255, 112, 166, .16) 10deg 22deg, transparent 22deg),
    linear-gradient(to bottom, transparent 84%, #3b1d0a 84%), linear-gradient(#2a0c4a, #0e0420) !important;
    box-shadow: inset 0 0 0 2px #fee440; }
body.mode-travisscott .logo .l3 { background: #a0522d; color: #fee440; }
/* 🔤 les polices des 5 mondes de jeux, choisies dans 🎨 Look (09-codes-team.js) */
body:is(.police-fortnite, .police-minecraft, .police-rocketleague, .police-rider, .police-travisscott) :is(.bangers, .logo, .pilule b, .titre-panneau, #likes, #combo-texte, .bsp-haut b, .codes-titre, .sous-titre, .gros-chiffre, .modale h2, #radio-nom, .tcarte-nom, .ct-titre, .texte-flottant) { font-family: var(--police-jeu), 'Bangers', sans-serif; }
body.police-fortnite { --police-jeu: 'Luckiest Guy'; }
body.police-minecraft { --police-jeu: 'Pixelify Sans'; }
body.police-rocketleague { --police-jeu: 'Exo 2'; }
body.police-rocketleague :is(.logo, .titre-panneau, #likes) { font-style: italic; font-weight: 900; }
body.police-rider { --police-jeu: 'Orbitron'; }
body.police-travisscott { --police-jeu: 'Permanent Marker'; }
body.mode-rider .mj-piste span { font-family: 'Orbitron', monospace; letter-spacing: 1px; }

/* 🖼️ LES DÉCORS DES 5 MONDES DE JEUX (76-mondes-jeux.js) : un dessin derrière le perso (et la foule devant, chez Travis).
   Tout est fixe ou glisse doucement ; en mode photosensible, rien ne bouge. */
.mj-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mj-decor > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mj-devant { z-index: 6; inset: auto 0 0 0; height: 24%; transition: translate .35s ease-out; }
.mj-devant.rage { translate: 0 -5px; }
.mj-hud { position: absolute; z-index: 7; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 4px 10px; border-radius: 10px; font: 900 .7rem 'Nunito', sans-serif; color: #fff; pointer-events: none; }
.mj-banniere { position: absolute; left: 50%; top: 36%; translate: -50% -50%; z-index: 10; max-width: 92%; padding: 8px 20px; border-radius: 16px; background: rgba(0, 0, 0, .62);
    color: #fff; font-family: var(--police-jeu, 'Bangers'), 'Bangers', sans-serif; font-size: clamp(1.1rem, 3vw, 1.8rem); letter-spacing: 1px; text-align: center; width: max-content; line-height: 1.1;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .5); pointer-events: none; animation: mjBanniere 2.6s ease forwards; }
.mj-banniere.or { color: #fee440; border: 2px solid #fee440; }
.mj-banniere.bleu { color: #fff; border: 2px solid #1f8bff; background: rgba(10, 60, 140, .75); }
.mj-banniere.orange { color: #fff; border: 2px solid #ff8a1f; background: rgba(140, 60, 10, .75); }
@keyframes mjBanniere { 0% { opacity: 0; scale: .9; } 14% { opacity: 1; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
body.photosensible .mj-banniere { animation-name: mjBanniereDoux; }
@keyframes mjBanniereDoux { 0% { opacity: 0; } 14%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* 🦙 la tempête, le HUD, le coffre */
.mj-tempete { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent calc(var(--zone, 400px) - 36px), rgba(155, 93, 229, .45) var(--zone, 400px), rgba(90, 24, 154, .72) calc(var(--zone, 400px) + 60px)); }
.mj-fn-hud { top: 8px; right: 8px; background: rgba(10, 26, 82, .82); border: 2px solid rgba(255, 255, 255, .3); }
.mj-fn-hud .ok { color: #7cff6b; }
.mj-coffre { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 0 10px rgba(254, 228, 64, .8)); }
.mj-coffre small, .mj-zombie small { font: 900 .7rem 'Nunito', sans-serif; color: #fff; text-shadow: 0 2px 0 #1b1030; }
body.mode-fortnite .mj-bus { top: 15% !important; }

/* ⛏️ le jour, la nuit, l'inventaire */
.mj-mc-nuit, .mj-mc-etoiles { opacity: var(--nuit, 0); }
.mj-mc-ombre { opacity: calc(var(--nuit, 0) * .45); }
.mj-mc-astres { transform-box: view-box; transform-origin: 160px 330px; }
.mj-zombie { display: flex; flex-direction: column; align-items: center; }
body.mode-minecraft .mj-bloc { bottom: 62px; }
.mj-hotbar { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: 3px; pointer-events: none; }
.mj-xp { position: relative; height: 6px; background: #1a1a1a; border: 1px solid #000; }
.mj-xp i { display: block; height: 100%; background: #80ff20; transition: width .2s; }
.mj-xp b { position: absolute; left: 50%; top: -17px; translate: -50% 0; font-size: .85rem; color: #80ff20; text-shadow: 2px 2px 0 #1d4d00; }
.mj-slots { display: flex; border: 2px solid #000; background: #8b8b8b; }
.mj-slot { position: relative; width: 30px; height: 30px; display: grid; place-items: center; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.mj-slot i { width: 16px; height: 16px; background: var(--c); box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .25); }
.mj-slot b { position: absolute; right: 2px; bottom: 0; font-size: .6rem; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; }

/* 🚗 le rang */
.mj-match em { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: italic 900 .72rem 'Exo 2', 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #cfe6ff; }
.mj-match em i { width: 12px; height: 12px; border-radius: 3px; rotate: 45deg; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }

/* 🚲 la piste un peu plus haute pour les étoiles et les drapeaux */
body.mode-rider .mj-piste { height: 84px; background: rgba(5, 0, 15, .82); }

/* 🎤 l'écran géant, les colonnes de feu, la setlist */
.mj-pyro { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(.3 + var(--hype, 0) * .9)); transition: transform .3s ease-out; }
body.photosensible .mj-pyro { transform: scaleY(.6); transition: none; }
body.photosensible .mj-devant { transition: none; }
body.mode-travisscott #avatar { border-radius: 12px; border: 5px solid #0b0316; box-shadow: 0 0 0 2px rgba(254, 228, 64, .45), 0 0 40px rgba(255, 112, 166, .5); filter: none; scale: .74; background: #0b0316; }
.mj-hype { flex-wrap: wrap; }
.mj-hype em { flex-basis: 100%; font: 900 .72rem 'Nunito', sans-serif; font-style: normal; color: #fee440; letter-spacing: .5px; }
body.mode-rocketleague #avatar { border-radius: 14px; border: 4px solid #0b1a38; box-shadow: 0 0 0 2px #1f8bff, 0 0 30px rgba(31, 139, 255, .5); filter: none; scale: .72; }   /* 🚗 le logo devient l'écran géant du stade */
body.mode-rider #avatar-btn { mix-blend-mode: screen; }   /* 🚲 le fond noir du cycliste disparaît : il roule devant la ville en néon */

/* 🦈 LE MODE SHARKZ EN GRAND (77-sharkz.js) : le live, la carte tacos, les appels, les panneaux, le sac. Rien ne clignote. */
.sz-live { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 10px; border-radius: 12px;
    background: rgba(13, 10, 30, .85); border: 2px solid #ff6b00; color: #fff; font: 800 .72rem 'Nunito', sans-serif; pointer-events: none; }
.sz-live b { color: #ff4d4d; }
.sz-live em { font-style: normal; opacity: .85; white-space: nowrap; }
.sz-mots { display: flex; gap: 4px; flex-basis: 100%; }
.sz-mots i { font-style: normal; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); font-size: .62rem; }
.sz-mots i.ok { background: #ffcc00; color: #1a0a00; }
.sz-carte { position: absolute; left: 8px; bottom: 8px; z-index: 7; padding: 5px 8px; border-radius: 12px; background: rgba(42, 26, 14, .9); border: 2px solid #ff6b00; color: #ffd166; font: 900 .66rem 'Nunito', sans-serif; pointer-events: none; }
.sz-carte span { display: grid; grid-template-columns: repeat(5, 12px); gap: 3px; margin-top: 3px; }
.sz-carte i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ffd166; opacity: .5; }
.sz-carte i.ok { background: #ff6b00; opacity: 1; }
.sz-boutons { position: absolute; right: 8px; bottom: 8px; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.sz-btn { padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, #ff6b00, #ffcc00); color: #1a0a00; font: 900 .74rem 'Nunito', sans-serif; box-shadow: 0 3px 0 #8a3a00; touch-action: manipulation; }
.sz-btn.appel { background: linear-gradient(135deg, #00d4ff, #0077b6); color: #fff; box-shadow: 0 3px 0 #023e8a; }
.sz-btn.or { font-size: .9rem; padding: 8px 18px; }
.sz-appel, .sz-poke { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px !important; border-radius: 16px !important; background: rgba(13, 10, 30, .9) !important; border: 2px solid #00d4ff !important; color: #fff; font-size: 30px; }
.sz-poke { border-color: #e63946 !important; }
.sz-appel b { font: 900 .8rem 'Nunito', sans-serif; }
.sz-appel small, .sz-poke small { font: 800 .62rem 'Nunito', sans-serif; opacity: .8; }
.sz-mot { padding: 6px 14px !important; border-radius: 999px !important; background: #ffcc00 !important; color: #1a0a00; font: 900 1rem 'Bangers', 'Nunito', sans-serif !important; letter-spacing: 1px; border: 2px solid #1a0a00 !important; }
.sz-panneau { position: absolute; left: 50%; top: 64px; translate: -50% 0; z-index: 9; width: min(92%, 320px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 16px;
    background: rgba(13, 10, 30, .94); border: 2px solid #ffcc00; color: #fff; text-align: center; animation: mjApparait .4s ease-out; }
.sz-panneau > b { font-family: 'Bangers', sans-serif; font-size: 1.15rem; letter-spacing: 1px; color: #ffcc00; }
.sz-panneau > small { font: 800 .72rem 'Nunito', sans-serif; opacity: .85; }
.sz-barre { width: 100%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sz-barre i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff6b00, #ffcc00); transition: width .12s; }
.sz-jauge { position: relative; width: 100%; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .15); }
.sz-jauge span { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; background: #06d6a0; border-radius: 4px; }
.sz-jauge i { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px #1a0a00; }
.sz-vista { width: 100%; border-radius: 8px; overflow: hidden; background: #f0f0f0; color: #1b1b1b; text-align: left; }
.sz-vista-titre { padding: 4px 10px; background: linear-gradient(#5a7fb8, #2b4a7e); color: #fff; font: 600 .8rem 'Segoe UI', Arial, sans-serif; }
.sz-vista p { margin: 10px; font: .85rem 'Segoe UI', Arial, sans-serif; }
.sz-vista-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 0 10px 10px; }
.sz-vista .sz-btn { background: linear-gradient(#fdfdfd, #dcdcdc); color: #1b1b1b; box-shadow: none; border: 1px solid #8a8a8a; border-radius: 4px; font: .75rem 'Segoe UI', Arial, sans-serif; }
.sz-frog { height: 1.4em; vertical-align: middle; }
.sz-sac { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.sz-case { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; background: rgba(255, 107, 0, .12); border: 2px solid rgba(255, 204, 0, .45); text-align: center; }
.sz-case svg { width: 56px; height: 56px; }
.sz-case small { font-size: .66rem; font-weight: 800; line-height: 1.15; }
.sz-case.vide { opacity: .45; border-style: dashed; }
body.mode-sharkz #avatar-btn { scale: .86; }
.sz-btn, .sz-panneau { pointer-events: auto; }
/* 🦈🐜 le logo noir de Sharkz et Antoff restait sur un en-tête devenu sombre en mode performance (« du noir sur du noir ») :
   l'en-tête garde sa couleur, en aplat et sans animation */
body.perf-effets.mode-sharkz #entete { background: #ff8a00 !important; animation: none; }
body.perf-effets.mode-antoff #entete { background: #00e676 !important; animation: none; }

/* ▶️ LE MODE YOUTUBE, REFAIT (09/10/2026, « le mode YouTube est mal fait ») : une vraie page de vidéo.
   La vidéo en 16:9 avec ses contrôles, le titre / la chaîne / la description DESSOUS, les vidéos « À suivre » à droite
   (le Studio, avec miniatures), les commentaires sous la description (l'Empire). */
@media (min-width: 1181px) {
    body.mode-youtube #jeu { grid-template-columns: minmax(0, 1fr) 402px !important; max-width: 1760px; column-gap: 24px; }
    body.mode-youtube #col-clic { grid-column: 1; grid-row: 1; }
    body.mode-youtube #col-empire { grid-column: 1; grid-row: 2; }
    body.mode-youtube #col-boutique { grid-column: 2; grid-row: 1 / span 2; }
    body.mode-youtube #col-boutique .panneau { top: 70px; max-height: calc(100vh - 80px); }
    body.mode-youtube #col-empire .panneau { position: static; max-height: none; }
}
/* les boutons du jeu rangés dans la barre YouTube, à côté de « Créer » */
body.mode-youtube #entete { position: absolute !important; top: 8px; right: 196px; z-index: 950; background: none !important; padding: 0 !important; min-height: 0; }
body.mode-youtube #entete .btn-rond { width: 36px !important; height: 36px !important; border-radius: 50% !important; filter: grayscale(1); opacity: .75; }
body.mode-youtube .yt-haut { padding-right: 380px; min-height: 56px; }
@media (max-width: 820px) { body.mode-youtube #entete { right: 6px; } body.mode-youtube .yt-haut { padding-right: 150px; } }
/* le panneau de la vidéo : la vidéo d'abord, puis tout le reste */
body.mode-youtube #col-clic .panneau { display: flex; flex-direction: column; padding: 0 !important; }
body.mode-youtube #col-clic .panneau > * { order: 5; }
body.mode-youtube #zone-clic { order: 1 !important; height: auto !important; aspect-ratio: 16 / 9; margin: 0 !important; border-radius: 12px !important; box-shadow: none !important; background: #000 !important; }
body.mode-youtube #yt-sous { order: 2 !important; }
body.mode-youtube #col-clic .compteur { order: 3 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--w-fond2); text-align: left; }
body.mode-youtube #col-clic .compteur #likes { font-size: 14px !important; line-height: 20px; }
body.mode-youtube #col-clic .compteur #likes-unite::after { content: ' · '; }
body.mode-youtube #col-clic .compteur #likes-unite, body.mode-youtube #col-clic .compteur #lps { font-size: 14px !important; font-weight: 500 !important; opacity: 1; margin: 0; }
/* la vidéo remplit tout le lecteur ; elle ne bouge pas, ne brille pas */
body.mode-youtube #avatar-btn { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0 !important; background: none !important; scale: 1 !important; }
body.mode-youtube #avatar { width: 100%; height: 100%; object-fit: cover; scale: 1 !important; filter: none !important; animation: none !important; transform: none !important; border-radius: 0; }
body.mode-youtube #avatar-btn.appui #avatar { transform: none !important; filter: brightness(1.08) !important; }
.yt-controles { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; padding: 30px 12px 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); pointer-events: none; color: #fff; }
.yt-progres { height: 3px; background: rgba(255, 255, 255, .3); margin-bottom: 6px; }
.yt-progres i { position: relative; display: block; height: 100%; width: 0; background: #ff0000; transition: width .4s linear; }
.yt-progres i::after { content: ''; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: #ff0000; }
.yt-boutons { display: flex; align-items: center; gap: 14px; height: 36px; font: 400 13px 'Roboto', Arial, sans-serif; white-space: nowrap; }
.yt-ic { width: 24px; height: 24px; flex: none; }
.yt-esp { flex: 1; }
.yt-chapitre { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .yt-chapitre, .yt-boutons .yt-ic:nth-last-child(2), .yt-boutons .yt-ic:nth-last-child(4) { display: none; } .yt-boutons { gap: 10px; } }
/* sous la vidéo : le titre, la chaîne, la description */
#yt-sous .yt-titre { padding: 12px 0 8px; font: 700 20px/28px 'Roboto', Arial, sans-serif; color: var(--w-texte); }
#yt-sous .yt-chaine { padding: 0 0 12px; }
#yt-sous .yt-certif { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; background: var(--w-gris); color: var(--w-fond); font: 700 9px Arial; font-style: normal; vertical-align: 1px; }
.yt-pouces { display: inline-flex; align-items: center; gap: 6px; }
.yt-pouces i { width: 1px; height: 22px; background: var(--w-bord); margin: 0 4px; }
.yt-desc { padding: 12px; border-radius: 12px; background: var(--w-fond2); color: var(--w-texte); font: 400 14px/20px 'Roboto', Arial, sans-serif; }
.yt-desc > b { font-weight: 500; white-space: pre; }
.yt-tags { color: var(--w-lien); }
.yt-desc p { margin: 6px 0 0; }
.yt-chap { color: var(--w-lien); }
.yt-desc small { display: block; margin-top: 6px; font-weight: 500; font-size: 14px; }
/* les commentaires = l'Empire, sous la description */
body.mode-youtube #col-empire .panneau::before { content: '1 248 commentaires      ⇅ Trier par'; display: block; white-space: pre; margin: 0 0 16px; font: 700 20px 'Roboto', Arial, sans-serif; color: var(--w-texte); }
body.mode-youtube #col-empire .panneau { padding: 8px 0 !important; }
/* « À suivre » : le Studio en vidéos recommandées, avec leurs miniatures */
body.mode-youtube #col-boutique .panneau { padding: 0 !important; }
body.mode-youtube .onglets-icones .famille-ic { display: none !important; }
body.mode-youtube .onglets-icones { flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; }
body.mode-youtube .onglets-icones .onglet { flex: none; padding: 6px 12px !important; border-radius: 8px !important; font-size: 14px !important; min-height: 0; }
body.mode-youtube #col-boutique .article { grid-template-columns: 168px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 0 !important; margin-bottom: 8px; }
body.mode-youtube #col-boutique .art-icone { position: relative; width: 168px; height: 94px; border-radius: 8px; overflow: hidden; font-size: 2rem; background: linear-gradient(135deg, #3f3f3f, #0f0f0f) !important; }
body.mode-youtube #col-boutique .article:nth-child(4n+2) .art-icone { background: linear-gradient(135deg, #1d3557, #0f0f0f) !important; }
body.mode-youtube #col-boutique .article:nth-child(4n+3) .art-icone { background: linear-gradient(135deg, #6a040f, #0f0f0f) !important; }
body.mode-youtube #col-boutique .article:nth-child(4n) .art-icone { background: linear-gradient(135deg, #283618, #0f0f0f) !important; }
body.mode-youtube #col-boutique .art-icone img { width: 100%; height: 100%; object-fit: cover; }
body.mode-youtube .art-nb { right: 4px !important; bottom: 4px !important; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff !important; font: 500 12px 'Roboto', Arial, sans-serif !important; }
body.mode-youtube .art-nb:empty { display: none; }
body.mode-youtube #col-boutique .art-nom { font-size: 14px !important; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.mode-youtube #col-boutique :is(.art-desc, .art-prod) { color: var(--w-gris) !important; font-size: 12px !important; line-height: 18px; opacity: 1 !important; font-weight: 400 !important; }
body.mode-youtube #col-boutique .art-desc::before { content: 'Algator37 ✓'; display: block; }
body.mode-youtube #col-boutique .art-btn { min-width: 0 !important; padding: 6px 10px !important; font-size: 12px !important; }
@media (max-width: 500px) { body.mode-youtube #col-boutique .article { grid-template-columns: 120px minmax(0, 1fr) auto; } body.mode-youtube #col-boutique .art-icone { width: 120px; height: 68px; } }
#yt-sous .yt-abo { color: var(--w-fond) !important; font-weight: 500; }
/* ▶️ le champ des codes = « Ajouter un commentaire… » */
body.mode-youtube .codes { margin-top: 8px; padding: 0 !important; border: 0 !important; background: none !important; }
body.mode-youtube .codes .champ { border: 0 !important; border-bottom: 1px solid var(--w-bord) !important; border-radius: 0 !important; text-align: left; padding: 8px 2px !important; font-weight: 400 !important; }
body.mode-youtube .codes .btn { border-radius: 18px !important; padding: 8px 16px !important; }
.yt-controles, .yt-controles * { color: #fff !important; }
@media (max-width: 1180px) and (min-width: 821px) { body.mode-youtube .yt-droite { display: none !important; } body.mode-youtube .yt-haut { padding-right: 170px; } body.mode-youtube #entete { right: 8px; } }
/* ▶️ sur téléphone, comme l'appli : la recherche n'est plus qu'une loupe */
@media (max-width: 600px) {
    body.mode-youtube .yt-recherche { flex: none; width: 40px; margin-left: auto; border: 0 !important; }
    body.mode-youtube .yt-recherche span { display: none; }
    body.mode-youtube .yt-recherche i { width: 40px !important; border: 0 !important; background: none !important; }
}

/* 🤖 LE MODE CLAUDE EN MIEUX (78-claude.js) : la zone de clic devient l'éditeur. Le curseur est un bloc FIXE (il ne clignote pas). */
.cl-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; font: 11px/16px Consolas, 'Courier New', monospace; color: rgba(244, 233, 220, .35); }
.cl-onglets { display: flex; gap: 1px; height: 26px; background: #140d0b; border-bottom: 1px solid rgba(217, 119, 87, .35); overflow: hidden; }
.cl-onglets span { padding: 5px 10px; white-space: nowrap; background: #1f1512; color: rgba(244, 233, 220, .5); }
.cl-onglets span.actif { background: #2e1f1a; color: #f4e9dc; box-shadow: inset 0 2px 0 #d97757; }
.cl-gouttiere { position: absolute; left: 0; top: 26px; bottom: 0; width: 26px; padding-top: 6px; display: flex; flex-direction: column; align-items: flex-end; padding-right: 4px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.cl-code { position: absolute; left: 32px; right: 8px; bottom: 30px; z-index: 6; padding: 6px 8px; border-radius: 8px; background: rgba(20, 13, 11, .86); border: 1px solid rgba(217, 119, 87, .35);
    font: 11px/16px Consolas, 'Courier New', monospace; color: #f4e9dc; pointer-events: none; white-space: pre; overflow: hidden; }
.cl-code div { overflow: hidden; text-overflow: ellipsis; opacity: .55; }
.cl-code div.cl-active { opacity: 1; }
.cl-code span { display: inline-block; width: 30px; color: rgba(244, 233, 220, .35); }
.cl-code u { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; margin-left: 1px; background: #d97757; text-decoration: none; }
.cl-mot { color: #d97757; font-weight: 700; }
.cl-str { color: #a7c957; font-style: normal; }
.cl-com { color: rgba(244, 233, 220, .45); }
.cl-statut { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 8px; background: #d97757; color: #1a1210;
    font: 700 10.5px Consolas, 'Courier New', monospace; white-space: nowrap; overflow: hidden; }
.cl-ctx { position: relative; margin-left: auto; padding-bottom: 2px; }
.cl-ctx i { position: absolute; left: 0; bottom: 0; height: 2px; background: #1a1210; }
.cl-btn { padding: 2px 8px; border: 0; border-radius: 999px; cursor: pointer; pointer-events: auto; background: #1a1210; color: #f4e9dc; font: 700 10.5px Consolas, monospace; touch-action: manipulation; }
.cl-btn.gros { padding: 8px 16px; font-size: .9rem; background: #d97757; color: #1a1210; box-shadow: 0 3px 0 #7a3a22; }
.cl-panneau { position: absolute; left: 50%; top: 36px; translate: -50% 0; z-index: 9; width: min(92%, 320px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px;
    border-radius: 14px; background: rgba(26, 18, 16, .95); border: 2px solid #d97757; color: #f4e9dc; text-align: center; pointer-events: auto; animation: mjApparait .4s ease-out; }
.cl-panneau > b { font-family: Consolas, monospace; font-size: .95rem; color: #d97757; }
.cl-panneau > small { font-size: .72rem; opacity: .85; }
.cl-msg { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; }
.cl-msg span { display: flex; flex-direction: column; }
.cl-msg small { font-size: .8rem; }
.cl-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2a9d8f; color: #fff; font: 900 .9rem 'Nunito', sans-serif; }
.cl-barre { width: 100%; height: 8px; border-radius: 4px; background: rgba(244, 233, 220, .15); overflow: hidden; }
.cl-barre i { display: block; width: 0; height: 100%; background: #d97757; transition: width .12s; }
.cl-tests { width: 100%; text-align: left; font: 11px/17px Consolas, monospace; }
.cl-tests div { opacity: .55; transition: opacity .3s; }
.cl-tests div.ok { opacity: 1; color: #a7c957; }
.cl-memoire { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.cl-regle { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(217, 119, 87, .14); border: 2px solid rgba(217, 119, 87, .5); font-weight: 800; font-size: .82rem; text-align: left; }
.cl-regle b { font-size: 1.3rem; }
.cl-regle.vide { opacity: .45; border-style: dashed; }
body.mode-claudeia #avatar-btn { scale: .82; }

/* 🏆 L'ONGLET SUCCÈS EN MIEUX (09/10/2026, « améliore succès ») : la carte de collectionneur (points + titre), les derniers débloqués,
   « à portée de main » avec les vrais chiffres, la recherche, et la fiche d'un succès quand on le touche. Rien ne clignote. */
.s2 { cursor: pointer; }
.s2-carte { margin-bottom: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, transparent), color-mix(in srgb, var(--p) 14%, transparent)); border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.s2-carte-haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.s2-titre, .s2-pts { display: flex; flex-direction: column; }
.s2-titre small, .s2-pts small { font-size: .68rem; opacity: .7; font-weight: 800; }
.s2-titre b { font-family: 'Bangers', sans-serif; font-size: 1.45rem; letter-spacing: 1px; color: var(--gold); line-height: 1.05; }
.s2-pts { text-align: right; }
.s2-pts b { font-family: 'Bangers', sans-serif; font-size: 1.3rem; letter-spacing: 1px; }
.s2-carte .barre { height: 10px; }
.s2-carte .barre > i { background: linear-gradient(90deg, var(--gold), var(--p)); }
.s2-carte-bas { display: block; margin-top: 5px; font-size: .7rem; opacity: .8; }
.s2-rangs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.s2-rangs span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.s2-rangs .s2-mini { width: 26px; height: 26px; }
.s2-rangs b { font-size: .95rem; }
.s2-rangs small { font-size: .62rem; opacity: .75; font-weight: 800; }
.s2-bloc { margin-bottom: 10px; padding: 10px; border-radius: 16px; background: rgba(0, 0, 0, .2); border: 1.5px solid var(--ligne); }
.s2-bloc-titre { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-family: 'Bangers', sans-serif; font-weight: 400; letter-spacing: 1px; font-size: 1.05rem; }
.s2-ligne { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.s2-mini-tuile { flex: none; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
    background: rgba(0, 0, 0, .25); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.s2-mini-tuile .s2-img { width: 48px; height: 48px; }
.s2-mini-tuile .s2-photo { width: 44px; height: 44px; border-width: 3px; }
.s2-mini-tuile span:not(.s2-photo) { font-size: .66rem; font-weight: 800; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.s2-mini-tuile small { font-size: .6rem; opacity: .65; }
.s2-portee { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 6px; padding: 6px 8px; border-radius: 14px;
    border: 1.5px solid var(--ligne); background: rgba(0, 0, 0, .2); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.s2-portee .s2-img { width: 48px; height: 48px; }
.s2-portee .s2-photo { width: 44px; height: 44px; border-width: 3px; }
.s2-portee-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s2-portee-txt b { font-size: .85rem; }
.s2-portee-txt small { font-size: .68rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2-portee-nb { display: flex; flex-direction: column; align-items: flex-end; font-family: 'Bangers', sans-serif; font-size: 1.05rem; letter-spacing: .5px; }
.s2-portee-nb small { font-family: 'Nunito', sans-serif; font-size: .64rem; opacity: .7; font-weight: 800; }
.s2-recherche { margin-bottom: 8px; }
.s2-recherche .champ { width: 100%; text-align: left; font-size: .9rem; }
#s2-resultats .grille-s2 { padding: 4px 0 10px; }
.s2-fiche { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.s2-fiche > .s2-img, .s2-fiche-img { width: 120px; height: 120px; }
.s2-fiche > .s2-photo { width: 110px; height: 110px; border-width: 6px; }
.s2-fiche h2 { margin: 2px 0 0; }
.s2-fiche p { margin: 0; opacity: .9; }
.s2-fiche-prog { width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.s2-fiche-prog .barre { height: 12px; }
.s2-fiche-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.s2-fiche-tags span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1.5px solid var(--ligne); font-size: .74rem; font-weight: 800; }
.s2-fiche-tags .ok { border-color: #06d6a0; color: #06d6a0; }
.s2-fiche-tags .perm { border-color: #ff9f1c; color: #ff9f1c; }
.s2-fiche-tags .chance { border-color: #c77dff; color: #c77dff; }
.s2-fiche-serie { width: 100%; }
.s2-fiche-serie > small { display: block; margin-bottom: 6px; font-weight: 800; opacity: .75; }
.s2-fiche-serie > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.s2-fiche-serie span { padding: 3px; border-radius: 12px; border: 2px solid transparent; opacity: .45; }
.s2-fiche-serie span.ok { opacity: 1; }
.s2-fiche-serie span.ici { border-color: var(--gold); opacity: 1; }
.s2-fiche-serie .s2-img { width: 40px; height: 40px; }
.s2-fiche-serie .s2-photo { width: 36px; height: 36px; border-width: 3px; }
.s2-portee-txt .barre, .s2-fiche-prog .barre { flex: none; display: block; width: 100%; height: 7px; }
.s2-fiche-prog { display: block; } .s2-fiche-prog .barre { margin-bottom: 4px; }

/* 🎯 LE MODE MENTORFR EN MIEUX (79-mentorfr.js) : le parcours Hunter IRL en haut, l'objectif de followers en bas (comme le widget
   Twitch), les défis de ses lives, le SIUUU. Rien ne clignote. */
.mf-hud { position: absolute; left: 8px; right: 8px; z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 10px 9px; border-radius: 12px;
    background: rgba(16, 0, 43, .86); border: 2px solid #9146ff; color: #fff; font: 800 .7rem 'Nunito', sans-serif; pointer-events: none; overflow: hidden; }
.mf-hud b { color: #bf94ff; }
.mf-hud span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-hud i { position: absolute; left: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #9146ff, #06d6a0); transition: width .3s; }
.mf-haut { top: 8px; }
.mf-bas { bottom: 8px; }
.mf-panneau { position: absolute; left: 50%; top: 52px; translate: -50% 0; z-index: 9; width: min(92%, 320px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px;
    border-radius: 14px; background: rgba(16, 0, 43, .95); border: 2px solid #9146ff; color: #fff; text-align: center; pointer-events: auto; animation: mjApparait .4s ease-out; }
.mf-panneau > b { font-family: 'Bangers', sans-serif; font-size: 1.15rem; letter-spacing: 1px; color: #bf94ff; }
.mf-panneau > small { font-size: .74rem; opacity: .9; }
.mf-barre { width: 100%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.mf-barre i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #9146ff, #06d6a0); transition: width .12s; }
.mf-reponses { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mf-btn { padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer; background: #9146ff; color: #fff; font: 900 .8rem 'Nunito', sans-serif; box-shadow: 0 3px 0 #3a0ca3; touch-action: manipulation; }
.mf-siuu { display: flex; flex-direction: column; align-items: center; padding: 6px 10px !important; border-radius: 14px !important; background: #c1121f !important; border: 2px solid #ffd23f !important; color: #fff; }
.mf-siuu span { font: 400 2rem 'Bangers', sans-serif; color: #ffd23f; line-height: 1; }
.mf-siuu small { font: 900 .7rem 'Nunito', sans-serif; }
.mf-banniere { border: 2px solid #9146ff; }
/* 😌 le bouton du mode chill, sous la zone de clic (76-mondes-jeux.js) */
.btn-chill { display: block; margin: 6px auto 2px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ligne); background: var(--doux); color: var(--text);
    font: 800 .76rem 'Nunito', sans-serif; cursor: pointer; opacity: .85; }
.btn-chill:hover { opacity: 1; }
.btn-chill.actif { background: color-mix(in srgb, var(--p) 22%, transparent); border-color: var(--p); }
body.deguise .btn-chill { display: none !important; }
/* 🎯 ses vraies miniatures YouTube dans les bannières et l'Examen (79-mentorfr.js) */
.mf-banniere { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mf-mini { display: block; width: min(220px, 70vw); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 2px solid #bf94ff; }
.mf-panneau .mf-mini { width: 100%; max-width: 240px; }
.mf-haut { background-image: linear-gradient(rgba(16, 0, 43, .78), rgba(16, 0, 43, .78)), url('../img/mentorfr/mentorfr-banniere-youtube.jpg'); background-size: cover; background-position: center; }
/* 🎯 le FOND DE LA PAGE du Mode MentorFR (10/10/2026, « le fond, comme Minecraft ») : plus les points, mais sa vraie bannière
   Twitch « Examen Hunter 2026 », en grand, floutée et assombrie derrière tout le jeu, avec un voile violet Twitch. Rien ne bouge. */
body.mode-mentorfr { background-image: none !important; }
body.mode-mentorfr::before { content: ''; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(36, 10, 80, .45), rgba(11, 6, 22, .75)), url('../img/mentorfr/mentorfr-banniere-twitch.jpg') center / cover no-repeat;
    filter: blur(5px) saturate(1.15); }

/* 🩸 LE MODE THE MOST DANGEROUS GAMES (10/10/2026) : le style du site themostdangerousgames.com — noir, rouge sang, or,
   rose néon pour les petites lignes, les polices Oswald et Bebas Neue. Le mur des candidats, les 10 épreuves (80-tmdg.js). */
.tmdg-mode { --p: #c1121f; --s: #d4af37; --bg: #000000; --gold: #d4af37; --panel: #0b0b0b; --text: #f0ebe6; --accent: #ff2d8f; --green: #5dd6e8; --ligne: rgba(193, 18, 31, .35); }
body.mode-tmdg { background: radial-gradient(ellipse at 50% 0%, rgba(193, 18, 31, .18), transparent 60%), radial-gradient(ellipse at 80% 100%, rgba(93, 214, 232, .08), transparent 55%), #000 !important; }
body.mode-tmdg :is(.bangers, .titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .texte-flottant, .pilule b, .btn, .onglet, .art-btn, .bsp-haut b, .codes-titre)
    { font-family: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif !important; letter-spacing: .5px; text-transform: uppercase; }
body.mode-tmdg .logo { font-family: 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: 1px; }
body.mode-tmdg .logo .l2 { color: #c1121f; text-shadow: 0 0 18px rgba(193, 18, 31, .5); }
body.mode-tmdg .logo .l3 { background: none; color: #d4af37; box-shadow: none; transform: none; font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 1.25rem; }
body.mode-tmdg #entete { background: #000 !important; border-bottom: 1px solid #1f1f1f; }
body.mode-tmdg #likes { color: #d4af37; text-shadow: 0 2px 0 #000, 0 0 22px rgba(212, 175, 55, .35); }
body.mode-tmdg .panneau { background: #0b0b0b !important; border: 1px solid #1f1f1f !important; }
body.mode-tmdg :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #c1121f, #7a0010) !important; color: #f0ebe6 !important; box-shadow: 0 4px 0 #3d0008 !important; }
body.mode-tmdg .art-btn:disabled { background: #1a1a1a !important; color: #555 !important; box-shadow: none !important; }
body.mode-tmdg .art-nom { color: #f0ebe6; }
body.mode-tmdg #zone-clic { background: #050505 !important; box-shadow: inset 0 0 0 1px #1f1f1f; }
body.mode-tmdg #avatar { filter: drop-shadow(0 0 18px rgba(193, 18, 31, .55)); }
/* le mur des candidats (silhouettes, jamais de vrais visages) */
.tm-mur { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 3px; padding: 3px; pointer-events: none; opacity: .75; }
.tm-mur i { border-radius: 3px; background: radial-gradient(circle at 50% 36%, #262626 0 17%, transparent 18%), radial-gradient(ellipse 46% 38% at 50% 100%, #262626 0 98%, transparent), #111;
    transition: background-color 1.2s ease, box-shadow 1.2s ease; }
.tm-mur i.rouge { background-color: #4a0008; box-shadow: inset 0 0 0 1px rgba(229, 56, 59, .55); }
.tm-hud { position: absolute; left: 8px; right: 8px; z-index: 7; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; padding: 6px 10px;
    border-radius: 6px; background: rgba(0, 0, 0, .85); border: 1px solid #2a2a2a; color: #f0ebe6; pointer-events: none; text-align: center; }
.tm-haut { top: 8px; font: 600 .72rem 'Oswald', sans-serif; letter-spacing: 1px; }
.tm-haut b { color: #ff2d8f; }
.tm-haut em { font-style: normal; color: #5dd6e8; }
.tm-haut.cache b { visibility: hidden; }
.tm-bas { bottom: 8px; flex-direction: column; align-items: center; gap: 0; }
.tm-or { font: 400 1.7rem/1 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: 1px; color: #d4af37; text-shadow: 0 0 14px rgba(212, 175, 55, .35); }
.tm-bas small, .tm-banniere small { font: 700 .62rem 'Oswald', sans-serif; letter-spacing: 2px; color: #ff2d8f; }
.tm-panneau { position: absolute; left: 50%; top: 46px; translate: -50% 0; z-index: 9; width: min(94%, 330px); display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px;
    border-radius: 8px; background: rgba(0, 0, 0, .95); border: 1px solid #c1121f; color: #f0ebe6; text-align: center; pointer-events: auto; animation: mjApparait .4s ease-out; }
.tm-panneau > b { font: 400 1.6rem/1 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: 1.5px; color: #c1121f; }
.tm-panneau > small { font: 500 .76rem 'Oswald', sans-serif; letter-spacing: .5px; opacity: .9; }
.tm-panneau .tm-num { font: 700 .6rem 'Oswald', sans-serif; letter-spacing: 2px; color: #ff2d8f; }
.tm-barre, .tm-jauge { position: relative; width: 100%; height: 10px; border-radius: 2px; background: #1a1a1a; overflow: hidden; }
.tm-barre i, .tm-jauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #7a0010, #c1121f); }
.tm-jauge span { position: absolute; left: 65%; width: 20%; top: 0; bottom: 0; background: rgba(93, 214, 232, .35); }
.tm-code { font: 400 2rem/1 'Bebas Neue', 'Oswald', monospace; letter-spacing: 6px; color: #d4af37; }
.tm-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.tm-case-btn { aspect-ratio: 1; border: 1px solid #2a2a2a; border-radius: 4px; cursor: pointer; background: radial-gradient(circle at 50% 36%, #2a2a2a 0 17%, transparent 18%), #111; }
.tm-case-btn.indice { box-shadow: inset 0 -3px 0 #d4af37; }
.tm-clavier { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; }
.tm-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tm-choix.col { flex-direction: column; width: 100%; }
.tm-btn { padding: 7px 10px; border: 1px solid #c1121f; border-radius: 4px; cursor: pointer; background: #140003; color: #f0ebe6; font: 600 .9rem 'Oswald', sans-serif; letter-spacing: 1px; touch-action: manipulation; }
.tm-btn.large { padding: 9px 14px; }
.tm-banniere { display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(0, 0, 0, .9) !important; border: 1px solid #c1121f; font-family: 'Oswald', sans-serif !important; }
.tm-banniere span { font: 400 1.6rem 'Bebas Neue', 'Oswald', sans-serif; color: #f0ebe6; }
body.mode-tmdg #avatar-btn { scale: .78; }

/* 🚧 LE MODE BAD HTML (10/10/2026) : badhtml.com, « le site le plus moche d'Internet ». Fond arc-en-ciel FIXE, Comic Sans partout,
   titres jaunes bordés, curseur jaune, neige d'étoiles. ⚠️ RIEN ne clignote (le site original, si) ; photosensible = pas de neige. */
.badhtml-mode { --p: #ff00cc; --s: #ffff00; --bg: #ff00cc; --gold: #ffff00; --panel: #0000aa; --text: #ffffff; --accent: #00ffff; --green: #00ff00; --ligne: rgba(255, 255, 0, .5); }
body.mode-badhtml { background: linear-gradient(135deg, #ff0080 0%, #ff8c00 18%, #ffff00 34%, #00ff66 50%, #00ccff 66%, #6633ff 82%, #ff00cc 100%) fixed !important;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 2L4 24L10 18L14 28L18 26L14 16L22 16Z' fill='%23ffff00' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto; }
body.mode-badhtml *, body.mode-badhtml button { cursor: inherit; }
body.mode-badhtml, body.mode-badhtml * { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive !important; letter-spacing: 0 !important; }
body.mode-badhtml :is(.titre-panneau, #likes, .logo, .sous-titre, .modale h2, .art-nom, .pilule b, .onglet, #combo-texte) { color: #ffff00 !important; text-shadow: 2px 2px 0 #000, -1px -1px 0 #ff00cc !important; }
body.mode-badhtml .logo .l3 { background: #00ff00; color: #ff00cc; transform: rotate(-4deg); }
body.mode-badhtml .panneau { background: linear-gradient(180deg, #0000aa, #6600cc) !important; border: 4px dotted #ffff00 !important; border-radius: 0 !important; }
body.mode-badhtml #entete { background: linear-gradient(90deg, #ff0080, #6633ff) !important; border-bottom: 4px dashed #ffff00 !important; }
body.mode-badhtml :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #e0e0e0, #a0a0a0) !important; color: #0000aa !important; border: 3px outset #fff !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; }
body.mode-badhtml .art-btn:disabled { color: #666 !important; }
body.mode-badhtml .article { background: rgba(0, 0, 0, .25); border: 2px ridge #00ffff !important; border-radius: 0 !important; }
body.mode-badhtml #zone-clic { background: repeating-linear-gradient(45deg, #ff00cc 0 20px, #ff33dd 20px 40px) !important; border: 6px ridge #00ffff !important; border-radius: 0 !important; }
body.mode-badhtml #avatar { animation: none !important; scale: 1 !important; filter: drop-shadow(4px 4px 0 #000) !important; }
/* 👀 les pupilles (81-badhtml.js), posées sur les yeux dessinés */
.bh-yeux { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bh-yeux i { position: absolute; top: 44%; width: 15%; height: 15%; margin: -7.5% 0 0 -7.5%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 12%, #111 14%); transition: transform .08s linear; }
.bh-yeux i:first-child { left: 30%; } .bh-yeux i:last-child { left: 70%; }
/* le bandeau qui défile (lentement), l'horloge, le compteur, la météo, le chantier, 800×600 */
.bh-bandeau { position: absolute; left: 0; right: 0; top: 0; z-index: 7; overflow: hidden; white-space: nowrap; background: #000080; border-bottom: 3px double #ffff00; color: #ffff00; font-size: .78rem; font-weight: 700; padding: 3px 0; pointer-events: none; }
.bh-bandeau span { display: inline-block; padding-left: 100%; animation: bhDefile 26s linear infinite; }
@keyframes bhDefile { to { transform: translateX(-100%); } }
body.photosensible .bh-bandeau span { animation: none; padding-left: 6px; }
.bh-horloge { position: absolute; left: 8px; top: 30px; z-index: 7; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 3px solid #000; box-shadow: 3px 3px 0 #000; pointer-events: none; }
.bh-horloge i { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; background: #000; border-radius: 2px; }
.bh-horloge .bh-h { width: 3px; height: 14px; margin-left: -1.5px; } .bh-horloge .bh-m { width: 2px; height: 20px; margin-left: -1px; } .bh-horloge .bh-s { width: 1px; height: 22px; background: #ff0033; }
.bh-horloge b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ff0033; }
.bh-compteur { position: absolute; right: 8px; top: 30px; z-index: 7; display: flex; align-items: center; gap: 1px; padding: 3px; background: #000; border: 2px outset #888; pointer-events: none; }
.bh-compteur small { color: #fff; font-size: .55rem !important; margin-right: 3px; }
.bh-compteur b { display: inline-block; width: 11px; text-align: center; background: #222; color: #39ff14; font: 700 .85rem "Courier New", monospace !important; }
.bh-meteo { position: absolute; right: 8px; top: 58px; z-index: 7; padding: 2px 6px; background: #fff; border: 2px solid #000; color: #0000aa; text-align: center; line-height: 1.1; pointer-events: none; }
.bh-meteo b { font-size: .8rem; } .bh-meteo small { display: block; font-size: .55rem !important; }
.bh-chantier { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 6; padding: 3px; text-align: center; background: repeating-linear-gradient(45deg, #ffcc00 0 14px, #000 14px 28px); pointer-events: none; }
.bh-chantier span { padding: 1px 8px; background: #ffcc00; color: #000; font-weight: 700; font-size: .72rem; }
.bh-800 { position: absolute; left: 8px; top: 92px; z-index: 7; padding: 2px 5px; background: #c0c0c0; border: 2px outset #fff; color: #000; font-size: .55rem !important; line-height: 1.15; text-align: center; pointer-events: none; }
.bh-800 b { font-size: .75rem; }
.bh-boutons { position: absolute; left: 4px; right: 4px; bottom: 6px; z-index: 8; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
/* les boutons du Mode Bad HTML répondent aux clics (.mj-el les coupait tous : « je peux pas cliquer sur les boutons ») */
.bh-el :is(button, input, a), button.bh-el, .bh-panneau { pointer-events: auto; }
.bh-btn { padding: 4px 8px; border: 3px outset #fff; border-radius: 0; background: linear-gradient(180deg, #e0e0e0, #a0a0a0); color: #0000aa; font-size: .72rem; font-weight: 700; cursor: inherit; touch-action: manipulation; }
.bh-btn:active { border-style: inset; }
.bh-click { position: absolute; z-index: 9; padding: 5px 10px; border: 3px outset #fff; background: #00ff00; color: #ff00cc; font-weight: 900; font-size: .85rem; box-shadow: 3px 3px 0 #000; transition: left .25s ease, top .25s ease; touch-action: manipulation; }
.bh-click span { font-size: 1.1rem; }
body.photosensible .bh-click { transition: none; }
.bh-panneau { position: absolute; left: 50%; top: 34px; translate: -50% 0; z-index: 10; width: min(94%, 300px); background: #c0c0c0; border: 3px outset #fff; box-shadow: 4px 4px 0 #000; color: #000; animation: mjApparait .3s ease-out; }
.bh-barre-titre { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; font-size: .78rem; }
.bh-x { padding: 0 6px; border: 2px outset #fff; background: #c0c0c0; font-size: .7rem; line-height: 1.2; }
.bh-contenu { padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .8rem; }
.bh-blague { margin: 0; font-size: .95rem; color: #0000aa; }
.bh-captcha { display: grid; grid-template-columns: repeat(3, 56px); gap: 4px; }
.bh-case { width: 56px; height: 56px; padding: 2px; border: 2px inset #fff; background: #fff; display: grid; place-items: center; font-size: 1.6rem; }
.bh-case img { width: 100%; height: 100%; object-fit: contain; }
.bh-case.choisi { outline: 4px solid #0066ff; outline-offset: -4px; }
.bh-tetris { display: flex; gap: 8px; align-items: flex-start; }
.bh-tetris > canvas { width: 144px; height: 230px; image-rendering: pixelated; border: 3px inset #fff; background: #000080; }
.bh-info { display: flex; flex-direction: column; align-items: center; gap: 1px; color: #0000aa; }
.bh-info small { font-size: .62rem !important; } .bh-info b { font-size: .95rem; font-family: "Courier New", monospace !important; }
.bh-suivante { margin-top: 6px; border: 2px inset #fff; background: #000080; }
.bh-commandes { display: flex; gap: 4px; }
.bh-commandes .bh-btn { min-width: 38px; font-size: .95rem; }
/* ⭐ la neige d'étoiles, sur toute la page (lente ; aucune en mode photosensible) */
#bh-neige { position: fixed; inset: 0; z-index: 1400; pointer-events: none; overflow: hidden; }
#bh-neige i { position: absolute; top: -30px; color: #fff; font-style: normal; text-shadow: 0 0 3px #000; animation: bhNeige linear infinite; }
@keyframes bhNeige { to { transform: translateY(110vh) rotate(180deg); } }
body.photosensible #bh-neige { display: none; }
/* 🔁 Switch Design : le bouton en bas à gauche, et la version simple (toute blanche) */
#bh-switch { position: fixed; left: 8px; bottom: 90px; z-index: 1500; padding: 6px 10px; border: 3px outset #fff; background: #fff; color: #000; font: 700 .72rem "Comic Sans MS", cursive; line-height: 1.1; box-shadow: 3px 3px 0 #000; }
body.mode-badhtml.bh-simple { background: #ffffff !important; }
body.mode-badhtml.bh-simple, body.mode-badhtml.bh-simple * { font-family: "Times New Roman", Times, serif !important; }
body.mode-badhtml.bh-simple :is(.titre-panneau, #likes, .logo, .sous-titre, .modale h2, .art-nom, .pilule b, .onglet, #combo-texte) { color: #000 !important; text-shadow: none !important; }
body.mode-badhtml.bh-simple :is(.panneau, #entete) { background: #fff !important; border: 1px solid #ccc !important; color: #000; }
body.mode-badhtml.bh-simple #zone-clic { background: #fafafa !important; border: 1px solid #ccc !important; }
body.mode-badhtml.bh-simple #bh-neige { display: none; }
/* ▶️ Mode YouTube (10/10/2026) : les couleurs reviennent (le déguisement grisait la boutique), la vraie vidéo à cliquer,
   les boutons qui marchent (lecture/pause, son, sous-titres, cinéma, plein écran, s'abonner, pouces, partager…) */
body.mode-youtube :is(#col-boutique .panneau, #col-empire .panneau, .modale, #toasts), body.mode-youtube #entete .btn-rond { filter: none !important; }
#avatar-btn .yt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #000; }
body.mode-youtube #avatar-btn:has(.yt-video) #avatar { visibility: hidden; }
.yt-controles { pointer-events: none; }
.yt-cb { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; opacity: .92; }
.yt-cb:hover { opacity: 1; }
.yt-cb.actif { opacity: .55; }
.yt-cc { position: absolute; left: 50%; bottom: 52px; translate: -50% 0; max-width: 90%; padding: 3px 8px; background: rgba(8, 8, 8, .75); color: #fff; font: 400 13px 'Roboto', Arial, sans-serif; text-align: center; border-radius: 3px; }
#yt-sous button { font: inherit; border: 0; cursor: pointer; }
#yt-sous .yt-actions > button, #yt-sous .yt-pouces { padding: 8px 14px; border-radius: 18px; background: var(--w-fond2); color: var(--w-texte); font-size: 14px; font-weight: 500; }
#yt-sous .yt-pouces { display: inline-flex; align-items: center; gap: 6px; }
#yt-sous .yt-pouces button { background: none; padding: 0; color: var(--w-texte); }
#yt-sous .yt-pouces button.actif { color: var(--w-lien); }
#yt-sous .yt-abo.abonne { background: var(--w-fond2) !important; color: var(--w-texte) !important; }
body.yt-cinema.mode-youtube #col-clic { grid-column: 1 / -1 !important; }
/* 🚲 Rider : les onglets et les boutons n'étaient plus lisibles (trop gros, tout en majuscules espacées) */
body.mode-rider :is(.onglet, .btn, .art-btn, .sous-onglet, .qte) { letter-spacing: 0 !important; text-transform: none !important; font-size: .78rem !important; }

/* 🖐️ LE MODE TREI DEGETE (10/10/2026) : le groupe eurodance de Squeezie. Nuit violette, chrome, cyan et rose ;
   Monoton pour le nom, Orbitron pour le reste. ⚠️ Rien ne clignote : les lasers sont fixes, seule l'aiguille du rythme glisse. */
.treidegete-mode { --p: #00e5ff; --s: #ff2fd1; --bg: #0a0033; --gold: #ffd60a; --panel: #1a0b4a; --text: #f3f0ff; --accent: #ff2fd1; --green: #00e5ff; --ligne: rgba(0, 229, 255, .3); }
body.mode-treidegete { background: radial-gradient(ellipse at 50% 0%, rgba(255, 47, 209, .2), transparent 60%), linear-gradient(180deg, #0a0033, #3a0ca3 70%, #7209b7) fixed !important; }
body.mode-treidegete :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre) { font-family: 'Orbitron', 'Exo 2', sans-serif; letter-spacing: .5px; }
body.mode-treidegete .logo { font-family: 'Monoton', 'Orbitron', sans-serif; letter-spacing: 1px; }
body.mode-treidegete .logo .l2 { color: #e0e0e0; text-shadow: 0 2px 0 #607d8b, 0 0 16px rgba(0, 229, 255, .5); }
body.mode-treidegete .logo .l3 { background: linear-gradient(90deg, #00e5ff, #ff2fd1); color: #0a0033; font-family: 'Orbitron', sans-serif; }
body.mode-treidegete #likes { color: #e0f7fa; text-shadow: 0 2px 0 #3a0ca3, 0 0 18px rgba(0, 229, 255, .45); }
body.mode-treidegete #entete { background: linear-gradient(90deg, #0a0033, #3a0ca3) !important; border-bottom: 2px solid #00e5ff; }
body.mode-treidegete .panneau { background: rgba(26, 11, 74, .92) !important; border: 1px solid rgba(0, 229, 255, .35) !important; }
body.mode-treidegete :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #ff2fd1, #a0178a) !important; color: #fff !important; box-shadow: 0 4px 0 #4a0a40 !important; }
body.mode-treidegete .art-btn:disabled { background: #2a1a5a !important; color: #8a80b0 !important; box-shadow: none !important; }
body.mode-treidegete #zone-clic { background: #0a0033 !important; box-shadow: inset 0 0 0 2px rgba(0, 229, 255, .35); }
/* le titre du morceau et la barre du rythme (82-treidegete.js) */
.td-titre { position: absolute; left: 50%; top: 22%; translate: -50% 0; z-index: 6; pointer-events: none; padding: 3px 12px; border-radius: 999px; background: rgba(10, 0, 51, .7); color: #e0f7fa; font: 700 .72rem 'Orbitron', sans-serif; white-space: nowrap; }
.td-titre b { color: #00e5ff; }
.td-rythme { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 7; pointer-events: none; display: grid; gap: 6px; }
.td-barre { position: relative; height: 18px; border-radius: 999px; background: rgba(10, 0, 51, .8); border: 2px solid rgba(0, 229, 255, .5); overflow: hidden; }
.td-barre span { position: absolute; left: 50%; top: 0; bottom: 0; width: 18%; translate: -50% 0; background: rgba(0, 229, 255, .35); border-left: 2px solid #00e5ff; border-right: 2px solid #00e5ff; }
.td-barre i { position: absolute; top: 1px; bottom: 1px; left: 50%; width: 6px; translate: -50% 0; border-radius: 3px; background: #ff2fd1; box-shadow: 0 0 6px rgba(255, 47, 209, .8); }
.td-refrain { display: flex; align-items: center; gap: 8px; color: #fff; font: 700 .66rem 'Orbitron', sans-serif; }
.td-refrain div { flex: 1; height: 8px; border-radius: 999px; background: rgba(10, 0, 51, .8); overflow: hidden; }
.td-refrain div i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #00e5ff, #ff2fd1); transition: width .25s; }
.td-refrain em { min-width: 34px; font-style: normal; color: #ffd60a; text-align: right; }
/* 🚀 le vaisseau traverse la scène de gauche à droite, en glissant */
.td-vaisseau { left: -70px; display: grid; justify-items: center; transition: left 8s linear; animation: none; }
.td-vaisseau img { width: 54px; height: 54px; rotate: 90deg; }
.td-vaisseau small { font: 700 .55rem 'Orbitron', sans-serif; color: #ffd60a; background: rgba(10, 0, 51, .75); padding: 1px 5px; border-radius: 6px; }
.td-vaisseau.vole { left: calc(100% + 10px); }
.td-banniere { color: #fff; border: 2px solid #00e5ff; background: rgba(58, 12, 163, .85); font-family: 'Orbitron', sans-serif; }
body.photosensible .td-vaisseau { transition-duration: 14s; }
body.photosensible .td-refrain div i { transition: none; }

/* ⛈️ LE MODE ICHKANNNICHLESEN (10/10/2026) : son 1er Top 1 sur Fortnite (Chapitre 4 saison 4) et l'Allemand de 4 min 05.
   Violet tempête, Luckiest Guy (le style Fortnite). ⚠️ Rien ne clignote : la tempête est un violet fixe, le cercle glisse lentement. */
.ichkann-mode { --p: #9d4edd; --s: #ffce00; --bg: #10002b; --gold: #ffce00; --panel: #240046; --text: #f3e8ff; --accent: #dd0000; --green: #5bd96b; --ligne: rgba(157, 78, 221, .35); }
body.mode-ichkann { background: radial-gradient(ellipse at 50% 0%, rgba(157, 78, 221, .28), transparent 60%), linear-gradient(180deg, #10002b, #240046 60%, #3c096c) fixed !important; }
body.mode-ichkann :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Luckiest Guy', 'Bangers', sans-serif; letter-spacing: .5px; }
body.mode-ichkann .logo .l2 { color: #fff; text-shadow: 0 3px 0 #5a189a, 0 0 14px rgba(157, 78, 221, .6); }
body.mode-ichkann .logo .l3 { background: linear-gradient(90deg, #000 0 33%, #dd0000 33% 66%, #ffce00 66%); color: #fff; text-shadow: 0 1px 2px #000; }
body.mode-ichkann #entete { background: linear-gradient(90deg, #10002b, #3c096c) !important; border-bottom: 2px solid #9d4edd; }
body.mode-ichkann .panneau { background: rgba(36, 0, 70, .92) !important; border: 1px solid rgba(157, 78, 221, .4) !important; }
body.mode-ichkann :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #ffce00, #e0a800) !important; color: #240046 !important; box-shadow: 0 4px 0 #8a6500 !important; }
body.mode-ichkann .art-btn:disabled { background: #3c2a5a !important; color: #9a8ab0 !important; box-shadow: none !important; }
body.mode-ichkann #zone-clic { background: linear-gradient(180deg, #7ec8e3 0%, #f4a261 55%, #c1440e 100%) !important; }
/* le cercle de la tempête : son ombre géante, c'est le violet tout autour */
.ik-cercle { position: absolute; z-index: 6; pointer-events: none; border-radius: 50%; border: 3px solid #e0aaff; box-shadow: 0 0 0 3000px rgba(90, 24, 154, .5), inset 0 0 18px rgba(224, 170, 255, .5);
    transition: left 5s ease-in-out, top 5s ease-in-out, width 5s ease-in-out, height 5s ease-in-out; }
body.photosensible .ik-cercle { transition: none; }
.ik-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(16, 0, 43, .78); color: #fff; font: .72rem 'Luckiest Guy', sans-serif; letter-spacing: .5px; }
.ik-barre { position: relative; flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ik-barre i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2dc653, #5bd96b); transition: width .3s; }
.ik-barre b { position: relative; display: block; text-align: center; font-size: .6rem; line-height: 12px; }
.ik-fil { position: absolute; left: 8px; bottom: 8px; z-index: 8; pointer-events: none; display: grid; gap: 2px; max-width: 80%; }
.ik-fil p { margin: 0; padding: 2px 8px; border-radius: 6px; background: rgba(16, 0, 43, .72); color: #e9d8fd; font-size: .64rem; font-weight: 700; }
.ik-fil b { color: #ffce00; }
/* 🇩🇪 IchKannNichLesen */
.ik-allemand { width: 74px; display: grid; justify-items: center; gap: 1px; }
.ik-allemand svg { width: 52px; height: 80px; display: block; }
.ik-tag { padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .7); color: #ff6b6b; font: 700 .55rem sans-serif; white-space: nowrap; }
.ik-pv { width: 54px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.ik-pv i { display: block; height: 100%; width: 100%; background: #ff4d4d; transition: width .2s; }
.ik-bulle { position: absolute; left: 70%; top: 18px; padding: 3px 7px; border-radius: 10px; background: #fff; color: #10002b; font: 700 .58rem sans-serif; white-space: nowrap; box-shadow: 2px 2px 0 #10002b; }
.ik-banniere { color: #fff; border: 3px solid #ffce00; background: rgba(60, 9, 108, .9); font-family: 'Luckiest Guy', sans-serif; letter-spacing: 1px; }
.ik-banniere.rate { border-color: #e0aaff; background: rgba(16, 0, 43, .9); }

/* 🟨 LE MODE POGO FIGHT YELLOW (10/10/2026) : le niveau Happy Wheels de sa chaîne Algator01. Blanc et jaune, comme le niveau.
   ⚠️ Pas de sang, rien ne clignote : les combattants éjectés s'envolent en tournant, en 1,2 s. */
.pogofight-mode { --p: #ffd60a; --s: #1d4ed8; --bg: #fffbe6; --gold: #ffb703; --panel: #ffffff; --text: #1b1030; --accent: #c1121f; --green: #2d6a4f; --ligne: rgba(255, 214, 10, .6); }
body.mode-pogofight { background: #fff8cc !important; }
body.mode-pogofight :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: Arial, Helvetica, sans-serif; font-weight: 900; letter-spacing: 0; }
body.mode-pogofight .logo .l2 { color: #1b1030; text-shadow: 2px 2px 0 #ffd60a; }
body.mode-pogofight .logo .l3 { background: #ffd60a; color: #1b1030; }
body.mode-pogofight #likes { color: #1b1030; text-shadow: 2px 2px 0 #ffd60a; }
body.mode-pogofight #entete { background: #ffffff !important; border-bottom: 4px solid #ffd60a; }
body.mode-pogofight .panneau { background: #ffffff !important; border: 2px solid #ffd60a !important; }
body.mode-pogofight :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #f1f1f1, #c9c9c9) !important; color: #1b1030 !important; border: 1px solid #999 !important; box-shadow: none !important; text-shadow: none !important; }
body.mode-pogofight .art-btn:disabled { color: #999 !important; }
body.mode-pogofight #zone-clic { background: #ffffff !important; box-shadow: inset 0 0 0 3px #ffd60a; }
body.mode-pogofight #avatar { filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .18)) !important; }
.pf-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7; pointer-events: none; display: grid; gap: 4px; padding: 5px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); border: 1px solid #c9c9c9; color: #1b1030; font: 700 .66rem Arial, sans-serif; }
.pf-titre { display: flex; gap: 8px; align-items: center; }
.pf-titre span { flex: 1; color: #6c757d; }
.pf-carte { position: relative; height: 22px; display: flex; align-items: flex-end; gap: 2px; padding-right: 18px; border-bottom: 3px solid #ffd60a; }
.pf-carte i { flex: 1; background: #ffd60a; border-radius: 1px 1px 0 0; }
.pf-fin { position: absolute; right: 0; bottom: 0; font-size: .9rem; }
.pf-moi { position: absolute; bottom: 8px; translate: -50% 0; font-size: .9rem; transition: left .3s; }
.pf-saut { height: 4px; border-radius: 2px; background: #eee; overflow: hidden; }
.pf-saut i { display: block; height: 100%; width: 0; background: #1d4ed8; }
.pf-combattant { width: 64px; display: grid; justify-items: center; gap: 2px; }
.pf-combattant svg { width: 50px; height: 84px; display: block; }
.pf-pv { width: 46px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .2); overflow: hidden; }
.pf-pv i { display: block; height: 100%; width: 100%; background: #c1121f; transition: width .2s; }
.pf-combattant.ejecte { pointer-events: none; transition: translate 1.2s ease-in, rotate 1.2s ease-in, opacity 1.2s ease-in; opacity: 0; }
.pf-combattant.ejecte.g { translate: -160px 220px; rotate: -200deg; }
.pf-combattant.ejecte.d { translate: 160px 220px; rotate: 200deg; }
body.photosensible .pf-combattant.ejecte { transition: opacity .6s; translate: none; rotate: none; }
.pf-xd { position: absolute; top: -6px; right: -14px; padding: 1px 6px; border-radius: 8px; background: #fff; border: 2px solid #1b1030; color: #1b1030; font: 900 .7rem Arial, sans-serif; }
.pf-banniere { display: grid; justify-items: center; color: #1b1030; border: 3px solid #ffd60a; background: rgba(255, 255, 255, .95); font-family: Arial, sans-serif; }
.pf-banniere .pf-gg { font-size: 2.4rem; color: #ffd60a; -webkit-text-stroke: 2px #1b1030; line-height: 1; }
.pf-banniere small { font-size: .7rem; color: #6c757d; }
.pf-banniere.rate { border-color: #c1121f; }

/* 🔧 LE MODE KNOCKOUT (10/10/2026) : son clip Rocket League, le mode Knockout dans l'arène néon du désert.
   Orbitron, cyan néon sur violet. ⚠️ AUCUN flash (le vrai jeu explose en blanc) : les voitures éjectées s'envolent doucement. */
.knockout-mode { --p: #00f5d4; --s: #f72585; --bg: #0b1340; --gold: #ffd60a; --panel: #14204f; --text: #e0fbfc; --accent: #f72585; --green: #70e000; --ligne: rgba(0, 245, 212, .3); }
body.mode-knockout { background: linear-gradient(180deg, #3c1053 0%, #ad5389 40%, #0b1340 60%) fixed !important; }
body.mode-knockout :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Orbitron', 'Exo 2', sans-serif; letter-spacing: .5px; }
body.mode-knockout .logo .l2 { color: #e0fbfc; text-shadow: 0 0 12px rgba(0, 245, 212, .6); }
body.mode-knockout .logo .l3 { background: #f72585; color: #fff; font-family: 'Orbitron', sans-serif; }
body.mode-knockout #entete { background: linear-gradient(90deg, #0b1340, #3c1053) !important; border-bottom: 2px solid #00f5d4; }
body.mode-knockout .panneau { background: rgba(20, 32, 79, .92) !important; border: 1px solid rgba(0, 245, 212, .35) !important; }
body.mode-knockout :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #00f5d4, #00a896) !important; color: #0b1340 !important; box-shadow: 0 4px 0 #005f56 !important; }
body.mode-knockout .art-btn:disabled { background: #22305f !important; color: #7d8bb5 !important; box-shadow: none !important; }
body.mode-knockout #zone-clic { background: #0b1340 !important; box-shadow: inset 0 0 0 2px rgba(0, 245, 212, .4); }
.ko-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 10px; background: rgba(11, 19, 64, .82); color: #fff; font: 700 .7rem 'Orbitron', sans-serif; }
.ko-cles i { font-style: normal; margin-right: 1px; }
.ko-cles i.perdue { opacity: .25; filter: grayscale(1); }
.ko-temps { padding: 1px 6px; border-radius: 4px; background: #000; }
.ko-boost { position: relative; flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ko-boost i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff9f1c, #ffd60a); transition: width .2s; }
.ko-boost b { position: relative; display: block; text-align: center; font-size: .58rem; line-height: 12px; }
/* 🚗 une voiture : elle traverse jusqu'au milieu en 5 s */
.ko-voiture { width: 86px; display: grid; justify-items: center; gap: 2px; animation: none; transition: left 5s linear; }
.ko-voiture svg { width: 86px; height: 43px; display: block; }
.ko-voiture.g { left: -90px; } .ko-voiture.d { left: calc(100% + 4px); }
.ko-voiture.d svg { scale: -1 1; }
.ko-voiture.g.fonce, .ko-voiture.d.fonce { left: calc(50% - 43px); }
.ko-pv { width: 50px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.ko-pv i { display: block; height: 100%; width: 100%; background: #f72585; transition: width .2s; }
.ko-voiture.ejecte { pointer-events: none; transition: translate 1.2s ease-in, rotate 1.2s ease-in, opacity 1.2s ease-in; translate: 0 -220px; rotate: 300deg; opacity: 0; }
body.photosensible .ko-voiture.ejecte { transition: opacity .6s; translate: none; rotate: none; }
.ko-banniere { color: #fff; border: 2px solid #00f5d4; background: rgba(11, 19, 64, .9); font-family: 'Orbitron', sans-serif; }
.ko-banniere.rate { border-color: #f72585; }

/* 🎂 LE MODE ANNIVERSAIRE (10/10/2026) : l'anniversaire de sa vidéo du 27 novembre 2021. Rose, jaune, cyan ; Luckiest Guy.
   ⚠️ Rien ne clignote : les flammes et la guirlande sont fixes ; une bougie soufflée s'éteint en .4 s. */
.anniv27-mode { --p: #f72585; --s: #ffd60a; --bg: #fff0f6; --gold: #ffb703; --panel: #ffffff; --text: #3a0d2e; --accent: #4cc9f0; --green: #70e000; --ligne: rgba(247, 37, 133, .3); }
body.mode-anniv27 { background: radial-gradient(circle at 20% 10%, #ffd6e7 0 12%, transparent 13%), radial-gradient(circle at 85% 30%, #caf0f8 0 9%, transparent 10%), radial-gradient(circle at 60% 85%, #fff3b0 0 10%, transparent 11%), #fff0f6 fixed !important; }
body.mode-anniv27 :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Luckiest Guy', 'Bangers', sans-serif; letter-spacing: .5px; }
body.mode-anniv27 .logo .l2 { color: #f72585; text-shadow: 2px 2px 0 #ffd60a; }
body.mode-anniv27 .logo .l3 { background: #4cc9f0; color: #fff; }
body.mode-anniv27 #likes { color: #f72585; text-shadow: 2px 2px 0 #ffd60a; }
body.mode-anniv27 #entete { background: #ffffff !important; border-bottom: 4px dotted #f72585; }
body.mode-anniv27 .panneau { background: #ffffff !important; border: 2px solid #ffc2d9 !important; }
body.mode-anniv27 :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #ff5fa2, #f72585) !important; color: #fff !important; box-shadow: 0 4px 0 #a4135a !important; }
body.mode-anniv27 .art-btn:disabled { background: #f1d5e2 !important; color: #a37a8e !important; box-shadow: none !important; }
body.mode-anniv27 #zone-clic { background: linear-gradient(180deg, #fff0f6, #ffd6e7) !important; box-shadow: inset 0 0 0 3px #ffc2d9; }
.an-hud { position: absolute; left: 8px; right: 8px; top: 34px; z-index: 7; pointer-events: none; display: grid; gap: 4px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .9); color: #3a0d2e; font: 700 .68rem Nunito, sans-serif; text-align: center; }
.an-hud b { color: #f72585; }
.an-avance { height: 6px; border-radius: 3px; background: #ffd6e7; overflow: hidden; }
.an-avance i { display: block; height: 100%; background: linear-gradient(90deg, #4cc9f0, #f72585); }
/* la guirlande de fanions (fixe) */
.an-guirlande { position: absolute; left: 0; right: 0; top: 4px; z-index: 6; pointer-events: none; display: flex; justify-content: space-around; padding: 0 6px; border-top: 2px solid #3a0d2e; }
.an-guirlande i { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid var(--c); }
/* 🕯️ souffle les bougies */
.an-bougies { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 9; pointer-events: none; display: grid; justify-items: center; gap: 4px; padding: 6px 14px; border-radius: 14px; background: rgba(58, 13, 46, .85); color: #fff; font-family: 'Luckiest Guy', sans-serif; }
.an-bougies span { display: flex; gap: 10px; margin-top: 14px; }
.an-bougies i { position: relative; width: 8px; height: 22px; border-radius: 2px; background: #4cc9f0; }
.an-bougies i::before { content: ''; position: absolute; left: 50%; top: -14px; width: 10px; height: 13px; translate: -50% 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #ffb703; opacity: 0; transition: opacity .4s; }
.an-bougies i.on::before { opacity: 1; }
.an-bougies small { font: 700 .62rem Nunito, sans-serif; opacity: .85; }
.an-cadeau { width: 52px; }
.an-cadeau svg { width: 52px; height: 54px; display: block; }

/* 🕵️ les Mondes mystère (10/10/2026) : les mondes à énigme rangés dans une case qu'on ouvre (onglet 🌍 Mondes) */
.mondes-mystere { margin: 0 0 10px; padding: 6px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); background: linear-gradient(135deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12)); }
.mondes-mystere > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 18%, var(--panel)); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.mondes-mystere > summary::-webkit-details-marker { display: none; }
.mondes-mystere > summary .mm-ic { grid-row: span 2; font-size: 1.7rem; }
.mondes-mystere > summary b { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-size: 1.05rem; color: var(--gold); }
.mondes-mystere > summary small { font-size: .7rem; opacity: .75; }
.mondes-mystere[open] > summary { margin-bottom: 8px; }

/* 🌳 LE MODE MES 2 CHÊNES (10/10/2026) : son Short « Mes 2 chaines », façon Paint. Ciel bleu franc, colline verte, Arial Black en « 3D ».
   ⚠️ Rien ne clignote : les chênes grandissent en .6 s. */
.mes2chenes-mode { --p: #12d64b; --s: #1ea7e8; --bg: #e8f7ff; --gold: #f4b400; --panel: #ffffff; --text: #1b2a1b; --accent: #c8875a; --green: #12d64b; --ligne: rgba(18, 214, 75, .4); }
body.mode-mes2chenes { background: linear-gradient(180deg, #1ea7e8 0 55%, #12d64b 55% 85%, #c8875a 85%) fixed !important; }
body.mode-mes2chenes :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Arial Black', Arial, sans-serif; letter-spacing: 0; }
body.mode-mes2chenes .logo .l2 { color: #4a5a3a; text-shadow: 1px 1px 0 #2e3a24, 2px 2px 0 #2e3a24, 3px 3px 0 #1b2416; }
body.mode-mes2chenes .logo .l3 { background: #fff; color: #1b2a1b; font-size: .5rem; }
body.mode-mes2chenes #likes { color: #4a5a3a; text-shadow: 1px 1px 0 #2e3a24, 2px 2px 0 #2e3a24; }
body.mode-mes2chenes #entete { background: #ffffff !important; border-bottom: 4px solid #12d64b; }
body.mode-mes2chenes .panneau { background: #ffffff !important; border: 3px solid #111 !important; border-radius: 6px !important; }
body.mode-mes2chenes :is(.btn, .art-btn, .onglet.actif) { background: #12d64b !important; color: #111 !important; border: 3px solid #111 !important; box-shadow: 3px 3px 0 #111 !important; text-shadow: none !important; }
body.mode-mes2chenes .art-btn:disabled { background: #d8e8d8 !important; color: #7a8a7a !important; box-shadow: none !important; }
body.mode-mes2chenes #zone-clic { background: #1ea7e8 !important; border: 3px solid #111; }
body.mode-mes2chenes #avatar { filter: none !important; }
.ch-titre { position: absolute; left: 50%; top: 4%; translate: -50% 0; rotate: -4deg; z-index: 4; pointer-events: none; white-space: nowrap; font: 900 1.6rem 'Arial Black', Arial, sans-serif; color: #4a5a3a; text-shadow: 1px 1px 0 #2e3a24, 2px 2px 0 #2e3a24, 3px 3px 0 #1b2416, 4px 4px 0 #1b2416; }
.ch-chene { --t: 1; position: absolute; bottom: 8%; z-index: 4; width: 110px; display: grid; justify-items: center; pointer-events: none; transform-origin: 50% 100%; scale: var(--t); transition: scale .6s ease-out; }
.ch-chene.g { left: 1%; } .ch-chene.d { right: 1%; }
.ch-chene svg { width: 96px; height: 110px; display: block; }
.ch-nom { padding: 1px 6px; border-radius: 4px; background: #fff; border: 2px solid #111; font: 900 .55rem Arial, sans-serif; color: #111; white-space: nowrap; }
.ch-barre { width: 70px; height: 7px; border: 2px solid #111; border-radius: 4px; background: #fff; overflow: hidden; }
.ch-barre i { display: block; height: 100%; width: 0; background: #12d64b; transition: width .2s; }
.ch-niv { font: 900 .55rem Arial, sans-serif; color: #111; }
.ch-gland img { width: 34px; height: 40px; display: block; }
.ch-bucheron { width: 66px; display: grid; justify-items: center; gap: 2px; }
.ch-bucheron svg { width: 46px; height: 76px; display: block; }
.ch-pv { width: 46px; height: 5px; border: 1px solid #111; background: #fff; overflow: hidden; }
.ch-pv i { display: block; height: 100%; width: 100%; background: #d62828; transition: width .2s; }
.ch-bulle { position: absolute; left: 60%; top: -8px; padding: 2px 6px; border: 2px solid #111; border-radius: 8px; background: #fff; color: #111; font: 900 .55rem Arial, sans-serif; white-space: nowrap; }
.ch-banniere { color: #4a5a3a; border: 3px solid #111; background: #fff; font-family: 'Arial Black', Arial, sans-serif; text-shadow: 1px 1px 0 #2e3a24, 2px 2px 0 #2e3a24; }
.ch-banniere small { display: block; font: 700 .7rem Arial, sans-serif; color: #111; text-shadow: none; }

/* 📡 LE MODE CODE MORSE (10/10/2026) : le télégraphe, bois et laiton, papier de télégramme, Courier.
   ⚠️ JAMAIS de lumière qui clignote : le morse s'écrit (· et −), c'est tout. */
.morse-mode { --p: #c9a227; --s: #8d6e63; --bg: #2b1d14; --gold: #e0b84a; --panel: #3b2a1e; --text: #f5ead6; --accent: #c62828; --green: #8bc34a; --ligne: rgba(201, 162, 39, .3); }
body.mode-morse { background: repeating-linear-gradient(90deg, #2b1d14 0 22px, #2f2017 22px 44px) fixed !important; }
body.mode-morse :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Courier New', Courier, monospace; font-weight: 700; letter-spacing: 1px; }
body.mode-morse .logo .l2 { color: #e0b84a; transform: scaleX(-1); display: inline-block; }
body.mode-morse .logo .l3 { background: #f5ead6; color: #2b1d14; font-family: 'Courier New', monospace; }
body.mode-morse #likes { color: #e0b84a; }
body.mode-morse #entete { background: #3b2a1e !important; border-bottom: 3px double #c9a227; }
body.mode-morse .panneau { background: rgba(59, 42, 30, .95) !important; border: 1px solid rgba(201, 162, 39, .45) !important; }
body.mode-morse :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #e0b84a, #a8841f) !important; color: #2b1d14 !important; box-shadow: 0 4px 0 #5c4510 !important; font-family: 'Courier New', monospace !important; font-weight: 700 !important; }
body.mode-morse .art-btn:disabled { background: #4a3a2e !important; color: #9a8a7a !important; box-shadow: none !important; }
body.mode-morse #zone-clic { background: radial-gradient(ellipse at 50% 40%, #4a3424, #2b1d14 75%) !important; box-shadow: inset 0 0 0 2px rgba(201, 162, 39, .4); }
.mo-panneau { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7; pointer-events: none; display: grid; gap: 4px; justify-items: center; padding: 6px 8px; border-radius: 4px; background: #f5ead6; color: #2b1d14; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); font-family: 'Courier New', monospace; }
.mo-mot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.mo-mot span { display: grid; justify-items: center; padding: 1px 3px; border-radius: 3px; opacity: .5; }
.mo-mot span b { font-size: 1rem; line-height: 1; }
.mo-mot span small { font-size: .62rem; letter-spacing: 1px; }
.mo-mot span.fait { opacity: .9; color: #2e7d32; }
.mo-mot span.ici { opacity: 1; background: #e0b84a; }
.mo-tape { display: flex; gap: 6px; align-items: baseline; }
.mo-tape small { font-size: .6rem; opacity: .7; }
.mo-tape b { min-width: 60px; font-size: 1.1rem; letter-spacing: 3px; color: #c62828; }
.mo-aide { font-size: .58rem; opacity: .7; }
.mo-message { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 9; display: grid; justify-items: center; gap: 4px; padding: 8px 12px; border-radius: 4px; background: #f5ead6; color: #2b1d14; border: 2px dashed #8d6e63; box-shadow: 0 4px 0 rgba(0, 0, 0, .4); font-family: 'Courier New', monospace; pointer-events: auto; }
.mo-message b { font-size: .75rem; }
.mo-signal { font-size: 1.6rem; font-weight: 700; letter-spacing: 6px; color: #c62828; }
.mo-message small { font-size: .62rem; }
.mo-message div { display: flex; gap: 6px; }
.mo-message button { width: 40px; height: 34px; border: 2px solid #2b1d14; border-radius: 4px; background: #e0b84a; color: #2b1d14; font: 700 1rem 'Courier New', monospace; cursor: pointer; box-shadow: 0 3px 0 #5c4510; }

/* 🔵 LE MODE CBGAMES (10/10/2026) : la vidéo de Polo sur le retour de Happy Wheels. Bleu polo, page de boutique sombre, Oswald.
   ⚠️ Aucun éclair : la mèche de la mine raccourcit doucement, c'est tout. */
.cbgames-mode { --p: #1e63d6; --s: #66c0f4; --bg: #0e1726; --gold: #ffd60a; --panel: #172235; --text: #e6eef8; --accent: #e63946; --green: #5ba32b; --ligne: rgba(102, 192, 244, .3); }
body.mode-cbgames { background: linear-gradient(180deg, #0e1726, #1b2838 60%, #0e1726) fixed !important; }
body.mode-cbgames :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Oswald', 'Bebas Neue', sans-serif; letter-spacing: .5px; }
body.mode-cbgames .logo .l2 { color: #fff; text-shadow: 0 2px 0 #1e63d6; }
body.mode-cbgames .logo .l3 { background: #1e63d6; color: #fff; }
body.mode-cbgames #likes { color: #fff; text-shadow: 0 2px 0 #1e63d6; }
body.mode-cbgames #entete { background: #171a21 !important; border-bottom: 2px solid #1e63d6; }
body.mode-cbgames .panneau { background: rgba(23, 34, 53, .95) !important; border: 1px solid rgba(102, 192, 244, .3) !important; }
body.mode-cbgames :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #75b022, #588a1b) !important; color: #fff !important; box-shadow: 0 3px 0 #2f4a0e !important; border-radius: 3px !important; }
body.mode-cbgames .art-btn:disabled { background: #2a3a50 !important; color: #8a9ab0 !important; box-shadow: none !important; }
body.mode-cbgames #zone-clic { background: radial-gradient(ellipse at 50% 40%, #24406b, #0e1726 75%) !important; box-shadow: inset 0 0 0 2px rgba(102, 192, 244, .35); }
.cb-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7; pointer-events: none; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 6px 10px; border-radius: 4px; background: rgba(23, 26, 33, .9); color: #c6d4df; font-family: Arial, sans-serif; }
.cb-steam b { display: block; color: #fff; font: 700 .9rem 'Oswald', sans-serif; letter-spacing: 1px; }
.cb-steam small, .cb-chiffres small { font-size: .6rem; opacity: .75; }
.cb-chiffres { text-align: right; }
.cb-chiffres b { display: block; color: #66c0f4; font: 700 .8rem 'Oswald', sans-serif; }
.cb-palier { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.cb-palier i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1e63d6, #66c0f4); }
.cb-mine { width: 52px; display: grid; justify-items: center; gap: 2px; }
.cb-mine img { width: 48px; height: 48px; display: block; }
.cb-meche { width: 40px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .4); overflow: hidden; }
.cb-meche i { display: block; height: 100%; width: 100%; background: #ffb703; animation: cbMeche linear forwards; }
@keyframes cbMeche { to { width: 0; } }
body.photosensible .cb-meche i { animation-timing-function: steps(4); }
.cb-com { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 9; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(23, 26, 33, .94); color: #e6eef8; border: 1px solid rgba(102, 192, 244, .35); font: .7rem Arial, sans-serif; pointer-events: auto; }
.cb-com p { flex: 1; margin: 0; }
.cb-avatar { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #2a3a50; }
.cb-com button { padding: 4px 10px; border: 0; border-radius: 3px; background: linear-gradient(180deg, #75b022, #588a1b); color: #fff; font: 700 .7rem Arial, sans-serif; cursor: pointer; }
.cb-banniere { color: #fff; border: 2px solid #66c0f4; background: rgba(23, 26, 33, .94); font-family: 'Oswald', sans-serif; }

/* ⬜ LE MODE GEOMETRY DASH (10/10/2026) : la vidéo de Polo. Bleu nuit et violet FIXES, cube gris, Pixelify Sans.
   ⚠️ Le vrai jeu pulse et clignote : ici les couleurs ne bougent JAMAIS, seuls les pics glissent. */
.geodash-mode { --p: #4cc9f0; --s: #8d99ae; --bg: #10102a; --gold: #ffd60a; --panel: #1b1b3a; --text: #e9ecef; --accent: #2dc653; --green: #2dc653; --ligne: rgba(76, 201, 240, .3); }
body.mode-geodash { background: linear-gradient(180deg, #10102a, #2b2d6e) fixed !important; }
body.mode-geodash :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Pixelify Sans', 'Bangers', sans-serif; letter-spacing: .5px; }
body.mode-geodash .logo .l2 { color: #ffd60a; text-shadow: 2px 2px 0 #1b1030; }
body.mode-geodash .logo .l3 { background: #2dc653; color: #10102a; }
body.mode-geodash #entete { background: #1b1b3a !important; border-bottom: 3px solid #4cc9f0; }
body.mode-geodash .panneau { background: rgba(27, 27, 58, .95) !important; border: 1px solid rgba(76, 201, 240, .35) !important; }
body.mode-geodash :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #2dc653, #1f8f3a) !important; color: #fff !important; box-shadow: 0 4px 0 #0f4a1c !important; border: 2px solid #0b2a10 !important; }
body.mode-geodash .art-btn:disabled { background: #2a2a4a !important; color: #8a8ab0 !important; box-shadow: none !important; }
body.mode-geodash #zone-clic { background: linear-gradient(180deg, #2b2d6e 0%, #3a0ca3 100%) !important; }
.gd-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; background: rgba(16, 16, 42, .8); color: #fff; font: .78rem 'Pixelify Sans', monospace; }
.gd-barre { flex: 1; height: 10px; border: 2px solid #fff; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.gd-barre i { display: block; height: 100%; width: 0; background: #2dc653; }
/* la piste : le cube gris et les pics, en haut de la scène */
.gd-piste { position: absolute; left: 8px; right: 8px; top: 40px; height: 64px; z-index: 7; pointer-events: none; overflow: hidden; border-radius: 6px; background: rgba(16, 16, 42, .55); }
.gd-sol { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #1b1b3a; border-top: 2px solid #4cc9f0; }
.gd-cube { position: absolute; left: 16%; bottom: 12px; width: 26px; height: 26px; translate: -50% 0; transition: bottom calc(var(--dsaut, 520ms) / 2) ease-out; }
.gd-cube img { width: 100%; height: 100%; display: block; }
.gd-cube.saute { bottom: 40px; }
.gd-pic { position: absolute; bottom: 12px; width: 0; height: 0; translate: -50% 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 22px solid #e9ecef; filter: drop-shadow(0 0 0 #1b1030); }
.gd-banniere { color: #fff; border: 3px solid #2dc653; background: rgba(16, 16, 42, .92); font-family: 'Pixelify Sans', monospace; }
.gd-banniere small { display: block; font-size: .7rem; opacity: .8; }
.gd-banniere.rate { border-color: #4cc9f0; }

/* 🪖 LE MODE BOBA FETT (10/10/2026) : le chasseur de primes de « Inspi De Boba Fett » (QovqGlfpp). Vert armure, rouge, désert.
   ⚠️ Rien ne clignote : la caisse où se cache Douza tremble doucement ; le décollage monte et redescend en 1,2 s. */
.bobafett-mode { --p: #4f772d; --s: #c1121f; --bg: #1f1a14; --gold: #ffd166; --panel: #2a241c; --text: #f2e8d5; --accent: #c1121f; --green: #90a955; --ligne: rgba(144, 169, 85, .3); }
body.mode-bobafett { background: linear-gradient(180deg, #3a2f22, #1f1a14 70%) fixed !important; }
body.mode-bobafett :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Orbitron', 'Oswald', sans-serif; letter-spacing: .5px; }
body.mode-bobafett .logo .l2 { color: #90a955; text-shadow: 0 2px 0 #1b1030; }
body.mode-bobafett .logo .l3 { background: #c1121f; color: #fff; }
body.mode-bobafett #entete { background: #2a241c !important; border-bottom: 3px solid #4f772d; }
body.mode-bobafett .panneau { background: rgba(42, 36, 28, .95) !important; border: 1px solid rgba(144, 169, 85, .35) !important; }
body.mode-bobafett :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #90a955, #4f772d) !important; color: #fff !important; box-shadow: 0 4px 0 #2b3d18 !important; }
body.mode-bobafett .art-btn:disabled { background: #3a342a !important; color: #9a907e !important; box-shadow: none !important; }
body.mode-bobafett #zone-clic { background: linear-gradient(180deg, #e9c46a 0%, #f4a261 45%, #c97b3d 100%) !important; }
.bf-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 8; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; background: rgba(31, 26, 20, .82); color: #f2e8d5; font: 700 .7rem 'Orbitron', sans-serif; }
.bf-jet { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.bf-jet i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb703, #c1121f); transition: width .2s; }
#avatar-btn.bf-vole { animation: bfVole 1.2s ease-in-out; }
@keyframes bfVole { 40% { translate: 0 -40px; } 100% { translate: 0 0; } }
body.photosensible #avatar-btn.bf-vole { animation: none; }
.bf-traque { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 9; display: grid; justify-items: center; gap: 6px; pointer-events: auto; }
.bf-affiche { display: grid; justify-items: center; padding: 4px 10px; background: #f2e8d5; border: 3px solid #3b2412; box-shadow: 3px 3px 0 rgba(0, 0, 0, .4); color: #3b2412; font-family: 'Rye', 'Oswald', serif; }
.bf-affiche b { font-size: .9rem; letter-spacing: 2px; }
.bf-affiche span svg { width: 34px; height: 34px; display: block; }
.bf-affiche small { font: 700 .55rem Arial, sans-serif; }
.bf-caisses { display: flex; gap: 10px; }
.bf-caisse { width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.bf-caisse svg { width: 100%; height: 100%; display: block; }
.bf-caisse.habitee:not(:disabled) { animation: bfTremble 1.6s ease-in-out infinite; }
@keyframes bfTremble { 0%, 100% { rotate: 0deg; } 45% { rotate: 0deg; } 55% { rotate: -3deg; } 65% { rotate: 3deg; } 75% { rotate: 0deg; } }
body.photosensible .bf-caisse.habitee:not(:disabled) { animation: none; translate: 0 -3px; }
.bf-caisse.pris { filter: drop-shadow(0 0 0 transparent); }
.bf-caisse.fuit { opacity: .4; }

/* 🎬 LE MODE COULISSES (10/10/2026) : le plateau du clip « ON S'FAIT UN FIFA ? », vu par l'équipe technique.
   Noir de plateau, jaune projecteur, Bebas Neue. ⚠️ JAMAIS d'éclair : un projecteur baisse ou remonte en 0,8 s. */
.coulisses-mode { --p: #ffb703; --s: #4cc9f0; --bg: #111111; --gold: #ffd60a; --panel: #1c1c1c; --text: #f1f1f1; --accent: #e63946; --green: #70e000; --ligne: rgba(255, 183, 3, .3); }
body.mode-coulisses { background: #111 fixed !important; }
body.mode-coulisses :is(.titre-panneau, #likes, #combo-texte, .sous-titre, .gros-chiffre, .modale h2, .ct-titre, .pilule b, .bsp-haut b, .codes-titre, .logo) { font-family: 'Bebas Neue', 'Oswald', sans-serif; letter-spacing: 1px; }
body.mode-coulisses .logo .l2 { color: #ffb703; }
body.mode-coulisses .logo .l3 { background: #f1f1f1; color: #111; }
body.mode-coulisses #entete { background: #1c1c1c !important; border-bottom: 3px solid #ffb703; }
body.mode-coulisses .panneau { background: rgba(28, 28, 28, .96) !important; border: 1px solid rgba(255, 183, 3, .3) !important; }
body.mode-coulisses :is(.btn, .art-btn, .onglet.actif) { background: linear-gradient(180deg, #ffd60a, #ffb703) !important; color: #111 !important; box-shadow: 0 4px 0 #7a5600 !important; }
body.mode-coulisses .art-btn:disabled { background: #2a2a2a !important; color: #888 !important; box-shadow: none !important; }
body.mode-coulisses #zone-clic { background: radial-gradient(ellipse at 50% 70%, #2b2b2b, #0c0c0c 75%) !important; }
.co-titre { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 7; pointer-events: none; padding: 3px 12px; border-radius: 4px; background: #f1f1f1; color: #111; font: .8rem 'Bebas Neue', sans-serif; letter-spacing: 1px; white-space: nowrap; }
.co-projos { position: absolute; left: 0; right: 0; top: 6px; z-index: 8; display: flex; justify-content: space-around; pointer-events: none; }
.co-projo { width: 54px; height: 54px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.co-projo svg { width: 100%; height: 100%; display: block; }
.co-projo .co-lampe { fill: #ffe8a3; transition: fill .8s ease; }
.co-projo.baisse .co-lampe { fill: #5c5240; transition: fill var(--delai, 5000ms) linear; }
.co-projo.baisse { filter: drop-shadow(0 0 0 transparent); }
.co-faisceaux { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 18% 60% at 18% 10%, rgba(255, 232, 163, .16), transparent 70%), radial-gradient(ellipse 18% 60% at 50% 10%, rgba(255, 232, 163, .16), transparent 70%), radial-gradient(ellipse 18% 60% at 82% 10%, rgba(255, 232, 163, .16), transparent 70%); }
.co-montage { position: absolute; left: 8px; right: 8px; bottom: 40px; z-index: 9; display: grid; gap: 6px; justify-items: center; padding: 8px; border-radius: 6px; background: rgba(17, 17, 17, .94); border: 1px solid rgba(255, 183, 3, .5); color: #f1f1f1; pointer-events: auto; }
.co-montage > b { font: .8rem 'Bebas Neue', sans-serif; letter-spacing: 1px; color: #ffb703; }
.co-plans { display: flex; gap: 8px; }
.co-plans button { position: relative; width: 74px; padding: 6px 4px; border: 2px solid #f1f1f1; border-radius: 4px; background: #2b2b2b; color: #fff; cursor: pointer; display: grid; justify-items: center; }
.co-plans button span { font-size: 1.4rem; }
.co-plans button small { font-size: .55rem; }
.co-plans button i { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #ffb703; color: #111; font: 700 .65rem Arial, sans-serif; font-style: normal; display: grid; place-items: center; }
.co-plans button.pose { opacity: .35; }
.co-timeline { display: flex; gap: 2px; padding: 3px; border-radius: 3px; background: #000; }
.co-timeline span { width: 56px; height: 24px; display: grid; place-items: center; border-radius: 2px; background: #333; color: #777; font: 700 .7rem Arial, sans-serif; }
.co-timeline span.plein { background: #4cc9f0; color: #111; font-size: 1rem; }
.co-banniere { color: #111; border: 3px solid #111; background: #ffb703; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.co-banniere.rate { background: #f1f1f1; }

/* 📝 LE MODE WIKI R9 (10/10/2026) : sa page « Coupe R9 ». Une page d'encyclopédie (blanc, gris, liens bleus, titres serif), sans logo. Rien ne clignote. */
.wikir9-mode { --p: #3366cc; --s: #a2a9b1; --bg: #f8f9fa; --gold: #ac6600; --panel: #ffffff; --text: #202122; --accent: #d33; --green: #14866d; --ligne: rgba(162, 169, 177, .6); }
body.mode-wikir9 { background: #f6f6f6 !important; }
body.mode-wikir9 :is(.titre-panneau, #likes, .sous-titre, .modale h2, .ct-titre, .logo) { font-family: 'Georgia', 'Linux Libertine', 'Times New Roman', serif; font-weight: 400; letter-spacing: 0; }
body.mode-wikir9 .logo .l2 { color: #202122; }
body.mode-wikir9 .logo .l3 { background: #eaecf0; color: #202122; }
body.mode-wikir9 #likes { color: #202122; }
body.mode-wikir9 #entete { background: #ffffff !important; border-bottom: 1px solid #a2a9b1; }
body.mode-wikir9 .panneau { background: #ffffff !important; border: 1px solid #a2a9b1 !important; border-radius: 2px !important; }
body.mode-wikir9 :is(.btn, .art-btn, .onglet.actif) { background: #f8f9fa !important; color: #3366cc !important; border: 1px solid #a2a9b1 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 2px !important; }
body.mode-wikir9 .art-btn:disabled { color: #a2a9b1 !important; }
body.mode-wikir9 #zone-clic { background: #ffffff !important; box-shadow: inset 0 0 0 1px #a2a9b1; }
body.mode-wikir9 #avatar { filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .12)) !important; }
.wr-hud { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7; pointer-events: none; display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; border-bottom: 1px solid #a2a9b1; background: #fff; color: #202122; font: .7rem Arial, sans-serif; }
.wr-onglets { display: flex; gap: 10px; }
.wr-onglets b { font-weight: 400; border-bottom: 2px solid #3366cc; color: #202122; }
.wr-onglets i { font-style: normal; color: #3366cc; }
.wr-faute, .wr-cat { position: absolute; left: 8px; right: 8px; top: 36px; z-index: 9; padding: 8px 10px; border: 1px solid #a2a9b1; border-left: 4px solid #3366cc; background: #f8f9fa; color: #202122; font: .78rem Georgia, serif; pointer-events: auto; }
.wr-faute b, .wr-cat b { display: block; margin-bottom: 4px; font: 700 .68rem Arial, sans-serif; color: #54595d; }
.wr-faute p { margin: 0; line-height: 1.7; }
.wr-faute button { padding: 0 2px; border: 0; background: none; color: #202122; font: inherit; cursor: pointer; border-radius: 2px; }
.wr-faute button:hover { background: #eaf3ff; }
.wr-faute button.corrige { background: #d5fdf4; color: #14866d; font-weight: 700; }
.wr-faute button.non { color: #a2a9b1; }
.wr-cat div { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-cat button { padding: 3px 8px; border: 1px solid #a2a9b1; border-radius: 2px; background: #fff; color: #3366cc; font: .75rem Arial, sans-serif; cursor: pointer; }