/* ============================================ FANTASY LIGUE 1 - Styles globaux Fond blanc · Vert terrain · Sportif dynamique ============================================ */ :root { /* Palette principale : vert terrain */ --bg: #ffffff; --bg-2: #f7faf8; --bg-3: #eef3f0; --surface: #ffffff; --surface-2: #f7faf8; --ink: #1a2e22; /* texte principal, vert très foncé */ --ink-2: #2d4a3a; /* texte secondaire */ --ink-dim: #6b7c75; /* labels, hint */ --border: #d8e3dc; /* bordures discrètes */ --border-strong: #bdcdc5; /* Accents sport */ --accent: #0a8a3f; /* vert terrain principal */ --accent-2: #066e30; /* vert foncé hover */ --accent-3: #0fb350; /* vert lumineux */ --accent-light: #e6f5ec; /* fond vert très clair */ /* Couleurs sémantiques */ --gold: #d4a017; --green: #0a8a3f; --red: #dc2626; --blue: #2563eb; --orange: #ea580c; /* Ombres */ --shadow-sm: 0 1px 3px rgba(10, 46, 34, 0.08); --shadow: 0 2px 8px rgba(10, 46, 34, 0.1); --shadow-lg: 0 8px 24px rgba(10, 46, 34, 0.12); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Filet de sécurité : aucun contenu ne doit provoquer de scroll horizontal ni déborder de la largeur de l'écran (notamment sur mobile). NB : on ne met PAS overflow-x sur pour ne pas rogner le ruban "version de test" qui est en position fixed et déborde volontairement. */ html { max-width: 100%; } body { max-width: 100%; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; } /* ============ BADGE "VERSION DE TEST" ============ Bandeau horizontal compact, ancré en haut à gauche. Choisi plutôt qu'un ruban en diagonale car ce dernier débordait hors écran et était tronqué par l'overflow-x:hidden du body sur Safari iOS. Position fixed = reste visible en scrollant. Pointer-events none = ne bloque pas les clics sur ce qui est derrière. */ html::before { content: 'VERSION DE TEST'; position: fixed; top: 0; left: 0; right: 0; width: 100%; padding: 5px 0; text-align: center; background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%); color: #ffffff; font-family: 'Bebas Neue', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 3px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); z-index: 9999; pointer-events: none; white-space: nowrap; animation: testBadgePulse 2s ease-in-out infinite; } /* Le bandeau (fixed) occupe le haut : on décale le contenu pour ne rien cacher. */ body { padding-top: 28px; } @keyframes testBadgePulse { 0%, 100% { box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 3px 16px rgba(220, 38, 38, 0.85); } } /* En mobile : police légèrement réduite. */ @media (max-width: 640px) { html::before { padding: 4px 0; font-size: 13px; } body { padding-top: 24px; } } .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; width: 100%; } main.container { flex: 1; padding-top: 28px; padding-bottom: 60px; } /* ============ HEADER (vert foncé pour contraste) ============ */ .main-header { background: linear-gradient(135deg, #0a2e1d 0%, #0e3d27 100%); border-bottom: 4px solid var(--accent-3); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px 20px; flex-wrap: wrap; } /* ======== LOGO ======== Le logo est une image noire sur fond transparent. Pour qu'il soit lisible sur le fond vert foncé du header, on le pose sur une pastille blanche arrondie avec un léger padding. */ .logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; background: #ffffff; padding: 6px 14px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .logo:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); } .logo img { height: 38px; width: auto; flex-shrink: 0; display: block; } /* Variante "auth" pour les pages login / register : logo plus grand, centré, pas de fond (la carte est déjà blanche) */ .logo-auth { background: transparent; box-shadow: none; padding: 0; justify-content: center; margin-bottom: 8px; } .logo-auth:hover { transform: none; box-shadow: none; } .logo-auth img { height: 60px; max-width: 100%; } /* ======== LOGO HERO (Dashboard) ======== Bandeau décoratif en haut du dashboard, le logo en grand sans pastille (la page est sur fond clair, donc le logo noir est lisible). */ .dashboard-hero-logo { text-align: center; margin: 8px 0 24px; padding: 16px 0; } .dashboard-hero-logo img { max-width: 100%; width: clamp(280px, 60vw, 720px); height: auto; display: inline-block; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15)); } @media (max-width: 640px) { .dashboard-hero-logo { margin: 4px 0 16px; padding: 8px 0; } .dashboard-hero-logo img { width: 90vw; } } .main-nav { display: flex; flex-wrap: wrap; gap: 2px 6px; flex: 1 1 100%; min-width: 0; justify-content: center; row-gap: 8px; } @media (min-width: 1500px) { /* Sur très grand écran, tout peut tenir sur une seule ligne. */ .main-nav { flex: 1 1 auto; } } .main-nav a { font-family: 'Inter', sans-serif; letter-spacing: 0.2px; font-size: 13px; color: rgba(255,255,255,0.7); text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: all 0.2s; position: relative; white-space: nowrap; font-weight: 500; text-transform: none; } .main-nav a:hover { color: #ffffff; background: rgba(255,255,255,0.08); } .main-nav a.active { color: #ffffff; background: var(--accent-3); font-weight: 600; } .main-nav a.admin-link { color: var(--gold); border: 1px solid var(--gold); margin-left: 8px; } .main-nav a.admin-link:hover { background: var(--gold); color: #1a2e22; } .main-nav a.admin-link.active { background: var(--gold); color: #1a2e22; } .user-zone { display: flex; align-items: center; gap: 14px; } /* Bloc gauche du header : logo du site + identité utilisateur côte à côte */ .header-left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .user-info { text-align: left; } .user-pseudo { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: 16px; color: #ffffff; } .user-budget { color: var(--gold); font-weight: 700; font-size: 14px; } .logout-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #ffffff; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; } .main-nav { align-items: center; } .logout-btn svg { display: block; flex-shrink: 0; } .logout-btn:hover { background: var(--red); border-color: var(--red); } /* ============ FOOTER ============ */ .main-footer { margin-top: auto; background: #0a2e1d; padding: 24px 0; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); } /* ============ TITRES ============ */ .page-title { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; margin-bottom: 4px; color: var(--ink); } .page-subtitle { font-family: 'Inter', sans-serif; letter-spacing: 1px; color: var(--ink-dim); font-size: 12px; margin-bottom: 28px; font-weight: 400; text-transform: uppercase; } /* ============ CARDS ============ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s; } .card:hover { box-shadow: var(--shadow); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .card-title { font-family: 'Inter', sans-serif; letter-spacing: 0.5px; font-size: 13px; color: var(--ink); font-weight: 600; text-transform: uppercase; } /* ============ GRIDS ============ */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-main { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } /* ============ BUTTONS ============ */ /* ============ BOUTONS ============ Tous les boutons partagent la même base : fond blanc, texte noir fin, bordure 1px. Les variantes (primary, danger, gold, green, red) ne changent QUE la couleur de la bordure et celle du texte pour signaler l'action, sans hurler. Hiérarchie : - .btn (par défaut) → neutre (bordure grise) - .btn-primary / .btn-green / .btn-gold → action positive (bordure verte/ambre) - .btn-red / .btn-danger → action destructive (bordure rouge) - .btn-secondary → neutre (identique au .btn par défaut, alias conservé) - .btn-ghost → idem (sans bordure colorée), conservé pour compat */ .btn { background: #ffffff; color: #111111; border: 1px solid #d1d5db; font-family: 'Inter', sans-serif; letter-spacing: 0; padding: 8px 16px; cursor: pointer; border-radius: 4px; font-size: 13px; font-weight: 400; transition: background 0.15s, border-color 0.15s, color 0.15s; text-decoration: none; display: inline-block; text-align: center; box-shadow: none; text-shadow: none; line-height: 1.4; } .btn:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; } .btn:disabled { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; box-shadow: none; text-shadow: none; } .btn-ghost { background: #ffffff; border: 1px solid #d1d5db; color: #111111; box-shadow: none; font-weight: 400; letter-spacing: 0; } .btn-ghost:hover:not(:disabled) { border-color: #9ca3af; color: #111111; background: #f9fafb; } /* Variantes colorées : on garde fond blanc + texte coloré + bordure colorée. Au hover, fond légèrement teinté pour le feedback. */ .btn-gold { background: #ffffff; color: #92651b; border-color: #d4a017; } .btn-gold:hover:not(:disabled) { background: #fffbeb; border-color: #b8870c; color: #92651b; } .btn-green, .btn-primary { background: #ffffff; color: #15803d; border-color: #15803d; } .btn-green:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: #f0fdf4; border-color: #166534; color: #166534; } .btn-red, .btn-danger { background: #ffffff; color: #b91c1c; border-color: #b91c1c; } .btn-red:hover:not(:disabled), .btn-danger:hover:not(:disabled) { background: #fef2f2; border-color: #991b1b; color: #991b1b; } /* .btn-secondary : neutre, identique au .btn par défaut (alias). */ .btn-secondary { background: #ffffff; color: #111111; border: 1px solid #d1d5db; box-shadow: none; } .btn-secondary:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; color: #111111; } .btn-sm { padding: 5px 10px; font-size: 12px; letter-spacing: 0; } .btn-lg { padding: 12px 24px; font-size: 15px; } .btn-block { display: block; width: 100%; } /* ============ FORMS ============ */ .form-group { margin-bottom: 18px; } label { display: block; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; font-size: 12px; color: var(--ink); margin-bottom: 6px; text-transform: uppercase; font-weight: 500; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea { width: 100%; background: #ffffff; border: 1.5px solid var(--border); color: var(--ink); padding: 11px 14px; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 14px; transition: all 0.15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 138, 63, 0.12); } .checkbox-row { display: flex; align-items: center; gap: 8px; margin: 14px 0; } .checkbox-row input { width: auto; } .checkbox-row label { margin: 0; letter-spacing: normal; font-family: 'Inter', sans-serif; font-size: 13px; text-transform: none; color: var(--ink); font-weight: 400; } /* ============ PAGES AUTH (login / register) ============ */ .auth-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 20px; background: radial-gradient(at 0% 0%, rgba(10, 138, 63, 0.06) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(15, 179, 80, 0.05) 0%, transparent 50%), #ffffff; } .auth-card { background: #ffffff; border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 8px; padding: 44px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); } .auth-card .logo { font-size: 36px; text-align: center; display: block; margin-bottom: 6px; color: var(--ink); } .auth-card .logo span { color: var(--accent); } .auth-card .tagline { font-family: 'Bebas Neue', sans-serif; letter-spacing: 4px; color: var(--accent); font-size: 13px; text-align: center; margin-bottom: 36px; font-weight: 600; } .auth-switch { text-align: center; margin-top: 24px; color: var(--ink-dim); font-size: 14px; } .auth-switch a { color: var(--accent); text-decoration: none; font-weight: 700; } .auth-switch a:hover { text-decoration: underline; } /* ============ ALERTS ============ */ .alert { padding: 13px 18px; border-radius: 6px; margin-bottom: 16px; border-left: 4px solid; font-size: 14px; } .alert-error { background: #fee2e2; border-color: var(--red); color: #991b1b; } .alert-success { background: #d1fae5; border-color: var(--green); color: #065f46; } .alert-info { background: #dbeafe; border-color: var(--blue); color: #1e40af; } .alert-warning { background: #fef3c7; border-color: var(--gold); color: #92400e; } /* ============ TABLES ============ */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; font-size: 12px; color: var(--ink); padding: 12px 12px; border-bottom: 2px solid var(--border-strong); background: var(--bg-2); font-weight: 600; text-transform: uppercase; } td { padding: 12px 12px; border-bottom: 1px solid var(--border); color: var(--ink); } tbody tr { transition: background 0.15s; } tbody tr:hover td { background: var(--bg-2); } tbody tr:last-child td { border-bottom: none; } /* ============ PASTILLES POSTES ============ */ .pos-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 22px; padding: 0 8px; text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; border-radius: 4px; letter-spacing: 0.5px; font-weight: 800; line-height: 1; color: #ffffff; text-transform: uppercase; } .pos-G { background: #d97706; } .pos-D { background: #2563eb; } .pos-M { background: var(--accent); } .pos-A { background: var(--red); } /* ============ PLAYER CARDS ============ */ .player-card { background: #ffffff; border: 1px solid var(--border); border-radius: 6px; padding: 14px; display: flex; align-items: center; gap: 12px; transition: all 0.15s; } .player-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); } .player-photo { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--ink-2); flex-shrink: 0; background-size: cover; background-position: center; border: 2px solid var(--border); font-weight: 700; } .player-info { flex: 1; min-width: 0; } .player-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .player-club { font-size: 11px; color: var(--ink-dim); margin-top: 2px; } .player-stats { text-align: right; flex-shrink: 0; } .player-value { color: var(--accent); font-weight: 700; font-size: 14px; } .player-points { color: var(--accent); font-size: 12px; margin-top: 2px; font-weight: 600; } /* ============ ÉVOLUTIONS ============ */ .evol-up { color: var(--green); font-weight: 600; } .evol-down { color: var(--red); font-weight: 600; } .evol-neutral { color: var(--ink-dim); } /* ============ EMPTY STATES ============ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--ink-dim); } .empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; } /* ============ STAT BOXES ============ */ .stat-box { background: #ffffff; border: 1px solid var(--border); border-radius: 8px; padding: 22px; text-align: center; transition: all 0.2s; border-top: 3px solid var(--accent); } .stat-box:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat-box .stat-value { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; margin-bottom: 4px; color: var(--ink); line-height: 1.1; } .stat-box .stat-value.money { color: var(--accent); } .stat-box .stat-value.points { color: var(--accent); } .stat-box .stat-label { font-family: 'Inter', sans-serif; letter-spacing: 0.5px; font-size: 12px; color: var(--ink); font-weight: 600; text-transform: uppercase; } /* ============ MODAL ============ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10, 46, 34, 0.6); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; backdrop-filter: blur(2px); } .modal-backdrop.show { display: flex; } .modal { background: #ffffff; border-radius: 8px; border-top: 4px solid var(--accent); padding: 32px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal h3 { font-family: 'Playfair Display', serif; font-size: 26px; margin-bottom: 18px; color: var(--ink); } .modal-actions { display: flex; gap: 10px; margin-top: 28px; justify-content: flex-end; } /* ============ FILTERS BAR ============ */ .filters-bar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; padding: 18px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; align-items: end; } .filters-bar .form-group { margin-bottom: 0; min-width: 160px; } .filters-bar .form-group.search { flex: 1; min-width: 200px; } /* ============ ADMIN SUB-NAVIGATION ============ */ .admin-subnav { display: flex; gap: 4px; flex-wrap: wrap; background: #ffffff; border: 1px solid var(--gold); border-radius: 6px; padding: 6px; margin-bottom: 26px; box-shadow: var(--shadow-sm); } .admin-subnav a { font-family: 'Inter', sans-serif; letter-spacing: 0.2px; font-size: 13px; color: var(--ink-2); text-decoration: none; padding: 8px 13px; border-radius: 4px; transition: all 0.2s; white-space: nowrap; font-weight: 500; text-transform: none; } .admin-subnav a:hover { color: var(--ink); background: #fef3c7; } .admin-subnav a.active { background: var(--gold); color: #1a2e22; } /* ============ BURGER BUTTON (mobile only) ============ */ .burger-btn { display: none; /* caché par défaut, visible en mobile */ background: transparent; border: none; cursor: pointer; padding: 8px; margin-right: 4px; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .burger-btn span { display: block; width: 22px; height: 2px; background: #ffffff; border-radius: 1px; transition: all 0.2s; } .burger-btn:hover span { background: var(--accent-3); } /* ============ MOBILE DRAWER ============ */ .mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(10, 14, 39, 0.6); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .mobile-drawer-overlay.open { opacity: 1; pointer-events: all; } .mobile-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: linear-gradient(180deg, #0a2e1d 0%, #0e3d27 100%); z-index: 300; transform: translateX(-100%); transition: transform 0.25s ease-out; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.4); } .mobile-drawer.open { transform: translateX(0); } .drawer-header { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; } .drawer-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; background: #ffffff; padding: 6px 12px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .drawer-logo img { height: 28px; width: auto; display: block; } .drawer-close { background: rgba(255,255,255,0.08); border: none; color: #ffffff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .drawer-close:hover { background: rgba(255,255,255,0.15); } .drawer-user { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); } .drawer-pseudo { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; font-size: 18px; color: #ffffff; } .drawer-budget { color: var(--gold); font-weight: 700; font-size: 15px; margin-top: 2px; } .drawer-nav { flex: 1; padding: 12px 12px; overflow-y: auto; } .drawer-nav a { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 6px; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 15px; font-weight: 500; margin-bottom: 4px; transition: all 0.15s; } .drawer-nav a:hover { background: rgba(255,255,255,0.08); color: #ffffff; } .drawer-nav a.active { background: var(--accent-3); color: #ffffff; font-weight: 600; } .drawer-nav a.admin-link { color: var(--gold); border: 1px solid var(--gold); margin-top: 8px; } .drawer-nav a.admin-link.active { background: var(--gold); color: #1a2e22; } .drawer-icon { font-size: 18px; width: 24px; text-align: center; } .drawer-footer { padding: 14px 20px 20px; border-top: 1px solid rgba(255,255,255,0.1); } .drawer-logout { display: block; text-align: center; padding: 12px; border-radius: 6px; background: rgba(220, 38, 38, 0.15); color: #fca5a5; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.15s; } .drawer-logout:hover { background: var(--red); color: #ffffff; } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .grid-2, .grid-3, .grid-4, .grid-main { grid-template-columns: 1fr; } /* Cache la nav desktop, montre le burger */ .main-nav { display: none; } .burger-btn { display: flex; } .page-title { font-size: 28px; } /* Header mobile : tout empilé verticalement, aligné à gauche, rien qui déborde */ .header-inner { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 12px; position: relative; } /* Le burger reste en haut à droite */ .burger-btn { position: absolute; top: 16px; right: 0; } /* Logo en haut, puis identité utilisateur en dessous */ .header-left { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; max-width: 100%; } .logo { margin-left: 0; } .logo img { height: 34px; } /* L'identité utilisateur passe sous le logo, alignée à gauche */ .header-left .user-info { display: flex !important; text-align: left; max-width: 100%; } /* On masque la déconnexion du header (déjà présente dans le menu burger) */ .header-left .logout-btn, .user-zone .logout-btn { display: none; } .user-zone { display: none; } } @media (max-width: 600px) { .container { padding: 0 14px; } .card { padding: 16px; } .admin-subnav { overflow-x: auto; flex-wrap: nowrap; } } /* =========================================================== Badge "hors poste" (inline, utilisable hors écran composition) La pénalité varie selon la distance entre lignes (1, 2 ou 3). =========================================================== */ .oop-badge-inline { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: help; } .oop-badge-inline.pen-20 { background: #fef3c7; color: #92400e; } /* 1 rang : orange clair */ .oop-badge-inline.pen-30 { background: #ede9fe; color: #5b21b6; } /* 2 rangs : violet clair */ .oop-badge-inline.pen-40 { background: #fee2e2; color: #991b1b; } /* 3 rangs : rouge clair */ /* ============================================================ * Page de login (index.php) — direction "Session tactique" * ============================================================ * Fond vert profond en dégradé radial, schéma 4-3-3 en filigrane, * carte formulaire blanche surélevée au centre. Indépendant des * styles .auth-wrapper / .auth-card qui restent utilisés pour * register.php / verify.php. */ .login-stage { position: relative; min-height: 100vh; padding: 60px 24px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #2d4a3a 0%, #1f3328 60%, #16241c 100%); overflow: hidden; } /* Quadrillage subtil (esprit cahier d'entraîneur) */ .login-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 28px 28px; z-index: 0; } /* Schéma tactique SVG en arrière-plan */ .login-tactical { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; z-index: 0; pointer-events: none; } .login-inner { position: relative; z-index: 1; width: 100%; max-width: 440px; } /* Variante plus large pour la page d'inscription (formulaire + post-it RGPD en grille) */ .login-inner.login-inner-wide { max-width: 720px; } /* En-tête : badge + logo + filet "FANTASY LIGUE 1" */ .login-header { text-align: center; margin-bottom: 28px; } .login-badge { display: inline-block; background: var(--gold, #d4a017); color: #1a2e22; padding: 7px 18px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; letter-spacing: 2px; font-weight: 700; border-radius: 2px; margin-bottom: 20px; } .login-logo { text-align: center; } .login-logo img { max-width: 280px; width: 100%; height: auto; /* Inverser/éclaircir le logo pour qu'il ressorte sur fond sombre */ filter: brightness(0) invert(1); } /* Carte formulaire blanche */ .login-card { background: #fff; padding: 36px; border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.2); position: relative; margin-top: 8px; } /* Onglet "ACCÈS MANAGER" qui dépasse en haut à gauche */ .login-tab { position: absolute; top: -16px; left: 36px; background: #1a2e22; color: var(--gold, #d4a017); padding: 7px 16px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; letter-spacing: 1.5px; font-weight: 700; border-radius: 2px; } /* Surcharge des form-group pour la teinte tactique */ .login-card .form-group { margin-bottom: 18px; } .login-card .form-group label { color: #1a2e22; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; letter-spacing: 0.3px; text-transform: none; font-weight: 700; margin-bottom: 8px; display: block; } /* Petit chevron de couleur or pour bien marquer le début du label */ .login-card .form-group label::before { content: "▶ "; color: var(--gold, #d4a017); font-size: 11px; margin-right: 4px; vertical-align: 2px; } .login-card .form-group input { background: #f7faf8; border: 1px solid rgba(26, 46, 34, 0.15); border-bottom: 2px solid var(--green, #0a8a3f); padding: 12px 14px; color: #1a2e22; font-size: 15px; width: 100%; border-radius: 0; outline: none; transition: border-color 0.15s; } .login-card .form-group input:focus { border-bottom-color: var(--gold, #d4a017); } .login-card .checkbox-row { color: #1a2e22; font-size: 13px; display: flex; align-items: center; gap: 8px; margin: 6px 0 22px; } .login-card .checkbox-row input[type="checkbox"] { accent-color: var(--green, #0a8a3f); } /* CTA principal */ .login-cta { background: #1a2e22 !important; color: var(--gold, #d4a017) !important; border: none !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 1.5px; padding: 14px !important; text-transform: none; border-radius: 4px; transition: filter 0.15s; } .login-cta:hover { filter: brightness(1.15); } /* Lien "Inscription" */ .login-card .auth-switch { text-align: center; margin-top: 18px; color: var(--ink-dim, #6b7c75); font-size: 13px; } .login-card .auth-switch a { color: var(--green, #0a8a3f); text-decoration: none; font-weight: 700; } .login-card .auth-switch a:hover { text-decoration: underline; } /* Responsive : mobile */ @media (max-width: 480px) { .login-stage { padding: 32px 16px; } .login-card { padding: 28px 24px; } .login-tab { left: 24px; } .login-logo img { max-width: 220px; } } /* ============================================================ * Inscription : encart RGPD + case à cocher de consentement * ============================================================ */ /* Carte d'inscription un peu plus large pour accueillir le texte RGPD */ .auth-card.auth-card-wide { max-width: 580px; } .rgpd-info { background: #f7faf8; border: 1px solid rgba(26, 46, 34, 0.12); border-left: 4px solid var(--gold, #d4a017); border-radius: 4px; padding: 18px 22px; margin-bottom: 24px; font-size: 13px; line-height: 1.55; color: #1a2e22; } .rgpd-info-title { font-weight: 700; font-size: 14px; color: #1a2e22; margin: 14px 0 6px; } .rgpd-info-title:first-child { margin-top: 0; } .rgpd-info p { margin: 0 0 8px; } .rgpd-info ul { margin: 6px 0 12px; padding-left: 20px; } .rgpd-info ul li { margin-bottom: 4px; } .rgpd-info strong { color: #1a2e22; font-weight: 700; } /* La case de consentement RGPD : un peu plus marquée que les autres */ .checkbox-row.rgpd-consent { align-items: flex-start; gap: 10px; padding: 12px; background: rgba(212, 160, 23, 0.07); border: 1px solid rgba(212, 160, 23, 0.25); border-radius: 4px; margin: 18px 0 20px; } .checkbox-row.rgpd-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--green, #0a8a3f); } .checkbox-row.rgpd-consent label { font-size: 13px; line-height: 1.5; color: #1a2e22; cursor: pointer; } /* ============================================================ * Post-it RGPD sur la page d'inscription * ============================================================ */ .rgpd-board { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 22px; margin: 12px 6px 24px; padding: 8px 4px; } .postit { position: relative; padding: 18px 20px 22px; box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 4px 6px 10px rgba(0,0,0,0.25), 8px 14px 24px rgba(0,0,0,0.15); border-radius: 1px; color: #1a2e22; } .postit-yellow { background: linear-gradient(135deg, #fff6a0 0%, #ffe666 100%); } .postit-ivory { background: linear-gradient(135deg, #f9f0c4 0%, #efe095 100%); } /* Variante "large" : prend les 2 colonnes */ .postit-wide { grid-column: 1 / -1; } /* Rotations variées pour l'effet "vraiment posé à la main" */ .postit-r1 { transform: rotate(-0.8deg); } .postit-r2 { transform: rotate(1.3deg); } .postit-r3 { transform: rotate(-1.5deg); } .postit-r4 { transform: rotate(0.9deg); } .postit-r5 { transform: rotate(-0.4deg); } .postit-r6 { transform: rotate(0.6deg); } .postit-title { font-size: 15px; font-weight: 700; color: #1a2e22; margin-bottom: 8px; } .postit-body { font-size: 13px; line-height: 1.5; color: #1a2e22; } .postit-body strong { color: #1a2e22; } /* Punaise 3D réaliste : dégradé radial + reflet brillant */ .pin { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 3px 3px 4px rgba(255,255,255,0.7), inset -3px -3px 4px rgba(0,0,0,0.4), 2px 3px 5px rgba(0,0,0,0.5); } .pin::after { content: ""; position: absolute; top: 2px; left: 3px; width: 5px; height: 5px; background: rgba(255,255,255,0.85); border-radius: 50%; filter: blur(0.5px); } .pin-red { background: radial-gradient(circle at 35% 30%, #ff5757 10%, #c91414 80%); } .pin-blue { background: radial-gradient(circle at 35% 30%, #4d8df5 10%, #1c3d8a 80%); } .pin-green { background: radial-gradient(circle at 35% 30%, #66d172 10%, #167523 80%); } /* Coin corné en bas à droite */ .corner-fold { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.05) 60%, transparent 75%); clip-path: polygon(100% 0, 100% 100%, 0 100%); } .corner-fold::before { /* Le rabat soulevé : petit triangle clair par-dessus */ content: ""; position: absolute; bottom: 0; right: 0; width: 22px; height: 22px; background: linear-gradient(315deg, #fff8c8 0%, #ffe680 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); box-shadow: -1px -1px 2px rgba(0,0,0,0.1); } .postit-ivory .corner-fold::before { background: linear-gradient(315deg, #f2e8b8 0%, #e6d68a 100%); } /* Responsive : sur mobile, 1 colonne */ @media (max-width: 600px) { .rgpd-board { grid-template-columns: 1fr; gap: 24px; } .postit-wide { grid-column: auto; } } /* ============================================================ * Messagerie (chat-like) * ============================================================ */ .chat-card .card-header { display: flex; justify-content: space-between; align-items: center; } /* Fil de messages : zone scrollable avec hauteur fixe */ .chat-thread { background: #f5f7f5; border: 1px solid var(--border, #e2e8e0); border-radius: 6px; padding: 16px 14px; max-height: 520px; min-height: 280px; overflow-y: auto; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .chat-empty { text-align: center; padding: 40px 20px; color: var(--ink-dim, #6b7c75); } /* Séparateur de jour */ .chat-day-sep { display: flex; align-items: center; justify-content: center; margin: 12px 0 6px; } .chat-day-sep span { background: rgba(26, 46, 34, 0.07); color: #1a2e22; font-size: 11px; padding: 3px 12px; border-radius: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: capitalize; } /* Ligne d'un message : alignée à droite si c'est le mien, à gauche sinon */ .chat-msg { display: flex; margin: 2px 0; } .chat-msg-mine { justify-content: flex-end; } .chat-msg-other { justify-content: flex-start; } /* Bulle */ .chat-bubble { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .chat-msg-mine .chat-bubble { background: var(--green, #0a8a3f); color: #fff; border-bottom-right-radius: 4px; } .chat-msg-other .chat-bubble { background: #fff; color: #1a2e22; border: 1px solid var(--border, #e2e8e0); border-bottom-left-radius: 4px; } .chat-author { font-size: 11px; font-weight: 700; margin-bottom: 3px; opacity: 0.9; color: var(--gold, #d4a017); } .chat-msg-mine .chat-author { color: rgba(255,255,255,0.85); } .chat-body { color: inherit; } .chat-time { font-size: 10px; text-align: right; margin-top: 4px; opacity: 0.7; } /* Formulaire d'envoi */ .chat-form { display: flex; gap: 10px; align-items: stretch; } .chat-form textarea { flex: 1; padding: 10px 12px; border: 1px solid var(--border, #e2e8e0); border-radius: 6px; font-family: inherit; font-size: 14px; line-height: 1.4; resize: vertical; min-height: 44px; max-height: 200px; } .chat-form textarea:focus { border-color: var(--green, #0a8a3f); outline: none; } .chat-form button { align-self: flex-end; white-space: nowrap; } /* Badge de notification (sur les liens menu) */ .nav-badge { display: inline-block; background: var(--red, #dc2626); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; line-height: 1.3; min-width: 18px; text-align: center; } /* ============ BANDEAU IMPERSONATION ADMIN ============ */ .impersonation-banner { position: sticky; top: 0; z-index: 1200; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 8px 16px; background: #7c3aed; color: #fff; font-size: 13px; text-align: center; } .impersonation-banner strong { font-weight: 700; } .impersonation-text { line-height: 1.4; } .impersonation-back { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.15s; } .impersonation-back:hover { background: rgba(255, 255, 255, 0.32); } /* =========================================================== Tableaux responsives "mode carte" (.table-cards) Sur mobile, chaque ligne devient une carte empilée : plus aucun scroll horizontal. Utilisé sur le Vestiaire. =========================================================== */ .table-wrap { width: 100%; } @media (min-width: 601px) { /* Desktop / tablette : tableau classique, scroll si besoin */ .table-wrap { overflow-x: auto; } } @media (max-width: 600px) { .table-cards { display: block; width: 100%; } .table-cards thead { display: none; } /* en-têtes inutiles en mode carte */ .table-cards tbody { display: block; width: 100%; } .table-cards tr { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "photo name" "info info" "action action"; align-items: center; gap: 6px 12px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .table-cards td { display: block; border: none; padding: 0; } /* Photo + nom sur la première ligne de la carte */ .table-cards td.cell-photo { grid-area: photo; } .table-cards td.cell-photo .player-photo { width: 48px; height: 48px; } .table-cards td.cell-name { grid-area: name; font-size: 16px; } .table-cards td.cell-name strong { font-size: 16px; } /* Les cellules de données : libellé à gauche, valeur à droite */ .table-cards td[data-label] { grid-area: auto; display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--border); font-size: 14px; } /* La cellule nom ne doit pas afficher de libellé ni de bordure */ .table-cards td.cell-name { border-top: none; } .table-cards td.cell-name::before { content: none; } /* Regroupe les infos chiffrées dans la zone "info" */ .table-cards td[data-label]:not(.cell-name) { grid-column: 1 / -1; } .table-cards td[data-label]::before { content: attr(data-label); color: var(--ink-dim); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; } /* Bouton d'action en pleine largeur en bas de carte */ .table-cards td.cell-action { grid-area: action; margin-top: 8px; } .table-cards td.cell-action form { display: block; width: 100%; } .table-cards td.cell-action .btn { width: 100%; } }