/* =====================================================================
   mains — identité
   Nuit #120f1c · Ardoise #1d1930 · Craie #efeae0 · Brume #9a93ad · Ambre #feb947
   Unbounded (marque, titres) · Figtree (texte) · Anton (nom sur la carte joueur)
   ===================================================================== */
:root{
  --night:#110c17; --slate:#1c1622; --slate2:#17121d; --line:#2c2433;
  --chalk:#fcf3ea; --mist:#a49cad; --amber:#feb947; --amber2:#ffd48c; --amberdeep:#c8862a;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --ok:#ffd48c; --err:#ff6b7d;
  /* alias utilisés par l'éditeur */
  --bg:var(--night); --panel:var(--slate); --panel2:var(--slate2); --text:var(--chalk); --muted:var(--mist); --red:var(--amber);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--chalk);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.hidden{display:none !important}
.display{font-family:Unbounded,Figtree,sans-serif;font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
html.calm *,html.calm *::before,html.calm *::after{animation:none !important;transition:none !important}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--chalk)}
.logo-mark{color:#FEB947;flex:0 0 auto;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
.logo-word{font-family:Fredoka,Unbounded,sans-serif;font-weight:700;font-size:23px;letter-spacing:-.02em;color:#FCF3EA;line-height:1}

/* ---------- Boutons & champs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:0;border-radius:12px;
  background:var(--amber);color:#1a1206;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--chalk)}
.btn.ghost:hover{border-color:var(--mist)}
.btn.discord{background:var(--amber);color:#1a1022}
.btn.block{width:100%}
label.f{display:block;font-size:13px;font-weight:600;color:var(--mist);margin:18px 0 6px}
input,select,textarea{width:100%;background:var(--slate2);border:1px solid var(--line);color:var(--chalk);padding:11px 12px;
  border-radius:10px;font:inherit;font-size:15px}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent,var(--amber))}
.hint{font-size:13px;color:var(--mist);margin-top:6px;line-height:1.45}
.hint.ok{color:var(--ok)} .hint.err{color:var(--err)}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}
.demo-banner{background:#feb9471a;border:1px solid #feb94755;color:#ffd48c;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;margin-bottom:18px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,4vw,48px);background:color-mix(in srgb,var(--night) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid #ffffff0d}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--mist);font-weight:600;font-size:15px}
.nav-links a:not(.btn):hover{color:var(--chalk)}
.nav-links .btn{padding:10px 16px}
@media (max-width:560px){.nav-links .hide-sm{display:none}}

/* ---------- Landing ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(36px,7vw,88px) 0 56px}
@media (max-width:920px){.hero{grid-template-columns:1fr}}
.hero h1{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(38px,5.6vw,72px);line-height:1;letter-spacing:-.045em;margin:0}
.hero .lede{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:#cfc8d9;max-width:34em;margin:22px 0 0}
.claim{display:flex;align-items:center;gap:6px;margin-top:30px;max-width:520px;padding:6px 6px 6px 16px;border-radius:16px;
  background:var(--slate);border:1px solid var(--line)}
.claim:focus-within{border-color:var(--amber)}
.claim .host{color:var(--mist);font-weight:600;white-space:nowrap;font-size:16px}
.claim input{border:0;background:transparent;padding:10px 2px;font-size:16px;font-weight:600;min-width:0}
.claim input:focus{outline:none}
.claim .btn{flex:0 0 auto}
.claim-hint{min-height:20px}
.hero-meta{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--mist);font-size:14px}
.hero-meta .faces{display:flex}
.hero-meta .faces img{width:30px;height:30px;border-radius:50%;border:2px solid var(--night);margin-left:-8px;background:var(--slate)}
.hero-meta .faces img:first-child{margin-left:0}

/* La carte vivante : le moment fort de la page */
.showcase{position:relative}
.showcase-frame{position:relative;height:clamp(520px,62vh,640px);border-radius:28px;overflow:hidden;border:1px solid #ffffff1f;
  box-shadow:0 40px 80px -30px #000c,0 0 0 8px #ffffff06}
.showcase-frame .vp-stage{min-height:100%;height:100%;padding:24px 20px 40px;transition:background .8s ease}
.showcase-frame .vp-card{margin-left:0;max-width:420px}
.showcase-frame .vp-name{font-size:44px}
.showcase-frame .vp-tile{min-height:104px}
.showcase-frame .vp-ranks{margin-top:16px}
.showcase-frame .vp-alts,.showcase-frame .vp-links,.showcase-frame .vp-disclaimer{display:none}
.showcase-frame .vp-views{margin-top:12px}
.showcase-switch{display:flex;gap:6px;justify-content:center;margin-top:14px}
.showcase-switch button{width:42px;height:42px;padding:0;border-radius:12px;border:2px solid transparent;background:var(--slate);cursor:pointer;overflow:hidden}
.showcase-switch button img{width:100%;height:100%;object-fit:cover;display:block}
.showcase-switch button.on{border-color:var(--amber)}

.band{padding:72px 0;border-top:1px solid #ffffff0d}
.band h2{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.03em;line-height:1.1;margin:0;max-width:18em}
.band .sub{color:var(--mist);font-size:17px;line-height:1.55;max-width:36em;margin:14px 0 0}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px;margin-top:44px}
@media (max-width:820px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.features{grid-template-columns:1fr}}
.feature h3{font-size:18px;font-weight:700;margin:14px 0 6px}
.feature p{color:var(--mist);line-height:1.55;margin:0;font-size:15.5px}
.feature .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--slate);color:var(--amber)}
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;padding:24px;border-radius:20px;background:var(--slate)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--amber);color:#1a1206;
  font-family:Unbounded,sans-serif;font-weight:800;font-size:15px;margin-bottom:16px}
.steps h3{margin:0 0 6px;font-size:18px}
.steps p{margin:0;color:var(--mist);line-height:1.55}
.players{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;margin-top:36px;scroll-snap-type:x mandatory}
.player{flex:0 0 220px;scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;text-decoration:none;
  background:linear-gradient(135deg,var(--pc,#333) 0%,var(--slate) 75%);border:1px solid #ffffff14}
.player:hover{border-color:#ffffff40}
.player img{width:52px;height:52px;border-radius:14px;background:#0005}
.player b{display:block;font-size:16px}
.player span{font-size:13px;color:#ffffffb0}
.cta-end{text-align:center;padding:88px 0}
.cta-end h2{margin:0 auto}
.cta-end .btn{margin-top:28px;padding:15px 26px;font-size:16px}
.footer{border-top:1px solid #ffffff0d;padding:28px 0 40px;color:var(--mist);font-size:13px;line-height:1.6}
.footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- Connexion / inscription ---------- */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){.auth-page{grid-template-columns:1fr}.auth-side{display:none}}
.auth-side{position:relative;overflow:hidden}
.auth-side .vp-stage{min-height:100%;height:100%}
.auth-main{display:flex;flex-direction:column;padding:20px clamp(16px,4vw,48px) 32px}
.auth-box{width:100%;max-width:380px;margin:auto}
.auth-box h1{font-family:Unbounded,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.03em;margin:0 0 8px}
.tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--slate);margin-bottom:28px}
.tabs button{flex:1;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--mist);font:inherit;font-weight:700;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--night);color:var(--chalk)}
.sep{display:flex;align-items:center;gap:10px;color:var(--mist);font-size:13px;margin:20px 0}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.pending{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#feb94714;border:1px solid #feb94740;font-size:14px;margin-bottom:18px}
.pending b{color:var(--amber)}
.legal{font-size:12px;color:var(--mist);line-height:1.5;margin-top:22px}

/* ---------- Éditeur ---------- */
.dash{display:grid;grid-template-columns:420px 1fr;grid-template-rows:minmax(0,1fr);height:calc(100dvh - 61px)}
.editor{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.editor-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.editor-top .brand{font-size:20px}
.editor-top .brand span{color:var(--accent,var(--red))}
.editor-body{position:relative;overflow-y:auto;padding:4px 16px 24px;flex:1}
.editor-foot{padding:14px 16px;border-top:1px solid var(--line);background:var(--panel)}
.section{border-top:1px solid var(--line);margin-top:22px;padding-top:4px}
.section:first-child{border-top:0;margin-top:0}
.section > h3{font-size:15px;margin:18px 0 0}
.editor-top .logo-word{font-size:19px}
.dc{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border-radius:14px;background:#feb9471a;border:1px solid #feb94755}
.dc img{width:46px;height:46px;border-radius:50%;background:var(--slate2);flex:0 0 46px}
.dc-id{flex:1;min-width:0}
.dc-id b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-id span{font-size:13px;color:var(--mist)}
.dc .btn{padding:8px 12px;font-size:13px}
.slug{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2)}
.slug span{padding:10px 0 10px 12px;color:var(--muted);font-size:14px;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.slug input{border:0;background:transparent;padding-left:2px}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.agents button{aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:8px;background:var(--panel2);cursor:pointer;overflow:hidden;transition:transform .12s,border-color .2s}
.agents button:hover{transform:translateY(-2px)}
.agents button.on{border-color:var(--amber);box-shadow:0 0 14px -4px var(--amber)}
.agents img{width:100%;height:100%;object-fit:cover;display:block}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.pills button.on{background:var(--amber);border-color:transparent;color:#1a1022}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{flex:1;padding:9px;border:0;background:var(--panel2);color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.seg button.on{background:var(--amber);color:#1a1022}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:14px}
.switch input{width:auto;accent-color:var(--amber);transform:scale(1.2)}
.color-row{display:flex;gap:10px;align-items:center}
.color-row input[type=color]{width:48px;height:38px;padding:2px;cursor:pointer}
.saved{display:flex;gap:8px;align-items:center;margin-top:10px;padding:10px;border-radius:10px;background:#feb9471c;border:1px solid #feb94755}
.saved a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;text-decoration:none;color:#ffd48c}
.saved button{padding:7px 10px;font-size:13px}
.preview{position:relative;min-height:100%;overflow:hidden}
.preview-badge{position:absolute;top:12px;right:12px;z-index:5;font-size:13px;font-weight:700;
  background:#000a;border:1px solid #ffffff22;padding:5px 10px;border-radius:999px;color:#fffc}

/* ---------- Profil (aperçu + page publique) ---------- */
.vp-stage{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:48px 16px 56px;isolation:isolate;
  container-type:inline-size;--mx:0;--my:0;
  background:radial-gradient(120% 90% at 80% 20%,var(--c1) 0%,transparent 55%),linear-gradient(135deg,var(--c2),var(--c3) 60%,var(--c4))}
.preview .vp-stage{min-height:100%;height:100%}
.vp-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,16,.7) 0%,rgba(8,8,16,.25) 50%,rgba(8,8,16,0) 100%),
             linear-gradient(0deg,rgba(8,8,16,.55),transparent 35%)}
.vp-fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* Le grand texte de l'agent en fond : discret, et qui bouge un peu avec la souris */
.vp-bgart{position:absolute;inset:-4%;z-index:0;background-size:cover;background-position:center;opacity:.13;
  animation:vp-drift 28s ease-in-out infinite alternate;will-change:transform}
.vp-bgart.is-map{opacity:.5;mix-blend-mode:normal;filter:saturate(1.1) blur(1px)}
.vp-portrait{position:absolute;right:-2%;bottom:0;height:100%;max-height:980px;object-fit:contain;z-index:1;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));animation:vp-in .7s cubic-bezier(.2,.8,.2,1) both,vp-breathe 7s ease-in-out .7s infinite;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent 100%);mask-image:linear-gradient(to left,#000 55%,transparent 100%)}
@keyframes vp-in{from{opacity:0;transform:translateX(40px) scale(1.03)}to{opacity:1;transform:none}}

/* Quand la place manque, le portrait passe derrière en s'effaçant */
@container (max-width:900px){
  .vp-portrait{right:-30%;opacity:.75}
}
@container (max-width:600px){
  .vp-portrait{right:-40%;height:90%;opacity:.6}
}

/* Le contenu du profil sur un panneau en verre : lisible quel que soit le fond */
.vp-card{position:relative;z-index:3;width:100%;max-width:540px;margin-left:clamp(0px,4vw,64px);padding:22px;border-radius:26px;
  background:linear-gradient(160deg,rgba(16,13,26,.74),rgba(16,13,26,.52));border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
@container (max-width:600px){ .vp-card{margin-left:0;padding:16px;border-radius:22px} }

/* Entrée en cascade (page publique, vitrine) */
.vp-animate .vp-card > *{animation:vp-up .55s cubic-bezier(.2,.8,.2,1) both}
.vp-animate .vp-card > :nth-child(2){animation-delay:.06s}
.vp-animate .vp-card > :nth-child(3){animation-delay:.12s}
.vp-animate .vp-card > :nth-child(4){animation-delay:.18s}
.vp-animate .vp-card > :nth-child(5){animation-delay:.24s}
.vp-animate .vp-card > :nth-child(6){animation-delay:.3s}
.vp-animate .vp-card > :nth-child(n+7){animation-delay:.36s}
@keyframes vp-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vp-head{display:flex;align-items:center;gap:14px}
.vp-avatar{width:80px;height:80px;flex:0 0 80px;border-radius:16px;border:2px solid var(--c1);background:rgba(0,0,0,.4);object-fit:cover}
.vp-avatar.is-photo{border-radius:50%}
.vp-id{min-width:0}
.vp-name{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(34px,6vw,56px);line-height:1;text-transform:uppercase;letter-spacing:.02em;word-break:break-word;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.vp-name small{font-family:Inter,sans-serif;font-size:18px;color:#ffffff99;font-weight:600;margin-left:6px}
.vp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:600}
.vp-chip img{width:15px;height:15px}
.vp-chip.is-main{background:var(--c1);border-color:transparent}
.vp-chip.is-tag{border-color:color-mix(in srgb,var(--c1) 70%,transparent)}
.vp-bio{margin:18px 0 0;font-size:15px;line-height:1.55;color:#ffffffd9;max-width:460px;white-space:pre-line;overflow-wrap:anywhere}
.vp-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

.vp-ranks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.vp-rank{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 16%,transparent),rgba(0,0,0,.25));
  border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);transition:transform .2s,box-shadow .2s}
.vp-rank:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--rc) 70%,transparent)}
.vp-rank img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--rc) 50%,transparent))}
.vp-rank-name{font-family:Anton,Impact,sans-serif;font-size:20px;text-transform:uppercase;color:var(--rc);line-height:1.1;margin-top:2px}

.vp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.vp-tile{position:relative;border-radius:16px;overflow:hidden;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);min-height:126px;transition:transform .2s,border-color .2s}
.vp-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c1) 60%,transparent)}
.vp-tile.is-map img{transition:transform .5s}
.vp-tile.is-map:hover img{transform:scale(1.06)}
.vp-tile .vp-lbl{position:absolute;top:10px;left:12px;z-index:2}
.vp-val{position:absolute;bottom:10px;left:12px;right:12px;z-index:2;font-family:Anton,Impact,sans-serif;font-size:21px;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.6);line-height:1.1}
.vp-tile.is-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.vp-tile.is-map::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.75))}
.vp-tile.is-skin img{position:absolute;left:8%;top:26%;width:84%;height:44%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.vp-tile.is-skin .vp-val{font-size:15px}
@media (max-width:480px){.vp-ranks,.vp-tiles{grid-template-columns:1fr}}

.vp-alts{display:flex;align-items:center;gap:8px;margin-top:12px}
.vp-alts .vp-lbl{margin-right:4px}
.vp-alts img{width:36px;height:36px;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15)}

