@font-face { font-family: 'ClashOfClans'; src: url('/assets/fonts/Clash_Bold.otf') format('opentype'); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: 'ClashOfClans'; src: url('/assets/fonts/Clash_Regular.otf') format('opentype'); font-weight: 300 600; font-style: normal; font-display: swap; } /* ============================================= VARIABLES ============================================= */ :root { --accent: #f4c430; --accent-glow: rgba(244, 196, 48, 0.3); --text: #dde2ee; --surface: rgba(0, 0, 0, 0.22); --border: rgba(255, 255, 255, 0.07); --border-hover: rgba(255, 255, 255, 0.14); --glass-bg: rgba(0, 0, 0, 0.22); --glass-border: rgba(255, 255, 255, 0.08); --shadow-card: none; --radius: 2px; --font-coc: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ============================================= FOND - sur html (Bootstrap ne touche pas html, seulement body). body devient transparent. ============================================= */ html { /* scroll-behavior:smooth retiré le 26/05 - il imposait une lente animation native * (~1s) qui se cumulait avec notre easing JS dans smoothScrollTo() → délai perçu * inacceptable au clic des flèches inter-sections. Le JS gère son propre easing, * les ancres natives (#anchor) feront un saut instantané (comportement par défaut). */ min-height: 100%; /* Garde-fou anti-débordement horizontal : un seul élément plus large que le * viewport élargit le « layout viewport » mobile → la page se rend en mode * « ordinateur » dézoomable partout. On borne le document à la largeur écran. * overflow-x sur n'établit pas de conteneur gênant pour nos en-têtes en * position:sticky (navbar + bandeau événements collent toujours au top). */ overflow-x: hidden; background: radial-gradient(circle 900px at 0% 5%, rgba(40, 100, 220, 0.40) 0%, transparent 65%), radial-gradient(circle 800px at 100% 95%, rgba(100, 30, 180, 0.32) 0%, transparent 65%), radial-gradient(circle 500px at 100% 5%, rgba(244,196,48, 0.08) 0%, transparent 50%), radial-gradient(circle 600px at 50% 55%, rgba(30, 70, 150, 0.20) 0%, transparent 65%), #1a2a45; background-attachment: fixed; } body { background: transparent !important; background-color: transparent !important; color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.95rem; font-weight: 400; min-height: 100vh; /* Clamp anti-débordement au niveau body : clipper seulement ne borne pas * le document de façon fiable sur iOS. Le fond du est en background-attachment: * fixed (ne peint QUE le viewport) + body transparent → toute zone de document au-delà * de l'écran resterait non peinte = bande vide à droite. On garantit donc width ≤ écran. * overflow-x:clip (et non hidden) n'établit PAS de conteneur de défilement → ne casse * pas le position:sticky de la navbar / du bandeau événements ni le zoom-avant. */ max-width: 100%; overflow-x: clip; } /* Reset média : aucun media ne dépasse la largeur de son conteneur - déclencheur n°1 * de débordement horizontal sur mobile (badge clan, icône ligue, avatar, image de carte). * canvas exclu volontairement (#particles-canvas fixe + canvases Chart.js gèrent leur taille). */ img { max-width: 100%; height: auto; } svg, video, table { max-width: 100%; } h1, h2, h3 { font-family: 'ClashOfClans', 'Georgia', serif; letter-spacing: 0.5px; } /* ============================================= NAVBAR ============================================= */ .navbar { background: #080512 !important; /* opaque : aucun contenu visible derrière (navbar collante) */ /* Plus de border-bottom : le bandeau events qui suit porte le séparateur (continuité visuelle). */ padding-top: 0.6rem; padding-bottom: 0.6rem; position: sticky; top: 0; z-index: 1030; transition: transform 0.22s ease-out; } /* Mobile : navbar « hide-on-scroll » (pattern Twitter/Medium/Discord). - En haut de page : visible → le bandeau « Accès anticipé » est visible aussi - Scroll-down : la navbar se cache (max d'espace pour le contenu) - Scroll-up : la navbar réapparaît instantanément La bottom-nav reste en permanence (navigation primaire rapide). */ .navbar.nav-hidden { transform: translateY(-100%); } /* Desktop : navbar collante simple (toujours visible) */ @media (min-width: 992px) { .navbar { box-shadow: 0 2px 14px rgba(0,0,0,0.35); } /* La logique hide-on-scroll est désactivée sur PC. */ .navbar.nav-hidden { transform: none; } } .dropdown-menu { z-index: 1035 !important; } .navbar-brand { font-family: 'ClashOfClans', 'Georgia', serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 1.5px; color: #fff !important; transition: none; } .navbar-brand:hover { opacity: 0.88; } .navbar .nav-link { color: rgba(255,255,255,0.72) !important; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 400; font-size: 0.88rem; letter-spacing: 0.3px; padding: 0.45rem 0.9rem !important; border-radius: var(--radius); transition: color 0.15s, background 0.15s; } .navbar .nav-link:hover { color: var(--accent) !important; } .navbar .btn-warning { font-size: 0.85rem; padding: 0.35rem 1rem; } /* ============================================= CARDS - flat, data-dense ============================================= */ .card { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--radius) !important; box-shadow: none !important; transition: border-color 0.15s ease; } .card:hover { transform: none; box-shadow: none !important; border-color: var(--border-hover) !important; } /* ============================================= BOUTONS ============================================= */ .btn-warning { background: #f4c430; border: none; border-radius: var(--radius) !important; color: #060810; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; letter-spacing: 0.3px; transition: filter 0.15s; } .btn-warning:hover { filter: brightness(1.1); box-shadow: none; transform: none; color: #060810; } /* ============================================= HERO SECTION ============================================= */ /* Wrapper hero générique - minimal pour que .hero-section seule (utilisée sur /clans, /joueurs) n'ajoute aucun effet visuel (ni gradient, ni border). Les pages peuvent override padding/bg en inline si besoin (cf. clans.php). */ .hero-section { position: relative; overflow: hidden; } /* Variante --full : la HOME utilise un gradient sombre vers le bas + une border + une image de fond saisonnière (::before). Ces effets ne s'appliquent QU'à .hero-section--full. */ .hero-section--full { padding: 72px 0 60px; background-image: linear-gradient(to bottom, rgba(10, 4, 22, 0.55) 0%, rgba(10, 4, 22, 0.70) 60%, rgba(10, 4, 22, 0.92) 100%); background-size: 100% calc(100% + 12px); background-repeat: no-repeat; border-bottom: 1px solid var(--border); } .hero-section--full::before { content: ''; position: absolute; inset: 0; background-image: var(--hero-bg-url, url('/assets/img/hero-bg.webp')); background-size: cover; background-position: center 28%; background-repeat: no-repeat; opacity: 0.45; z-index: -1; pointer-events: none; } .hero-section--full { min-height: 100vh; min-height: 100dvh; min-height: calc(100dvh - var(--navbar-h, 58px) - var(--evt-banner-h, 38px)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 92px 0 112px; /* bas élargi pour dégager le bouton « Découvrir » (absolute) */ } .hero-content { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Pills features hero */ .hero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; color: rgba(255,255,255,0.7); } /* Scroll indicator */ .hero-scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: 8px; } .hero-scroll-arrow { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); font-size: 0.7rem; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(5px); opacity: .9; } } /* Bob du repère « Découvrir » : tout le bloc (texte + flèche) bouge ensemble. translate garde le -50% de centrage horizontal du conteneur absolu. */ @keyframes scrollCue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } .scroll-cue-centered { animation: scrollCue 2s ease-in-out infinite; } /* Navigation inter-sections */ .section-nav-arrow { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10; cursor: pointer; display: flex; flex-direction: column; align-items: center; } .section-nav-btn { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; background: rgba(0,0,0,0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.38); font-size: 0.72rem; animation: scrollBounce 2s ease-in-out infinite; transition: border-color .2s, color .2s, background .2s; } .section-nav-arrow:hover .section-nav-btn { border-color: rgba(255,255,255,0.38); color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.50); } /* Mobile : on masque les flèches de navigation inter-sections (conteneur entier pour ne pas laisser le margin:40px) + le repère « Découvrir » du hero accueil (.hero-discover, classe dédiée car .scroll-cue-centered sert aussi sur /projet) - navigation au scroll. */ @media (max-width: 991.98px) { .section-nav-row, .hero-discover { display: none !important; } } .hero-section h1 { font-size: 2.4rem; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,0.7); } /* Feature cards - section "Pourquoi MonCDC" */ .feature-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-top: 2px solid rgba(var(--fi-color, 244,196,48), 0.38); border-radius: var(--radius); padding: 28px 24px; height: 100%; transition: transform 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,0.40); border-top-color: rgba(var(--fi-color, 244,196,48), 0.78); } .feature-icon { width: 48px; height: 48px; background: rgba(var(--fi-color, 244,196,48), 0.10); border: 1px solid rgba(var(--fi-color, 244,196,48), 0.22); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: rgb(var(--fi-color, 244,196,48)); margin-bottom: 18px; transition: background 0.22s, border-color 0.22s; } .feature-card:hover .feature-icon { background: rgba(var(--fi-color, 244,196,48), 0.18); border-color: rgba(var(--fi-color, 244,196,48), 0.45); } /* CTA section */ .section-cta { background: rgba(0,0,0,0.20); border-bottom: 1px solid var(--border); } /* Comment ça marche */ .section-howto { background: transparent; } .section-howto .step-icon { font-size: 1.6rem; color: var(--accent); } .section-howto .step-box { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid rgba(244,196,48,0.35); border-radius: var(--radius); padding: 22px 20px; height: 100%; transition: border-color 0.15s; } .section-howto .step-box:hover { border-color: rgba(244,196,48,0.22); border-left-color: rgba(244,196,48,0.65); } /* ============================================= STAT CARDS ============================================= */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid rgba(244,196,48,0.5); border-radius: var(--radius); padding: 18px 16px; text-align: center; } .stat-card .number { font-size: 2.4rem; font-weight: 900; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--accent); font-variant-numeric: tabular-nums; } /* ============================================= CLAN CARD ============================================= */ .clan-card { border-left: 3px solid var(--accent); } .badge-hdv { background: transparent; color: #f4c430; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; padding: 0; } /* ============================================= FORMS Bootstrap 5 dark mode force --bs-body-bg (#212529) sur les inputs. On surcharge avec un sélecteur plus spécifique. ============================================= */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, .form-control, .form-select { background-color: rgba(0,0,0,0.40) !important; border-color: rgba(255,255,255,0.10) !important; border-left: 2px solid rgba(255,255,255,0.18) !important; color: #dde2ee !important; border-radius: var(--radius) !important; transition: border-color 0.15s; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus, .form-control:focus, .form-select:focus { background-color: rgba(0,0,0,0.50) !important; border-color: rgba(244,196,48,0.4) !important; border-left-color: rgba(244,196,48,0.7) !important; color: #dde2ee !important; box-shadow: none !important; } .form-control::placeholder { color: rgba(255,255,255,0.22); } select option, .form-select option { background-color: #100820; color: #dde2ee; } /* ============================================= FOOTER ============================================= */ footer { background: rgba(0,0,0,0.35) !important; border-top: 1px solid var(--border) !important; position: relative; } /* ============================================= PROFIL JOUEUR ============================================= */ .profil-banner { background: none; border: none; padding: 14px 0 0; } /* Cadre flottant des en-têtes de fiche (profil, joueur, clan) - aligné sur la largeur du contenu, comme la bannière mon-clan. À réutiliser pour toute future bannière de fiche. */ .fiche-panel { background: linear-gradient(160deg,#0d0d1f 0%,#130d24 60%,#0f0f1a 100%); border: 1px solid rgba(244,196,48,0.16); border-radius: 12px; padding: 16px 18px; } .hdv-badge { width: 64px; height: 64px; background: #f4c430; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #060810; font-weight: 900; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .hdv-badge small { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .stat-bloc { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid rgba(244,196,48,0.35); border-radius: var(--radius); padding: 12px 10px; text-align: center; transition: border-color 0.15s; } .stat-bloc:hover { border-color: var(--border-hover); border-top-color: rgba(244,196,48,0.60); } .stat-bloc .stat-icon { font-size: 1.4rem; margin-bottom: 6px; display: block; } .stat-bloc .stat-value { font-size: 1.25rem; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; line-height: 1.1; } .stat-bloc .stat-label { font-size: 0.7rem; color: #7880a0; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; } .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 8px; text-align: center; transition: border-color 0.15s; } .hero-card:hover { border-color: var(--border-hover); } .hero-card .hero-name { font-size: 0.7rem; color: #8888aa; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .hero-card .hero-level { font-size: 1.3rem; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--accent); } .hero-card .hero-max { font-size: 0.7rem; color: #555; } .hero-progress { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 6px; overflow: hidden; } .hero-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #ff9800); border-radius: 2px; transition: width 0.6s ease; } .league-badge { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: flex; align-items: center; gap: 12px; } .section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(244,196,48,0.60); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; } .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(244,196,48,0.18), transparent); } .account-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .account-row:last-child { border-bottom: none; } .cand-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 12px; } .cand-row:last-child { border-bottom: none; } .war-pref-in { color: #4caf50; } .war-pref-out { color: #f44336; } /* ============================================= GUILD CARDS / ANNONCES ============================================= */ .guild-card { position: relative; width: 100%; height: 190px; border-radius: 4px; overflow: hidden; cursor: pointer; transition: border-color 0.15s; border: 1px solid var(--border); } .guild-card:hover { border-color: var(--border-hover); } .guild-card-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .guild-card-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.74) 100%); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; } .guild-card-top { display: flex; align-items: flex-start; gap: 10px; } .guild-card-badge { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); flex-shrink: 0; } .guild-card-clan-name { font-size: 1.1rem; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.9); line-height: 1.2; } .guild-card-meta { font-size: 0.7rem; color: rgba(255,255,255,0.75); text-shadow: 0 1px 3px rgba(0,0,0,0.8); margin-top: 2px; } .guild-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .guild-card-resume { font-size: 0.78rem; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.8); line-height: 1.35; max-width: 75%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .guild-card-timer { font-size: 0.65rem; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--accent); background: rgba(0,0,0,0.6); border-radius: 2px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; } .guild-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .guild-tag { font-size: 0.62rem; font-weight: 700; border-radius: 2px; padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.3px; } .bg-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .bg-option { cursor: pointer; } .bg-option input { display: none; } .bg-option-img { width: 100%; height: 60px; object-fit: cover; border-radius: 2px; border: 2px solid transparent; transition: border-color 0.15s; display: block; } .bg-option input:checked + .bg-option-img { border-color: var(--accent); } .guild-card-detail { height: 260px; border-radius: 4px; } .ann-desc { font-size: 0.95rem; line-height: 1.75; white-space: pre-line; color: rgba(220,224,240,0.9); } /* ============================================= GUILD CARD style in-game ============================================= */ .guild-card-clan { position: relative; width: 100%; height: 210px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); transition: border-color 0.15s; } .guild-card-clan:hover { border-color: var(--border-hover); } .guild-card-clan-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .guild-card-clan-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.22) 32%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.90) 100%); padding: 14px 16px 12px; display: flex; flex-direction: column; justify-content: space-between; } .gc-top { display: flex; align-items: center; gap: 10px; } .gc-badge { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)); flex-shrink: 0; } .gc-badge-placeholder { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; font-size: 1.35rem; color: rgba(255,255,255,0.35); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); } .gc-clan-info { flex-grow: 1; overflow: hidden; } .gc-clan-name { font-size: 1.2rem; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .gc-clan-sub { font-size: 0.68rem; color: rgba(255,255,255,0.75); text-shadow: 0 1px 4px rgba(0,0,0,0.95); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc-hdv-badge { background: #f4c430; color: #060810; font-size: 0.65rem; font-weight: 700; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; border-radius: 2px; padding: 3px 8px; flex-shrink: 0; } .gc-resume { font-size: 0.82rem; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.95); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Fond UNIQUEMENT sous le texte : box-decoration-break:clone applique le fond à la portion de CHAQUE ligne réellement occupée par le texte → pas de zone sombre vide (un bloc rectangulaire en laisserait sur les lignes courtes). padding vertical = 0 pour que les fonds de lignes voisines ne se chevauchent pas. */ .gc-resume-inner { background: rgba(6,8,20,0.28); border-radius: 3px; padding: 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .gc-tags { display: flex; flex-wrap: wrap; gap: 5px; } .gc-tag { font-size: 0.62rem; font-weight: 700; border-radius: 2px; padding: 2px 7px; text-transform: uppercase; letter-spacing: 0.3px; } .gc-tag-style { background: rgba(244,196,48,0.22); color: var(--accent); border: 1px solid rgba(244,196,48,0.28); } .gc-tag-war { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.14); } .mc-label { cursor: pointer; } .mc-check, .mc-check-acc, .mc-check-ann, .mc-check-mc { display: none; } .mc-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 2px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.5); transition: background 0.15s, color 0.15s, border-color 0.15s; } .mc-check:checked + .mc-tag, .mc-check-acc:checked + .mc-tag, .mc-check-ann:checked + .mc-tag, .mc-check-mc:checked + .mc-tag { background: rgba(244,196,48,0.18); border-color: rgba(244,196,48,0.55); color: var(--accent); } /* Filtre mots-clés /clans - dropdown multi-sélection (calqué sur le league-picker) */ .mc-dd { position: relative; } .mc-dd-trigger { width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #fff; font-size: 0.8rem; cursor: pointer; text-align: left; transition: border-color 0.13s, background 0.13s; } .mc-dd-trigger:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); } .mc-dd-trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.6); } .mc-dd-has-sel .mc-dd-trigger-label { color: var(--accent); font-weight: 600; } .mc-dd-caret { font-size: 0.62rem; opacity: 0.5; flex-shrink: 0; transition: transform 0.15s; } .mc-dd-open .mc-dd-caret { transform: rotate(180deg); } .mc-dd-menu { /* position/left/width/top posés en JS (position:fixed) pour échapper au clipping de la sidebar. z-index élevé pour passer au-dessus du contenu. */ position: fixed; z-index: 1080; overflow-y: auto; background: #181a2c; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.55); padding: 4px; scrollbar-width: thin; scrollbar-color: rgba(244,196,48,0.3) transparent; } .mc-dd-menu::-webkit-scrollbar { width: 6px; } .mc-dd-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; } .mc-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: background 0.13s; } .mc-item:hover { background: rgba(255,255,255,0.045); } .mc-item-box { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; transition: background 0.13s, border-color 0.13s; } .mc-item-box::after { content: '\2713'; font-weight: 900; line-height: 1; font-size: 11px; color: #15110a; opacity: 0; transition: opacity 0.13s; } .mc-check:checked + .mc-item-box { background: var(--accent); border-color: var(--accent); } .mc-check:checked + .mc-item-box::after { opacity: 1; } .mc-item-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .mc-item-name { font-size: 0.78rem; font-weight: 500; color: rgba(255,255,255,0.62); transition: color 0.13s; } .mc-check:checked ~ .mc-item-name { color: var(--accent); font-weight: 600; } .mc-check:disabled + .mc-item-box { opacity: 0.35; } .mc-check:disabled ~ .mc-item-icon, .mc-check:disabled ~ .mc-item-name { opacity: 0.4; } /* Pills style/guerre (accueil + annonce) */ .style-pill, .guerre-pill { padding: 6px 13px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); cursor: pointer; transition: all .18s; } .style-pill:hover, .guerre-pill:hover { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.09); } .style-pill.active, .guerre-pill.active { background: rgba(var(--pill-color,244,196,48),.18); border-color: rgba(var(--pill-color,244,196,48),.5); color: rgb(var(--pill-color,244,196,48)); } .style-pill[data-val=""].active, .guerre-pill[data-val=""].active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.9); } .fc-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; background: rgba(var(--cc), .15); border: 1px solid rgba(var(--cc), .35); color: rgb(var(--cc)); } /* Pills formulaire annonce (style/guerre) */ .ann-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.5); transition: background 0.15s, border-color 0.15s, color 0.15s; } .ann-pill:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); } .ann-pill.active { background: rgba(244,196,48,0.18); border-color: rgba(244,196,48,0.55); color: var(--accent); } /* ============================================= THÈME SOMBRE - fond plus vibrant ============================================= */ html[data-bs-theme="dark"] { background: radial-gradient(circle 900px at -5% 0%, rgba(90, 22, 160, 0.72) 0%, transparent 58%), radial-gradient(circle 800px at 105% 100%, rgba(38, 8, 72, 0.90) 0%, transparent 58%), radial-gradient(circle 550px at 100% 0%, rgba(200, 148, 10, 0.14) 0%, transparent 50%), radial-gradient(circle 450px at 0% 100%, rgba(55, 10, 100, 0.55) 0%, transparent 52%), #0c0618; background-attachment: fixed; } html[data-bs-theme="dark"] body { background: transparent !important; background-color: transparent !important; color: #dde0ea; } html[data-bs-theme="dark"] .card { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; } /* ============================================= THÈME CLAIR ============================================= */ html[data-bs-theme="light"] { background: radial-gradient(circle 900px at -5% 0%, rgba(100, 165, 255, 0.60) 0%, transparent 60%), radial-gradient(circle 800px at 105% 100%, rgba(185, 130, 255, 0.50) 0%, transparent 60%), radial-gradient(circle 500px at 80% 5%, rgba(244, 196, 48, 0.18) 0%, transparent 50%), #eef2ff; background-attachment: fixed; } html[data-bs-theme="light"] body { background: transparent !important; background-color: transparent !important; color: #1a1e3a !important; } html[data-bs-theme="light"] .card { background: rgba(255, 255, 255, 0.70) !important; border-color: rgba(0, 0, 0, 0.07) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10) !important; } html[data-bs-theme="light"] .card:hover { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(244,196,48,0.30) !important; border-color: rgba(244,196,48,0.38) !important; } html[data-bs-theme="light"] .navbar { background: #f5f8ff !important; border-bottom-color: rgba(0, 0, 0, 0.09) !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09) !important; } html[data-bs-theme="light"] .navbar-brand { color: #1a1e3a !important; text-shadow: none !important; } html[data-bs-theme="light"] .navbar .nav-link { color: rgba(26, 30, 58, 0.72) !important; } html[data-bs-theme="light"] .navbar .nav-link:hover { color: #b87e00 !important; background: rgba(244,196,48,0.12); } html[data-bs-theme="light"] footer { background: rgba(235, 240, 255, 0.88) !important; border-top: 1px solid rgba(0, 0, 0, 0.07) !important; } html[data-bs-theme="light"] footer::before { background: linear-gradient(90deg, transparent, rgba(244,196,48,0.35), transparent); } html[data-bs-theme="light"] .text-muted { color: rgba(50, 60, 100, 0.65) !important; } html[data-bs-theme="light"] .hero-section { background: rgba(230, 238, 255, 0.60); border-bottom-color: rgba(244,196,48,0.22); } html[data-bs-theme="light"] .stat-card { background: rgba(255, 255, 255, 0.78); border-color: rgba(244,196,48,0.25); box-shadow: 0 4px 18px rgba(0,0,0,0.10); } html[data-bs-theme="light"] .bg-dark { background: rgba(220, 228, 248, 0.65) !important; } html[data-bs-theme="light"] .form-control, html[data-bs-theme="light"] .form-select { background-color: rgba(255, 255, 255, 0.80) !important; border-color: rgba(0, 0, 0, 0.14) !important; color: #1a1e3a !important; } html[data-bs-theme="light"] .form-control:focus, html[data-bs-theme="light"] .form-select:focus { background-color: #fff !important; border-color: rgba(244,196,48,0.60) !important; color: #1a1e3a !important; } html[data-bs-theme="light"] h1, html[data-bs-theme="light"] h2, html[data-bs-theme="light"] h3, html[data-bs-theme="light"] h4, html[data-bs-theme="light"] h5, html[data-bs-theme="light"] h6 { color: #1a1e3a; } html[data-bs-theme="light"] .text-white { color: #1a1e3a !important; } html[data-bs-theme="light"] .text-warning { color: #b87e00 !important; } html[data-bs-theme="light"] .section-title { color: rgba(180, 130, 0, 0.70); } /* ============================================= BOUTON TOGGLE THÈME (navbar) ============================================= */ .btn-theme-toggle { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.72); border-radius: var(--radius); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; font-size: 0.85rem; padding: 0; } .btn-theme-toggle:hover { background: rgba(244,196,48,0.12); border-color: rgba(244,196,48,0.35); color: var(--accent); } html[data-bs-theme="light"] .btn-theme-toggle { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: rgba(26,30,58,0.65); } html[data-bs-theme="light"] .btn-theme-toggle:hover { background: rgba(244,196,48,0.15); border-color: rgba(244,196,48,0.45); color: #b87e00; } /* ═══════════════════════════════════════════════════════════════════ MESSAGES PRIVÉS ═══════════════════════════════════════════════════════════════════ */ /* ── Layout deux panneaux ─────────────────────────────────────────── */ .mp-layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 68px); overflow: hidden; } @media (max-width: 767px) { .mp-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } } /* ── Sidebar conversations ────────────────────────────────────────── */ .mp-sidebar { border-right: 1px solid rgba(255,255,255,0.07); overflow-y: auto; display: flex; flex-direction: column; } .mp-conv-item { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; color: inherit; } .mp-conv-item:hover { background: rgba(255,255,255,0.04); } .mp-conv-item.active { background: rgba(244,196,48,0.07); border-left: 3px solid var(--accent); } /* ── Panel chat ───────────────────────────────────────────────────── */ .mp-chat { display: flex; flex-direction: column; overflow: hidden; background: rgba(0,0,0,0.08); } .mp-chat-header { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } .mp-rgpd-notice { padding: 7px 16px; font-size: 0.73rem; color: rgba(255,255,255,0.4); background: rgba(244,196,48,0.03); border-bottom: 1px solid rgba(244,196,48,0.1); flex-shrink: 0; } .mp-messages-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; } .mp-input-bar { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } /* ── Bulles messages ──────────────────────────────────────────────── */ .mp-msg-wrap { display: flex; } .mp-msg-me { justify-content: flex-end; } .mp-msg-them { justify-content: flex-start; } .mp-bubble { max-width: 72%; padding: 8px 13px; border-radius: 14px; font-size: 0.875rem; line-height: 1.5; word-break: break-word; } .mp-bubble-me { background: rgba(244,196,48,0.14); border: 1px solid rgba(244,196,48,0.28); border-radius: 14px 14px 3px 14px; color: #fff; } .mp-bubble-them { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px 14px 14px 3px; color: #e0e0e0; } .mp-meta { opacity: 0.55; } .mp-time { font-size: 0.65rem; color: #888; } .mp-report-btn { background: none; border: none; padding: 0 2px; font-size: 0.7rem; cursor: pointer; opacity: 0; transition: opacity 0.2s; line-height: 1; } .mp-bubble:hover .mp-report-btn { opacity: 1; } /* ── Avatar lettres ───────────────────────────────────────────────── */ .mp-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(244,196,48,0.15); border: 1px solid rgba(244,196,48,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } .mp-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: rgba(244,196,48,0.12); border: 1px solid rgba(244,196,48,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--accent); flex-shrink: 0; } .mp-unread-pill { background: #ef5350; color: #fff; border-radius: 2px; font-size: 0.63rem; padding: 1px 6px; font-weight: 700; line-height: 1.6; } /* ── Barre messagerie (style Facebook/LinkedIn) ───────────────────── */ .mp-bar { position: fixed; bottom: 0; right: 24px; width: 320px; z-index: 1040; border-radius: 10px 10px 0 0; overflow: visible; background: rgba(8,14,38,0.97); border: 1px solid rgba(255,255,255,0.1); border-bottom: none; box-shadow: 0 -2px 20px rgba(0,0,0,0.45); } @media (max-width: 991.98px) { .mp-bar { display: none; } } .mp-bar-header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; border-radius: 10px 10px 0 0; user-select: none; transition: background 0.15s; } .mp-bar-header:hover { background: rgba(255,255,255,0.05); } .mp-badge { display: inline-flex; align-items: center; justify-content: center; background: #ef5350; color: #fff; border-radius: 2px; font-size: 0.62rem; padding: 1px 5px; font-weight: 700; line-height: 1.5; min-width: 18px; text-align: center; } .mp-panel { display: none; flex-direction: column; width: 100%; background: rgba(8,14,38,0.97); border-top: 1px solid rgba(255,255,255,0.08); } .mp-panel.open { display: flex; } /* Status dots (other user) */ .mp-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .mp-dot-en-ligne { background: #4caf50; } .mp-dot-ndd { background: #f44336; } .mp-dot-inactif { background: #ffd54f; } .mp-dot-deconnecte { background: rgba(255,255,255,0.25); } /* compat anciens noms (migration) */ .mp-dot-actif { background: #4caf50; } .mp-dot-occupe { background: #ff9800; } .mp-dot-absent { background: rgba(255,255,255,0.25); } /* Status selector buttons (my own status) */ .mp-status-btn { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s; opacity: 0.3; } .mp-status-btn:hover { opacity: 0.8 !important; } .mp-status-opt, .pg-status-opt { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 7px 12px; cursor: pointer; font-size: 0.78rem; color: rgba(255,255,255,0.75); text-align: left; transition: background 0.12s; } .mp-status-opt:hover, .pg-status-opt:hover { background: rgba(255,255,255,0.06) !important; } /* Light theme overrides */ html[data-bs-theme="light"] .mp-bubble-me { background: rgba(244,196,48,0.22); border-color: rgba(244,196,48,0.4); color: #333; } html[data-bs-theme="light"] .mp-bubble-them { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #333; } html[data-bs-theme="light"] .mp-panel { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.12); } html[data-bs-theme="light"] .mp-avatar { background: rgba(244,196,48,0.2); } /* ============================================= PLAYER CARD (joueurs disponibles) ============================================= */ .player-card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; transition: border-color 0.15s; min-height: 160px; } .player-card:hover { border-color: var(--border-hover); } /* Fond de carte joueur (prévu pour de futurs backgrounds) */ .player-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .player-card-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.82) 100%); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; } html[data-bs-theme="light"] .player-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); } /* ============================================= MICRO-INTERACTIONS & UX ============================================= */ /* Stat cards - lift + glow */ .stat-card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s; } .stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.32), 0 0 22px rgba(244,196,48,0.09); border-top-color: rgba(244,196,48,0.85) !important; } /* Step boxes - lift + border accent */ .step-box { transition: transform 0.22s ease, box-shadow 0.22s ease, border-left-color 0.22s; } .step-box:hover { transform: translateY(-5px); box-shadow: 0 14px 42px rgba(0,0,0,0.42); border-left-color: rgba(244,196,48,0.80) !important; } /* Step badge numéro */ .step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(244,196,48,0.12); border: 1px solid rgba(244,196,48,0.28); border-radius: 50%; font-size: 0.75rem; font-weight: 800; color: var(--accent); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0 auto 14px; transition: background 0.22s, border-color 0.22s; } .step-box:hover .step-num { background: rgba(244,196,48,0.22); border-color: rgba(244,196,48,0.60); } /* Step icon - cercle de fond */ .section-howto .step-icon { width: 54px; height: 54px; background: rgba(244,196,48,0.08); border: 1px solid rgba(244,196,48,0.18); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px !important; transition: background 0.22s, border-color 0.22s; } .step-box:hover .step-icon { background: rgba(244,196,48,0.16); border-color: rgba(244,196,48,0.42); } /* Carousel guild cards - glow border au hover */ .guild-card-clan { transition: border-color 0.20s, box-shadow 0.20s; } .cc-card:hover .guild-card-clan { border-color: rgba(244,196,48,0.38) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.55); } /* Hover universel - tous les boutons */ .btn { transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.28); } .btn-warning:hover { transform: translateY(-1px) !important; filter: brightness(1.1) !important; box-shadow: 0 4px 18px rgba(244,196,48,0.22) !important; } /* Boutons - press feedback */ .btn:active:not(:disabled) { transform: scale(0.97) !important; filter: brightness(0.94) !important; box-shadow: none !important; } .style-pill:active, .guerre-pill:active, .hdv-pill:active { transform: scale(0.95); transition: transform 0.08s; } /* HDV pills - cohérence avec style/guerre pills */ .hdv-pill:hover { border-color: rgba(255,255,255,0.28) !important; color: rgba(255,255,255,0.85) !important; background: rgba(255,255,255,0.09) !important; } .hero-section h1 { font-size: 2.7rem; } /* Section CTA - ligne dégradée accent en haut */ .section-cta { position: relative; } .section-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,196,48,0.32), transparent); pointer-events: none; } /* Eyebrow label - harmonisé dans tout le site */ .eyebrow { font-size: 0.65rem; text-transform: uppercase; letter-spacing: .18em; color: rgba(244,196,48,.55); display: block; margin-bottom: 8px; } /* ============================================= ACCUEIL - Cartes fonctionnalités (hero) + bandeau KPIs ============================================= */ .hero-feat-card { flex: 1; padding: 16px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: transform .25s, border-color .25s, box-shadow .25s, background .25s; } .hero-feat-card:hover { transform: translateY(-6px); border-color: rgba(244,196,48,0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.4); background: rgba(244,196,48,0.05); } .hero-feat-card .feat-icon { font-size: 1.1rem; color: rgba(244,196,48,0.7); margin-bottom: 8px; transition: transform .25s, color .25s; } .hero-feat-card:hover .feat-icon { transform: scale(1.18); color: var(--accent); } .hero-feat-title { color: #fff; font-weight: 600; font-size: 0.78rem; margin-bottom: 4px; } .hero-feat-desc { color: rgba(255,255,255,0.5); font-size: 0.67rem; line-height: 1.4; } /* Bouton CTA pilule (flèche animée au survol) - override le radius carré global */ .btn-cta { border-radius: 50px !important; display: inline-flex; align-items: center; gap: 0.55rem; } .btn-cta i { transition: transform .2s ease; } .btn-cta:hover i { transform: translateX(4px); } /* Conteneur des cartes : overflow visible sur desktop (sinon le survol qui soulève la carte est rogné), défilement horizontal seulement quand la rangée déborde. */ .hero-feat-scroll { width: 100%; max-width: 960px; margin: 0 auto; padding: 12px 0 16px; } @media (max-width: 623.98px) { .hero-feat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Bandeau KPIs temps réel */ .kpi-wrap { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 15px 20px; } .kpi-row { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; } .kpi { text-align: center; } .kpi-num { font-weight: 800; color: var(--accent); line-height: 1; } .kpi-row .kpi-num { font-size: 1.85rem; } .kpi-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,0.5); margin-top: 5px; } .badge-up { display: inline-flex; align-items: center; gap: 3px; background: rgba(102,187,106,0.15); color: #66bb6a; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; margin-left: 7px; vertical-align: super; } .kpi-sep { width: 1px; height: 46px; background: rgba(255,255,255,0.1); } .proof-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.07); } .proof { font-size: 0.78rem; color: rgba(255,255,255,0.55); } .proof i { color: var(--accent); } .proof b { color: #fff; font-weight: 700; } .kpi-foot { text-align: center; font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 9px; } .kpi-dot { width: 9px; height: 9px; border-radius: 50%; background: #66bb6a; display: inline-block; vertical-align: middle; margin-right: 5px; animation: kpipulse 2s infinite; } @keyframes kpipulse { 0% { box-shadow: 0 0 0 0 rgba(102,187,106,0.5); } 70% { box-shadow: 0 0 0 8px rgba(102,187,106,0); } 100% { box-shadow: 0 0 0 0 rgba(102,187,106,0); } } @media (max-width: 575px) { .kpi-sep { display: none; } .kpi-row { gap: 24px; } .kpi-row .kpi-num { font-size: 1.9rem; } .proof-row { gap: 14px; } .proof { font-size: 0.75rem; } } /* ============================================= SCROLL REVEAL ============================================= */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.60s cubic-bezier(0.22, 1, 0.36, 1), transform 0.60s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.10s; } .reveal-delay-2 { transition-delay: 0.20s; } .reveal-delay-3 { transition-delay: 0.30s; } .reveal-delay-4 { transition-delay: 0.40s; } /* ── Rich text rendu (annonces clan, présentation clan) ──────────────────── */ .rich-content { color: rgba(255,255,255,0.78); } .rich-content p { margin: 0 0 0.6em; } .rich-content p:last-child { margin-bottom: 0; } .rich-content h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0.4em 0 0.5em; } .rich-content h4 { font-size: 0.95rem; font-weight: 600; color: #f4c430; margin: 0.4em 0 0.4em; } .rich-content ul, .rich-content ol { margin: 0.4em 0 0.6em; padding-left: 1.6em; } .rich-content li { margin-bottom: 0.2em; } .rich-content a { color: #f4c430; text-decoration: underline; } .rich-content a:hover { color: #ffd966; } .rich-content strong, .rich-content b { color: #fff; font-weight: 700; } .rich-content em, .rich-content i { font-style: italic; } .rich-content u { text-decoration: underline; } .rich-content s, .rich-content strike { text-decoration: line-through; } /* Polices Quill (rendues via la classe injectée par l'éditeur) */ .rich-content .ql-font-serif, .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; } .rich-content .ql-font-monospace, .ql-font-monospace { font-family: 'Courier New', Consolas, monospace; } /* ── Point vert pulsant "live" - réutilisable (cf. /mon-clan fil d'actualité, /joueur historique en cours) */ .live-dot { position:relative; display:inline-block; width:8px; height:8px; flex-shrink:0; vertical-align:middle; } .live-dot::before, .live-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:#66bb6a; } .live-dot::before { animation:live-pulse 2s infinite; } .live-dot::after { animation:live-ping 2s infinite; opacity:.6; } @keyframes live-pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } } @keyframes live-ping { 0% { transform:scale(1); opacity:.6 } 70%,100% { transform:scale(2.2); opacity:0 } } /* Touch targets mobile - élargir les boutons sm pour atteindre ~36px */ /* (audit J-3 : 228 btn-sm dans les templates, certains sous-dimensionnés sur tactile). */ @media (max-width: 768px) { .btn-sm { min-height: 36px; padding-top: 0.4rem; padding-bottom: 0.4rem; } } /* ═══════════ DESIGN SYSTEME "S2" (reference 22/07, voir memoire project_design_s2) ═══════════ Cadre degrade sombre + onglets soulignes or + pilules a icones de jeu + lignes en cartes flottantes. Prefixe mc- ; a utiliser pour tout nouveau cadre au lieu de CSS locaux. */ .mc-panel{background:linear-gradient(160deg,#131129 0%,#0b0920 60%);border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden} .mc-panel-head{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem} .mc-panel-head b,.mc-panel-head h2{color:#fff;font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0} .mc-panel-head a{color:rgba(255,255,255,.5);font-size:.78rem;text-decoration:none;white-space:nowrap} .mc-panel-head a:hover{color:#f4c430} .mc-tabs{display:flex;gap:.4rem;padding:0 1rem;border-bottom:1px solid rgba(255,255,255,0.08)} .mc-tab{background:none;border:0;border-bottom:2px solid transparent;color:rgba(255,255,255,0.55);font-weight:700;font-size:.84rem;padding:.35rem .6rem;cursor:pointer;text-transform:uppercase;letter-spacing:.03em;margin-bottom:-1px;transition:color .15s,border-color .15s;text-decoration:none} .mc-tab:hover{color:#fff} .mc-tab.active,.mc-tab.on{color:#fff;border-bottom-color:#f4c430} .mc-pills{display:flex;flex-wrap:wrap;gap:.5rem;padding:.8rem 1rem .2rem} .mc-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);color:#d7dbe6;font-weight:600;font-size:.84rem;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s} .mc-pill img{width:19px;height:19px;object-fit:contain} .mc-pill:hover{background:rgba(255,255,255,0.08);color:#fff} .mc-pill.active,.mc-pill.on{background:rgba(244,196,48,0.14);border-color:rgba(244,196,48,0.45);color:#fff} .mc-cardrow{background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.08);border-radius:12px;margin:.5rem .8rem 0;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .15s,border-color .15s;color:#d7dbe6;text-decoration:none} .mc-cardrow:hover{transform:translateY(-2px);border-color:rgba(244,196,48,.4);color:#fff} .mc-panel .mc-cardrow:last-child{margin-bottom:.8rem} /* Icones d'unites (armee) avec badge quantite - facon Clash Spot */ .mc-unit{position:relative;display:inline-block} .mc-unit img{width:42px;height:42px;object-fit:contain;border-radius:7px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);padding:2px} .mc-unit b{position:absolute;bottom:-4px;right:-4px;background:#0d0d1f;color:#fff;font-size:.7rem;border-radius:7px;padding:0 4px;border:1px solid rgba(255,255,255,.25)} .mc-unit-sm img{width:32px;height:32px} .mc-army{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center} /* ═══════════ CLASSEMENTS (/classements) - deplace inline -> head (anti-FOUC 23/07) ═══════════ Etait un