/* ========================================================================= profile.css — profil.php (espace personnel) et user.php (fiche publique). À charger APRÈS style.css et site-chrome.css. style.css reste nécessaire pour les pastilles de rang (.xp-rank-*) rendues par lib/xp_rank.php ; les neutralisations en tête annulent ce qu'elle fait fuir dans ces pages. ========================================================================= */ .pf { position: relative; padding-bottom: 70px; isolation: isolate; /* Sans ce fond, la page s'arrêtait au dégradé du hero puis retombait sur le radial noir que style.css pose sur : la teinte changeait en cours de page, et les cartes étant translucides, la cassure se voyait au travers. --void est la couleur sur laquelle le hero se termine, la transition est donc invisible. Le hero reste au-dessus, son .pf-hero-bg étant en z-index négatif dans le contexte d'empilement ouvert par isolation: isolate. */ background: var(--void); color: var(--text); font-family: 'Figtree', system-ui, -apple-system, sans-serif; line-height: 1.55; } .pf *, .pf *::before, .pf *::after { box-sizing: border-box; } .pf img { border-radius: 0; } /* `:where()` ne compte pas dans la specificite : la regle vaut (0,0,1), juste assez pour battre le `a { color:#DDDDDD }` de style.css par l'ordre de chargement, et assez peu pour ceder devant tout composant qui pose sa propre couleur — `.btn-prime`, `.sc-period.is-active`… Ecrite `.pf a`, elle valait (0,1,1) et rendait ces composants illisibles. */ :where(.pf) a { color: inherit; text-decoration: none; } /* `:where()` neutralise la spécificité : sans lui la règle vaut (0,1,1) et l'emporte sur `.display` (0,1,0), si bien que tous les titres retombaient sur Figtree au lieu d'Archivo. Même correction que pour les liens. */ :where(.pf) h1, :where(.pf) h2, :where(.pf) h3, :where(.pf) h4 { color: var(--text); font-family: inherit; } .pf p { color: inherit; } .pf .kicker { color: var(--muted); } .pf label { color: var(--muted); } /* ------------------------------------------------------------------ hero -- */ .pf-hero { position: relative; padding: 44px 0 30px; } .pf-hero-bg { position: absolute; inset: -120px 0 0; z-index: -1; overflow: hidden; pointer-events: none; } .pf-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 12, .3) 0%, rgba(4, 5, 12, .7) 60%, var(--void) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); } /* Les cartes se touchaient : elles n'avaient ni marge ni conteneur pour les espacer. La grille s'en charge une fois pour toutes, l'alerte comprise. */ .pf-stack { display: grid; gap: 18px; } .pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pf-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 12px 0 0; } .pf-head p.pf-lede { color: var(--muted); margin: 12px 0 0; max-width: 52ch; line-height: 1.6; } /* Identité : avatar cerclé + nom + rang + barre de niveau. */ .pf-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; } .pf-avatar { position: relative; width: 132px; height: 132px; border-radius: 50%; padding: 3px; background: #fff; box-shadow: 0 0 44px -16px rgba(126, 107, 255, .8); } .pf-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--panel); } .pf-name-row { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .pf-name-row h1 { margin: 0; } .pf-rank-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #fff; } /* Cette pastille-ci garde son aplat dégradé. Les classes .xp-rank-* ne fournissent plus qu'une teinte de bordure depuis le passage des pastilles de niveau au contour, mais le bandeau du profil est un emplacement large où l'aplat porte le prestige du rang : on le rétablit ici, sans revenir sur le traitement des petites pastilles posées à côté des pseudos. */ .pf-rank-pill.xp-rank-beginner { background: linear-gradient(135deg, #6b7280, #374151); } .pf-rank-pill.xp-rank-apprentice { background: linear-gradient(135deg, #38d977, #15803d); } .pf-rank-pill.xp-rank-confirmed { background: linear-gradient(135deg, #fde047, #ca8a04); color: #2b1d00; } .pf-rank-pill.xp-rank-expert { background: linear-gradient(135deg, #fb7185, #b91c1c); } .pf-rank-pill.xp-rank-pro { background: linear-gradient(135deg, #60a5fa, #1d4ed8); } .pf-rank-pill.xp-rank-legend { background: linear-gradient(135deg, #fff7ad, #f59e0b 55%, #a16207); color: #2b1d00; } .pf-rank-pill.xp-rank-admin { background: linear-gradient(135deg, #c084fc, #7e22ce 58%, #4c1d95); color: #fff; } .pf-joined { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } .pf-level { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 18px; } .pf-level-badge { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; border: 1px solid rgba(140, 160, 255, .28); background: linear-gradient(160deg, rgba(42, 181, 255, .16), rgba(126, 107, 255, .14)); text-align: center; line-height: 1; } .pf-level-badge span { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 800; } .pf-level-badge strong { display: block; margin-top: 3px; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; } .pf-xp { max-width: none; } .pf-xp b { font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pf-xp-track { height: 8px; margin: 9px 0 8px; border-radius: 999px; background: rgba(140, 160, 255, .1); overflow: hidden; } .pf-xp-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--magenta)); box-shadow: 0 0 18px -4px rgba(126, 107, 255, .9); } .pf-xp p { margin: 0; font-size: 11.5px; color: var(--dim); } .pf-xp p b { color: var(--text); } /* ------------------------------------------------------------- chiffres -- */ .pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; } .pf-stat { padding: 17px 16px 16px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(16, 20, 42, .7), rgba(10, 13, 27, .4)); transition: border-color .25s, transform .25s; } .pf-stat:hover { border-color: rgba(140, 160, 255, .26); transform: translateY(-3px); } .pf-stat strong { display: block; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 1.85rem; line-height: 1; font-variant-numeric: tabular-nums; } .pf-stat strong small { font-size: .9rem; color: var(--muted); font-weight: 700; margin-left: 4px; } .pf-stat em { display: block; margin-top: 9px; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .pf-stat span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--dim); } .pf-stat.is-xp strong { color: var(--cyan); } .pf-stat.is-success strong { color: var(--score); } .pf-stat.is-streak strong { color: var(--gold); } /* --------------------------------------------------------- mises en avant -- */ .pf-feature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .pf-feature { display: flex; align-items: center; gap: 15px; padding: 17px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(16, 20, 42, .7), rgba(10, 13, 27, .4)); transition: border-color .25s, transform .25s; } .pf-feature:hover { border-color: rgba(140, 160, 255, .26); transform: translateY(-3px); } .pf-feature > img { width: 54px; height: 54px; object-fit: contain; flex: none; } .pf-feature-body { min-width: 0; } .pf-feature .kicker { font-size: 9px; letter-spacing: .17em; } .pf-feature strong { display: block; margin: 6px 0 3px; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-feature small { display: block; font-size: 11.5px; color: var(--dim); } /* Anneau de progression : un simple conic-gradient piloté par --progress. */ .pf-ring { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--score) calc(var(--progress, 0) * 1%), rgba(140, 160, 255, .12) 0); } .pf-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); } /* Le signe se compose plus petit que les chiffres : a 100 % le libelle tenait sinon toute la largeur interieure de l'anneau. */ .pf-ring i { font-style: normal; font-size: .72em; } .pf-ring b { position: relative; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: .84rem; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- sections -- */ .pf-section { margin-top: 34px; } .pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } /* --------------------------------------------------------------- succès -- */ .pf-ach-game { padding: 14px 0; border-top: 1px solid var(--line-soft); } .pf-ach-game:first-child { border-top: 0; padding-top: 0; } .pf-ach-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; } .pf-ach-head strong { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 800; } .pf-ach-head img { width: 24px; height: 24px; object-fit: contain; } .pf-ach-head span { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .achievement-icons { display: flex; flex-wrap: wrap; gap: 9px; } .achievement-badge { position: relative; display: inline-block; } .achievement-icon { width: 44px; height: 44px; object-fit: contain; transition: transform .2s; } .achievement-badge:hover .achievement-icon, .achievement-badge:focus-visible .achievement-icon { transform: translateY(-3px) scale(1.06); } .achievement-icon.locked, .achievement-popin img.locked { filter: grayscale(100%); opacity: .38; } /* ------------------------------------------------------ espace personnel -- */ .pf-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* Les champs sont réunis en deux groupes, selon qu'ils sont publics ou non.
et portent ce sens dans le document lui-même, pas seulement à l'œil : un lecteur d'écran annonce la légende avec chaque champ du groupe. D'où le retrait de leur habillage natif, inutilisable ici. */ .pf-form { display: grid; gap: 22px; } .pf-group { border: 0; margin: 0; padding: 0; min-width: 0; } .pf-group + .pf-group { padding-top: 20px; border-top: 1px solid var(--line-soft); } .pf-group > legend { display: block; width: 100%; padding: 0; margin-bottom: 14px; } .pf-group > legend b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .pf-group > legend span { display: block; margin-top: 4px; font-size: 12px; color: var(--dim); line-height: 1.45; } .pf-avatar-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; } .pf-avatar-edit { position: relative; width: 118px; } .pf-avatar-edit .avatar { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid rgba(140, 160, 255, .3); box-shadow: 0 0 34px -10px rgba(126, 107, 255, .8); transition: transform .2s, border-color .2s; } .pf-avatar-edit .avatar:hover { transform: scale(1.03); border-color: rgba(155, 140, 255, .7); } .avatar-pick { position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; transition: background .2s, border-color .2s; } .avatar-pick:hover { background: var(--panel); border-color: rgba(140, 160, 255, .4); } .avatar-pick svg { width: 15px; height: 15px; } .pf-note { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 18px; padding: 13px 15px; border-radius: var(--r-sm); background: rgba(255, 201, 107, .07); box-shadow: inset 0 0 0 1px rgba(255, 201, 107, .22); color: var(--muted); font-size: .86rem; line-height: 1.5; } .pf-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gold); } .pf-danger { border-color: rgba(255, 92, 92, .3); } .pf-danger .sc-card-head h3 { color: #FF8A8A; } .pf-danger p { color: var(--muted); max-width: 62ch; margin: 0; font-size: .9rem; line-height: 1.55; } .pf-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-bottom: 14px; } .btn-danger { color: #FFB3B3; background: rgba(255, 74, 74, .07); box-shadow: inset 0 0 0 1px rgba(255, 100, 100, .34); } .btn-danger:hover, .btn-danger:focus-visible { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 100, 100, .6), 0 14px 34px -16px rgba(255, 74, 74, .7); } .btn-danger::before { opacity: 0 !important; animation: none !important; } /* Série de connexion. */ /* ---------------------------------------------------------------- modales -- */ .modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 6, 18, .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s; } .modal.active { opacity: 1; pointer-events: auto; } .modal-content { width: 100%; max-width: 420px; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(16, 20, 42, .98), rgba(8, 11, 26, .98)); box-shadow: 0 34px 90px -30px rgba(0, 0, 0, .95); text-align: center; color: var(--text); } .modal-content h2 { margin: 0 0 10px; font-size: 1.4rem; } .modal-content p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; } .modal-actions { display: flex; gap: 10px; margin-top: 22px; } .modal-actions .btn { flex: 1; } .avatar-editor-content { max-width: 560px; text-align: left; } .avatar-editor-stage { display: grid; place-items: center; margin: 16px 0; } #avatarCanvas { width: min(340px, 74vw); height: min(340px, 74vw); border-radius: 50%; background: var(--void); border: 2px solid rgba(140, 160, 255, .35); box-shadow: 0 0 40px -12px rgba(126, 107, 255, .8); touch-action: none; } .avatar-editor-controls { display: grid; gap: 10px; margin-top: 12px; } .avatar-editor-controls label { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .avatar-editor-controls input[type="range"] { width: 100%; padding: 0; accent-color: #4FDCFF; background: transparent; } .avatar-editor-help { color: var(--dim); font-size: 12.5px; line-height: 1.5; margin: 6px 0 0; } .avatar-editor-actions { display: flex; gap: 10px; margin-top: 20px; } .avatar-editor-actions .btn { flex: 1; } /* -------------------------------------------- neutralisation de style.css -- */ /* Les pastilles de rang viennent de style.css ; on les empêche de pousser. */ .pf .xp-rank-badge, .pf .xp-level-badge { flex: none; } /* ----------------------------------------------------------- responsive --- */ @media (max-width: 1000px) { .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-grid { grid-template-columns: minmax(0, 1fr); } .pf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .pf { padding-bottom: 40px; } .pf-hero { padding: 28px 0 22px; } /* Identité centrée : sans le bandeau « Fiche joueur », l'avatar devient le point d'entrée de la page et gagne à être posé au milieu. */ .pf-identity { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; text-align: center; } .pf-avatar { width: 116px; height: 116px; } .pf-name-row { justify-content: center; } .pf-joined { margin-top: 10px; } /* La jauge d'XP prend toute la largeur sous l'identité. */ .pf-level { grid-template-columns: auto minmax(0, 1fr); gap: 14px; text-align: left; margin-top: 22px; } /* Les quatre chiffres en 2x2 plutôt qu'empilés sur quatre écrans. */ .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pf-stat { padding: 14px 13px 13px; } .pf-stat strong { font-size: 1.5rem; } .pf-stat em { font-size: 9px; letter-spacing: .1em; } .pf-stat span { font-size: 10.5px; } /* Les quatre mises en avant restent en 2x2. */ .pf-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pf-feature { flex-direction: column; align-items: flex-start; gap: 11px; padding: 14px; } .pf-feature > img, .pf-ring { width: 42px; height: 42px; } /* A 42px l'interieur ne fait plus que 32px et « 92% » en mesurait 33 : le chiffre touchait l'anneau. On affine le trait et on retire l'elargissement de la fonte, qui coutait a lui seul 10 % de largeur. */ .pf-ring::before { inset: 4px; } .pf-ring b { font-size: .7rem; font-stretch: 100%; } .pf-feature strong { font-size: .88rem; white-space: normal; } .pf-feature small { font-size: 11px; } .pf-form-grid { grid-template-columns: minmax(0, 1fr); } .pf-avatar-row { grid-template-columns: minmax(0, 1fr); justify-items: center; } .pf-danger-row { flex-direction: column; align-items: stretch; gap: 16px; } .pf-danger-row .btn { width: 100%; } .achievement-popin { width: 180px; } } @media (max-width: 560px) { .pf-head { display: block; } .pf-head .btn { margin-top: 16px; } .modal-actions { flex-direction: column; } } /* ------------------------------------------------------ modale de badge -- Les bulles au survol ne fonctionnaient ni au doigt ni au clavier, et la dernière colonne de chaque ligne débordait. Une modale unique, ouverte au clic et remplie en JS, remplace les soixante bulles du document. */ .ach-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 6, 18, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: achFond .18s ease-out; } .ach-modal[hidden] { display: none; } @keyframes achFond { from { opacity: 0; } } .ach-modal-card { position: relative; width: 100%; max-width: 340px; padding: 30px 26px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(18, 22, 46, .99), rgba(8, 11, 26, .99)); box-shadow: 0 34px 90px -30px rgba(0, 0, 0, .95); text-align: center; color: var(--text); animation: achCarte .22s cubic-bezier(.2, .8, .2, 1); } @keyframes achCarte { from { opacity: 0; transform: translateY(14px) scale(.97); } } .ach-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(140, 160, 255, .07); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--muted); cursor: pointer; transition: color .2s, background .2s; } .ach-close:hover, .ach-close:focus-visible { color: var(--text); background: rgba(140, 160, 255, .14); } .ach-close svg { width: 16px; height: 16px; } /* Halo derrière le badge, teinté par sa couleur dominante. C'est un simple dégradé radial, sans filter: blur() — même rendu, et rien à recalculer. La teinte est posée en JS dans --ach-halo ; la valeur de repli sert tant qu'elle n'est pas calculée, et pour les badges verrouillés. */ .ach-visuel { position: relative; display: grid; place-items: center; margin: 4px auto 16px; padding: 14px 0; } .ach-visuel::before { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, var(--ach-halo, rgba(126, 107, 255, .5)) 0%, var(--ach-halo-attenue, rgba(126, 107, 255, .16)) 42%, transparent 70%); transition: background .35s ease; } .ach-modal-card img { position: relative; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 10px 24px var(--ach-halo-attenue, rgba(126, 107, 255, .45))); } .ach-modal-card img.locked { filter: grayscale(100%); opacity: .4; } .ach-etat { margin: 0 0 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .ach-etat.is-ok { color: var(--score); } .ach-modal-card h3 { margin: 0 0 10px; font-family: 'Archivo', sans-serif; font-stretch: 106%; font-weight: 800; font-size: 1.25rem; line-height: 1.2; text-wrap: balance; } .ach-desc { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; } .ach-date { margin: 14px 0 0; font-size: 11.5px; color: var(--dim); } /* Le badge devient un bouton : on annule l'habillage natif. */ .achievement-badge { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; } .achievement-badge:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } /* -------------------------------------------- noms de jeux dans le profil -- La règle générale tronque le nom à 62px sous 620px, pour faire tenir cinq colonnes sur les pages de scores. Les tableaux du profil n'en ont que trois : le nom peut s'afficher entier, sur deux lignes au besoin. */ .pf .sc-gname { align-items: flex-start; } .pf .sc-gname span { max-width: none; white-space: normal; overflow: visible; line-height: 1.25; } .pf .sc-gname img { margin-top: 1px; } /* La colonne du jeu reste la plus large : c'est elle qui porte le nom, les deux autres ne contiennent qu'un rang et un nombre. Sans ça « Basket Shot Pro » se cassait sur trois lignes. */ .pf .sc-table th:first-child, .pf .sc-table td:first-child { width: 48%; } .pf .sc-table th:nth-child(2), .pf .sc-table td:nth-child(2) { white-space: nowrap; } @media (max-width: 620px) { .pf .sc-table th, .pf .sc-table td { padding: 10px 6px; } .pf .sc-gname { font-size: .84rem; } .pf .sc-gname span { max-width: none; } }