/* =====================================================================
   GTA 6 IA — style.css v2  (remplace public/style.css)
   Règles : couleurs via variables, animations transform/opacity/filter
   uniquement, .nomotion + prefers-reduced-motion coupent tout.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- 1. Tokens & thèmes ---------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --bg:#0b0614;--bg2:#160a28;--bg3:#211036;
  --card:rgba(255,236,250,.05);--card2:rgba(255,236,250,.085);--bd:rgba(255,214,240,.13);
  --tx:#fff4fb;--mut:#c2aed6;
  --a:#ff2e93;--b:#ff8a1f;--c:#8a3cff;
  --grad:linear-gradient(120deg,var(--b),var(--a) 52%,var(--c));
  --grad-v:linear-gradient(180deg,var(--b),var(--a) 55%,var(--c));
  --glow:0 0 0 1px color-mix(in srgb,var(--a) 70%,transparent),0 0 18px color-mix(in srgb,var(--a) 65%,transparent),0 0 46px color-mix(in srgb,var(--a) 30%,transparent);
  --glow-s:0 0 14px color-mix(in srgb,var(--a) 55%,transparent);
  --ok:#4dffa6;--bad:#ff4d6a;
  --r:18px;--r-s:12px;
  --fd:'Bebas Neue','Anton',Impact,'Arial Narrow',sans-serif;
  --fx:'Anton','Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --fb:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --nav:88px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
}
[data-theme=vice]{
  --bg:#04101c;--bg2:#071e36;--bg3:#0a2a48;
  --card:rgba(140,255,244,.045);--card2:rgba(140,255,244,.08);--bd:rgba(80,240,225,.2);
  --tx:#eafffd;--mut:#9fd0de;
  --a:#18f0dc;--b:#ff3da5;--c:#3d7bff;
  --grad:linear-gradient(120deg,var(--a),var(--c) 50%,var(--b));
  --grad-v:linear-gradient(180deg,var(--a),var(--c) 50%,var(--b));
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font:500 15px/1.55 var(--fb);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--a);text-decoration:none}a:hover{color:var(--tx)}
::selection{background:color-mix(in srgb,var(--a) 45%,transparent)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:9px}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--a) 50%,transparent)}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:12px}
svg.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- 3. Décor de fond (#bg) ---------- */
#bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg);pointer-events:none}
#bg .halo{position:absolute;inset:0;background:
  radial-gradient(900px 520px at 82% -8%,color-mix(in srgb,var(--c) 42%,transparent),transparent 62%),
  radial-gradient(800px 520px at -8% 108%,color-mix(in srgb,var(--a) 30%,transparent),transparent 62%),
  radial-gradient(700px 380px at 55% 112%,color-mix(in srgb,var(--b) 26%,transparent),transparent 65%)}
/* soleil : GTA6 = orbe coucher de soleil flou, Vice = soleil rétro rayé */
#bg .sun{position:absolute;left:50%;bottom:22%;width:min(60vmin,560px);aspect-ratio:1;margin-left:calc(min(60vmin,560px)/-2);border-radius:50%;background:var(--grad-v);opacity:.16;filter:blur(40px);transform:translateZ(0)}
[data-theme=vice] #bg .sun{bottom:34%;opacity:.55;filter:none;background:linear-gradient(180deg,#ffe36b,#ff3da5 55%,#8a3cff);
  -webkit-mask:linear-gradient(#000 48%,transparent 48% 52%,#000 52% 60%,transparent 60% 65%,#000 65% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%);
          mask:linear-gradient(#000 48%,transparent 48% 52%,#000 52% 60%,transparent 60% 65%,#000 65% 72%,transparent 72% 78%,#000 78% 84%,transparent 84% 91%,#000 91%);
  box-shadow:0 0 120px #ff3da5}
#bg .city{position:absolute;left:0;right:0;bottom:33%;width:100%;height:16vh;fill:color-mix(in srgb,var(--bg) 80%,#000);opacity:0;transition:opacity .6s}
[data-theme=vice] #bg .city{opacity:.95}
/* grille synthwave (transform-only) */
#bg .floor{position:absolute;left:-50%;right:-50%;bottom:0;height:34%;perspective:300px;perspective-origin:50% 0;overflow:hidden;opacity:0;transition:opacity .6s;
  -webkit-mask:linear-gradient(transparent,#000 55%);mask:linear-gradient(transparent,#000 55%)}
[data-theme=vice] #bg .floor{opacity:1}
#bg .floor i{position:absolute;left:0;right:0;top:-120%;bottom:0;transform-origin:50% 100%;transform:rotateX(64deg);will-change:transform;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--a) 55%,transparent) 0 2px,transparent 2px 80px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--a) 55%,transparent) 0 2px,transparent 2px 48px);
  animation:floor 1.4s linear infinite}
@keyframes floor{to{transform:rotateX(64deg) translate3d(0,48px,0)}}
[data-theme=vice] #bg .halo{background:radial-gradient(900px 500px at 50% 62%,color-mix(in srgb,var(--b) 26%,transparent),transparent 65%),radial-gradient(800px 600px at 90% -10%,color-mix(in srgb,var(--c) 40%,transparent),transparent 60%),radial-gradient(700px 500px at 0% 0%,color-mix(in srgb,var(--a) 16%,transparent),transparent 60%)}
/* grain + scanlines */
#bg::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#bg::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}

/* ---------- 4. Shell & navigation ---------- */
#app{display:flex;height:100dvh}
nav{position:relative;width:var(--nav);flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 92%,transparent),color-mix(in srgb,var(--bg) 70%,transparent));border-right:1px solid var(--bd);overflow-y:auto;overflow-x:hidden;z-index:20;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
.logo{font:400 28px/.9 var(--fx);letter-spacing:.5px;text-align:center;margin:2px 0 14px;background:var(--grad-v);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--a) 60%,transparent))}
.nav-ind{position:absolute;left:10px;top:0;width:calc(100% - 20px);height:var(--ih,58px);border-radius:16px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a) 26%,transparent),color-mix(in srgb,var(--c) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 55%,transparent),0 0 22px -4px var(--a);
  transform:translate3d(var(--ix,0),var(--iy,0),0);transition:transform .45s var(--spring),opacity .3s;will-change:transform}
