:root{ --fond:#08080c; --fond2:#111119; --trait:#23232f; --texte:#f2f2f7; --gris:#8b8b9c; --C:#6b7a8f; --PC:#3d7dff; --R:#9b4dff; --SR:#ff3d8b; --UR:#ff8a1f; --L:#ffd24a; --nav: 50px; --barre: 56px; /* marge sous les onglets : l'encoche d'accueil iOS (34px) entière laissait une grosse bande vide en PWA installée. On n'en garde que ce qu'il faut pour ne pas coller à la barre d'accueil. */ --sab: max(8px, calc(env(safe-area-inset-bottom, 0px) - 20px)); } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} /* overflow:hidden sur seul serait *propage au viewport* et laisserait body deborder : il faut le poser aussi sur pour que la coque clippe vraiment. */ html{height:100%;overflow:hidden} /* Coque d'application : la PAGE ne defile jamais. Le header et les onglets sont toujours la, et seul le panneau de contenu de la vue courante defile, quand il ne peut vraiment pas tenir (une collection de 400 cartes, la liste des credits). Tout le reste est dimensionne en dvh. */ body{background:var(--fond);color:var(--texte);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; height:100dvh;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none} #barre{flex:none;z-index:40;display:flex;align-items:center;justify-content:space-between; padding:12px 18px;background:rgba(8,8,12,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--trait)} /* La marque est un SVG (lettres deja converties en chemins) : aucune police a charger et un rendu identique partout. Hauteur imposee, largeur libre. */ .marque{display:flex;align-items:center;line-height:0} .marque img{display:block;height:26px;width:auto} .solde{font-variant-numeric:tabular-nums;font-weight:700;background:var(--fond2);border:1px solid var(--trait); padding:6px 13px;border-radius:999px;font-size:14px} .jeton{color:var(--L)} main{flex:1;min-height:0;display:flex;width:100%;max-width:980px;margin:0 auto; padding:12px 16px calc(var(--nav) + var(--sab))} body.plein{overflow:hidden} .ecran{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center; justify-content:space-between;gap:10px;width:100%} /* le panneau qui accepte de defiler quand son contenu est intrinsequement long */ .pan{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding-bottom:12px} .pan::-webkit-scrollbar{width:0} /* Piege : une grille a hauteur DEFINIE (panneau flex) repartit l'espace entre ses lignes. Comme .carte est en overflow:hidden, sa taille minimale automatique vaut 0 : les lignes se faisaient ecraser a 55 px et les titres disparaissaient. max-content = chaque ligne prend la hauteur de son contenu, et c'est le panneau qui defile. */ .grille.pan,.credits.pan{align-content:start;grid-auto-rows:max-content} .ecran-bas{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:9px;flex:none} .ecran-bas .sous{margin:0;font-size:13px} .ecran-bas .stock{margin:0;width:100%} .ecran-bas .mini{margin-top:0;min-height:0} .vue{display:none} .vue.active{display:flex;flex-direction:column;flex:1;min-height:0;width:100%; animation:apparait .28s ease} @keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .hero{text-align:center;padding:4px 0 10px;flex:none} h1,.th{font-size:clamp(20px,3.2dvh,26px);font-weight:900;letter-spacing:-.6px;margin-bottom:6px} .sous{color:var(--gris);font-size:14px;max-width:460px;margin:0 auto 16px} .mini{color:var(--gris);font-size:12.5px;margin-top:10px;max-width:520px;margin-inline:auto} .cta{background:linear-gradient(92deg,var(--SR),var(--UR));color:#fff;border:0;font-weight:800;font-size:16px; padding:14px 34px;border-radius:14px;cursor:pointer;box-shadow:0 8px 26px rgba(255,61,139,.28)} .cta:active{transform:scale(.97)} .cta[disabled]{opacity:.4;box-shadow:none} /* paquet */ .paquet{width:118px;height:162px;margin:0 auto 18px;border-radius:14px;position:relative; background:linear-gradient(150deg,#1b1b28,#2b1330 55%,#3a1520);border:1px solid var(--trait); display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:transform .3s} .paquet-face{font-size:44px;font-weight:900;background:linear-gradient(92deg,var(--SR),var(--UR)); -webkit-background-clip:text;background-clip:text;color:transparent} .paquet.secoue{animation:secoue .5s} @keyframes secoue{0%,100%{transform:none}20%{transform:rotate(-6deg) scale(1.04)} 50%{transform:rotate(5deg) scale(1.06)}80%{transform:rotate(-3deg)}} /* grille de cartes */ .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:13px;margin-top:12px} .carte{background:var(--fond2);border-radius:14px;overflow:hidden;border:2px solid var(--c,var(--C)); cursor:pointer;position:relative;animation:pose .4s backwards} @keyframes pose{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}} .carte:active{transform:scale(.975)} .photo{aspect-ratio:1/1;width:100%;object-fit:cover;display:block;background:#15151f} .carte .bas{padding:9px 10px 11px;background: linear-gradient(180deg,color-mix(in srgb,var(--c) 26%,transparent),transparent)} .titre{font-weight:800;font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden} .artiste{color:var(--gris);font-size:11.5px;margin-top:2px} .badge{position:absolute;top:8px;left:8px;background:var(--c);color:#0a0a0f;font-weight:900;font-size:10.5px; padding:3px 7px;border-radius:6px;letter-spacing:.4px} .dbl{position:absolute;top:8px;right:8px;background:rgba(8,8,12,.8);border:1px solid var(--trait); font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px} .stats{display:flex;gap:8px;margin-top:7px;font-size:10.5px;color:var(--gris);font-variant-numeric:tabular-nums} .stats b{color:var(--texte);font-weight:700} .credit{font-size:9.5px;color:#5c5c6e;margin-top:6px;line-height:1.3;overflow:hidden; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} /* filtres */ .filtres{display:flex;flex-direction:column;gap:9px;flex:none} #recherche{width:100%;background:var(--fond2);border:1px solid var(--trait);color:var(--texte); padding:12px 14px;border-radius:12px;font-size:15px} .puces{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px} .puce{background:var(--fond2);border:1px solid var(--trait);color:var(--gris);padding:7px 13px; border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer} .puce.on{color:#0a0a0f;background:var(--texte);border-color:var(--texte)} /* blind test */ .chrono{font-size:clamp(26px,5dvh,40px);font-weight:900;font-variant-numeric:tabular-nums; margin:4px 0 10px;letter-spacing:-1px} .props{display:grid;gap:clamp(6px,1dvh,9px);margin-top:clamp(8px,1.6dvh,18px);max-width:440px; margin-inline:auto;width:100%} .prop{background:var(--fond2);border:1px solid var(--trait);color:var(--texte); padding:clamp(8px,1.4dvh,13px) 15px;border-radius:12px;text-align:left;font-size:14px;cursor:pointer} .prop b{display:block;font-size:12px;color:var(--gris);font-weight:600;margin-top:2px} .prop.bon{border-color:#2ecc71;background:rgba(46,204,113,.12)} .prop.faux{border-color:#e74c3c;background:rgba(231,76,60,.12)} #resultat-blind{margin-top:8px;font-weight:700} /* duel */ /* Le duel tient en entier : une fois l'adversaire tire, le titre s'efface et les deux cartes se partagent la hauteur restante avec les boutons de stats. */ .duel-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none} .duel-haut h2{font-size:15px;font-weight:900;letter-spacing:-.3px} .face{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0;align-items:stretch} .face .carte{display:flex;flex-direction:column;min-height:0;animation:none} .face .carte .photo{flex:1 1 0;min-height:52px;aspect-ratio:auto;width:100%;object-fit:cover} .face .carte .credit{display:none} .face .carte .bas{flex:none;padding:7px 9px 9px} .face .carte .titre{font-size:12px;-webkit-line-clamp:1} .face .carte .artiste{font-size:10.5px} .face .carte .stats{font-size:10px;margin-top:5px} .vs{text-align:center;font-weight:900;color:var(--gris);letter-spacing:2px;font-size:11.5px;flex:none} .choix-stat{display:grid;gap:clamp(6px,1dvh,8px);margin-top:2px;flex:none} .stat-btn{display:flex;justify-content:space-between;background:var(--fond2);border:1px solid var(--trait); color:var(--texte);padding:clamp(8px,1.3dvh,11px) 14px;border-radius:11px;font-size:14px; cursor:pointer;font-weight:600} .stat-btn:active{border-color:var(--SR)} /* credits */ .credits{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:6px;align-content:start} .cred{background:var(--fond2);border:1px solid var(--trait);border-radius:12px;padding:11px 14px; font-size:13px;min-width:0;overflow-wrap:anywhere} .cred b{display:block;margin-bottom:2px} .cred a{color:var(--PC);text-decoration:none} .cred span{color:var(--gris);font-size:12px} /* nav */ #onglets{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr); background:rgba(8,8,12,.94);backdrop-filter:blur(16px);border-top:1px solid var(--trait); padding-bottom:var(--sab)} #onglets button{background:0;border:0;color:var(--gris);font-size:10.5px;font-weight:600;padding:4px 0; display:grid;gap:2px;justify-items:center;align-content:center;cursor:pointer;height:var(--nav)} #onglets button span{font-size:18px;line-height:1} #onglets button.on{color:var(--texte)} /* modale */ .modale{position:fixed;inset:0;z-index:80;background:rgba(4,4,8,.86);backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:22px} .modale.on{display:flex} .modale-in{position:relative;background:var(--fond2);border:2px solid var(--c,var(--trait));border-radius:18px; max-width:380px;width:100%;max-height:86dvh;overflow:hidden;animation:pose .3s; display:flex;flex-direction:column} /* le corps défile, la croix reste posée par-dessus : toujours atteignable */ #modale-corps{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;touch-action:pan-y} .modale-in.glisse{transition:none} /* poignee + croix : deux facons de fermer, plus le fond et la touche Echap */ .fermer{position:absolute;top:10px;right:10px;z-index:5;width:40px;height:40px; border-radius:50%;border:1px solid #ffffff26;background:rgba(10,10,16,.72);backdrop-filter:blur(8px); color:var(--texte);font-size:17px;line-height:1;cursor:pointer} .fermer:active{transform:scale(.94)} .poignee{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:4;width:46px;height:4px; border-radius:99px;background:#ffffff4d} .aide-fermer{text-align:center;font-size:11.5px;color:var(--gris);padding:0 0 14px} .modale-in .photo{aspect-ratio:4/3} .detail{padding:16px 18px 20px} .detail h2{font-size:20px;font-weight:900;letter-spacing:-.4px} .detail .resume{color:var(--gris);font-size:13px;margin-top:8px} .grille-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .st{background:#0d0d15;border:1px solid var(--trait);border-radius:10px;padding:9px 11px} .st i{display:block;font-style:normal;font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.6px} .st b{font-size:17px;font-variant-numeric:tabular-nums} .liens{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap} .lien{flex:1;text-align:center;background:#0d0d15;border:1px solid var(--trait);color:var(--texte); text-decoration:none;padding:11px;border-radius:11px;font-size:13.5px;font-weight:700;cursor:pointer} .bloc-credit{margin-top:14px;padding-top:12px;border-top:1px solid var(--trait);font-size:11.5px;color:var(--gris);line-height:1.5} .bloc-credit a{color:var(--PC)} .lien.principal{background:linear-gradient(92deg,var(--SR),var(--UR));border:0;color:#fff} /* cote vivante : ecart d'aura depuis la frappe */ .carte .cote{position:absolute;top:8px;left:8px;font:700 11px/1 system-ui;padding:3px 6px; border-radius:6px;background:#0009;backdrop-filter:blur(4px)} .carte .cote.up{color:#4ade80} .carte .cote.down{color:#f87171} .grille-stats .st.aura{background:linear-gradient(135deg,#ffffff14,#ffffff06); border:1px solid var(--c);grid-column:span 2} .grille-stats .st.aura b{color:var(--c)} /* compte GolemTech */ .compte{margin-left:auto;margin-right:10px;background:#ffffff12;border:1px solid #ffffff1f; color:inherit;font:600 12px/1 system-ui;padding:8px 11px;border-radius:9px;cursor:pointer; max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .compte.on{border-color:var(--SR)} /* coupure du son : un seul geste, l'état est retenu dans localStorage (cle opus_son) */ .son{margin-right:10px;flex:none;width:34px;height:32px;display:grid;place-items:center; background:#ffffff12;border:1px solid #ffffff1f;border-radius:9px;font-size:15px; line-height:1;cursor:pointer;color:inherit} .son.off{opacity:.45} .unique{display:block;margin-top:6px;font-size:12px;opacity:.75} /* ================= BOOSTER ================= */ /* Le paquet scelle est le seul element qui bouge sur la page d'accueil : il respire, il capte la lumiere, il appelle le doigt. */ /* grid-template-rows:minmax(0,1fr) : sans ligne explicite, Chrome traite la hauteur de la zone comme indefinie et le max-height:100% du paquet ne se resout pas du tout. */ .booster-zone{position:relative;flex:1;min-height:0;width:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer;perspective:900px;padding:6px 0 0;overflow:visible} /* La respiration (translation + rotation) sort de la boite de l'image : on garde une marge basse pour que le paquet ne vienne jamais mordre le texte qui suit. */ /* Dimensionne par les DEUX bords : une hauteur en % ne se resout pas ici (l'image retombait sur sa taille intrinseque et debordait sur le selecteur de collection et la barre d'onglets des que l'ecran etait court). max-height:100% borne la zone, max-width borne la largeur, le rapport est garde par height:auto. */ .booster{height:auto;width:auto;max-height:calc(100% - 26px);max-width:min(64vw,260px);object-fit:contain;display:block;position:relative;z-index:2; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));animation:respire 4.4s ease-in-out infinite; transition:transform .25s} .booster-zone:active .booster{transform:scale(.96) rotate(-1deg)} /* Lumiere pulsante derriere le paquet. Trois couches desynchronisees : une lueur large, un noyau plus serre et plus chaud, et des rais qui tournent lentement. Le but est qu'elle DEBORDE du paquet — l'ancienne version faisait 62 % de large, donc elle etait integralement cachee derriere l'image et personne ne la voyait jamais. */ /* pointer-events:none : les lueurs debordent volontairement de la zone (les rais font jusqu'a 500px) et, sans ca, elles avalaient les clics sur les boutons France/International. */ .booster-lueur{position:absolute;width:min(130%,430px);height:min(88%,470px);z-index:1;border-radius:50%;pointer-events:none; background:radial-gradient(ellipse at center,rgba(255,61,139,.42),rgba(255,138,31,.16) 46%,transparent 72%); filter:blur(34px);animation:halo 5.2s ease-in-out infinite;will-change:opacity,transform} .booster-lueur.noyau{width:min(78%,250px);height:min(58%,330px); background:radial-gradient(ellipse at center,rgba(255,196,120,.5),rgba(255,92,150,.2) 52%,transparent 74%); filter:blur(22px);animation:halo-noyau 3.4s ease-in-out infinite} .booster-lueur.rais{width:min(150%,500px);height:min(150%,500px);filter:none;opacity:.17; background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,190,140,.85) 7%,transparent 8% 18%, rgba(255,110,170,.7) 19%,transparent 20% 34%,rgba(255,190,140,.75) 35%,transparent 36% 52%, rgba(255,110,170,.8) 53%,transparent 54% 68%,rgba(255,190,140,.7) 69%,transparent 70% 86%, rgba(255,110,170,.75) 87%,transparent 88%); -webkit-mask:radial-gradient(circle,transparent 26%,#000 44%,transparent 68%); mask:radial-gradient(circle,transparent 26%,#000 44%,transparent 68%); animation:rais-tourne 26s linear infinite} @keyframes respire{0%,100%{transform:translateY(2px) rotate(-.8deg)} 50%{transform:translateY(-6px) rotate(.8deg)}} @keyframes halo{0%,100%{opacity:.42;transform:scale(1)}50%{opacity:.82;transform:scale(1.11)}} @keyframes halo-noyau{0%,100%{opacity:.8;transform:scale(1.04)}50%{opacity:.4;transform:scale(.92)}} @keyframes rais-tourne{to{transform:rotate(360deg)}} .booster.dechire{animation:dechire .72s cubic-bezier(.32,1.02,.4,1) forwards} @keyframes dechire{0%{transform:none}22%{transform:rotate(-4deg) scale(1.04)} 46%{transform:rotate(3.5deg) scale(1.06)} 100%{transform:scale(1.22) translateY(-14px);opacity:0}} /* stock de boosters */ .stock{max-width:330px;margin:0 auto 16px;background:var(--fond2);border:1px solid var(--trait); border-radius:14px;padding:11px 14px} .stock-haut{display:flex;align-items:baseline;gap:7px;justify-content:center;font-size:13px;color:var(--gris)} .stock-haut b{font-size:22px;font-weight:900;color:var(--texte);font-variant-numeric:tabular-nums} .jauge{height:6px;border-radius:99px;background:#1d1d29;overflow:hidden;margin:9px 0 7px} .jauge i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(92deg,var(--SR),var(--UR));transition:width .9s linear} .stock-bas{font-size:12px;color:var(--gris);text-align:center;font-variant-numeric:tabular-nums} /* ============ OUVERTURE PLEIN ECRAN, CARTE PAR CARTE ============ */ /* Une carte occupe tout l'ecran. On glisse vers la droite (scroll-snap natif) ou on touche la carte pour passer a la suivante ; a la fin, les 5 d'un coup. */ .reveal{position:fixed;inset:0;z-index:70;display:none; background:radial-gradient(120% 80% at 50% 38%,#191126,#07070c 70%)} .reveal.on{display:block} .piste{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; overscroll-behavior:contain;scrollbar-width:none} .piste::-webkit-scrollbar{display:none} .dia{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always; display:grid;place-items:center;padding:calc(54px + env(safe-area-inset-top)) 16px 92px} /* la grande carte */ .gc{height:min(74dvh,560px);width:auto;aspect-ratio:2/3;max-width:86vw;perspective:1100px; cursor:pointer;background:0;border:0;padding:0;color:var(--texte);font:inherit} .gc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d; transition:transform .75s cubic-bezier(.2,.8,.3,1)} .gc.ouverte .gc-in{transform:rotateY(180deg)} .gc-face,.gc-dos{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;overflow:hidden} .gc-dos{background:linear-gradient(150deg,#16162a,#2a1030 55%,#3a1520);border:1px solid #2e2e40; display:grid;place-items:center;font-size:54px;font-weight:900;color:#43435c; box-shadow:inset 0 0 44px rgba(0,0,0,.65)} .gc-face{transform:rotateY(180deg);border:3px solid var(--c,var(--C));background:var(--fond2); display:flex;flex-direction:column;box-shadow:0 26px 60px rgba(0,0,0,.6)} .gc-face img{width:100%;height:70%;object-fit:cover;display:block;background:#15151f;flex:none} .gc-face .gt{font-size:17px;font-weight:900;line-height:1.2;padding:12px 13px 0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .gc-face .ga{font-size:13px;color:var(--gris);padding:4px 13px 0;overflow:hidden; white-space:nowrap;text-overflow:ellipsis} .gc-face .gs{display:flex;gap:10px;padding:8px 13px 12px;margin-top:auto;font-size:11.5px; color:var(--gris);font-variant-numeric:tabular-nums} .gc-face .gs b{color:var(--texte)} .gc-face .gr{position:absolute;top:10px;left:10px;background:var(--c);color:#0a0a0f;font-weight:900; font-size:11.5px;padding:4px 8px;border-radius:7px;letter-spacing:.4px;z-index:2} .gc.eclat .gc-face{box-shadow:0 0 0 3px var(--c),0 0 60px color-mix(in srgb,var(--c) 75%,transparent)} .gc.eclat{animation:pop .55s ease-out} @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}} /* haut : compteur + sortie */ .rev-haut{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center; justify-content:space-between;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 0} .rev-haut .compte-cartes{font:800 13px/1 system-ui;color:var(--gris);letter-spacing:1px; font-variant-numeric:tabular-nums} .passer{background:#ffffff12;border:1px solid #ffffff22;color:var(--texte);font:700 12.5px/1 system-ui; padding:9px 13px;border-radius:10px;cursor:pointer} /* bandeau de rarete */ .annonce{position:absolute;left:0;right:0;top:calc(52px + env(safe-area-inset-top));z-index:3; text-align:center;font-weight:900;letter-spacing:2px;font-size:17px;text-transform:uppercase; opacity:0;pointer-events:none} .annonce.on{opacity:1;animation:monte .45s ease-out} @keyframes monte{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}} /* la fleche qui dit ou aller */ .fleche{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:3; width:52px;height:52px;border-radius:50%;border:1px solid #ffffff26;background:#ffffff14; backdrop-filter:blur(8px);color:var(--texte);font-size:22px;cursor:pointer; display:grid;place-items:center;animation:pousse 1.6s ease-in-out infinite} .fleche[hidden]{display:none} @keyframes pousse{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(7px)}} .indice{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));z-index:3; text-align:center;font-size:12.5px;color:var(--gris)} .points{display:flex;gap:6px;justify-content:center;margin-bottom:9px} .points i{width:6px;height:6px;border-radius:50%;background:#ffffff26} .points i.on{background:var(--texte);transform:scale(1.15)} /* ecran final : les 5 cartes */ /* Bilan de fin d'ouverture : les 5 cartes doivent tenir dans l'ecran, sans defilement. Les vignettes se partagent la hauteur restante (grid-auto-rows:1fr + photo en flex:1). */ .bilan-final{height:100%;display:flex;flex-direction:column;overflow:hidden;text-align:center; padding:calc(50px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom))} .bilan-final h2{font-size:clamp(17px,2.6dvh,21px);font-weight:900;letter-spacing:-.4px;flex:none} .bilan-final .mini{margin:6px auto 0;flex:none;font-size:12px} .bilan-final .grille{flex:1;min-height:0;grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr;gap:8px;margin:10px auto 0;overflow:hidden;width:100%;max-width:760px} .bilan-final .carte{display:flex;flex-direction:column;min-height:0;animation:none} .bilan-final .carte .photo{flex:1 1 0;min-height:0;aspect-ratio:auto;width:100%;object-fit:cover} .bilan-final .carte .bas{flex:none;padding:6px 8px 7px} .bilan-final .carte .credit{display:none} .bilan-final .carte .titre{font-size:11.5px;-webkit-line-clamp:1} .bilan-final .carte .artiste{font-size:10px} .bilan-final .carte .stats{font-size:9.5px;gap:5px;margin-top:4px} .bilan-final .carte .badge,.bilan-final .carte .aura-badge{transform:scale(.82);transform-origin:top} .bilan-final .carte .aura-badge{transform-origin:top right} .bilan-final .carte .badge{transform-origin:top left} .barre-ouv{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap;flex:none} .barre-ouv .cta{padding:12px 22px;font-size:15px} .duel-haut .btn-sec{padding:7px 12px;font-size:12.5px;flex:none} .btn-sec{background:var(--fond2);border:1px solid var(--trait);color:var(--texte);font-weight:700; font-size:14px;padding:11px 20px;border-radius:12px;cursor:pointer} .btn-sec:active{transform:scale(.97)} #confettis{position:fixed;inset:0;z-index:75;pointer-events:none} /* gros bouton de secours quand le navigateur refuse la lecture automatique */ .debloque{display:block;margin:8px auto 0;background:linear-gradient(92deg,var(--SR),var(--UR)); border:0;color:#fff;font-weight:800;font-size:15px;padding:11px 22px;border-radius:13px;cursor:pointer; animation:pop .5s ease-out} @media(prefers-reduced-motion:reduce){ .booster,.booster-lueur,.fleche{animation:none} .booster-clic,.booster-clic .bc-main{animation:none} .gc-in{transition:none} } /* ============ AURA EN HAUT A DROITE + STATS CENTREES (21/09) ============ */ /* L'aura decide de la rarete : elle merite le coin le plus lu de la carte. */ .aura-badge,.gaura{position:absolute;top:8px;right:8px;z-index:2;display:grid;justify-items:center; gap:1px;padding:4px 8px 5px;border-radius:9px;background:rgba(8,8,12,.72); backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--c) 55%,transparent); line-height:1} .aura-badge i,.gaura i{font-style:normal;font-size:8px;letter-spacing:1px;color:var(--gris)} .aura-badge b,.gaura b{font-size:14px;font-weight:900;color:var(--c);font-variant-numeric:tabular-nums} .gaura{top:10px;right:10px;padding:6px 11px 7px} .gaura i{font-size:9.5px} .gaura b{font-size:20px} .carte .stats{justify-content:center;gap:12px} .gc-face .gs{justify-content:center;gap:11px} .gc-face .gt,.gc-face .ga{text-align:center} /* La cote vivante (ecart d'aura depuis le tirage) vit DANS la pastille d'aura : posee en haut a gauche elle recouvrait le badge de rarete. */ .aura-badge .cote,.gaura .cote{position:static;display:block;background:0;backdrop-filter:none; padding:0;margin-top:2px;font-size:9.5px;letter-spacing:.3px} .gaura .cote{font-size:11px;margin-top:3px} /* intertitres du tri par chanteur */ .intertitre{grid-column:1/-1;font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase; color:var(--gris);margin:10px 0 -4px;padding-bottom:6px;border-bottom:1px solid var(--trait)} .intertitre:first-child{margin-top:0} .ligne-tri{display:flex;align-items:center;gap:9px} .etiquette{font-size:12px;color:var(--gris);font-weight:700;white-space:nowrap} /* ============ HALO D'OUVERTURE (refonte 21/09 : fin, pas de flash plein ecran) ============ */ /* Principe : la lumiere reste LOCALE au paquet. Un noyau doux, deux anneaux fins qui s'ouvrent, quelques eclats qui fusent. Jamais de blanc pur, jamais tout l'ecran. */ .grand-halo{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden; contain:strict} .grand-halo span{position:absolute;left:var(--x);top:var(--y); transform:translate(-50%,-50%);border-radius:50%;will-change:transform,opacity} /* noyau : une bulle de lumiere teintee, deux fois plus petite que l'ecran, jamais saturee */ .grand-halo .noyau{width:78vmin;height:78vmin;opacity:0;mix-blend-mode:screen; background:radial-gradient(circle, color-mix(in srgb,var(--teinte) 92%,#fff) 0%, color-mix(in srgb,var(--teinte) 70%,transparent) 22%, rgba(255,138,31,.18) 42%, transparent 66%); filter:blur(6px); animation:noyau 1.15s cubic-bezier(.16,.9,.28,1) forwards} @keyframes noyau{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.12)} 22%{opacity:.62} 60%{opacity:.34;transform:translate(-50%,-50%) scale(.82)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}} /* anneaux : traits d'un pixel et demi, la vitesse fait tout le travail */ .grand-halo .anneau{width:30vmin;height:30vmin;opacity:0; border:1.5px solid color-mix(in srgb,var(--teinte) 60%,#fff); box-shadow:0 0 18px color-mix(in srgb,var(--teinte) 45%,transparent); animation:anneau 1.1s cubic-bezier(.12,.72,.2,1) forwards} .grand-halo .anneau.deux{animation-delay:.14s;animation-duration:1.25s; border-color:color-mix(in srgb,var(--teinte) 35%,transparent)} @keyframes anneau{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.08)} 12%{opacity:.55} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}} /* eclats : des filaments fins qui partent du paquet et s'eteignent en route */ .grand-halo .eclat{width:2px;height:12vmin;border-radius:2px; background:linear-gradient(to top,transparent, color-mix(in srgb,var(--teinte) 55%,#fff) 45%,transparent); opacity:0;transform-origin:50% 50%; animation:eclat 1.05s cubic-bezier(.2,.8,.25,1) forwards; animation-delay:var(--d)} @keyframes eclat{ 0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-3vmin) scaleY(.25)} 20%{opacity:.75} 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-44vmin) scaleY(1.5)}} @media(prefers-reduced-motion:reduce){ .grand-halo{display:none} } /* ============ BLIND TEST : LA SERIE (21/09) ============ */ .serie{max-width:330px;margin:0 auto 4px;background:var(--fond2);border:1px solid var(--trait); border-radius:16px;padding:clamp(8px,1.4dvh,12px) 16px} .serie-n{display:flex;align-items:baseline;gap:8px;justify-content:center} .serie-n b{font-size:38px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-1.5px; background:linear-gradient(92deg,var(--SR),var(--UR));-webkit-background-clip:text; background-clip:text;color:transparent} .serie-n span{font-size:13px;color:var(--gris);font-weight:700} .serie-bas{text-align:center;font-size:12.5px;color:var(--gris);margin-top:4px} .serie-bas b{color:var(--texte);font-variant-numeric:tabular-nums} .chrono{margin:10px 0 12px} #resultat-blind .mini{margin-top:6px} .prop[disabled]{opacity:.55} /* ============ COQUE : PANNEAUX DE CHAQUE VUE (21/09) ============ */ /* Blind test et Duel doivent tenir en entier : .pan n'est la qu'en filet de securite. */ /* .hero est en flex:none ; quand il porte aussi .pan, il redevient le panneau souple */ .hero.pan{flex:1;min-height:0} #vue-blind .hero{padding-top:2px} #vue-blind .hero .sous{margin-bottom:10px;font-size:13px} /* Pendant une partie, la consigne et le bouton desactive ne servent plus a rien : on rend leur place aux propositions pour que tout tienne dans l'ecran. */ #vue-blind.encours .sous, #vue-blind.encours #btn-blind, #vue-blind.encours #quiz-info{display:none} #vue-blind.encours h1,#vue-blind.encours .th{font-size:17px;margin-bottom:4px} #vue-blind.encours .chrono{margin:2px 0 6px} #vue-credits .pan .hero{flex:none} .mini.nopan{flex:none;margin-top:6px} /* ═══════════════════ LE CLASH ═══════════════════ Le panneau #clash est un .pan : c'est lui qui defile, jamais la page. Un seul chiffre existe dans ce jeu, l'AURA : il est toujours le plus gros element d'une carte, lisible a un metre. Tout le reste est decor. */ #clash{display:flex;flex-direction:column} .centre{text-align:center} .hero.petit{padding:2px 0 8px} .hero.petit h1,.hero.petit .th{font-size:19px} .hero.petit .sous{margin-bottom:6px} /* --- regles : trois lignes, pas une de plus --- */ .regles-duel{list-style:none;display:flex;flex-direction:column;gap:8px;max-width:460px; margin:0 auto;counter-reset:r} .regles-duel li{counter-increment:r;position:relative;background:var(--fond2); border:1px solid var(--trait);border-radius:12px;padding:11px 13px 11px 40px;font-size:13.5px; color:var(--gris);line-height:1.45} .regles-duel li b{color:var(--texte)} .regles-duel li::before{content:counter(r);position:absolute;left:11px;top:10px;width:20px;height:20px; border-radius:50%;background:linear-gradient(140deg,var(--SR),var(--UR));color:#fff; font-weight:800;font-size:12px;display:grid;place-items:center} #clash .cta{display:block;margin:16px auto 0} /* --- la carte de duel : photo, aura en gros, titre --- */ .dc{position:relative;width:var(--w,76px);aspect-ratio:3/4.05;flex:none;border-radius:11px; transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.1,.2,1), box-shadow .2s,outline-color .2s;cursor:pointer;outline:2px solid transparent;outline-offset:2px} /* jamais 'mini' ici : c'est deja la classe globale des petits textes (margin-inline:auto), elle etalait les cartes sur toute la largeur en desktop */ .dc.petite{--w:58px} .dc-face{position:absolute;inset:0;border-radius:11px;overflow:hidden;backface-visibility:hidden; -webkit-backface-visibility:hidden;border:1px solid var(--c);background:var(--fond2)} .dc-face.avant{display:block} .dc-face.avant img{width:100%;height:100%;object-fit:cover;opacity:.62} .dc-aura{position:absolute;top:0;left:0;right:0;text-align:center;font-size:clamp(20px,5.6vw,26px); font-weight:900;line-height:1.25;font-variant-numeric:tabular-nums;color:#fff; text-shadow:0 2px 10px #000,0 0 18px var(--c); background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)} .dc-nom{position:absolute;left:0;right:0;bottom:0;padding:14px 5px 4px;display:block; background:linear-gradient(0deg,rgba(0,0,0,.92),transparent)} .dc-nom i,.dc-nom em{display:block;font-style:normal;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;text-align:center} .dc-nom i{font-size:9.5px;font-weight:700} .dc-nom em{font-size:8.5px;color:var(--gris)} .dc-face.dos{transform:rotateY(180deg);background: repeating-linear-gradient(45deg,#15151f 0 7px,#0d0d14 7px 14px);display:grid;place-items:center; border-color:var(--trait)} .dc-face.dos i{font-style:normal;font-weight:900;font-size:11px;letter-spacing:2px;color:#3a3a4a} .dc.cachee{transform:rotateY(180deg)} .dc.sel{outline-color:var(--L);transform:translateY(-9px);box-shadow:0 10px 24px rgba(255,210,74,.3)} /* --- composition de la main --- */ .barre-choix{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex:none} .compte-choix{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums} .grille-duel{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px; justify-items:center;padding-bottom:8px} .grille-duel .dc{--w:100%} .barre-bas{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:8px 0 2px; background:linear-gradient(0deg,var(--fond) 72%,transparent);z-index:5} .barre-bas .cta{margin:0 0 0 auto;padding:13px 22px;font-size:15px} .somme{font-size:12.5px;color:var(--gris)} .somme b{display:block;font-size:21px;color:var(--texte);font-variant-numeric:tabular-nums} /* --- l'arene --- */ .arene{display:flex;flex-direction:column;gap:7px} .arene.entree{animation:apparait .4s ease} .arene.secousse{animation:secousse .42s} @keyframes secousse{ 10%{transform:translate(-4px,2px)} 25%{transform:translate(5px,-2px)} 40%{transform:translate(-4px,-1px)} 60%{transform:translate(3px,2px)} 80%{transform:translate(-2px,0)} 100%{transform:none}} .tableau{display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--fond2);border:1px solid var(--trait);border-radius:13px;padding:6px 13px} .camp-score{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--gris)} .past{display:flex;gap:5px} .past i{width:13px;height:13px;border-radius:50%;background:#1e1e2a;border:1px solid var(--trait); transition:.3s} .past.moi i.on{background:var(--L);border-color:var(--L);box-shadow:0 0 12px rgba(255,210,74,.6)} .past.adv i.on{background:var(--SR);border-color:var(--SR);box-shadow:0 0 12px rgba(255,61,139,.6)} .manche-n{font-size:12.5px;color:var(--gris);text-align:center} .manche-n b{font-size:18px;color:var(--texte);font-weight:900} .mises{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mise{border:1px solid var(--trait);border-radius:12px;padding:6px 10px;background:var(--fond2); overflow:hidden} .mise span{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris)} .mise b,.mise em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mise b{font-size:12.5px;margin-top:1px} .mise em{font-style:normal;font-size:10.5px;color:var(--gris)} .mise.gain{border-color:rgba(61,220,151,.45);box-shadow:inset 0 0 22px rgba(61,220,151,.09)} .mise.gain span{color:#3ddc97} .mise.perte{border-color:rgba(255,61,139,.45);box-shadow:inset 0 0 22px rgba(255,61,139,.09)} .mise.perte span{color:var(--SR)} .ligne-camp .etiq{font-size:11px;color:var(--gris);margin-bottom:5px} .ligne-camp .etiq b{color:var(--texte)} .lien-abandon{float:right;background:none;border:0;color:#5a5a6c;font-size:11px; text-decoration:underline;cursor:pointer;padding:0} .rang{display:flex;gap:7px;perspective:900px;overflow-x:auto;padding-bottom:3px} .rang::-webkit-scrollbar{height:0} .ligne-camp.moi .rang{gap:7px;padding-top:11px} .ligne-camp.moi .dc{--w:clamp(62px,17.5vw,84px)} /* --- le tapis : la ou les cartes se rencontrent --- */ .tapis{position:relative;min-height:132px;border:1px dashed var(--trait);border-radius:15px; padding:9px;display:flex;flex-direction:column;justify-content:space-between;gap:6px; background:radial-gradient(120% 90% at 50% 50%,rgba(255,61,139,.07),transparent 70%)} .tapis-vide{margin:auto;text-align:center;color:var(--gris);font-size:12.5px;line-height:1.6} .duel-rang{display:flex;gap:7px;justify-content:center;min-height:66px;perspective:900px; border-radius:11px;transition:.3s} .duel-rang .dc{--w:56px} .duel-rang.vainqueur{box-shadow:0 0 0 1px var(--L),0 0 30px rgba(255,210,74,.25)} .dc.pose.monte{animation:monte-main .42s cubic-bezier(.2,.9,.3,1.3) backwards} .dc.pose.monte:nth-child(2){animation-delay:.09s} .dc.pose.monte:nth-child(3){animation-delay:.18s} @keyframes monte-main{from{opacity:0;transform:translateY(90px) rotate(-8deg) scale(.8)}} /* Ses cartes tombent DEJA face cachee. L'animation n'est portee que par la variante .cachee : si les deux variantes en avaient une, retirer .cachee changerait le nom de l'animation et la relancerait — la carte retomberait en se retournant. */ .dc.pose.tombe.cachee{animation:tombe-dos .34s cubic-bezier(.2,.9,.3,1.25) backwards} .dc.pose.tombe.cachee:nth-child(2){animation-delay:.11s} .dc.pose.tombe.cachee:nth-child(3){animation-delay:.22s} @keyframes tombe-dos{from{opacity:0;transform:translateY(-80px) rotateY(180deg) scale(.85)} to{transform:rotateY(180deg)}} .choc{display:flex;align-items:center;justify-content:center;gap:14px} .tot{display:flex;flex-direction:column;align-items:center;min-width:74px} .tot i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--gris)} .tot b{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums; transition:color .2s,text-shadow .2s} .vs{font-size:12px;font-weight:900;color:var(--gris);letter-spacing:1px} .choc.impact .vs{animation:vs-eclat .5s} @keyframes vs-eclat{0%{transform:scale(1)}40%{transform:scale(2.1);color:#fff}100%{transform:scale(1)}} .choc.pour .t-moi b{color:var(--L);text-shadow:0 0 22px rgba(255,210,74,.6)} .choc.pour .t-lui b{opacity:.45} .choc.contre .t-lui b{color:var(--SR);text-shadow:0 0 22px rgba(255,61,139,.6)} .choc.contre .t-moi b{opacity:.45} .bandeau{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center; font-weight:900;font-size:clamp(17px,5vw,23px);letter-spacing:1px;padding:9px 0; background:rgba(8,8,12,.86);backdrop-filter:blur(3px);animation:claque .45s cubic-bezier(.2,1.4,.4,1); border-block:1px solid var(--trait)} .bandeau.joueur{color:var(--L);border-color:rgba(255,210,74,.5)} .bandeau.adverse{color:var(--SR);border-color:rgba(255,61,139,.5)} .bandeau.nul{color:var(--gris)} @keyframes claque{0%{opacity:0;transform:translateY(-50%) scale(1.5)} 60%{opacity:1;transform:translateY(-50%) scale(.94)}100%{transform:translateY(-50%) scale(1)}} /* --- bilan --- */ .bilan-duel{text-align:center;padding:14px 0;animation:apparait .4s ease} .score-final{font-size:44px;font-weight:900;letter-spacing:-2px;font-variant-numeric:tabular-nums} .bilan-duel.gagne .score-final{color:var(--L);text-shadow:0 0 34px rgba(255,210,74,.45)} .bilan-duel.perdu .score-final{color:var(--SR)} .butin{display:flex;justify-content:center;margin:12px 0} .butin .dc{--w:126px;animation:trophee .7s cubic-bezier(.2,1.3,.4,1)} .butin.perdu .dc{filter:grayscale(.75);opacity:.65} @keyframes trophee{from{opacity:0;transform:scale(.5) rotate(-10deg)}} .gain-pieces{font-size:19px;font-weight:900;color:var(--L);margin-top:6px} @media (prefers-reduced-motion:reduce){ .dc,.arene,.bandeau,.butin .dc,.choc.impact .vs{animation:none!important;transition:none!important} } /* ═══ LES RIVAUX ═══ */ /* Deux (ou trois) titres l'un sous l'autre : une tuile = une cible de doigt pleine largeur, c'est ce qui rend le choix instantané sur téléphone. Les jauges ne contiennent RIEN avant la réponse (largeur 0) : le serveur n'envoie pas les ranks. */ #vue-rivaux .hero{padding-top:2px} #vue-rivaux .hero .sous{font-size:13px;margin-bottom:9px} #riv-modes{justify-content:center;max-width:340px;margin:0 auto 9px;padding:0 2px 2px} .rivx{display:grid;gap:clamp(7px,1.4dvh,12px);max-width:440px;margin:clamp(8px,1.6dvh,16px) auto 0} .rv{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;width:100%; background:var(--fond2);border:1px solid var(--trait);border-radius:14px;padding:10px; color:var(--texte);text-align:left;cursor:pointer;animation:pose .3s both; transition:border-color .2s,box-shadow .2s,opacity .2s} .rv:active{transform:scale(.985)} .rv img{width:62px;height:62px;object-fit:cover;border-radius:10px;display:block;background:#15151f} .rv-txt{min-width:0} .rv-titre{display:block;font-weight:800;font-size:15px;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rv-art{display:block;font-size:12.5px;color:var(--gris);font-weight:700;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rv-jauge{display:none;height:6px;background:#ffffff14;border-radius:99px;margin-top:8px;overflow:hidden} .rv-jauge i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(90deg,var(--SR),var(--UR));transition:width .9s cubic-bezier(.2,.8,.2,1)} .rv-ind{font-size:11.5px;color:var(--gris);font-weight:600;margin-top:4px; font-variant-numeric:tabular-nums} .rv-ind{display:none} /* Avant la reponse, rien : une jauge vide serait deja un indice a lire. */ .rv.revele .rv-ind,.rv.revele .rv-jauge{display:block} .rv.bon{border-color:#2ecc71;box-shadow:0 0 0 1px #2ecc7159,0 10px 28px -14px #2ecc71} .rv.bon .rv-jauge i{background:linear-gradient(90deg,#2ecc71,#7bed9f)} .rv.faux{border-color:#e74c3c;opacity:.8} .rv.faux .rv-jauge i{background:linear-gradient(90deg,#e74c3c,#ff7675)} .rv[disabled]{cursor:default} .rv-ou{text-align:center;font-size:10.5px;font-weight:800;color:var(--gris);letter-spacing:2.5px} .riv-res{text-align:center;margin-top:11px;font-weight:800;font-size:15px} .riv-res .mini{font-weight:600} .riv-abandon{display:inline-block;margin-top:9px;font-size:12px;color:var(--gris); text-decoration:underline;background:0;border:0;cursor:pointer} /* Sélecteur de collection : France ou International, partout où il y a des cartes. */ .puces.scenes{justify-content:center;max-width:340px;margin:0 auto;padding-bottom:2px;flex:none} .ecran-bas .puces.scenes{margin-bottom:2px} #riv-scenes{margin-bottom:7px} /* ═══ DUEL CONTRE UN JOUEUR ═══ */ .ou{display:flex;align-items:center;gap:10px;max-width:260px;margin:14px auto 10px;color:var(--gris);font-size:12px} .ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--trait)} .btn-sec.centre-bloc{display:block;margin:0 auto;padding:10px 18px} .lien-retour{align-self:flex-start;background:none;border:0;color:var(--gris);font-size:12.5px; padding:2px 0 6px;cursor:pointer} /* recherche : un radar qui balaie, c'est l'attente la plus lisible qui soit */ .recherche{text-align:center;padding:26px 0 10px;animation:apparait .4s ease} .recherche h1,.recherche .th{font-size:21px;margin:18px 0 6px} .radar{position:relative;width:120px;height:120px;margin:0 auto;display:grid;place-items:center} .radar b{font-size:34px;position:relative;z-index:2} .radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--SR);opacity:0; animation:onde 2.4s ease-out infinite} .radar i:nth-child(2){animation-delay:.8s} .radar i:nth-child(3){animation-delay:1.6s} .radar.eteint b{opacity:.35;filter:grayscale(1)} @keyframes onde{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.25);opacity:0}} .attente-n{font-size:13px;color:var(--gris);margin:4px 0 14px} .attente-n b{font-size:30px;color:var(--texte);font-variant-numeric:tabular-nums} /* arène */ .tot-jcj{font-size:24px;font-weight:900;color:var(--texte);font-variant-numeric:tabular-nums;line-height:1} .tot-jcj.moi{color:var(--L)} .plateau{background:var(--fond2);border:1px solid var(--trait);border-radius:14px;padding:9px 8px; display:flex;flex-direction:column;gap:8px} .rangee{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .rangee .dc{--w:100%} .slot{aspect-ratio:3/4.05;border:1.5px dashed var(--trait);border-radius:11px;display:grid; place-items:center;color:#3a3a4a;font-weight:800;font-size:13px} .slot.courant{border-color:var(--L);color:var(--L);animation:pulse-slot 1.1s ease-in-out infinite} @keyframes pulse-slot{50%{box-shadow:0 0 16px rgba(255,210,74,.35)}} .statut{text-align:center;font-size:13px;color:var(--gris);padding:2px 0} .statut b{color:var(--texte)} .statut.a-moi b{color:var(--L)} .chrono-jcj{font-variant-numeric:tabular-nums} .chrono-jcj.urgent{color:var(--SR);font-weight:800} .jcj-mise{text-align:left} .arene.jcj > .etiq{font-size:11px;color:var(--gris)} .arene.jcj .grille-duel{padding-bottom:4px} #onglets button.alerte{color:var(--L);animation:alerte-onglet 1s ease-in-out infinite} @keyframes alerte-onglet{50%{background:rgba(255,210,74,.14)}} @media (prefers-reduced-motion:reduce){ .radar i,.slot.courant,#onglets button.alerte{animation:none} } .bilan-duel .btn-sec.centre-bloc,.recherche .btn-sec.centre-bloc{margin-top:12px} .recherche .ou{margin-top:14px} /* Le plateau ne doit jamais manger l'écran : c'est dans la collection qu'on choisit. */ .rangee{max-width:330px;width:100%;margin:0 auto} @media (max-height:760px){ .rangee{max-width:250px;gap:5px} .plateau{padding:6px;gap:5px} .jcj-mise{padding:4px 10px} .jcj-mise em{display:none} .arene.jcj .tableau{padding:3px 12px} .arene.jcj .tot-jcj{font-size:20px} } /* ═══ FEATURINGS ═══ Une pastille par invite, teinte fixe par artiste. Pleine et chiffree quand l'invite a ses cartes dans le jeu (+20 d'aura), en simple contour sinon. */ .feats{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 2px;min-width:0} .feats.centre{justify-content:center;padding:6px 13px 0} .feats.grand{gap:5px;margin:8px 0 4px} .feat{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0; padding:1px 7px;border-radius:99px;font-size:10px;font-weight:700;line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:hsl(var(--h) 20% 72%);border:1px solid hsl(var(--h) 15% 40% / .55)} .feat.bonus{color:hsl(var(--h) 95% 82%);background:hsl(var(--h) 75% 45% / .22); border-color:hsl(var(--h) 85% 62% / .7);box-shadow:0 0 10px hsl(var(--h) 90% 55% / .18)} .feat b{flex:none;font-weight:900;color:#fff;background:hsl(var(--h) 80% 50% / .55); border-radius:99px;padding:0 5px;font-size:9px;margin-right:-4px} .feat.reste{color:var(--gris);border-color:var(--trait)} .feats.grand .feat{font-size:12px;padding:2px 10px} .feats.grand .feat b{font-size:11px} .gc-face .feats .feat{font-size:11px} /* carte de duel : une seule pastille, sur une ligne, au-dessus du titre */ .dc-nom .dc-feats{margin:0 0 2px;justify-content:center;flex-wrap:nowrap} .dc-nom .dc-feats .feat{font-size:8px;padding:0 5px} .dc-nom .dc-feats .feat b{font-size:7.5px;padding:0 3px} .dc.petite .dc-feats .feat{font-size:0;gap:0;padding:0 1px} .dc.petite .dc-feats .feat:not(.bonus){display:none} .dc.petite .dc-feats .feat b{font-size:7.5px;margin:0} .feat>span{overflow:hidden;text-overflow:ellipsis;min-width:0} /* ═══ RIVAUX : écoute pendant la manche ═══ Le bouton ▶ est un frère de la tuile (un bouton dans un bouton est interdit) : il se pose sur sa droite, la tuile lui laisse la place. */ .rv-bloc{position:relative;animation:pose .3s both} .rv-bloc .rv{animation:none;padding-right:62px} .rv-play{position:absolute;right:12px;top:50%;transform:translateY(-50%); width:42px;height:42px;border-radius:50%;border:1px solid var(--trait); background:#ffffff10;color:var(--texte);font-size:15px;line-height:1;cursor:pointer; display:grid;place-items:center;transition:background .2s,border-color .2s} .rv-play:active{transform:translateY(-50%) scale(.92)} .rv-play.on{background:linear-gradient(135deg,var(--SR),var(--UR));border-color:transparent; box-shadow:0 0 18px -4px var(--SR)} .rv-play[disabled]{opacity:.35;cursor:default} /* Fin de tirage : 3 + 2 cartes, la rangée du bas centrée. Grille de 6 demi-colonnes, chaque carte en prend 2 ; la 4e d'un tirage de 5 démarre à la 2e demi-colonne. */ .bilan-final .grille{grid-template-columns:repeat(6,1fr)} .bilan-final .grille .carte{grid-column:span 2} .bilan-final .grille .carte:nth-child(4):nth-last-child(2){grid-column:2 / span 2} .bilan-final .grille .carte:nth-child(3n+1):last-child{grid-column:3 / span 2} /* ============ OUVERTURE v2 (26/09) : scene du paquet, suspense, cadres, plastique ============ */ /* Attention aux noms d'animations : un @keyframes du meme nom plus bas dans le fichier ECRASE le premier. « eclat » et « monte » du duel cassaient le halo et le bandeau. */ /* --- le paquet seul au milieu de l'ecran, avant de s'allumer --- */ .scene-paquet{position:absolute;inset:0;display:grid;place-items:center;--teinte:#ff3d8b; --charge:950ms;overflow:hidden} /* une seule case de la taille de l'ecran : sans ca, les rais (1100 px) elargissaient la colonne et le paquet partait a droite */ .scene-paquet{grid-template:100%/100%} .scene-paquet>*{grid-area:1/1;justify-self:center;align-self:center} .sp-paquet{position:relative;z-index:2;height:min(58dvh,440px);width:auto;max-width:72vw; object-fit:contain;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7)); animation:sp-arrive .45s cubic-bezier(.2,.9,.3,1.2) both,sp-flotte 2.6s ease-in-out .45s infinite} @keyframes sp-arrive{from{opacity:0;transform:scale(.82) translateY(24px)}} @keyframes sp-flotte{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}} /* En attente du clic : le paquet flotte sans fin, un « Clique ici » posé dessus. Le badge suit la même respiration que le paquet pour avoir l'air collé à lui, et s'efface dès que le paquet commence à se charger. */ .scene-paquet.attente{cursor:pointer} .sp-clic{position:relative;z-index:3;align-self:center; transform:translateY(min(19dvh,144px)); display:inline-flex;align-items:center;gap:8px;padding:11px 20px 11px 15px;border-radius:999px; border:1.5px solid rgba(255,255,255,.55);background:rgba(12,10,22,.62);color:#fff; font:800 15px/1 system-ui;letter-spacing:.4px;cursor:pointer; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:0 0 0 0 rgba(255,61,139,.55),0 10px 26px rgba(0,0,0,.45); animation:sp-arrive .45s .25s cubic-bezier(.2,.9,.3,1.2) both,sp-clic-flotte 2.6s ease-in-out .7s infinite, sp-clic-pouls 1.6s ease-out .7s infinite; transition:opacity .18s} .sp-main{font-size:19px;display:inline-block;animation:sp-main-tape 1.1s ease-in-out infinite} @keyframes sp-clic-flotte{0%,100%{transform:translateY(min(19dvh,144px))} 50%{transform:translateY(calc(min(19dvh,144px) - 8px))}} @keyframes sp-clic-pouls{0%{box-shadow:0 0 0 0 rgba(255,61,139,.55),0 10px 26px rgba(0,0,0,.45)} 100%{box-shadow:0 0 0 16px rgba(255,61,139,0),0 10px 26px rgba(0,0,0,.45)}} @keyframes sp-main-tape{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}60%{transform:translateY(1px) scale(.92)}} .scene-paquet:not(.attente) .sp-clic{opacity:0;pointer-events:none;animation:none} .sp-lueur{z-index:1;width:min(92vw,560px);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--teinte) 60%,transparent),transparent 64%); filter:blur(30px);opacity:.22;transform:scale(.85); transition:opacity var(--charge) ease-in,transform var(--charge) ease-in} .sp-rais{z-index:0;width:min(170vw,1100px);aspect-ratio:1;pointer-events:none;opacity:0; background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--teinte) 75%,#fff) 0 3deg,transparent 3deg 15deg); -webkit-mask:radial-gradient(circle,#000 6%,transparent 55%);mask:radial-gradient(circle,#000 6%,transparent 55%); transition:opacity var(--charge) ease-in;animation:rais-tourne 14s linear infinite} .scene-paquet.illumine .sp-lueur{opacity:1;transform:scale(1.3)} .scene-paquet.illumine .sp-rais{opacity:.5;animation-duration:3.5s} .scene-paquet.illumine .sp-paquet{animation:sp-charge var(--charge) cubic-bezier(.5,0,.9,.6) forwards} @keyframes sp-charge{ 0%{transform:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7)) brightness(1)} 55%{transform:scale(1.03) rotate(-1deg)} 64%{transform:scale(1.04) rotate(1.5deg)} 72%{transform:scale(1.05) rotate(-2deg)} 80%{transform:scale(1.06) rotate(2.5deg)} 88%{transform:scale(1.07) rotate(-2.5deg)} 100%{transform:scale(1.09) rotate(0); filter:drop-shadow(0 0 22px var(--teinte)) drop-shadow(0 0 60px var(--teinte)) brightness(1.6) saturate(1.25)}} .scene-paquet .sp-paquet.dechire{animation:sp-blanchit .62s cubic-bezier(.4,0,.7,.4) forwards} /* le paquet chauffe jusqu'au blanc pur puis se dissout dans sa propre lumiere */ @keyframes sp-blanchit{ 0%{transform:scale(1.09);filter:drop-shadow(0 0 22px var(--teinte)) drop-shadow(0 0 60px var(--teinte)) brightness(1.6)} 18%{transform:scale(1.07) rotate(-2deg)} 34%{transform:scale(1.11) rotate(2deg)} 60%{transform:scale(1.18);filter:drop-shadow(0 0 40px #fff) drop-shadow(0 0 110px var(--teinte)) brightness(3.2) saturate(.6) blur(1px)} 100%{transform:scale(1.38);opacity:0;filter:drop-shadow(0 0 60px #fff) drop-shadow(0 0 160px #fff) brightness(7) saturate(0) blur(6px)}} /* --- la lumiere aveuglante (26/09) : nait du paquet, envahit l'ecran, se dissipe sur les cartes --- */ .aveugle{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0; background:radial-gradient(circle at var(--x) var(--y),#fff 0,#fff 18%, color-mix(in srgb,var(--teinte) 22%,#fff) 42%,color-mix(in srgb,var(--teinte) 55%,#fff) 100%); -webkit-mask:radial-gradient(circle at var(--x) var(--y),#000 0,#000 var(--r,0%),transparent calc(var(--r,0%) + 30%)); mask:radial-gradient(circle at var(--x) var(--y),#000 0,#000 var(--r,0%),transparent calc(var(--r,0%) + 30%))} @property --r{syntax:'';inherits:false;initial-value:0%} .aveugle.monte{animation:av-monte .6s cubic-bezier(.55,0,.85,.35) forwards} @keyframes av-monte{0%{opacity:0;--r:0%}35%{opacity:.85}100%{opacity:1;--r:140%}} .aveugle.dissipe{animation:av-dissipe 1.2s cubic-bezier(.2,.6,.3,1) forwards} @keyframes av-dissipe{0%{opacity:1;--r:140%}100%{opacity:0;--r:140%}} @media(prefers-reduced-motion:reduce){ .aveugle{display:none} } /* --- en-tete : bouton muet --- */ .rev-actions{display:flex;align-items:center;gap:8px} .muet{width:40px;height:34px;display:grid;place-items:center;border-radius:10px;cursor:pointer; background:#ffffff12;border:1px solid #ffffff22;font-size:16px;line-height:1;padding:0} .muet.off{opacity:.55;background:#ffffff08} /* --- suspense : le dos d'une carte rare tremble et prend sa couleur --- */ .gc{position:relative;z-index:1} .gc.suspense{animation:frisson .09s linear infinite} .gc.suspense .gc-dos{animation:lueur-dos var(--att,800ms) ease-in forwards} @keyframes frisson{0%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px -2px}100%{translate:1px 1px}} @keyframes lueur-dos{ from{box-shadow:inset 0 0 44px rgba(0,0,0,.65);color:#43435c} to{box-shadow:inset 0 0 34px color-mix(in srgb,var(--c) 55%,transparent),0 0 0 3px var(--c),0 0 80px var(--c); color:var(--c);border-color:var(--c)}} /* --- carte retournee : elle suit l'inclinaison --- */ .gc.ouverte .gc-in{transform:rotateY(calc(180deg + var(--ry,0deg))) rotateX(var(--rx,0deg))} .gc.libre .gc-in{transition:transform .18s ease-out} .gc.eclat-doux{animation:pop .5s ease-out} .gc.eclat-doux .gc-face{box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 50px rgba(155,77,255,.55)} /* --- rayons derriere une carte Super Rare et plus --- */ .dia{position:relative;overflow:hidden} .dia::before{content:'';position:absolute;left:50%;top:50%;width:min(170vw,1150px);aspect-ratio:1; pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.4); background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc,#fff) 80%,#fff) 0 3deg,transparent 3deg 16deg); -webkit-mask:radial-gradient(circle,#000 5%,transparent 52%);mask:radial-gradient(circle,#000 5%,transparent 52%)} .dia.rayonne::before{opacity:.42;animation:rayons-arrive .9s cubic-bezier(.2,.8,.3,1) both,rayons-tourne 22s linear .9s infinite} .dia.rayonne.r-UR::before{opacity:.55} .dia.rayonne.r-L::before{opacity:.7} @keyframes rayons-arrive{from{transform:translate(-50%,-50%) scale(.3) rotate(0)}to{transform:translate(-50%,-50%) scale(1) rotate(24deg)}} @keyframes rayons-tourne{from{transform:translate(-50%,-50%) rotate(24deg)}to{transform:translate(-50%,-50%) rotate(384deg)}} .dia::after{content:'';position:absolute;left:50%;top:50%;width:min(120vw,760px);aspect-ratio:1;border-radius:50%; pointer-events:none;opacity:0;transform:translate(-50%,-50%); background:radial-gradient(circle,color-mix(in srgb,var(--rc,#fff) 45%,transparent),transparent 62%)} .dia.rayonne::after{animation:pouls-dia 2.4s ease-in-out infinite} @keyframes pouls-dia{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}} .piste.secousse{animation:secousse-ecran .55s cubic-bezier(.36,.07,.19,.97)} @keyframes secousse-ecran{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-8px,3px)}40%,60%{transform:translate(8px,-3px)}} /* --- bandeau de rarete : plus gros a chaque palier, en or pour la Legendaire --- */ .annonce.a-SR{color:var(--SR);font-size:19px;text-shadow:0 0 18px rgba(255,61,139,.65)} .annonce.a-UR{color:var(--UR);font-size:23px;text-shadow:0 0 22px rgba(255,138,31,.75)} .annonce.a-L{font-size:28px;letter-spacing:3px;color:transparent; background:linear-gradient(90deg,#fff7d1,#ffd24a,#fff,#d9a21b,#fff7d1);background-size:200% 100%; -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(255,210,74,.75))} .annonce.a-L.on{animation:monte .45s ease-out,or-glisse 2.2s linear infinite} @keyframes or-glisse{to{background-position:-200% 0}} /* --- cadres par rarete : plus c'est rare, plus le cadre est epais, vivant et precieux --- */ @property --ang{syntax:'';inherits:false;initial-value:0deg} @keyframes cadre-tourne{to{--ang:360deg}} .gc-face.r-PC{border-color:var(--PC);box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 24px rgba(61,125,255,.28)} .gc-face.r-R{border:4px solid transparent; background:linear-gradient(var(--fond2),var(--fond2)) padding-box, linear-gradient(140deg,#ecd9ff,#9b4dff 28%,#4a1c9e 52%,#d2b0ff 76%,#7b35e8) border-box; box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 36px rgba(155,77,255,.38)} .gc-face.r-SR,.gc-face.r-UR,.gc-face.r-L{border:5px solid transparent;animation:cadre-tourne 4s linear infinite} .gc-face.r-SR{background:linear-gradient(var(--fond2),var(--fond2)) padding-box, conic-gradient(from var(--ang),#ff3d8b,#ffc6de,#ff8a1f,#ff3d8b,#fff2f7,#ff3d8b) border-box; box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 48px rgba(255,61,139,.5)} .gc-face.r-UR{border-width:6px;animation-duration:3s; background:linear-gradient(var(--fond2),var(--fond2)) padding-box, conic-gradient(from var(--ang),#ff8a1f,#ffe08a,#ff3d8b,#fff,#ff8a1f,#ffd24a,#ff5e3a,#ff8a1f) border-box; box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 64px rgba(255,138,31,.6)} .gc-face.r-L{border-width:8px;animation-duration:5s; background:linear-gradient(var(--fond2),var(--fond2)) padding-box, conic-gradient(from var(--ang),#fff7d1,#ffd24a,#a8740a,#ffe89a,#fff,#d9a21b,#8a5a00,#ffe27a,#fff7d1) border-box; box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 72px rgba(255,210,74,.65),0 0 150px rgba(255,210,74,.28)} .gc.eclat .gc-face.r-L{box-shadow:0 0 0 2px #fff3b0,0 0 80px rgba(255,210,74,.85),0 0 160px rgba(255,210,74,.4)} /* liseré interieur et ornements : le « cadre de collection » des deux plus hauts paliers */ .gc-face .cadre-int{display:none;position:absolute;inset:7px;border-radius:12px;pointer-events:none;z-index:3} .gc-face.r-UR .cadre-int{display:block;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.35)} .gc-face.r-L .cadre-int{display:block;inset:5px;border:2px solid #ffe27a; box-shadow:0 0 0 1px #7a4d00,inset 0 0 22px rgba(255,210,74,.4)} .gc-face .coin{position:absolute;z-index:4;font-style:normal;line-height:1;color:#fff3b0;pointer-events:none; text-shadow:0 0 6px #ffd24a,0 0 14px #ffae00;font-size:15px} .gc-face .c-haut{top:-2px;left:50%;transform:translateX(-50%);font-size:19px} .gc-face .c3{bottom:1px;left:4px} .gc-face .c4{bottom:1px;right:4px} /* --- brillance plastique : un reflet balaie la carte quand elle se devoile, puis suit l'inclinaison ; une pellicule holographique sur les Super Rare et plus --- */ .gc-face .holo,.gc-face .reflet{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit} .gc-face .holo{display:none;mix-blend-mode:color-dodge;opacity:.26; background:repeating-linear-gradient(115deg,rgba(255,60,140,0) 0,rgba(255,60,140,.6) 4%, rgba(60,220,255,.6) 8%,rgba(255,240,90,.6) 12%,rgba(160,90,255,.6) 16%,rgba(255,60,140,0) 20%); background-size:240% 240%;animation:holo-glisse 6s ease-in-out infinite alternate} .gc-face.r-SR .holo,.gc-face.r-UR .holo,.gc-face.r-L .holo{display:block} .gc-face.r-UR .holo{opacity:.34} .gc-face.r-L .holo{opacity:.4} @keyframes holo-glisse{from{background-position:0% 0%}to{background-position:100% 100%}} .gc-face .reflet{opacity:0;mix-blend-mode:screen;background-repeat:no-repeat; background-image:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.24),transparent 44%), linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 47%,rgba(255,255,255,.2) 51%,transparent 58%); background-size:100% 100%,260% 100%;background-position:0 0,130% 0} .gc.ouverte .gc-face .reflet{opacity:1;animation:balaye 1.15s cubic-bezier(.3,.6,.3,1) .3s both} .gc.ouverte .gc-face.r-SR .reflet,.gc.ouverte .gc-face.r-UR .reflet,.gc.ouverte .gc-face.r-L .reflet{ animation:balaye 1.15s cubic-bezier(.3,.6,.3,1) .3s both,balaye-boucle 4.2s ease-in-out 2.2s infinite} @keyframes balaye{from{background-position:0 0,130% 0}to{background-position:0 0,-30% 0}} @keyframes balaye-boucle{0%,55%{background-position:0 0,130% 0}100%{background-position:0 0,-30% 0}} /* --- les memes cadres, en petit, dans la collection et le bilan --- */ .carte.r-R{border-color:transparent; background:linear-gradient(var(--fond2),var(--fond2)) padding-box, linear-gradient(140deg,#ecd9ff,#9b4dff 35%,#4a1c9e 62%,#d2b0ff) border-box} .carte.r-SR{border:3px solid transparent;box-shadow:0 0 18px rgba(255,61,139,.32); background:linear-gradient(var(--fond2),var(--fond2)) padding-box, linear-gradient(135deg,#ff3d8b,#ffc6de,#ff8a1f,#ff3d8b) border-box} .carte.r-UR,.carte.r-L{border:3px solid transparent;animation:pose .4s backwards,cadre-tourne 4s linear infinite} .carte.r-UR{box-shadow:0 0 22px rgba(255,138,31,.42); background:linear-gradient(var(--fond2),var(--fond2)) padding-box, conic-gradient(from var(--ang),#ff8a1f,#ffe08a,#ff3d8b,#fff,#ff8a1f) border-box} .carte.r-L{border-width:4px;box-shadow:0 0 28px rgba(255,210,74,.5); background:linear-gradient(var(--fond2),var(--fond2)) padding-box, conic-gradient(from var(--ang),#fff7d1,#ffd24a,#a8740a,#ffe89a,#fff,#d9a21b,#fff7d1) border-box} .carte .holo{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color-dodge;opacity:.2; background:repeating-linear-gradient(115deg,rgba(255,60,140,0) 0,rgba(255,60,140,.6) 4%, rgba(60,220,255,.6) 8%,rgba(255,240,90,.6) 12%,rgba(160,90,255,.6) 16%,rgba(255,60,140,0) 20%); background-size:240% 240%;animation:holo-glisse 6s ease-in-out infinite alternate} @media (prefers-reduced-motion:reduce){ .sp-paquet,.sp-rais,.sp-clic,.sp-main,.gc.suspense,.piste.secousse,.gc-face,.carte.r-UR,.carte.r-L,.holo, .dia.rayonne::before,.dia.rayonne::after{animation:none!important} .gc.ouverte .gc-face .reflet{animation:none} } /* --- dos des cartes : le logo OPUS, pâle, qui s'illumine pendant le suspense --- */ .gc-dos img{width:44%;height:auto;opacity:.55;filter:saturate(.8) drop-shadow(0 6px 18px rgba(0,0,0,.6)); transition:opacity .3s;pointer-events:none;user-select:none} .gc.suspense .gc-dos img{animation:logo-dos var(--att,800ms) ease-in forwards} @keyframes logo-dos{to{opacity:1;filter:saturate(1.2) drop-shadow(0 0 22px var(--c))}} /* ============ JEUX · MARCHE · SALON (26/09) ============ */ /* --- onglets : 5 entrees, une pastille par onglet --- */ #onglets button{position:relative;font-size:11px} .pastille{position:absolute;top:5px;left:calc(50% + 7px);min-width:10px;height:10px;border-radius:99px; font-style:normal;font-size:9.5px;font-weight:800;line-height:15px;color:#fff;pointer-events:none} .pastille.verte{background:#2bd67b;box-shadow:0 0 0 2px var(--fond),0 0 10px #2bd67b88} .pastille.rouge{height:16px;min-width:16px;padding:0 4px;top:3px;background:#ff3d5a; box-shadow:0 0 0 2px var(--fond);text-align:center;line-height:16px} .pastille.compte{height:15px;padding:0 5px;top:3px;left:calc(50% + 2px);background:#2a2a38;color:#cfcfe0; box-shadow:0 0 0 2px var(--fond);font-variant-numeric:tabular-nums} .pastille[hidden]{display:none} /* --- hub des jeux : cartes illustrées (28/09), 2×2 + la dernière en large --- */ .jeux{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;width:100%;margin:0 auto} .tuile-jeu{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end; min-height:clamp(150px,24svh,200px);padding:12px;border-radius:18px;text-align:left;color:#fff;cursor:pointer; border:1px solid #ffffff1f;background:#0d0d15 var(--fond-jeu) center/cover no-repeat;background-clip:padding-box; box-shadow:0 10px 24px -12px #000,inset 0 1px 0 #ffffff22;transition:transform .15s,box-shadow .2s} .tuile-jeu::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,#0000 30%,#07070dcc 68%,#07070d 100%)} .tuile-jeu::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(125deg,#ffffff1c 0%,#fff0 38%)} .tuile-jeu:active{transform:scale(.97)} .tuile-jeu:last-child:nth-child(odd){grid-column:1/-1;min-height:clamp(120px,18svh,160px);background-position:center 40%} .tj-txt{position:relative;z-index:1;display:block} .tj-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(14px,4vw,16px);font-weight:900;line-height:1.15;text-shadow:0 2px 8px #000} .tj-txt small{display:block;margin-top:3px;color:#d6d6e4;font-size:11.5px;line-height:1.3;text-shadow:0 1px 4px #000; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tj-etat{position:absolute;z-index:1;top:9px;right:9px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px; font-variant-numeric:tabular-nums;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .tuile-jeu.encours .tj-etat{background:#ffd24a33;color:var(--L)} .tuile-jeu.attente{filter:saturate(.45)} .tuile-jeu.attente .tj-etat{background:#000a;color:#e6e6f0} #vue-jeux .hero{padding-bottom:4px} #vue-jeux .hero .sous{margin-bottom:10px;font-size:13px} @media (max-height:640px){ /* iPhone SE & co : sous-titre masqué, cartes plus basses */ #vue-jeux .hero{padding-top:0} #vue-jeux .hero h1,#vue-jeux .hero .th{font-size:24px;margin:0} #vue-jeux .hero .sous{display:none} .jeux{gap:8px} .tuile-jeu{min-height:128px;padding:10px} .tuile-jeu:last-child:nth-child(odd){min-height:100px} .tj-txt small{-webkit-line-clamp:1} } .retour-jeux{align-self:flex-start;background:none;border:0;color:var(--gris);font-size:13px;font-weight:700; padding:2px 0 8px;cursor:pointer} .retour-jeux.hors{flex:none} .lien-credits{background:none;border:0;color:#5f5f72;font-size:11.5px;text-decoration:underline;cursor:pointer;padding:2px} /* --- fiche : ecoute juste sous l'image --- */ .ecoute{padding:12px 18px 0;display:grid;gap:10px} .ecoute .lien.principal{width:100%;font-size:16px;padding:13px} .plateformes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .plat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;white-space:nowrap;background:#0d0d15;border:1px solid var(--trait); border-radius:12px;padding:9px 6px;color:var(--texte);text-decoration:none;font-size:12.5px;font-weight:700} .plat svg{width:26px;height:26px;flex:none} .plat:active{transform:scale(.97)} .entete-fiche{text-align:center} .rar-fiche{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase; color:var(--c);border:1px solid var(--c);border-radius:99px;padding:2px 10px;margin-bottom:6px} .entete-fiche h2{font-size:21px} .entete-fiche .artiste{color:var(--gris);font-size:13.5px} .stats-fiche{margin:16px auto 4px;max-width:320px;display:grid;gap:11px} .aura-fiche{text-align:center;padding:10px 0 12px;border-radius:14px; background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%)} .aura-fiche i{display:block;font-style:normal;font-size:10.5px;letter-spacing:2px;color:var(--gris);font-weight:800} .aura-fiche b{display:block;font-size:44px;line-height:1.05;font-weight:900;color:var(--c);font-variant-numeric:tabular-nums} .aura-fiche span{font-size:12px;color:var(--gris)} .barre-st .bs-haut{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px} .barre-st em{font-style:normal;font-weight:900;font-variant-numeric:tabular-nums} .bs-jauge{height:7px;border-radius:99px;background:#1c1c28;overflow:hidden;margin:4px 0 2px} .bs-jauge i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#fff0),var(--c))} .barre-st small{color:var(--gris);font-size:11.5px} .fiche-marche{display:grid;gap:9px;margin-top:16px} .fiche-marche .lien{width:100%} .proprio{text-align:center;font-size:14px;padding:10px;border-radius:12px;background:#ffffff08;border:1px solid var(--trait)} .proprio.maison{border-color:#2bd67b44} .vendre-ligne{display:flex;gap:8px} .vendre-ligne input,.champ input,.salon-ecrire textarea,#m-recherche,.choix-cartes>input{background:#0d0d15;border:1px solid var(--trait); color:var(--texte);border-radius:12px;padding:11px 12px;font-size:15px;width:100%;font-family:inherit} .vendre-ligne input{width:110px;flex:none} .vendre-ligne .lien{flex:1} .annonce-active{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px; padding:9px 12px;border-radius:12px;background:#ffd24a14;border:1px solid #ffd24a44} /* --- marche --- */ .segments{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--fond2);border:1px solid var(--trait); border-radius:12px;padding:4px;flex:none;margin-bottom:10px} .segments button{background:none;border:0;color:var(--gris);font-weight:800;font-size:13px;padding:9px 4px;border-radius:9px;cursor:pointer} .segments button.on{background:var(--texte);color:#0a0a0f} .compte-seg{font-style:normal;background:#ff3d5a;color:#fff;border-radius:99px;padding:0 6px;font-size:11px;margin-left:2px} .compte-seg:empty{display:none} .cm{cursor:pointer;display:flex;flex-direction:column;gap:5px} .cm .carte{animation:none} .cm-bas{font-size:12px;font-weight:800;text-align:center;padding:5px 6px;border-radius:9px;background:#ffffff08; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cm-bas.maison{color:#4ee394;background:#2bd67b18} .cm-bas.vente{color:var(--L);background:#ffd24a18} .cm-bas.joueur{color:var(--gris)} .cm-bas.moi{color:#9fd0ff;background:#3d7dff18} .mini-carte{display:flex;align-items:center;gap:10px;width:100%;background:#0d0d15;border:1px solid var(--c,var(--trait)); border-radius:12px;padding:6px 10px 6px 6px;color:var(--texte);text-align:left;cursor:pointer} .mini-carte img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none} .mini-carte span{min-width:0} .mini-carte b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mini-carte small{color:var(--gris);font-size:11.5px} .offre{background:var(--fond2);border:1px solid var(--trait);border-radius:14px;padding:12px;margin-top:10px;display:grid;gap:8px} .offre.attente{border-color:#ffd24a55} .of-haut{display:flex;justify-content:space-between;gap:8px;font-size:14px} .of-quand,.quand{color:var(--gris);font-size:11.5px;white-space:nowrap} .of-contre{font-size:14px} .of-cartes{display:grid;gap:6px;padding-left:12px;border-left:2px solid var(--trait)} .of-msg{color:var(--gris);font-style:italic;font-size:13px} .of-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px} .of-actions .mini{margin:0 auto 0 0} .of-statut{font-size:12.5px;font-weight:800;color:var(--gris)} .cta.petit{font-size:14px;padding:10px 18px;width:auto} .vente-ligne{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;margin-top:10px} .offre-form{display:grid;gap:12px} .champ{display:grid;gap:6px;font-size:13px;font-weight:700} .champ small{color:var(--gris);font-weight:400} .choix-cartes{display:grid;gap:6px;max-height:260px;overflow-y:auto;overscroll-behavior:contain} .choix{display:flex;align-items:center;gap:8px;cursor:pointer} .choix input{accent-color:var(--SR);width:18px;height:18px;flex:none} .choix.on .mini-carte{background:#ff3d8b18} /* --- salon --- */ .salon-ecrire{background:var(--fond2);border:1px solid var(--trait);border-radius:16px;padding:12px;display:grid;gap:9px; max-width:560px;width:100%;margin:0 auto} .salon-ecrire textarea{resize:none;min-height:52px} .salon-actions{display:flex;justify-content:space-between;gap:8px} .salon-jointe{display:flex;gap:6px;align-items:center} .salon-jointe:empty{display:none} #salon-fil{max-width:560px;margin:0 auto;width:100%} .post{background:var(--fond2);border:1px solid var(--trait);border-radius:16px;padding:12px;margin-top:12px;display:grid;gap:9px} .post header{display:flex;align-items:center;gap:9px} .post header .quand{margin-left:auto} .avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:14px; background:hsl(var(--h) 60% 30%);color:hsl(var(--h) 90% 85%);flex:none} .suppr{background:none;border:0;cursor:pointer;opacity:.9;font-size:14px;padding:2px 4px} .post-texte{font-size:15px;white-space:pre-wrap;word-break:break-word} .post-carte{width:min(62%,220px);margin:0 auto;cursor:pointer;display:grid;gap:5px} .post-carte .carte{animation:none} .comms{display:grid;gap:5px;font-size:13.5px} .comm{word-break:break-word;display:flex;align-items:flex-start;gap:6px} .comm-t{flex:1;min-width:0} /* likes : cœur + compte, rose quand on aime */ .post-actions{display:flex;gap:8px;margin-top:-2px} .like{background:none;border:0;color:var(--gris);cursor:pointer;display:inline-flex;align-items:center;gap:4px; font-size:18px;line-height:1;padding:4px 6px;border-radius:99px;min-height:32px} .like i{font-style:normal;font-size:13px;font-weight:700;min-width:1ch} .like.on{color:var(--SR)} .like.pop{animation:like-pop .35s ease} @keyframes like-pop{40%{transform:scale(1.35)}100%{transform:scale(1)}} .comm .like{font-size:14px;padding:0 4px;min-height:22px;flex:none} .comm .like i{font-size:11.5px} .libres{font-size:13px;color:var(--gris);text-align:center} .libres b{color:var(--texte)} .comm.envoi,.post.envoi{opacity:.55} .post.envoi{pointer-events:none} .plus-comms{background:none;border:0;color:var(--gris);font-size:12.5px;text-align:left;cursor:pointer;padding:0} .commenter{display:flex;gap:6px} .commenter input{flex:1;background:#0d0d15;border:1px solid var(--trait);color:var(--texte);border-radius:99px;padding:8px 14px;font-size:16px} .commenter button{background:#ffffff10;border:1px solid var(--trait);color:var(--texte);border-radius:99px;width:38px;cursor:pointer} /* --- toast --- */ .toast{position:fixed;left:50%;bottom:calc(var(--nav) + 18px + var(--sab));z-index:120; transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f2f2f7;color:#0a0a0f;font-weight:700; font-size:14px;padding:10px 16px;border-radius:12px;box-shadow:0 10px 30px #0008;transition:.25s;max-width:88vw;text-align:center} .toast.on{opacity:1;transform:translate(-50%,0)} @media (prefers-reduced-motion:reduce){.toast{transition:none}} /* ================= VITRINE (26/09) : accueil, carte du jour, prestige, profil ================= */ .accueil{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:6px} .acc-hero{text-align:center;max-width:460px;padding:10px 4px 4px} .acc-hero h1{font-size:clamp(22px,6.4vw,34px);line-height:1.08;letter-spacing:-1px;margin-bottom:10px} .acc-hero h1 span{background:linear-gradient(92deg,var(--SR),var(--UR));-webkit-background-clip:text;background-clip:text;color:transparent} .acc-hero .sous{margin-bottom:16px} .acc-hero .cta{width:100%;max-width:320px} .lien-nu{background:none;border:0;color:var(--texte);text-decoration:underline;text-underline-offset:3px; font:inherit;cursor:pointer;padding:0} .acc-titre{align-self:stretch;max-width:460px;width:100%;margin:8px auto 0;font-size:13px;font-weight:900; letter-spacing:.6px;text-transform:uppercase;color:var(--gris)} .acc-jour{display:grid;grid-template-columns:44% 1fr;gap:14px;align-items:center;width:100%;max-width:460px; background:var(--fond2);border:1px solid var(--trait);border-radius:18px;padding:12px} .aj-carte .carte{animation:none} .aj-txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0} .aj-txt .rar-fiche{margin-bottom:2px} .aj-titre{font-size:18px;font-weight:900;line-height:1.2;letter-spacing:-.3px} .aj-art{color:var(--gris);font-size:13px} .aj-num{color:var(--gris);font-size:11.5px;font-variant-numeric:tabular-nums} .aj-prop{font-size:13px;margin:6px 0 8px} .aj-prop.libre{color:#4ee394}.aj-prop.moi{color:#4ee394} .aj-txt .lien{width:100%;padding:10px} .acc-tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;max-width:460px} .acc-tuiles button{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;cursor:pointer; background:var(--fond2);border:1px solid var(--trait);border-radius:14px;padding:12px 6px;color:var(--texte)} .acc-tuiles button:active,.acc-marche:active{transform:scale(.97)} .acc-tuiles span{font-size:24px;line-height:1.2} .acc-tuiles b{font-size:13px;line-height:1.2} .acc-tuiles small{color:var(--gris);font-size:11px;line-height:1.3} .acc-marche{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;text-align:left;cursor:pointer; background:none;border:1px dashed var(--trait);border-radius:14px;padding:11px 14px;color:var(--gris);font-size:13px} .acc-marche>span:first-child{font-size:20px;color:var(--texte)} .acc-marche b{color:var(--texte)} /* fiche : numero de serie et proprietaire */ .num-fiche{font-size:12px;color:var(--gris);margin-top:3px;font-variant-numeric:tabular-nums} .num-fiche b{color:var(--texte)} .lien.partager{width:100%} .proprio{display:grid;gap:3px;justify-items:center} .proprio small{color:var(--gris);font-size:12px} .proprio .lien-nu{font-size:13px;color:var(--gris);margin-top:2px} .titre-j{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.4px;padding:1px 8px;border-radius:99px; background:#ffffff10;color:var(--L);vertical-align:1px} /* prestige en tete de collection */ .prestige{flex:none;background:var(--fond2);border:1px solid var(--trait);border-radius:16px;padding:11px 13px; margin-bottom:10px;cursor:pointer;display:grid;gap:7px} .prestige[hidden]{display:none} .prestige:active{transform:scale(.99)} .pr-ligne{display:flex;align-items:center;gap:10px;min-width:0} .prestige>*{min-width:0} .pr-nom{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1} .pr-nom b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pr-nom em{font-style:normal;font-size:12px;font-weight:800;color:var(--L)} .pr-voir{color:var(--gris);font-size:12.5px;font-weight:700} .pr-jauge{height:7px;border-radius:99px;background:#1c1c28;overflow:hidden} .pr-jauge i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--SR),var(--UR))} .pr-bas{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--gris)} .pr-bas b{color:var(--texte)} .btn-troph{justify-self:start;display:inline-flex;align-items:center;gap:7px;background:#ffd24a14;color:var(--texte); border:1px solid #ffd24a55;border-radius:99px;padding:6px 13px;font:inherit;font-size:13px;font-weight:800;cursor:pointer} .btn-troph b{color:#ffd24a;font-variant-numeric:tabular-nums} .btn-troph:active{transform:scale(.97)} .btn-troph.compact{flex:none;padding:5px 10px;font-size:12.5px;gap:5px} .btn-troph.large{justify-self:stretch;justify-content:center;border-radius:12px;padding:11px 14px;font-size:14px;margin-top:6px} .btn-troph i{display:inline-block;font-style:normal;color:var(--gris);transition:transform .2s} .btn-troph[aria-expanded="true"] i{transform:rotate(180deg)} .pf-edit{background:none;border:0;font-size:16px;cursor:pointer;padding:2px 4px;vertical-align:middle;opacity:.8} .pf-pseudo{display:flex;gap:6px;justify-content:center;margin-top:4px} .pf-pseudo input{width:min(200px,52vw);background:var(--fond2);border:1px solid var(--trait);color:var(--texte); border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;font-weight:800;text-align:center} .pf-pseudo .btn-sec{padding:8px 12px} .pf-err{color:#ff6b6b;margin-top:4px} .pf-badges[hidden]{display:none} /* profil public */ .profil{display:grid;gap:10px} .pf-tete{text-align:center;display:grid;justify-items:center;gap:4px;padding-top:6px} .avatar.grand{width:68px;height:68px;font-size:30px} .pf-tete h2{margin-top:4px} .pf-tete .mini{margin-top:0} .pf-rar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .pf-rar span{display:grid;justify-items:center;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:10px;padding:5px 0} .pf-rar i{font-style:normal;font-size:10px;font-weight:900;color:var(--c)} .pf-rar b{font-size:16px;font-variant-numeric:tabular-nums} .pf-rar .zero{opacity:.35} .pf-h{font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--gris);margin-top:8px} .pf-h small{font-weight:700;letter-spacing:0;text-transform:none;margin-left:4px} .pf-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px} .pfb{display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center;background:#0d0d15; border:1px solid var(--trait);border-radius:12px;padding:8px 10px;opacity:.4} .pfb.ok{opacity:1;border-color:#ffd24a55} .pfb span{grid-row:span 2;font-size:22px;text-align:center} .pfb:not(.ok) span{filter:grayscale(1)} .pfb b{font-size:12.5px;line-height:1.2} .pfb small{color:var(--gris);font-size:10.5px;line-height:1.25} .pf-arts{display:grid;gap:9px} .pfa>div:first-child{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px} .pfa em{font-style:normal;color:var(--gris);font-variant-numeric:tabular-nums} .post header .avatar,.post header>b{cursor:pointer} .acc-hero h1 br+span,.acc-hero h1 span{display:inline-block} .profil .grille{grid-template-columns:repeat(2,1fr);gap:10px} /* ═══ JEUX SUR UN SEUL ÉCRAN (27/09) ═══ Dès qu'une partie est posée (en cours OU bilan affiché), l'en-tête se resserre : la consigne est déjà connue, la série passe sur une ligne, et ce qui est grisé pendant la partie (scène, mode, bouton « en cours ») s'efface. Tout doit tenir sans défiler, même sur un iPhone SE (667 px). */ #vue-blind:has(.prop) .sous,#vue-rivaux:has(.rv) .sous{display:none} #vue-blind:has(.prop) h1,#vue-blind:has(.prop) .th,#vue-rivaux:has(.rv) h1,#vue-rivaux:has(.rv) .th{font-size:17px;margin-bottom:4px} :is(#vue-blind,#vue-rivaux):has(.prop,.rv) .retour-jeux{padding-bottom:2px} #vue-blind.encours .puces.scenes,#vue-rivaux.encours .puces, #vue-rivaux.encours #btn-rivaux,#vue-rivaux.encours #riv-info{display:none} #vue-blind:has(.prop):not(.encours) #quiz-info,#vue-rivaux:has(.rv):not(.encours) #riv-info, #vue-blind:has(.prop):not(.encours) .chrono{display:none} :is(#vue-blind:has(.prop),#vue-rivaux:has(.rv)) .puces{margin-bottom:5px} :is(#vue-blind:has(.prop),#vue-rivaux:has(.rv)) .puce{padding-top:5px;padding-bottom:5px} :is(#vue-blind:has(.prop),#vue-rivaux:has(.rv)) .serie{display:flex;align-items:center;justify-content:center; gap:12px;padding:5px 14px;margin-bottom:6px} :is(#vue-blind:has(.prop),#vue-rivaux:has(.rv)) .serie-n b{font-size:24px} :is(#vue-blind:has(.prop),#vue-rivaux:has(.rv)) .serie-bas{margin-top:0} :is(#vue-blind:has(.prop),#vue-rivaux:has(.rv)) .cta{padding-top:10px;padding-bottom:10px;font-size:15px} #vue-rivaux:has(.rv) .rivx{margin-top:6px;gap:5px} #vue-rivaux:has(.rv) .rv{grid-template-columns:50px 1fr;padding:7px 56px 7px 7px;gap:10px} #vue-rivaux:has(.rv) .rv img{width:50px;height:50px} #vue-rivaux:has(.rv) .rv-jauge{margin-top:5px} #vue-rivaux:has(.rv) .rv-ind{margin-top:2px} #vue-rivaux:has(.rv) .rv-play{width:40px;height:40px} #vue-rivaux:has(.rv) .riv-res{margin-top:6px} #vue-blind .props{margin-top:6px} #resultat-blind .debloque{margin-top:6px} /* petits écrans : on gagne encore quelques pixels */ @media (max-height:720px){ #vue-blind.encours .chrono{font-size:24px;margin:0 0 2px} #vue-blind:has(.prop) .prop{padding-top:8px;padding-bottom:8px} #vue-rivaux:has(.rv) .rv-ou{font-size:9.5px;line-height:1.2} } /* bilan : série, gains et record sont déjà dans l'encart du haut, inutile de les répéter */ #vue-rivaux:has(.rv):not(.encours) .riv-res .mini, #vue-blind:has(.prop):not(.encours) #resultat-blind .mini{display:none} /* Duel, écrans de règles : sur un petit écran les trois règles et les deux boutons doivent tenir ensemble */ @media (max-height:720px){ #clash .hero{padding-bottom:4px} #clash .hero .sous{font-size:13px;margin-bottom:8px} .regles-duel{gap:6px} .regles-duel li{padding:8px 11px 8px 38px;font-size:12.5px;line-height:1.4} .regles-duel li::before{top:8px} #clash .cta{margin-top:12px} #clash .ou{margin:8px auto 6px} } /* Arène sur petit écran (iPhone SE…) : tout doit tenir, y compris pendant la résolution, quand les deux rangées de cartes et les totaux occupent le tapis. */ @media (max-height:720px){ .arene{gap:5px} .tableau{padding:3px 12px} .mise{padding:4px 9px} .mise b{font-size:12px} .ligne-camp .etiq{margin-bottom:3px} .ligne-camp.lui .dc.petite{--w:44px} .ligne-camp.lui .dc.petite .dc-aura{font-size:16px} .ligne-camp.lui .dc.petite .dc-nom{display:none} .ligne-camp.moi .rang{padding-top:8px} .ligne-camp.moi .dc{--w:56px} .ligne-camp.moi .dc .dc-aura{font-size:20px} .tapis{min-height:96px;padding:6px;gap:4px} .duel-rang{min-height:54px} .duel-rang .dc{--w:40px} .duel-rang .dc .dc-aura{font-size:15px} .duel-rang .dc .dc-nom{display:none} .tot b{font-size:24px} .barre-bas{padding-top:5px} .barre-bas .cta{padding:11px 20px} .somme b{font-size:18px} } .arene.resolution .barre-bas{display:none} /* ═══ ACCUEIL SUR UN SEUL ÉCRAN (27/09) ═══ La carte du jour se dimensionne sur la HAUTEUR de l'écran, pas sa largeur : c'est la hauteur qui manque sur téléphone. Sous 720 px, l'accroche cède sa place (le titre dit déjà l'essentiel) et les tuiles perdent leur sous-titre. */ .accueil{gap:clamp(8px,1.5dvh,14px)} .acc-hero{padding-top:4px} .acc-hero .sous{font-size:13.5px;margin-bottom:12px} .acc-titre{margin-top:0} .acc-jour{grid-template-columns:clamp(110px,19dvh,44%) 1fr;padding:10px} /* le bas de la carte (titre, artiste, stats) est déjà écrit à côté : seule la photo reste */ .aj-carte .carte .bas{display:none} .acc-tuiles button{padding:9px 6px} @media (max-height:860px){ .acc-tuiles small{display:none} } @media (max-height:720px){ .acc-hero h1{font-size:24px;margin-bottom:8px} .acc-hero .sous{display:none} .acc-hero .cta{padding-top:11px;padding-bottom:11px} .acc-tuiles small{display:none} .acc-tuiles span{font-size:20px} .acc-marche{padding:8px 12px} .aj-titre{font-size:16px} } /* ============ NOTIFICATIONS (27/09) ============ */ .cloche{position:relative} .cloche .pastille{left:auto;right:-6px;top:-6px} .notifs{padding:18px 14px 14px} .notifs h3{margin:4px 44px 12px 4px;font-size:17px} .notif{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:none;color:inherit; border:0;border-top:1px solid var(--trait);padding:11px 6px;cursor:pointer;font:inherit} .notif:active{background:#ffffff0a} .notif-ico{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:#ffffff10;font-size:15px} .notif.neuve .notif-ico{background:#ff3d5a26;box-shadow:0 0 0 1px #ff3d5a66} .notif-txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px;line-height:1.35} .notif-txt b{font-weight:600} .notif.neuve .notif-txt b{font-weight:800} .notif-txt small{color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notif-txt .quand{font-size:11.5px;color:var(--gris)} .post.eclaire{box-shadow:0 0 0 2px var(--SR),0 0 22px #ffffff22;transition:box-shadow .4s} /* la cloche prend une place de plus dans la barre : on resserre sur petit ecran */ .solde{white-space:nowrap} @media (max-width:420px){ #barre{padding:10px 12px} .compte{margin-right:7px;max-width:34vw;padding:8px 9px} .son{margin-right:7px;width:32px} .solde{padding:6px 10px} } /* push : une ligne en tete de la liste des notifications */ .push-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px; background:#ffffff0a;border:1px solid var(--trait);border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:13.5px} .push-ligne.on{border-color:#2bd67b55} .push-ligne button{flex:none} .push-info{background:#ffffff0a;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--gris)} .push-info b{color:var(--texte)} /* Collection : c'est la vue entière qui défile, pas seulement la grille — les filtres partent vers le haut avec les cartes et libèrent la place. */ #vue-collection{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding-bottom:12px} #vue-collection::-webkit-scrollbar{width:0} #vue-collection > *{flex:none} #collection.pan{flex:none;overflow:visible;min-height:auto} .remonter{position:fixed;right:16px;bottom:calc(var(--nav) + var(--sab) + 16px);z-index:45; width:46px;height:46px;border-radius:50%;border:1px solid var(--trait);background:var(--fond2); color:inherit;font-size:22px;font-weight:900;line-height:1;cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.5);animation:apparait .2s ease} .remonter[hidden]{display:none} /* Paquets : la phrase d'accroche centrée sous le booster */ .ecran-bas .sous,.ecran-bas .libres,.ecran-bas .mini{text-align:center} /* ================= GUERRE DES VILLES · PARI · ARÈNES (27/09) ================= */ #villes-corps,#pari-corps{max-width:560px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:12px} .lien-mini{background:none;border:1px solid var(--trait);color:var(--gris);border-radius:99px;padding:5px 12px; font-size:12px;font-weight:700;cursor:pointer} .vert{color:#4ee394} .gris{color:var(--gris)} .mv{background:var(--fond2);border:1px solid var(--trait);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px} .mv .cta.petit{align-self:center} .mv-haut{display:flex;align-items:center;gap:12px} .mv-haut>div{flex:1} .mv-haut b{display:block;font-size:19px;font-weight:900} .mv-haut small{color:var(--gris);font-size:12.5px} .mv-rang{font-size:22px;font-weight:900;color:var(--L);min-width:52px;text-align:center} .mv-moi{font-size:13.5px;color:var(--gris)} .mv-moi b{color:var(--texte)} .mv-verdict{font-size:12.5px;color:var(--gris);text-align:center;background:#ffffff08;border-radius:10px;padding:8px 10px} .mv-verdict b{color:var(--texte)} .carte-geo{height:260px;border-radius:16px;overflow:hidden;border:1px solid var(--trait);background:#0c0c12;flex:none} .carte-geo.haute{height:min(46dvh,420px);margin:8px 0 12px} /* fond OpenStreetMap assombri pour coller au thème, sans changer de fournisseur de tuiles */ .carte-geo .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)} .carte-geo .leaflet-control-attribution{background:#000a;color:#999;font-size:10px} .carte-geo .leaflet-control-attribution a{color:#bbb} .leaflet-tooltip{background:#111119;color:#f2f2f7;border:1px solid #23232f;font-weight:700} .classement-villes{list-style:none;display:flex;flex-direction:column;gap:6px} .classement-villes li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px; background:var(--fond2);border:1px solid var(--trait);border-radius:12px;padding:8px 12px} .classement-villes li.moi{border-color:var(--SR);background:linear-gradient(90deg,#ff3d8b18,var(--fond2))} .classement-villes li:first-child .cl-r{color:var(--L)} .cl-r{font-weight:900;color:var(--gris);text-align:center} .cl-n b{display:block;font-size:14.5px} .cl-n small{color:var(--gris);font-size:11.5px} .cl-p{font-weight:900;font-variant-numeric:tabular-nums} .regles-pts{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--gris)} .regles-pts b{color:var(--texte)} /* choix de la ville */ .choix-ville,.selecteur,.fiche-lieu{padding:26px 16px 18px;display:flex;flex-direction:column;gap:12px} .choix-ville h2,.selecteur h2,.fiche-lieu h2{text-align:center;font-size:21px;font-weight:900} .cv-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .cv{background:var(--fond2);border:1px solid var(--trait);border-radius:12px;padding:10px;text-align:left;color:var(--texte);cursor:pointer} .cv.on{border-color:var(--SR)} .cv b{display:block;font-size:14.5px} .cv small{display:block;color:var(--gris);font-size:11px;line-height:1.3;margin-top:2px} .cv em{display:block;font-style:normal;font-size:11px;color:var(--L);margin-top:4px} /* pari */ .pari-res{background:linear-gradient(90deg,#ffd24a22,var(--fond2));border:1px solid #ffd24a55;border-radius:14px; padding:10px 14px;display:flex;flex-direction:column;gap:2px;text-align:center} .pari-res span{color:var(--gris);font-size:13px} .pari-main{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .pm-case{border-radius:12px;min-height:128px;background:var(--fond2);border:1px solid var(--trait);overflow:hidden; display:flex;flex-direction:column;cursor:pointer;min-width:0} .pm-case.vide{display:grid;place-items:center;font-size:26px;color:#3a3a4a;border-style:dashed} .pm-case img{width:100%;aspect-ratio:1;object-fit:cover;display:block} .pm-case b{font-size:10.5px;line-height:1.2;padding:4px 5px 0;overflow:hidden;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word} .pm-case small{font-size:9.5px;color:var(--gris);padding:0 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .pm-case em{font-style:normal;font-size:10px;font-weight:800;color:var(--L);padding:2px 5px 5px;margin-top:auto} .pari-total{font-size:14px;color:var(--gris)} .pari-total b{color:var(--texte)} /* sélecteur de cartes (pari, arène) */ .sel-liste{display:flex;flex-direction:column;gap:6px;max-height:52dvh;overflow-y:auto;overscroll-behavior:contain} .sel-l{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;text-align:left; background:var(--fond2);border:1px solid var(--trait);border-left:3px solid var(--c,var(--C));border-radius:10px; padding:6px 10px 6px 6px;color:var(--texte);cursor:pointer} .sel-l.on{border-color:var(--SR);background:linear-gradient(90deg,#ff3d8b22,var(--fond2))} .sel-l img{width:44px;height:44px;border-radius:8px;object-fit:cover} .sel-l b{display:block;font-size:13.5px;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .sel-l span{min-width:0} .sel-l small{display:block;color:var(--gris);font-size:11.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .sel-l em{font-style:normal;font-weight:900;font-size:13px;font-variant-numeric:tabular-nums} /* arènes */ .pin{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:#fff; border:2px solid #fff;box-shadow:0 2px 10px #0009} .pin.arene{background:#3d3d52} .pin.arene.a-moi{background:var(--SR)} .pin.arene.allie{background:#2bd67b} .pin.arene.ennemi{background:#ff5a3d} .pin.spot{background:#3d7dff;width:28px;height:28px;font-size:13px} .pin.spot.vu{background:#3a3a4a;opacity:.7} .pin.proche{box-shadow:0 0 0 4px #ffd24a88,0 2px 10px #0009} .ar-miennes{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .ar-m-haut{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ar-m-haut b{font-size:15px} .ar-m-haut span{color:var(--gris);font-size:12px;flex:1} .ar-m{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;background:var(--fond2); border:1px solid var(--trait);border-radius:10px;padding:6px 10px 6px 6px} .ar-m img{width:40px;height:40px;border-radius:8px;object-fit:cover} .ar-m b{display:block;font-size:13.5px} .ar-m small{color:var(--gris);font-size:11.5px} .ar-liste{display:flex;flex-direction:column;gap:6px} .ar-l{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;text-align:left;background:var(--fond2); border:1px solid var(--trait);border-radius:10px;padding:8px 10px;color:var(--texte);cursor:pointer} .ar-l.proche{border-color:#ffd24a88} .ar-l b{display:block;font-size:14px} .ar-l small{color:var(--gris);font-size:11.5px} .ar-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#3d3d52} .ar-ico.spot{background:#3d7dff} .fl-genre{text-align:center;color:var(--gris);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px} .occupant{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;background:var(--fond2); border:1px solid var(--trait);border-radius:14px;padding:10px} .occupant img{width:72px;height:72px;border-radius:10px;object-fit:cover} .occupant small{color:var(--gris);font-size:11.5px;display:block} .occupant b{display:block;font-size:16px} .occupant span{display:block;font-size:13px} .occupant em{display:block;font-style:normal;font-size:12px;color:var(--L);margin-top:2px} .ar-l small b{display:inline;font-size:inherit} /* ═══ GUERRE DES VILLES = CARTE FAÇON POKÉMON GO (27/09 soir) ═══ */ #vue-villes .pan{max-width:620px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:10px} .gv-bandeau{display:flex;flex-direction:column;gap:6px} .gv-b{display:flex;align-items:center;gap:12px;background:var(--fond2);border:1px solid var(--trait);border-radius:14px;padding:10px 12px} .gv-b>div{flex:1;min-width:0} .gv-b b{display:block;font-size:17px;font-weight:900} .gv-b small{color:var(--gris);font-size:12px} .gv-rang{font-size:20px;font-weight:900;color:var(--L);min-width:44px;text-align:center} .gv-verdict{font-size:12px;color:var(--gris);text-align:center} .gv-verdict b{color:var(--texte)} .gv-carte{position:relative;isolation:isolate} .carte-geo{isolation:isolate} .carte-geo.jeu{height:min(66dvh,600px);margin:0;border-radius:20px} .gv-mode{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:4px; background:#0b0b12d9;backdrop-filter:blur(8px);border:1px solid #ffffff1f;border-radius:99px;padding:4px} .gv-mode button{background:none;border:0;color:#bbb;font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:99px;cursor:pointer;white-space:nowrap} .gv-mode button.on{background:linear-gradient(92deg,var(--SR),var(--UR));color:#fff} .gv-recentrer{position:absolute;right:12px;bottom:62px;z-index:5;width:46px;height:46px;border-radius:50%; border:2px solid #fff;background:#3d7dff;color:#fff;font-size:22px;font-weight:900;box-shadow:0 4px 14px #000a;cursor:pointer} .gv-info{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;margin:0;text-align:center;font-size:12.5px; color:#eee;background:#0b0b12d9;backdrop-filter:blur(8px);border:1px solid #ffffff1f;border-radius:12px;padding:8px 10px;pointer-events:none} .gv-info:empty{display:none} .gv-voile{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:16px;background:rgba(8,8,12,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); text-align:center;padding:20px;pointer-events:none;border-radius:20px} .gv-voile[hidden]{display:none} .gv-voile b{font-size:24px;font-weight:900;color:#ffd24a;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.6)} .gv-voile-rond{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,210,74,.25);border-top-color:#ffd24a; animation:gv-tourne .9s linear infinite} @keyframes gv-tourne{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.gv-voile-rond{animation-duration:2.5s}} .gv-info b{color:#ffd24a} /* le joueur : point bleu qui pulse, comme dans les jeux de géoloc */ .gv-moi{position:relative;width:40px;height:40px} .gv-moi b{position:absolute;inset:11px;border-radius:50%;background:#3d7dff;border:3px solid #fff;box-shadow:0 2px 8px #000a} .gv-moi i{position:absolute;inset:0;border-radius:50%;background:#3d7dff66;animation:gv-pouls 2s ease-out infinite} @keyframes gv-pouls{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}} /* les arènes : une tour avec la carte qui la défend dans la tête */ .tour{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;--t:#8a8aa3;cursor:pointer} .tour.a-moi{--t:#ffd24a}.tour.allie{--t:#2bd67b}.tour.ennemi{--t:#ff4d6d}.tour.libre{--t:#b9b9d0} .tour-tete{width:44px;height:44px;border-radius:50%;border:3px solid var(--t);background:#16161f;overflow:hidden; display:grid;place-items:center;font-size:20px;box-shadow:0 0 0 2px #000a,0 6px 14px #000c;flex:none} .tour-tete img{width:100%;height:100%;object-fit:cover;display:block} .tour-pied{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid var(--t);margin-top:-2px} .tour.grande .tour-tete{width:58px;height:58px;font-size:27px;border-width:4px} .tour.grande em{position:absolute;top:100%;margin-top:-4px;white-space:nowrap;font-style:normal;font-size:11px;font-weight:900; color:#fff;background:#0b0b12e0;border:1px solid var(--t);border-radius:99px;padding:1px 7px} .tour.proche .tour-tete{animation:gv-proche 1.4s ease-in-out infinite} @keyframes gv-proche{50%{box-shadow:0 0 0 6px #ffd24a99,0 6px 14px #000c}} .pin.spot{background:#3d7dff;width:30px;height:30px;font-size:14px} .ar-ico.libre{background:#3d3d52}.ar-ico.a-moi{background:#b8901a}.ar-ico.allie{background:#1f9e5a}.ar-ico.ennemi{background:#c73650} .gv-regles{background:var(--fond2);border:1px solid var(--trait);border-radius:12px;padding:10px 12px} .gv-regles summary{cursor:pointer;font-weight:800;font-size:14px} .gv-regles ul{margin-top:10px} #vue-villes #villes-corps{max-width:none} /* fiche d'arène : le socle où l'on pose sa carte */ .socle{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;background:var(--fond2); border:1px solid var(--trait);border-radius:16px;padding:10px} .socle img{width:84px;height:84px;border-radius:12px;object-fit:cover} .socle small{color:var(--gris);font-size:11.5px;display:block} .socle b{display:block;font-size:16px} .socle span{display:block;font-size:13px} .socle em{display:block;font-style:normal;font-size:12.5px;color:var(--L);margin-top:3px;font-weight:800} .socle.vide{border-style:dashed} .socle-plus{width:84px;height:84px;border-radius:12px;border:2px dashed #ffffff33;display:grid;place-items:center;font-size:34px;color:#ffffff55} .tour.groupe .tour-tete{position:relative;overflow:visible} .tour.groupe .tour-tete i{position:absolute;top:-6px;right:-8px;min-width:24px;height:24px;border-radius:99px;background:var(--SR); color:#fff;font-style:normal;font-size:13px;font-weight:900;display:grid;place-items:center;border:2px solid #fff;padding:0 4px} .socle .socle-plus{display:grid;width:84px;height:84px;font-size:34px} .fiche-lieu .fl-genre{padding:0 40px} /* ═══ arènes animées (27/09 nuit) ═══ */ .tour-corps{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center; animation:tour-flotte 3.2s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes tour-flotte{50%{transform:translateY(-4px)}} /* onde au sol : deux anneaux décalés, couleur du camp */ .tour-sol{position:absolute;left:50%;bottom:0;width:46px;height:16px;margin-left:-23px;border-radius:50%; border:2px solid var(--t);opacity:0;animation:tour-onde 2.6s ease-out infinite;animation-delay:var(--d,0s);pointer-events:none} .tour-sol.s2{animation-delay:calc(var(--d,0s) - 1.3s)} @keyframes tour-onde{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.9);opacity:0}} .tour.libre .tour-sol{border-color:#ffffffaa} .tour.ennemi .tour-sol{animation-duration:1.6s} /* ma tour : un anneau doré qui tourne autour de la tête */ .tour.a-moi .tour-tete{position:relative;overflow:visible} .tour.a-moi .tour-tete::after{content:'';position:absolute;inset:-7px;border-radius:50%; border:2px dashed #ffd24a;animation:gv-tourne 6s linear infinite;pointer-events:none} .tour.a-moi .tour-tete img{border-radius:50%} /* apparition : la tour tombe du ciel et rebondit */ .tour.neuf .tour-corps{animation:tour-arrive .7s cubic-bezier(.3,1.6,.5,1) both,tour-flotte 3.2s ease-in-out .7s infinite} @keyframes tour-arrive{0%{transform:translateY(-40px) scale(.4);opacity:0}100%{transform:none;opacity:1}} .tour.neuf .tour-sol{animation-delay:.5s,.5s} .tour:hover .tour-tete,.tour:active .tour-tete{transform:scale(1.12)} .tour-tete{transition:transform .2s} /* zones : la portée du joueur défile, les zones ennemies respirent */ .gv-portee{animation:gv-defile 1.2s linear infinite} @keyframes gv-defile{to{stroke-dashoffset:-13}} .gv-zone-ennemie{animation:gv-menace 2.4s ease-in-out infinite} @keyframes gv-menace{50%{fill-opacity:.28;stroke-width:5}} /* bandeau et choix du gang */ .gv-b,.gv-tete,.gv-verdict{animation:gv-entre .5s ease-out both} .gv-tete{animation-delay:.08s}.gv-verdict{animation-delay:.16s} @keyframes gv-entre{from{opacity:0;transform:translateY(8px)}} .pts-ctrl{display:inline-block;margin:3px 0 2px;font-size:12px;font-weight:800;color:#ffd24a; background:#ffd24a1a;border:1px solid #ffd24a55;border-radius:99px;padding:2px 9px} .pts-ctrl.zero{color:var(--gris);background:none;border-color:var(--trait)} .gv-b .pts-ctrl{margin:3px 0 3px} .gv-b small{display:block} .cv .pts-ctrl{margin-top:6px;font-size:11px;padding:1px 8px} .cv-sur{text-align:center;margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)} .choix-ville h2.cv-gang{font-size:32px;line-height:1.05;margin:-4px 0 0; background:linear-gradient(92deg,#ffd24a,var(--SR),var(--UR),#ffd24a);background-size:250% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;animation:cv-brille 4s linear infinite} @keyframes cv-brille{to{background-position:-250% 0}} .cv{animation:gv-entre .4s ease-out both;transition:transform .15s,border-color .15s} .cv:nth-child(3n+2){animation-delay:.05s}.cv:nth-child(3n){animation-delay:.1s} .cv:hover{border-color:#ffd24a88;transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){ .tour-corps,.tour.neuf .tour-corps,.tour-sol,.tour.a-moi .tour-tete::after,.gv-portee,.gv-zone-ennemie, .gv-b,.gv-tete,.gv-verdict,.cv,.choix-ville h2.cv-gang{animation:none} } /* ---- boutique : pieces + invitations (27/09) ---- */ .solde{cursor:pointer} .liens-bas{display:flex;gap:8px;justify-content:center;margin-top:10px} .lien-bout{background:var(--fond2);border:1px solid var(--trait);color:var(--texte);font-weight:700; font-size:13px;padding:7px 12px;border-radius:999px} .lien-bout b{color:var(--L)} .lien-bout:active{transform:scale(.97)} .bq-bloc{background:var(--fond2);border:1px solid var(--trait);border-radius:16px;padding:16px; margin:0 auto 14px;width:100%;max-width:520px} .bq-bloc h2{font-size:18px;margin:0 0 4px} .bq-txt{color:var(--gris);font-size:14px;margin:0 0 12px} .bq-lien{display:flex;gap:8px} .bq-lien input{flex:1;min-width:0;background:var(--fond);border:1px solid var(--trait);color:var(--texte); border-radius:10px;padding:10px;font-size:13px} .bq-offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .bq-offre{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--fond); border:1px solid var(--trait);border-radius:14px;padding:14px 6px;color:var(--texte)} .bq-offre:nth-child(2){border-color:var(--SR)} .bq-offre:nth-child(3){border-color:var(--L)} .bq-offre:active{transform:scale(.97)} .bq-offre[disabled]{opacity:.45} .bq-nom{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em} .bq-offre b{font-size:18px;font-variant-numeric:tabular-nums} .bq-eq{font-size:12px;color:var(--gris)} .bq-prix{margin-top:6px;font-weight:800;background:linear-gradient(92deg,var(--SR),var(--UR)); padding:5px 12px;border-radius:999px;font-size:14px} .bq-test{grid-column:1/-1;color:var(--UR)} .bq-bientot{grid-column:1/-1;margin:4px 0 0;text-align:center;font-weight:800;font-size:15px;color:var(--texte)} .bq-renonce{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--gris);text-align:left} .bq-renonce input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--SR)} .bq-renonce[hidden]{display:none} .bq-renonce.secoue{animation:secoue .5s;color:var(--texte)} /* ---- liens legaux (accueil + boutique) ---- */ .acc-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:26px 0 8px;font-size:12.5px} .acc-legal a,#bq-info a{color:var(--gris);text-underline-offset:3px} .gv-tete{margin:8px auto 0;padding:7px 14px;width:fit-content;max-width:100%;border-radius:99px;background:rgba(255,210,74,.12);border:1px solid rgba(255,210,74,.35);color:#ffe9a8;font-size:13.5px;text-align:center} .gv-tete b{color:#ffd24a} /* ═══ en-tête des jeux : ← Tous les jeux | Règles (28/09) ═══ */ .jeu-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;flex:none} .jeu-tete .retour-jeux{padding-bottom:6px} .regles-btn{display:inline-flex;align-items:center;gap:6px;background:var(--fond2);border:1px solid var(--trait); color:var(--texte);font-weight:800;font-size:12.5px;padding:5px 11px 5px 6px;border-radius:99px;cursor:pointer;margin-bottom:6px} .regles-btn span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%; background:linear-gradient(135deg,var(--SR),var(--UR));color:#fff;font-size:12px;font-weight:900} .regles-btn:active{transform:scale(.96)} .regles-fiche{padding:20px 16px 14px;display:flex;flex-direction:column;gap:6px;text-align:left} .regles-fiche h2{text-align:center;font-size:22px;font-weight:900;margin-bottom:4px} .regles-fiche h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--L);margin:7px 0 2px} .regles-fiche ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .regles-fiche li{position:relative;padding-left:16px;font-size:13px;line-height:1.38;color:#d8d8e4} .regles-fiche li::before{content:'';position:absolute;left:3px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--SR)} .regles-fiche li b{color:#fff} .regles-fiche .cta{margin-top:10px} /* onglets à l'intérieur d'un jeu */ .onglets-jeu{display:flex;gap:4px;background:var(--fond2);border:1px solid var(--trait);border-radius:99px;padding:4px;flex:none;width:100%;max-width:520px;margin:0 auto} .onglets-jeu button{flex:1;background:none;border:0;color:var(--gris);font-weight:800;font-size:13px;padding:9px 6px;border-radius:99px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .onglets-jeu button.on{background:linear-gradient(92deg,var(--SR),var(--UR));color:#fff} #pari-corps .onglets-jeu{margin-bottom:12px} .po-p[hidden],.gv-p[hidden]{display:none} .po-p{display:flex;flex-direction:column;gap:10px} /* guerre des villes : onglet carte = la carte prend tout l'écran restant, sans défilement */ .gv-p{display:flex;flex-direction:column;gap:10px} #vue-villes.gv-sur-carte .pan{overflow:hidden;padding-bottom:6px} #vue-villes.gv-sur-carte #gv-p-carte{flex:1;min-height:0} #vue-villes.gv-sur-carte .gv-carte{flex:1;min-height:0;display:flex;flex-direction:column} #vue-villes.gv-sur-carte .carte-geo.jeu{flex:1;height:auto;min-height:0} .gv-puce{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;gap:8px;justify-content:space-between;pointer-events:none} .gv-puce:empty{display:none} .gv-puce button{pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left; background:#0b0b12e0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #ffffff26; border-radius:14px;padding:7px 11px;color:#fff;cursor:pointer;box-shadow:0 4px 14px #0008;min-width:0} .gv-puce b{font-size:13.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .gv-puce small{font-size:11.5px;font-weight:800;color:#ffd24a;white-space:nowrap} .gv-puce .gp-rec{align-items:flex-end;text-align:right;flex:none} .gv-puce .gp-rec:not([disabled]){border-color:#ffd24a;animation:gv-proche 1.8s ease-in-out infinite} .gv-puce .gp-rec[disabled]{cursor:default} .gv-puce .gp-rec[disabled] small{color:var(--gris)} /* fiche d'arène : ce qu'on gagne, ce qu'on risque */ .fl-infos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .fl-infos li{font-size:13px;line-height:1.4;color:#d8d8e4;background:var(--fond2);border:1px solid var(--trait);border-radius:10px;padding:7px 10px} .fl-infos li b{color:#fff} .rv-question{text-align:center;font-weight:800;font-size:14px;margin:2px 0 8px;color:#fff} /* arène tenue : mini carte au lieu du rond (27/09 nuit) — liseré = rareté, halo = camp */ .tour-tete.tt-carte{width:44px;height:62px;border-radius:8px;border:3px solid var(--c,var(--t));position:relative;overflow:hidden; box-shadow:0 0 0 2px var(--t),0 0 12px var(--t),0 6px 14px #000c} .tour-tete.tt-carte img{object-position:50% 18%;filter:brightness(1.12) saturate(1.1);border-radius:0} .tour-tete.tt-carte b{position:absolute;left:0;right:0;bottom:0;font-size:9px;font-weight:900;line-height:12px;text-align:center; color:#000;background:var(--c,var(--t))} .tour.a-moi .tour-tete.tt-carte{overflow:hidden} .tour.a-moi .tour-tete.tt-carte::after{display:none} .tour.a-moi .tour-tete.tt-carte img{border-radius:0} .tour.a-moi .tour-tete.tt-carte{animation:tt-moi 2s ease-in-out infinite} @keyframes tt-moi{50%{box-shadow:0 0 0 2px var(--t),0 0 22px var(--t),0 6px 14px #000c}} @media (prefers-reduced-motion:reduce){.tour.a-moi .tour-tete.tt-carte{animation:none}} /* Leaflet impose width:auto aux des marqueurs : sans ça la photo s'affiche en taille réelle (960 px) et on ne voit que son coin haut-gauche, souvent noir */ .leaflet-marker-pane .tour-tete img{width:100%!important;height:100%!important;object-fit:cover} /* ---------- alerte de perte (duels) ---------- */ .alerte-perte{max-width:460px;margin:10px auto;padding:10px 14px;border-radius:12px; background:rgba(255,61,139,.14);border:1.5px solid rgba(255,61,139,.7); color:var(--texte);font-size:13.5px;line-height:1.4;text-align:center} .alerte-perte b{display:block;color:var(--SR);font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px} .hero .alerte-perte{margin:8px auto 0} /* ---------- bouton Installer + tuto ---------- */ .installer{flex:none;margin-left:10px;padding:8px 11px;border-radius:999px;border:0; background:linear-gradient(135deg,#ff3d8b,#ff8a1f);color:#fff;font-family:inherit;font-weight:800;font-size:12.5px;line-height:1;white-space:nowrap;cursor:pointer} .installer[hidden]{display:none} .installer:not([hidden])+.compte{margin-left:auto} .marque-ico{display:none} @media (max-width:420px){ .installer{margin-left:8px;padding:8px 9px;font-size:12px} body.avec-installer .marque img:first-child{display:none} body.avec-installer .marque-ico{display:block} } .inst-tuto{align-items:center;text-align:center} .it-logo{border-radius:16px;margin:2px auto 4px} .it-etapes{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%;text-align:left} .it-etapes li{display:flex;gap:10px;align-items:flex-start;background:var(--fond2);border:1px solid var(--trait); border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;color:#e4e4ee} .it-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,#ff3d8b,#ff8a1f);color:#fff;font-weight:900;font-size:12px} .it-ico{display:inline-block;padding:0 5px;border-radius:5px;background:#ffffff1a;font-weight:700} .inst-tuto .cta{margin-top:6px} .it-etapes li::before{display:none} .regles-fiche .it-etapes li{padding-left:12px} /* --- Accueil : contenu de fond (SEO + confiance), ajouté le 28/09/2026 -------------- Volontairement sobre : il ne doit pas concurrencer le hero ni le bouton « Commencer ». Il vit SOUS les tuiles, donc il ne repousse rien au-dessus de la ligne de flottaison. */ .acc-contenu{align-self:stretch;max-width:460px;width:100%;margin:22px auto 0; padding-top:20px;border-top:1px solid rgba(255,255,255,.08);text-align:left} .acc-chiffres{font-size:13.5px;line-height:1.55;color:#b9b4c8;margin-bottom:4px} .acc-chiffres b{color:#fff;font-weight:800} .acc-h2{font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase; color:#8f88a6;margin:22px 0 10px} .acc-p{font-size:13.5px;line-height:1.55;color:#b9b4c8;margin-bottom:8px} .acc-p.mini{font-size:12px;color:#8f88a6} .acc-etapes{display:flex;flex-direction:column;gap:12px} .acc-etapes>div{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07); border-radius:12px;padding:12px 14px} .acc-etapes b{display:block;font-size:13.5px;font-weight:800;color:#fff;margin-bottom:4px} .acc-etapes p{font-size:12.8px;line-height:1.5;color:#a9a3ba} .acc-tab{width:100%;border-collapse:collapse;font-size:12.8px;margin:2px 0 8px} .acc-tab th{text-align:left;font-weight:800;color:#8f88a6;font-size:11.5px; text-transform:uppercase;letter-spacing:.4px;padding:0 0 7px;border-bottom:1px solid rgba(255,255,255,.1)} .acc-tab td{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#b9b4c8} .acc-tab tr td:first-child{color:#fff;font-weight:700} .acc-tab tr td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums} .acc-lien{color:var(--SR,#ff8ad0);font-weight:700;text-decoration:none;font-size:13.5px} .acc-lien:hover{text-decoration:underline} /* ======== PAQUETS — refonte du 28/09/2026 ========================================== Trois demandes : paquet plus grand, bouton colle dessous, reserve qui ne mange plus la moitie de l'ecran. L'ancien bloc .stock faisait ~72 px de haut (encadre + jauge 6 px + deux lignes) ; .stock2 en fait ~30 et ne perd aucune information. */ .ecran-paquets{gap:6px} .ecran-paquets .ecran-bas{gap:7px} /* Le bouton doit toucher le paquet : c'est le geste attendu juste apres l'avoir regarde. */ .cta-paquet{width:100%;max-width:340px;margin:0} /* Reserve sur une seule ligne + jauge fine, sans cadre. */ .stock2{width:100%;max-width:340px} .stock2-l{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--gris); line-height:1.2} .stock2-l b{font-size:15px;font-weight:900;color:var(--texte);font-variant-numeric:tabular-nums} .stock2-d{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px} .jauge2{height:3px;border-radius:99px;background:#1d1d29;overflow:hidden;margin-top:5px} .jauge2 i{display:block;height:100%;width:0;border-radius:99px; background:linear-gradient(92deg,var(--SR),var(--UR));transition:width .9s linear} /* Invite au clic, posee SUR le bas du paquet. L'image etait deja cliquable depuis le depart, mais rien ne le disait : personne ne pouvait le deviner. */ /* Dans le FLUX, juste apres l'image, puis remonte par une marge negative : c'est la seule facon d'etre sur le paquet sans jamais dependre de sa hauteur calculee. Les tentatives par enveloppe + aspect-ratio faisaient disparaitre le paquet sur les ecrans courts (le max-height en % ne se resolvait plus). */ .booster-clic{position:relative;z-index:3;margin-top:-44px; display:inline-flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none; font-size:12.5px;font-weight:800;color:#fff;padding:7px 13px;border-radius:99px; background:rgba(18,14,26,.82);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 18px rgba(255,92,150,.35); animation:bc-pulse 1.9s ease-in-out infinite} .booster-clic .bc-main{font-size:14px;animation:bc-tape 1.9s ease-in-out infinite} .booster-clic[hidden]{display:none} @keyframes bc-pulse{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}} @keyframes bc-tape{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} /* Ecrans courts : on rend de la hauteur au paquet en resserrant le bas. */ @media (max-height:700px){ .booster{max-width:min(52vw,190px)} .ecran-paquets .ecran-bas{gap:5px} .ecran-paquets .sous{font-size:12px} } /* ======== PAQUETS — deux paquets cote a cote (28/09/2026, 2e refonte) ================ Regle de Jihan : AUCUN texte sur deux lignes. Tout ce qui est ecrit ici est en nowrap, et les phrases ont ete raccourcies pour tenir en 320 px. Le temps de recharge revient DANS la barre de progression. Le drapeau est un SVG : l'emoji 🇫🇷 s'affiche « FR » sur Windows et certains Android. */ .drapeau{width:1.25em;height:.84em;border-radius:2px;vertical-align:-.08em;margin-right:.35em; box-shadow:0 0 0 1px rgba(255,255,255,.25);display:inline-block;flex:none} .puce .drapeau{margin-right:.3em} .globe{margin-right:.3em} #vue-paquets p,#vue-paquets button,#vue-paquets span{white-space:nowrap} /* Le groupe (paquets + reserve) est centre verticalement. .duo prend la hauteur exacte d'un paquet cale en largeur (rapport 869/482 = 1,803) plus ses legendes (116 px), et RETRECIT (min-height:0) quand l'ecran est trop court. */ .ecran-paquets{gap:10px;justify-content:center} .duo{flex:0 1 auto;height:calc((min(100vw,440px) - 18px) / 2 * 1.803 + 116px);min-height:0;width:100%;max-width:440px;display:grid; grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:10px;padding:0 4px} /* container-type:size : la hauteur du paquet se calcule sur la colonne (100cqh) moins la place du nom, du compteur et du bouton. Le paquet reste ainsi colle a son bouton et le groupe est centre, au lieu de laisser un trou au-dessus sur les grands ecrans. */ .duo-col{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center; justify-content:flex-end;gap:3px;container-type:size} .duo .booster-zone{flex:0 1 auto;min-height:0;padding:4px 0 0} .duo .booster{max-width:100%;max-height:calc(100cqh - 112px)} .duo .booster-lueur{width:120%;height:80%} .duo .booster-clic{margin-top:-38px;font-size:12px;padding:6px 11px} .duo-nom{margin:4px 0 0;font-size:15px;font-weight:900;color:var(--texte);display:flex;align-items:center} .duo-libres{margin:0;font-size:11.5px;color:var(--gris);font-variant-numeric:tabular-nums;min-height:1.3em} .duo-libres b{color:var(--texte)} .duo .cta-paquet{width:100%;max-width:none;margin:5px 0 0;padding:11px 6px;font-size:15px} .duo .cta-paquet[data-scene="inter"]{background:linear-gradient(92deg,#3d8bff,#7a5cff); box-shadow:0 8px 26px rgba(61,139,255,.25)} .ecran-paquets .ecran-bas{gap:5px;max-width:440px;padding:0 4px} .stock3{width:100%} .stock3-l{margin:0 0 4px;font-size:12.5px;color:var(--gris);text-align:center} .stock3-l b{font-size:15px;font-weight:900;color:var(--texte);font-variant-numeric:tabular-nums} .jauge3{position:relative;height:22px;border-radius:99px;background:#1d1d29;overflow:hidden; border:1px solid var(--trait)} .jauge3 i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px; background:linear-gradient(92deg,var(--SR),var(--UR));transition:width .9s linear} .jauge3 span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,.8)} .ecran-paquets .ligne{margin:0;font-size:12px;color:var(--gris);text-align:center} .ecran-paquets .ligne b{color:var(--texte)} .ecran-paquets .ligne.alerte{color:#ffb37a;font-weight:700} .ecran-paquets .ligne:empty{display:none} .ecran-paquets .liens-bas{margin-top:4px} @media (max-height:700px){ .duo-nom{font-size:14px;margin-top:2px} .duo .cta-paquet{padding:9px 6px;font-size:14px} .jauge3{height:20px} }