/* ========================================================================== PILOTES F1 ANALYTICS - DESIGN SYSTEM & STYLES ========================================================================== */ /* Polices chargées depuis le des pages : un @import ici bloquerait le rendu. */ :root { --bg-primary: #0a0c10; --bg-secondary: #121620; --bg-card: rgba(22, 28, 42, 0.75); --bg-card-hover: rgba(30, 38, 58, 0.85); --bg-glass: rgba(18, 22, 32, 0.65); --border-subtle: rgba(255, 255, 255, 0.08); --border-focus: rgba(225, 6, 0, 0.5); --border-active: rgba(0, 240, 255, 0.4); --f1-red: #e10600; --f1-red-glow: rgba(225, 6, 0, 0.35); --f1-dark-red: #9e0400; --accent-cyan: #00f0ff; --accent-cyan-glow: rgba(0, 240, 255, 0.25); --accent-gold: #ffd700; --accent-silver: #c0c0c0; --accent-bronze: #cd7f32; --accent-green: #00e676; --accent-orange: #ff9100; --accent-purple: #b388ff; --text-main: #f0f4fc; --text-muted: #94a3b8; --text-dim: #64748b; --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 25px rgba(225, 6, 0, 0.2); --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-primary); color: var(--text-main); font-family: var(--font-body); line-height: 1.6; min-height: 100vh; background-image: radial-gradient(circle at 15% 15%, rgba(225, 6, 0, 0.08) 0%, transparent 40%), radial-gradient(circle at 85% 80%, rgba(0, 240, 255, 0.05) 0%, transparent 40%), linear-gradient(180deg, rgba(10, 12, 16, 0.95) 0%, #0a0c10 100%); background-attachment: fixed; overflow-x: hidden; } /* ========================================================================== NAVIGATION & HEADER ========================================================================== */ .header { position: sticky; top: 0; z-index: 100; background: rgba(10, 12, 16, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); padding: 0.75rem 2rem; display: flex; justify-content: space-between; align-items: center; } .logo-group { display: flex; align-items: center; gap: 1rem; text-decoration: none; } .logo-text .logo-heading { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; color: #fff; display: flex; align-items: center; gap: 0.5rem; } /* Wordmark : Pilotes + F1 + .com */ .logo-wordmark { display: inline-flex; align-items: baseline; gap: 0.06rem; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1; white-space: nowrap; } .logo-f1 { display: inline-block; font-size: 1.5rem; font-weight: 900; color: var(--f1-red); letter-spacing: 0.5px; font-style: italic; transform: skewX(-6deg); } .logo-tld { color: var(--accent-cyan); font-weight: 600; font-size: 1.15rem; letter-spacing: 0; } @media (max-width: 640px) { .logo-wordmark { font-size: 1.15rem; } .logo-f1 { font-size: 1.05rem; } .logo-tld { font-size: 0.95rem; } } .logo-text span.version-tag { font-size: 0.65rem; font-weight: 700; color: var(--accent-cyan); background: rgba(0, 240, 255, 0.12); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(0, 240, 255, 0.3); letter-spacing: 0.5px; } .header-actions { display: flex; align-items: center; gap: 1rem; } .btn-admin { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-main); padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: var(--transition-fast); } .btn-admin:hover { background: rgba(225, 6, 0, 0.15); border-color: var(--f1-red); color: #fff; box-shadow: 0 0 15px var(--f1-red-glow); transform: translateY(-1px); } /* ========================================================================== NAVIGATION 2 NIVEAUX (PILOTES & STATISTIQUES) ========================================================================== */ .nav-container { max-width: 1440px; margin: 1.25rem auto 0; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .nav-main-bar { display: flex; align-items: center; justify-content: flex-start; } .nav-main-tabs { display: inline-flex; background: var(--bg-secondary); padding: 0.35rem; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); gap: 0.4rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .nav-main-btn { background: transparent; border: none; color: var(--text-muted); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; padding: 0.65rem 1.6rem; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 0.6rem; transition: all 0.2s ease; letter-spacing: 0.5px; } .nav-main-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .nav-main-btn.active { color: #fff; background: linear-gradient(135deg, var(--f1-red) 0%, var(--f1-dark-red) 100%); box-shadow: 0 4px 18px var(--f1-red-glow); } /* Sous-bandeau Statistiques - PAS DE SCROLLING HORIZONTAL */ .nav-sub-tabs { display: flex; flex-wrap: wrap; /* Pas de scroll horizontal, wrap propre */ gap: 0.45rem; background: rgba(18, 20, 29, 0.85); backdrop-filter: blur(12px); padding: 0.5rem 0.6rem; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); animation: fadeIn 0.2s ease-in-out; } .nav-sub-tabs .tab-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-muted); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; transition: var(--transition-fast); } .nav-sub-tabs .tab-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } .nav-sub-tabs .tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--f1-red) 0%, var(--f1-dark-red) 100%); border-color: var(--f1-red); box-shadow: 0 3px 12px var(--f1-red-glow); } /* Filtres de pilotes */ .driver-filter-btn { background: transparent; border: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .driver-filter-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .driver-filter-btn.active { color: #fff; background: var(--f1-red); box-shadow: 0 2px 8px var(--f1-red-glow); } /* Grille des pilotes */ .drivers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; } .driver-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.2rem; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .driver-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } .driver-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .driver-card-number { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: rgba(255, 255, 255, 0.2); line-height: 1; } .driver-card-tag { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } .driver-card-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; } .driver-card-team { font-size: 0.85rem; color: var(--accent-cyan); font-weight: 600; margin-bottom: 0.9rem; } .driver-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; background: rgba(0, 0, 0, 0.25); padding: 0.6rem 0.5rem; border-radius: 6px; text-align: center; } .driver-stat-item .stat-val { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: #fff; } .driver-stat-item .stat-lbl { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; } /* ========================================================================== MAIN CONTENT & CONTAINER ========================================================================== */ .main-content { max-width: 1440px; margin: 1.5rem auto 4rem; padding: 0 1.5rem; } .tab-pane { display: none; animation: fadeIn 0.3s ease; } .tab-pane.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== CARD SYSTEM & GRIDS ========================================================================== */ .grid-cols-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; } .grid-cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-card); transition: var(--transition-smooth); position: relative; overflow: hidden; } .card:hover { background: var(--bg-card-hover); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .card-kpi { display: flex; flex-direction: column; justify-content: space-between; } .card-kpi .kpi-label { font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; } .card-kpi .kpi-icon { font-size: 1.4rem; color: var(--f1-red); } .card-kpi .kpi-value { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; color: #fff; line-height: 1.1; margin: 0.75rem 0 0.25rem; } .card-kpi .kpi-sub { font-size: 0.85rem; color: var(--accent-cyan); font-weight: 500; } /* Top Banner Live / Latest Race */ .banner-latest { background: linear-gradient(135deg, rgba(225, 6, 0, 0.15) 0%, rgba(18, 22, 32, 0.85) 100%); border: 1px solid rgba(225, 6, 0, 0.35); border-radius: var(--radius-lg); padding: 1.75rem 2rem; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; position: relative; overflow: hidden; } .banner-latest::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 100%; background: radial-gradient(circle, var(--f1-red-glow) 0%, transparent 70%); pointer-events: none; } .banner-title { font-family: var(--font-heading); font-size: 0.85rem; text-transform: uppercase; color: var(--f1-red); font-weight: 800; letter-spacing: 1.5px; margin-bottom: 0.35rem; } .banner-race-name { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 800; color: #fff; } .banner-details { display: flex; gap: 1.5rem; color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; } .winner-highlight { display: flex; align-items: center; gap: 1rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border-subtle); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); } .winner-trophy { font-size: 2rem; color: var(--accent-gold); } .winner-meta .winner-title { font-size: 0.75rem; color: var(--accent-gold); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; } .winner-meta .winner-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: #fff; } .winner-meta .winner-team { font-size: 0.85rem; color: var(--text-muted); } /* ========================================================================== TABLES & LISTS ========================================================================== */ .table-wrapper { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-card); } table.f1-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.92rem; } table.f1-table th { background: rgba(18, 22, 32, 0.95); color: var(--text-muted); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; } table.f1-table td { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--text-main); vertical-align: middle; } table.f1-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } /* Badges */ .badge-pos { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-weight: 800; font-family: var(--font-heading); font-size: 0.9rem; } .badge-pos.p1 { background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); color: #111; box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); } .badge-pos.p2 { background: linear-gradient(135deg, #e0e0e0 0%, #9e9e9e 100%); color: #111; } .badge-pos.p3 { background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%); color: #fff; } .badge-pos.other { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } .delta-tag { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 0.85rem; padding: 3px 8px; border-radius: 4px; } .delta-tag.up { color: var(--accent-green); background: rgba(0, 230, 118, 0.1); } .delta-tag.down { color: var(--f1-red); background: rgba(225, 6, 0, 0.1); } .delta-tag.neutral { color: var(--text-dim); } /* ========================================================================== CONTROLS & FILTERS (Barème, Saisons, etc.) ========================================================================== */ .filter-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; background: var(--bg-card); padding: 1rem 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); } .control-group { display: flex; align-items: center; gap: 0.75rem; } .control-label { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; } select.f1-select, input.f1-input { background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-main); padding: 0.55rem 1rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; outline: none; transition: var(--transition-fast); } select.f1-select:focus, input.f1-input:focus { border-color: var(--f1-red); box-shadow: 0 0 10px var(--f1-red-glow); } .btn-primary { background: linear-gradient(135deg, var(--f1-red) 0%, var(--f1-dark-red) 100%); color: #fff; border: none; padding: 0.6rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition-fast); box-shadow: 0 4px 15px var(--f1-red-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(225, 6, 0, 0.5); } .btn-primary:active { transform: translateY(0); } /* ========================================================================== HEAD TO HEAD DUELS VISUALIZATION ========================================================================== */ .duel-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; } .duel-team-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.75rem; margin-bottom: 1.25rem; } .duel-team-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: #fff; } .duel-driver-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; } .duel-driver { display: flex; flex-direction: column; } .duel-driver.right { text-align: right; align-items: flex-end; } .duel-driver-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #fff; } .duel-score { font-family: var(--font-heading); font-size: 2rem; font-weight: 900; color: var(--accent-cyan); } .duel-bar-container { display: flex; height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; margin-top: 0.75rem; } .duel-bar-left { background: var(--f1-red); transition: width 0.5s ease; } .duel-bar-right { background: var(--accent-cyan); transition: width 0.5s ease; } /* ========================================================================== ADMIN PANEL STYLES ========================================================================== */ .admin-header-badge { background: rgba(255, 145, 0, 0.15); border: 1px solid var(--accent-orange); color: var(--accent-orange); font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; } .sync-action-box { background: linear-gradient(135deg, rgba(22, 28, 42, 0.95) 0%, rgba(30, 38, 58, 0.95) 100%); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; box-shadow: 0 15px 35px rgba(0,0,0,0.5); } .sync-info h3 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: #fff; margin-bottom: 0.35rem; } .sync-info p { color: var(--text-muted); font-size: 0.92rem; max-width: 600px; } .btn-sync-now { background: linear-gradient(135deg, var(--accent-green) 0%, #009624 100%); color: #fff; border: none; padding: 0.85rem 1.85rem; border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; transition: var(--transition-fast); box-shadow: 0 4px 20px rgba(0, 230, 118, 0.3); } .btn-sync-now:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 230, 118, 0.5); } .btn-sync-now.loading { pointer-events: none; opacity: 0.75; } .spinner { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; } .btn-sync-now.loading .spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .log-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; } .log-badge.success { background: rgba(0, 230, 118, 0.15); color: var(--accent-green); border: 1px solid rgba(0, 230, 118, 0.3); } .log-badge.error { background: rgba(225, 6, 0, 0.15); color: var(--f1-red); border: 1px solid rgba(225, 6, 0, 0.3); } .log-badge.warning { background: rgba(255, 145, 0, 0.15); color: var(--accent-orange); border: 1px solid rgba(255, 145, 0, 0.3); } /* Toast Notifications */ .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--bg-card); backdrop-filter: blur(16px); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1rem 1.5rem; color: #fff; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 10px 30px rgba(0,0,0,0.6); z-index: 1000; transform: translateY(100px); opacity: 0; transition: var(--transition-smooth); } .toast.show { transform: translateY(0); opacity: 1; } .toast.success { border-left: 4px solid var(--accent-green); } .toast.error { border-left: 4px solid var(--f1-red); } /* Responsive */ @media (max-width: 768px) { .header { padding: 0.75rem 1rem; } .nav-container, .main-content { padding: 0 1rem; } .grid-cols-2 { grid-template-columns: 1fr; } .duel-driver-split { grid-template-columns: 1fr; text-align: center; } .duel-driver.right { text-align: center; align-items: center; } } /* ========================================================== Statistiques avancées : intitulés cliquables et modale de détail ========================================================== */ .stat-detail-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--text-main); text-align: left; cursor: pointer; border-bottom: 1px dotted var(--text-dim); transition: color 0.15s ease, border-color 0.15s ease; } .stat-detail-link::after { content: ' ›'; color: var(--text-dim); font-weight: 400; } .stat-detail-link:hover, .stat-detail-link:focus-visible { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); outline: none; } .stat-detail-link:hover::after, .stat-detail-link:focus-visible::after { color: var(--accent-cyan); } .stat-modal-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 7, 12, 0.8); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; animation: statModalFade 0.15s ease; } @keyframes statModalFade { from { opacity: 0; } to { opacity: 1; } } .stat-modal { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card); width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .stat-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border-subtle); background: rgba(0, 0, 0, 0.25); } .stat-modal-title { font-family: var(--font-heading); font-size: 1.2rem; color: #fff; margin: 0 0 0.2rem 0; } .stat-modal-subtitle { font-size: 0.85rem; color: var(--text-muted); } .stat-modal-close { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-subtle); color: var(--text-muted); border-radius: 6px; width: 32px; height: 32px; flex-shrink: 0; cursor: pointer; font-size: 0.9rem; line-height: 1; transition: all 0.15s ease; } .stat-modal-close:hover { background: var(--f1-red); border-color: var(--f1-red); color: #fff; } .stat-modal-body { padding: 1.1rem 1.35rem 1.5rem; overflow-y: auto; } .stat-modal-section { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin: 0 0 0.7rem 0; } .stat-modal-section:not(:first-child) { margin-top: 1.75rem; } .stat-modal-note { margin-top: 0.9rem; font-size: 0.85rem; color: var(--text-muted); } /* ========================================================== Pied de page légal (guidelines Formula 1) ========================================================== */ .site-footer { max-width: 1600px; margin: 3rem auto 0; padding: 1.5rem 2rem 2rem; border-top: 1px solid var(--border-subtle); text-align: center; } .legal-disclaimer { font-size: 0.75rem; line-height: 1.6; color: var(--text-dim); max-width: 900px; margin: 0 auto; } .legal-disclaimer-fr { font-size: 0.75rem; line-height: 1.6; color: var(--text-dim); max-width: 900px; margin: 0.6rem auto 0; font-style: italic; } /* ========================================================== En-tête de carte avec filtre ========================================================== */ .card-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; } .filter-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; user-select: none; transition: all 0.15s ease; white-space: nowrap; } .filter-toggle:hover { border-color: var(--border-active); color: var(--text-main); } .filter-toggle input { accent-color: var(--accent-cyan); cursor: pointer; margin: 0; } .filter-toggle:has(input:checked) { color: var(--accent-cyan); border-color: var(--border-active); background: rgba(0, 240, 255, 0.08); } .table-caption { margin-top: 0.75rem; font-size: 0.78rem; color: var(--text-dim); } /* Barre de sélection de période (onglet conversion) */ .era-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.25rem; padding: 0.75rem 1.1rem; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .era-bar-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); } .era-bar-hint { font-size: 0.78rem; color: var(--text-dim); } /* Nom de pilote cliquable menant à sa fiche */ .driver-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; border-bottom: 1px dotted transparent; transition: color 0.15s ease, border-color 0.15s ease; } .driver-link:hover, .driver-link:focus-visible { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); outline: none; } /* ========================================================== Bandeau de consentement ========================================================== */ .consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; background: var(--bg-secondary); border-top: 1px solid var(--border-active); box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.6); animation: consentRise 0.25s ease; } @keyframes consentRise { from { transform: translateY(100%); } to { transform: translateY(0); } } .consent-inner { max-width: 1400px; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; } .consent-text { flex: 1 1 420px; } .consent-text strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.3rem; } .consent-text p { color: var(--text-muted); font-size: 0.84rem; line-height: 1.6; margin: 0; } .consent-text a { color: var(--accent-cyan); } .consent-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .consent-btn { font: inherit; font-size: 0.86rem; font-weight: 700; padding: 0.6rem 1.25rem; border-radius: 6px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } /* Refus et acceptation ont le même poids visuel : un refus ne doit pas être découragé */ .consent-refuse { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-muted); } .consent-refuse:hover { border-color: var(--text-muted); color: var(--text-main); } .consent-accept { background: var(--f1-red); border: 1px solid var(--f1-red); color: #fff; } .consent-accept:hover { background: var(--f1-dark-red); } .footer-links { margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-dim); display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; } .footer-links a { color: var(--text-muted); text-decoration: underline; } .footer-links a:hover { color: var(--accent-cyan); } /* Mention « À propos » du pied de page */ .footer-about { max-width: 900px; margin: 0 auto 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); text-align: left; } .footer-about-title { font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; transition: color 0.15s ease; } /* Masque le triangle natif pour lui substituer un chevron cohérent avec le site */ .footer-about-title::-webkit-details-marker { display: none; } .footer-about-title::before { content: '▸'; transition: transform 0.2s ease; display: inline-block; } .footer-about[open] .footer-about-title::before { transform: rotate(90deg); } .footer-about-title:hover, .footer-about-title:focus-visible { color: var(--accent-cyan); outline: none; } .footer-about-body { padding-top: 0.75rem; } .footer-about p { font-size: 0.8rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 0.75rem; } .footer-about p:last-child { margin-bottom: 0; } .footer-about strong { color: var(--text-main); } .footer-about a { color: var(--accent-cyan); text-decoration: none; } .footer-about a:hover { text-decoration: underline; } /* Introduction éditoriale de la page d'accueil */ .seo-intro { max-width: 1000px; margin: 0 auto 2rem; padding: 1.5rem 1.75rem; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .seo-intro h1 { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; margin: 0 0 0.9rem; } .seo-intro p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.75; margin: 0 0 0.75rem; } .seo-intro p:last-child { margin-bottom: 0; } .seo-intro strong { color: var(--text-main); font-weight: 600; } @media (max-width: 640px) { .seo-intro { padding: 1.15rem 1.25rem; } .seo-intro h1 { font-size: 1.25rem; } } /* ========================================================== Pages rendues côté serveur (fiches pilotes, index) ========================================================== */ .breadcrumb { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1.25rem; } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--accent-cyan); } .driver-page h1 { font-family: var(--font-heading); font-size: 1.75rem; color: #fff; margin: 0 0 0.85rem; } .driver-page h2 { font-family: var(--font-heading); font-size: 1.15rem; color: #fff; margin: 2rem 0 0.85rem; } .driver-lede { color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; margin: 0 0 1.25rem; } .driver-lede strong { color: var(--text-main); } .driver-facts { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.35rem 1.5rem; } .driver-facts li { color: var(--text-muted); font-size: 0.86rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border-subtle); } .driver-facts strong { color: var(--text-main); } .driver-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .driver-kpi { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.85rem 1rem; text-align: center; } .driver-kpi-value { font-size: 1.75rem; font-weight: 800; font-family: var(--font-mono); line-height: 1.2; } .driver-kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-top: 0.2rem; } .driver-cta { margin-top: 2rem; } .driver-cta .btn-primary { display: inline-block; text-decoration: none; } /* Index alphabétique des pilotes */ .letters-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); } .letters-nav a { display: inline-block; min-width: 28px; text-align: center; padding: 0.25rem 0.4rem; border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-muted); text-decoration: none; font-weight: 700; font-size: 0.85rem; transition: all 0.15s ease; } .letters-nav a:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); } .letter-block h2 { border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.4rem; } .drivers-index { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.2rem 1.5rem; } .drivers-index li { padding: 0.35rem 0; font-size: 0.88rem; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .drivers-index a { color: var(--text-main); text-decoration: none; font-weight: 600; } .drivers-index a:hover { color: var(--accent-cyan); text-decoration: underline; } .drivers-index-meta { color: var(--text-dim); font-size: 0.75rem; white-space: nowrap; } /* Réservé aux lecteurs d'écran : lu par les technologies d'assistance et les moteurs de recherche, invisible à l'écran. On évite display:none, qui le retirerait de l'arbre d'accessibilité. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Présentation éditoriale en fin de page : plus discrète que l'ancien bandeau */ .seo-outro { margin-top: 2.5rem; background: transparent; border-color: rgba(255, 255, 255, 0.05); } .seo-outro h2 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-main); margin: 0 0 0.9rem; } .seo-outro p { font-size: 0.84rem; color: var(--text-dim); } .seo-outro strong { color: var(--text-muted); font-weight: 600; } /* ========================================================== Analyse de course ========================================================== */ .analysis-title { font-family: var(--font-heading); font-size: 1.2rem; color: #fff; margin: 0 0 0.4rem; } .analysis-desc { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.1rem; } .analysis-note { color: var(--text-dim); font-size: 0.78rem; line-height: 1.6; margin: 0.5rem 0 0; } .analysis-header-title { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; margin: 0 0 0.25rem; } .analysis-header-meta { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1.25rem; } .analysis-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .analysis-kpi { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.7rem 0.9rem; text-align: center; } .analysis-kpi-value { display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 800; color: var(--accent-cyan); line-height: 1.2; } .analysis-kpi-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } /* Le graphique a besoin d'une hauteur explicite : Chart.js s'y adapte */ .chart-box { height: 380px; position: relative; } .chart-box-tall { height: 460px; } /* Sélection des pilotes comparés */ .driver-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; } .driver-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.3rem 0.75rem; font: inherit; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; } .driver-chip:hover { border-color: var(--border-active); color: var(--text-main); } .driver-chip.active { background: rgba(255, 255, 255, 0.07); font-weight: 700; } .driver-chip-dot { width: 8px; height: 8px; border-radius: 50%; } .driver-chip-pos { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); min-width: 1.2em; text-align: right; } .driver-chip-team { font-size: 0.72rem; color: var(--text-dim); } /* Relais : un bandeau par pilote, segments accolés avec un filet de séparation */ .stint-chart { display: flex; flex-direction: column; gap: 0.28rem; } .stint-row { display: flex; align-items: center; gap: 0.6rem; } .stint-driver { width: 3.2rem; flex-shrink: 0; font-weight: 700; font-size: 0.82rem; color: var(--text-main); text-align: right; } .stint-bar { flex: 1; display: flex; height: 22px; border-radius: 4px; overflow: hidden; } .stint-segment { display: flex; align-items: center; justify-content: center; overflow: hidden; /* Un filet de la couleur du fond sépare deux relais : sans lui, deux segments voisins de teinte proche se lisent comme un seul */ box-shadow: inset -2px 0 0 var(--bg-primary); } .stint-segment span { font-size: 0.68rem; font-weight: 700; color: rgba(0, 0, 0, 0.75); white-space: nowrap; } .compound-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--text-muted); } .compound-key { display: inline-flex; align-items: center; gap: 0.4rem; } .compound-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; } .analysis-summary { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); } /* Neutralisations */ .neutralisation-list { display: flex; flex-direction: column; gap: 0.4rem; } .neutralisation-item { background: rgba(0, 0, 0, 0.25); border-left: 3px solid var(--text-muted); border-radius: 0 6px 6px 0; padding: 0.5rem 0.9rem; font-size: 0.85rem; color: var(--text-muted); } .qualifying-segment { font-family: var(--font-heading); font-size: 1rem; color: var(--accent-cyan); margin: 1.5rem 0 0.6rem; } .qualifying-segment:first-child { margin-top: 0; } /* Mise en avant des lignes correspondant aux pilotes sélectionnés */ .f1-table tr.row-selected { background: rgba(0, 240, 255, 0.06); } .f1-table tr.row-eliminated { opacity: 0.55; } .f1-table td.cell-muted { color: var(--text-dim); font-size: 0.85rem; } .f1-table td.cell-best { color: var(--accent-purple); font-weight: 700; } @media (max-width: 640px) { .chart-box { height: 300px; } .chart-box-tall { height: 380px; } .stint-driver { width: 2.6rem; font-size: 0.75rem; } }