.nav-ind::after{content:"";position:absolute;left:50%;bottom:-1px;width:26px;height:3px;margin-left:-13px;border-radius:3px;background:var(--a);box-shadow:0 0 10px var(--a)}
.nb{position:relative;z-index:1;width:100%;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px;border-radius:16px;color:var(--mut);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;transition:color .2s,transform .3s var(--spring)}
.nb i{font-style:normal;font-size:20px;line-height:1;transition:transform .35s var(--spring),filter .3s}
.nb:hover{color:var(--tx)}.nb:hover i{transform:translateY(-2px) scale(1.12)}
.nb:active{transform:scale(.9)}
.nb.on{color:var(--tx)}
.nb.on i{color:var(--a);filter:drop-shadow(0 0 6px var(--a))}
.nb .dot{position:absolute;top:6px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--a);color:var(--bg);font:800 10px/17px var(--fb);letter-spacing:0;box-shadow:0 0 10px var(--a);animation:dot 2.4s var(--spring) infinite}
.nb .dot::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:1.5px solid var(--a);animation:ring 2.4s ease-out infinite}
@keyframes dot{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.25)}86%{transform:scale(.95)}}
@keyframes ring{0%,60%{opacity:0;transform:scale(1)}70%{opacity:.9}100%{opacity:0;transform:scale(1.8)}}
main{flex:1;min-width:0;position:relative}

/* ---------- 5. Pages & transitions ---------- */
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:30px clamp(16px,3.4vw,56px) 72px;opacity:0;pointer-events:none;transform:translate3d(0,22px,0) scale(.985);filter:blur(4px);transition:opacity .38s var(--ease),transform .55s var(--out),filter .4s;will-change:transform,opacity;scroll-behavior:smooth}
.page.on{opacity:1;pointer-events:auto;transform:none;filter:none}
.page:not(#p-chat)>*{max-width:1680px;margin-inline:auto}
/* stagger 30 ms (--i posé par fx.js) */
.page.on .card,.page.on .chip,.page.on>h2,.page.on>.sub{animation:rise .6s var(--out) backwards;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes rise{from{opacity:0;translate:0 18px;scale:.97}}
.page.on>h2{--i:0}.page.on>.sub{--i:2}

/* ---------- 6. Typographie ---------- */
h1,h2,h3{font-family:var(--fd);font-weight:400;letter-spacing:1.5px;line-height:.95;text-wrap:balance}
h1{font:400 clamp(56px,9vw,132px)/.86 var(--fx);letter-spacing:.5px}
h2{font-size:clamp(38px,4.8vw,64px);margin-bottom:8px}
h3{font-size:26px}
.neon{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--a) 50%,transparent))}
.sub{color:var(--mut);margin-bottom:22px;max-width:70ch;text-wrap:pretty}

