/*===================================================================== CSS PROFIL MEMBRE — Bet for Fun Fichier : css/profil.css (à ajouter dans le de index.html) =====================================================================*/ /* ======================================== HERO PROFIL ======================================== */ /* Variables de couleurs — valeurs par défaut (violet BFF) */ /* Surchargeables dans chaque CSS d'équipe (TFC.css, PSG.css, etc.) */ :root { --hero-color-1: #2a2050; --hero-color-2: #5d4f8a; --hero-color-3: #7c6bae; } .profil-hero { position: relative; background: linear-gradient(135deg, var(--hero-color-1) 0%, var(--hero-color-2) 50%, var(--hero-color-3) 100%); padding: 50px 20px 0; margin-top: 10px; text-align: center; overflow: hidden; } .profil-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.05) 49.5%, rgba(255,255,255,.05) 50.5%, transparent 50.5%), radial-gradient(circle at 50% 100%, transparent 50px, rgba(255,255,255,.03) 50px, rgba(255,255,255,.03) 52px, transparent 52px); pointer-events: none; } .profil-avatar-wrap { position: relative; display: inline-block; margin-bottom: 10px; } .profil-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); box-shadow: 0 4px 18px rgba(0,0,0,.3); object-fit: cover; background: #3a3060; cursor: pointer; } .profil-avatar:active { opacity: .8; } .profil-rank-badge { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; } .profil-rank-badge img { width: 18px; height: 18px; } .profil-rank-badge span { font-size: .6rem; font-weight: 800; color: var(--hero-color-2); } .profil-pseudo { font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: .5px; text-transform: uppercase; } .profil-subtitle { font-size: .68rem; color: rgba(255,255,255,.55); margin-bottom: 4px; } .profil-admin-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16c784; margin-right: 4px; vertical-align: middle; } /* Barre de progression rang Hall of Fame */ .profil-rank-bar { text-align: center; margin-bottom: 14px; } .profil-rank-bar__text { font-size: .75rem; font-weight: 700; color: #fff; } .profil-rank-bar__text sup { font-size: .5rem; } .profil-rank-bar__text small { font-weight: 500; color: rgba(255,255,255,.5); font-size: .6rem; } /* ======================================== ONGLETS ======================================== */ .profil-tabs { display: flex; background: rgba(0,0,0,.15); } .profil-tab { flex: 1; padding: 11px 4px; text-align: center; font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.5); text-decoration: none; text-transform: uppercase; letter-spacing: .3px; border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; } .profil-tab:active { opacity: .7; } .profil-tab--active { color: #fff; border-bottom-color: #f0c040; } /* ======================================== CONTENU DES ONGLETS ======================================== */ .tab-content { display: none; padding: 12px; } .tab-content--active { display: block; } /* ======================================== ONGLET : COMPÉTITIONS ======================================== */ .compet-card { background: #fff; border-radius: 14px; border: 1px solid #eae7f2; padding: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform .1s; text-decoration: none !important; color: inherit; -webkit-tap-highlight-color: transparent; } .compet-card:active { transform: scale(.98); } .compet-card__logo { width: 48px; height: 48px; border-radius: 10px; background: #fff; flex-shrink: 0; object-fit: contain; padding: 4px; } .compet-card__info { flex: 1; min-width: 0; } .compet-card__name { font-size: .82rem; font-weight: 700; color: #3a3556; } .compet-card__dates { font-size: .6rem; color: #8b85a2; margin-top: 1px; } .compet-card__votes { display: inline-block; font-size: .55rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-top: 4px; color: #fff; } .compet-card__votes--ok { background: #16c784; } .compet-card__votes--none { background: #ea3943; } .compet-card__votes--done { background: #8b85a2; } .compet-card__rank { text-align: center; flex-shrink: 0; cursor: pointer; padding: 8px 10px; border-radius: 10px; transition: background .15s; } .compet-card__rank:active { background: rgba(124,107,174,.12); } .compet-card__rank-val { font-size: 1.1rem; font-weight: 800; color: #5d4f8a; line-height: 1; } .compet-card__rank-sub { font-size: .6rem; font-weight: 600; color: #8b85a2; } .compet-card__rank-label { font-size: .48rem; color: #8b85a2; text-transform: uppercase; margin-top: 2px; } .compet-card__rank-prog { font-size: .55rem; font-weight: 700; margin-top: 2px; } .compet-card__rank-prog--up { color: #16c784; } .compet-card__rank-prog--down { color: #ea3943; } .compet-card__rank-prog--same { color: #f0c040; } /* ======================================== ONGLET : INFOS & STATS ======================================== */ .stats-section-title { font-size: .6rem; font-weight: 700; color: #8b85a2; text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 8px; padding-left: 4px; } .stats-section-title:first-child { margin-top: 0; } .info-list { display: flex; flex-direction: column; gap: 1px; background: #eae7f2; border-radius: 12px; overflow: hidden; } .info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fff; } .info-row__label { font-size: .72rem; color: #8b85a2; } .info-row__val { font-size: .78rem; font-weight: 700; color: #3a3556; } .info-row__val--green { color: #16c784; } .info-row__val--orange { color: #e67e22; } .info-row__val--red { color: #ea3943; } .info-row__val--blue { color: #2f6df6; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stat-card { background: #fff; border-radius: 12px; border: 1px solid #eae7f2; padding: 12px 8px; text-align: center; } .stat-card__val { font-size: 1.15rem; font-weight: 800; line-height: 1; color: #4a4270; } .stat-card__label { font-size: .5rem; font-weight: 700; color: #8b85a2; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; } /* ======================================== ONGLET : BADGES ======================================== */ .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .badge-card { background: #fff; border-radius: 14px; border: 1px solid #eae7f2; padding: 12px 8px; text-align: center; } .badge-card__icon { margin-bottom: 6px; } .badge-card__icon img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; } .badge-card__name { font-size: .65rem; font-weight: 700; color: #4a4270; } .badge-card__desc { font-size: .52rem; color: #8b85a2; margin-top: 2px; line-height: 1.3; } .badge-card__date { font-size: .48rem; color: #b0adbe; margin-top: 4px; } .badges-empty { text-align: center; padding: 30px; color: #8b85a2; font-size: .8rem; }