/* ============================================================ LYSORIA — GTA RP FiveM · Feuille de style ============================================================ */ :root{ --bg-900:#04060e; --bg-850:#060a16; --bg-800:#080d1e; --bg-700:#0c1226; --bg-card:#0b1122; --panel:rgba(16,26,52,.55); --line:rgba(120,160,255,.12); --line-strong:rgba(120,160,255,.24); --blue:#4f8cff; --blue-bright:#79b0ff; --blue-deep:#2f6bff; --cyan:#8fd7ff; --ice:#eef4ff; --text:#c4cfe6; --muted:#828daa; --muted-2:#616c88; --radius:18px; --radius-lg:26px; --maxw:1180px; --shadow-glow:0 0 60px -12px rgba(79,140,255,.55); --font-head:'Sora',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); background:var(--bg-900); color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body::before{ /* base radial ambience — symétrique gauche/droite */ content:"";position:fixed;inset:0;z-index:-3; background: radial-gradient(1200px 760px at 50% -14%, rgba(47,107,255,.18), transparent 62%), linear-gradient(180deg,#05080f 0%,#05080f 45%,#04060c 100%); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.08;color:var(--ice);letter-spacing:-.02em} ::selection{background:rgba(79,140,255,.35);color:#fff} /* ------- grain + cursor glow ------- */ .grain{ position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ------- buttons ------- */ /* ============================================================ BOUTONS — ronds, pleins et nets (zéro glow, remplissage opaque) ============================================================ */ .btn{ --pad:11px 22px; display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:var(--pad);border-radius:999px; font-family:var(--font-head);font-weight:600;font-size:.9rem;letter-spacing:.015em; cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden;isolation:isolate; transition:transform .2s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,color .2s; white-space:nowrap; } .btn--lg{--pad:15px 32px;font-size:.98rem} .btn svg{transition:transform .25s ease;position:relative;z-index:2} .btn:hover svg{transform:translateX(2px)} .btn:active{transform:scale(.97)} /* ---- Primary : bleu profond, texte blanc, fine bordure claire + brillance ---- */ .btn--primary{ color:#fff; background:linear-gradient(180deg,#4d84ff,#2f61e6); border-color:rgba(150,185,255,.5); } .btn--primary::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.45) 50%,transparent 57%); background-size:230% 100%;background-position:180% 0; transition:background-position .7s cubic-bezier(.2,.7,.2,1); } .btn--primary:hover{transform:translateY(-2px);background:linear-gradient(180deg,#5c90ff,#3a6ef2);border-color:rgba(180,205,255,.7)} .btn--primary:hover::after{background-position:-70% 0} /* Boutons "Ajouter au panier" DANS les cartes : intégrés (tonal), se remplissent en bleu au survol → rendu naturel, pas "collé" */ .plan__btn.btn--primary, .coin-pack__btn.btn--primary{ color:#b9d0ff; background:linear-gradient(180deg,rgba(78,128,242,.16),rgba(48,90,200,.09)); border-color:rgba(120,158,255,.38); } .plan__btn.btn--primary:hover, .coin-pack__btn.btn--primary:hover{ color:#fff; background:linear-gradient(180deg,#4d84ff,#2f61e6); border-color:rgba(180,205,255,.7); } /* ---- Ghost : chip sombre net, bordure définie ---- */ .btn--ghost{color:var(--ice);background:rgba(17,25,46,.85);border-color:rgba(150,180,255,.34)} .btn--ghost:hover{transform:translateY(-2px);color:#fff;border-color:rgba(160,190,255,.7);background:rgba(26,38,68,.9)} /* ------- layout helpers ------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)} .section{padding:clamp(70px,10vw,130px) 0;position:relative} .eyebrow{ display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.78rem; letter-spacing:.28em;text-transform:uppercase;color:var(--blue-bright); margin-bottom:18px; } .section__title{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:800} .section__title.center{text-align:center;margin-inline:auto} .section__head{max-width:720px;margin:0 auto 60px} .section__head.center,.section__title.center{margin-left:auto;margin-right:auto} .section__lead{color:var(--muted);font-size:1.05rem;margin-top:18px} .section__head .section__lead{text-align:center} .grad{ background:linear-gradient(120deg,var(--blue-bright) 10%,var(--cyan) 55%,#fff 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 24px rgba(121,176,255,.35)); } /* ------- brand / logo ------- */ .brand{display:inline-flex;align-items:center;gap:10px} .brand__mark{display:inline-flex;width:38px;height:38px} .brand__mark .logo-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(79,140,255,.5))} .brand__type{ font-family:var(--font-head);font-weight:800;font-size:1.15rem;letter-spacing:.22em; color:var(--ice); } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; transition:background .4s,border-color .4s,backdrop-filter .4s; border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(6,10,22,.72); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); } .nav__inner{ max-width:none;margin:0 auto;padding:14px clamp(24px,4vw,60px); display:flex;align-items:center;gap:24px; } .nav__panel{display:contents} .nav .brand{margin-right:auto} /* logo collé tout à gauche */ .nav__links{display:flex;gap:30px} .nav__links a{ font-size:.92rem;color:var(--text);font-weight:500;position:relative;padding:4px 0; transition:color .25s; } .nav__links a::after{ content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0; background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .3s;border-radius:2px; } .nav__links a:hover{color:var(--ice)} .nav__links a:hover::after{width:100%} .nav__cta{display:flex;gap:12px;align-items:center} .nav__burger{ display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px; } .nav__burger span{width:24px;height:2px;background:var(--ice);border-radius:2px;transition:.3s} .nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger.open span:nth-child(2){opacity:0} .nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;min-height:100svh; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;padding:104px 20px 60px;overflow:hidden; background:#050914; isolation:isolate; /* crée un contexte d'empilement : le canvas (z-index négatif) passe AU-DESSUS du fond */ } /* fond animé (grille en perspective + particules, dessiné en canvas) */ .hero__fx{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block} /* vignette : assombrit légèrement les bords pour un rendu cinéma (aucune lueur) */ .hero__vignette{ position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(135% 105% at 50% 44%,transparent 60%,rgba(4,7,16,.30) 85%,rgba(4,7,16,.68)); } /* fondu doux vers la section suivante */ .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg-900) 96%)} .hero__stars{position:absolute;inset:0;z-index:-2;width:100%;height:100%} .hero__glow{ position:absolute;top:38%;left:50%;transform:translate(-50%,-50%); width:min(900px,90vw);height:min(900px,90vw);z-index:-2;pointer-events:none; background:radial-gradient(circle,rgba(79,140,255,.16),rgba(47,107,255,.05) 40%,transparent 66%); filter:blur(20px); } /* aurore animée : blobs bleu/cyan qui dérivent lentement (vie ambiante) */ .hero__aurora{ position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden; -webkit-mask:radial-gradient(circle at 50% 42%,#000,transparent 78%); mask:radial-gradient(circle at 50% 42%,#000,transparent 78%); } .hero__aurora::before,.hero__aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);will-change:transform} .hero__aurora::before{width:46vw;height:46vw;left:16%;top:14%;background:radial-gradient(circle,rgba(79,140,255,.38),transparent 66%);animation:aur1 20s ease-in-out infinite} .hero__aurora::after{width:38vw;height:38vw;right:14%;top:30%;background:radial-gradient(circle,rgba(120,200,255,.28),transparent 66%);animation:aur2 26s ease-in-out infinite} @keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,7%) scale(1.14)}} @keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,-6%) scale(1.1)}} .hero__skyline{ position:absolute;bottom:0;left:0;right:0;height:44%;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent, rgba(40,80,170,.07) 55%, rgba(70,130,255,.11)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='300' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 300V150h40v-40h30v25h26v-60h34v40h28V90h30v70h40V70h44v90h30v-50h26v50h34V40h30v120h40v-70h30v70h34V110h40v50h30V60h44v100h30v-40h26v40h34V80h30v80h40v-30h30v30h40V120h34v40h30V90h44v70h30v-40h26v40h34V50h30v110h40v-60h30v60h34V100h40v60h30V70h44v90h30V300z'/%3E%3C/svg%3E") no-repeat bottom/100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='300' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 300V150h40v-40h30v25h26v-60h34v40h28V90h30v70h40V70h44v90h30v-50h26v50h34V40h30v120h40v-70h30v70h34V110h40v50h30V60h44v100h30v-40h26v40h34V80h30v80h40v-30h30v30h40V120h34v40h30V90h44v70h30v-40h26v40h34V50h30v110h40v-60h30v60h34V100h40v60h30V70h44v90h30V300z'/%3E%3C/svg%3E") no-repeat bottom/100% 100%; } .hero__grid{ position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(79,140,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(79,140,255,.05) 1px,transparent 1px); background-size:60px 60px; -webkit-mask:radial-gradient(circle at 50% 42%,#000,transparent 72%); mask:radial-gradient(circle at 50% 42%,#000,transparent 72%); } .hero__content{position:relative;z-index:2;max-width:860px;margin-block:auto;display:flex;flex-direction:column;align-items:center} .tag{ display:inline-flex;align-items:center;gap:9px; padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:500; color:var(--blue-bright);background:rgba(79,140,255,.08); border:1px solid var(--line-strong);backdrop-filter:blur(8px); letter-spacing:.02em; } .tag__dot{width:7px;height:7px;border-radius:50%;background:#57e08e;box-shadow:0 0 10px #57e08e;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}} /* logo agrandi, au-dessus du texte */ .hero__logo{width:clamp(260px,32vw,440px);height:clamp(260px,32vw,440px);margin:0 0 4px;position:relative;display:grid;place-items:center} .hero__logo::after{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,rgba(79,140,255,.26),transparent 62%);filter:blur(26px);z-index:-1} .hero__logo .logo-img{width:100%;height:100%;object-fit:contain;animation:float 6.5s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(79,140,255,.38))} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}} .hero__title{font-size:clamp(2.6rem,7vw,5rem);font-weight:800;margin:8px 0 0;letter-spacing:-.03em} .hero__sub{color:var(--muted);font-size:clamp(1rem,1.6vw,1.18rem);max-width:600px;margin:22px auto 0} .hero__sub strong{color:var(--ice);font-weight:600} .hero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px} .hero__connect{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:8px} .connect__label{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)} .connect__ip{ display:inline-flex;align-items:center;gap:10px;position:relative; padding:11px 18px;border-radius:12px;cursor:pointer; background:rgba(10,16,34,.6);border:1px dashed var(--line-strong); color:var(--text);font-family:var(--font-body);transition:.25s; } .connect__ip:hover{border-color:var(--blue);color:var(--ice);box-shadow:0 0 24px -6px rgba(79,140,255,.5)} .connect__ip code{font-family:'Sora',monospace;font-size:.95rem;letter-spacing:.02em} .connect__copied{ position:absolute;top:-12px;right:-6px;font-size:.68rem;color:#57e08e;font-weight:600; opacity:0;transform:translateY(4px);transition:.25s;pointer-events:none; } .connect__ip.copied .connect__copied{opacity:1;transform:translateY(0)} /* hero stats */ .hero__stats{ position:relative;z-index:2;margin-top:64px; display:grid;grid-template-columns:repeat(4,1fr);gap:14px; width:min(880px,100%); padding:26px 20px;border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(14,22,46,.5),rgba(10,16,34,.3)); border:1px solid var(--line);backdrop-filter:blur(12px); box-shadow:0 30px 80px -40px rgba(0,0,0,.9); } .stat{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative} .stat+.stat::before{content:"";position:absolute;left:-7px;top:15%;height:70%;width:1px;background:var(--line)} .stat__num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--ice)} .stat__lbl{font-size:.76rem;color:var(--muted-2);letter-spacing:.04em;text-align:center} .hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid var(--line-strong);border-radius:14px;display:flex;justify-content:center} .hero__scroll span{width:4px;height:8px;background:var(--blue-bright);border-radius:2px;margin-top:7px;animation:scroll 1.8s infinite} @keyframes scroll{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(12px)}} /* ============================================================ MARQUEE ============================================================ */ .marquee{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(9,14,30,.6),rgba(6,10,22,.6)); overflow:hidden;padding:16px 0; } .marquee__track{display:flex;align-items:center;gap:28px;white-space:nowrap;width:max-content;animation:scrollx 34s linear infinite} .marquee__track span{font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:.14em;color:rgba(210,224,255,.55)} .marquee__track i{color:var(--blue);font-style:normal} @keyframes scrollx{to{transform:translateX(-50%)}} /* ============================================================ UNIVERS ============================================================ */ .univers__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center} .univers__copy p{color:var(--muted);margin-top:16px;font-size:1.03rem} .univers__copy p strong{color:var(--ice);font-weight:600} .univers__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .pill{ font-size:.82rem;padding:7px 14px;border-radius:999px;color:var(--blue-bright); background:rgba(79,140,255,.07);border:1px solid var(--line-strong); } .univers__cards{display:flex;flex-direction:column;gap:16px} .ucard{ padding:24px 26px;border-radius:var(--radius);position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(14,22,46,.5),rgba(9,14,30,.4)); border:1px solid var(--line);transition:transform .35s,border-color .35s,box-shadow .35s; } .ucard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--blue),var(--cyan));opacity:.7} .ucard:hover{transform:translateX(6px);border-color:var(--line-strong);box-shadow:0 20px 50px -30px rgba(79,140,255,.6)} .ucard__ic{font-size:1.6rem;margin-bottom:10px} .ucard h3{font-size:1.15rem;margin-bottom:6px} .ucard p{color:var(--muted);font-size:.95rem} /* ============================================================ EXPERIENCE / FEATURES ============================================================ */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feat{ position:relative;padding:32px 28px;border-radius:var(--radius);overflow:hidden; background:linear-gradient(180deg,rgba(12,19,40,.55),rgba(8,12,26,.4)); border:1px solid var(--line);transition:transform .35s,border-color .35s,box-shadow .35s; } .feat::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none; background:linear-gradient(135deg,rgba(121,176,255,.5),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s} .feat:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(79,140,255,.6)} .feat:hover::after{opacity:1} .feat__num{font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:transparent;-webkit-text-stroke:1.4px rgba(121,176,255,.35);margin-bottom:14px;line-height:1} .feat h3{font-size:1.22rem;margin-bottom:10px} .feat p{color:var(--muted);font-size:.96rem} /* ============================================================ VILLE / ETABLISSEMENTS ============================================================ */ .ville{padding-bottom:clamp(80px,11vw,140px)} .ville__marquee{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ville__track{display:flex;gap:20px;width:max-content;animation:scrollx 46s linear infinite} .ville__track:hover{animation-play-state:paused} .est{ position:relative;width:300px;flex:0 0 auto;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);background:var(--bg-800); transition:transform .35s,border-color .35s,box-shadow .35s; } .est img{width:100%;height:180px;object-fit:cover;transition:transform .5s} .est::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,6,14,.92));z-index:1} .est:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 24px 50px -30px rgba(79,140,255,.7)} .est:hover img{transform:scale(1.06)} .est figcaption{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--font-head);font-weight:700;color:var(--ice);font-size:1.08rem} .est figcaption span{display:block;font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--blue-bright);letter-spacing:.04em;margin-top:2px} /* ============================================================ REJOINDRE / STEPS ============================================================ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;margin-bottom:60px} .steps::before{content:"";position:absolute;top:34px;left:16%;right:16%;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 15%,var(--line-strong) 85%,transparent)} .step{position:relative;text-align:center;padding:0 12px} .step__ring{ width:68px;height:68px;border-radius:50%;margin:0 auto 20px;position:relative; display:grid;place-items:center;background:var(--bg-850); border:1px solid var(--line-strong); box-shadow:0 0 0 6px rgba(6,10,22,1),0 0 34px -8px rgba(79,140,255,.6); } .step__ring::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;background:conic-gradient(from 120deg,var(--blue),var(--cyan),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .step__ring span{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--blue-bright)} .step h3{font-size:1.2rem;margin-bottom:8px} .step p{color:var(--muted);font-size:.96rem;max-width:280px;margin:0 auto} .step__link{display:inline-block;margin-top:14px;color:var(--blue-bright);font-weight:600;font-size:.9rem;font-family:var(--font-head);transition:.25s} .step__link:hover{color:var(--cyan);letter-spacing:.02em} .join__panel{ position:relative;overflow:hidden;text-align:center; padding:clamp(40px,6vw,68px) 30px;border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(16,26,54,.7),rgba(9,14,30,.5)); border:1px solid var(--line-strong); } .join__glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:80%;height:120%;background:radial-gradient(circle,rgba(79,140,255,.28),transparent 60%);filter:blur(30px);pointer-events:none} .join__panel h3{font-size:clamp(1.6rem,3.4vw,2.4rem);position:relative} .join__panel p{color:var(--muted);margin:14px auto 30px;max-width:520px;position:relative} .join__buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative} /* ============================================================ FAQ ============================================================ */ .faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:start} .faq__intro{position:sticky;top:110px} .faq__intro p{color:var(--muted);margin:16px 0 26px} .faq__list{display:flex;flex-direction:column;gap:12px} .qa{ border:1px solid var(--line);border-radius:14px;overflow:hidden; background:linear-gradient(180deg,rgba(12,19,40,.5),rgba(8,12,26,.35)); transition:border-color .3s; } .qa[open]{border-color:var(--line-strong)} .qa summary{ cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-head); font-weight:600;font-size:1.05rem;color:var(--ice);display:flex;justify-content:space-between;align-items:center;gap:16px; } .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";font-size:1.5rem;color:var(--blue-bright);transition:transform .3s;font-weight:400;line-height:1} .qa[open] summary::after{transform:rotate(45deg)} .qa__body{padding:0 24px 22px;color:var(--muted);font-size:.98rem;animation:fade .4s ease} @keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ FOOTER ============================================================ */ .footer{position:relative;border-top:1px solid var(--line);padding:70px 0 34px;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(6,10,22,.6))} .footer__glow{position:absolute;bottom:-60%;left:50%;transform:translateX(-50%);width:120%;height:120%;background:radial-gradient(circle,rgba(47,107,255,.12),transparent 55%);pointer-events:none} .footer__grid{display:grid;grid-template-columns:1.4fr 2fr;gap:50px;position:relative} .footer__brand>.brand{margin-bottom:16px} .footer__brand p{color:var(--muted);max-width:320px;font-size:.96rem} .socials{display:flex;gap:12px;margin-top:20px} .social{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--muted); background:rgba(17,25,46,.85);border:1px solid rgba(150,180,255,.28); transition:transform .2s cubic-bezier(.2,.8,.2,1),color .25s,background .25s,border-color .25s; } .social:hover{color:#fff;transform:translateY(-3px);border-color:rgba(160,190,255,.6);background:rgba(26,38,68,.9)} .social[data-discord]:hover{border-color:#5865F2;background:rgba(88,101,242,.32);color:#fff} .social[data-tiktok]:hover{border-color:#25F4EE;background:rgba(37,244,238,.18);color:#fff} /* variantes navbar / hero */ .socials--nav{margin:0} .socials--hero{margin:0;gap:14px} .socials--hero .social{width:54px;height:54px;border-radius:16px} .footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .footer__col h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:600} .footer__col a{display:block;color:var(--text);font-size:.94rem;padding:5px 0;transition:.2s} .footer__col a:hover{color:var(--blue-bright);transform:translateX(3px)} .footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:50px;padding-top:24px;border-top:1px solid var(--line);position:relative} .footer__bottom p{font-size:.82rem;color:var(--muted-2)} /* ------- toast ------- */ .toast{ position:fixed;bottom:28px;left:50%;transform:translate(-50%,120%);z-index:80; padding:14px 24px;border-radius:12px;font-size:.92rem;font-weight:500;color:var(--ice); background:rgba(12,20,42,.95);border:1px solid var(--blue); box-shadow:0 18px 44px -18px rgba(79,140,255,.9);backdrop-filter:blur(10px); transition:transform .5s cubic-bezier(.2,.9,.2,1); } .toast.show{transform:translate(-50%,0)} /* ============================================================ BOUTIQUE ============================================================ */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:60px} .plan{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,rgba(12,19,40,.6),rgba(8,12,26,.5));border:1px solid var(--line);transition:transform .35s,border-color .35s,box-shadow .35s} .plan:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 30px 60px -34px rgba(79,140,255,.55)} .plan--featured{border-color:var(--blue);box-shadow:0 0 0 1px rgba(79,140,255,.6),0 30px 70px -30px rgba(79,140,255,.6)} .plan--featured:hover{box-shadow:0 0 0 1px var(--blue),0 40px 80px -30px rgba(79,140,255,.8)} /* ruban dans l'angle (corner ribbon) */ .plan__ribbon{ position:absolute; top:19px; right:-56px; z-index:4; width:188px; transform:rotate(45deg); transform-origin:center; background:linear-gradient(135deg,#83b0ff,#3f74ff); color:#06122b; text-align:center; font-family:var(--font-head); font-weight:800; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; padding:9px 0; } .plan__media{position:relative;aspect-ratio:16/10;background:radial-gradient(circle at 32% 22%,rgba(79,140,255,.18),transparent 60%),linear-gradient(180deg,#0a1024,#070b18);border-bottom:1px solid var(--line);overflow:hidden;display:grid;place-items:center} .plan__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .plan__vlabel{position:absolute;top:50%;right:12px;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.24em;color:rgba(150,180,255,.16);pointer-events:none} .plan--featured .plan__vlabel{color:rgba(121,176,255,.32)} .plan__soon{font-size:.74rem;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--line-strong);padding:8px 16px;border-radius:10px;background:rgba(8,12,26,.4)} .plan__body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:14px;flex:1} .plan__tier{font-family:var(--font-head);font-weight:700;font-size:1.24rem;color:var(--ice)} /* liste des avantages */ .plan__perks{list-style:none;display:flex;flex-direction:column;gap:11px;margin:2px 0 2px} .plan__perks li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted);line-height:1.25} .plan__perks li svg{flex:none;color:var(--blue-bright)} .plan--featured .plan__perks li{color:#c6d4ef} .plan--featured .plan__perks li svg{color:#8fd0ff} .plan__price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .plan__price b{font-family:var(--font-head);font-weight:800;font-size:1.9rem;color:var(--ice);letter-spacing:-.02em} .plan__price span{font-size:.82rem;color:var(--muted)} .plan__btn{width:100%;justify-content:center;margin-top:12px} .plus{color:var(--blue-bright)} /* ---- tableau comparatif ---- */ .compare{max-width:920px;margin:0 auto} .compare__scroll{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:rgba(8,12,26,.45);-webkit-overflow-scrolling:touch} .ctable{width:100%;min-width:660px;border-collapse:collapse;font-size:.92rem} .ctable th,.ctable td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)} .ctable thead th{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--ice);border-bottom:1px solid var(--line-strong)} .ctable__feat{text-align:left !important;color:var(--muted-2) !important;font-family:var(--font-head);font-weight:600;font-size:.82rem !important;letter-spacing:.1em;text-transform:uppercase} .tier--basic{background:linear-gradient(180deg,rgba(160,175,205,.13),transparent)} .tier--premium{background:linear-gradient(180deg,rgba(79,140,255,.30),rgba(79,140,255,.06));border-top:2px solid var(--blue-bright);border-left:1px solid rgba(120,160,255,.22);border-right:1px solid rgba(120,160,255,.22)} .tier--plus{background:linear-gradient(180deg,rgba(200,222,255,.16),transparent)} .ctable tbody th{text-align:left;font-family:var(--font-body);font-weight:500;color:var(--text);white-space:nowrap} .ctable tbody td{color:var(--muted)} /* zébrage discret pour la lisibilité */ .ctable tbody tr:not(.ctable__coins):nth-child(odd) th, .ctable tbody tr:not(.ctable__coins):nth-child(odd) td:not(.is-hl){background:rgba(255,255,255,.02)} /* colonne recommandée (Premium) surélevée */ .ctable td.is-hl{background:rgba(79,140,255,.11);color:var(--ice);font-weight:600;border-left:1px solid rgba(120,160,255,.18);border-right:1px solid rgba(120,160,255,.18)} .ctable tbody tr:hover th,.ctable tbody tr:hover td{background:rgba(120,160,255,.06)} .ctable tbody tr:hover td.is-hl{background:rgba(79,140,255,.16)} .ctable td small{display:block;font-size:.7rem;color:var(--muted-2);margin-top:3px;letter-spacing:.02em} .ctable__coins th,.ctable__coins td{border-bottom:0;font-family:var(--font-head);font-weight:800;font-size:1.2rem;padding-top:18px;padding-bottom:18px;background:rgba(10,16,34,.55)} .ctable__coins td.is-hl{background:rgba(79,140,255,.12)} .vcoin{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:linear-gradient(145deg,#ffe08a,#f2b23c);color:#5a3d00;font-size:.6rem;font-weight:800;font-family:var(--font-head);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45),0 0 10px -2px rgba(245,180,60,.6);vertical-align:middle;margin-right:2px} .vcoin::before{content:"L"} .compare__note{text-align:center;color:var(--muted-2);font-size:.82rem;margin-top:16px;max-width:640px;margin-inline:auto} @media (max-width:860px){ .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto} } /* ---- packs LysoCoins ---- */ .shop__subhead{margin-top:90px} .coins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .coin-pack{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,19,40,.6),rgba(8,12,26,.5));transition:transform .35s,border-color .35s,box-shadow .35s} .coin-pack:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 26px 54px -32px rgba(79,140,255,.6)} .coin-pack--best{border-color:rgba(143,215,255,.5);box-shadow:0 0 0 1px rgba(143,215,255,.35)} .coin-pack--best:hover{box-shadow:0 0 0 1px rgba(143,215,255,.6),0 30px 60px -30px rgba(143,215,255,.5)} .coin-pack__visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:linear-gradient(180deg,#0b1226,#080d1c);border-bottom:1px solid var(--line);overflow:hidden} .coin-pack__visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,var(--glow,#4f8cff),transparent 62%);opacity:.3} .coin-pack__visual::after{content:"L";position:absolute;bottom:-18px;right:-6px;font-family:var(--font-head);font-weight:800;font-size:7rem;color:#fff;opacity:.05;line-height:1;z-index:1} .coin-pack__amount{position:relative;z-index:2;font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,4vw,2.4rem);color:#fff;text-shadow:0 6px 26px rgba(11,18,38,.7);letter-spacing:-.02em} .coin-pack__unit{position:absolute;bottom:14px;left:0;right:0;z-index:2;text-align:center;font-family:var(--font-head);font-weight:700;letter-spacing:.16em;font-size:.68rem;color:rgba(224,235,255,.72)} .coin-pack__unit .vcoin{width:16px;height:16px;font-size:.54rem} .coin-pack__bonus{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;background:linear-gradient(135deg,#ffe08a,#f2b23c);color:#5a3d00;font-family:var(--font-head);font-weight:800;font-size:.64rem;letter-spacing:.02em;padding:4px 11px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(245,180,60,.9);white-space:nowrap} .coin-pack__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1} .coin-pack__name{font-family:var(--font-head);font-weight:700;color:var(--ice);font-size:.98rem} .coin-pack__price{color:var(--muted);font-size:.9rem;margin-top:-2px} .coin-pack__btn{width:100%;justify-content:center;margin-top:auto;--pad:11px 14px;font-size:.88rem} @media (max-width:900px){.coins{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.coins{grid-template-columns:repeat(2,1fr)}} /* ============================================================ REVEAL ANIMATION ============================================================ */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms);will-change:opacity,transform} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hero__logo .logo-img,.hero__aurora::before,.hero__aurora::after,.hero__slide.is-active{animation:none} .hero__slide{transform:none} *{scroll-behavior:auto} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:960px){ .univers__grid{grid-template-columns:1fr} .features{grid-template-columns:repeat(2,1fr)} .faq__grid{grid-template-columns:1fr} .faq__intro{position:static} .footer__grid{grid-template-columns:1fr} } @media (max-width:820px){ .nav__burger{display:flex;margin-left:auto} .nav__panel{ position:fixed;top:0;right:0;height:100dvh;width:min(82vw,340px); display:flex;flex-direction:column;justify-content:center;align-items:flex-start; gap:8px;padding:96px 40px 40px; background:rgba(6,10,22,.97);backdrop-filter:blur(22px); border-left:1px solid var(--line); transform:translateX(110%);transition:transform .42s cubic-bezier(.2,.8,.2,1); z-index:48; } .nav__links{flex-direction:column;align-items:flex-start;gap:4px;margin:0;width:100%} .nav__links a{font-size:1.25rem;padding:12px 0} .nav__cta{flex-direction:column;align-items:stretch;width:100%;gap:12px;margin-top:24px} .nav__cta .btn{width:100%;justify-content:center} body.menu-open .nav__panel{transform:translateX(0)} body.menu-open{overflow:hidden} } @media (max-width:640px){ .features{grid-template-columns:1fr} .steps{grid-template-columns:1fr;gap:36px} .steps::before{display:none} .hero__stats{grid-template-columns:repeat(2,1fr);gap:24px 14px} .stat:nth-child(3)::before,.stat:nth-child(2)::before{display:none} .footer__cols{grid-template-columns:1fr 1fr} .footer__bottom{flex-direction:column;gap:8px} .brand__type{font-size:1rem} } /* ============================================================ PAGE RÈGLEMENT (et pages secondaires) ============================================================ */ .nav__links a.is-active{color:var(--ice)} .nav__links a.is-active::after{width:100%} .pagehead{position:relative;overflow:hidden;padding:120px 0 44px;border-bottom:1px solid var(--line);text-align:center} .pagehead__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(79,140,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(79,140,255,.05) 1px,transparent 1px); background-size:60px 60px; -webkit-mask:radial-gradient(circle at 50% 0%,#000,transparent 72%);mask:radial-gradient(circle at 50% 0%,#000,transparent 72%)} .pagehead__glow{position:absolute;top:-34%;left:50%;transform:translateX(-50%);width:min(760px,90vw);height:600px;background:radial-gradient(circle,rgba(79,140,255,.2),transparent 62%);filter:blur(20px);pointer-events:none} .pagehead__inner{position:relative;z-index:2;max-width:760px;margin:0 auto} .pagehead__title{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;margin:8px 0 0} .pagehead__sub{color:var(--muted);margin:18px auto 0;max-width:600px} .pagehead__meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px} /* label + badges de confiance de l'en-tête boutique */ .pagehead__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:6px} .pagehead__eyebrow::before,.pagehead__eyebrow::after{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(120,160,255,.65))} .pagehead__eyebrow::after{background:linear-gradient(90deg,rgba(120,160,255,.65),transparent)} .pagehead__badges{list-style:none;display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;margin:26px auto 0} .pagehead__badges li{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:.82rem;white-space:nowrap;color:var(--text);background:rgba(17,25,46,.7);border:1px solid rgba(120,160,255,.2)} .pagehead__badges li svg{flex:none;color:var(--blue-bright)} @media (max-width:560px){.pagehead__badges{flex-wrap:wrap}} .backlink{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;font-family:var(--font-head);font-weight:500;margin-bottom:22px;transition:.2s} .backlink:hover{color:var(--blue-bright);gap:11px} .chip{font-size:.78rem;padding:7px 14px;border-radius:999px;color:var(--blue-bright);background:rgba(79,140,255,.08);border:1px solid var(--line-strong)} .chip--soft{color:var(--muted-2);background:rgba(120,160,255,.04);border-color:var(--line)} .rules-section{padding-top:clamp(50px,7vw,80px)} .rules{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:20px} /* ============================================================ BLOCS DE RÈGLES — DA épurée (éditorial : titre + filets, aéré) ============================================================ */ .rulecat{border:none;border-radius:0;overflow:visible;background:transparent;transition:none} .rulecat:hover{border-color:transparent} .rpanel .rulecat{border-left:none;margin-bottom:38px} .rpanel .rulecat:last-child{margin-bottom:0} /* en-tête : petit numéro coloré + titre, soulignés d'un filet */ .rulecat__head{display:flex;align-items:baseline;gap:11px;padding:0 2px 13px;background:transparent;border-bottom:1px solid var(--line)} .rulecat__num{font-family:var(--font-head);font-weight:800;font-size:.9rem;color:var(--rc,var(--blue-bright));background:none;border:none;min-width:auto;height:auto;padding:0;display:inline;letter-spacing:.04em;box-shadow:none;opacity:.85} .rulecat__head h2{font-size:1.16rem;letter-spacing:-.01em} /* paragraphe d'intro éventuel */ .rulelead{color:var(--muted);font-size:.95rem;line-height:1.62;margin:16px 2px 0;max-width:840px} /* règles : lignes aérées séparées par de fins filets, sans puce ni ligne */ .rulelist{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px} .rulelist li{position:relative;padding:13px 16px;color:var(--text);font-size:.97rem;line-height:1.55;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);border-left:2px solid color-mix(in srgb,var(--rc,#4f8cff) 55%,transparent);border-radius:10px;transition:background .2s,border-color .2s,color .2s} .rulelist li:hover{background:rgba(120,160,255,.07);border-left-color:var(--rc,#4f8cff);color:#fff} .rulelist li b{color:var(--ice);font-weight:600} .rulelist li b{color:var(--ice);font-weight:600} .rules__cta{position:relative;overflow:hidden;text-align:center;padding:clamp(26px,3.5vw,40px) 30px;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(16,26,54,.6),rgba(9,14,30,.5));border:1px solid var(--line-strong);margin-top:14px} .rules__cta h3{font-size:clamp(1.3rem,2.4vw,1.7rem);position:relative} .rules__cta p{color:var(--muted);margin:10px auto 22px;max-width:460px;position:relative;font-size:.95rem} /* ============================================================ RÈGLEMENT — catégories (Général / Illégal / Public / Légal) ============================================================ */ .rcat--general,.rtab--general,.rpanel--general{--rc:#79b0ff;--rc2:#4f8cff} .rcat--illegal,.rtab--illegal,.rpanel--illegal{--rc:#d8b4fe;--rc2:#a855f7} .rcat--public,.rtab--public,.rpanel--public{--rc:#7dd3fc;--rc2:#0ea5e9} .rcat--legal,.rtab--legal,.rpanel--legal{--rc:#fcd34d;--rc2:#f59e0b} /* cartes catégories */ .rcats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:40px} .rcat{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;min-height:190px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;color:var(--ice);transition:transform .35s,box-shadow .35s,border-color .35s;font-family:var(--font-body)} .rcat__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(160deg,var(--rc2),rgba(8,12,26,.78) 78%)} .rcat__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .rcat::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,14,.05) 0%,rgba(4,6,14,.35) 45%,rgba(4,6,14,.92) 100%)} /* barre d'accent couleur en bas (identité de catégorie au repos) */ .rcat::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:linear-gradient(90deg,var(--rc),var(--rc2));transform:scaleX(.4);transform-origin:left;transition:transform .35s ease} .rcat:hover::before{transform:scaleX(1)} .rcat:hover{transform:translateY(-6px);border-color:var(--rc);box-shadow:0 26px 54px -30px var(--rc2)} .rcat:hover .rcat__media img{transform:scale(1.06)} .rcat__ic{position:absolute;top:16px;left:18px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#fff;background:rgba(6,10,22,.42);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)} .rcat__ic .rico{width:22px;height:22px} .rcat__body{position:relative;z-index:2} .rcat__body h3{font-size:1.3rem;margin-bottom:3px;font-family:var(--font-head)} .rcat__body>span{display:block;color:rgba(255,255,255,.82);font-size:.85rem} .rcat__go{margin-top:12px;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:#fff} /* navbar perso du règlement — pastille compacte, dans le flux (pas de 2e navbar) */ .rnav{text-align:center;margin-bottom:34px} .rnav__inner{position:relative;display:inline-flex;gap:4px;max-width:100%;overflow-x:auto;padding:6px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(9,14,30,.72);backdrop-filter:blur(10px);box-shadow:0 14px 34px -24px rgba(0,0,0,.85)} /* pastille active qui glisse d'un onglet à l'autre */ .navpill{position:absolute;left:0;top:0;z-index:0;pointer-events:none;background:linear-gradient(135deg,var(--rc,#4f8cff),var(--rc2,#2f6bff));transition:transform .4s cubic-bezier(.16,.84,.28,1),width .4s cubic-bezier(.16,.84,.28,1),height .35s ease} .rnav__inner::-webkit-scrollbar{height:0} .rtab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:color .3s} .rtab .rico{width:15px;height:15px;flex:0 0 auto} .rtab:hover{color:var(--ice)} .rtab.is-active{color:#04060e;background:transparent} /* panels */ .rpanels{max-width:880px;margin:0 auto;position:relative} /* transition par CSS (fiable) — état visible garanti même sans animation */ .rpanel{display:none;transition:opacity .4s ease, transform .45s cubic-bezier(.16,.84,.28,1)} .rpanel.is-active{display:block} /* visible par défaut (opacity 1) */ .rpanel.is-enter{opacity:0;transform:translateY(24px)} /* état de départ temporaire, retiré en JS */ .rpanel.is-exit{display:block;position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;opacity:0;transform:translateY(-18px)} .rpanel__banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:var(--radius-lg);margin-bottom:22px;border:1px solid var(--line-strong);background:linear-gradient(100deg,var(--rc2),rgba(10,16,34,.82) 82%) center/cover no-repeat;background-color:#0a1226} /* image de fond par catégorie (dégradé coloré par-dessus pour la lisibilité) */ .rpanel--general .rpanel__banner{background-image:linear-gradient(100deg,var(--rc2) 0%,color-mix(in srgb,var(--rc2) 42%,transparent) 46%,rgba(6,10,20,.55) 100%),url("../img/reglement/7.webp")} .rpanel--illegal .rpanel__banner{background-image:linear-gradient(100deg,var(--rc2) 0%,color-mix(in srgb,var(--rc2) 42%,transparent) 46%,rgba(6,10,20,.55) 100%),url("../img/reglement/2.webp")} .rpanel--public .rpanel__banner{background-image:linear-gradient(100deg,var(--rc2) 0%,color-mix(in srgb,var(--rc2) 42%,transparent) 46%,rgba(6,10,20,.55) 100%),url("../img/reglement/3.webp")} .rpanel--legal .rpanel__banner{background-image:linear-gradient(100deg,var(--rc2) 0%,color-mix(in srgb,var(--rc2) 42%,transparent) 46%,rgba(6,10,20,.55) 100%),url("../img/reglement/5.webp")} .rpanel__banner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% -20%,rgba(255,255,255,.22),transparent 50%);pointer-events:none} .rpanel__ic{position:relative;z-index:2;color:#fff;display:grid;place-items:center} .rpanel__ic .rico{width:30px;height:30px} .rico{display:block} .rpanel__banner h2{font-size:1.4rem;color:#fff;position:relative;z-index:2} .rpanel__banner p{color:rgba(255,255,255,.85);font-size:.92rem;margin-top:2px;position:relative;z-index:2} /* espacement entre les blocs de règles */ .rpanel .rulecat{margin-bottom:22px} .rpanel .rulecat:last-child{margin-bottom:0} /* accents catégorie sur les règles */ .rpanel .rulecat__num{background:none;box-shadow:none;color:var(--rc)} .rpanel .rulelist li::before{color:var(--rc)} @media (max-width:900px){.rcats{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.rcats{grid-template-columns:1fr}} /* ---- sous-onglets Illégal + lead ---- */ .rulelead{padding:2px 26px 8px;color:var(--muted);font-size:.96rem} .rulelead b{color:var(--ice);font-weight:600} .subtabs{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 26px;padding:6px;border:1px solid var(--line);border-radius:16px;background:rgba(9,14,30,.5)} .subtab{position:relative;z-index:1;padding:8px 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-family:var(--font-head);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:color .3s} .subtab:hover{color:var(--ice);background:rgba(255,255,255,.05)} .subtab.is-active{color:#04060e;background:transparent} .subpanel{display:none;transition:opacity .35s ease, transform .4s cubic-bezier(.16,.84,.28,1)} .subpanel.is-enter{opacity:0;transform:translateY(16px)} .subpanel.is-active{display:block} /* ============================================================ PASSE POLISH PREMIUM (redesign-skill + emil-design-eng) ============================================================ */ :root{ --ease-out:cubic-bezier(.22,1,.36,1); } /* chiffres tabulaires pour tout ce qui est numérique */ .plan__price b, .coin-pack__amount, .rulecat__num, .connect__ip code, .ctable td, .ctable th, .footer__bottom { font-variant-numeric:tabular-nums; } /* titres équilibrés, paragraphes sans mots orphelins */ h1, h2, h3, .section__title, .hero__title, .pagehead__title { text-wrap:balance; } p, .hero__sub, .section__lead, .rulelist li { text-wrap:pretty; } /* la navbar fixe ne masque plus les titres au clic d'ancre */ section[id]{ scroll-margin-top:88px; } /* focus clavier accessible (invisible à la souris) */ a:focus-visible, button:focus-visible, summary:focus-visible, .rtab:focus-visible, .subtab:focus-visible, .rcat:focus-visible, .connect__ip:focus-visible, .social:focus-visible, .qa summary:focus-visible { outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:10px; } :focus:not(:focus-visible){ outline:none; } /* retour tactile à l'appui (feeling physique) */ .btn:active{ transform:translateY(0) scale(.975); } .social:active, .rtab:active, .subtab:active{ transform:scale(.94); } .rcat:active, .plan:active, .feat:active, .ucard:active, .coin-pack:active, .est:active, .rulecat:active{ transform:translateY(-2px) scale(.995); } .connect__ip:active, .step__link:active{ transform:scale(.98); } /* courbes ease-out cohérentes sur les surfaces animées */ .feat, .ucard, .plan, .coin-pack, .rcat, .social, .btn, .step__ring, .est, .rulecat{ transition-timing-function:var(--ease-out); } /* glassmorphism affiné : liseré interne = réfraction de bord */ .nav.scrolled{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .rnav__inner, .subtabs, .connect__ip, .hero__stats, .rpanel__banner, .join__panel, .rules__cta{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } /* liens réseaux : micro-lift plus vif au survol (emil : hover rapide) */ .social{ transition:transform .18s var(--ease-out), color .25s, background .25s, border-color .25s, box-shadow .25s; } /* spotlight au curseur sur les cartes (redesign-skill : spotlight cards) */ @media (pointer:fine){ .plan::before, .coin-pack::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none; opacity:0; transition:opacity .35s var(--ease-out); background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(121,176,255,.13), transparent 60%); } .plan:hover::before, .coin-pack:hover::before{ opacity:1; } } /* ============================================================ SUPPRESSION DE TOUS LES HALOS / LUEURS (demande user) ============================================================ */ /* lueurs radiales décoratives des sections */ .join__glow, .footer__glow, .pagehead__glow, .hero__glow, .hero__aurora{ display:none !important; } /* halo derrière le logo + ombres-lueur du logo */ .hero__logo::after{ display:none !important; } .hero__logo .logo-img, .brand__mark .logo-img{ filter:none !important; } /* glow du mot dégradé "Lysoria" */ .grad{ filter:none !important; } /* pastille "populaire" et panneaux : on garde la couleur mais on coupe la lueur diffuse */ .plan--featured{ box-shadow:0 0 0 1px rgba(79,140,255,.55) !important; } /* ============================================================ FONDS CINÉMATIQUES (captures GTA du serveur) ============================================================ */ /* hero : photo nuit assombrie derrière le contenu */ /* diaporama du hero : crossfade + léger zoom (Ken Burns) */ .hero__photos{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none;} .hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.05); transition:opacity 1.8s ease; will-change:opacity,transform; } .hero__slide.is-active{opacity:1; animation:kenburns 9s ease-out forwards;} @keyframes kenburns{from{transform:scale(1.05)} to{transform:scale(1.16)}} /* voile sombre constant par-dessus le diaporama (lisibilité) */ .hero__scrim{ position:absolute; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(180deg, rgba(4,6,14,.72), rgba(4,6,14,.5) 46%, rgba(4,6,14,.92)); } /* section L'univers : ambiance à droite, texte protégé à gauche */ .univers{ position:relative; overflow:hidden; } .univers__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.42; background: linear-gradient(90deg, var(--bg-900) 24%, rgba(4,6,14,.4) 100%), url(../img/reglement/8.webp) center right/cover no-repeat; } .univers__grid{ position:relative; z-index:1; } /* en-tête de la page Règlement */ .pagehead__photo{ position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(180deg, rgba(4,6,14,.7), rgba(4,6,14,.92)), url(../img/reglement/1.webp) center/cover no-repeat; } .pagehead__inner{ position:relative; z-index:2; } /* bannière catégorie Illégal : photo sous le dégradé violet */ .rpanel--illegal .rpanel__banner{ background-image: linear-gradient(120deg, rgba(168,85,247,.82), rgba(10,16,34,.9) 82%), url(../img/reglement/6.webp); background-size:cover; background-position:center; } /* ============================================================ ZÉRO GLOW (demande user) — aucune lueur, y compris au survol ============================================================ */ .plan::before, .coin-pack::before{ display:none !important; } /* spotlight curseur */ .coin-pack__visual::before{ opacity:0 !important; } /* lueur derrière les LysoCoins */ .rpanel__banner::after{ display:none !important; } /* reflet lumineux des bannières */ *{ box-shadow:none !important; } /* toutes les ombres-lueur (survol inclus) */ /* ============================================================ PAGE LORE — "à venir" mystérieux ============================================================ */ .lore-page{ background:#04060c; } /* scanlines CRT subtiles */ .scanlines{ position:fixed; inset:0; z-index:59; pointer-events:none; opacity:.45; background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px); mix-blend-mode:multiply; } .lorehero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:130px 0 90px; isolation:isolate; background:#04060c; } /* fond animé (portail + particules, dessiné en canvas) */ .lorehero__fx{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; } .lorehero__vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(125% 100% at 50% 44%, transparent 44%, rgba(4,6,12,.72) 100%), linear-gradient(180deg, rgba(4,6,12,.25), rgba(4,6,12,.7)); } .lorehero__inner{ position:relative; z-index:2; max-width:780px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .lore__tag{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.02); } .lore__dot{ width:7px; height:7px; border-radius:50%; background:#ff5a5a; animation:loreBlink 1.6s steps(2,end) infinite; } @keyframes loreBlink{ 50%{opacity:.15} } .lore__title{ position:relative; font-family:var(--font-head); font-weight:800; font-size:clamp(4.5rem,20vw,12rem); line-height:.88; letter-spacing:-.05em; color:var(--ice); margin:22px 0 0; } .lore__title::before, .lore__title::after{ content:attr(data-text); position:absolute; inset:0; pointer-events:none; } .lore__title::before{ color:#39c9ff; clip-path:inset(0 0 56% 0); transform:translateX(-2px); opacity:.65; mix-blend-mode:screen; animation:glitchTop 4.2s infinite steps(2,end); } .lore__title::after{ color:#ff466b; clip-path:inset(56% 0 0 0); transform:translateX(2px); opacity:.65; mix-blend-mode:screen; animation:glitchBot 3.4s infinite steps(2,end); } @keyframes glitchTop{ 0%,90%,100%{transform:translateX(-2px)} 92%{transform:translate(5px,-2px)} 95%{transform:translate(-6px,1px)} 97%{transform:translate(3px,-1px)} } @keyframes glitchBot{ 0%,88%,100%{transform:translateX(2px)} 91%{transform:translate(-5px,2px)} 94%{transform:translate(6px,-1px)} 98%{transform:translate(-3px,1px)} } .lore__sub{ color:var(--text); font-size:clamp(1rem,1.6vw,1.2rem); max-width:560px; margin:26px auto 0; } .lore__decrypt{ font-family:var(--font-head); font-weight:600; letter-spacing:.14em; font-size:.9rem; color:#7fd3ff; margin-top:18px; min-height:1.3em; word-break:break-word; } .lore__redacted{ margin:36px auto 0; display:flex; flex-direction:column; gap:12px; width:100%; max-width:540px; } .redline{ display:flex; align-items:center; gap:16px; opacity:0; transform:translateY(12px); animation:redIn .7s cubic-bezier(.16,.84,.28,1) forwards; } .redline:nth-child(1){ animation-delay:.15s; --p:38% } .redline:nth-child(2){ animation-delay:.32s; --p:22% } .redline:nth-child(3){ animation-delay:.49s; --p:31% } @keyframes redIn{ to{ opacity:1; transform:translateY(0) } } .redline .rk{ font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; min-width:104px; text-align:right; } /* ---- barre de chargement (verrouillée à --p, reflet + statut) ---- */ .redline .rb{ position:relative; height:16px; flex:1; border-radius:999px; overflow:hidden; background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.16)); border:1px solid rgba(120,160,255,.2); } /* remplissage : charge de 0 à --p puis se bloque, avec un reflet qui balaie */ .redline .rb::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:var(--p,35%); z-index:1; border-radius:999px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45) 50%, transparent) -60px 0 / 60px 100% no-repeat, linear-gradient(90deg, #2f61e6, #79b0ff); animation:barLoad 2.4s cubic-bezier(.2,.85,.25,1) both, barShimmer 1.7s linear infinite 2.4s; } @keyframes barLoad{ from{ width:0 } to{ width:var(--p,35%) } } @keyframes barShimmer{ from{ background-position:-60px 0, 0 0 } to{ background-position:calc(100% + 60px) 0, 0 0 } } /* statut CLASSIFIÉ à droite, qui grésille */ .redline .rb::after{ content:"CLASSIFIÉ"; position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:2; font-family:var(--font-head); font-weight:800; font-size:.54rem; letter-spacing:.28em; text-indent:.28em; color:rgba(190,212,255,.62); animation:classifiedFlicker 4s steps(1,end) infinite; } @keyframes classifiedFlicker{ 0%,90%,100%{opacity:.62} 91%{opacity:.16} 93%{opacity:.7} 95%{opacity:.24} 97%{opacity:.55} } .lore__status{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:42px; flex-wrap:wrap; } .badge-soon{ font-family:var(--font-head); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; color:#04060e; background:linear-gradient(135deg,#e7edff,#9fb6e0); padding:11px 20px; border-radius:8px; } /* ============================================================ EFFET CRT (vieil écran cathodique) — page Lore ============================================================ */ .crt{ position:fixed; inset:0; z-index:58; pointer-events:none; } /* barre de balayage horizontale qui roule (rafraîchissement CRT) */ .crt::before{ content:""; position:absolute; left:0; right:0; height:150px; z-index:1; background:linear-gradient(180deg, transparent, rgba(150,205,255,.05) 45%, rgba(150,205,255,.10) 50%, rgba(150,205,255,.05) 55%, transparent); animation:crtRoll 7.5s linear infinite; } @keyframes crtRoll{ from{ transform:translateY(-170px) } to{ transform:translateY(102vh) } } /* courbure / vignette d'écran (aucune box-shadow) */ .crt::after{ content:""; position:absolute; inset:0; background:radial-gradient(128% 120% at 50% 50%, transparent 54%, rgba(2,4,10,.5) 100%); } /* ---- Tablette autour du contenu (le portail reste en fond) ---- */ .lore-tablet{ position:relative; z-index:2; width:min(680px,92vw); margin:0 auto; padding:16px; border-radius:40px; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 9%), /* reflet arête haute */ linear-gradient(158deg, #2d333f 0%, #191d27 44%, #0b0d14 100%); /* corps métallique */ border:1px solid rgba(0,0,0,.5); filter:drop-shadow(0 34px 60px rgba(0,0,0,.62)) drop-shadow(0 8px 16px rgba(0,0,0,.45)); } /* creux/arête interne autour de l'écran (effet dalle encastrée) */ .lore-tablet::before{ content:""; position:absolute; inset:16px; z-index:3; pointer-events:none; border-radius:26px; border:1px solid rgba(0,0,0,.55); box-shadow:none; } .lore-tablet::after{ content:""; position:absolute; inset:16px; z-index:3; pointer-events:none; border-radius:26px; border-top:1px solid rgba(255,255,255,.06); } /* l'écran de la tablette (allumé, rétroéclairé) */ .lore-screen.lorehero__inner{ position:relative; z-index:1; overflow:hidden; border-radius:24px; max-width:none; margin:0; padding:clamp(28px,4vw,46px) clamp(22px,3.5vw,40px) clamp(30px,4vw,44px); background:radial-gradient(115% 100% at 50% 32%, rgba(20,36,76,.96), rgba(8,14,28,.97) 70%, rgba(5,8,16,.98)); border:1px solid rgba(120,160,255,.14); } /* reflet de verre (diagonale) + fines scanlines = écran réel */ .lore-screen::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:24px; background: linear-gradient(122deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 15%, transparent 33%, transparent 67%, rgba(255,255,255,.03) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px); } .lore-screen::before{ content:""; position:absolute; left:0; right:0; top:0; height:80px; z-index:5; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(150,205,255,.08) 50%, transparent); animation:screenRoll 5s linear infinite; } @keyframes screenRoll{ from{transform:translateY(-90px)} to{transform:translateY(520px)} } /* les enfants au-dessus des scanlines */ .lore-screen > *{ position:relative; z-index:7; } /* on masque les overlays plein-page (remplacés par ceux de la tablette) */ .lore-page .scanlines, .lore-page .crt{ display:none; } /* titre adapté à la tablette */ .lore__title{ font-size:clamp(2.8rem,8vw,5.4rem); } /* scintillement global de l'écran */ .lore-page{ animation:crtFlicker 5s steps(1,end) infinite; } @keyframes crtFlicker{ 0%,92%,100%{filter:none} 93%{filter:brightness(1.07)} 94%{filter:brightness(.95)} 96%{filter:brightness(1.04)} 98%{filter:brightness(.97)} } /* lueur phosphore (text-shadow, PAS de box-shadow) */ .lore__title{ text-shadow:0 0 26px rgba(120,190,255,.4), 0 0 6px rgba(120,190,255,.45); } .lore__sub{ text-shadow:0 0 10px rgba(120,190,255,.28); } .lore__decrypt{ text-shadow:0 0 9px rgba(120,190,255,.45); } /* en-tête façon terminal + curseur clignotant */ .lore__term{ font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(150,200,255,.82); margin:0 0 16px; text-shadow:0 0 9px rgba(120,190,255,.4); } .lore__cursor{ display:inline-block; margin-left:5px; color:#9fd0ff; animation:termBlink 1.05s steps(1,end) infinite; } @keyframes termBlink{ 0%,50%{opacity:1} 51%,100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .lorehero__bg,.lore__title::before,.lore__title::after,.lore__dot{ animation:none } .redline{ opacity:1; transform:none; animation:none } .redline .rb::before, .redline .rb::after{ animation:none } .crt::before, .lore-screen::before{ animation:none; opacity:0 } .lore-page{ animation:none } .lore__cursor{ animation:none } } /* ============================================================ CADRES LYSOCOINS (pièce d'or + nombre) ============================================================ */ /* tuile dorée simple avec le nombre */ .coin-pack__visual{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1/1.08; padding:18px 14px; overflow:hidden; border-bottom:0; background: radial-gradient(115% 80% at 26% 14%, rgba(255,255,255,.36), transparent 50%), radial-gradient(130% 95% at 50% 122%, rgba(0,0,0,.42), transparent 56%), linear-gradient(158deg, var(--t1,#f7c94f), var(--t2,#c8811b)); } /* liseré interne clair (relief, sans box-shadow) */ .coin-pack__visual::after{ content:""; display:block; position:absolute; inset:0; z-index:1; pointer-events:none; border:1px solid rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.32); } .coin-pack__amount{ position:static; z-index:2; color:#fff; font-weight:800; font-size:clamp(2.1rem,5vw,2.8rem); letter-spacing:-.01em; text-shadow:0 2px 3px rgba(0,0,0,.28), 0 10px 24px rgba(0,0,0,.3); } /* "+X offert" en bas, hors flux (ne décale pas le nombre) */ .coin-pack__plus{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.03em; color:#fff; background:rgba(8,11,20,.72); border:1px solid rgba(255,255,255,.14); padding:4px 12px; border-radius:999px; white-space:nowrap; backdrop-filter:blur(2px); } .coin-pack__unit{ position:static; bottom:auto; left:auto; right:auto; color:rgba(255,255,255,.82); letter-spacing:.16em; } /* badge "+X offerts" : sombre pour contraster sur l'or */ .coin-pack__bonus{ top:12px; background:rgba(9,12,22,.9); color:#ffe6a0; box-shadow:none; } /* pièce alignée à droite du montant dans le tableau */ .vcoin-svg{ width:23px; height:23px; } .coinval{ display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1; } .coinval .vcoin-svg{ margin-top:-1px; } /* ============================================================ PANIER (page Boutique) ============================================================ */ .cart-btn{ position:relative; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:rgba(120,160,255,.06); color:var(--ice); cursor:pointer; transition:border-color .25s, background .25s; } .cart-btn:hover{ border-color:var(--blue); background:rgba(79,140,255,.14); } .cart-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--blue); color:#04060e; font-family:var(--font-head); font-weight:800; font-size:.66rem; display:grid; place-items:center; transform:scale(0); transition:transform .2s var(--ease-out); } .cart-count.show{ transform:scale(1); } .cart-overlay{ position:fixed; inset:0; z-index:70; background:rgba(3,5,12,.6); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s; } .cart-overlay.open{ opacity:1; pointer-events:auto; } .cart{ position:fixed; top:0; right:0; height:100dvh; width:min(420px,92vw); z-index:71; display:flex; flex-direction:column; background:linear-gradient(180deg,#0a0f1e,#070b16); border-left:1px solid var(--line-strong); transform:translateX(101%); transition:transform .4s cubic-bezier(.2,.8,.2,1); } .cart.open{ transform:none; } .cart__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); } .cart__head h3{ font-size:1.15rem; } .cart__close{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center; transition:.2s; } .cart__close:hover{ color:var(--ice); border-color:var(--blue); } .cart__body{ flex:1; overflow-y:auto; padding:16px 24px; } .cart__empty{ text-align:center; color:var(--muted); margin-top:44px; line-height:1.9; } .cart__empty span{ font-size:.88rem; color:var(--muted-2); } .cart__items{ list-style:none; display:flex; flex-direction:column; gap:12px; } .citem{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); } .citem__info{ flex:1; min-width:0; } .citem__name{ font-family:var(--font-head); font-weight:600; color:var(--ice); font-size:.95rem; } .citem__price{ color:var(--muted); font-size:.84rem; } .citem__qty{ display:inline-flex; align-items:center; gap:8px; } .citem__qty button{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ice); cursor:pointer; font-size:1rem; line-height:1; display:grid; place-items:center; } .citem__qty button:hover{ border-color:var(--blue); } .citem__qty span{ min-width:16px; text-align:center; font-weight:700; } .citem__remove{ background:none; border:0; color:var(--muted-2); cursor:pointer; padding:4px; font-size:.85rem; } .citem__remove:hover{ color:#ff6b6b; } .cart__foot{ border-top:1px solid var(--line); padding:20px 24px; } .cart__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; } .cart__total span{ color:var(--muted); } .cart__total b{ font-family:var(--font-head); font-size:1.5rem; color:var(--ice); } .cart__login{ padding:14px 16px; border:1px dashed var(--line-strong); border-radius:14px; margin-bottom:14px; } .cart__login.done{ border-style:solid; border-color:rgba(87,224,142,.4); background:rgba(87,224,142,.06); } .cart__hint{ color:var(--muted); font-size:.85rem; margin-bottom:12px; } .cart__wide{ width:100%; justify-content:center; } .cart__secure{ text-align:center; color:var(--muted-2); font-size:.78rem; margin-top:12px; } #checkoutBtn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; } .pagehead--shop{ padding-bottom:16px; } @media (max-width:820px){ .cart-btn{ order:-1; } } /* ============================================================ FORMULAIRE DE RECRUTEMENT ============================================================ */ .wrap--form{ max-width:720px; } .rform{ display:flex; flex-direction:column; gap:18px; background:linear-gradient(180deg,rgba(12,19,40,.5),rgba(8,12,26,.4)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(22px,3vw,34px); } .field{ display:flex; flex-direction:column; gap:7px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field label{ font-family:var(--font-head); font-weight:600; font-size:.86rem; color:var(--ice); } .field .req{ color:var(--blue-bright); } .field input, .field select, .field textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line-strong); background:rgba(8,12,24,.7); color:var(--text); font-family:var(--font-body); font-size:.95rem; transition:border-color .2s, background .2s; } .field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); background:rgba(12,18,36,.9); } .field textarea{ resize:vertical; min-height:82px; line-height:1.5; } .field select{ appearance:none; cursor:pointer; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237aa2ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .field select option{ background:#0a1024; color:var(--text); } .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } .rform__consent{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--muted); cursor:pointer; } .rform__consent input{ margin-top:2px; accent-color:var(--blue); width:16px; height:16px; flex:none; } .rform__consent a{ color:var(--blue-bright); } .rform__submit{ align-self:flex-start; margin-top:2px; } .rform__status{ font-size:.9rem; min-height:1.2em; margin:2px 0 0; } .rform__status.ok{ color:#57e08e; } .rform__status.err{ color:#ff6b6b; } @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } .rform__submit{ align-self:stretch; justify-content:center; } } /* ---- Dropdown 100% custom (remplace le