/* ---------- 7. Boutons ---------- */
.btn{--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 22px;border-radius:999px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;font-size:13px;background:var(--grad);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 8px 26px -8px var(--a),inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .35s var(--spring),translate .5s var(--spring),box-shadow .3s,filter .3s,opacity .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(140px circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 60%);opacity:0;transition:opacity .25s}
.btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:var(--glow),0 12px 30px -10px var(--a)}.btn:hover::before{opacity:1}
.btn:active{transform:scale(.93);transition-duration:.12s}
.btn.ghost{background:var(--card2);color:var(--tx);text-shadow:none;box-shadow:inset 0 0 0 1px var(--bd)}
.btn.ghost::before{background:radial-gradient(140px circle at var(--mx) var(--my),color-mix(in srgb,var(--a) 40%,transparent),transparent 65%)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--a),var(--glow-s)}
.btn.sm{white-space:nowrap;min-height:36px;padding:8px 15px;font-size:11.5px}
.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed;opacity:.45;filter:saturate(.3);transform:none;box-shadow:inset 0 0 0 1px var(--bd)}
.btn:disabled::before{display:none}
.rip{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),color-mix(in srgb,var(--a) 40%,transparent) 60%,transparent 70%);transform:scale(0);animation:rip .65s var(--out) forwards;pointer-events:none;z-index:0}
@keyframes rip{to{transform:scale(3.2);opacity:0}}
.ib{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:18px;background:var(--card2);border:1px solid var(--bd);color:var(--tx);transition:transform .35s var(--spring),border-color .2s,box-shadow .3s,background .2s;position:relative;overflow:hidden}
.ib:hover{border-color:var(--a);transform:scale(1.08);box-shadow:var(--glow-s)}.ib:active{transform:scale(.88);transition-duration:.1s}
.ib.send{background:var(--grad);border:0;color:#fff;box-shadow:0 6px 20px -6px var(--a)}
.ib.on{background:var(--a);color:var(--bg);box-shadow:var(--glow);animation:mic 1.2s ease-in-out infinite}
@keyframes mic{50%{transform:scale(1.08)}}
.chip{flex:none;position:relative;overflow:hidden;min-height:36px;display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;background:var(--card2);border:1px solid var(--bd);font-size:13px;font-weight:700;color:var(--tx);white-space:nowrap;transition:transform .3s var(--spring),border-color .2s,box-shadow .3s,background .2s}
.chip:hover{border-color:var(--a);transform:translateY(-2px);box-shadow:var(--glow-s)}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 0 18px -3px var(--a)}

/* ---------- 8. Cartes ---------- */
.card{--mx:50%;--my:50%;position:relative;background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transform-style:preserve-3d;
  transition:transform .45s var(--out),border-color .25s,box-shadow .4s}
.grid>.card,.hs>.card,.mas>.card{contain:layout paint}
/* reflet qui suit la souris */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;background:radial-gradient(300px circle at var(--mx) var(--my),color-mix(in srgb,var(--a) 24%,transparent),transparent 60%),radial-gradient(160px circle at var(--mx) var(--my),rgba(255,255,255,.1),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
/* bordure néon tournante (conic) */
.card:where(:not(.tl>*))::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 52%,var(--b) 66%,var(--a) 78%,var(--c) 90%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .35s}
.card:hover{border-color:color-mix(in srgb,var(--a) 40%,transparent);box-shadow:0 18px 50px -18px var(--a),0 0 0 1px color-mix(in srgb,var(--a) 20%,transparent)}
.card:hover::after{opacity:1}
.card:hover::before{opacity:1;animation:spin 2.6s linear infinite}
@keyframes spin{to{--ang:360deg}}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.8px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 10%,transparent)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.b-Officiel,.b-Confirmé{color:#4dffa6}.b-Probable{color:#ffd34d}.b-Rumeur{color:#ff9a4d}.b-Faux{color:#ff6b84}.b-Leak{color:#c9a0ff}.b-News{color:var(--a)}
/* skeleton */
.skel>.sub,#nl:empty{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:18px}
.skel>.sub{font-size:0;color:transparent;grid-column:1/-1;margin:0}
.skel>.sub::before,.skel>.sub::after,#nl:empty::before,#nl:empty::after{content:"";height:132px;border-radius:var(--r);border:1px solid var(--bd);
  background:linear-gradient(100deg,var(--card) 30%,color-mix(in srgb,var(--a) 14%,var(--card2)) 50%,var(--card) 70%) 0 0/300% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-150% 0}}

/* ---------- 9. Accueil / hero ---------- */
.hero{position:relative;border-radius:28px;overflow:hidden;min-height:min(68vh,620px);display:flex;align-items:flex-end;padding:clamp(22px,4.4vw,60px);border:1px solid var(--bd);isolation:isolate;contain:paint}
.hero:hover{transform:none!important}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;padding:0;opacity:1!important;animation:none!important;-webkit-mask:none;mask:none;background:
  linear-gradient(0deg,var(--bg) 2%,color-mix(in srgb,var(--bg) 40%,transparent) 30%,transparent 62%),
  linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 55%,transparent) 45%,transparent 75%),
  radial-gradient(70% 60% at 0% 100%,color-mix(in srgb,var(--a) 34%,transparent),transparent 70%)}
