/* ═══════════════════════════════════════════════════════════════════════════════════════════ CELLTIS GAMES — composants. Le projet n'utilise pas de classes : chaque composant est une balise HTML qui lui est propre (, , ...). Le balisage se lit donc comme la maquette, et il n'existe jamais deux façons de nommer la même chose. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── Bandeau d'accueil ──────────────────────────────────────────────────────────────────── */ /* L'accueil s'ouvre sur UN seul écran. Le bandeau occupe toute la hauteur utile, et le reste de la page se découvre en descendant, un panneau à la fois. L'image y est NETTE, contrairement au fond général du site : le flou du vit sur une couche inférieure, celle-ci a la sienne. Un dégradé sombre la voile de haut en bas pour que le titre garde son contraste, quelle que soit la zone de l'image derrière. */ cover { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 56vh; padding: 72px 24px; text-align: center; isolation: isolate; } /* Les marges et le logo suivent la HAUTEUR de la fenêtre, pas seulement sa largeur : sur un portable posé à plat comme sur un grand écran, le bandeau tient d'un seul tenant et le repère de défilement ne passe jamais sous la ligne de flottaison. */ cover[home] { min-height: calc(100vh - var(--topbar)); gap: clamp(14px, 2vh, 22px); padding: clamp(46px, 8vh, 90px) 24px clamp(84px, 14vh, 130px); } cover[home] > img { height: clamp(70px, 11vh, 120px); } cover[home] > livecount { margin-top: clamp(4px, 1vh, 18px); } cover[home]::before { position: absolute; inset: 0; content: ''; z-index: -1; background-image: linear-gradient(180deg, rgba(4, 16, 11, 0.66) 0%, rgba(4, 16, 11, 0.3) 40%, rgba(4, 14, 10, 0.94) 100%), radial-gradient(88% 70% at 50% 44%, rgba(61, 220, 132, 0.18), transparent 72%), var(--bg-image); background-size: cover; background-position: 50% 50%; } cover > img { height: 120px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6)); } cover > citation { font-size: clamp(38px, 6vw, 72px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; max-width: 16ch; text-wrap: balance; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55); } /* Dégradé sur le titre — uniquement si le navigateur sait découper un fond sur du texte, sinon le blanc plein reste en place. Sans cette garde, le titre serait invisible. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { cover[home] > citation { background-image: linear-gradient(175deg, #ffffff 44%, #93e8b8); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } } cover > sub { font-size: clamp(15px, 1.5vw, 18.5px); line-height: 1.6; color: var(--ink-soft); max-width: 620px; text-wrap: balance; } cover > links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; } cover > links > a { display: flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 100px; border: 1px solid var(--line); background-color: rgba(5, 22, 15, 0.55); backdrop-filter: blur(10px); font-size: 15px; font-weight: 600; transition: border-color .2s, transform .2s, background-color .2s, box-shadow .2s; } cover > links > a:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } cover > links > a[cta] { background-image: linear-gradient(135deg, var(--teal), var(--teal-dark)); border-color: var(--line-strong); } cover > links > a[cta]:hover { box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.16); } /* Invitation à descendre : sans elle, rien ne dit qu'il y a une suite sous un écran plein. */ scrolldown { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; transition: color .2s; } scrolldown:hover { color: var(--green-soft); } scrolldown > glyph { font-size: 26px; animation: nudge 2.2s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } livecount { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; justify-content: center; } livecount > div, statustop > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 174px; padding: 17px 24px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel); backdrop-filter: blur(10px); } livecount span, statustop span { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; color: var(--green-soft); font-variant-numeric: tabular-nums; } statustop { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } /* ── Titres de bloc ─────────────────────────────────────────────────────────────────────── */ blocktitle { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 28px 0 16px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; padding-bottom: 11px; border-bottom: 1px solid var(--line); } blocktitle:first-child { margin-top: 0; } blocktitle > a { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--green-soft); text-transform: uppercase; letter-spacing: 0.08em; } blocktitle > a:hover { color: var(--ink); } blocktitle glyph { font-size: 22px; vertical-align: -4px; margin-right: 8px; } adminsep { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 28px 0 14px; padding: 11px 16px; border-radius: var(--radius-s); background-color: rgba(31, 93, 86, 0.32); border-left: 3px solid var(--green); font-size: 17px; font-weight: 600; } adminsep > a, cathead a { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green-soft); text-transform: uppercase; letter-spacing: 1px; } adminsep > a:hover, cathead a:hover { color: var(--ink); } cathead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 16px; } cathead > span { display: flex; align-items: center; gap: 9px; } catact { display: flex; gap: 16px; } empty { display: flex; align-items: center; justify-content: center; padding: 34px; border-radius: var(--radius); border: 1px dashed var(--line); color: var(--ink-dim); font-size: 15px; } hint { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; margin-bottom: 16px; border-radius: var(--radius-s); background-color: rgba(31, 93, 86, 0.22); border-left: 3px solid var(--teal); color: var(--ink-soft); font-size: 14px; line-height: 1.5; } hint glyph { font-size: 20px; color: var(--green-soft); flex-shrink: 0; } notif { display: block; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius-s); background-color: rgba(31, 93, 86, 0.3); border-left: 3px solid var(--green); font-size: 14px; line-height: 1.5; } notif:empty { display: none; } notif[error] { background-color: rgba(239, 83, 80, 0.16); border-left-color: var(--down); } notif[success] { background-color: rgba(76, 175, 80, 0.18); border-left-color: var(--green); } /* ── Grille d'univers ───────────────────────────────────────────────────────────────────── */ gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 18px; } gamecard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background-color: var(--panel); backdrop-filter: blur(10px); transition: transform .25s, border-color .25s, box-shadow .25s; } gamecard:hover { transform: translateY(-4px); border-color: var(--game-color, var(--green)); box-shadow: var(--shadow); } gimg { display: block; height: 152px; background-size: cover; background-position: 50% 50%; position: relative; } gimg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(9, 32, 22, 0.92)); } gbody { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; flex: 1; } gbody > p { color: var(--ink-soft); font-size: 14px; line-height: 1.45; } gstate { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; } gdot { display: block; width: 9px; height: 9px; border-radius: 50%; background-color: var(--ink-dim); flex-shrink: 0; } gstate[up] > gdot { background-color: var(--up); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.22); animation: pulse 2.4s ease-in-out infinite; } gstate[down] > gdot { background-color: var(--down); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.22); } 50% { box-shadow: 0 0 0 7px rgba(76, 175, 80, 0.05); } } gfoot { display: flex; border-top: 1px solid var(--line); } gfoot > a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 13px; font-size: 14px; color: var(--ink-soft); transition: background-color .2s, color .2s; } gfoot > a:hover { background-color: rgba(76, 175, 80, 0.16); color: var(--ink); } gfoot > a + a { border-left: 1px solid var(--line); } gfoot glyph { font-size: 19px; } gedit, ghidden { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 100px; background-color: rgba(6, 20, 15, 0.85); border: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } ghidden { top: auto; bottom: 68px; right: 12px; color: var(--boot); border-color: rgba(255, 183, 77, 0.4); } gedit glyph { font-size: 16px; } /* ── Bandeau d'univers ──────────────────────────────────────────────────────────────────── */ gamehero { display: flex; align-items: flex-end; min-height: 380px; padding: 44px 28px; background-image: linear-gradient(180deg, rgba(7, 19, 16, 0.35), rgba(7, 19, 16, 0.95)), var(--game-image); background-size: cover; background-position: 50% 45%; border-bottom: 1px solid var(--line); } ghcontent { display: flex; flex-direction: column; gap: 13px; max-width: 1280px; width: 100%; margin: 0 auto; } ghcontent > p { font-size: 18px; color: var(--ink-soft); } gaddress, pcaddr, lcode, keyfield { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%; padding: 10px 16px; border-radius: 100px; border: 1px solid var(--line-strong); background-color: rgba(6, 20, 15, 0.7); cursor: pointer; font-size: 15px; transition: border-color .2s, background-color .2s; } /* Une adresse de serveur peut être plus longue que la carte qui la porte. Elle se coupe dans la pastille plutôt que de l'élargir : le clic recopie de toute façon la valeur entière, qui vit dans l'attribut `copy` et non dans le texte affiché. */ gaddress > span, pcaddr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } gaddress > glyph, pcaddr > glyph { flex-shrink: 0; } gaddress:hover, pcaddr:hover, lcode:hover, keyfield:hover { border-color: var(--green); background-color: rgba(31, 93, 86, 0.5); } gaddress glyph, pcaddr glyph, lcode glyph, keyfield glyph { font-size: 19px; color: var(--green-soft); } ghstats { display: flex; gap: 26px; margin-top: 6px; } ghstats > div { display: flex; flex-direction: column; } ghstats > div > span:first-child { font-size: 27px; font-weight: 700; color: var(--game-color, var(--green-soft)); } ghstats > div > span:last-child { font-size: 13px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; } ghlinks { display: flex; gap: 11px; margin-top: 10px; flex-wrap: wrap; } ghlinks > a { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 100px; border: 1px solid var(--line); background-color: rgba(9, 32, 22, 0.62); font-size: 15px; transition: border-color .2s, transform .2s; } ghlinks > a:hover { border-color: var(--green); transform: translateY(-2px); } gamedesc > p { color: var(--ink-soft); line-height: 1.7; font-size: 16px; max-width: 900px; } /* ── Arguments ──────────────────────────────────────────────────────────────────────────── */ argugrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 18px; } argu { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel); backdrop-filter: blur(10px); transition: border-color .25s, transform .25s, background-color .25s; } argu:hover { border-color: var(--line-strong); transform: translateY(-3px); background-color: rgba(13, 44, 29, 0.62); } /* L'icône est posée dans une pastille : elle devient un repère visuel de même gabarit d'une carte à l'autre, là où une icône nue prend la largeur de son dessin. */ argu > glyph { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; font-size: 25px; color: var(--green-soft); background-color: rgba(61, 220, 132, 0.13); border: 1px solid var(--line-strong); } argu > h3 { margin-top: 2px; } argu > p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; } /* ── Parc de serveurs ───────────────────────────────────────────────────────────────────── */ parclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 16px; } parccard { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel); backdrop-filter: blur(10px); transition: border-color .25s; } parccard[data-state='up'] { border-left: 3px solid var(--up); } parccard[data-state='boot'] { border-left: 3px solid var(--boot); } parccard[data-state='down'] { border-left: 3px solid var(--down); opacity: 0.72; } pchead { display: flex; flex-direction: column; gap: 6px; } pcstate { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-dim); } parccard[data-state='up'] pcstate > gdot { background-color: var(--up); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.22); } parccard[data-state='boot'] pcstate > gdot { background-color: var(--boot); } parccard[data-state='down'] pcstate > gdot { background-color: var(--down); } pckind { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); } pckind[windows] { color: #7fb2ff; border-color: rgba(127, 178, 255, 0.35); } pcplayers { display: flex; flex-direction: column; gap: 8px; } pcnum { display: flex; align-items: baseline; gap: 7px; } pcnum > span { font-size: 30px; font-weight: 700; color: var(--green-soft); } pcbar { height: 6px; border-radius: 100px; background-color: rgba(255, 255, 255, 0.1); overflow: hidden; } pcfill { display: block; height: 100%; border-radius: 100px; background-image: linear-gradient(90deg, var(--teal), var(--green)); transition: width .6s ease; } pcmeta { display: flex; flex-direction: column; gap: 5px; } pcmeta > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 11px; border-radius: var(--radius-s); background-color: rgba(255, 255, 255, 0.05); font-size: 13px; } pcmeta > div > span:first-child { color: var(--ink-dim); } sadmin { display: flex; gap: 8px; margin-top: 4px; } sadmin > a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: var(--radius-s); border: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); transition: border-color .2s, color .2s; } sadmin > a:hover { border-color: var(--green); color: var(--ink); } sadmin glyph { font-size: 17px; } /* Boutons d'alimentation, injectés par admin.js sur chaque carte du parc. */ pcpower { display: flex; gap: 8px; margin-top: 4px; } pcpower > button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: var(--radius-s); border: 1px solid var(--line); background-color: rgba(255, 255, 255, 0.05); font-size: 13px; transition: border-color .2s, background-color .2s; } pcpower > button:hover { border-color: var(--green); background-color: rgba(76, 175, 80, 0.16); } pcpower > button[busy] { opacity: 0.4; pointer-events: none; } pcpower glyph { font-size: 17px; } /* ── Boutique ───────────────────────────────────────────────────────────────────────────── */ shopnav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } shopnav > a { display: flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: 100px; border: 1px solid var(--line); background-color: var(--panel); font-size: 14px; transition: border-color .2s, background-color .2s; } shopnav > a:hover { border-color: var(--green); background-color: rgba(76, 175, 80, 0.14); } shopnav glyph { font-size: 18px; } shopsection { display: block; scroll-margin-top: 20px; } shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; } shopcard { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background-color: var(--panel); backdrop-filter: blur(10px); transition: transform .25s, border-color .25s, box-shadow .25s; } shopcard:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--shadow); } shopcard[hidden] { opacity: 0.45; } simg { position: relative; height: 128px; background-size: cover; background-position: 50% 50%; } simg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(9, 32, 22, 0.9)); } stag, smode { position: absolute; top: 11px; z-index: 2; padding: 5px 11px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; } stag { left: 11px; background-color: var(--down); } smode { right: 11px; display: flex; align-items: center; gap: 5px; background-color: rgba(6, 20, 15, 0.85); border: 1px solid var(--line-strong); color: var(--green-soft); } smode glyph { font-size: 15px; } sbody { display: flex; flex-direction: column; gap: 8px; padding: 15px 17px; flex: 1; } sbody > p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; } sfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border-top: 1px solid var(--line); } sprice { display: flex; flex-direction: column; gap: 1px; } sold { font-size: 13px; color: var(--ink-dim); text-decoration: line-through; } snew { font-size: 20px; font-weight: 700; color: var(--green-soft); } snew > small { font-size: 12px; color: var(--ink-dim); margin-left: 3px; } spromo { font-size: 11px; color: var(--down); text-transform: uppercase; letter-spacing: 1px; } sfoot > a, sfoot > span { display: flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 100px; border: 1px solid var(--line-strong); background-image: linear-gradient(90deg, var(--teal), var(--teal-dark)); font-size: 13.5px; white-space: nowrap; transition: border-color .2s; } sfoot > a:hover { border-color: var(--green); } sfoot > span[nostock] { background: rgba(239, 83, 80, 0.18); border-color: rgba(239, 83, 80, 0.4); color: var(--ink-soft); } sfoot glyph { font-size: 17px; } gradebadge { display: inline-flex; align-self: flex-start; padding: 4px 11px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; color: var(--grade-color, var(--green-soft)); border: 1px solid var(--grade-color, var(--green)); background-color: rgba(0, 0, 0, 0.28); } /* ── Fiche article ──────────────────────────────────────────────────────────────────────── */ article-page { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; max-width: 1280px; margin: 0 auto; padding: 34px 28px; align-items: start; } aimg { display: block; height: 340px; border-radius: var(--radius); background-size: cover; background-position: 50% 50%; border: 1px solid var(--line); } aright { display: flex; flex-direction: column; gap: 15px; } abreadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; } abreadcrumb > a:hover { color: var(--green-soft); } abreadcrumb glyph { font-size: 16px; } aright > p { color: var(--ink-soft); line-height: 1.7; } ainfos, offerinfos { display: flex; flex-wrap: wrap; gap: 8px; } ainfos > div, offerinfos > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 148px; padding: 12px 15px; border-radius: var(--radius-s); background-color: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); } ainfos > div > span:first-child, offerinfos > div > span:first-child { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; } ainfos > div > span:last-child, offerinfos > div > span:last-child { font-size: 16px; } abuy { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--radius); border: 1px solid var(--line-strong); background-color: rgba(9, 32, 22, 0.72); } abuy snew { font-size: 27px; } abuy a[buy], abuy button[buy] { display: flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 100px; border: 1px solid var(--line-strong); background-image: linear-gradient(90deg, var(--teal), var(--teal-dark)); font-size: 15.5px; transition: border-color .2s, transform .2s; } abuy a[buy]:hover, abuy button[buy]:hover { border-color: var(--green); transform: translateY(-2px); } abuy a[warn] { background-image: linear-gradient(90deg, #5d381f, #271f13); border-color: rgba(255, 165, 0, 0.35); } abuy a[owned] { background-image: none; background-color: rgba(76, 175, 80, 0.2); } abuy span[nostock] { color: var(--down); font-size: 15px; } abuy glyph { font-size: 20px; } ahint { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--boot); } ahint glyph { font-size: 18px; } permnodes { display: flex; flex-wrap: wrap; gap: 6px; } permnode { display: inline-flex; padding: 4px 10px; border-radius: var(--radius-s); background-color: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; color: var(--ink-soft); } permnode[more] { color: var(--green-soft); border-color: var(--line-strong); } /* ── Attente de paiement ────────────────────────────────────────────────────────────────── */ waiting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 70vh; padding: 40px; text-align: center; } waiting > p { color: var(--ink-soft); max-width: 460px; } wspin, sspin { display: block; width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.14); border-top-color: var(--green); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Formulaires ────────────────────────────────────────────────────────────────────────── */ login { display: flex; flex-direction: column; place-self: center; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 430px; margin: 0 auto; padding: 40px 22px; color: var(--ink); } login[wide] { max-width: 720px; } login > img { height: 108px; } login > h2 { align-self: flex-start; } login > blocktitle, login > hint, login > notif, login > permnodes { width: 100%; } login > sso, login > orsep { width: 100%; } /* ── Connexion Discord ──────────────────────────────────────────────────────────────────── */ /* Le bouton passe avant le formulaire : c'est le chemin recommandé, celui qui rapporte au joueur ses grades sans qu'il ait à saisir quoi que ce soit. */ sso { display: flex; flex-direction: column; gap: 10px; } a[discord] { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 15px 20px; border-radius: var(--radius-s); background-color: var(--discord); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 15.5px; font-weight: 700; color: #ffffff; transition: background-color .2s, transform .2s, box-shadow .2s; } a[discord]:hover { background-color: #4752c4; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(88, 101, 242, 0.32); } a[discord] > svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; } ssohint { display: block; font-size: 13px; line-height: 1.55; color: var(--ink-dim); text-align: center; } /* Séparateur « ou » : deux filets et un mot, sans balise de décoration supplémentaire. */ orsep { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } orsep::before, orsep::after { content: ''; flex: 1; height: 1px; background-color: var(--line); } /* Compte relié à Discord, affiché dans l'espace client et l'administration. */ discordtag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 100px; border: 1px solid rgba(88, 101, 242, 0.45); background-color: rgba(88, 101, 242, 0.16); font-size: 13px; font-weight: 600; color: #c3c8ff; } discordtag > svg { width: 15px; height: 15px; fill: currentColor; } login > content { display: flex; flex-direction: column; gap: 6px; width: 100%; } login > content > div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 16px; border-radius: var(--radius-s); background-color: rgba(255, 255, 255, 0.07); } login > content > a { text-align: center; font-size: 14px; color: var(--ink-soft); } login > content > a:hover { color: var(--green-soft); } login > form { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel-strong); backdrop-filter: blur(12px); } login > form > div { display: flex; flex-direction: column; position: relative; } login > form > div > span { position: absolute; top: 9px; left: 17px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); pointer-events: none; } login > form > div > input, login > form > div > select, login > form > div > textarea { padding: 27px 16px 10px; border-radius: var(--radius-s); background-color: rgba(255, 255, 255, 0.08); border: 1px solid transparent; transition: border-color .2s, background-color .2s; } login > form > div > input:focus, login > form > div > select:focus, login > form > div > textarea:focus { border-color: var(--green); background-color: rgba(255, 255, 255, 0.12); } login > form > div > textarea { height: 168px; resize: vertical; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; line-height: 1.6; } login > form > div > select > option { background-color: #14261e; } btnblock { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } btnblock > button { flex: 1; min-width: 140px; padding: 13px; border-radius: var(--radius-s); text-transform: uppercase; letter-spacing: 1px; background-image: linear-gradient(90deg, var(--teal), var(--teal-dark)); border: 1px solid var(--line-strong); transition: border-color .2s; } btnblock > button:hover { border-color: var(--green); } btnblock > a { display: flex; align-items: center; justify-content: center; padding: 13px 18px; border-radius: var(--radius-s); border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); transition: border-color .2s, color .2s; } btnblock > a:hover { border-color: var(--green); color: var(--ink); } dangerzone { display: flex; width: 100%; padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(239, 83, 80, 0.28); } dangerzone > a { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; border-radius: var(--radius-s); border: 1px solid rgba(239, 83, 80, 0.35); color: #ff8a85; font-size: 14px; transition: background-color .2s; } dangerzone > a:hover { background-color: rgba(239, 83, 80, 0.14); } searchbar { display: block; margin-bottom: 16px; } searchbar form { display: flex; gap: 8px; } searchbar input { flex: 1; padding: 12px 16px; border-radius: var(--radius-s); background-color: rgba(255, 255, 255, 0.08); border: 1px solid transparent; } searchbar input:focus { border-color: var(--green); } searchbar button { padding: 12px 20px; border-radius: var(--radius-s); border: 1px solid var(--line-strong); background-image: linear-gradient(90deg, var(--teal), var(--teal-dark)); } /* ── Confirmation et clés ───────────────────────────────────────────────────────────────── */ confirmbox, keybox { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 40px auto; padding: 32px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel-strong); backdrop-filter: blur(12px); } confirmbox { border-color: rgba(239, 83, 80, 0.35); } confirmbox > h2, keybox > h2 { display: flex; align-items: center; gap: 11px; } confirmbox > h2 > glyph { color: var(--down); } keybox > h2 > glyph { color: var(--green-soft); } confirmbox > p, keybox > p { color: var(--ink-soft); line-height: 1.65; } cactions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } cactions > a, cactions > button { padding: 12px 22px; border-radius: var(--radius-s); border: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); background: transparent; transition: border-color .2s, color .2s; } cactions > a:hover { border-color: var(--green); color: var(--ink); } cactions > button[danger] { border-color: rgba(239, 83, 80, 0.45); background-color: rgba(239, 83, 80, 0.16); color: #ff8a85; } cactions > button[danger]:hover { background-color: rgba(239, 83, 80, 0.28); } keyfield { align-self: stretch; justify-content: space-between; font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; } keybox pre { margin: 0; padding: 16px 18px; border-radius: var(--radius-s); background-color: rgba(0, 0, 0, 0.42); border: 1px solid var(--line); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--ink-soft); overflow-x: auto; cursor: pointer; } /* ── Listes : droits, liaisons, factures, grades, comptes, file ─────────────────────────── */ entlist, linklist, facturelist, gradelist, userlist, queuelist { display: flex; flex-direction: column; gap: 8px; } entrow, linkrow, facturerow, graderow, userrow, queuerow { display: grid; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-s); border: 1px solid var(--line); background-color: var(--panel); transition: border-color .2s; } entrow:hover, linkrow:hover, facturerow:hover, graderow:hover, userrow:hover { border-color: var(--line-strong); } entrow { grid-template-columns: minmax(0, 2fr) auto auto minmax(0, 1fr) auto; } entrow[off] { opacity: 0.55; } einfo { display: flex; flex-direction: column; } einfo > span { font-size: 15.5px; } estate { font-size: 13px; color: var(--green-soft); text-transform: uppercase; letter-spacing: 1px; } entrow[off] estate { color: var(--ink-dim); } edate { font-size: 13px; color: var(--ink-dim); } eact > a, lact > a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); white-space: nowrap; transition: border-color .2s, color .2s; } eact > a[cancel]:hover, lact > a[cancel]:hover { border-color: var(--down); color: #ff8a85; } eact glyph, lact glyph { font-size: 16px; } linkrow { grid-template-columns: minmax(0, 1fr) auto auto; } linkrow[pending] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } lgame { display: flex; flex-direction: column; } lgame > span { font-size: 15.5px; } lplayer { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--green-soft); } lplayer glyph { font-size: 18px; } lbody { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } lcode { font-size: 21px; font-weight: 700; letter-spacing: 5px; color: var(--green-soft); } lhint { font-size: 13px; color: var(--ink-dim); line-height: 1.55; } lbody form { display: flex; } lbody button { display: flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line-strong); background-image: linear-gradient(90deg, var(--teal), var(--teal-dark)); font-size: 14px; } lbody button:hover { border-color: var(--green); } lbody glyph { font-size: 18px; } facturerow { grid-template-columns: auto minmax(0, 2fr) auto auto auto; } fref { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--ink-dim); } famount { font-size: 16px; font-weight: 600; color: var(--green-soft); } fdate { font-size: 13px; color: var(--ink-dim); } fact > a, sadmin > a { white-space: nowrap; } fact > a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); } fact > a:hover { border-color: var(--green); color: var(--ink); } fact glyph { font-size: 16px; } graderow { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) auto; border-left: 3px solid var(--grade-color, var(--green)); } gweight { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.07); font-weight: 700; color: var(--grade-color, var(--green-soft)); } gname { display: flex; flex-direction: column; font-size: 15.5px; } gprefix { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--ink-soft); } gperms { font-size: 13px; color: var(--ink-dim); text-align: right; } userrow { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 2fr) auto; } userrow[banned] { border-left: 3px solid var(--down); } uid { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--ink-dim); } uname { font-size: 15.5px; } umail { font-size: 14px; color: var(--ink-soft); } ulevel { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); } queuerow { grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto auto; font-size: 13px; } queuerow[pending] { border-left: 3px solid var(--boot); } qid { font-family: ui-monospace, Consolas, monospace; color: var(--ink-dim); } qaction { color: var(--green-soft); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } qtarget { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; } qstate, qdate { color: var(--ink-dim); } /* ── Profil ─────────────────────────────────────────────────────────────────────────────── */ profilhead { display: flex; align-items: center; gap: 18px; padding: 22px; margin-bottom: 16px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel); } profilhead[banned] { border-color: rgba(239, 83, 80, 0.4); } avatar { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-image: linear-gradient(135deg, var(--teal), var(--green)); font-size: 27px; font-weight: 700; flex-shrink: 0; } phinfo { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } phinfo > span:first-child { font-size: 21px; font-weight: 600; } phinfo > span:last-child { font-size: 14px; color: var(--ink-soft); } phgrades { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } phgrades > span { font-size: 13px; color: var(--ink-dim); } pstate { padding: 6px 13px; border-radius: 100px; background-color: rgba(239, 83, 80, 0.18); border: 1px solid rgba(239, 83, 80, 0.4); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; } flex-column { display: flex; flex-direction: column; gap: 14px; } useractions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } useractions > a { padding: 11px 20px; border-radius: var(--radius-s); border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); transition: border-color .2s, color .2s; } useractions > a:hover { border-color: var(--green); color: var(--ink); } useractions > a[del] { border-color: rgba(239, 83, 80, 0.35); color: #ff8a85; } useractions > a[del]:hover { background-color: rgba(239, 83, 80, 0.14); } /* ── Tableau de bord ────────────────────────────────────────────────────────────────────── */ statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; } stattile { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel); } stattile > glyph { font-size: 27px; color: var(--green-soft); } svalue { font-size: 27px; font-weight: 700; } slabel { font-size: 12.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; } /* ── Journal ────────────────────────────────────────────────────────────────────────────── */ weblog, banlist { display: flex; flex-direction: column; max-height: 460px; overflow-y: auto; border-radius: var(--radius-s); border: 1px solid var(--line); background-color: rgba(0, 0, 0, 0.3); font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; } wlhead, weblog wlrow, banlist > div { display: grid; grid-template-columns: 138px 128px 128px minmax(0, 1fr) 68px; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } wlhead { position: sticky; top: 0; background-color: rgba(9, 32, 22, 0.96); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; } weblog wlrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } banlist > div { grid-template-columns: 160px minmax(0, 1fr) auto; } banlist button { padding: 4px 12px; border-radius: 100px; border: 1px solid var(--line); background: transparent; font-size: 12px; color: var(--ink-soft); } banlist button:hover { border-color: var(--green); color: var(--ink); } /* ── Facture ────────────────────────────────────────────────────────────────────────────── */ facture { display: flex; flex-direction: column; gap: 22px; max-width: 840px; margin: 34px auto; padding: 40px; border-radius: var(--radius); border: 1px solid var(--line); background-color: var(--panel-strong); } fhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } fbrand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; } fbrand img { height: 44px; } fmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--ink-soft); font-size: 14px; } fparties { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } fparty > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } fparty > div > span:first-child { color: var(--ink-dim); } ftable { display: flex; flex-direction: column; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--line); } frow { display: grid; grid-template-columns: minmax(0, 3fr) 1fr 1fr; gap: 16px; padding: 12px 16px; font-size: 14.5px; } frow[head] { background-color: rgba(255, 255, 255, 0.07); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; font-size: 12.5px; } frow > span:not(:first-child) { text-align: right; } ftotals { display: flex; flex-direction: column; align-self: flex-end; min-width: 296px; gap: 4px; } ftotals > div { display: flex; justify-content: space-between; gap: 22px; padding: 7px 0; font-size: 14.5px; } ftotals > div[total] { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 12px; font-size: 19px; font-weight: 700; color: var(--green-soft); } ffoot { text-align: center; font-size: 12.5px; color: var(--ink-dim); padding-top: 16px; border-top: 1px solid var(--line); } /* ── Pages légales ──────────────────────────────────────────────────────────────────────── */ legal { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin: 0 auto; padding: 40px 28px 60px; } legal h1 { margin-bottom: 12px; } legal h2 { font-size: 20px; margin-top: 20px; color: var(--green-soft); } legal p { color: var(--ink-soft); line-height: 1.75; font-size: 15.5px; } /* ── Pied de page ───────────────────────────────────────────────────────────────────────── */ footer { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 48px; max-width: var(--wrap); margin: 0 auto; padding: 52px 28px 44px; border-top: 1px solid var(--line); } footer > div { display: flex; flex-direction: column; gap: 11px; } footer > div > span:first-child { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } footer img { height: 54px; align-self: flex-start; } footer > div > span { font-size: 14px; color: var(--ink-soft); line-height: 1.65; } copy { font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; } footer links { display: flex; flex-direction: column; gap: 8px; } footer links > a { font-size: 14px; color: var(--ink-soft); transition: color .2s; } footer links > a:hover { color: var(--green-soft); } /* ── Adaptatif ──────────────────────────────────────────────────────────────────────────── */ /* Animations décoratives coupées si le visiteur l'a demandé au niveau du système. */ @media (prefers-reduced-motion: reduce) { scrolldown > glyph, gstate[up] > gdot { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; } } @media (max-width: 1000px) { cover > img { height: 88px; } cover[home] { padding: 64px 20px 110px; } gamehero { min-height: 290px; padding: 30px 16px; } article-page { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 14px; } aimg { height: 216px; } fparties { grid-template-columns: 1fr; gap: 18px; } footer { grid-template-columns: 1fr; gap: 26px; } entrow, linkrow, linkrow[pending], facturerow, graderow, userrow, queuerow { grid-template-columns: minmax(0, 1fr); gap: 8px; } gperms, edate { text-align: left; } wlhead, weblog wlrow { grid-template-columns: 106px 112px minmax(0, 1fr); } wlhead > span:nth-child(n+4), weblog wlrow > span:nth-child(n+4) { display: none; } facture { padding: 24px; } } @media (max-width: 640px) { /* Les compteurs sont dimensionnés par un minimum : à deux côte à côte, ce minimum finit par dépasser la largeur de l'écran. On les laisse se partager la place disponible. */ livecount, statustop { width: 100%; } livecount > div, statustop > div { flex: 1; min-width: 132px; padding: 14px 16px; } livecount span, statustop span { font-size: 26px; } /* Les pastilles porteuses d'une adresse de serveur peuvent être plus longues que l'écran : on les autorise à se replier plutôt qu'à pousser la page de côté. */ gaddress, pcaddr, lcode, keyfield { max-width: 100%; flex-wrap: wrap; word-break: break-word; } ghstats { gap: 18px; flex-wrap: wrap; } argu { padding: 22px; } /* Sous cette largeur, la largeur MINIMALE des colonnes dépasse celle de l'écran : la grille ne peut plus tenir sa promesse et pousse la page de côté. Une seule colonne, libre de rétrécir, règle le cas pour de bon. */ gamegrid, parclist, shopgrid, statgrid, argugrid { grid-template-columns: minmax(0, 1fr); } /* Un bouton d'appel plus large que l'écran : on le laisse occuper la ligne entière. */ cover > links { width: 100%; } cover > links > a { flex: 1; justify-content: center; min-width: 0; padding: 13px 16px; } }