.vp-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.vp-link{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;text-align:left;transition:border-color .2s,transform .15s}
.vp-link:hover{border-color:var(--c1);transform:translateY(-2px)}
.vp-link svg{flex:0 0 20px}
.vp-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-views{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;color:#ffffffa0}
.vp-disclaimer{position:absolute;z-index:2;bottom:12px;left:16px;right:16px;font-size:11px;color:rgba(255,255,255,.45)}

/* ---------- Page publique : barre basse ---------- */
.pub-bar{position:fixed;z-index:10;right:14px;bottom:12px;display:flex;gap:8px}
body.pub .vp-stage{padding-bottom:96px}
body.pub .vp-disclaimer{bottom:56px}
@media (max-width:600px){
  body.pub .vp-stage{padding-bottom:56px}
  body.pub .vp-disclaimer{bottom:12px}
  .pub-bar{position:static;justify-content:center;padding:14px;background:var(--bg)}
}
.pub-bar a{display:inline-flex;align-items:center;font-size:13px;font-weight:700;text-decoration:none;padding:8px 12px;border-radius:999px;background:#000b;border:1px solid #ffffff26}
.pub-bar .logo-word{font-size:14px}
.center-msg{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.center-msg h1{font-size:44px;margin:0 0 8px}
.center-msg p{color:var(--muted)}

/* =====================================================================
   Landing v3 — profondeur et mouvement
   ===================================================================== */
@property --a1{syntax:'<color>';inherits:true;initial-value:#25607a}
@property --a2{syntax:'<color>';inherits:true;initial-value:#3a2656}
/* Seules les 3 lueurs animent leur couleur (animer --a1 sur body recalculait toute la page à chaque image) */
@property --g1{syntax:'<color>';inherits:false;initial-value:#25607a}
@property --g2{syntax:'<color>';inherits:false;initial-value:#3a2656}
/* Lueurs de fond : un seul calque fixe, sans flou ni animation continue (léger pour tous les navigateurs).
   Seule la couleur change en douceur quand l'exemple affiché change. */
.aurora{--g1:var(--a1);--g2:var(--a2);transition:--g1 1.4s ease,--g2 1.4s ease;opacity:.8;
  background:radial-gradient(60vmax 60vmax at 12% -6%,var(--g1),transparent 62%),
             radial-gradient(52vmax 52vmax at 92% 30%,var(--g2),transparent 62%),
             radial-gradient(34vmax 34vmax at 48% 78%,#feb94724,transparent 65%)}
.aurora span{display:none}
body.home{--a1:#feb947;--a2:#c8862a;overflow-x:hidden;background:transparent}
html:has(body.home){background:var(--night)}

/* Lueur de fond qui prend la couleur de l'agent affiché */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;opacity:.75;will-change:transform;background:radial-gradient(closest-side,var(--c),transparent)!important}
.aurora .b1{width:62vmax;height:62vmax;left:-12vmax;top:-22vmax;--c:var(--a1);animation:drift1 22s ease-in-out infinite alternate}
.aurora .b2{width:52vmax;height:52vmax;right:-14vmax;top:8vmax;--c:var(--a2);animation:drift2 26s ease-in-out infinite alternate}
.aurora .b3{width:34vmax;height:34vmax;left:30vw;top:40vh;--c:#feb947;opacity:.14;animation:drift1 30s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-10vmax,8vmax) scale(.9)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 70%)}
body.home .nav{background:color-mix(in srgb,var(--night) 55%,transparent)}

.lx-hero{text-align:center;padding:clamp(40px,7vw,84px) 0 0;display:flex;flex-direction:column;align-items:center}
.lx-pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e7e1f0;backdrop-filter:blur(8px)}
.lx-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px #ffd48c33;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px #ffd48c00}}
.lx-title{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(40px,7.4vw,96px);line-height:.98;letter-spacing:-.05em;margin:26px 0 0;max-width:12em;
  background:linear-gradient(180deg,#fff 30%,#c9c0d8);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.35))}
.lx-lede{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:#d3cce0;max-width:34em;margin:22px auto 0}
.lx-hero .claim{margin:34px auto 0;width:100%;background:rgba(29,25,48,.7);backdrop-filter:blur(10px)}
.lx-hero .claim-hint{text-align:center}
.lx-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.lx-ctas .btn{padding:13px 22px}
.btn.glow{box-shadow:0 0 0 0 #feb94700,0 10px 30px -8px #feb947aa}
.btn.glow:hover{box-shadow:0 0 0 6px #feb94722,0 14px 40px -8px #feb947cc}

/* Pile de cartes en 3D */
.lx-stage{position:relative;margin:56px auto 0;max-width:1180px;padding:0 clamp(16px,4vw,48px)}
.lx-deck{position:relative;height:clamp(560px,66vh,660px);perspective:1600px;--tx:0;--ty:0}
.lx-card{position:absolute;top:0;left:50%;width:min(560px,100%);height:100%;border-radius:30px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);translate:-50% 0;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s,opacity .6s}
.lx-card.vp-stage{position:absolute;min-height:0;height:100%;padding:24px 20px 40px}
.lx-card .vp-card{margin-left:0;max-width:440px}
.lx-card .vp-name{font-size:44px}
.lx-card .vp-tile{min-height:104px}
.lx-card .vp-portrait{right:-34%;opacity:.9}
.lx-card .vp-alts,.lx-card .vp-links,.lx-card .vp-disclaimer{display:none}
.lx-main{z-index:3;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 10px rgba(255,255,255,.03),0 0 120px -20px var(--a1);
  transform:rotateX(calc(var(--ty) * -6deg)) rotateY(calc(var(--tx) * 8deg))}
.lx-ghost{z-index:1;pointer-events:none;filter:brightness(.45) saturate(.85)}
.lx-ghost.left{transform:translateX(-58%) translateZ(-180px) rotateY(24deg)}
.lx-ghost.right{transform:translateX(58%) translateZ(-180px) rotateY(-24deg)}
.lx-ghost .vp-card{opacity:.85}
@media (max-width:900px){.lx-ghost{display:none}}
.lx-shine{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:30px;
  background:radial-gradient(500px circle at calc(50% + var(--tx) * 50%) calc(50% + var(--ty) * 50%),rgba(255,255,255,.10),transparent 45%)}
.lx-switch{display:flex;gap:8px;justify-content:center;margin-top:22px}
.lx-switch button{position:relative;width:48px;height:48px;padding:0;border-radius:14px;border:2px solid transparent;background:var(--slate);cursor:pointer;overflow:hidden;transition:transform .2s}
.lx-switch button:hover{transform:translateY(-3px)}
.lx-switch button img{width:100%;height:100%;object-fit:cover;display:block}
.lx-switch button.on{border-color:var(--amber)}
.lx-switch button.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:var(--amber);animation:fill var(--dur,4.5s) linear forwards}
@keyframes fill{from{width:0}to{width:100%}}

/* Défilé d'agents */
.lx-marquee{margin:72px 0 0;padding:18px 0;border-block:1px solid rgba(255,255,255,.07);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lx-track{display:flex;gap:14px;width:max-content;animation:marquee 60s linear infinite}
.lx-marquee:hover .lx-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.lx-chip{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-weight:700;font-size:15px;white-space:nowrap}
.lx-chip img{width:36px;height:36px;border-radius:50%;background:var(--ac,#333)}

/* Chiffres */
.lx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}
@media (max-width:760px){.lx-stats{grid-template-columns:1fr 1fr}}
.lx-stat{padding:26px 22px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.lx-stat b{display:block;font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,52px);letter-spacing:-.04em;line-height:1;color:#fff}
.lx-stat span{display:block;color:var(--mist);margin-top:10px;font-size:15px}

/* FAQ */
.faq{margin-top:36px;display:grid;gap:10px;max-width:780px}
.faq details{border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:0 20px;transition:background .2s}
.faq details[open]{background:rgba(255,255,255,.07)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:Unbounded,sans-serif;color:var(--amber);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:#cfc8d9;line-height:1.6}

.lx-final{position:relative;margin:24px auto 0;max-width:1080px;padding:clamp(44px,7vw,80px) 24px;border-radius:36px;text-align:center;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--a1) 60%,transparent),transparent 60%),var(--slate);border:1px solid rgba(255,255,255,.1)}
.lx-final h2{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.045em;line-height:1.04;margin:0 auto;max-width:14em}
.lx-final p{color:#d3cce0;margin:16px auto 0;max-width:30em}
.lx-final .btn{margin-top:28px}

/* Apparition au scroll */
.reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;translate:0 0}
html.calm .reveal{opacity:1;translate:none}

/* =====================================================================
   Espace compte
   ===================================================================== */
.dash-body{background:var(--night)}
.dtop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;height:61px;padding:0 16px;
  background:color-mix(in srgb,var(--night) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.dtop .logo-word{font-size:19px}
.dtabs{display:flex;gap:4px;margin:0 auto;padding:4px;border-radius:14px;background:var(--slate)}
.dtabs button{padding:9px 16px;border:0;border-radius:10px;background:transparent;color:var(--mist);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.dtabs button[aria-selected="true"]{background:var(--night);color:var(--chalk)}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--line);background:var(--slate);color:var(--chalk);font:inherit;font-weight:600;font-size:14px;cursor:pointer;max-width:220px}
.acct-btn img{width:30px;height:30px;border-radius:50%;background:var(--slate2);flex:0 0 30px;object-fit:cover}
.acct-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border-radius:16px;background:var(--slate);border:1px solid var(--line);
  box-shadow:0 24px 50px -20px #000c;display:flex;flex-direction:column;z-index:50}
.acct-menu a,.acct-menu button{padding:11px 12px;border-radius:10px;border:0;background:transparent;color:var(--chalk);text-align:left;font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.acct-menu a:hover,.acct-menu button:hover{background:var(--slate2)}
.danger-text{color:var(--err) !important}
.linklike{border:0;background:none;color:var(--amber);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}

/* Champs obligatoires */
.req{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 8px;border-radius:999px;font-family:Figtree,sans-serif;font-size:12px;font-weight:700;
  background:#feb9471f;color:var(--amber);border:1px solid #feb94755}
.section.needs .slug,.section.needs #name{border-color:var(--amber);box-shadow:0 0 0 3px #feb94726}
.required-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border-radius:12px;
  background:#feb94714;border:1px solid #feb94740;font-size:14px;font-weight:600;color:#ffd48c}
.required-bar.done{background:#ffd48c14;border-color:#ffd48c40;color:#ffd48c}

/* Pages Stats / Compte */
.page{min-height:calc(100dvh - 61px)}
.page-inner{max-width:1100px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 40px}
.page-inner.narrow{max-width:720px}
.page-inner h1{font-size:clamp(26px,3vw,34px);margin:0;letter-spacing:-.03em}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.period{min-width:280px}
.period button.on{background:var(--amber);color:#1a1206}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{padding:18px;border-radius:18px;background:var(--slate);border:1px solid var(--line)}
.kpi span{display:block;color:var(--mist);font-size:14px;font-weight:600}
.kpi b{display:block;font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin-top:8px;color:#fff}
.kpi small{display:block;color:var(--mist);font-size:13px;margin-top:4px}
.card{position:relative;margin-top:14px;padding:18px;border-radius:18px;background:var(--slate);border:1px solid var(--line)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.card-head h2{font-size:17px;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:0}
.grid2 .card{margin-top:14px}
@media (max-width:760px){.grid2{grid-template-columns:1fr;gap:0}}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:#ffffff14;stroke-width:1}
.chart .ax{fill:var(--mist);font-size:11px;font-family:Figtree,sans-serif}
.chart .bar{fill:var(--amber)}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit.on{fill:#ffffff0d}
.chart-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;padding:8px 12px;border-radius:12px;background:#0c0a14;border:1px solid var(--line);
  box-shadow:0 12px 30px -10px #000;white-space:nowrap;font-size:13px;display:flex;flex-direction:column;gap:2px;z-index:5}
.chart-tip span{color:var(--mist)}
.bars{display:grid;gap:12px}
.bar-label{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:6px}
.bar-label b{font-weight:700}
.bar-label small{color:var(--mist);font-weight:500;margin-left:4px}
.bar-track{height:8px;border-radius:999px;background:#ffffff0d;overflow:hidden}
.bar-track i{display:block;height:100%;border-radius:999px;background:var(--amber)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.feed li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 4px;border-bottom:1px solid #ffffff0a;font-size:14px}
.feed li:last-child{border-bottom:0}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.feed-when{font-weight:700;min-width:96px}
.feed-tags{display:flex;gap:6px;flex-wrap:wrap}
.feed-tags em{font-style:normal;padding:3px 9px;border-radius:999px;background:var(--slate2);color:#d3cce0;font-size:13px}
.share{display:flex;flex-wrap:wrap;gap:8px}
.share .btn{padding:10px 14px;font-size:14px}
.empty{text-align:center;padding:60px 20px;border-radius:22px;background:var(--slate);border:1px dashed var(--line)}
.empty h2{font-size:22px;margin:0 0 8px}
.empty p{color:var(--mist);margin:0 0 18px}
.acct-id{display:flex;align-items:center;gap:12px}
.acct-id img{width:52px;height:52px;border-radius:50%;background:var(--slate2);object-fit:cover}
.acct-id b{display:block;font-size:17px}
.facts{margin:0;padding-left:18px;color:#d3cce0;line-height:1.6;display:grid;gap:6px}
.card.danger{border-color:#ff6b7d40}
.danger-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid #ffffff0a}
.danger-row:first-of-type{border-top:0}
.danger-row b{display:block}
.danger-btn{border-color:#ff6b7d66 !important;color:var(--err) !important}
.danger-btn:disabled{opacity:.4;cursor:not-allowed}

/* Guide de première connexion */
.guide-dim{position:fixed;inset:0;z-index:60;background:rgba(6,5,12,.72);backdrop-filter:blur(2px)}
.guide-focus{position:relative;z-index:61;border-radius:18px;background:var(--panel);box-shadow:0 0 0 3px var(--amber),0 0 0 9px #feb94730,0 30px 60px -20px #000;
  padding-left:14px;padding-right:14px;margin-left:-14px;margin-right:-14px;padding-bottom:14px}
.editor-foot.guide-focus{margin:0;border-radius:0}
.guide-card{position:fixed;z-index:62;right:24px;bottom:24px;width:min(380px,calc(100vw - 32px));padding:20px;border-radius:20px;background:#1f1a33;
  border:1px solid #feb94755;box-shadow:0 30px 70px -20px #000;animation:vp-up .35s ease both}
.guide-step{font-size:13px;font-weight:700;color:var(--amber)}
.guide-card h2{font-family:Unbounded,sans-serif;font-size:20px;letter-spacing:-.02em;margin:8px 0 6px}
.guide-card p{margin:0;color:#d3cce0;line-height:1.55}
.guide-need{margin-top:12px;padding:9px 12px;border-radius:10px;background:#feb94714;color:#ffd48c;font-size:14px;font-weight:600}
.guide-actions{display:flex;align-items:center;gap:8px;margin-top:16px}
.guide-actions .linklike{margin-right:auto;color:var(--mist)}
.guide-actions .btn{padding:10px 16px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Barre d'onglets mobile */
.mtabs{display:none}

/* =====================================================================
   Mobile & zoom : rien ne dépasse, pas de zoom automatique sur iPhone
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg{max-width:100%}
@media (max-width:980px){
  input,select,textarea{font-size:16px}       /* évite le zoom automatique d'iOS */
  .dtabs{display:none}
  .dtop{justify-content:space-between}
  .acct-btn span{display:none}
  .acct-btn{padding:4px}
  .dash{grid-template-columns:1fr;height:auto}
  .editor{border-right:0}
  .editor-body{overflow:visible;padding-bottom:16px}
  .editor-foot{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:20;box-shadow:0 -10px 30px -10px #000a}
  .preview{display:none;min-height:calc(100dvh - 61px - 64px)}
  body.m-preview .editor{display:none}
  body.m-preview .preview{display:block}
  .preview .vp-stage{min-height:calc(100dvh - 61px - 64px)}
  .mtabs{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;z-index:40;left:0;right:0;bottom:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--night) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mtabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border:0;border-radius:12px;background:none;color:var(--mist);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
  .mtabs button.on{color:var(--amber);background:#feb9470f}
  .page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .guide-card{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto}
  .guide-focus{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
}
@media (max-width:420px){
  .period{min-width:0;width:100%}
  .agents{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .claim{flex-wrap:wrap;padding:8px}
  .claim .host{font-size:15px}
  .claim input{flex:1 1 120px}
  .claim .btn{width:100%}
  .nav-links .btn{padding:9px 12px;font-size:14px}
  .logo-word{font-size:19px}
}
/* Gros zoom / très petits écrans : les grilles passent en une colonne */
@media (max-width:340px){
  .kpis,.vp-ranks,.vp-tiles,.lx-stats{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
}

/* Landing : usages, créateur, sécurité */
.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
@media (max-width:980px){.uses{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.uses{grid-template-columns:1fr}}
.use{padding:22px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08)}
.use b{display:block;font-size:18px;margin-bottom:8px}
.use p{margin:0;color:var(--mist);line-height:1.55;font-size:15.5px}
.creator{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,44px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:30px;
  background:radial-gradient(80% 120% at 0% 0%,#feb9471f,transparent 60%),var(--slate);border:1px solid var(--line)}
@media (max-width:640px){.creator{grid-template-columns:1fr}}
.creator-mark{width:120px;height:120px;border-radius:30px;display:grid;place-items:center;background:var(--night);border:1px solid #feb94740;
  box-shadow:0 20px 50px -20px #feb94766}
.creator-by{margin:10px 0 0;color:var(--mist);font-size:16px}
.creator-by b{color:var(--chalk)}
.creator-text{margin:12px 0 0;font-size:17px;line-height:1.6;color:#d3cce0;max-width:40em}
.creator .btn{margin-top:18px}
.safe{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
@media (max-width:700px){.safe{grid-template-columns:1fr}}
.safe-item{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:20px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.safe-item::before{content:"";grid-row:span 2;width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px #ffd48c1f}
.safe-item b{font-size:17px}
.safe-item p{margin:0;color:var(--mist);line-height:1.55}

/* =====================================================================
   Personnalisation du profil
   ===================================================================== */
/* Style de carte */
.vp-stage[data-card="solid"] .vp-card{background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 70%,#0c0a14),#0c0a14);backdrop-filter:none;-webkit-backdrop-filter:none}
.vp-stage[data-card="clear"] .vp-card{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:0}
.vp-stage[data-card="clear"] .vp-card .vp-name,.vp-stage[data-card="clear"] .vp-bio{text-shadow:0 2px 14px rgba(0,0,0,.8)}
/* Police du pseudo */
.vp-stage[data-font="unbounded"] .vp-name{font-family:Unbounded,sans-serif;font-weight:800;letter-spacing:-.04em;text-transform:none;font-size:clamp(28px,5vw,46px)}
.vp-stage[data-font="figtree"] .vp-name{font-family:Figtree,sans-serif;font-weight:700;text-transform:none;letter-spacing:-.02em}
/* Effet sur le pseudo */
.vp-stage[data-namefx="gradient"] .vp-name span{background:linear-gradient(100deg,#fff 0%,#fff 35%,var(--glow) 50%,#fff 65%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:vp-shine2 3.2s ease-in-out infinite}
@keyframes vp-shine2{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.vp-stage[data-namefx="glow"] .vp-name span{text-shadow:0 0 12px var(--glow),0 0 32px color-mix(in srgb,var(--glow) 60%,transparent);animation:vp-pulseGlow 3s ease-in-out infinite}
@keyframes vp-pulseGlow{50%{text-shadow:0 0 18px var(--glow),0 0 48px color-mix(in srgb,var(--glow) 75%,transparent)}}
.vp-stage[data-namefx="glitch"] .vp-name{position:relative}
.vp-stage[data-namefx="glitch"] .vp-name span{position:relative;display:inline-block;text-shadow:2px 0 color-mix(in srgb,var(--glow) 80%,transparent),-2px 0 #00e5ffaa;animation:vp-glitch2 2.6s infinite}
.vp-stage[data-namefx="glitch"] .vp-name span::before,.vp-stage[data-namefx="glitch"] .vp-name span::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.vp-stage[data-namefx="glitch"] .vp-name span::before{color:var(--glow);clip-path:inset(0 0 60% 0);animation:vp-slice1 2.6s infinite steps(1)}
.vp-stage[data-namefx="glitch"] .vp-name span::after{color:#00e5ff;clip-path:inset(55% 0 0 0);animation:vp-slice2 2.6s infinite steps(1)}
@keyframes vp-glitch2{0%,100%{transform:none}8%{transform:translate(-2px,1px) skewX(-4deg)}10%{transform:translate(2px,-1px)}12%,58%{transform:none}60%{transform:translate(3px,0) skewX(6deg)}62%{transform:none}}
@keyframes vp-slice1{0%,100%{transform:none;opacity:0}8%{transform:translate(-6px,0);opacity:.9}12%{opacity:0}60%{transform:translate(5px,0);opacity:.9}63%{opacity:0}}
@keyframes vp-slice2{0%,100%{transform:none;opacity:0}9%{transform:translate(6px,0);opacity:.9}13%{opacity:0}61%{transform:translate(-5px,0);opacity:.9}64%{opacity:0}}
@keyframes vp-glitch{0%,92%,100%{transform:none;text-shadow:none}93%{transform:translate(-2px,1px);text-shadow:2px 0 var(--c1),-2px 0 #00e5ff}95%{transform:translate(2px,-1px);text-shadow:-2px 0 var(--c1),2px 0 #00e5ff}97%{transform:translate(-1px,0)}}
/* Badge équipe */
.vp-chip.is-team{text-decoration:none;color:#fff;border-color:color-mix(in srgb,var(--c1) 70%,transparent);background:color-mix(in srgb,var(--c1) 25%,rgba(0,0,0,.4))}
.vp-chip.is-team:hover{background:color-mix(in srgb,var(--c1) 45%,rgba(0,0,0,.4))}
/* Tuile crosshair */
.vp-tiles:has(.is-xh:only-child){grid-template-columns:minmax(0,1fr)}
.vp-tiles:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:600px){ .vp-tiles:has(> :nth-child(3)){grid-template-columns:1fr 1fr} .vp-tile.is-xh:nth-child(3){grid-column:1 / -1} }
.vp-tile.is-xh{display:grid;place-items:center;cursor:pointer;font:inherit;color:#fff;padding:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.07),rgba(0,0,0,.35) 70%)}
.vp-tile.is-xh .vp-xh-svg{width:84px;height:84px;margin-top:6px}
.vp-tile.is-xh .vp-val{font-family:Figtree,sans-serif;font-size:13px;font-weight:700;text-transform:none;text-align:left;color:#ffffffc0}
/* Pied de carte */
.vp-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.vp-foot:empty{display:none}
/* Lecteur de musique */
.vp-player{position:absolute;z-index:5;left:16px;bottom:40px;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;
  background:rgba(10,8,18,.7);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.vp-play{width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--c1);color:#fff;cursor:pointer}
.vp-vol{width:90px;accent-color:var(--c1);padding:0;border:0;background:transparent}
body.pub .vp-player{bottom:62px}
@media (max-width:600px){ body.pub .vp-player{bottom:16px;left:auto;right:16px} }
/* Écran d'entrée */
.vp-intro{position:absolute;inset:0;z-index:20;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;font:inherit;
  background:rgba(8,6,14,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .5s ease}
.vp-intro span{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(18px,3vw,26px);letter-spacing:-.02em;animation:vp-pulse 2s ease-in-out infinite}
@keyframes vp-pulse{50%{opacity:.45}}
.vp-intro.out{opacity:0;pointer-events:none}
.vp-stage.has-intro .vp-card,.vp-stage.has-intro .vp-portrait{visibility:hidden}
.vp-stage:not(.has-intro) .vp-card{animation:none}

/* Éditeur : nouvelles options */
.seg.wrap{flex-wrap:wrap}
.seg.wrap button{flex:1 1 30%}
.dim{opacity:.4;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.music-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.music-row .btn{padding:10px 14px;font-size:14px;cursor:pointer}
#musicFile:focus-visible + .btn,.music-row label:focus-within{outline:2px solid var(--amber)}
.xh-edit{display:flex;gap:14px;align-items:center;margin-top:12px}
.xh-prev{flex:0 0 104px;height:104px;border-radius:14px;display:grid;place-items:center;
  background:radial-gradient(circle,#3a4a5a,#1b2430);border:1px solid var(--line)}
.xh-prev .hint{font-size:12px;text-align:center;padding:4px}
#secXh.bad #crosshair{border-color:var(--err)}
input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--amber);height:28px}

/* =====================================================================
   Pages Classement / Équipes / Page d'équipe
   ===================================================================== */
body.sub{background:radial-gradient(70% 50% at 50% 0%,#feb9471c 0%,transparent 70%),var(--night)}
.nav-links a[aria-current="page"]{color:var(--chalk)}
.sub-main{padding-top:36px;padding-bottom:64px}
.sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sub-head h1{font-size:clamp(30px,4vw,46px);margin:0;letter-spacing:-.04em}
.sub-lede{color:var(--mist);margin:8px 0 0;max-width:38em;line-height:1.55}

/* Podium */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:18px}
.podium:empty{display:none}
@media (max-width:720px){.podium{grid-template-columns:1fr}.pod-1{order:-1}}
.pod{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 16px 20px;border-radius:24px;
  text-decoration:none;color:var(--chalk);border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 55%,transparent),var(--slate) 75%);transition:transform .2s}
.pod:hover{transform:translateY(-4px)}
.pod-1{padding-top:44px;border-color:#ffd48c88;box-shadow:0 30px 60px -30px #ffd48c66}
.pod-art{position:absolute;right:-30%;top:-6%;height:120%;opacity:.25;pointer-events:none;-webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent)}
.pod-pos{position:absolute;left:14px;top:12px;font-family:Unbounded,sans-serif;font-weight:800;font-size:28px;color:#ffffff55}
.pod-1 .pod-pos{color:#ffd48c}
.pod-av{position:relative;width:76px;height:76px;border-radius:20px;background:#0005;border:2px solid #ffffff33;object-fit:cover}
.pod-1 .pod-av{width:96px;height:96px;border-color:#ffd48c}
.pod-av.is-photo{border-radius:50%}
.pod-name{position:relative;font-family:Anton,sans-serif;font-weight:400;font-size:28px;text-transform:uppercase;letter-spacing:.02em;margin-top:6px}
.pod-meta{position:relative;color:#ffffffb0;font-size:14px}
.pod-views{position:relative;margin-top:6px;font-size:14px;color:#ffffffb0}
.pod-views b{font-family:Unbounded,sans-serif;color:#fff;font-size:18px}

/* Liste */
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.board a{display:grid;grid-template-columns:44px 48px minmax(0,1fr) 40px auto;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;
  text-decoration:none;color:var(--chalk);background:var(--slate);border:1px solid var(--line);transition:border-color .2s,transform .15s}
.board a:hover{border-color:var(--mist);transform:translateX(3px)}
.b-pos{font-family:Unbounded,sans-serif;font-weight:800;color:var(--mist);text-align:center}
.b-av{width:44px;height:44px;border-radius:12px;background:var(--slate2);object-fit:cover}
.b-av.is-photo{border-radius:50%}
.b-id{min-width:0}.b-id b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-id small{color:var(--mist)}
.b-rank{width:36px;height:36px}
.b-views{text-align:right}.b-views b{display:block;font-family:Unbounded,sans-serif}.b-views small{color:var(--mist)}
@media (max-width:480px){.board a{grid-template-columns:30px 40px minmax(0,1fr) auto;gap:10px}.b-rank{display:none}.b-av{width:38px;height:38px}}

/* Recherche d'équipes */
.team-search{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.team-search input[type=search]{flex:1 1 260px}
.switch-inline{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.switch-inline input{width:auto;accent-color:var(--amber);transform:scale(1.2)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:16px}
.team-card{position:relative;padding:18px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 30%,var(--slate)),var(--slate) 70%);transition:border-color .2s,transform .2s}
.team-card:hover{border-color:color-mix(in srgb,var(--tc) 70%,#fff);transform:translateY(-3px)}
.team-card-link{position:absolute;inset:0;border-radius:22px;z-index:1}
.team-card-top{display:flex;align-items:center;gap:12px}
.team-card-top b{display:block;font-size:18px}
.team-emblem{width:48px;height:48px;border-radius:14px;background:#0005}
.team-tag{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:6px;background:#0006;font-family:Unbounded,sans-serif;font-size:12px;letter-spacing:.06em}
.team-card-top .pill{margin-left:auto}
.pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#ffffff14;color:var(--mist);white-space:nowrap}
.pill.ok{background:#ffd48c22;color:var(--ok)}
.team-card p{color:#d3cce0;line-height:1.5;margin:12px 0 0;font-size:15px}
.team-slots{display:flex;align-items:center;gap:6px;margin-top:14px}
.team-slots img,.slot-empty{width:38px;height:38px;border-radius:11px;background:#0005}
.slot-empty{display:inline-block;border:1px dashed #ffffff33;background:transparent}
.team-count{margin-left:auto;color:var(--mist);font-weight:700}
.team-join{position:relative;z-index:2;margin-top:14px;width:100%}

/* Page d'équipe : la ligne des 5 joueurs */
.tm-hero{padding:34px 0 0;background:radial-gradient(80% 70% at 50% 0%,color-mix(in srgb,var(--tc) 55%,transparent),transparent 70%)}
.tm-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tm-emblem{width:84px;height:84px;border-radius:24px;background:#0006;border:1px solid #ffffff22}
.tm-title{flex:1;min-width:220px}
.tm-title h1{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tm-title h1 span{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(36px,6vw,64px);text-transform:uppercase;letter-spacing:.02em;line-height:1}
.tm-title h1 small{font-family:Unbounded,sans-serif;font-size:16px;padding:4px 10px;border-radius:8px;background:#0007;letter-spacing:.08em}
.tm-title p{margin:10px 0 0;color:#d3cce0;max-width:42em;line-height:1.55}
.tm-actions{display:flex;gap:8px;flex-wrap:wrap}
.lineup{display:flex;gap:10px;height:clamp(360px,52vh,520px);margin:28px auto 0;max-width:1240px;padding:0 clamp(12px,3vw,32px)}
.slot{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.12);padding:0;cursor:pointer;color:#fff;font:inherit;text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 75%,#000),color-mix(in srgb,var(--pc2) 60%,#0b0a12) 80%);
  transition:flex-grow .45s cubic-bezier(.2,.8,.2,1),border-color .3s,filter .3s;filter:saturate(.75) brightness(.8)}
.slot.on{flex-grow:1.9;filter:none;border-color:#ffffffa0;box-shadow:0 30px 70px -30px var(--pc)}
.slot-art{position:absolute;left:50%;top:6%;height:100%;translate:-50% 0;max-width:none;object-fit:contain;pointer-events:none;transition:transform .45s;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 95%);mask-image:linear-gradient(to bottom,#000 60%,transparent 95%)}
.slot.on .slot-art{transform:scale(1.05)}
.slot-info{position:absolute;left:0;right:0;bottom:0;padding:16px 14px;display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(transparent,rgba(6,5,12,.92) 45%)}
.slot-role{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ffffffc0}
.slot-role img{width:14px;height:14px}
.slot-name{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(20px,2.2vw,30px);text-transform:uppercase;letter-spacing:.02em;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-sub{font-size:13px;color:#ffffffa8}
.slot-rank{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-top:2px}
.slot-rank img{width:22px;height:22px}
.slot-captain{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:999px;background:var(--amber);color:#1a1206;font-size:12px;font-weight:800}
.slot.is-empty{display:grid;place-items:center;cursor:default;background:repeating-linear-gradient(135deg,#ffffff06 0 10px,transparent 10px 20px);border-style:dashed;filter:none}
.slot.is-empty span{color:var(--mist);font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.1em}
@media (max-width:760px){
  .lineup{overflow-x:auto;scroll-snap-type:x mandatory;height:420px;gap:8px;padding-bottom:6px}
  .slot{flex:0 0 46%;scroll-snap-align:center}
  .slot.on{flex:0 0 62%}
  .slot.is-empty{flex:0 0 22%}
}
.tm-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding-top:22px;padding-bottom:56px}
@media (max-width:860px){.tm-body{grid-template-columns:1fr}}
.tm-focus,.tm-summary{padding:22px;border-radius:24px;background:var(--slate);border:1px solid var(--line)}
.tm-focus{background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#333) 22%,var(--slate)),var(--slate) 60%)}
.f-top{display:flex;align-items:center;gap:14px}
.f-icon{width:60px;height:60px;border-radius:16px;background:#0005}
.f-name{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:32px;text-transform:uppercase;line-height:1}
.f-name small{font-family:Figtree,sans-serif;font-size:15px;color:var(--mist);margin-left:6px;text-transform:none}
.f-bio{color:#d3cce0;line-height:1.55;margin:14px 0 0}
.f-grid,.tm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.tm-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.f-grid,.tm-stats{grid-template-columns:1fr 1fr}}
.f-grid div,.tm-stats div{padding:12px;border-radius:14px;background:#0003}
.f-grid span,.tm-stats span{display:block;font-size:13px;color:var(--mist)}
.f-grid b,.tm-stats b{display:block;margin-top:4px;font-size:16px}
.f-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.f-tags span{padding:4px 10px;border-radius:999px;background:#0004;font-size:13px;font-weight:600}
.f-actions{display:flex;gap:8px;margin-top:18px}
.f-actions .btn:not(.ghost){flex:1}
.f-actions .ghost{width:48px;font-size:22px;padding:8px}
.tm-summary h2{margin:0;font-size:20px}
.tm-summary h3{margin:20px 0 10px;font-size:15px;color:var(--mist)}
.tm-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:520px){.tm-roles{grid-template-columns:1fr 1fr}}
.tm-role{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;background:#0003;font-size:13px;font-weight:600}
.tm-role img{width:24px;height:24px}
.tm-role b{font-family:Unbounded,sans-serif;font-size:18px}
.tm-role.none{opacity:.45}

/* Onglet équipe */
.req-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.req-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #ffffff0a}
.req-list li:last-child{border-bottom:0}
.req-person{display:flex;align-items:center;gap:12px;min-width:0}
.req-person img{width:42px;height:42px;border-radius:12px;background:var(--slate2)}
.req-person b{display:block}
.req-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.req-actions .btn{padding:8px 12px;font-size:14px}
.invite-row{display:flex;gap:8px;flex-wrap:wrap}
.sub-h{margin:18px 0 6px;font-size:15px;color:var(--mist)}
.team-headcard{background:linear-gradient(160deg,#feb9471a,var(--slate) 60%)}

/* Landing : équipes et classement */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.duo-card{display:block;padding:26px;border-radius:24px;text-decoration:none;color:var(--chalk);border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(150deg,color-mix(in srgb,var(--amber) 35%,transparent),rgba(255,255,255,.03) 70%);transition:transform .2s,border-color .2s}
.duo-card:hover{transform:translateY(-4px);border-color:#ffffff40}
.duo-card b{font-family:Unbounded,sans-serif;font-size:22px;letter-spacing:-.03em}
.duo-card p{color:#d3cce0;line-height:1.55;margin:10px 0 16px}
.duo-cta{font-weight:700;color:var(--amber)}
@media (max-width:600px){ .pub-bar .hide-sm{display:none} }

/* =====================================================================
   Notifications
   ===================================================================== */
.notif{position:relative}
.notif-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--slate);color:var(--chalk);cursor:pointer}
.notif-btn:hover{border-color:var(--mist)}
.notif-btn.has-new svg{animation:ring 2.4s ease-in-out infinite;transform-origin:50% 10%}
@keyframes ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--err);color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid var(--night)}
.nav-links .notif{margin-right:4px}
.dtop .notif{margin-left:auto;margin-right:8px}
.dtop .dtabs + .notif{margin-left:0}
.tab-dot{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--err);color:#fff;font-size:11px;font-weight:800;vertical-align:middle}
.mtabs button{position:relative}
.mtabs .tab-dot{position:absolute;top:2px;right:calc(50% - 22px);margin:0}
@media (max-width:980px){ .dtop .notif{margin-left:auto !important;margin-right:6px} }

/* =====================================================================
   Page d'équipe v2 : cartes en biais qui se chevauchent
   ===================================================================== */
@property --sel{syntax:'<color>';inherits:true;initial-value:#25607a}
.tm-hero{position:relative;overflow:hidden;padding-bottom:10px;transition:--sel .6s ease;
  background:radial-gradient(60% 70% at 50% 100%,color-mix(in srgb,var(--sel) 45%,transparent),transparent 70%),
             radial-gradient(80% 70% at 50% 0%,color-mix(in srgb,var(--tc) 40%,transparent),transparent 70%)}
.tm-watermark{position:absolute;inset:auto 0 6% 0;display:flex;justify-content:center;gap:4vw;pointer-events:none;user-select:none;
  font-family:Anton,sans-serif;font-size:clamp(120px,22vw,320px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);white-space:nowrap}
.tm-watermark span:nth-child(2){-webkit-text-stroke-color:color-mix(in srgb,var(--sel) 45%,transparent)}
.tm-glow{position:absolute;left:50%;bottom:-20%;width:90vw;height:80%;translate:-50% 0;border-radius:50%;opacity:.45;background:radial-gradient(closest-side,var(--sel),transparent);pointer-events:none;transition:background .6s}
.tm-head{position:relative;z-index:2}

.lineup{position:relative;z-index:2;display:flex;gap:0;height:clamp(380px,56vh,560px);margin:30px auto 0;max-width:1240px;padding:0 clamp(18px,4vw,48px);perspective:1200px}
.slot{--cut:9%;flex:1 1 0;min-width:0;margin-left:-2.2%;border:0;border-radius:0;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 80%,#000) 0%,color-mix(in srgb,var(--pc2) 55%,#08070e) 85%);
  filter:saturate(.55) brightness(.62);translate:0 0;
  transition:flex-grow .55s cubic-bezier(.2,.8,.2,1),filter .4s,translate .45s cubic-bezier(.2,.8,.2,1);
  animation:slot-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms)}
.slot:first-child{margin-left:0}
@keyframes slot-in{from{opacity:0;transform:translateY(60px) skewX(-4deg)}to{opacity:1;transform:none}}
.slot:hover{filter:saturate(.85) brightness(.85)}
.slot.on{flex-grow:2.1;filter:none;translate:0 -12px;z-index:3;box-shadow:none}
.slot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s ease}
.slot.on::before{background-position:-40% 0}
.slot::after{content:"";position:absolute;left:var(--cut);right:0;top:0;height:4px;background:var(--pc);opacity:0;transition:opacity .3s}
.slot.on::after{opacity:1}
.slot-art{top:4%;height:104%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform:scale(1.02) translateY(8px)}
.slot.on .slot-art{transform:scale(1.1) translateY(0)}
.slot-info{padding:18px calc(var(--cut) + 12px) 18px 14px;z-index:2}
.slot.on .slot-name{font-size:clamp(26px,2.8vw,40px)}
.slot-captain{left:calc(var(--cut) + 8px);z-index:3}
.slot.is-empty{clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);border:0;filter:none;flex-grow:.7;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px),rgba(255,255,255,.02)}
.slot.is-empty span{writing-mode:vertical-rl;transform:rotate(180deg);color:rgba(255,255,255,.35)}
.tm-focus.swap{animation:focus-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes focus-in{from{opacity:.2;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .lineup{height:440px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;padding-top:14px;padding-bottom:4px}
  .slot{flex:0 0 44%;margin-left:-5%;scroll-snap-align:center}
  .slot.on{flex:0 0 66%}
  .slot.is-empty{flex:0 0 22%}
}
html.calm .slot,html.calm .tm-focus.swap{animation:none}

/* Landing : pile d'exemples interactive */
.lx-ghost{pointer-events:auto;cursor:pointer;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .3s}
.lx-ghost:hover{filter:brightness(.7) saturate(1)}
.lx-ghost.left:hover{transform:translateX(-62%) translateZ(-140px) rotateY(20deg)}
.lx-ghost.right:hover{transform:translateX(62%) translateZ(-140px) rotateY(-20deg)}
.lx-main{cursor:pointer}
.lx-main:focus-visible,.lx-ghost:focus-visible{outline:3px solid var(--amber);outline-offset:4px}
.lx-arrow{position:absolute;top:50%;z-index:6;translate:0 -50%;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
  border:1px solid rgba(255,255,255,.22);background:rgba(21,14,31,.42);color:#fff;opacity:.72;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -10px #000a;
  transition:background .25s,color .25s,opacity .25s,scale .3s var(--spring),border-color .25s}
.lx-deck:hover .lx-arrow{opacity:.9}
.lx-arrow:hover{opacity:1;background:var(--amber);border-color:var(--amber);color:#1a1022;scale:1.1}
.lx-arrow:active{scale:.94}
.lx-arrow svg{transition:transform .3s var(--spring)}
.lx-arrow.prev:hover svg{transform:translateX(-2px)} .lx-arrow.next:hover svg{transform:translateX(2px)}
/* à cheval sur le bord de la carte centrale */
.lx-arrow.prev{left:calc(50% - min(280px,50%) - 25px)}
.lx-arrow.next{right:calc(50% - min(280px,50%) - 25px)}
@media (max-width:640px){ .lx-arrow{width:42px;height:42px} .lx-arrow.prev{left:-6px} .lx-arrow.next{right:-6px} }

/* Transitions de la pile : la carte sort d'un côté, la suivante arrive de l'autre */
.lx-main{translate:calc(-50% + var(--drag,0) * 1px) 0;rotate:z calc(var(--drag,0) * .012deg)}
.lx-main.dragging{transition:none}
.lx-main.in-next{animation:deckInNext .62s var(--ease) both}
.lx-main.in-prev{animation:deckInPrev .62s var(--ease) both}
@keyframes deckInNext{from{translate:calc(-50% + 28%) 0;scale:.9;opacity:0}}
@keyframes deckInPrev{from{translate:calc(-50% - 28%) 0;scale:.9;opacity:0}}
.lx-out{z-index:2;pointer-events:none;box-shadow:none}
.lx-out.to-next{animation:deckOutNext .5s var(--ease) forwards}
.lx-out.to-prev{animation:deckOutPrev .5s var(--ease) forwards}
@keyframes deckOutNext{to{translate:calc(-50% - 46%) 0;scale:.84;opacity:0;rotate:y 22deg;filter:brightness(.5)}}
@keyframes deckOutPrev{to{translate:calc(-50% + 46%) 0;scale:.84;opacity:0;rotate:y -22deg;filter:brightness(.5)}}
.lx-ghost.flash{animation:ghostIn .55s var(--ease) both}
@keyframes ghostIn{from{opacity:0}}
.lx-deck-hint{text-align:center;color:var(--mist);font-size:14px;margin:12px 0 0}

/* =====================================================================
   Notifications v2 : panneau flottant + pop-up en direct
   ===================================================================== */
.notif-btn{transition:transform .25s var(--spring),border-color .2s,background .2s}
.notif-btn:hover{transform:translateY(-1px);background:#2a2140}
.notif-btn[aria-expanded="true"]{border-color:var(--amber);color:var(--amber)}
.notif-badge{background:var(--amber);color:#1a1022;animation:badgePop .5s var(--spring)}
@keyframes badgePop{from{transform:scale(0)}}

.np-shade{position:fixed;inset:0;z-index:89;background:#0a0612a0;opacity:0;pointer-events:none;transition:opacity .25s}
.np{position:fixed;z-index:90;top:70px;right:16px;width:min(400px,calc(100vw - 24px));max-height:min(72vh,600px);
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;font-family:Figtree,system-ui,sans-serif;color:var(--chalk);
  background:linear-gradient(180deg,#221a28f2,#18121df5);border:1px solid #ffffff14;
  box-shadow:0 40px 80px -24px #000e,0 0 0 1px #00000040,inset 0 1px 0 #ffffff12;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .22s var(--ease),transform .3s var(--ease)}
.np.show{opacity:1;transform:none}
.np[hidden]{display:none}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px 20px}
.np-title{display:flex;align-items:center;gap:10px}
.np-title b{font-family:Fredoka,Unbounded,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em}
.np-live{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;background:#ffd48c1a;color:var(--ok);font-size:11.5px;font-weight:700;letter-spacing:.02em}
.np-live i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 #ffd48c80}70%{box-shadow:0 0 0 7px #ffd48c00}100%{box-shadow:0 0 0 0 #ffd48c00}}
.np-x,.nt-x{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;border:0;background:transparent;color:var(--mist);cursor:pointer;transition:background .2s,color .2s}
.np-x:hover,.nt-x:hover{background:#ffffff10;color:var(--chalk)}
.np-seg{display:flex;gap:4px;margin:0 16px 8px;padding:4px;border-radius:12px;background:#0000002e}
.np-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:0;border-radius:9px;background:transparent;
  color:var(--mist);font:600 13.5px Figtree,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.np-seg button.on{background:#ffffff12;color:var(--chalk);box-shadow:inset 0 1px 0 #ffffff10}
.np-count:empty{display:none}
.np-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--amber);color:#1a1022;font-size:11px;font-weight:800;display:inline-grid;place-items:center}
.np-list{list-style:none;margin:0;padding:4px 10px 10px;overflow:auto;overscroll-behavior:contain;flex:1}
.np-item{position:relative;display:flex;gap:12px;padding:12px 10px;border-radius:14px;transition:background .2s;
  animation:npIn .45s var(--ease) both;animation-delay:var(--d,0ms)}
.np-item:hover{background:#ffffff08}
.np-item.is-new{background:linear-gradient(90deg,#feb94714,transparent 80%)}
.np-item.is-new::before{content:"";position:absolute;left:0;top:16px;width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--amber)}
@keyframes npIn{from{opacity:0;transform:translateY(8px)}}
.np-ico{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ffffff0d;color:var(--mist)}
[data-i="join"] > .np-ico,[data-i="mail"] > .np-ico{background:#feb94722;color:var(--amber)}
[data-i="ok"] > .np-ico,[data-i="star"] > .np-ico{background:#ffd48c1f;color:var(--ok)}
[data-i="no"] > .np-ico{background:#ff6b7d1c;color:var(--err)}
.np-body{flex:1;min-width:0}
.np-body p{margin:1px 0 0;font-size:14.5px;line-height:1.42;color:#ddd5e6}
.np-body p b{color:#fff;font-weight:700}
.np-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:5px;font-size:12.5px;color:var(--mist)}
.np-meta time{margin-right:4px}
.np-meta a{padding:2px 8px;border-radius:999px;background:#ffffff0c;color:var(--chalk);text-decoration:none;font-weight:600;transition:background .2s,color .2s}
.np-meta a:hover{background:#feb94726;color:var(--amber)}
.np-actions{display:flex;gap:8px;margin-top:10px}
.np-btn{flex:1;padding:9px 12px;border-radius:11px;border:1px solid transparent;font:700 14px Figtree,sans-serif;cursor:pointer;
  transition:transform .2s var(--spring),filter .2s,background .2s}
.np-btn:hover:not(:disabled){transform:translateY(-1px)}
.np-btn:active:not(:disabled){transform:scale(.97)}
.np-btn.yes{background:var(--amber);color:#1a1022;box-shadow:0 8px 20px -10px #feb947}
.np-btn.no{background:#ffffff0d;color:var(--chalk);border-color:#ffffff14}
.np-btn:disabled{opacity:.55;cursor:default}
.np-btn.busy{position:relative;color:transparent}
.np-btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid #1a1022;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.np-done{margin-top:8px;font-size:13px;font-weight:700;color:var(--mist);animation:npIn .3s var(--ease)}
.np-done.ok{color:var(--ok)} .np-done.err{color:var(--err)}
.np-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 20px;text-align:center}
.np-empty span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#ffffff0a;color:var(--mist);margin-bottom:6px}
.np-empty b{font-family:Fredoka,sans-serif;font-size:17px}
.np-empty small{color:var(--mist);font-size:13px;line-height:1.45;max-width:260px}
.np-foot{padding:10px 16px 14px;border-top:1px solid #ffffff0c;text-align:center}
.np-clear{border:0;background:none;color:var(--mist);font:600 13px Figtree,sans-serif;cursor:pointer;padding:6px 10px;border-radius:8px}
.np-clear:hover{color:var(--chalk);background:#ffffff0a}
@media (max-width:640px){
  .np{top:auto !important;right:0 !important;left:0;bottom:0;width:100%;max-height:82vh;border-radius:24px 24px 0 0;transform:translateY(40px);transform-origin:bottom center;
    padding-bottom:env(safe-area-inset-bottom)}
  .np::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:#ffffff26;margin:10px auto 0}
  .np-shade.show{opacity:1;pointer-events:auto}
  html.np-open{overflow:hidden}
}

/* Pop-up en direct */
.nt-stack{position:fixed;z-index:95;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;width:min(370px,calc(100vw - 24px));pointer-events:none}
.nt{position:relative;display:flex;gap:12px;padding:14px 12px 14px 14px;border-radius:18px;overflow:hidden;pointer-events:auto;
  background:linear-gradient(180deg,#241c2af5,#1c1622f8);border:1px solid #ffffff17;color:var(--chalk);
  box-shadow:0 24px 50px -18px #000e,inset 0 1px 0 #ffffff14;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;transform:translateX(30px) scale(.96);transition:opacity .35s var(--ease),transform .5s var(--spring)}
.nt.in{opacity:1;transform:none}
.nt.out{opacity:0;transform:translateX(40px) scale(.96);transition:opacity .25s,transform .3s var(--ease)}
.nt[data-i="join"],.nt[data-i="mail"]{border-color:#feb94755}
.nt .nt-x{flex:0 0 28px;height:28px;margin:-4px -2px 0 0}
.nt-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--amber);transform-origin:left;opacity:.7;animation:ntLife var(--life,8s) linear forwards}
.nt.paused .nt-bar{animation-play-state:paused}
.nt.sticky .nt-bar{display:none}
@keyframes ntLife{to{transform:scaleX(0)}}
@media (max-width:640px){
  .nt-stack{right:12px;left:12px;bottom:auto;top:12px;width:auto}
  .nt{transform:translateY(-24px) scale(.97)}
  .nt.out{transform:translateY(-30px) scale(.96)}
}

/* =====================================================================
   Mouvement : briques qui arrivent, changement d'onglet, changement de page
   ===================================================================== */
.mo .brick:not(.in){opacity:0}
.mo .brick.in{animation:brickIn .75s var(--ease) var(--bd,0ms) backwards}
@keyframes brickIn{from{opacity:0;translate:0 34px;scale:.97}}
.mo .board > li.brick.in{animation-name:brickSide}
@keyframes brickSide{from{opacity:0;translate:-30px 0}}
.mo .pod.brick.in{animation-name:brickRise;animation-duration:.9s}
@keyframes brickRise{from{opacity:0;translate:0 70px;scale:.9}}

/* Onglets de l'espace compte : chaque vue arrive en douceur */
.view:not(.hidden){animation:viewIn .5s var(--ease)}
@keyframes viewIn{from{opacity:0;translate:0 14px}}

/* Arrivée sur une page */
body{animation:pageIn .55s var(--ease)}
@keyframes pageIn{from{opacity:0}}
html.leaving body{opacity:0;translate:0 -8px;transition:opacity .17s ease,translate .17s ease}

/* Transition native entre les pages (Chrome, Edge, Safari récents) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .45s var(--ease) both}
@keyframes vtOut{to{opacity:0;translate:0 -10px}}
@keyframes vtIn{from{opacity:0;translate:0 16px}}
.nav,.dtop{view-transition-name:topbar}
::view-transition-group(topbar){animation-duration:.35s}

/* Boutons : un peu de ressort partout */
.btn{transition:transform .25s var(--spring),box-shadow .25s,background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}

/* Cartes d'équipe et lignes du classement : relief au survol */
.team-card{transition:transform .35s var(--spring),box-shadow .35s,border-color .3s}
.team-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px #000c,0 0 0 1px #feb94733}
.board > li{transition:transform .3s var(--spring),background .2s}
.board > li:hover{transform:translateX(4px)}
html.calm body,html.calm .view:not(.hidden){animation:none}
html.calm::view-transition-old(root),html.calm::view-transition-new(root){animation:none}
/* Barre du haut sur téléphone : jamais de texte sur deux lignes */
.nav-links a,.nav-links .btn{white-space:nowrap}
@media (max-width:600px){
  .nav-links #navLogin{display:none}
  .nav-links{gap:8px}
  .nav-links .btn{padding:10px 14px;font-size:14px}
}
@media (max-width:370px){ .nav .logo-word{display:none} }
/* Carte d'exemple : si le contenu dépasse (téléphone), on garde le haut (pseudo) visible */
.lx-card.vp-stage{align-items:flex-start;align-items:safe center}
@media (max-width:640px){
  .lx-card.vp-stage{padding-top:18px;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .lx-card .vp-name{font-size:36px}
}

/* Recherche d'équipes v2 : cartes avec l'agent emblème en fond */
.team-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.team-card{overflow:hidden;isolation:isolate;padding:20px;border-radius:24px;min-height:230px;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--tc) 45%,transparent),transparent 60%),linear-gradient(170deg,#221a28,#1a142a)}
.team-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%);background-size:260% 100%;background-position:130% 0;transition:background-position 1s var(--ease)}
.team-card:hover::after{background-position:-30% 0}
.team-card:hover{border-color:color-mix(in srgb,var(--tc) 60%,#fff)}
.team-art{position:absolute;z-index:-1;right:-18%;top:-6%;height:135%;width:auto;opacity:.38;pointer-events:none;
  -webkit-mask-image:linear-gradient(270deg,#000 25%,transparent 85%);mask-image:linear-gradient(270deg,#000 25%,transparent 85%);
  transition:transform .8s var(--ease),opacity .4s}
.team-card:hover .team-art{transform:translateX(-10px) scale(1.04);opacity:.55}
.team-card-top b{font-family:Fredoka,Figtree,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.01em}
.team-emblem{width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--tc) 35%,#0007);box-shadow:0 0 0 1px #ffffff1a}
.team-card p{flex:1}
.team-slots{gap:0}
.team-slots img,.team-slots .slot-empty{margin-left:-8px;border:2px solid #1d1630;width:40px;height:40px;border-radius:50%;transition:transform .3s var(--spring)}
.team-slots img:first-child,.team-slots .slot-empty:first-child{margin-left:0}
.team-card:hover .team-slots img{transform:translateY(-3px)}
.team-slots .slot-empty{border:2px dashed #ffffff2e;background:#0003}
.team-count{font-family:Fredoka,sans-serif;font-size:18px}
#peakHint.flash{color:var(--amber);transition:color .2s}

/* =====================================================================
   Badge « Vérifié », bouton ami sur une page publique
   ===================================================================== */
.vp-verified{display:inline-grid;place-items:center;margin-left:.22em;font-size:.42em;vertical-align:.55em;color:#feb947;
  filter:drop-shadow(0 0 8px #feb94780);animation:vbadge .7s var(--spring,ease) .4s backwards;cursor:help}
@keyframes vbadge{from{transform:scale(0) rotate(-60deg);opacity:0}}
.vbadge-sm{display:inline-grid;vertical-align:-2px;margin-left:4px;color:#feb947;font-size:15px}
.pub-friend{display:inline-flex;align-items:center;font:700 13px Figtree,sans-serif;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:#feb947;color:#1a1022;border:1px solid #feb947;transition:transform .25s var(--spring),background .2s,color .2s}
.pub-friend:hover:not(:disabled){transform:translateY(-2px)}
.pub-friend.outgoing,.pub-friend.friends{background:#000b;color:var(--chalk);border-color:#ffffff26}
.pub-friend.friends{color:var(--ok)}
.pub-friend:disabled{opacity:.6;cursor:default}

/* Onglet Amis */
.soon{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#feb94726;color:var(--amber);font-size:11px;font-weight:800;letter-spacing:.02em;vertical-align:1px}
.count-pill{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;margin-left:6px;border-radius:999px;background:#ffffff12;color:var(--mist);font-size:12.5px;vertical-align:2px}
.fr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.fr-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:12px;align-items:center;
  padding:14px;border-radius:18px;border:1px solid #ffffff12;
  background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--pc) 35%,transparent),transparent 60%),#ffffff06;
  transition:transform .3s var(--spring),border-color .25s}
.fr-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pc) 55%,#fff)}
.fr-art{position:absolute;z-index:-1;right:-22%;top:-20%;height:170%;opacity:.25;pointer-events:none;
  -webkit-mask-image:linear-gradient(270deg,#000 30%,transparent 85%);mask-image:linear-gradient(270deg,#000 30%,transparent 85%)}
.fr-av{width:52px;height:52px;border-radius:16px;object-fit:cover;background:#0005;box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 60%,transparent)}
.fr-id{min-width:0}
.fr-id a{display:inline-flex;align-items:center;color:var(--chalk);text-decoration:none}
.fr-id a:hover b{color:var(--amber)}
.fr-id b{font-family:Fredoka,Figtree,sans-serif;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-id span{display:block;color:var(--mist);font-size:13px;margin-top:2px}
.fr-actions{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.fr-actions .btn{flex:1;padding:9px 12px;font-size:14px}
.fr-actions .pill{flex:1;text-align:center}
.fr-empty{display:flex;flex-direction:column;gap:4px;padding:26px;text-align:center;border:1px dashed #ffffff1f;border-radius:16px}
.fr-empty span{color:var(--mist);font-size:14px}
#view-friends .card + .card,#friendsBody .card{margin-top:14px}

/* Carte Vérification */
.vstate{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#ffffff12;color:var(--mist)}
.vstate.ok{background:#feb94726;color:var(--amber)} .vstate.wait{background:#c9c0d81f;color:#c9c0d8} .vstate.no{background:#ff6b7d1f;color:var(--err)}
.v-ok,.v-wait,.v-no{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;background:#ffffff08}
.v-ok .vp-verified{font-size:34px;margin:0;vertical-align:0}
.v-ok div,.v-wait div,.v-no{display:flex;flex-direction:column;gap:3px}
.v-ok span,.v-wait span,.v-no span{color:var(--mist);font-size:14px;line-height:1.45}
.v-no{margin-bottom:14px;border:1px solid #ff6b7d33}
.spinner{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:3px solid #c9c0d844;border-top-color:#c9c0d8;animation:spin .9s linear infinite}
.v-steps{margin:6px 0 4px;padding-left:20px;display:grid;gap:10px;line-height:1.5}
.v-code{display:inline-block;padding:4px 10px;border-radius:8px;background:#000a;border:1px dashed var(--amber);color:var(--amber);font:800 16px ui-monospace,Consolas,monospace;letter-spacing:.08em}
.hint.warn{color:var(--amber)}

/* =====================================================================
   Trouver des joueurs (swipe)
   ===================================================================== */
.nav-links .soon{margin-left:5px;font-size:10px;padding:2px 6px}
.finder{position:relative}
.fd-layout{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;margin-top:10px}
.fd-filters{position:sticky;top:84px;padding:18px;border-radius:22px;border:1px solid #ffffff12;background:linear-gradient(170deg,#231b36,#1a1429)}
.fd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fd-head b{font-family:Fredoka,sans-serif;font-size:19px}
.fd-group{margin-top:16px}
.fd-label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.fd-range{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;color:var(--mist)}
.fd-filters select{width:100%}
.fd-roles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fd-chip{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:11px;border:1px solid #ffffff14;background:#ffffff08;color:var(--chalk);
  font:600 13px Figtree,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--spring)}
.fd-chip img{width:16px;height:16px}
.fd-chip[aria-pressed="true"]{background:#feb94726;border-color:var(--amber);color:var(--amber)}
.fd-chip[aria-pressed="true"] img{filter:sepia(1) saturate(4) hue-rotate(-10deg)}
.fd-agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px;max-height:172px;overflow:auto;padding:2px}
.fd-agent{aspect-ratio:1;padding:0;border-radius:10px;border:2px solid transparent;background:#0004;cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .2s,border-color .2s,transform .2s var(--spring)}
.fd-agent:hover{opacity:1;transform:translateY(-2px)}
.fd-agent img{width:100%;height:100%;object-fit:cover;display:block}
.fd-agent[aria-pressed="true"]{opacity:1;border-color:var(--ac);box-shadow:0 0 14px -2px var(--ac)}
.fd-filters .switch{margin-top:16px}
.fd-filters :disabled{cursor:not-allowed}

.fd-stage{display:flex;flex-direction:column;align-items:center}
.fd-deck{position:relative;width:min(420px,100%);height:min(640px,72vh);min-height:520px}
.fd-card{--dx:0;position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:28px;border:1px solid #ffffff1c;touch-action:pan-y;user-select:none;
  background:radial-gradient(90% 60% at 70% 20%,color-mix(in srgb,var(--c1) 70%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--c2) 40%,#120c1c),#0d0915);
  box-shadow:0 40px 80px -30px #000e;transform:translateX(calc(var(--dx) * 1px)) rotate(calc(var(--dx) * .06deg));
  transition:transform .45s var(--spring),opacity .3s}
.fd-card:not(.top){transform:scale(.94) translateY(18px);filter:brightness(.6)}
.fd-card.top{cursor:grab;animation:fdIn .5s var(--ease)}
@keyframes fdIn{from{transform:scale(.94) translateY(18px);filter:brightness(.6)}}
.fd-card.drag{transition:none;cursor:grabbing}
.fd-card.go-yes{transform:translateX(140%) rotate(22deg);opacity:0}
.fd-card.go-no{transform:translateX(-140%) rotate(-22deg);opacity:0}
.fd-art{position:absolute;z-index:-1;right:-28%;top:-2%;height:88%;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent 92%);mask-image:linear-gradient(#000 55%,transparent 92%)}
.fd-stamp{position:absolute;top:34px;padding:6px 16px;border:4px solid;border-radius:12px;font:400 40px Anton,sans-serif;letter-spacing:.06em;opacity:0;transition:opacity .15s}
.fd-stamp.yes{left:26px;color:#ffd48c;transform:rotate(-14deg)}
.fd-stamp.no{right:26px;color:#ff6b7d;transform:rotate(14deg)}
.fd-card.lean-yes .fd-stamp.yes,.fd-card.go-yes .fd-stamp.yes,.fd-card.lean-no .fd-stamp.no,.fd-card.go-no .fd-stamp.no{opacity:1}
.fd-info{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,#0b0712f2 30%)}
.fd-name{display:flex;align-items:baseline;gap:6px}
.fd-name b{font:400 46px/1 Anton,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.fd-name small{color:#ffffffa0;font-weight:700}
.fd-main{display:flex;align-items:center;gap:7px;margin-top:6px;color:#e5def0;font-weight:600}
.fd-main img{width:18px;height:18px}
.fd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.fd-stats > div{position:relative;display:flex;flex-direction:column;gap:2px;min-height:76px;padding:10px;border-radius:14px;background:#ffffff0c;border:1px solid #ffffff12;background-size:cover;background-position:center}
.fd-stats img{width:30px;height:30px}
.fd-stats span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffffffa0}
.fd-stats b{font:400 17px Anton,sans-serif;text-transform:uppercase}
.fd-map{justify-content:flex-end}
.fd-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.fd-tags span{padding:4px 10px;border-radius:999px;background:#ffffff14;font-size:12.5px;font-weight:700}
.fd-bio{margin:10px 0 0;color:#d8d0e4;font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-open{display:inline-block;margin-top:10px;color:var(--amber);font-weight:700;font-size:14px;text-decoration:none}
.fd-buttons{display:flex;gap:26px;margin-top:22px;transition:opacity .3s}
.fd-buttons.off{opacity:.35;pointer-events:none}
.fd-btn{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;cursor:pointer;border:2px solid;background:#ffffff08;
  transition:transform .3s var(--spring),background .2s,box-shadow .3s}
.fd-btn:hover{transform:scale(1.1)}
.fd-btn:active{transform:scale(.92)}
.fd-btn.no{color:#ff6b7d;border-color:#ff6b7d66}
.fd-btn.no:hover{background:#ff6b7d22;box-shadow:0 0 30px -6px #ff6b7d}
.fd-btn.yes{color:#ffd48c;border-color:#ffd48c66}
.fd-btn.yes:hover{background:#ffd48c22;box-shadow:0 0 30px -6px #ffd48c}
.fd-help{color:var(--mist);font-size:13px;margin-top:12px}
.fd-empty,.fd-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;
  border-radius:28px;border:1px dashed #ffffff22;background:#ffffff05}
.fd-empty svg{color:var(--amber)}
.fd-empty .sweep{transform-origin:60px 60px;animation:spin 3s linear infinite}
.fd-empty h2{margin:6px 0 0;font:400 34px Anton,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.fd-empty p{margin:0 0 8px;color:var(--mist);line-height:1.5;max-width:320px}
.fd-match{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#08050ecc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:pageIn .3s}
.fd-match-box{width:min(420px,100%);padding:30px;border-radius:26px;text-align:center;border:1px solid #feb94755;
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--c1) 50%,transparent),transparent),#1c1622;animation:brickRise .6s var(--spring)}
.fd-match-box img{width:84px;height:84px;border-radius:24px}
.fd-match-box h2{font:400 46px Anton,sans-serif;text-transform:uppercase;color:var(--amber);margin:14px 0 6px}
.fd-match-box p{color:#ddd5e6;line-height:1.5}
.fd-match-box .row{justify-content:center}
.fd-toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:100;padding:12px 18px;border-radius:12px;background:#241c2a;border:1px solid #ffffff1a;animation:pageIn .3s}

/* Verrou « Bientôt » */
body.locked .fd-layout{opacity:.28;pointer-events:none;user-select:none}
.fd-card.ghost{background:repeating-linear-gradient(115deg,#ffffff06 0 14px,transparent 14px 28px),linear-gradient(180deg,#241c2a,#120c1c)}
.fd-card.ghost .fd-stats > div{min-height:76px}
.fd-lock{position:absolute;top:120px;left:0;right:0;display:flex;align-items:flex-start;justify-content:center;padding:40px clamp(0px,2vw,20px) 0;z-index:5}
.fd-lock-box{width:min(520px,100%);padding:32px;border-radius:28px;text-align:center;border:1px solid #feb94740;
  background:linear-gradient(180deg,#241c2af2,#18121df5);box-shadow:0 40px 90px -30px #000e;animation:brickRise .8s var(--ease)}
.fd-lock-ico{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 12px;border-radius:22px;background:#feb94722;color:var(--amber);animation:lockBob 3s ease-in-out infinite}
@keyframes lockBob{50%{transform:translateY(-5px) rotate(-4deg)}}
.fd-lock-box h2{font:400 38px/1.05 Anton,sans-serif;text-transform:uppercase;margin:12px 0}
.fd-lock-box p{color:#ddd5e6;line-height:1.55}
.fd-lock-box .row{justify-content:center;flex-wrap:wrap}
@media (max-width:860px){
  .fd-layout{grid-template-columns:1fr}
  .fd-filters{position:static}
  .fd-deck{min-height:500px;height:68vh}
  .fd-name b{font-size:38px}
  .fd-lock{padding-top:0}
  .fd-lock-box{padding:24px 18px}
  .fd-lock-box h2{font-size:30px}
}

/* =====================================================================
   Admin : vérifications
   ===================================================================== */
.adm-list{display:grid;gap:16px;margin-top:16px}
.adm-item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;padding:18px;border-radius:22px;border:1px solid var(--line);background:var(--slate)}
.adm-proof{display:grid;place-items:center;min-height:260px;border-radius:14px;background:#0006;overflow:hidden;color:var(--mist);text-decoration:none}
.adm-proof img{width:100%;height:100%;object-fit:contain}
.adm-who{display:flex;gap:12px;align-items:center}
.adm-who img{width:48px;height:48px;border-radius:14px}
.adm-who b{display:block;font-family:Fredoka,sans-serif;font-size:20px}
.adm-who small{color:var(--mist);margin-left:4px}
.adm-who a{color:var(--amber);font-weight:700;text-decoration:none}
.adm-info dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:16px 0}
.adm-info dt{color:var(--mist);font-size:13px}
.adm-info dd{margin:0;font-weight:700}
@media (max-width:760px){ .adm-item{grid-template-columns:1fr} }

/* Performance : quand les particules tournent, la carte n'a plus de flou d'arrière-plan
   (le flou serait recalculé à chaque image et ferait ramer certains navigateurs) */
.vp-stage.fx-on .vp-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(160deg,rgba(16,13,26,.9),rgba(16,13,26,.8))}
.vp-stage.fx-on[data-card="solid"] .vp-card{background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 70%,#0c0a14),#0c0a14)}
.vp-stage.fx-on[data-card="clear"] .vp-card{background:transparent}
.vp-fx{contain:strict}
/* Sections de la page d'accueil hors écran : le navigateur ne les dessine pas */
.home main > section:not(.lx-stage):not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 700px}

/* Signalement / contact */
.rp-wrap{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:#08050ecc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:pageIn .25s}
.rp-box{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border-radius:22px;background:#1c1622;border:1px solid #ffffff17;box-shadow:0 40px 80px -30px #000e;animation:brickRise .45s var(--ease)}
.rp-head{display:flex;justify-content:space-between;align-items:center}
.rp-head h2{margin:0;font-family:Fredoka,sans-serif;font-size:22px}
.rp-x{width:34px;height:34px;border-radius:10px;border:0;background:#ffffff0d;color:var(--chalk);cursor:pointer}
.rp-reasons{border:0;margin:0;padding:0;display:grid;gap:6px}
.rp-r{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#ffffff08;cursor:pointer;line-height:1.35}
.rp-r input{width:auto;margin-top:2px;accent-color:var(--amber)}
.rp-r:has(input:checked){background:#feb9471f;outline:1px solid #feb94766}
.rp-actions{margin-top:14px}
.rp-done{text-align:center;padding:18px 0}
.rp-done b{font-family:Fredoka,sans-serif;font-size:22px}
.pub-report{display:inline-flex;align-items:center;font:700 13px Figtree,sans-serif;padding:8px 12px;border-radius:999px;cursor:pointer;background:#000b;color:#ffffffb0;border:1px solid #ffffff26}
.pub-report:hover{color:#fff}
/* Comptes liés */
.vp-linked{display:inline-block;width:16px;height:16px;margin-left:auto;border-radius:50%;background:#ffd48c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23102018' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;flex:0 0 16px}
.vp-link.is-linked{border-color:#ffd48c55}

/* Informations légales */
.legal-toc{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.legal-toc a{padding:8px 14px;border-radius:999px;background:#ffffff0c;border:1px solid #ffffff14;color:var(--chalk);text-decoration:none;font-weight:600;font-size:14px}
.legal-toc a:hover{border-color:var(--amber);color:var(--amber)}
.legal-sec{margin-top:16px;scroll-margin-top:90px;line-height:1.6}
.legal-sec h2{font-family:Fredoka,sans-serif;font-size:24px;margin:0 0 10px}
.legal-sec h3{font-size:16px;margin:20px 0 6px;color:var(--amber)}
.legal-sec ul,.legal-sec ol{padding-left:20px;display:grid;gap:8px;color:#ddd5e6}
.legal-sec p{color:#ddd5e6}
.legal-sec a{color:var(--amber)}
.legal-dl{display:grid;grid-template-columns:170px 1fr;gap:12px 18px;margin:0}
.legal-dl dt{color:var(--mist);font-weight:700}
.legal-dl dd{margin:0;color:#ddd5e6}
@media (max-width:640px){ .legal-dl{grid-template-columns:1fr;gap:4px} .legal-dl dd{margin-bottom:10px} }
.legal-optout{margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:#ffffff08}
/* Pied de page commun */
.footer .foot{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;align-items:center}
.foot-links{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:flex-end}
.foot-links a,.foot-links button{color:var(--mist);text-decoration:none;font:600 13.5px Figtree,sans-serif;background:none;border:0;padding:0;cursor:pointer}
.foot-links a:hover,.foot-links button:hover{color:var(--chalk)}
.foot-riot{grid-column:1/-1;margin:0;color:#8b839c;font-size:12px;line-height:1.5}
@media (max-width:640px){ .footer .foot{grid-template-columns:1fr} .foot-links{justify-content:flex-start} }
.legal a{color:var(--amber)}
.adm-rep{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--slate)}
.adm-rep-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adm-rep p{margin:10px 0 0;color:#ddd5e6}
.adm-rep a{color:var(--amber)}
.adm-rep-txt{white-space:pre-wrap;padding:10px 12px;border-radius:10px;background:#0003}
.adm-rep .row{margin-top:12px;flex-wrap:wrap}
.pill.warn{background:#ff6b7d22;color:var(--err)}
.tm-report{opacity:.7}
.link-list{display:grid;gap:8px}
.link-row{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff10}
.link-dot{width:12px;height:12px;border-radius:50%;background:var(--pc);box-shadow:0 0 12px var(--pc)}
.link-row b{display:block}
.link-row .btn{padding:8px 16px;font-size:14px}

/* =====================================================================
   Accueil v5 — vivant, une seule couleur
   ===================================================================== */
body.home{position:relative;background:var(--night)}
html:has(body.home){background:var(--night)}
.lx-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lx-glow{position:fixed;inset:0;
  background:radial-gradient(70vmax 50vmax at 50% -12%,#feb94730,transparent 60%),
             radial-gradient(40vmax 40vmax at 100% 40%,#feb94712,transparent 60%),
             radial-gradient(40vmax 40vmax at 0% 75%,#c8862a12,transparent 60%)}
.lx-layer{position:absolute;inset:0;will-change:transform}
.lx-shape{position:absolute;color:var(--amber);opacity:var(--o);rotate:var(--r);animation:floaty var(--t) ease-in-out var(--dl) infinite alternate}
.lx-shape svg{width:100%;height:100%;display:block}
@keyframes floaty{from{transform:translateY(-14px) rotate(-6deg)}to{transform:translateY(14px) rotate(6deg)}}
body.home main,body.home .footer{position:relative;z-index:1}
.aurora,.grain{display:none}

/* Menu flottant en forme de pilule */
.nav-float{position:sticky;top:12px;margin:12px auto 0;width:min(1120px,calc(100% - 24px));border-radius:22px;padding:10px 12px 10px 20px;
  background:#16101ccc;border:1px solid #ffffff14;box-shadow:0 20px 50px -30px #000;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s,box-shadow .3s,width .4s var(--ease)}
.nav-float.scrolled{background:#140e1aee;box-shadow:0 24px 60px -24px #000e}
.nav-float .nav-links a:not(.btn){border-radius:12px;transition:background .2s,color .2s}
.nav-float .nav-links a:not(.btn):hover{background:#ffffff0c}

/* Héros : les mots tombent un par un, puis le bloc s'éloigne en douceur au scroll */
.lx-hero{min-height:calc(100svh - 90px);justify-content:center;padding:clamp(30px,6vw,70px) 0 60px;position:relative}
.lx-hero-in{display:flex;flex-direction:column;align-items:center;
  transform:translate3d(0,calc(var(--p,0) * -120px),0) scale(calc(1 - var(--p,0) * .12));opacity:calc(1 - var(--p,0) * 1.6)}
.lx-title{color:var(--chalk);background:none;-webkit-background-clip:initial;background-clip:initial;filter:none;font-size:clamp(40px,7.6vw,104px)}
.lx-title .w{display:inline-block;animation:wordIn .9s var(--spring) both;animation-delay:calc(var(--i) * 70ms + 100ms)}
.lx-title .hl{color:var(--amber);text-shadow:0 0 40px #feb94755}
@keyframes wordIn{from{opacity:0;transform:translateY(40px) rotate(4deg) scale(.9)}}
.lx-in{animation:lxIn .8s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 100ms)}
@keyframes lxIn{from{opacity:0;transform:translateY(24px)}}
.lx-pill{animation:lxIn .7s var(--ease) both}
.lx-pill .dot{background:var(--amber);box-shadow:0 0 0 4px #feb94733;animation:pulseA 2s ease-in-out infinite}
@keyframes pulseA{50%{box-shadow:0 0 0 9px #feb94700}}
.lx-scroll{position:absolute;left:50%;bottom:18px;translate:-50% 0;width:26px;height:42px;border-radius:14px;border:2px solid #ffffff40;opacity:calc(1 - var(--p,0) * 6)}
.lx-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--amber);animation:scrollCue 1.6s ease-in-out infinite}
@keyframes scrollCue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Apparitions réversibles */
/* Les blocs sont pilotés par le défilement (home.js) : pas de transition CSS, ils suivent la molette */
[data-r]{opacity:0;will-change:transform,opacity}
[data-r].in{opacity:1}

.lx-kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:#feb9471a;border:1px solid #feb94740;color:var(--amber);font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.lx-h2{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,48px);letter-spacing:-.04em;line-height:1.05;margin:0}
.lx-p{color:#d8d0e0;font-size:17px;line-height:1.6;max-width:32em}
.lx-checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.lx-checks li{display:flex;gap:10px;align-items:center;font-weight:600}
.lx-checks li::before{content:"";width:22px;height:22px;border-radius:7px;flex:0 0 22px;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231a1022' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* Maquette de l'éditeur : se redresse quand on fait défiler */
.lx-editor-sec{padding-top:110px;padding-bottom:40px}
.lx-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center}
.lx-mock-wrap{position:relative;perspective:1400px}
.lx-mock{transform:rotateX(calc((1 - var(--p,0) * 2.2) * 18deg)) rotateY(calc((1 - var(--p,0) * 2.2) * -14deg)) scale(calc(.9 + min(var(--p,0), .45) * .22));
  transform-origin:50% 70%;border-radius:22px;overflow:hidden;background:#1a1420;border:1px solid #feb94733;box-shadow:0 60px 100px -40px #000,0 0 80px -30px #feb94760}
.lx-mock-top{display:flex;gap:6px;align-items:center;padding:12px 14px;background:#14101a;border-bottom:1px solid #ffffff0d}
.lx-mock-top i{width:10px;height:10px;border-radius:50%;background:#ffffff1f}
.lx-mock-top span{margin-left:10px;padding:4px 12px;border-radius:8px;background:#ffffff0a;color:var(--mist);font-size:12px}
.lx-mock-body{position:relative;height:330px;background:radial-gradient(90% 80% at 80% 20%,#feb94733,transparent 60%),#120d17}
.lx-mock-preview{position:absolute;left:8%;top:12%;width:46%;padding:16px;border-radius:16px;background:#0008;border:1px solid #ffffff12}
.lx-mock-preview .m-av{width:44px;height:44px;border-radius:12px;background:var(--amber);opacity:.85}
.lx-mock-preview .m-name{width:70%;height:16px;border-radius:6px;background:#fff;margin:12px 0 10px;opacity:.85}
.m-tags{display:flex;gap:5px}.m-tags i{width:34px;height:12px;border-radius:999px;background:#ffffff26}
.m-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.m-tiles i{height:38px;border-radius:9px;background:#ffffff12}
.m-tiles i:first-child{background:#feb94733}
.lx-mock-dock{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;gap:8px;padding:8px;border-radius:16px;background:#000a;border:1px solid #ffffff14}
.lx-mock-dock i{width:30px;height:30px;border-radius:9px;background:#ffffff14;animation:dockPulse 4.2s ease-in-out infinite;animation-delay:calc(var(--k) * .6s)}
@keyframes dockPulse{0%,10%,100%{background:#ffffff14;transform:none}4%{background:var(--amber);transform:translateY(-4px)}}
.lx-mock-panel{position:absolute;right:6%;top:14%;width:34%;padding:14px;border-radius:14px;background:#1f1826;border:1px solid #feb94740;display:grid;gap:8px;animation:panelBob 5s ease-in-out infinite}
.lx-mock-panel b{height:12px;width:60%;border-radius:5px;background:var(--amber)}
.lx-mock-panel span{height:24px;border-radius:7px;background:#ffffff10}
.lx-mock-panel span.s{height:8px;background:linear-gradient(90deg,var(--amber) 60%,#ffffff14 60%)}
@keyframes panelBob{50%{transform:translateY(-8px)}}
.lx-float-card{position:absolute;padding:10px 14px;border-radius:14px;background:#1f1826f0;border:1px solid #feb94740;box-shadow:0 20px 40px -20px #000;animation:panelBob 6s ease-in-out infinite}
.lx-float-card b{display:block;font-size:11px;color:var(--mist);text-transform:uppercase;letter-spacing:.08em}
.lx-float-card span{font-family:Fredoka,sans-serif;font-weight:700;font-size:17px;color:var(--amber)}
.lx-float-card.c1{left:-4%;bottom:-6%;animation-delay:-2s;transform:translateY(calc((1 - var(--p,0) * 2) * 40px))}
.lx-float-card.c2{right:-3%;top:-7%;transform:translateY(calc((1 - var(--p,0) * 2) * -40px))}
@media (max-width:860px){ .lx-split{grid-template-columns:1fr} .lx-mock-body{height:260px} .lx-float-card{display:none} }

.lx-stats-sec{padding-top:90px}
.lx-stat{transition:opacity .7s var(--ease),transform .9s var(--ease),border-color .3s}
.lx-stat:hover{border-color:#feb94755}
.lx-stat b{color:var(--amber)}

/* Fonctionnalités : cartes qui réagissent */
.feature{padding:22px;border-radius:22px;background:linear-gradient(160deg,#ffffff0a,#ffffff03);border:1px solid #ffffff10}
.feature:hover{border-color:#feb94755}
.feature .ico{background:#feb9471f;transition:transform .4s var(--spring)}
.feature:hover .ico{transform:rotate(-8deg) scale(1.1)}

/* Étapes : la ligne se trace avec le défilement */
.lx-timeline{position:relative;margin-top:44px}
.lx-line{position:absolute;left:0;right:0;top:-18px;height:3px;border-radius:3px;background:#ffffff12;overflow:hidden}
.lx-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--amber),var(--amber2));transform-origin:left;transform:scaleX(calc((var(--p,0) - .15) * 2.4))}
.lx-timeline .steps{margin-top:0}
.steps li{background:linear-gradient(160deg,#ffffff0a,#ffffff03);border:1px solid #ffffff10}
.steps li::before{background:var(--amber);color:#1a1022}

.player{border:1px solid #ffffff14;background:linear-gradient(150deg,#feb94714,#ffffff05)}
.player:hover{border-color:#feb94766;transform:translateY(-3px)}
.duo-card{background:linear-gradient(150deg,#feb9471a,#ffffff05 70%)}
.lx-final{background:radial-gradient(120% 120% at 50% 0%,#feb94738,transparent 60%),var(--slate)}
.safe-item::before{background:var(--amber);box-shadow:0 0 0 5px #feb9471f}
.lx-chip img{background:#feb94733}
html.calm [data-r]{opacity:1;transform:none}
html.calm .lx-hero-in,html.calm .lx-mock{transform:none!important;opacity:1!important}

/* =====================================================================
   Assistant de création (première connexion)
   ===================================================================== */
html.onb-open{overflow:hidden}
.onb{position:fixed;inset:0;z-index:150;display:grid;grid-template-rows:auto auto 1fr auto;--oc1:#feb947;--oc2:#c8862a;color:var(--chalk);
  background:var(--night);animation:pageIn .4s}
.onb-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(70vmax 60vmax at 85% 10%,color-mix(in srgb,var(--oc1) 38%,transparent),transparent 60%),
             radial-gradient(60vmax 50vmax at 0% 100%,color-mix(in srgb,var(--oc2) 26%,transparent),transparent 60%),var(--night);
  transition:background .6s}
.onb-art{position:absolute;right:-6%;bottom:-4%;height:96%;opacity:0;transform:translateX(60px) scale(.96);transition:opacity .6s,transform .9s var(--ease);
  -webkit-mask-image:linear-gradient(270deg,#000 40%,transparent 95%);mask-image:linear-gradient(270deg,#000 40%,transparent 95%);pointer-events:none}
.onb-art.on{opacity:.38;transform:none;animation:breathe 6s ease-in-out .9s infinite}
@keyframes breathe{50%{transform:translateY(-10px) scale(1.01)}}
.onb-top{display:flex;align-items:center;gap:16px;padding:16px clamp(16px,4vw,40px)}
.onb-logo .logo-word{font-size:18px}
.onb-steps{display:flex;gap:6px;list-style:none;margin:0 auto;padding:0}
.onb-steps li{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#ffffff0c;color:#ffffff55;transition:all .35s var(--spring)}
.onb-steps li.done{background:#feb94730;color:var(--amber)}
.onb-steps li.on{background:var(--amber);color:#1a1022;transform:scale(1.15);box-shadow:0 0 20px -2px #feb947aa}
.onb-count{color:var(--mist);font-weight:800;font-size:13px;min-width:34px;text-align:right}
.onb-bar{height:3px;background:#ffffff10}
.onb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));transform-origin:left;transition:transform .6s var(--ease)}
.onb-stage{position:relative;overflow:auto;display:flex;justify-content:center;padding:clamp(20px,4vh,48px) clamp(16px,4vw,40px)}
.onb-screen{width:min(860px,100%);margin:auto 0}
.onb-screen.from-right{animation:onbR .5s var(--ease)}
.onb-screen.from-left{animation:onbL .5s var(--ease)}
@keyframes onbR{from{opacity:0;transform:translateX(50px)}}
@keyframes onbL{from{opacity:0;transform:translateX(-50px)}}
.onb-screen.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.onb-kicker{display:inline-block;color:var(--amber);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.onb-h{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.04em;line-height:1.05;margin:10px 0 0}
.onb-sub{color:#ddd5e6;font-size:17px;line-height:1.55;max-width:36em;margin:12px 0 24px}
.onb-hello{text-align:center;display:flex;flex-direction:column;align-items:center}
.onb-hello .onb-sub{margin-inline:auto}
.onb-av{width:110px;height:110px;border-radius:32px;object-fit:cover;margin-bottom:20px;box-shadow:0 0 0 4px #feb94755,0 20px 50px -20px #000;animation:breathe 4s ease-in-out infinite}
.onb-av-logo{display:grid;place-items:center;background:#1c1622;color:var(--amber)}
.onb-brief{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.onb-brief li{padding:16px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff12;display:grid;gap:4px}
.onb-brief b{color:var(--amber)}
.onb-brief span{color:#d8d0e0;font-size:14px;line-height:1.45}
.onb-check{display:flex;gap:14px;align-items:center;padding:16px 18px;margin-top:10px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff14;cursor:pointer;line-height:1.45;transition:border-color .2s,background .2s}
.onb-check:has(input:checked){border-color:var(--amber);background:#feb9471a}
.onb-check input{appearance:none;flex:0 0 26px;width:26px;height:26px;margin:0;border-radius:8px;border:2px solid #ffffff40;background:transparent;cursor:pointer;transition:all .25s var(--spring)}
.onb-check input:checked{background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231a1022' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--amber);transform:scale(1.08)}
.onb-check a{color:var(--amber)}
.onb-slug{display:flex;align-items:center;gap:4px;padding:8px 8px 8px 20px;border-radius:20px;background:#0006;border:2px solid #ffffff1c;font-size:clamp(18px,2.4vw,26px);font-weight:700}
.onb-slug:focus-within{border-color:var(--amber)}
.onb-slug span{color:var(--mist);white-space:nowrap}
.onb-slug input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--chalk);padding:10px 4px}
.onb-slug input:focus,.onb-riot input:focus{outline:none}
.onb-slug-state{margin-top:12px;font-weight:700;min-height:24px;color:var(--mist)}
.onb-slug-state.ok{color:var(--amber)} .onb-slug-state.err{color:var(--err)}
.onb-riot{display:flex;align-items:center;gap:10px;font-size:clamp(20px,3vw,32px);font-weight:800}
.onb-riot input{font:inherit;padding:14px 18px;border-radius:18px;border:2px solid #ffffff1c;background:#0006;color:var(--chalk);min-width:0}
.onb-riot input:first-child{flex:1}
.onb-riot input:last-child{width:6.5em}
.onb-riot input:focus{border-color:var(--amber)}
.onb-riot span{color:var(--amber)}
.onb-roles,.onb-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.onb-chip,.onb-tabs button,.onb-tag{padding:9px 16px;border-radius:999px;border:1px solid #ffffff1c;background:#ffffff0a;color:var(--chalk);font:700 14px Figtree,sans-serif;cursor:pointer;transition:all .25s var(--spring)}
.onb-chip.on,.onb-tabs button.on,.onb-tag.on{background:var(--amber);border-color:var(--amber);color:#1a1022;transform:scale(1.04)}
.onb-agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;max-height:46vh;overflow:auto;padding:4px}
.onb-agent{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;border-radius:16px;border:2px solid transparent;background:#ffffff08;color:var(--chalk);cursor:pointer;font:700 12.5px Figtree,sans-serif;transition:transform .25s var(--spring),border-color .2s,background .2s}
.onb-agent img{width:58px;height:58px;border-radius:14px;background:color-mix(in srgb,var(--ac) 40%,#0006)}
.onb-agent:hover{transform:translateY(-4px)}
.onb-agent.on{border-color:var(--amber);background:#feb9471f}
.onb-agent.pop{animation:pop .45s var(--spring)}
@keyframes pop{40%{transform:scale(1.15)}}
.onb-ranks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:44vh;overflow:auto;padding:4px}
.onb-rank{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:14px;border:2px solid transparent;background:#ffffff08;color:var(--chalk);cursor:pointer;font:700 12px Figtree,sans-serif;transition:transform .25s var(--spring),border-color .2s}
.onb-rank img{width:44px;height:44px}
.onb-rank i{display:grid;place-items:center;width:44px;height:44px;font-style:normal;color:var(--mist)}
.onb-rank:hover:not(:disabled){transform:translateY(-3px)}
.onb-rank.on{border-color:var(--amber);background:#feb9471f}
.onb-rank:disabled{opacity:.25;cursor:not-allowed}
.onb-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;max-height:48vh;overflow:auto;padding:4px}
.onb-map{height:96px;border-radius:16px;border:2px solid transparent;background-size:cover;background-position:center;cursor:pointer;display:flex;align-items:flex-end;padding:10px 12px;color:#fff;
  font:400 20px Anton,sans-serif;text-transform:uppercase;transition:transform .3s var(--spring),border-color .2s}
.onb-map:hover{transform:scale(1.03)}
.onb-map.on{border-color:var(--amber);box-shadow:0 0 0 3px #feb94755}
.onb-tags{display:flex;gap:10px;flex-wrap:wrap}
.onb-tag{font-size:16px;padding:12px 20px}
.onb-reveal{perspective:1200px}
.onb-preview{position:relative;height:min(460px,52vh);border-radius:26px;overflow:hidden;border:1px solid #feb94755;animation:reveal 1s var(--spring) both;box-shadow:0 40px 90px -30px #000,0 0 60px -20px var(--oc1)}
.onb-preview.vp-stage{min-height:0;padding:20px}
@keyframes reveal{from{opacity:0;transform:rotateX(30deg) translateY(60px) scale(.9)}}
.onb-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.onb-confetti i{position:absolute;top:-20px;left:var(--x);width:var(--s);height:calc(var(--s) * .45);border-radius:2px;background:var(--amber);animation:fall 2.2s cubic-bezier(.2,.6,.4,1) var(--d) forwards}
.onb-confetti i:nth-child(3n){background:var(--amber2)} .onb-confetti i:nth-child(3n+1){background:#fff}
@keyframes fall{to{transform:translateY(105vh) rotate(var(--r))}}
.onb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,4vw,40px) calc(16px + env(safe-area-inset-bottom));border-top:1px solid #ffffff10;background:#0b080f99}
.onb-foot .btn{min-width:140px;padding:14px 22px;font-size:16px}
.onb-foot .hint{flex:1;text-align:center;color:var(--err);margin:0;font-weight:700}
@media (max-width:640px){
  .onb-steps li{width:26px;height:26px;border-radius:8px} .onb-steps li svg{width:12px;height:12px}
  .onb-logo{display:none} .onb-brief{grid-template-columns:1fr}
  .onb-foot .btn{min-width:0;flex:0 0 auto}
  .onb-agents{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))} .onb-agent img{width:48px;height:48px}
}
.onb-consent{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;background:#08050ee6;animation:pageIn .3s}
.onb-consent-box{width:min(720px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:26px;border-radius:24px;background:#1c1622;border:1px solid #feb94740;animation:brickRise .5s var(--ease)}
.onb-consent-box h2{font-family:Unbounded,sans-serif;font-size:24px;margin:0 0 6px}
.onb-consent-box .btn{margin-top:18px}
.onb-toast{position:fixed;left:50%;top:76px;translate:-50% 0;z-index:120;display:grid;gap:2px;padding:14px 20px;border-radius:16px;background:var(--amber);color:#1a1022;box-shadow:0 20px 50px -20px #000;animation:brickRise .6s var(--spring);transition:opacity .5s,transform .5s}
.onb-toast.out{opacity:0;transform:translateY(-20px)}

/* =====================================================================
   Éditeur v2 : écran de personnalisation façon jeu
   ===================================================================== */
.editor-body .section[data-cat]{display:none;border-top:0;margin-top:0}
.editor-body .section[data-cat].cat-on:not(.hidden){display:block}
.editor-body .section.cat-on + .section.cat-on{border-top:1px solid var(--line);margin-top:18px}
.section.cat-in{animation:catIn .45s var(--ease)}
@keyframes catIn{from{opacity:0;transform:translateX(-14px)}}
.ed-head{display:flex;align-items:center;gap:10px;padding:16px 16px 6px}
.ed-head b{font-family:Fredoka,sans-serif;font-size:21px;flex:1}
.ed-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#feb94726;color:var(--amber)}
.ed-close{width:34px;height:34px;border-radius:10px;border:0;background:#ffffff0c;color:var(--chalk);cursor:pointer}
.ed-close:hover{background:#ffffff18}
.ed-dock{display:flex;gap:6px}
.ed-dock button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:14px;background:transparent;color:var(--mist);
  font:700 11px Figtree,sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--spring)}
.ed-dock button:hover{color:var(--chalk);background:#ffffff0c}
.ed-dock button.on{color:#1a1022;background:var(--amber);box-shadow:0 8px 24px -10px #feb947}
.ed-dock button:active{transform:scale(.94)}
.ed-dot{position:absolute;top:5px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--err);box-shadow:0 0 0 2px #1c1622}

@media (min-width:981px){
  .dash{display:block;position:relative}
  .preview{position:absolute;inset:0}
  .preview .vp-stage{padding-left:clamp(16px,calc(470px + 3vw),560px);transition:padding .5s var(--ease)}
  .dash.ed-closed .preview .vp-stage{padding-left:110px}
  .editor{position:absolute;z-index:6;left:16px;top:16px;bottom:16px;width:450px;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    border:1px solid #ffffff14;border-radius:26px;background:#17121df7;box-shadow:0 30px 70px -30px #000;
    overflow:hidden;transition:width .45s var(--ease)}
  .editor .ed-dock{grid-row:1/3;grid-column:1;flex-direction:column;padding:12px 8px;border-right:1px solid #ffffff10;overflow-y:auto;scrollbar-width:none}
  .editor .ed-dock button{width:56px;padding:9px 2px}
  .editor .ed-head{grid-column:2}
  .editor .editor-body{grid-column:2;padding:4px 18px 24px}
  .editor.closed{width:74px}
  .editor.closed .ed-head,.editor.closed .editor-body{display:none}
  .editor.closed .ed-dock{border-right:0}
  .editor-foot{position:absolute;z-index:6;right:16px;bottom:16px;width:min(340px,calc(100% - 520px));border:1px solid #ffffff14;border-radius:20px;
    background:#17121df7;box-shadow:0 30px 70px -30px #000}
  .preview-badge{left:50%;right:auto;translate:-50% 0}
}
@media (max-width:980px){
  .ed-head{display:none}
  .editor .ed-dock{position:sticky;top:61px;z-index:15;overflow-x:auto;scrollbar-width:none;padding:10px 12px;margin:0 -0px;background:#140f19f2;border-bottom:1px solid var(--line)}
  .editor .ed-dock::-webkit-scrollbar{display:none}
  .editor .ed-dock button{flex:0 0 auto;flex-direction:row;padding:9px 13px;font-size:13px;border-radius:999px;background:#ffffff0a}
  .editor .ed-dock button svg{width:17px;height:17px}
  .ed-dot{top:3px;right:3px}
}
.editor:not(.cat-id) #demoBanner,.editor .required-bar.done{display:none}
.editor:not(.cat-id) .required-bar{margin-bottom:6px}
.preview .vp-disclaimer{display:none}

/* =====================================================================
   Profils vivants : tout ce qui doit bouger bouge (transformations GPU)
   ===================================================================== */
@keyframes vp-drift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1.5%,1%)}}
@keyframes vp-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.012)}}
.vp-card{transition:border-color .3s;will-change:transform}
/* Reflet qui suit la souris sur la carte */
.vp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,40%),rgba(255,255,255,.07),transparent 60%)}
.vp-card > *{position:relative;z-index:1}
/* Avatar : anneau lumineux qui tourne lentement */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.vp-av-wrap{position:relative;flex:0 0 auto;display:grid;border-radius:19px;padding:3px;
  background:conic-gradient(from var(--ang),var(--glow,var(--c1)),transparent 35%,var(--glow,var(--c1)) 55%,transparent 85%,var(--glow,var(--c1)));animation:spinRing 6s linear infinite}
.vp-av-wrap .vp-avatar{border-color:transparent}
@keyframes spinRing{to{--ang:360deg}}
/* Rangs : les icônes flottent et brillent doucement, chacune à son rythme */
.vp-rank img,.vp-ranks img{animation:rankFloat 4.5s ease-in-out infinite}
.vp-ranks > :nth-child(2) img{animation-delay:-2.2s}
@keyframes rankFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-3deg)}}
/* Cases : la carte de la map zoome lentement, reflet au survol */
.vp-tile.is-map img{animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-1%)}}
.vp-tile::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  background-size:250% 100%;background-position:130% 0;transition:background-position .9s var(--ease)}
.vp-tile:hover::after{background-position:-30% 0}
.vp-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.vp-tile.is-skin img{transition:transform .5s var(--spring)}
.vp-tile.is-skin:hover img{transform:rotate(-6deg) scale(1.08)}
.vp-link{transition:transform .3s var(--spring),background .2s,border-color .2s}
.vp-link:hover{transform:translateY(-2px)}
.vp-chip{transition:transform .25s var(--spring)}
.vp-chip:hover{transform:translateY(-2px)}
html.calm .vp-bgart,html.calm .vp-portrait,html.calm .vp-av-wrap,html.calm .vp-ranks img,html.calm .vp-tile.is-map img{animation:none!important}

.vp-av-wrap .vp-avatar{background:#100c16}
.seg button{transition:background .2s,color .2s}
/* Interrupteurs façon jeu */
.switch input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 46px;width:46px;height:26px;margin:0;border-radius:999px;background:#ffffff1f;position:relative;cursor:pointer;transform:none;transition:background .25s}
.switch input[type=checkbox]::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0006;transition:transform .35s var(--spring)}
.switch input[type=checkbox]:checked{background:var(--amber)}
.switch input[type=checkbox]:checked::before{transform:translateX(20px)}
.switch input[type=checkbox]:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
input[type=range]{accent-color:var(--amber)}
.sub .nav-float{margin-bottom:8px}
@media (max-width:980px){ .dash > *{min-width:0} .editor{min-width:0;max-width:100vw} }
.color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.color-row input[type=color]{width:46px;height:38px;padding:3px;border-radius:12px;cursor:pointer;flex:0 0 auto}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches button{width:24px;height:24px;border-radius:50%;border:2px solid #ffffff22;background:var(--sw);cursor:pointer;transition:transform .2s var(--spring)}
.swatches button:hover{transform:scale(1.2)}
.chip-auto{padding:6px 12px;border-radius:999px;border:1px solid #ffffff22;background:#ffffff0a;color:var(--mist);font:700 12.5px Figtree,sans-serif;cursor:pointer}
.chip-auto.on{background:var(--amber);border-color:var(--amber);color:#1a1022}
.song-state{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13.5px;color:var(--mist)}
.song-state.err{color:var(--err);font-weight:600}
.song-state.ok span{display:grid;color:var(--amber);font-weight:700}
.song-state.ok b{color:var(--chalk)}
.song-state img{width:72px;height:40px;border-radius:8px;object-fit:cover}
.sp-dot{width:28px;height:28px;border-radius:50%;background:#feb947}
/* Lecteur YouTube / Spotify sur la page publique */
.vp-song{position:absolute;z-index:6;right:16px;bottom:56px;max-width:calc(100% - 32px)}
.vp-song-btn{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;border:1px solid #ffffff26;background:#000b;color:#fff;font:700 14px Figtree,sans-serif;cursor:pointer;transition:transform .25s var(--spring)}
.vp-song-btn:hover{transform:translateY(-2px)}
.vp-song-btn svg{color:var(--glow,var(--c1))}
.vp-song-btn small{color:#ffffff90;font-weight:600}
.vp-song.on{width:min(340px,calc(100vw - 32px));padding:8px;border-radius:18px;background:#0b0812e6;border:1px solid #ffffff1c;box-shadow:0 20px 50px -20px #000;animation:brickRise .5s var(--spring)}
.vp-song-head{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;font-size:13px;font-weight:700;color:#ffffffc0}
.vp-song-head span{flex:1}
.vp-song-x{width:28px;height:28px;border-radius:8px;border:0;background:#ffffff12;color:#fff;cursor:pointer}
.vp-song iframe{display:block;width:100%;min-width:200px;border:0;border-radius:12px}
@media (max-width:600px){ body.pub .vp-song{bottom:72px;right:12px} }

/* =====================================================================
   Administration v2
   ===================================================================== */
.adm-secure{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#feb9471f;border:1px solid #feb94755;color:var(--amber);font-weight:800;font-size:13px}
.adm-secure::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px #feb94733}
.adm-gate-box{max-width:520px;margin:20px auto;padding:30px;border-radius:26px;background:var(--slate);border:1px solid #feb94740;text-align:center;animation:brickRise .6s var(--ease)}
.adm-gate-box.wide{max-width:640px;text-align:left}
.adm-gate-box h2{font-family:Unbounded,sans-serif;font-size:24px;margin:12px 0 6px}
.adm-lock{display:grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:20px;background:#feb94722;color:var(--amber)}
.adm-gate-box.wide .adm-lock{margin:0}
.adm-code{display:flex;gap:10px;justify-content:center;margin-top:18px}
.adm-code input{width:200px;text-align:center;font:800 28px ui-monospace,Consolas,monospace;letter-spacing:.3em;padding:12px}
.adm-steps{padding-left:20px;display:grid;gap:12px;line-height:1.5}
.adm-qr{display:grid;place-items:center;width:190px;height:190px;margin:12px 0;border-radius:16px;background:#fff;padding:10px}
.adm-qr img{width:100%;height:100%}
.adm-qr span{color:#1a1022;font-weight:800}
.adm-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border-radius:16px;background:#ffffff08;border:1px solid #ffffff10;margin-bottom:16px}
.adm-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:12px;background:transparent;color:var(--mist);font:700 14.5px Figtree,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.adm-tabs button.on{background:var(--amber);color:#1a1022}
.adm-count:empty{display:none}
.adm-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--err);color:#fff;font-size:11.5px;font-weight:800;display:inline-grid;place-items:center}
.adm-sub{margin-bottom:12px}
.adm-sub input{max-width:420px}
.adm-todo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adm-todo-card{display:flex;align-items:baseline;gap:12px;padding:22px;border-radius:20px;border:1px solid #ffffff14;background:#ffffff08;color:var(--chalk);cursor:pointer;text-align:left;transition:transform .25s var(--spring),border-color .2s}
.adm-todo-card:hover{transform:translateY(-3px)}
.adm-todo-card b{font-family:Unbounded,sans-serif;font-size:40px}
.adm-todo-card span{color:var(--mist);font-weight:600}
.adm-todo-card.hot{border-color:var(--amber);background:#feb9471a;animation:hotPulse 2.4s ease-in-out infinite}
.adm-todo-card.hot b{color:var(--amber)}
@keyframes hotPulse{50%{box-shadow:0 0 0 6px #feb94722}}
.adm-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.adm-kpi{padding:16px;border-radius:16px;background:#ffffff08;border:1px solid #ffffff10}
.adm-kpi b{display:block;font-family:Unbounded,sans-serif;font-size:24px}
.adm-kpi span{color:var(--mist);font-size:13px}
.adm-chart{margin-top:12px}
.adm-bars{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;height:140px;align-items:end}
.adm-bars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.adm-bars i{display:block;width:100%;min-height:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(var(--amber2),var(--amber))}
.adm-bars span{font-size:11px;color:var(--mist)}
.adm-check{list-style:none;padding:0;margin:14px 0 6px;display:grid;gap:8px}
.adm-check li{position:relative;padding-left:26px;line-height:1.45}
.adm-check li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;border:2px solid var(--amber)}
.adm-note{margin-top:8px}
.adm-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.adm-players{display:grid;gap:8px}
.adm-player{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--slate);border:1px solid var(--line)}
.adm-player img{width:44px;height:44px;border-radius:12px;background:#0005}
.adm-pl-id{min-width:0;display:grid;gap:2px}
.adm-pl-id a{color:var(--chalk);text-decoration:none}
.adm-pl-id span{color:var(--mist);font-size:13px}
.adm-tags{display:flex;gap:6px}
.adm-tags i{font-style:normal}
.adm-pl-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.adm-pl-act .btn{padding:8px 12px;font-size:13px}
.adm-log{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.adm-log li{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:#ffffff06}
.adm-log time{color:var(--mist);font-size:13px;min-width:150px}
.adm-log em{color:#d8d0e0}
.adm-log small{margin-left:auto;color:var(--mist)}
@media (max-width:860px){ .adm-kpis{grid-template-columns:repeat(3,1fr)} .adm-todo{grid-template-columns:1fr} .adm-player{grid-template-columns:44px 1fr} .adm-pl-act{grid-column:1/-1;justify-content:flex-start} }
/* Accès rapide admin */
.nav-admin{display:inline-flex!important;align-items:center;gap:6px;color:var(--amber)!important}
.dtab-admin{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;color:var(--amber);font-weight:700;text-decoration:none}
.dtab-admin:hover{background:#feb9471a}

/* =====================================================================
   Accueil v6 : tout défile tout seul (comme guns.lol)
   ===================================================================== */
.lx-rot{display:inline-block;position:relative;vertical-align:top;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;animation:wordIn .9s var(--spring) both;animation-delay:calc(var(--i) * 70ms + 100ms)}
.lx-rot-in{display:inline-block;color:var(--amber);transition:transform .28s var(--ease),opacity .28s}
.lx-rot-in.out{transform:translateY(-70%);opacity:0}
.lx-rot-in.in{animation:rotIn .45s var(--spring)}
@keyframes rotIn{from{transform:translateY(70%);opacity:0}}
.lx-title .hl{color:var(--chalk);text-shadow:none}

.lx-words{margin:64px 0 0;overflow:hidden;display:grid;gap:4px;padding:10px 0}
.lx-words-row{white-space:nowrap;transition:transform .2s linear}
.lx-words-track{display:inline-flex;align-items:center;gap:28px;width:max-content;animation:marquee 46s linear infinite}
.lx-words-row.rev .lx-words-track{animation-direction:reverse;animation-duration:52s}
.lx-words-track span{font:800 clamp(44px,8vw,120px)/1 Unbounded,sans-serif;letter-spacing:-.05em;color:var(--chalk)}
.lx-words-track span.o{color:transparent;-webkit-text-stroke:2px #feb947a0}
.lx-words-track i{font-style:normal;color:var(--amber);font-size:clamp(24px,3vw,44px)}

.lx-cards{display:grid;gap:14px;margin-top:36px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lx-cards-track{display:flex;gap:14px;width:max-content;animation:marquee 70s linear infinite}
.lx-cards-row.rev .lx-cards-track{animation-direction:reverse;animation-duration:80s}
.lx-cards:hover .lx-cards-track{animation-play-state:paused}
.lx-pc{position:relative;isolation:isolate;overflow:hidden;flex:0 0 250px;height:150px;border-radius:20px;border:1px solid #ffffff14;text-decoration:none;color:var(--chalk);
  background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--pc) 70%,transparent),transparent 65%),#1a1420;transition:transform .35s var(--spring),border-color .25s}
.lx-pc:hover{transform:translateY(-6px) rotate(-1deg);border-color:#feb94788}
.lx-pc-art{position:absolute;z-index:-1;right:-14%;top:-8%;height:150%;opacity:.55;pointer-events:none;transition:transform .6s var(--ease);
  -webkit-mask-image:linear-gradient(270deg,#000 30%,transparent 90%);mask-image:linear-gradient(270deg,#000 30%,transparent 90%)}
.lx-pc:hover .lx-pc-art{transform:scale(1.08) translateX(-6px)}
.lx-pc-in{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:10px;align-items:center}
.lx-pc-in img{width:40px;height:40px;border-radius:12px;background:#0006}
.lx-pc-in b{display:block;font:400 22px/1 Anton,sans-serif;text-transform:uppercase}
.lx-pc-in span{font-size:12.5px;color:#ffffffb0}

.lx-partners{padding-top:90px}
.lx-partners-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:28px}
.lx-partner{position:relative;isolation:isolate;overflow:hidden;padding:20px;min-height:220px;border-radius:24px;border:1px solid #feb94755;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--pc) 60%,transparent),transparent 60%),#1a1420}
.lx-partner b{font:400 30px/1 Anton,sans-serif;text-transform:uppercase}
.lx-partner > span{color:#ffffffb0}
.lx-partner .row{margin-top:10px}
.lx-live{position:absolute;top:14px;left:14px;padding:5px 10px 5px 22px;border-radius:999px;background:var(--amber);color:#1a1022;font-weight:800;font-size:12px}
.lx-live::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#1a1022;animation:pulseA 1.6s infinite}
html.calm .lx-words-track,html.calm .lx-cards-track{animation-duration:200s}

/* ===== Admin v3 : alertes auto, mots surveillés, actions joueurs ===== */
.adm-todo{grid-template-columns:repeat(3,1fr)}
.adm-player{grid-template-columns:44px 1fr auto auto}
.adm-flag mark{background:var(--amber);color:#1a1206;border-radius:4px;padding:0 3px}
.adm-flag .adm-check{margin:6px 0 12px}
.adm-streamer{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:13px;user-select:none}
.adm-streamer input{accent-color:var(--amber);width:16px;height:16px}
.adm-streamer:has(input:checked){border-color:var(--amber);background:#feb94714;color:var(--amber2)}
.adm-more{position:relative}
.adm-more summary{list-style:none;cursor:pointer}
.adm-more summary::-webkit-details-marker{display:none}
.adm-more[open] > div{position:absolute;right:0;top:calc(100% + 6px);z-index:5;display:grid;gap:6px;padding:8px;border-radius:14px;background:var(--night);border:1px solid var(--line);box-shadow:0 18px 40px #0008;min-width:180px}
.adm-words-add form{gap:8px;flex-wrap:wrap}
.adm-words-add input,.adm-words-add select{flex:1 1 160px}
.adm-words-add #wFilter{width:100%}
.adm-words{margin-top:14px}
.adm-words h2 small{color:var(--muted);font-size:13px;margin-left:6px}
.adm-wlist{display:flex;flex-wrap:wrap;gap:6px}
.adm-w{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:999px;background:#0004;border:1px solid var(--line);font-size:13px}
.adm-w.in{border-style:dashed;border-color:#feb94766}
.adm-w button{border:0;background:none;color:var(--muted);cursor:pointer;width:20px;height:20px;border-radius:50%;font-size:15px;line-height:1}
.adm-w button:hover{background:#ff5d5d22;color:#ff8b8b}
.adm-w[hidden]{display:none}
@media (max-width:860px){ .adm-todo{grid-template-columns:1fr} .adm-player{grid-template-columns:44px 1fr} .adm-streamer{grid-column:1/-1;justify-self:start} }

/* ===== Panneau streamer ===== */
.st-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:18px;align-items:start}
.st-left{position:sticky;top:90px}
.st-prev-wrap{position:relative}
.st-prev{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line);container-type:inline-size}
.st-prev .ovl{--u:1cqw}
.st-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.8)}
.st-cam{position:absolute;width:22cqw;aspect-ratio:16/10;border-radius:1cqw;border:2px dashed #ffffff88;background:#0006;display:grid;place-items:center;font-weight:700;font-size:1.3cqw;color:#fffc}
.st-prev-wrap .preview-badge{top:10px;right:10px;left:auto}
.st-right{display:grid;gap:14px}
.st-right .card{margin:0}
.st-corners{display:grid;grid-template-columns:1fr 1fr;gap:8px;aspect-ratio:16/9;max-width:260px;padding:8px;border-radius:12px;border:1px solid var(--line);background:#0003}
.st-corners button{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--panel2);cursor:pointer}
.st-corners button i{position:absolute;width:38%;height:30%;border-radius:4px;background:#ffffff26;transition:background .2s}
.st-corners button:nth-child(1) i{top:8px;left:8px}.st-corners button:nth-child(2) i{top:8px;right:8px}
.st-corners button:nth-child(3) i{bottom:8px;left:8px}.st-corners button:nth-child(4) i{bottom:8px;right:8px}
.st-corners button[aria-checked="true"]{border-color:var(--amber);background:#feb94712}
.st-corners button[aria-checked="true"] i{background:var(--amber)}
.st-range{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:10px;margin-top:12px;font-size:14px}
.st-range input{accent-color:var(--amber)}
.st-actions{align-items:center;gap:12px}
.st-obs{margin-top:18px}
.st-obs .invite-row input{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:13px}
.st-steps{margin:14px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
.st-steps b{color:var(--text,#fff)}
@media (max-width:980px){ .st-grid{grid-template-columns:1fr} .st-left{position:static} }
/* Lecteur YouTube : volume + muet pour le visiteur */
.vp-song-mute{width:28px;height:28px;border-radius:8px;border:0;background:#ffffff12;color:#fff;cursor:pointer;display:grid;place-items:center}
.vp-song-mute .x{display:none}
.vp-song-mute.off .x{display:inline}.vp-song-mute.off .w{display:none}
.vp-song-vol{width:90px;accent-color:var(--glow,var(--amber))}
.vp-song-note{margin:8px 4px 2px;font-size:12px;color:#ffffff99;line-height:1.4}
.song-vol-note.warn{color:var(--amber2);background:#feb94712;border:1px solid #feb94733;padding:10px 12px;border-radius:10px}
.adm-rep + .adm-rep{margin-top:12px}
.adm-flag .row{display:flex;flex-wrap:wrap;gap:8px}
.adm-flag .row .btn{flex:0 0 auto;padding:9px 14px;font-size:13px}