.hero::after{display:none}
.hero video,.hero img.bgi{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;z-index:-3;will-change:transform;transition:transform .9s var(--out)}
.page.on .hero .pl{animation:heroIn 1.6s var(--out) backwards}
@keyframes heroIn{from{scale:1.14;opacity:0;filter:saturate(1.6)}}
.hero canvas.dust{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;mix-blend-mode:screen}
.hero .tag{display:flex;width:fit-content;align-items:center;gap:10px;font:700 12px var(--fb);letter-spacing:4px;text-transform:uppercase;color:var(--tx);margin-bottom:10px}
.hero .tag::before{content:"";width:34px;height:2px;background:var(--grad);box-shadow:0 0 10px var(--a)}
.hero h1{position:relative;display:block;width:fit-content;margin-bottom:10px;cursor:default}
.hero p{font-size:clamp(15px,1.3vw,18px);text-wrap:pretty}
/* glitch / aberration chromatique */
.hero h1[data-text]::before,.hero h1[data-text]::after{content:attr(data-text);position:absolute;inset:0;-webkit-text-fill-color:currentColor;opacity:0;pointer-events:none;mix-blend-mode:screen}
.hero h1[data-text]::before{color:#ff2e6a;transform:translate(-3px,0)}
.hero h1[data-text]::after{color:#2ee6ff;transform:translate(3px,0)}
.hero h1[data-text]:hover::before{opacity:.85;animation:gl1 .6s steps(2) infinite}
.hero h1[data-text]:hover::after{opacity:.85;animation:gl2 .5s steps(2) infinite}
@keyframes gl1{0%{clip-path:inset(10% 0 60% 0);transform:translate(-4px,-1px)}25%{clip-path:inset(55% 0 20% 0);transform:translate(-2px,1px)}50%{clip-path:inset(30% 0 45% 0);transform:translate(-5px,0)}75%{clip-path:inset(80% 0 4% 0);transform:translate(-1px,0)}100%{clip-path:inset(0 0 85% 0);transform:translate(-3px,1px)}}
@keyframes gl2{0%{clip-path:inset(65% 0 10% 0);transform:translate(4px,1px)}33%{clip-path:inset(15% 0 70% 0);transform:translate(2px,-1px)}66%{clip-path:inset(40% 0 35% 0);transform:translate(5px,0)}100%{clip-path:inset(85% 0 0 0);transform:translate(3px,0)}}
/* compte à rebours à chiffres roulants */
.cd{display:flex;gap:10px;margin:22px 0 24px;flex-wrap:wrap}
.cd div{position:relative;min-width:84px;padding:12px 10px 10px;text-align:center;border-radius:16px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.35));border:1px solid var(--bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.cd div::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1px;background:rgba(255,255,255,.08)}
.cd b{display:flex;justify-content:center;overflow:hidden;font:400 46px/1 var(--fx);color:var(--tx);text-shadow:0 0 18px var(--a),0 0 2px var(--a);height:46px}
.cd b span{display:inline-block;font:inherit;letter-spacing:0;color:inherit;text-transform:none;margin:0}
.cd b span.roll{animation:roll .5s var(--spring)}
@keyframes roll{from{transform:translate3d(0,-100%,0);opacity:0;filter:blur(2px)}}
.cd span{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--mut)}
.cd>div>span{display:block;margin-top:6px}
.sec{margin-top:44px}.sec>.row{justify-content:space-between;margin-bottom:14px}
.sec>.row h2{margin:0}
.hs{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 18px;margin:0 -4px;scroll-snap-type:x proximity;scrollbar-width:thin}.hs>*{flex:none;scroll-snap-align:start}
.tile{width:min(320px,72vw);aspect-ratio:16/10;cursor:pointer}
.tile img,.pc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--out),filter .5s}
.card:hover img{transform:scale(1.08)}
.tile .cap,.pc .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 16px 13px;background:linear-gradient(transparent,rgba(0,0,0,.88));font:400 24px/1 var(--fd);letter-spacing:1.2px;text-transform:uppercase;transform:translateZ(20px)}
.news-i{padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;min-height:132px}
.news-i h4{font-size:17px;line-height:1.3;font-weight:700;text-wrap:pretty}.news-i small{color:var(--mut)}
.news-i>.row:last-child{margin-top:auto}

