/* =========================================================== DOFORIA — feuille de style principale --------------------------------------------------------- Direction : « l'oeuf dans la nuit doree ». L'or du logo est traite comme un metal (degrades + reflet de bord), jamais comme un aplat. Le noir n'est plus un vide mais une nuit texturee d'ecailles et de grain parchemin. Chaque surface recoit une lumiere venue du haut : liseré clair au sommet, ombre portee en dessous. =========================================================== */ :root{ /* ---- fonds ---- */ --bg:#0a0a09; --bg-2:#111210; --surface:#181916; --surface-2:#20211c; --surface-3:#2a2c24; --rule:#2c2e26; --rule-2:#3e4136; /* ---- texte ---- */ --tx:#ece7d8; --tx-2:#aeaa99; --tx-3:#807e73; /* ---- accents ---- */ --gold:#e2cf9c; --gold-hi:#f6ecc9; /* reflet haut du metal */ --gold-2:#c0a463; --gold-3:#8c7538; /* ombre du metal */ --gold-dim:#3a3520; --jade:#a8bc45; --jade-hi:#c8dc66; --azure:#5aa9d6; --blood:#d0553f; --violet:#9b7bd4; --ok:#a8bc45; --warn:#e2cf9c; --bad:#d0553f; /* ---- metal : reutilise partout (boutons, titres, filets) ---- */ --metal:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 38%,var(--gold-2) 72%,var(--gold-3) 100%); --metal-soft:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%); --radius:12px; --radius-sm:7px; --radius-lg:18px; --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.9); --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 26px 60px -28px rgba(0,0,0,1); --glow:0 0 0 1px rgba(226,207,156,.3), 0 0 26px -6px rgba(226,207,156,.45); --glow-jade:0 0 0 1px rgba(168,188,69,.3), 0 0 26px -6px rgba(168,188,69,.4); /* liseré de lumiere au sommet des surfaces */ --lip:inset 0 1px 0 rgba(255,247,224,.055); --ease:cubic-bezier(.22,.68,.32,1); --fast:.14s var(--ease); --med:.24s var(--ease); --f-display:"Baloo 2", "Trebuchet MS", system-ui, sans-serif; --f-body:"Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; /* ---- textures (SVG inline, aucune dependance externe) ---- */ --tex-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='%23e2cf9c' stroke-opacity='0.5' stroke-width='1'%3E%3Cpath d='M0 20 Q12 2 24 20 Q36 2 48 20'/%3E%3Cpath d='M-24 40 Q-12 22 0 40 Q12 22 24 40 Q36 22 48 40 Q60 22 72 40'/%3E%3C/g%3E%3C/svg%3E"); --tex-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E"); } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{ margin:0; background:transparent; color:var(--tx); font-family:var(--f-body); font-size:15.5px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--gold);text-decoration:none;transition:color var(--fast)} a:hover{color:var(--gold-hi)} :focus-visible{ outline:2px solid var(--gold);outline-offset:2px;border-radius:4px; box-shadow:0 0 0 5px rgba(226,207,156,.16); } /* =========================================================== VOILE DE FOND — ecailles + grain + halos Element unique injecte par layout.ejs, purement decoratif. =========================================================== */ .veil{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .veil::before{ content:"";position:absolute;inset:0; background-image:var(--tex-scale); background-size:64px 54px; opacity:.10; } .veil::after{ content:"";position:absolute;inset:-20%; background: radial-gradient(52vw 40vw at 78% -6%, rgba(226,207,156,.075), transparent 62%), radial-gradient(46vw 38vw at 8% 22%, rgba(168,188,69,.055), transparent 64%), radial-gradient(60vw 50vw at 50% 108%, rgba(226,207,156,.05), transparent 66%); } .veil .grain{ position:absolute;inset:0; background-image:var(--tex-grain); background-size:160px 160px; opacity:.032; } .nav, main, footer.foot{position:relative;z-index:1} /* =========================================================== TYPOGRAPHIE =========================================================== */ h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;margin:0;line-height:1.14;text-wrap:balance} h1{font-size:clamp(2rem,4.5vw,3.1rem);letter-spacing:-.005em} h2{font-size:clamp(1.45rem,2.6vw,2.05rem)} h3{font-size:1.18rem} p{margin:0 0 1em} .mono,code{font-family:var(--f-mono);font-size:.88em} code{background:var(--surface-2);padding:.12em .42em;border-radius:4px;color:var(--gold);border:1px solid var(--rule)} /* Texte en or metallique — reserve aux accroches */ .hl,.gold-text{ background:var(--metal); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 22px} .narrow{max-width:820px} /* ---------- surtitre ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);font-weight:500; } .eyebrow::before{ content:"";width:16px;height:1px;flex:0 0 auto; background:linear-gradient(90deg,transparent,var(--gold-2)); } .sec-title.center .eyebrow::after{ content:"";width:16px;height:1px;flex:0 0 auto; background:linear-gradient(270deg,transparent,var(--gold-2)); } /* =========================================================== NAVBAR =========================================================== */ .nav{ position:sticky;top:0;z-index:60; background:rgba(10,10,9,.82); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--rule); transition:background var(--med),border-color var(--med),box-shadow var(--med); } /* filet dore sous la barre : rappel des courbes du logo */ .nav::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(226,207,156,.35),transparent); } .nav.scrolled{ background:rgba(10,10,9,.94); box-shadow:0 12px 34px -22px rgba(0,0,0,1); } .nav-in{display:flex;align-items:center;gap:10px;height:68px} .brand{ display:flex;align-items:center;gap:11px;flex:0 0 auto; font-family:var(--f-display);font-size:1.42rem;font-weight:800; color:var(--tx);letter-spacing:.005em; } .brand img{ height:40px;width:auto; filter:drop-shadow(0 0 12px rgba(168,188,69,.32)); transition:transform var(--med),filter var(--med); } .brand:hover img{transform:translateY(-1px) scale(1.04);filter:drop-shadow(0 0 16px rgba(168,188,69,.5))} .brand:hover{color:var(--tx)} .brand .dot{color:var(--gold)} .nav-links{display:flex;gap:2px;margin-left:24px;flex:1;flex-wrap:wrap} .nav-links a{ position:relative;padding:9px 13px;border-radius:var(--radius-sm); color:var(--tx-2);font-weight:500;font-size:.93rem; transition:background var(--fast),color var(--fast); } .nav-links a::after{ content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px; border-radius:2px;background:var(--metal-soft); transform:scaleX(0);transform-origin:center; transition:transform var(--med); } .nav-links a:hover{background:var(--surface-2);color:var(--tx)} .nav-links a:hover::after{transform:scaleX(.55)} .nav-links a.on{color:var(--gold);background:var(--gold-dim)} .nav-links a.on::after{transform:scaleX(1)} .nav-right{display:flex;align-items:center;gap:9px;flex:0 0 auto} .nav-toggle{ display:none;background:var(--surface-2);border:1px solid var(--rule-2); color:var(--tx);border-radius:var(--radius-sm);padding:8px 12px; cursor:pointer;font-size:1.05rem;line-height:1; transition:border-color var(--fast),color var(--fast); } .nav-toggle:hover{border-color:var(--gold-2);color:var(--gold)} /* =========================================================== BOUTONS =========================================================== */ .btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 21px;border-radius:var(--radius-sm);border:1px solid transparent; font-family:var(--f-body);font-weight:600;font-size:.94rem;cursor:pointer; letter-spacing:.005em;text-align:center;text-decoration:none; transition:transform var(--fast), box-shadow var(--med), background var(--med), border-color var(--med), color var(--fast), filter var(--med); } .btn:active{transform:translateY(1px)} /* Or : degrade metallique + reflet superieur + socle sombre */ .btn-gold{ background:var(--metal);color:#241f0e; box-shadow:0 1px 0 rgba(255,250,235,.5) inset, 0 2px 0 #5f5228, 0 8px 20px -12px rgba(226,207,156,.7); text-shadow:0 1px 0 rgba(255,255,255,.22); } .btn-gold:hover{ color:#241f0e;filter:brightness(1.07);transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,250,235,.6) inset, 0 3px 0 #5f5228, 0 14px 30px -14px rgba(226,207,156,.85), var(--glow); } .btn-gold:active{box-shadow:0 1px 0 rgba(255,250,235,.4) inset, 0 1px 0 #5f5228} /* Balayage de lumiere au survol — une seule passe, 0.6 s */ .btn-gold::before{ content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);opacity:0; } .btn-gold:hover::before{animation:sheen .62s var(--ease) 1} @keyframes sheen{ 0%{left:-60%;opacity:0} 18%{opacity:1} 100%{left:120%;opacity:0} } .btn-ghost{background:rgba(32,33,28,.5);border-color:var(--rule-2);color:var(--tx);box-shadow:var(--lip)} .btn-ghost:hover{border-color:var(--gold-2);color:var(--gold);background:var(--surface-2);transform:translateY(-1px)} .btn-jade{background:linear-gradient(180deg,#c0d45c,var(--jade) 55%,#7f9130);color:#171c05;box-shadow:0 2px 0 #4f5c1c,var(--lip)} .btn-jade:hover{color:#171c05;filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 3px 0 #4f5c1c,var(--glow-jade)} .btn-danger{background:linear-gradient(180deg,#e0705a,var(--blood) 60%,#9b3b2a);color:#fff;box-shadow:0 2px 0 #6e2618} .btn-danger:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px)} .btn-sm{padding:6px 13px;font-size:.85rem;border-radius:6px} .btn-lg{padding:15px 32px;font-size:1.05rem;border-radius:9px} .btn-block{width:100%} .btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none;filter:grayscale(.4)} /* =========================================================== CARTES / PANNEAUX =========================================================== */ .card{ position:relative; background:linear-gradient(180deg,#1c1d19,var(--surface) 60%); border:1px solid var(--rule);border-radius:var(--radius); box-shadow:var(--shadow),var(--lip); transition:border-color var(--med),box-shadow var(--med),transform var(--med); } /* filet dore qui s'allume au sommet de la carte au survol */ .card::before{ content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(226,207,156,.55),transparent); opacity:0;transition:opacity var(--med);pointer-events:none; } .card:hover::before{opacity:1} .card-pad{padding:22px 24px} .card-head{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:15px 22px;border-bottom:1px solid var(--rule); background:linear-gradient(180deg,rgba(255,247,224,.022),transparent); } .card-head h2,.card-head h3{margin:0} /* Carte cliquable (wiki, boutique) : elle se souleve */ a.card:hover,.card.hoverable:hover{ border-color:var(--gold-3);transform:translateY(-3px); box-shadow:var(--shadow-lg),var(--lip),0 0 30px -18px rgba(226,207,156,.9); } .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* =========================================================== SECTIONS =========================================================== */ section.block{padding:64px 0} section.block.tight{padding:38px 0} .sec-title{display:flex;flex-direction:column;gap:8px;margin-bottom:28px} .sec-title.center{align-items:center;text-align:center} /* =========================================================== HEROS =========================================================== */ .hero{ position:relative;overflow:hidden; border-bottom:1px solid var(--rule); background: radial-gradient(900px 460px at 76% 4%, rgba(226,207,156,.11), transparent 64%), radial-gradient(720px 420px at 10% 92%, rgba(168,188,69,.09), transparent 62%), linear-gradient(180deg,#121310,var(--bg)); } /* filet dore de fermeture, echo des courbes du logo */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(226,207,156,.5),transparent); } .hero-in{ position:relative;z-index:2;padding:74px 0 68px; display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center; } .hero h1{margin:16px 0 18px} .hero .lede{font-size:1.1rem;color:var(--tx-2);max-width:56ch;margin-bottom:28px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} /* ---- mise en scene du logo : halo, anneaux, socle ---- */ .hero-logo{display:grid;place-items:center;position:relative} .egg-stage{ position:relative;display:grid;place-items:center; width:min(430px,86vw);aspect-ratio:1; } /* Halo : une lueur large et sans bord franc. Le degrade s'eteint tot (52 %) et le flou deborde du cadre, pour eviter l'effet « jeton » d'un disque a contour net. Le logo porte deja ses propres courbes : on n'ajoute aucun anneau qui viendrait l'encadrer. */ .egg-stage .orb{ position:absolute;inset:-14%;border-radius:50%; background: radial-gradient(circle at 50% 44%, rgba(168,188,69,.22) 0%, rgba(168,188,69,.11) 26%, transparent 52%), radial-gradient(circle at 50% 52%, rgba(226,207,156,.16) 0%, rgba(226,207,156,.07) 32%, transparent 60%); filter:blur(44px); } /* Les anneaux restent dans le DOM (marquage decoratif) mais ne dessinent plus de cercle : ils portent un simple renfort de lueur, sans contour. */ .egg-stage .ring{position:absolute;border-radius:50%;border:none;pointer-events:none} .egg-stage .ring.r1{ inset:8%; background:radial-gradient(circle at 50% 46%, rgba(226,207,156,.10), transparent 58%); filter:blur(30px); } .egg-stage .ring.r2{display:none} .egg-stage img{ position:relative;z-index:2;width:100%;height:auto; /* logo-full-alpha.png est detoure : il se pose directement sur le halo, sans mode de fusion, donc sans delaver les anneaux. */ filter:drop-shadow(0 22px 44px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(226,207,156,.16)); } /* socle : ombre elliptique sous le logo, ancre la composition */ .egg-stage::after{ content:"";position:absolute;left:16%;right:16%;bottom:4%;height:26px; background:radial-gradient(ellipse at center, rgba(226,207,156,.18), transparent 70%); filter:blur(10px); } /* ---- rappel de l'adresse du serveur sous le heros ---- */ .hero-addr{ display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:22px;padding:9px 15px;border-radius:100px; background:rgba(32,33,28,.6);border:1px solid var(--rule); font-family:var(--f-mono);font-size:.82rem;color:var(--tx-2);box-shadow:var(--lip); } .hero-addr b{color:var(--gold);font-weight:500} /* ---- animation d'entree : une seule passe, en cascade ---- */ @keyframes riseIn{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } @keyframes eggIn{ from{opacity:0;transform:translateY(26px) scale(.94)} to{opacity:1;transform:none} } @keyframes haloIn{from{opacity:0}to{opacity:1}} .hero-in > div > *{animation:riseIn .62s var(--ease) both} .hero-in > div > *:nth-child(1){animation-delay:.04s} .hero-in > div > *:nth-child(2){animation-delay:.11s} .hero-in > div > *:nth-child(3){animation-delay:.18s} .hero-in > div > *:nth-child(4){animation-delay:.25s} .hero-in > div > *:nth-child(5){animation-delay:.32s} .egg-stage img{animation:eggIn .85s var(--ease) both;animation-delay:.06s} .egg-stage .orb,.egg-stage .ring{animation:haloIn 1.1s var(--ease) both;animation-delay:.2s} /* =========================================================== TUILES DE STATS =========================================================== */ .stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); } .stat{ background:linear-gradient(180deg,#1c1d19,var(--surface)); padding:20px;text-align:center;transition:background var(--med); } .stat:hover{background:linear-gradient(180deg,#23241e,var(--surface-2))} .stat .v{ font-family:var(--f-display);font-size:1.9rem;font-weight:800;line-height:1.1; font-variant-numeric:tabular-nums; background:var(--metal);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .stat .l{ font-size:.74rem;color:var(--tx-3);text-transform:uppercase; letter-spacing:.12em;margin-top:6px;font-family:var(--f-mono); } /* =========================================================== BADGES / PASTILLES =========================================================== */ .pill{ display:inline-flex;align-items:center;gap:6px;padding:4px 11px; border-radius:100px;font-size:.74rem;font-weight:600;font-family:var(--f-mono); letter-spacing:.04em;white-space:nowrap;border:1px solid transparent; transition:border-color var(--fast),background var(--fast),color var(--fast),filter var(--fast); } .pill-ok{background:rgba(168,188,69,.13);color:#c2d466;border-color:rgba(168,188,69,.28)} .pill-bad{background:rgba(208,85,63,.13);color:#e0836f;border-color:rgba(208,85,63,.3)} .pill-gold{background:var(--gold-dim);color:var(--gold);border-color:rgba(226,207,156,.3)} .pill-azure{background:rgba(90,169,214,.13);color:#8ec8e8;border-color:rgba(90,169,214,.28)} .pill-violet{background:rgba(155,123,212,.13);color:#b9a1e4;border-color:rgba(155,123,212,.28)} .pill-mute{background:var(--surface-3);color:var(--tx-2);border-color:var(--rule-2)} a.pill:hover{filter:brightness(1.18)} .led{width:8px;height:8px;border-radius:50%;background:var(--jade);box-shadow:0 0 9px var(--jade)} .led.off{background:var(--blood);box-shadow:0 0 9px var(--blood)} /* =========================================================== TABLEAUX =========================================================== */ .tw{ overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius); background:var(--surface);box-shadow:var(--shadow),var(--lip); -webkit-overflow-scrolling:touch; } table{border-collapse:collapse;width:100%;font-size:.92rem} thead th{ background:linear-gradient(180deg,var(--surface-3),var(--surface-2)); text-align:left;padding:12px 15px; font-family:var(--f-mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase; color:var(--tx-2);font-weight:500;white-space:nowrap; border-bottom:1px solid var(--rule-2);position:relative; } thead th::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(226,207,156,.22),transparent); } tbody td{padding:12px 15px;border-bottom:1px solid var(--rule);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr{transition:background var(--fast),box-shadow var(--fast)} tbody tr:hover{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--gold-3)} td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap} /* Rang : les trois premiers sont mis en lumiere */ .rank{font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:var(--tx-3);width:56px;text-align:center} .rank.r1{color:#ffd75e;text-shadow:0 0 14px rgba(255,215,94,.45)} .rank.r2{color:#d5dce6;text-shadow:0 0 14px rgba(213,220,230,.35)} .rank.r3{color:#dc9a5e;text-shadow:0 0 14px rgba(220,154,94,.35)} tr.me{ background:linear-gradient(90deg,rgba(226,207,156,.14),rgba(226,207,156,.05)) !important; box-shadow:inset 3px 0 0 var(--gold) !important; } /* =========================================================== BARRE DE PROGRESSION =========================================================== */ .bar{ height:8px;background:var(--bg-2);border-radius:100px;overflow:hidden; min-width:70px;border:1px solid var(--rule);box-shadow:inset 0 1px 3px rgba(0,0,0,.6); } .bar span{ display:block;height:100%;border-radius:100px; background:linear-gradient(90deg,var(--gold-3),var(--gold-2) 55%,var(--gold)); box-shadow:0 0 10px -2px rgba(226,207,156,.6), inset 0 1px 0 rgba(255,255,255,.25); } .bar.jade span{ background:linear-gradient(90deg,#5d6b23,#8ba036 55%,var(--jade)); box-shadow:0 0 10px -2px rgba(168,188,69,.6), inset 0 1px 0 rgba(255,255,255,.2); } /* =========================================================== FORMULAIRES =========================================================== */ .field{margin-bottom:17px} .field label{display:block;font-size:.83rem;font-weight:600;color:var(--tx-2);margin-bottom:7px;letter-spacing:.02em} .field .hint{font-size:.78rem;color:var(--tx-3);margin-top:6px;line-height:1.5} input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select,textarea{ width:100%;padding:12px 14px; background:linear-gradient(180deg,#0c0d0b,var(--bg-2)); color:var(--tx); border:1px solid var(--rule-2);border-radius:var(--radius-sm); font-family:var(--f-body);font-size:.95rem; box-shadow:inset 0 1px 3px rgba(0,0,0,.5); transition:border-color var(--fast),box-shadow var(--fast),background var(--fast); } input::placeholder,textarea::placeholder{color:var(--tx-3);opacity:.75} input:hover,select:hover,textarea:hover{border-color:#4a4d40} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(226,207,156,.15), inset 0 1px 3px rgba(0,0,0,.4); background:linear-gradient(180deg,#0e0f0c,#141511); } textarea{min-height:130px;resize:vertical;font-family:var(--f-body)} select{ appearance:none; background-image: linear-gradient(45deg,transparent 50%,var(--tx-2) 50%), linear-gradient(135deg,var(--tx-2) 50%,transparent 50%), linear-gradient(180deg,#0c0d0b,var(--bg-2)); background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%,0 0; background-size:5px 5px,5px 5px,100% 100%; background-repeat:no-repeat; padding-right:38px;cursor:pointer; } .checkline{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--tx-2);cursor:pointer} .checkline input{margin-top:3px;accent-color:var(--gold-2);width:16px;height:16px;flex:0 0 auto;box-shadow:none} .checkline:hover{color:var(--tx)} /* =========================================================== ALERTES =========================================================== */ .alert{ padding:13px 17px;border-radius:var(--radius-sm);margin-bottom:16px; font-size:.92rem;border:1px solid;border-left-width:3px; box-shadow:var(--shadow); animation:riseIn .35s var(--ease) both; } .alert-success{background:rgba(168,188,69,.09);border-color:rgba(168,188,69,.28);border-left-color:var(--jade);color:#d8e5ad} .alert-error{background:rgba(208,85,63,.09);border-color:rgba(208,85,63,.3);border-left-color:var(--blood);color:#f2c1b7} .alert-info{background:rgba(90,169,214,.09);border-color:rgba(90,169,214,.28);border-left-color:var(--azure);color:#c0dff1} .alert a{text-decoration:underline;text-underline-offset:2px} /* =========================================================== ONGLETS / FILTRES =========================================================== */ .tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px} .tabs a{ padding:8px 15px;border-radius:100px; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--rule);color:var(--tx-2);font-size:.88rem;font-weight:500; box-shadow:var(--lip); transition:border-color var(--fast),color var(--fast),background var(--fast),transform var(--fast); } .tabs a:hover{border-color:var(--rule-2);color:var(--tx);transform:translateY(-1px)} .tabs a.on{ background:linear-gradient(180deg,#4a4128,var(--gold-dim)); border-color:var(--gold-3);color:var(--gold); box-shadow:0 0 18px -8px rgba(226,207,156,.8),var(--lip); } /* =========================================================== PAGINATION =========================================================== */ .pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap} .pager a,.pager span{ min-width:38px;height:38px;display:grid;place-items:center;padding:0 10px; border-radius:var(--radius-sm);border:1px solid var(--rule); background:linear-gradient(180deg,var(--surface-2),var(--surface)); color:var(--tx-2);font-family:var(--f-mono);font-size:.85rem; transition:border-color var(--fast),color var(--fast),transform var(--fast); } .pager a:hover{border-color:var(--gold-2);color:var(--gold);transform:translateY(-1px)} .pager .on{ background:linear-gradient(180deg,#4a4128,var(--gold-dim)); border-color:var(--gold-3);color:var(--gold); } .pager .gap{border:none;background:none} /* =========================================================== CLASSE DE PERSONNAGE (pastille couleur) Les 18 teintes sont definies dans ladder.css =========================================================== */ .breed{display:inline-flex;align-items:center;gap:9px;min-width:0} .breed .ic{ width:28px;height:28px;border-radius:50%;display:grid;place-items:center; font-family:var(--f-display);font-size:.78rem;font-weight:800;color:#0a0a09; flex:0 0 auto;position:relative;overflow:hidden; border:1px solid rgba(0,0,0,.45); box-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 0 1px rgba(255,247,224,.09); transition:transform var(--fast),box-shadow var(--fast); } /* reflet vitre, comme sur l'oeuf du logo */ .breed .ic::after{ content:"";position:absolute;left:14%;top:8%;width:52%;height:38%; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0)); pointer-events:none; } tbody tr:hover .breed .ic{ transform:scale(1.08); box-shadow:0 2px 7px rgba(0,0,0,.6),0 0 0 1px rgba(226,207,156,.35); } /* Nom de personnage : partage entre l'accueil, les classements et les fiches. */ .pname{font-weight:600;color:var(--tx)} a.pname:hover{color:var(--gold)} /* --- Les 18 classes : une teinte par classe, choisie sur son identite de jeu et remontee en luminosite pour que l'initiale noire reste lisible sur chaque pastille. --- */ .ic.b1 {background:linear-gradient(160deg,#8ecdf0,#4f9fce)} /* Feca */ .ic.b2 {background:linear-gradient(160deg,#b0dc78,#77ad3f)} /* Osamodas */ .ic.b3 {background:linear-gradient(160deg,#f4d566,#d0a521)} /* Enutrof */ .ic.b4 {background:linear-gradient(160deg,#b3a8d8,#7d71ab)} /* Sram */ .ic.b5 {background:linear-gradient(160deg,#c6acf0,#9575cc)} /* Xelor */ .ic.b6 {background:linear-gradient(160deg,#f5b168,#d47f2a)} /* Ecaflip */ .ic.b7 {background:linear-gradient(160deg,#f8bfd4,#dc8dab)} /* Eniripsa */ .ic.b8 {background:linear-gradient(160deg,#f08069,#cc523a)} /* Iop */ .ic.b9 {background:linear-gradient(160deg,#77dcb2,#3fae82)} /* Cra */ .ic.b10{background:linear-gradient(160deg,#9ce0a8,#5fb972)} /* Sadida */ .ic.b11{background:linear-gradient(160deg,#e26f65,#ab3830)} /* Sacrieur */ .ic.b12{background:linear-gradient(160deg,#f0c092,#c3895a)} /* Pandawa */ .ic.b13{background:linear-gradient(160deg,#adbaca,#78879a)} /* Roublard */ .ic.b14{background:linear-gradient(160deg,#e0b878,#b98c3f)} /* Zobal */ .ic.b15{background:linear-gradient(160deg,#78bcd8,#3f8caa)} /* Steamer */ .ic.b16{background:linear-gradient(160deg,#a8ecf0,#63c4cc)} /* Eliotrope */ .ic.b17{background:linear-gradient(160deg,#e6a2ee,#bd6bc9)} /* Huppermage */ .ic.b18{background:linear-gradient(160deg,#d2a184,#a5714f)} /* Ouginak */ /* =========================================================== PIED DE PAGE =========================================================== */ footer.foot{ margin-top:auto; background:linear-gradient(180deg,var(--bg),#0d0e0c); border-top:1px solid var(--rule);padding:52px 0 28px;position:relative; } footer.foot::before{ content:"";position:absolute;left:0;right:0;top:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(226,207,156,.35),transparent); } .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;margin-bottom:32px} .foot h4{ font-family:var(--f-mono);font-size:.71rem;letter-spacing:.15em;text-transform:uppercase; color:var(--gold-2);margin-bottom:13px;font-weight:500; } .foot ul{list-style:none;padding:0;margin:0} .foot li{margin-bottom:8px} .foot a{color:var(--tx-2);font-size:.9rem;transition:color var(--fast)} .foot a:hover{color:var(--gold)} .foot-bottom{ border-top:1px solid var(--rule);padding-top:22px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; color:var(--tx-3);font-size:.82rem; } /* =========================================================== ETATS VIDES — tres visibles tant que la base est peu remplie =========================================================== */ .empty{text-align:center;padding:56px 24px;color:var(--tx-2);position:relative} .empty .big{ font-size:2.4rem;line-height:1;margin:0 auto 16px; width:86px;height:86px;display:grid;place-items:center;border-radius:50%; background: radial-gradient(circle at 50% 38%, rgba(168,188,69,.16), transparent 62%), linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--rule-2); box-shadow:inset 0 1px 0 rgba(255,247,224,.07), 0 0 34px -14px rgba(226,207,156,.65); opacity:1; } .empty p{margin:6px auto;max-width:46ch} .empty .btn{margin-top:18px} /* =========================================================== PAGES DE COMPTE — connexion / inscription L'oeuf sert de sceau au-dessus du formulaire. =========================================================== */ .auth-mark{ width:84px;height:84px;margin:0 auto 4px;display:grid;place-items:center; border-radius:50%;position:relative; background: radial-gradient(circle at 50% 36%, rgba(168,188,69,.22), transparent 62%), linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--rule-2); box-shadow:inset 0 1px 0 rgba(255,247,224,.08), 0 0 38px -14px rgba(226,207,156,.8); } .auth-mark img{ width:46px;height:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(168,188,69,.35)); } /* Rappels de confiance sous le formulaire d'inscription */ .auth-perks{ list-style:none;padding:0;margin:20px 0 0; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px; } .auth-perks li{ display:flex;align-items:flex-start;gap:10px; font-size:.86rem;color:var(--tx-2);line-height:1.5; } .auth-perks li::before{ content:'';flex:0 0 auto;width:17px;height:17px;margin-top:3px;border-radius:50%; background-color:rgba(168,188,69,.14); border:1px solid rgba(168,188,69,.42); /* coche en SVG inline : aucune police d'icones, aucune dependance */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 L4.9 8.6 L9.4 3.7' fill='none' stroke='%23a8bc45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:11px 11px;background-position:center;background-repeat:no-repeat; } .auth-perks li b{color:var(--tx);font-weight:600} /* =========================================================== DIVERS =========================================================== */ .muted{color:var(--tx-3)} .center{text-align:center} .mb0{margin-bottom:0} .flex{display:flex;gap:12px;align-items:center} .flex-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap} hr.sep{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--rule-2),transparent);margin:28px 0} /* =========================================================== RESEAUX SOCIAUX — icones SVG en ligne (views/_reseaux.ejs) Aucune bibliotheque d icones, aucun CDN : les traces sont dans le gabarit et heritent de currentColor. =========================================================== */ .social{display:flex;align-items:center;gap:6px} .social-ic{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:8px; color:var(--tx-2);background:rgba(32,33,28,.5); border:1px solid var(--rule);box-shadow:var(--lip); transition:color var(--fast),border-color var(--fast),background var(--fast),transform var(--fast); } .social-ic:hover{ color:var(--gold);border-color:var(--gold-2); background:var(--surface-2);transform:translateY(-1px); } .social-ic svg{display:block} .social-nav{margin-right:4px} .social-foot{margin-top:14px} @media (max-width:760px){ /* La barre du haut est deja chargee sur mobile : les icones restent accessibles dans le pied de page. */ .social-nav{display:none} } /* =========================================================== RESPONSIVE =========================================================== */ @media (max-width:980px){ .hero-in{grid-template-columns:1fr;text-align:center;padding:52px 0 56px;gap:34px} .hero-logo{order:-1} .hero .lede{margin-inline:auto} .hero-cta{justify-content:center} .egg-stage{width:min(340px,78vw)} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ body{font-size:15px} .wrap{padding:0 16px} section.block{padding:44px 0} section.block.tight{padding:30px 0} .nav-toggle{display:block} .nav-in{height:62px} .nav-links{ display:none;position:absolute;top:62px;left:0;right:0; flex-direction:column;gap:4px; background:rgba(13,14,12,.98); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-bottom:1px solid var(--rule); box-shadow:0 22px 40px -24px rgba(0,0,0,1); padding:12px 14px 16px;margin:0; max-height:calc(100vh - 62px);overflow-y:auto; } .nav-links.open{display:flex;animation:riseIn .22s var(--ease) both} .nav-links a{padding:12px 14px} .nav-links a::after{display:none} .brand{font-size:1.22rem} .brand img{height:34px} .card-pad{padding:18px 17px} .card-head{padding:14px 17px} .foot-grid{grid-template-columns:1fr;gap:26px} .empty{padding:40px 18px} .empty .big{width:72px;height:72px;font-size:2rem} } @media (max-width:420px){ .stats{grid-template-columns:1fr 1fr} .btn-lg{padding:13px 20px;font-size:1rem} .hero-cta .btn{flex:1 1 100%} } /* =========================================================== ACCESSIBILITE — mouvement reduit =========================================================== */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} .btn:hover,.card:hover,a.card:hover,.tabs a:hover,.pager a:hover{transform:none !important} .hero-in > div > *,.egg-stage img,.egg-stage .orb,.egg-stage .ring,.alert{ opacity:1 !important;transform:none !important; } } /* =========================================================== SELECTEUR DE LANGUE (barre de navigation + pied de page) ----------------------------------------------------------- Trois liens FR / EN / ES, pas un