/* ---------- 10. Chat ---------- */
#p-chat{padding:0;display:flex;flex-direction:column}
.chat-top{display:flex;align-items:center;gap:12px;padding:12px clamp(14px,3vw,40px);border-bottom:1px solid var(--bd);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.chat-top h2{margin:0;font-size:34px;flex:1}
#msgs{flex:1;overflow-y:auto;padding:26px clamp(14px,6vw,140px);display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.m{position:relative;max-width:min(780px,88%);padding:13px 18px;border-radius:22px;line-height:1.6;animation:pop .5s var(--spring);word-wrap:break-word}
@keyframes pop{from{opacity:0;transform:translate3d(0,14px,0) scale(.96)}}
.m.u{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px;box-shadow:0 10px 30px -10px var(--a),inset 0 1px 0 rgba(255,255,255,.3);transform-origin:100% 100%}
.m.a{align-self:flex-start;margin-left:46px;background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--bd);border-bottom-left-radius:6px;box-shadow:0 0 30px -14px var(--a);transform-origin:0 100%}
/* avatar IA : anneau néon */
.m.a::before{content:"";position:absolute;left:-46px;bottom:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--bg) 52%,transparent 54%),conic-gradient(from var(--ang),var(--b),var(--a),var(--c),var(--b));box-shadow:0 0 14px -2px var(--a)}
.m.a::after{content:"IA";position:absolute;left:-46px;bottom:0;width:34px;height:34px;display:grid;place-items:center;font:400 14px/1 var(--fx);letter-spacing:.5px;color:var(--tx)}
.m.a.think::before,.m.a.live::before{animation:spin 1.4s linear infinite,think 1.4s ease-in-out infinite}
@keyframes think{50%{transform:scale(1.12);box-shadow:0 0 26px 2px var(--a)}}
.m p{margin:.35em 0}.m ul,.m ol{padding-left:20px;margin:.45em 0}.m li{margin:.15em 0}.m li::marker{color:var(--a)}
.m code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:6px;font-size:.92em}
.m h4{font:400 22px var(--fd);letter-spacing:1px;color:var(--a);margin-top:.5em}
.m b{color:var(--tx)}.m.a b{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--a) 32%,transparent) 62%)}
.m table{border-collapse:collapse;margin:8px 0;font-size:13px}.m td,.m th{border:1px solid var(--bd);padding:5px 9px}
.m .w{animation:wordIn .42s var(--ease) both}
@keyframes wordIn{from{opacity:0;filter:blur(3px);text-shadow:0 0 12px var(--a)}}
.m.a.live>:last-child::after{content:"";display:inline-block;width:8px;height:1.05em;margin-left:3px;vertical-align:-2px;border-radius:2px;background:var(--a);box-shadow:0 0 10px var(--a);animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.typing{display:inline-flex;gap:5px;padding:4px 0}
.typing i{display:block;width:8px;height:8px;border-radius:50%;background:var(--a);box-shadow:0 0 10px var(--a);animation:bn 1.1s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.15s;background:color-mix(in srgb,var(--a) 50%,var(--c))}.typing i:nth-child(3){animation-delay:.3s;background:var(--c)}
@keyframes bn{0%,100%{transform:translate3d(0,0,0);opacity:1}40%{transform:translate3d(0,-7px,0) scale(1.15);opacity:.5}}
.chat-in{padding:12px clamp(14px,6vw,140px) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--bd);background:color-mix(in srgb,var(--bg) 78%,transparent)}
.compose{display:flex;align-items:flex-end;gap:8px;padding:7px 7px 7px 18px;border-radius:28px;background:var(--card2);border:1px solid var(--bd);transition:border-color .2s,box-shadow .3s}
.compose:focus-within{border-color:var(--a);box-shadow:var(--glow)}
.compose textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:140px;padding:10px 0;line-height:1.45}
.compose textarea::placeholder{color:var(--mut)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
#qp .chip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translate3d(-120%,0,0);animation:sheen 5s var(--ease) infinite;pointer-events:none}
#qp .chip:nth-child(2)::after{animation-delay:.35s}#qp .chip:nth-child(3)::after{animation-delay:.7s}#qp .chip:nth-child(4)::after{animation-delay:1.05s}#qp .chip:nth-child(5)::after{animation-delay:1.4s}#qp .chip:nth-child(6)::after{animation-delay:1.75s}#qp .chip:nth-child(7)::after{animation-delay:2.1s}
@keyframes sheen{0%,70%{transform:translate3d(-120%,0,0)}100%{transform:translate3d(320%,0,0)}}
#drawer{position:absolute;top:0;bottom:0;left:0;width:min(330px,86vw);z-index:15;background:color-mix(in srgb,var(--bg2) 96%,transparent);border-right:1px solid var(--bd);box-shadow:30px 0 60px -20px rgba(0,0,0,.6);transform:translate3d(-104%,0,0);transition:transform .5s var(--out);padding:18px;overflow-y:auto}
#drawer.on{transform:none}
.ci{display:flex;gap:8px;align-items:center;min-height:48px;padding:8px 10px 8px 14px;border-radius:14px;cursor:pointer;transition:background .2s,transform .3s var(--spring)}.ci:hover{background:var(--card2);transform:translateX(3px)}
.ci span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 11. Map de Leonida ---------- */
.mapw{position:relative;aspect-ratio:4/3.1;max-height:72vh;width:100%;border-radius:24px;overflow:hidden;isolation:isolate;border:1px solid var(--bd);
  background:radial-gradient(120% 90% at 70% 80%,color-mix(in srgb,var(--c) 34%,var(--bg2)),var(--bg2) 70%)}
.mapw .water{position:absolute;inset:-10%;z-index:-1;opacity:.5;will-change:transform;animation:water 14s linear infinite;
  background:repeating-radial-gradient(circle at 70% 75%,transparent 0 22px,color-mix(in srgb,var(--a) 16%,transparent) 22px 23px,transparent 23px 46px)}
@keyframes water{50%{transform:translate3d(-2%,1.5%,0) scale(1.04)}}
.mapw svg{width:100%;height:100%;display:block;overflow:visible}
.land{stroke:var(--a);stroke-width:1;vector-effect:non-scaling-stroke}
.mapw .land{fill:color-mix(in srgb,var(--a) 9%,var(--bg3));filter:drop-shadow(0 0 3px var(--a))}
.mapw .land.relief{fill:color-mix(in srgb,var(--c) 20%,#000);stroke:none;filter:none;transform:translate(.4px,.7px)}
.mapw .coast{fill:none;stroke:var(--a);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);filter:drop-shadow(0 0 6px var(--a));animation:draw 2.2s var(--out) .1s forwards}
.mapw .road{fill:none;stroke:color-mix(in srgb,var(--tx) 45%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:4 5}
.mapw .route{fill:none;stroke:url(#routeg);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);filter:drop-shadow(0 0 5px var(--a));animation:draw 2.6s var(--out) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pin{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,var(--pc) 26%);border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 5px color-mix(in srgb,var(--pc) 28%,transparent),0 0 22px var(--pc);transition:transform .4s var(--spring);z-index:2}
.pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--pc);animation:pulse 2.2s var(--out) infinite}
.pin::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid var(--pc);animation:pulse 2.2s var(--out) 1.1s infinite}
@keyframes pulse{from{transform:scale(.55);opacity:1}to{transform:scale(2);opacity:0}}
.pin:hover,.pin.on{transform:translate(-50%,-50%) scale(1.35)}
.pin.on{box-shadow:0 0 0 6px color-mix(in srgb,var(--pc) 40%,transparent),0 0 34px 4px var(--pc)}
.pin b{position:absolute;left:34px;top:50%;transform:translateY(-50%) scale(.74);transform-origin:0 50%;white-space:nowrap;padding:3px 10px;border-radius:8px;background:rgba(0,0,0,.6);border:1px solid color-mix(in srgb,var(--pc) 50%,transparent);font:400 20px var(--fd);letter-spacing:1.2px;color:#fff;transition:transform .3s}
.pin.on b{border-color:var(--pc);box-shadow:0 0 14px -2px var(--pc)}
.panel{position:relative;isolation:isolate;margin-top:18px;display:grid;gap:22px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.panel::after{display:none}
#mp>.pbg{position:absolute;inset:-30px;z-index:-1;background-size:cover;background-position:center;filter:blur(34px) saturate(1.4);opacity:.38;transform:scale(1.1)}
#mp::before{opacity:.0}
#mp.slide>div:not(.pbg){animation:slideIn .6s var(--out) backwards}#mp.slide>div:nth-child(3){animation-delay:.08s}
@keyframes slideIn{from{opacity:0;translate:40px 0}}
.panel img.big{width:100%;border-radius:var(--r);aspect-ratio:16/9;object-fit:cover;display:block;box-shadow:0 20px 50px -20px #000,0 0 0 1px var(--bd)}

/* ---------- 12. Personnages (fiche de jeu + holo) ---------- */
#p-chars .grid{grid-template-columns:repeat(auto-fill,minmax(min(230px,46%),1fr))}
.pc{aspect-ratio:3/4.2;cursor:pointer;border-radius:22px}
.pc img{filter:saturate(1.08) contrast(1.04)}
.pc .cap{padding:70px 16px 16px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 30%,transparent) 40%,rgba(0,0,0,.92));font:400 clamp(28px,2.6vw,38px)/.92 var(--fx);letter-spacing:.4px}
.pc .cap small{white-space:nowrap;display:block;width:fit-content;margin-bottom:8px;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--a) 22%,rgba(0,0,0,.5));border:1px solid color-mix(in srgb,var(--a) 55%,transparent);font:700 10px var(--fb);color:var(--tx);letter-spacing:2px;text-transform:uppercase}
.pc::after{background:
  linear-gradient(115deg,transparent 20%,rgba(255,138,31,.55) 36%,rgba(255,46,147,.5) 44%,rgba(61,123,255,.5) 52%,rgba(24,240,220,.5) 60%,transparent 76%) calc(var(--mx) * -.8) 0/200% 100% no-repeat,
  repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
  radial-gradient(240px circle at var(--mx) var(--my),rgba(255,255,255,.22),transparent 60%);
  mix-blend-mode:color-dodge}
.pc:hover::after{opacity:.75}

/* ---------- 13. Galerie & lightbox ---------- */
.mas{columns:240px;column-gap:16px}.mas .card{break-inside:avoid;margin-bottom:16px;cursor:zoom-in;border-radius:16px}.mas img{width:100%;height:auto;display:block}
#gg{margin-bottom:14px}
#lb{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,#000);display:none;align-items:center;justify-content:center;touch-action:none;overflow:hidden}
#lb.on{display:flex;animation:fade .3s}@keyframes fade{from{opacity:0}}
#lb img{max-width:94vw;max-height:88vh;border-radius:12px;box-shadow:0 0 0 1px var(--bd),0 30px 90px -20px color-mix(in srgb,var(--a) 50%,transparent);animation:pop .45s var(--spring);transform-origin:center;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-drag:none}
#lb.flip img{animation:none}
#lb.zoomed img{cursor:grab}
#lb .ib{position:absolute;z-index:2;background:rgba(0,0,0,.55)}
.lbp{left:16px;top:50%;margin-top:-22px}.lbn{right:16px;top:50%;margin-top:-22px}.lbx{right:16px;top:calc(16px + env(safe-area-inset-top))}.lbd{right:70px;top:calc(16px + env(safe-area-inset-top));color:var(--tx)}

/* ---------- 14. Vidéos, leaks, timeline, mémoire ---------- */
#p-vid video{box-shadow:0 0 0 1px var(--bd)}
.tl{position:relative;padding-left:30px}.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--grad-v);box-shadow:0 0 10px var(--a)}
.tl>div{position:relative;margin-bottom:16px;padding:16px 18px;overflow:visible}
.tl>div::before{content:"";position:absolute;left:-28px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 20%,transparent),var(--glow-s);transition:transform .3s var(--spring)}
.tl>div:hover::before{transform:scale(1.4);background:var(--a)}
.bar{position:relative;height:6px;border-radius:9px;background:color-mix(in srgb,var(--tx) 12%,transparent);overflow:hidden}
.bar i{position:relative;display:block;height:100%;border-radius:inherit;background:var(--grad);box-shadow:0 0 12px var(--a);overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translate3d(-100%,0,0);animation:barSheen 1.8s var(--ease) infinite}
@keyframes barSheen{to{transform:translate3d(100%,0,0)}}
input.t{width:100%;min-height:46px;padding:12px 18px;border-radius:16px;background:var(--card2);border:1px solid var(--bd);outline:0;transition:border-color .2s,box-shadow .3s}
input.t::placeholder{color:var(--mut)}input.t:focus{border-color:var(--a);box-shadow:var(--glow)}

/* ---------- 15. Réglages ---------- */
.sw>div{flex:1;min-width:0}.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;margin-bottom:10px}
.tg{width:54px;height:32px;flex:none;border-radius:99px;background:color-mix(in srgb,var(--tx) 16%,transparent);position:relative;transition:background .3s,box-shadow .3s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .45s var(--spring)}
.tg.on{background:var(--grad);box-shadow:var(--glow-s)}.tg.on::after{transform:translateX(22px)}
.tg:active::after{transform:scale(.9)}.tg.on:active::after{transform:translateX(22px) scale(.9)}
.th{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.th .card{aspect-ratio:16/9;cursor:pointer;display:flex;align-items:flex-end;padding:18px;font:400 clamp(26px,3vw,40px)/.9 var(--fx);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5);border:2px solid transparent}
.th .card.on{border-color:#fff;box-shadow:var(--glow)}
.th .card.on::after{content:"✓";opacity:1;inset:auto 14px auto auto;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--fb);background:#fff;color:#000}

/* ---------- 16. Quiz ---------- */
.q h3{font-size:clamp(28px,3vw,38px)!important;line-height:1}
.q .btn{display:flex;justify-content:flex-start;width:100%;padding:16px 20px;margin:10px 0;text-align:left;text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;border-radius:16px}
.q .btn:disabled{opacity:.6;filter:none}
.q .btn.good{opacity:1;background:color-mix(in srgb,var(--ok) 18%,transparent);animation:good .5s var(--spring)}
.q .btn.bad{opacity:1;background:color-mix(in srgb,var(--bad) 18%,transparent);animation:shake .45s var(--ease)}
@keyframes good{40%{transform:scale(1.04)}}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.spark{position:fixed;z-index:300;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok),0 0 20px var(--ok);pointer-events:none;animation:spark .8s var(--out) forwards}
@keyframes spark{to{transform:translate3d(var(--dx),var(--dy),0) scale(.2);opacity:0}}

/* ---------- 17. Modal, toast, splash ---------- */
.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.72)}
.modal.on{display:flex;animation:fade .25s}
.mbox{width:min(920px,100%);max-height:92vh;overflow:auto;background:var(--bg2);border:1px solid color-mix(in srgb,var(--a) 60%,transparent);border-radius:26px;box-shadow:var(--glow),0 40px 100px -30px #000;animation:pop .5s var(--spring)}
.mbox .hd{aspect-ratio:21/8;object-fit:cover;width:100%;display:block;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.mbox .bd{padding:4px 24px 24px;margin-top:-40px;position:relative}
.mbox .bd>h2{font:400 clamp(44px,6vw,76px)/.9 var(--fx)}
.toast{white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate3d(-50%,40px,0) scale(.95);opacity:0;padding:12px 22px;border-radius:99px;background:var(--bg2);border:1px solid var(--a);box-shadow:var(--glow);z-index:200;font-weight:700;transition:transform .5s var(--spring),opacity .3s}
.toast.on{transform:translate3d(-50%,0,0);opacity:1}
.splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:22px;background:var(--bg);transition:opacity .7s .2s,visibility .7s .2s}
.splash.off{opacity:0;visibility:hidden;pointer-events:none}
.splash h1{font-size:clamp(72px,14vw,180px);animation:glit 1.4s var(--out) both}
.splash::after{content:"";width:160px;height:3px;border-radius:3px;background:var(--grad);box-shadow:0 0 14px var(--a);transform-origin:0 50%;animation:load 1.2s var(--out) both}
@keyframes glit{from{opacity:0;letter-spacing:30px;filter:blur(14px)}}
@keyframes load{from{transform:scaleX(0)}}
/* transition de thème (fx.js) */
.theme-wipe{position:fixed;z-index:500;border-radius:50%;pointer-events:none;transform:scale(0);will-change:transform,opacity}
.theme-wipe::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px var(--w-a),inset 0 0 40px var(--w-a),0 0 50px var(--w-a)}

/* ---------- 18. Responsive ---------- */
@media(max-width:820px){
  #app{flex-direction:column-reverse}
  nav{width:100%;height:calc(66px + env(safe-area-inset-bottom));padding:5px 6px env(safe-area-inset-bottom);flex-direction:row;border-right:0;border-top:1px solid var(--bd);overflow-x:auto;overflow-y:hidden;gap:0;background:color-mix(in srgb,var(--bg2) 96%,transparent)}
  .logo{display:none}
  .nb{width:64px;min-height:56px;flex:none;padding:6px 0;font-size:9.5px}
  .nav-ind{left:0;top:5px;width:64px;height:56px}
  .nav-ind::after{bottom:auto;top:-5px}
  .panel{grid-template-columns:1fr}.hero{min-height:62vh;border-radius:22px}
  .cd div{min-width:66px;padding:10px 6px 8px}.cd b{font-size:36px;height:36px}
  .page{padding:20px 14px 44px}#msgs,.chat-in{padding-left:12px;padding-right:12px}
  .m.a{margin-left:40px}.m.a::before,.m.a::after{left:-40px;width:30px;height:30px}
  .th{grid-template-columns:1fr}
}
@media(min-width:2200px){:root{--nav:100px}body{font-size:16px}}
@media(hover:none){.card:hover::before{animation:none;opacity:0}}

/* ---------- 19. Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01s!important}}
.nomotion *,.nomotion *::before,.nomotion *::after{animation:none!important;transition-duration:.01s!important}
.nomotion .mapw .coast,.nomotion .mapw .route{stroke-dashoffset:0}

/* ---------- galerie paginée + mode léger (téléphones) ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.gal .card{aspect-ratio:4/3;cursor:zoom-in;border-radius:14px}.gal img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.gal{grid-template-columns:1fr 1fr;gap:8px}}
.lite .card::before,.lite .card::after,.lite .hero canvas.dust{display:none!important}
.lite *,.lite *::before,.lite *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lite .page{filter:none!important}.lite #bg *{animation:none!important}
.lite #lb img{animation:none!important;box-shadow:none}

/* ---------- correctifs : boutons du plein écran + boîte de connexion admin ---------- */
#lb .ib{position:absolute!important}
.lockbox{max-width:520px;margin:24px auto;padding:26px;text-align:center;border-radius:22px;background:rgba(30,16,50,.92);border:1px solid var(--a);box-shadow:0 0 30px -8px var(--a)}
.lockbox input{width:100%;min-height:48px;padding:12px 48px 12px 18px;border-radius:14px;border:1px solid var(--bd);background:#ffffff14;color:#fff;-webkit-text-fill-color:#fff;caret-color:var(--a);font:500 16px Inter,system-ui,sans-serif;outline:0}
.lockbox input:focus{border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 30%,transparent)}
.lockbox .pw{position:relative}.lockbox .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;font-size:18px;color:#fff}