/* ================================================================ KAPTUR - MARKETPLACE DE COURS D'ÉCHECS TABLE DES MATIÈRES CSS ================================================================ Organisation des styles par ordre des pages du site HTML : ┌─────────────────────────────────────────────────────────────┐ │ I. BASE & CONFIGURATION │ ├─────────────────────────────────────────────────────────────┤ │ • Variables CSS (ligne 67) │ │ • Reset & Body (ligne 90) │ │ • Effet curseur (ligne 104) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ II. NAVIGATION GLOBALE │ ├─────────────────────────────────────────────────────────────┤ │ • Navbar / Header (ligne 136) │ │ • Logo (ligne 172) │ │ • Navigation links (ligne 207) │ │ • Nav actions (ligne 258) │ │ • Boutons icônes (ligne 363) │ │ • Profil utilisateur (ligne 649) │ │ • Menu déroulant (ligne 683) │ │ • Panneau notifications (ligne 888) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ III. PAGE 1 : ACCUEIL │ ├─────────────────────────────────────────────────────────────┤ │ • Main content (ligne 954) │ │ • Hero section (ligne 987) │ │ • Animation pièces d'échecs (ligne 1028) │ │ • Échiquiers filants (ligne 1165) │ │ • Boutons avec effets (ligne 1286) │ │ • Features section (ligne 1450) │ │ • Coaches section / Carousel (ligne 1655) │ │ • Cartes coach premium (ligne 1683) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ IV. PAGE 2 : RECHERCHE DE COACHS │ ├─────────────────────────────────────────────────────────────┤ │ • Search section (ligne 2189) │ │ • Filters panel (ligne 2221) │ │ • Scrollbar personnalisé (ligne 2221) │ │ • Éléments sélection (ligne 2252) │ │ • Checkboxes et Radio (ligne 2302) │ │ • Search results / Coaches grid (ligne 2657) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ V. PAGE 3 : DEVENIR COACH │ ├─────────────────────────────────────────────────────────────┤ │ • Page Devenir Coach Premium (ligne 4403) │ │ • Formulaire premium (ligne 4431) │ │ • Groupes formulaires (ligne 4466) │ │ • Checkboxes premium (ligne 4510) │ │ • Tags premium (ligne 4572) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ VI. PAGE 4 : KAPTUR │ ├─────────────────────────────────────────────────────────────┤ │ • Kaptur section (ligne 2846) │ │ • Kaptur cards (ligne 2893) │ │ • Bordures état offres (ligne 2893) │ │ • Boutons Kaptur (ligne 3010) │ │ • Bid modal (ligne 3090) │ │ • Cadre lumineux (ligne 3118) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ VII. PAGE 5 : MES RÉSERVATIONS │ ├─────────────────────────────────────────────────────────────┤ │ • Réservations section (ligne 3307) │ │ • Reservations tabs (ligne 3307) │ │ • Booking cards (ligne 3307) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ VIII. PAGE 6 : MESSAGES │ ├─────────────────────────────────────────────────────────────┤ │ • FIX DÉFINITIF MESSAGERIE (ligne 3524) │ │ • Messages layout plein écran (ligne 3550) │ │ • Conversations list (ligne 3565) │ │ • Chat area structure (ligne 3578) │ │ • Messages area (ligne 3592) │ │ • Conversation swipe (ligne 3639) │ │ • Popup confirmation (ligne 3655) │ │ • Menu trois points (ligne 3777) │ │ • Zone messages CORRIGÉ (ligne 3983) │ │ • Messagerie Premium (ligne 4087) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ IX. PAGE 7 : PROFIL │ ├─────────────────────────────────────────────────────────────┤ │ • Profil layout (ligne 5767) │ │ • Profil sidebar (ligne 5767) │ │ • Profil tabs (ligne 5767) │ │ • Form sections (ligne 5767) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ X. PAGE 8 : PAIEMENT (Coaches uniquement) │ ├─────────────────────────────────────────────────────────────┤ │ • Section Stripe Connect (ligne 6567) │ │ • Payments table (ligne 6567) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XI. PAGE 9 : PARAMÈTRES │ ├─────────────────────────────────────────────────────────────┤ │ • Settings form (ligne 7023) │ │ • Toggle switches (ligne 7023) │ │ • Theme toggle (ligne 7023) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XII. PAGE 10 : VALIDATION COACH (Admin uniquement) │ ├─────────────────────────────────────────────────────────────┤ │ • Validation section (ligne 7258) │ │ • Application cards (ligne 7258) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XIII. MODALS GLOBAUX │ ├─────────────────────────────────────────────────────────────┤ │ • Modal base (ligne 7501) │ │ • Auth modal (Connexion/Inscription) (ligne 7662) │ │ • Coach modal (Fiche coach) (ligne 7995) │ │ • Booking modal (Réservation) (ligne 8341) │ │ • Auction modal (Créer Kaptur) (ligne 9054) │ │ • Bid modal (Soumettre offre) (ligne 9323) │ │ • Payment modal (Paiement) (ligne 9572) │ │ • Review modal (Avis) (ligne 9835) │ │ • Synthese modal (Synthèse cours) (ligne 10115) │ │ • Rejection modal (Refus candidature) (ligne 10424) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XIV. ÉLÉMENTS FLOTTANTS │ ├─────────────────────────────────────────────────────────────┤ │ • Toast notifications (ligne 10679) │ │ • Chatbot IA (ligne 10894) │ │ • Chatbot toggle (ligne 10894) │ │ • Chatbot messages (ligne 10894) │ │ • Quick actions (ligne 11274) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XV. UTILITAIRES & COMPOSANTS GLOBAUX │ ├─────────────────────────────────────────────────────────────┤ │ • Buttons (ligne 11489) │ │ • Forms (ligne 2657) │ │ • Tabs (ligne 2753) │ │ • Cards (ligne 11793) │ │ • Badges (ligne 12072) │ │ • Spinners/Loading (ligne 12238) │ │ • Empty states (ligne 12381) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XVI. ANIMATIONS │ ├─────────────────────────────────────────────────────────────┤ │ • Keyframes (ligne 12553) │ │ • Transitions (ligne 12553) │ │ • Hover effects (ligne 12553) │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ XVII. RESPONSIVE │ ├─────────────────────────────────────────────────────────────┤ │ • Media queries (ligne 12891) │ │ • Mobile styles (ligne 12891) │ │ • Tablet styles (ligne 12891) │ └─────────────────────────────────────────────────────────────┘ ================================================================ */ /* ================================================================ I. BASE & CONFIGURATION ================================================================ */ /* Variables CSS - Palette Premium */ :root { /* --- ANCIENNES VARIABLES (Compatibilité) --- */ --primary: #a855f7; /* Mis à jour pour matcher le violet du nouveau design */ --primary-dark: #9333ea; --primary-light: #c084fc; --secondary: #1e293b; /* Slate-800 */ --accent: #eab308; /* Amber-500 (Or) */ --success: #10b981; --danger: #ef4444; --bg-primary: #0f172a; /* Slate-900 (Fond principal) */ --bg-secondary: #1e293b; /* Slate-800 (Fond secondaire) */ --bg-dark: #020617; /* Slate-950 */ --text-primary: #f8fafc; /* Slate-50 */ --text-secondary: #94a3b8; /* Slate-400 */ --border: rgba(148, 163, 184, 0.2); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --radius: 0.75rem; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* --- NOUVELLES VARIABLES (Launchpad Design - HSL) --- */ --background: 222 47% 6%; /* #0f172a */ --foreground: 210 40% 98%; /* #f8fafc */ --card: 217 33% 12%; /* #131a25 */ --card-foreground: 210 40% 98%; --popover: 222 47% 6%; --popover-foreground: 210 40% 98%; /* Violet primaire */ --primary-hsl: 271 91% 65%; /* #a855f7 */ --primary-foreground: 210 40% 98%; --secondary-hsl: 217 33% 17%; /* #1e293b */ --secondary-foreground: 210 40% 98%; --muted: 217 33% 17%; --muted-foreground: 215 20% 65%; /* #94a3b8 */ --accent-hsl: 45 100% 51%; /* #fbbf24 */ --accent-foreground: 222 47% 6%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --border-hsl: 217 33% 17%; --input: 217 33% 17%; --ring: 271 91% 65%; /* Gradients */ --gradient-primary: linear-gradient(135deg, hsl(271 91% 65%), hsl(271 91% 75%)); --gradient-hero: linear-gradient(180deg, hsl(222 47% 6% / 0.7), hsl(222 47% 6% / 0.95)); --gradient-cta: linear-gradient(135deg, hsl(271 91% 65%), hsl(45 100% 51%)); /* Shadows */ --shadow-glow: 0 0 40px hsl(271 91% 65% / 0.3); --shadow-card: 0 10px 30px -10px hsl(0 0% 0% / 0.5); } /* --- CLASSES UTILITAIRES (Launchpad) --- */ .text-gradient { background: linear-gradient(to right, #ffffff, #a855f7) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } .glow-effect { box-shadow: var(--shadow-glow); } .card-hover { transition: var(--transition); } .card-hover:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-xl); } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Container global pour le nouveau design */ .container-new { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* Reset de base pour le body pour correspondre au thème sombre */ body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Outfit', 'Inter', sans-serif; } /* Effet de suivi de souris */ .cursor-glow { position: fixed; width: 300px; height: 300px; background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: opacity 0.3s; } .cursor-dot { position: fixed; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; } body.cursor-hover .cursor-dot { width: 32px; height: 32px; background: rgba(99, 102, 241, 0.2); border: 2px solid var(--primary); } /* Navigation */ /* Header Ultra-Premium */ .navbar { position: fixed; top: 0; left: 0; width: 100%; /* Force full width */ right: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%); backdrop-filter: blur(25px); border-bottom: 1px solid rgba(59, 130, 246, 0.1); z-index: 1000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 65px; box-shadow: 0 2px 15px rgba(15, 23, 42, 0.06); padding: 0; /* Remove any padding from navbar itself */ } .navbar:hover { box-shadow: 0 4px 25px rgba(15, 23, 42, 0.1); border-bottom-color: rgba(59, 130, 246, 0.2); } .navbar.scrolled { box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.15); background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%); } .nav-container { width: 100%; max-width: none; margin: 0; padding: 0; /* Absolutely no padding */ display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 0; /* No gap */ } /* Logo Ultra-Premium - Seulement l'icône */ .nav-logo { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.5rem; margin-left: 1rem; /* Small left margin for breathing room */ border-radius: 12px; width: 50px; height: 50px; background: var(--bg-secondary); box-shadow: 0 2px 8px rgba(10, 37, 64, 0.1); } .nav-logo:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2); background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, var(--bg-secondary) 100%); } .nav-logo i { font-size: 2rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-logo:hover i { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3)); } /* Navigation Ultra-Premium */ .nav-links { display: flex; flex: 1; justify-content: space-evenly; align-items: center; margin: 0; /* Remove margins */ padding: 0 1rem; /* Add internal padding instead */ max-width: none; } .nav-link { text-decoration: none; color: rgba(255, 255, 255, 0.9) !important; font-weight: 600; font-size: 0.9rem; position: relative; padding: 0.75rem 1.25rem; border-radius: calc(var(--radius) - 4px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; letter-spacing: 0.2px; white-space: nowrap; } .nav-link:hover { color: hsl(271 91% 65%) !important; background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(15, 23, 42, 0.05) 100%); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); } .nav-link.active { color: hsl(271 91% 65%) !important; background: rgba(168, 85, 247, 0.15) !important; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2) !important; } .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-radius: 1px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-link.active::after, .nav-link:hover::after { width: 70%; } /* Actions de navigation Ultra-Premium */ .nav-actions { display: flex; align-items: center; gap: 0.75rem; margin-right: 1rem; /* Small right margin for breathing room */ } /* Theme Toggle Button */ .theme-toggle-btn { background: transparent; border: none; color: rgba(255, 255, 255, 0.8); font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .theme-toggle-btn:hover { background: rgba(168, 85, 247, 0.1); color: #a855f7; transform: scale(1.1); } /* Mode clair avec inversion complète des couleurs */ /* Variante 1 : Inversion douce avec teintes chaudes */ /* Les couleurs proches du blanc restent blanches grâce au contraste élevé */ html.light-mode { filter: invert(0.85) hue-rotate(180deg) brightness(0.95) contrast(1.3) saturate(0.9); background-color: #0f172a; /* Fond de base sombre pour que l'inversion donne du clair */ height: 100%; } /* Réinverser les images, vidéos et le logo pour qu'ils restent normaux */ html.light-mode img, html.light-mode video, html.light-mode canvas, html.light-mode [style*="background-image"], html.light-mode .nav-logo img, html.light-mode .logo, html.light-mode #navbarLogo { filter: invert(1) hue-rotate(180deg); } body.light-mode .theme-toggle-btn { color: #4b5563; } body.light-mode .theme-toggle-btn:hover { color: #7c3aed; background: rgba(124, 58, 237, 0.1); } /* ================================================================ SECTION PARAMÈTRES - STYLES AMÉLIORÉS ================================================================ */ #section-parametres { padding: 3rem 0; } #section-parametres h1 { color: rgba(255, 255, 255, 0.95); margin-bottom: 2.5rem; font-size: 2.5rem; font-weight: 700; display: flex; align-items: center; gap: 1rem; position: relative; padding-bottom: 1rem; } #section-parametres h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 3px; background: linear-gradient(90deg, #a855f7, transparent); border-radius: 2px; } /* Boutons de synchronisation améliorés */ #syncGoogle, #syncOutlook, #synciCloud { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(168, 85, 247, 0.3); color: rgba(255, 255, 255, 0.9); padding: 1rem 1.5rem; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.75rem; position: relative; overflow: hidden; } #syncGoogle::before, #syncOutlook::before, #synciCloud::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2), transparent); transition: left 0.5s ease; } #syncGoogle:hover, #syncOutlook:hover, #synciCloud:hover { background: rgba(30, 41, 59, 0.8); border-color: rgba(168, 85, 247, 0.5); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2); } #syncGoogle:hover::before, #syncOutlook:hover::before, #synciCloud:hover::before { left: 100%; } #syncGoogle i, #syncOutlook i, #synciCloud i { font-size: 1.25rem; transition: transform 0.3s ease; } #syncGoogle:hover i, #syncOutlook:hover i, #synciCloud:hover i { transform: scale(1.15); } /* Bouton Enregistrer dans paramètres */ #section-parametres .btn-primary { margin-top: 2rem; background: linear-gradient(135deg, #a855f7, #9333ea); border: none; color: white; padding: 1rem 2.5rem; border-radius: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } #section-parametres .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4); background: linear-gradient(135deg, #9333ea, #7e22ce); } /* Description dans form-section */ .form-section p { color: rgba(255, 255, 255, 0.7) !important; line-height: 1.6; } /* ================================================================ BANQUE D'AVATARS - MODAL ET STYLES ================================================================ */ .avatar-options { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; gap: 0.75rem; z-index: 1000; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 12px; padding: 0.75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.2); min-width: 180px; animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .btn-upload-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 8px; color: rgba(255, 255, 255, 0.9); cursor: pointer; transition: all 0.3s ease; font-weight: 500; font-size: 0.9rem; width: 100%; text-align: left; } .btn-upload-option:hover { background: rgba(30, 41, 59, 0.8); border-color: rgba(168, 85, 247, 0.5); transform: translateX(5px); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2); } .btn-upload-option i { color: #a855f7; font-size: 1rem; width: 20px; text-align: center; } .btn-upload-option span { flex: 1; } .avatar-bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; max-height: 400px; overflow-y: auto; padding: 0.5rem; } .avatar-bank-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid rgba(168, 85, 247, 0.2); transition: all 0.3s ease; background: rgba(30, 41, 59, 0.4); } .avatar-bank-item:hover { border-color: rgba(168, 85, 247, 0.6); transform: scale(1.05); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3); } .avatar-bank-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-bank-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(168, 85, 247, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .avatar-bank-item:hover .avatar-bank-overlay { opacity: 1; } .avatar-bank-overlay i { color: white; font-size: 1.5rem; } .avatar-bank-item.selected { border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); } .avatar-bank-item.selected .avatar-bank-overlay { opacity: 1; background: rgba(168, 85, 247, 0.6); } .user-menu { display: flex; align-items: center; gap: 0.5rem; background: transparent !important; margin-right: 1rem; } /* Retirer tout background gris des conteneurs parents */ #userMenu, #userMenu>div, #userProfile, #userProfile>div { background: transparent !important; } .user-profile { position: relative; background: transparent !important; } .user-profile-trigger { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; background: transparent !important; } .user-profile-trigger:hover { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); transform: translateY(-2px); } .user-profile-trigger:active { transform: translateY(0); } .user-profile-trigger .fa-chevron-down { transition: transform 0.3s; color: rgba(255, 255, 255, 0.7); } .user-profile.active .user-profile-trigger .fa-chevron-down { transform: rotate(180deg); } .user-profile-trigger .avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(168, 85, 247, 0.3); transition: all 0.3s; background: transparent !important; display: block; } .user-profile-trigger .avatar:not([src]), .user-profile-trigger .avatar[src=""], .user-profile-trigger .avatar[src=""] { display: none !important; } .user-profile-trigger:hover .avatar { border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 12px rgba(168, 85, 247, 0.4); } .user-profile-trigger span { font-weight: 600; color: white; font-size: 0.9rem; } .dropdown-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; background: hsl(215, 25%, 8%) !important; backdrop-filter: none !important; border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 0.75rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.3); min-width: 200px; z-index: 1000; display: none; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.5rem; margin-top: 0.5rem; } /* Règle ultra-spécifique pour le menu profil */ #userDropdown, #userDropdown.dropdown-menu, .user-profile #userDropdown, .user-profile .dropdown-menu#userDropdown { background: #0a0a0a !important; background-color: #0a0a0a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; border: 1px solid rgba(168, 85, 247, 0.5) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5) !important; } #userDropdown.show { background: #0a0a0a !important; background-color: #0a0a0a !important; opacity: 1 !important; } .dropdown-menu.show { display: block; opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.98) !important; text-decoration: none; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.9rem; background: transparent; font-weight: 500; } .dropdown-item:hover { background: rgba(168, 85, 247, 0.3) !important; color: white !important; transform: translateX(4px); } .dropdown-item i { width: 1.25rem; color: #a855f7 !important; } .dropdown-item.logout-item { color: rgba(239, 68, 68, 0.9); } .dropdown-item.logout-item:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; } .dropdown-menu hr { border: none; border-top: 1px solid rgba(168, 85, 247, 0.3); margin: 0.5rem 0; } .btn-auth { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; border: none; padding: 0.5rem 1.25rem; border-radius: calc(var(--radius) - 2px); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); position: relative; overflow: hidden; letter-spacing: 0.3px; } .btn-auth::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-auth:hover::before { left: 100%; } .btn-auth:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15); background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); } .btn-auth:active { transform: translateY(0) scale(0.98); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1); } /* Boutons d'icônes Ultra-Premium */ .btn-icon { position: relative; background: linear-gradient(135deg, white 0%, #f8fafc 100%); border: 2px solid var(--border); color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: 0.75rem; border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .btn-icon:hover { background: white; border-color: var(--accent); color: var(--primary); transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15); } .btn-icon:active { transform: translateY(-1px) scale(0.95); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1); } .badge { position: absolute; top: 0; right: 0; background: var(--danger); color: white; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 10px; font-weight: 600; } .btn-auth { background: none; border: 1px solid var(--border); color: var(--text-primary); padding: 0.6rem 1.5rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: var(--transition); } .btn-auth:hover { background: var(--bg-secondary); transform: translateY(-2px); } .btn-primary { background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(100, 116, 139, 0.2)); color: white; border: 1px solid rgba(168, 85, 247, 0.3); padding: 1rem 2.5rem; border-radius: 12px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(148, 163, 184, 0.1); position: relative; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.95rem; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent); transition: left 0.6s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY (-3px); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.2); background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(126, 34, 206, 0.3)); border-color: rgba(168, 85, 247, 0.5); } .btn-primary:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15); } .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 2px solid var(--accent); padding: 1rem 2.5rem; border-radius: 12px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.95rem; } .btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 0.875rem 2rem; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; } .btn-outline:hover { background: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); } .btn-outline i { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-outline:hover i { transform: scale(1.1); } .btn-secondary::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--accent); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .btn-secondary:hover::before { width: 100%; } .btn-secondary:hover { background: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); } .btn-secondary:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.15); } /* Boutons supplémentaires Ultra-Premium */ .btn-block { width: 100%; } .btn-large { padding: 1.25rem 3rem; font-size: 1.2rem; border-radius: calc(var(--radius) + 6px); } .btn-small { padding: 0.75rem 1.5rem; font-size: 0.9rem; border-radius: calc(var(--radius) - 2px); } .btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 0.875rem 2rem; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.95rem; } .btn-outline::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--accent); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .btn-outline:hover::before { width: 100%; } .btn-outline:hover { background: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); } .btn-outline:active { transform: translateY(-1px) scale(0.98); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.15); } .btn-success { background: linear-gradient(135deg, var(--success) 0%, #059669 100%); color: white; border: none; padding: 1rem 2.5rem; border-radius: calc(var(--radius) + 4px); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15); position: relative; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.95rem; } .btn-success:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 35px rgba(16, 185, 129, 0.25); background: linear-gradient(135deg, #059669 0%, var(--success) 100%); } .btn-danger { background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%); color: white; border: none; padding: 1rem 2.5rem; border-radius: calc(var(--radius) + 4px); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 25px rgba(239, 68, 68, 0.15); position: relative; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.95rem; } .btn-danger:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 35px rgba(239, 68, 68, 0.25); background: linear-gradient(135deg, #dc2626 0%, var(--danger) 100%); } /* Profil utilisateur Ultra-Premium */ .user-profile { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; position: relative; padding: 0.5rem; border-radius: calc(var(--radius) - 2px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .user-profile:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(15, 23, 42, 0.05) 100%); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); } .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15); background: transparent !important; } .avatar:not([src]), .avatar[src=""], .avatar[src=""] { display: none !important; } .user-profile:hover .avatar { border-color: var(--primary); transform: scale(1.05); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); } /* Menu déroulant utilisateur Premium */ .dropdown-menu { position: absolute; top: calc(100% + 0.75rem); right: 0; background: hsl(215, 25%, 8%) !important; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.3) !important; min-width: 220px; padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(168, 85, 247, 0.4) !important; z-index: 1000; overflow: hidden; } /* Règle ultra-spécifique pour le menu profil - deuxième définition */ #userDropdown.dropdown-menu, .user-profile #userDropdown.dropdown-menu { background: #0a0a0a !important; background-color: #0a0a0a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .dropdown-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #a855f7 0%, #7e22ce 100%); opacity: 0; transition: opacity 0.3s ease; } .dropdown-menu.show, .user-profile:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); animation: dropdownSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .user-profile:hover #userDropdown, .user-profile:hover #userDropdown.dropdown-menu { background: #0a0a0a !important; background-color: #0a0a0a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; } .dropdown-menu.show::before, .user-profile:hover .dropdown-menu::before { opacity: 1; } @keyframes dropdownSlideDown { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .dropdown-menu a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.98) !important; text-decoration: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 10px; margin: 0.15rem 0; font-weight: 600; font-size: 0.9rem; position: relative; overflow: hidden; } .dropdown-menu a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); transform: scaleY(0); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 3px 3px 0; } .dropdown-menu a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(126, 34, 206, 0.15) 100%); opacity: 0; transition: opacity 0.25s ease; border-radius: 10px; } .dropdown-menu a:hover { color: white !important; transform: translateX(4px); background: rgba(168, 85, 247, 0.3) !important; } .dropdown-menu a:hover::before { transform: scaleY(1); } .dropdown-menu a:hover::after { opacity: 1; } .dropdown-menu a i { width: 20px; text-align: center; font-size: 1rem; color: #a855f7 !important; transition: all 0.25s ease; position: relative; z-index: 1; } .dropdown-menu a:hover i { color: #a855f7 !important; transform: scale(1.1); } .dropdown-menu a span { position: relative; z-index: 1; } /* Séparateur amélioré */ .dropdown-menu hr { border: none; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(168, 85, 247, 0.3) 50%, transparent 100%); margin: 0.5rem 0.75rem; } /* Option de déconnexion avec style spécial */ .dropdown-menu a#btnLogout { color: #ef4444; margin-top: 0.25rem; } .dropdown-menu a#btnLogout::before { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); } .dropdown-menu a#btnLogout::after { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(248, 113, 113, 0.2) 100%); } .dropdown-menu a#btnLogout:hover { color: #dc2626; } .dropdown-menu a#btnLogout i { color: #ef4444; } .dropdown-menu a#btnLogout:hover i { color: #dc2626; } /* Boutons de tri et sélection premium */ .sort-dropdown, .filter-dropdown { position: relative; display: inline-block; } .sort-dropdown select, .filter-dropdown select { background: linear-gradient(135deg, white 0%, #f8fafc 100%); border: 2px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: 0.75rem 2.5rem 0.75rem 1rem; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; } .sort-dropdown select:hover, .filter-dropdown select:hover { border-color: var(--accent); background: white; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .sort-dropdown select:focus, .filter-dropdown select:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 25px rgba(59, 130, 246, 0.1); transform: translateY(-2px); } /* Panneau de notifications */ .notification-panel { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: var(--bg-secondary); color: var(--text-primary); border-left: 1px solid var(--border); box-shadow: var(--shadow-xl); z-index: 1100; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .notification-panel.active { right: 0; } .notification-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border); } .notification-header h3 { font-size: 1.3rem; } .btn-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition); } .btn-close:hover { color: var(--text-primary); } .notification-list { padding: 1rem; } .notification-item { padding: 1rem; background: rgba(168, 85, 247, 0.05) !important; border: 1px solid rgba(168, 85, 247, 0.2) !important; border-radius: 12px; margin-bottom: 0.75rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .notification-item:hover { background: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.4) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.1); } .notification-item.unread { background: rgba(168, 85, 247, 0.1) !important; border-left: 4px solid #a855f7 !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; } /* Main Content */ /* Contenu principal avec espacement ajusté */ .main-content { margin-top: 0; /* Removed margin to fix gap */ min-height: 100vh; } .section { display: none; padding-top: 85px; /* Add padding to compensate for fixed navbar */ animation: fadeIn 0.5s ease; } #section-accueil { padding-top: 0 !important; /* Hero section starts at top */ } .section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .container { max-width: 1400px; margin: 0 auto; padding: 2rem; } /* Hero Section */ .hero { background: linear-gradient(180deg, #FFF7ED 0%, /* Crème doux en haut */ #FFF7ED 70%, /* Crème jusqu'à 70% */ #FFF8F0 75%, /* Début transition très douce vers blanc */ #FFF9F3 80%, /* Blanc crème très clair */ #FFFBF7 85%, /* Blanc crème clair */ #FFFDF9 90%, /* Blanc presque pur */ #FFFEFB 95%, /* Blanc très clair */ #FFFFFF 100% /* Blanc pur en bas */ ); padding: 8rem 2rem; text-align: center; position: relative; overflow: hidden; width: 100%; max-width: 100%; margin: 0; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 60%), radial-gradient(ellipse at 30% 100%, rgba(138, 152, 128, 0.15) 0%, transparent 70%), radial-gradient(ellipse at 70% 100%, rgba(168, 160, 144, 0.1) 0%, transparent 70%); opacity: 0.6; animation: gradientShift 10s ease-in-out infinite; } @keyframes gradientShift { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } /* Animation des pièces d'échecs */ .chess-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; } .chess-piece { position: absolute; font-size: 3.5rem; color: rgba(10, 37, 64, 0.6); animation: floatChess 8s ease-in-out infinite; animation-fill-mode: both; user-select: none; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(10, 37, 64, 0.2), 0 0 10px rgba(212, 175, 55, 0.15); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4)) drop-shadow(0 2px 4px rgba(10, 37, 64, 0.15)); } /* Première série de pièces - Réparties sur toute la largeur (0% à 100%) */ .king-piece-1 { top: 5%; left: 0%; animation-delay: 0s; animation-duration: 10s; } .queen-piece-1 { top: 8%; left: 15%; animation-delay: 0s; animation-duration: 9s; } .bishop-piece-1 { top: 25%; left: 30%; animation-delay: 0s; animation-duration: 11s; } .knight-piece-1 { top: 45%; left: 50%; animation-delay: 0s; animation-duration: 6s; } .rook-piece-1 { top: 65%; left: 70%; animation-delay: 0s; animation-duration: 12s; } .pawn-piece-1 { top: 85%; left: 85%; animation-delay: 0s; animation-duration: 10s; } /* Deuxième série de pièces - Réparties sur toute la largeur pour couvrir tout l'espace */ .king-piece-2 { top: 15%; left: 10%; animation-delay: 0s; animation-duration: 11s; } .queen-piece-2 { top: 35%; left: 40%; animation-delay: 0s; animation-duration: 10s; } .bishop-piece-2 { top: 55%; left: 60%; animation-delay: 0s; animation-duration: 9s; } .knight-piece-2 { top: 75%; left: 80%; animation-delay: 0s; animation-duration: 13s; } .rook-piece-2 { top: 12%; left: 90%; animation-delay: 0s; animation-duration: 11s; } .pawn-piece-2 { top: 95%; left: 5%; animation-delay: 0s; animation-duration: 12s; } @keyframes floatChess { 0% { transform: translate(0, -5px) rotate(-1deg) scale(0.99); opacity: 0.4; } 25% { transform: translate(calc(-1vw), -12px) rotate(2deg) scale(1.02); opacity: 0.5; } 50% { transform: translate(calc(0.8vw), -8px) rotate(-1.5deg) scale(0.98); opacity: 0.3; } 75% { transform: translate(calc(-0.6vw), -10px) rotate(1deg) scale(1.01); opacity: 0.45; } 100% { transform: translate(0, -5px) rotate(-1deg) scale(0.99); opacity: 0.4; } } /* Échiquiers filants - Animation d'étoiles filantes */ .shooting-boards { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .shooting-board { position: absolute; width: 40px; height: 40px; background: linear-gradient(45deg, transparent 40%, rgba(10, 37, 64, 0.15) 50%, transparent 60%), repeating-linear-gradient(0deg, rgba(138, 152, 128, 0.3) 0px, rgba(138, 152, 128, 0.3) 4px, rgba(10, 37, 64, 0.4) 4px, rgba(10, 37, 64, 0.4) 8px), repeating-linear-gradient(90deg, rgba(138, 152, 128, 0.3) 0px, rgba(138, 152, 128, 0.3) 4px, rgba(10, 37, 64, 0.4) 4px, rgba(10, 37, 64, 0.4) 8px); border-radius: 4px; opacity: 0; animation: shootBoard 8s linear infinite; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.3), 0 0 8px rgba(10, 37, 64, 0.2), 0 0 0 1px rgba(10, 37, 64, 0.5), 0 2px 8px rgba(138, 152, 128, 0.3), 0 0 10px rgba(212, 175, 55, 0.15); border: 1px solid rgba(10, 37, 64, 0.3); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)); } /* Positions et délais différents pour chaque échiquier - Répartis sur toute la hauteur */ .board-1 { top: 5%; left: -50px; animation-delay: 0s; animation-duration: 12s; } .board-2 { top: 20%; left: -50px; animation-delay: 2s; animation-duration: 10s; } .board-3 { top: 35%; left: -50px; animation-delay: 4s; animation-duration: 14s; } .board-4 { top: 50%; left: -50px; animation-delay: 6s; animation-duration: 11s; } .board-5 { top: 65%; left: -50px; animation-delay: 8s; animation-duration: 13s; } .board-6 { top: 80%; left: -50px; animation-delay: 10s; animation-duration: 9s; } .board-7 { top: 95%; left: -50px; animation-delay: 12s; animation-duration: 15s; } /* Animation de déplacement horizontal */ @keyframes shootBoard { 0% { transform: translateX(0) rotate(0deg) scale(0.8); opacity: 0; } 5% { opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 95% { opacity: 0.3; } 100% { transform: translateX(calc(100vw + 100px)) rotate(360deg) scale(1.2); opacity: 0; } } /* Boutons avec effets d'échecs */ .chess-btn { position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border: none; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3); } .chess-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4); background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%); } .chess-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s; } .chess-btn:hover::before { left: 100%; } .btn-shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s; } .chess-btn:hover .btn-shine { transform: translateX(100%); } .hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .hero-title { font-size: 3.5rem; font-weight: 800; color: var(--primary); margin-bottom: 1.5rem; line-height: 1.2; text-shadow: 0 2px 4px rgba(10, 37, 64, 0.1); } .hero-subtitle { font-size: 1.3rem; color: var(--text-primary); margin-bottom: 3rem; font-weight: 500; } .animate-in { animation: slideUp 0.8s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-cta { display: flex; gap: 1.5rem; justify-content: center; margin: 0 auto 4rem; flex-wrap: wrap; } .btn-hero-primary { background: var(--secondary); color: var(--bg-dark); border: none; padding: 1rem 2.5rem; border-radius: var(--radius); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4); display: flex; align-items: center; gap: 0.75rem; } .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.5); background: #D97706; } .btn-hero-secondary { background: transparent; color: white; border: 2px solid white; padding: 1rem 2.5rem; border-radius: var(--radius); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.75rem; } .btn-hero-secondary:hover { background: white; color: var(--bg-dark); transform: translateY(-2px); } .hero-stats { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 900; color: var(--primary); text-shadow: 0 2px 4px rgba(10, 37, 64, 0.1); margin-bottom: 0.5rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .stat-label { color: var(--text-primary); font-size: 1rem; font-weight: 700; text-shadow: 0 1px 2px rgba(10, 37, 64, 0.05); } /* Features Section */ .features-section { padding: 4rem 0; position: relative; overflow: hidden; } .section-title { font-size: 2.5rem; font-weight: 800; text-align: center; margin-bottom: 3rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: titleFadeIn 0.8s ease-out; position: relative; } @keyframes titleFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; position: relative; } .feature-card { background: white; padding: 2.5rem 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(10, 37, 64, 0.08); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; position: relative; overflow: hidden; opacity: 0; transform: translateY(30px) scale(0.95); animation: cardSlideIn 0.6s ease-out forwards; border: 1px solid rgba(10, 37, 64, 0.05); } .feature-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); transition: left 0.6s ease; z-index: 1; } .feature-card:hover::before { left: 100%; } /* Animation en cascade pour chaque carte */ .feature-card:nth-child(1) { animation-delay: 0.1s; } .feature-card:nth-child(2) { animation-delay: 0.2s; } .feature-card:nth-child(3) { animation-delay: 0.3s; } .feature-card:nth-child(4) { animation-delay: 0.4s; } @keyframes cardSlideIn { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .feature-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 50px rgba(10, 37, 64, 0.15), 0 0 30px rgba(212, 175, 55, 0.1); border-color: rgba(212, 175, 55, 0.3); } .feature-icon { width: 90px; height: 90px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: white; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 25px rgba(10, 37, 64, 0.15); z-index: 2; } .feature-icon::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, var(--secondary), var(--accent), var(--secondary)); border-radius: 24px; z-index: -1; opacity: 0; transition: opacity 0.4s ease; animation: iconGlow 3s ease-in-out infinite; } @keyframes iconGlow { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.05); } } .feature-card:hover .feature-icon::before { opacity: 0.5; animation: iconGlowHover 1.5s ease-in-out infinite; } @keyframes iconGlowHover { 0%, 100% { opacity: 0.5; transform: scale(1.05); } 50% { opacity: 0.8; transform: scale(1.1); } } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 12px 35px rgba(212, 175, 55, 0.3), 0 0 20px rgba(16, 185, 129, 0.2); } .feature-icon.stripe-icon { background: linear-gradient(135deg, #635BFF, #00D4FF); } .feature-icon.stripe-icon::before { background: linear-gradient(135deg, #635BFF, #00D4FF, #635BFF); } .feature-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-primary); font-weight: 700; transition: color 0.3s ease; position: relative; z-index: 2; } .feature-card:hover h3 { color: var(--primary); background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .feature-card p { color: var(--text-secondary); line-height: 1.6; position: relative; z-index: 2; transition: color 0.3s ease; } .feature-card:hover p { color: var(--text-primary); } /* Coaches Section */ .top-coaches { padding: 4rem 0; background: var(--bg-secondary); margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem; } .coaches-carousel { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; justify-items: center; padding: 1rem 0; overflow: visible; position: relative; z-index: 50; } .coaches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; justify-items: center; padding: 1rem 0; overflow: visible; position: relative; z-index: 50; } /* ==================================================================================== ⚠️ SECTION CRITIQUE - CARTES COACH PREMIUM - NE PAS MODIFIER SANS CONSULTER LA DOC ==================================================================================== Documentation complète : DOCUMENTATION-CARTES-COACH.md Cette section contient les styles améliorés pour les cartes coach et top coach : - Dégradé bleu marine/noir/or avec pattern damier animé - Pièces d'échecs animées qui voyagent de droite à gauche - Avatar avec lueur or et z-index élevé - Badge NEW toujours visible au premier plan - Coins arrondis inférieurs ==================================================================================== */ /* Cartes de coach Ultra-Premium */ .coach-card { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.05); border: 2px solid #000000; /* Cadre noir */ overflow: visible; /* Permet au badge NEW et avatar de sortir */ position: relative; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; transform-style: preserve-3d; perspective: 1000px; backdrop-filter: blur(10px); } .coach-card::before { content: ''; position: absolute; inset: -3px; border-radius: 22px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(139, 92, 246, 0.3) 50%, rgba(168, 85, 247, 0.4) 100%); background-size: 200% 200%; animation: gradientShiftDark 3s ease infinite; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .coach-card:hover::before { opacity: 1; } .coach-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.4); overflow: visible !important; } @keyframes gradientShiftDark { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .coach-card-header { position: relative; height: 100px; overflow: visible; /* CRITIQUE : Permet à l'avatar de sortir */ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); background-size: 200% 200%; animation: gradientFlow 10s ease infinite; border-radius: 18px 18px 0 0; z-index: 10; } @keyframes gradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Pattern échiquier animé en arrière-plan */ .coach-card-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.04) 0px, /* Lueur or réduite */ rgba(212, 175, 55, 0.04) 20px, transparent 20px, transparent 40px), repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.04) 0px, /* Lueur or réduite */ rgba(212, 175, 55, 0.04) 20px, transparent 20px, transparent 40px); background-size: 40px 40px; background-position: 0 0; animation: chessMove 20s linear infinite; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 18px 18px 0 0; } @keyframes chessMove { 0% { background-position: 0 0; } 50% { background-position: 40px 40px; } 100% { background-position: 0 0; } } /* Effet de particules/lumière avec lueur or */ .coach-card-header::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); transform: translate(-50%, -50%); animation: rotate 15s linear infinite; z-index: 2; } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .coach-card-avatar { position: absolute; bottom: -35px; /* Sort du header pour chevaucher le body - réduit pour carte plus compacte */ left: 50%; transform: translateX(-50%); width: 75px; height: 75px; border-radius: 50%; border: 3px solid white; object-fit: cover; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(212, 175, 55, 0.15); /* Lueur or réduite */ z-index: 999999 !important; /* CRITIQUE : Au premier plan absolu */ transform-origin: center center; will-change: transform; clip-path: none !important; overflow: visible !important; } .coach-card:hover .coach-card-avatar { transform: translateX(-50%) translateY(-2px) scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 999999 !important; } .coach-card-body { padding: 2.5rem 1.25rem 1rem; /* Réduit pour carte plus compacte */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, white 100%); z-index: 0; /* Sous l'avatar */ overflow: hidden; /* Assure les coins arrondis du body */ text-align: center; display: flex; flex-direction: column; flex: 1; border-radius: 0 0 20px 20px; /* Assure les coins arrondis inférieurs */ gap: 0.5rem; /* Réduit l'espacement entre les éléments */ } /* Pièces d'échecs animées dans le header - CRITIQUE : NE PAS SUPPRIMER */ .coach-card-header .chess-piece-card { position: absolute; font-size: 2.8rem; color: rgba(255, 255, 255, 0.85); z-index: 3; /* Au-dessus du background mais sous l'avatar */ pointer-events: none; user-select: none; text-shadow: 0 0 10px rgba(212, 175, 55, 0.25), /* Lueur or réduite */ 0 0 20px rgba(212, 175, 55, 0.15), /* Lueur or réduite */ 2px 2px 4px rgba(0, 0, 0, 0.5); filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.2)); /* Lueur or réduite */ opacity: 0; /* Invisible par défaut - visible uniquement pendant l'animation */ clip-path: inset(0 round 18px 18px 0 0); /* Respecte les coins arrondis du header */ transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); animation-fill-mode: backwards; /* Reste au premier frame (invisible) pendant le delay */ } /* Positionnement et animation de chaque pièce - Voyage de droite à gauche */ .coach-card-header .chess-piece-card-1 { top: 5%; animation: flyChessCard1 8s linear infinite; animation-fill-mode: backwards; } .coach-card-header .chess-piece-card-2 { top: 25%; animation: flyChessCard2 9s linear infinite; animation-delay: 2s; animation-fill-mode: backwards; } .coach-card-header .chess-piece-card-3 { top: 45%; animation: flyChessCard3 10s linear infinite; animation-delay: 4s; animation-fill-mode: backwards; } .coach-card-header .chess-piece-card-4 { top: 15%; animation: flyChessCard4 8.5s linear infinite; animation-delay: 1s; animation-fill-mode: backwards; } .coach-card-header .chess-piece-card-5 { top: 75%; animation: flyChessCard5 9.5s linear infinite; animation-delay: 3s; animation-fill-mode: backwards; } .coach-card-header .chess-piece-card-6 { top: 55%; animation: flyChessCard6 10.5s linear infinite; animation-delay: 5s; animation-fill-mode: backwards; } /* Animations pour chaque pièce - Voyage de droite à gauche - CRITIQUE : NE PAS MODIFIER */ @keyframes flyChessCard1 { 0% { left: 110%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 1% { left: 100%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 3% { left: 95%; opacity: 0.65; transform: translateX(0%) translateY(-3%) rotate(25deg) scale(0.9); } 20% { left: 75%; opacity: 0.75; transform: translateX(0%) translateY(-6%) rotate(75deg) scale(1); } 40% { left: 50%; opacity: 0.8; transform: translateX(0%) translateY(-4%) rotate(140deg) scale(1.05); } 60% { left: 25%; opacity: 0.8; transform: translateX(0%) translateY(2%) rotate(200deg) scale(1); } 80% { left: 0%; opacity: 0.75; transform: translateX(0%) translateY(4%) rotate(260deg) scale(0.95); } 95% { left: -15%; opacity: 0.6; transform: translateX(0%) translateY(1%) rotate(320deg) scale(0.85); } 100% { left: -30%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(360deg) scale(0.7); } } @keyframes flyChessCard2 { 0% { left: 110%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 1% { left: 100%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 3% { left: 95%; opacity: 0.65; transform: translateX(0%) translateY(-2%) rotate(-25deg) scale(0.9); } 20% { left: 75%; opacity: 0.75; transform: translateX(0%) translateY(-5%) rotate(-75deg) scale(1); } 40% { left: 50%; opacity: 0.8; transform: translateX(0%) translateY(-3%) rotate(-140deg) scale(1.05); } 60% { left: 25%; opacity: 0.8; transform: translateX(0%) translateY(3%) rotate(-200deg) scale(1); } 80% { left: 0%; opacity: 0.75; transform: translateX(0%) translateY(5%) rotate(-260deg) scale(0.95); } 95% { left: -15%; opacity: 0.6; transform: translateX(0%) translateY(2%) rotate(-320deg) scale(0.85); } 100% { left: -30%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(-360deg) scale(0.7); } } @keyframes flyChessCard3 { 0% { left: 110%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 1% { left: 100%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 3% { left: 95%; opacity: 0.65; transform: translateX(0%) translateY(-4%) rotate(30deg) scale(0.9); } 20% { left: 75%; opacity: 0.75; transform: translateX(0%) translateY(-7%) rotate(80deg) scale(1); } 40% { left: 50%; opacity: 0.8; transform: translateX(0%) translateY(-5%) rotate(150deg) scale(1.05); } 60% { left: 25%; opacity: 0.8; transform: translateX(0%) translateY(1%) rotate(210deg) scale(1); } 80% { left: 0%; opacity: 0.75; transform: translateX(0%) translateY(3%) rotate(270deg) scale(0.95); } 95% { left: -15%; opacity: 0.6; transform: translateX(0%) translateY(0%) rotate(330deg) scale(0.85); } 100% { left: -30%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(360deg) scale(0.7); } } @keyframes flyChessCard4 { 0% { left: 110%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 1% { left: 100%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 3% { left: 95%; opacity: 0.65; transform: translateX(0%) translateY(-2%) rotate(-30deg) scale(0.9); } 20% { left: 75%; opacity: 0.75; transform: translateX(0%) translateY(-5%) rotate(-80deg) scale(1); } 40% { left: 50%; opacity: 0.8; transform: translateX(0%) translateY(-3%) rotate(-150deg) scale(1.05); } 60% { left: 25%; opacity: 0.8; transform: translateX(0%) translateY(3%) rotate(-210deg) scale(1); } 80% { left: 0%; opacity: 0.75; transform: translateX(0%) translateY(5%) rotate(-270deg) scale(0.95); } 95% { left: -15%; opacity: 0.6; transform: translateX(0%) translateY(2%) rotate(-330deg) scale(0.85); } 100% { left: -30%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(-360deg) scale(0.7); } } @keyframes flyChessCard5 { 0% { left: 110%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 1% { left: 100%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 3% { left: 95%; opacity: 0.65; transform: translateX(0%) translateY(-5%) rotate(35deg) scale(0.9); } 20% { left: 75%; opacity: 0.75; transform: translateX(0%) translateY(-8%) rotate(85deg) scale(1); } 40% { left: 50%; opacity: 0.8; transform: translateX(0%) translateY(-6%) rotate(160deg) scale(1.05); } 60% { left: 25%; opacity: 0.8; transform: translateX(0%) translateY(0%) rotate(220deg) scale(1); } 80% { left: 0%; opacity: 0.75; transform: translateX(0%) translateY(2%) rotate(280deg) scale(0.95); } 95% { left: -15%; opacity: 0.6; transform: translateX(0%) translateY(-1%) rotate(340deg) scale(0.85); } 100% { left: -30%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(360deg) scale(0.7); } } @keyframes flyChessCard6 { 0% { left: 110%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 1% { left: 100%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(0deg) scale(0.8); } 3% { left: 95%; opacity: 0.65; transform: translateX(0%) translateY(-3%) rotate(-35deg) scale(0.9); } 20% { left: 75%; opacity: 0.75; transform: translateX(0%) translateY(-6%) rotate(-85deg) scale(1); } 40% { left: 50%; opacity: 0.8; transform: translateX(0%) translateY(-4%) rotate(-160deg) scale(1.05); } 60% { left: 25%; opacity: 0.8; transform: translateX(0%) translateY(2%) rotate(-220deg) scale(1); } 80% { left: 0%; opacity: 0.75; transform: translateX(0%) translateY(4%) rotate(-280deg) scale(0.95); } 95% { left: -15%; opacity: 0.6; transform: translateX(0%) translateY(1%) rotate(-340deg) scale(0.85); } 100% { left: -30%; opacity: 0; transform: translateX(0%) translateY(0%) rotate(-360deg) scale(0.7); } } /* ================================================================ NOUVEAU DESIGN DES CARTES COACH - Inspiré chess-master-cards ================================================================ */ .coach-card { position: relative; width: 100%; max-width: 320px; min-height: 480px; /* Hauteur minimale pour alignement uniforme */ border-radius: 16px; border: 1px solid rgba(168, 85, 247, 0.4); background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.6) 100%); backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(168, 85, 247, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; overflow: visible; /* Permet aux badges de sortir */ display: flex; flex-direction: column; z-index: 100; /* Au premier plan */ } .coach-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); border-color: rgba(168, 85, 247, 0.2); z-index: 200; } /* Badge de rang */ .coach-rank-badge { position: absolute; left: -8px; top: -8px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s; } .coach-rank-badge i { font-size: 16px; margin-bottom: 2px; } .coach-rank-badge span { font-size: 10px; font-weight: 700; } .rank-badge-gold { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); color: white; } .rank-badge-silver { background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%); box-shadow: 0 0 20px rgba(192, 192, 192, 0.5); color: white; } .rank-badge-bronze { background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%); box-shadow: 0 0 20px rgba(205, 127, 50, 0.5); color: white; } .rank-badge-default { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); border: 1px solid rgba(168, 85, 247, 0.4); box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); color: rgba(168, 85, 247, 1); } /* Badge NEW */ .new-coach-badge { position: absolute; right: -4px; top: -4px; z-index: 10; background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: white; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); animation: pulse 2s ease-in-out infinite; transform: rotate(12deg); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Contenu de la carte */ .coach-card-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; overflow: hidden; /* Permet les coins arrondis */ border-radius: 16px 16px 0 0; justify-content: flex-start; /* Aligne le contenu en haut */ } /* Header avec Avatar */ .coach-card-header-new { display: flex; gap: 16px; align-items: flex-start; } .coach-avatar-container { position: relative; flex-shrink: 0; } .coach-avatar-img { width: 80px; height: 80px; border-radius: 50%; border: 4px solid rgba(168, 85, 247, 1); box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); object-fit: cover; } .coach-online-indicator { position: absolute; bottom: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: #10B981; border: 2px solid rgba(15, 23, 42, 0.8); box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); } /* Infos du header */ .coach-info-header { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .coach-name-new { font-size: 18px; font-weight: 600; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); margin: 0; } .coach-title-new { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0; } /* Rating */ .coach-rating-new { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .stars-new { display: flex; gap: 2px; color: rgba(168, 85, 247, 1); } .stars-new i { font-size: 12px; } .stars-new i.filled, .stars-new i.fas.fa-star { color: rgba(168, 85, 247, 1); } .stars-new i.half-filled { background: linear-gradient(90deg, rgba(168, 85, 247, 1) 50%, rgba(255, 255, 255, 0.3) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stars-new i.quarter-filled { background: linear-gradient(90deg, rgba(168, 85, 247, 1) 25%, rgba(255, 255, 255, 0.3) 25%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stars-new i.three-quarter-filled { background: linear-gradient(90deg, rgba(168, 85, 247, 1) 75%, rgba(255, 255, 255, 0.3) 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stars-new i.far.fa-star { color: rgba(255, 255, 255, 0.3); } .rating-value-new { font-size: 12px; font-weight: 600; color: white; } .rating-count-new { font-size: 12px; color: rgba(255, 255, 255, 0.5); } /* Section ELO */ .coach-elo-section { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 12px; padding: 12px; backdrop-filter: blur(4px); min-height: 60px; /* Hauteur minimale pour alignement */ display: flex; flex-direction: column; justify-content: center; } .elo-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); margin: 0 0 4px 0; } .elo-value { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, #FFFFFF 0%, rgba(168, 85, 247, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; } /* Spécialités */ .coach-specialties-section { margin-top: 4px; min-height: 60px; /* Hauteur minimale pour alignement */ display: flex; flex-direction: column; } .specialties-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); margin: 0 0 8px 0; } .specialties-tags { display: flex; flex-wrap: wrap; gap: 8px; min-height: 24px; /* Hauteur minimale pour les tags */ align-items: flex-start; } .coach-specialty-tag { padding: 4px 12px; border-radius: 20px; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 12px; color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); } .no-specialties { font-size: 12px; color: rgba(255, 255, 255, 0.4); font-style: italic; } /* Section Prix */ .coach-pricing-section { border-top: 1px solid rgba(168, 85, 247, 0.3); padding-top: 16px; min-height: 70px; /* Hauteur minimale pour alignement */ display: flex; flex-direction: column; justify-content: center; } .price-row { display: flex; justify-content: space-between; gap: 12px; } .price-col { flex: 1; text-align: center; } .price-label { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin: 0 0 4px 0; } .price-value { font-size: 18px; font-weight: 700; color: white; margin: 0; } .price-weekend { color: rgba(168, 85, 247, 1); } /* Footer avec bouton réserver */ .coach-card-footer-new { padding: 0 20px 20px 20px; } .btn-reserve-coach { position: relative; width: 100%; padding: 12px 24px; border: none; border-radius: 12px; background: linear-gradient(90deg, #FFFFFF 0%, rgba(168, 85, 247, 1) 100%); color: black; font-weight: 700; font-size: 14px; cursor: pointer; overflow: hidden; box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .btn-reserve-coach:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(168, 85, 247, 0.6); } .btn-reserve-coach span { position: relative; z-index: 10; } .btn-shine-effect { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.5s; } .btn-reserve-coach:hover .btn-shine-effect { transform: translateX(100%); } .btn-reserve-coach.disabled { opacity: 0.5; cursor: not-allowed; background: linear-gradient(90deg, #6B7280 0%, #4B5563 100%); } .btn-reserve-coach.disabled:hover { transform: none; box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4); } /* Hover : les pièces deviennent plus visibles et plus rapides (MÊMES keyframes) */ /* Animations simplifiées - supprimées pour un hover plus simple */ .coach-card-content { flex: 1; display: flex; flex-direction: column; } .coach-card-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--primary); } .coach-card-elo { color: var(--accent); font-weight: 600; font-size: 0.95rem; } .coach-info-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .coach-badges { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; min-height: 28px; } .coach-badge { background: var(--bg-secondary); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .coach-badge.verified { background: rgba(16, 185, 129, 0.1); color: var(--success); } .coach-rating-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .coach-rating { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; } .stars { color: var(--secondary); font-size: 0.75rem; display: flex; gap: 0.1rem; flex-shrink: 0; } .stars i { color: #e2e8f0; } .stars i.filled { color: #f59e0b !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; } .stars i.three-quarter-filled { color: transparent !important; background: linear-gradient(90deg, #f59e0b 75%, #e2e8f0 75%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .stars i.half-filled { color: transparent !important; background: linear-gradient(90deg, #f59e0b 50%, #e2e8f0 50%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .stars i.quarter-filled { color: transparent !important; background: linear-gradient(90deg, #f59e0b 25%, #e2e8f0 25%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .rating-value { font-weight: 700; color: var(--primary); font-size: 0.95rem; margin-left: 0.2rem; flex-shrink: 0; } .rating-count { color: var(--text-secondary); font-size: 0.8rem; flex-shrink: 0; } .coach-price { font-size: 1.15rem; font-weight: 700; color: var(--primary); white-space: nowrap; flex-shrink: 0; } .coach-card-footer { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); margin-top: auto; border-radius: 0 0 20px 20px; /* Assure les coins arrondis inférieurs */ z-index: 0; overflow: hidden; /* Assure les coins arrondis */ } .coach-card-footer button { flex: 1; font-size: 0.75rem !important; padding: 0.7rem 0.35rem !important; display: flex; align-items: center; justify-content: center; gap: 0.3rem; white-space: nowrap; border-radius: 10px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .coach-card-footer button i { font-size: 0.85rem; flex-shrink: 0; } /* Search Section */ .search-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .search-header h1 { font-size: 2.5rem; font-weight: 800; } .search-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; } .filters-panel { background: white; padding: 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: calc(100vh - 120px); overflow-y: auto; overflow-x: hidden; position: sticky; top: 100px; border: 1px solid var(--border); } /* Scrollbar personnalisé pour les filtres */ .filters-panel::-webkit-scrollbar { width: 6px; } .filters-panel::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; } .filters-panel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } .filters-panel::-webkit-scrollbar-thumb:hover { background: var(--primary); } .filter-group { margin-bottom: 1.25rem; } .filter-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); font-size: 0.85rem; } /* Éléments de sélection Ultra-Premium */ .filter-group input[type="text"], .filter-group input[type="number"], .filter-group select { width: 100%; padding: 0.625rem 0.875rem; border: 2px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, white 0%, #f8fafc 100%); font-family: inherit; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); position: relative; } .filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 25px rgba(59, 130, 246, 0.1); transform: translateY(-2px); } .filter-group input:hover, .filter-group select:hover { border-color: var(--accent); background: white; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } /* Styles spécifiques pour les selects */ .filter-group select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 3rem; appearance: none; cursor: pointer; } .range-inputs { display: flex; gap: 0.5rem; } /* Checkboxes et Radio Ultra-Premium */ .checkbox-group { display: flex; flex-direction: column; gap: 0.75rem; } .checkbox-group label { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; cursor: pointer; padding: 0.75rem 1rem; border-radius: calc(var(--radius) - 2px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, white 0%, #f8fafc 100%); border: 2px solid transparent; position: relative; } .checkbox-group label:hover { background: white; border-color: var(--accent); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1); transform: translateY(-1px); } .checkbox-group input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; appearance: none; border: 2px solid var(--border); border-radius: 4px; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: white; } .checkbox-group input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .checkbox-group input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; font-size: 12px; } .rating-slider-container { padding: 1rem; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border); } .rating-slider { width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #e2e8f0 0%, var(--secondary) 100%); outline: none; appearance: none; -webkit-appearance: none; margin-bottom: 1rem; } .rating-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary) 0%, #f59e0b 100%); cursor: pointer; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); border: 3px solid white; transition: all 0.2s ease; } .rating-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6); } .rating-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary) 0%, #f59e0b 100%); cursor: pointer; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); border: 3px solid white; transition: all 0.2s ease; } .rating-slider::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6); } .rating-slider-container { padding: 1rem; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border); max-width: 100%; overflow: hidden; margin-bottom: 2rem; /* Augmenter l'espace en dessous */ } .rating-display { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; max-width: 100%; overflow: hidden; } .rating-display span { font-size: 0.85rem; /* Réduire la taille */ font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rating-stars { display: flex; gap: 0.2rem; flex-shrink: 0; font-size: 0.9rem; /* Réduire la taille des étoiles */ } .rating-stars i { color: #e2e8f0; transition: color 0.2s ease; } .rating-stars i.filled { color: #f59e0b; } .rating-stars i.three-quarter-filled { background: linear-gradient(90deg, #f59e0b 75%, #e2e8f0 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rating-stars i.half-filled { background: linear-gradient(90deg, #f59e0b 50%, #e2e8f0 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rating-stars i.quarter-filled { background: linear-gradient(90deg, #f59e0b 25%, #e2e8f0 25%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .search-results { flex: 1; } .results-actions { display: flex; align-items: center; gap: 1rem; } .view-toggle { display: flex; gap: 0.5rem; background: var(--bg-secondary); padding: 0.25rem; border-radius: var(--radius); } .view-btn { padding: 0.5rem 1rem; border: none; background: transparent; border-radius: calc(var(--radius) - 2px); font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .view-btn:hover { color: var(--accent); } .view-btn.active { background: white; color: var(--accent); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); } .coaches-grid, .coaches-map { display: none; } .coaches-grid.active, .coaches-map.active { display: grid; } .coaches-map { grid-template-columns: 2fr 1fr; gap: 1.5rem; min-height: 600px; } #mapContainer { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: var(--radius); border: 2px solid var(--border); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.1rem; } .map-coaches-list { display: flex; flex-direction: column; gap: 1rem; max-height: 600px; overflow-y: auto; padding: 0.5rem; } .map-coach-card { background: white; border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: all 0.3s ease; } .map-coach-card:hover { border-color: var(--accent); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15); transform: translateY(-2px); } .map-coach-card.active { border-color: var(--accent); background: linear-gradient(135deg, #EFF6FF 0%, white 100%); } .map-coach-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .map-coach-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .map-coach-info h4 { margin: 0; font-size: 1rem; color: var(--text-primary); } .map-coach-info p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); } .map-coach-details { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--border); } .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .results-header select { padding: 0.75rem 2.5rem 0.75rem 1rem; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; background: white; font-weight: 600; color: var(--text-primary); transition: var(--transition); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230F172A' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .results-header select:hover { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); } .results-header select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); } .coaches-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .coach-card { display: flex; flex-direction: column; height: 100%; } /* Forms */ .coach-form-card, .settings-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); padding: 2.5rem; border-radius: 20px; border: 1px solid rgba(168, 85, 247, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.1); transition: all 0.3s ease; } .settings-card:hover { border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(168, 85, 247, 0.15); } .form-section { margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.1); position: relative; } .form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .form-section h3 { font-size: 1.5rem; margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.95); display: flex; align-items: center; gap: 0.75rem; font-weight: 600; } .form-section h3 i { color: #a855f7; font-size: 1.25rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: rgba(168, 85, 247, 0.1); border-radius: 10px; border: 1px solid rgba(168, 85, 247, 0.2); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; } /* Formulaires Ultra-Premium */ .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 1rem 1.25rem; border: 2px solid var(--border); border-radius: calc(var(--radius) + 2px); font-size: 1rem; font-weight: 500; font-family: inherit; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); position: relative; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 25px rgba(59, 130, 246, 0.1); transform: translateY(-2px); } .form-group input:hover, .form-group textarea:hover, .form-group select:hover { border-color: var(--accent); background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } /* Styles spécifiques pour les selects de formulaires */ .form-group select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 3rem; appearance: none; cursor: pointer; } .toggle-group { display: flex; flex-direction: column; gap: 1rem; } .toggle-group label { display: flex; align-items: center; gap: 1rem; cursor: pointer; padding: 1rem 1.25rem; background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden; } .toggle-group label::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent); transition: left 0.5s ease; } .toggle-group label:hover { background: rgba(30, 41, 59, 0.6); border-color: rgba(168, 85, 247, 0.3); transform: translateX(5px); } .toggle-group label:hover::before { left: 100%; } .toggle-group label span { color: rgba(255, 255, 255, 0.9); font-weight: 500; flex: 1; } .toggle-group label input[type="checkbox"] { width: 22px; height: 22px; cursor: pointer; appearance: none; border: 2px solid rgba(168, 85, 247, 0.4); border-radius: 6px; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(15, 23, 42, 0.6); flex-shrink: 0; } .toggle-group label input[type="checkbox"]:hover { border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); } .toggle-group label input[type="checkbox"]:checked { background: linear-gradient(135deg, #a855f7, #9333ea); border-color: #a855f7; box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.1); } .toggle-group label input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; font-weight: bold; line-height: 1; } /* Tabs Premium */ .kaptur-tabs, .reservations-tabs, .profil-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; background: var(--bg-secondary); padding: 0.5rem; border-radius: var(--radius); } /* Onglets Ultra-Premium */ .tab-btn { background: linear-gradient(135deg, transparent 0%, rgba(248, 250, 252, 0.5) 100%); border: 2px solid transparent; padding: 1rem 2rem; font-weight: 700; font-size: 1rem; color: var(--text-secondary); cursor: pointer; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: calc(var(--radius) + 2px); letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.9rem; overflow: hidden; } .tab-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent); transition: left 0.6s; } .tab-btn:hover::before { left: 100%; } .tab-btn:hover { color: var(--primary); background: var(--bg-primary); border-color: var(--accent); transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15); } .tab-btn.active { color: var(--primary); background: var(--bg-primary); border-color: var(--accent); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2); transform: translateY(-2px); } .tab-btn.active::before { content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 50%; height: 4px; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-radius: 2px; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } .tab-btn.active::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(15, 23, 42, 0.05) 100%); z-index: -1; } .tab-content { display: none; } .tab-content.active { display: block; } /* Kaptur */ .kaptur-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } /* Masquer le bouton "Créer une demande" par défaut pour éviter le flash Il sera affiché via JavaScript si l'utilisateur n'est pas coach */ #createAuction { display: none !important; } #createAuction.show { display: flex !important; } .kaptur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } .kaptur-card { background: white; padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius); box-shadow: var(--shadow); transition: var(--transition); display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.75rem; border: 2px solid transparent; /* Bordure par défaut transparente */ } .kaptur-card:hover { box-shadow: var(--shadow-lg); } /* ==================================================================================== ⚠️ STYLES CRITIQUES - BORDURES DES CARTES D'OFFRES KAPTUR - NE PAS SUPPRIMER ==================================================================================== Ces styles ajoutent des bordures colorées pour les offres acceptées (vert) et refusées (rouge) dans la section "Mes Offres" de Kaptur ==================================================================================== */ /* Bordure violette pour les offres acceptées */ .bid-card-accepted { border: 3px solid #a855f7 !important; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2) !important; background: hsl(215, 25%, 18%) !important; } .bid-card-accepted:hover { border-color: #7e22ce !important; box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3) !important; } /* Bordure rouge pour les offres refusées */ .bid-card-rejected { border: 3px solid #ef4444 !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2) !important; background: hsl(215, 25%, 18%) !important; } .bid-card-rejected:hover { border-color: #dc2626 !important; box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3) !important; } /* Bordure transparente pour les offres en attente */ .bid-card-pending { border: 2px solid rgba(168, 85, 247, 0.3); background: hsl(215, 25%, 18%); } /* Bordure grise pour les offres battues ou expirées */ .bid-card-beaten, .bid-card-expired { border: 2px solid rgba(107, 114, 128, 0.3); background: hsl(215, 25%, 18%); } /* Bordure violette claire pour la meilleure offre */ .bid-card-best { border: 2px solid rgba(168, 85, 247, 0.6); background: hsl(215, 25%, 18%); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } .kaptur-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem; } .kaptur-badge { background: rgba(168, 85, 247, 0.2); color: #a855f7; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; border: 1px solid rgba(168, 85, 247, 0.3); } .kaptur-title { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .kaptur-status { padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .kaptur-status.active { background: #ecfdf5; color: #047857; } .kaptur-status.expired { background: #fef2f2; color: #b91c1c; } .kaptur-timer { justify-self: start; background: var(--bg-secondary); border: 1px solid var(--border); padding: 0.4rem 0.6rem; border-radius: 10px; } .kaptur-timer .countdown-timer { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.3px; } .kaptur-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; margin-top: 0.25rem; } .kaptur-detail { display: flex; align-items: center; gap: 0.4rem; } .kaptur-detail-label { color: var(--text-secondary); font-size: 0.85rem; } .kaptur-detail-value { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; } .kaptur-detail-value i { color: var(--primary); margin-right: 0.15rem; } .kaptur-description { color: var(--text-secondary); margin: 0.25rem 0 0.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kaptur-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } /* Boutons Kaptur améliorés */ .kaptur-actions .btn-kaptur, .kaptur-actions .btn-bid, .kaptur-actions .btn-delete, .kaptur-actions .btn-view-bids { position: relative; overflow: hidden; border: 0; border-radius: 10px; padding: 0.6rem 0.9rem; font-weight: 700; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; box-shadow: 0 6px 14px rgba(2, 6, 23, 0.08); } .kaptur-actions .btn-bid { background: linear-gradient(135deg, var(--primary) 0%, #7c83ff 100%); color: #fff; } .kaptur-actions .btn-view-bids { background: linear-gradient(135deg, var(--accent) 0%, #fbbf24 100%); color: #0f172a; } .kaptur-actions .btn-delete { background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); color: #fff; } .kaptur-actions .btn-kaptur { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; } .kaptur-actions .btn-kaptur:hover, .kaptur-actions .btn-bid:hover, .kaptur-actions .btn-delete:hover, .kaptur-actions .btn-view-bids:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2, 6, 23, 0.12); filter: saturate(1.05); } .kaptur-actions .btn-kaptur:active, .kaptur-actions .btn-bid:active, .kaptur-actions .btn-delete:active, .kaptur-actions .btn-view-bids:active { transform: translateY(0); } /* Ripple effect */ .kaptur-actions .btn-kaptur::after, .kaptur-actions .btn-bid::after, .kaptur-actions .btn-delete::after, .kaptur-actions .btn-view-bids::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%); border-radius: 999px; opacity: 0; } .kaptur-actions .btn-kaptur:active::after, .kaptur-actions .btn-bid:active::after, .kaptur-actions .btn-delete:active::after, .kaptur-actions .btn-view-bids:active::after { animation: btnRipple .45s ease-out; } @keyframes btnRipple { from { width: 0; height: 0; opacity: .45; } to { width: 280%; height: 280%; opacity: 0; } } /* Bid modal visuals */ .bid-modal { max-width: 560px; } .bid-modal h2 { margin: 0 0 .75rem; } .bid-modal .form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } .bid-modal .form-group label { font-weight: 700; display: block; margin-bottom: .35rem; } .bid-modal .hint { color: var(--text-secondary); font-size: .85rem; } .input-with-prefix { display: flex; align-items: center; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: .2rem .6rem; } .input-with-prefix .prefix { color: var(--text-secondary); margin-right: .25rem; font-weight: 700; } .input-with-prefix input { flex: 1; background: transparent; border: 0; outline: 0; padding: .5rem .25rem; font-weight: 700; color: var(--text-primary); } .bid-modal textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: .75rem; background: var(--bg-secondary); resize: vertical; } .bid-modal .form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; } /* Accent d'état visuel sur le bouton envoyer */ #submitBid { position: relative; overflow: hidden; } #submitBid::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 0% 0%, rgba(99, 102, 241, 0.15), transparent 60%), radial-gradient(120% 120% at 100% 100%, rgba(16, 185, 129, 0.15), transparent 60%); opacity: .6; pointer-events: none; } .kaptur-card:hover { transform: translateY(-2px); } /* Cadre lumineux + lueur mobile pour les Kaptur actives */ #kapturActives .kaptur-card { position: relative; overflow: visible; /* laisser dépasser la lueur */ border: 2px solid rgba(99, 102, 241, 0.22); /* cadre un peu plus épais et présent */ } /* Animation de circulation de couleur autour du bord - rotation fluide du gradient */ @keyframes circulateGlow { 0% { background: conic-gradient(from 0deg, rgba(99, 102, 241, 0.0) 0deg, rgba(99, 102, 241, 0.7) 40deg, rgba(168, 85, 247, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(99, 102, 241, 0.7) 200deg, rgba(99, 102, 241, 0.0) 360deg); } 12.5% { background: conic-gradient(from 45deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(236, 72, 153, 0.7) 90deg, rgba(99, 102, 241, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } 25% { background: conic-gradient(from 90deg, rgba(236, 72, 153, 0.0) 0deg, rgba(236, 72, 153, 0.7) 40deg, rgba(99, 102, 241, 0.7) 90deg, rgba(168, 85, 247, 0.7) 140deg, rgba(236, 72, 153, 0.7) 200deg, rgba(236, 72, 153, 0.0) 360deg); } 37.5% { background: conic-gradient(from 135deg, rgba(99, 102, 241, 0.0) 0deg, rgba(99, 102, 241, 0.7) 40deg, rgba(168, 85, 247, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(99, 102, 241, 0.7) 200deg, rgba(99, 102, 241, 0.0) 360deg); } 50% { background: conic-gradient(from 180deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(236, 72, 153, 0.7) 90deg, rgba(99, 102, 241, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } 62.5% { background: conic-gradient(from 225deg, rgba(236, 72, 153, 0.0) 0deg, rgba(236, 72, 153, 0.7) 40deg, rgba(99, 102, 241, 0.7) 90deg, rgba(168, 85, 247, 0.7) 140deg, rgba(236, 72, 153, 0.7) 200deg, rgba(236, 72, 153, 0.0) 360deg); } 75% { background: conic-gradient(from 270deg, rgba(99, 102, 241, 0.0) 0deg, rgba(99, 102, 241, 0.7) 40deg, rgba(168, 85, 247, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(99, 102, 241, 0.7) 200deg, rgba(99, 102, 241, 0.0) 360deg); } 87.5% { background: conic-gradient(from 315deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(236, 72, 153, 0.7) 90deg, rgba(99, 102, 241, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } 100% { background: conic-gradient(from 360deg, rgba(99, 102, 241, 0.0) 0deg, rgba(99, 102, 241, 0.7) 40deg, rgba(168, 85, 247, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(99, 102, 241, 0.7) 200deg, rgba(99, 102, 241, 0.0) 360deg); } } /* Anneau lumineux fin et fixe sur le bord avec circulation de couleur */ #kapturActives .kaptur-card::after { content: ''; position: absolute; inset: -3px; /* léger débord + épais */ border-radius: inherit; background: conic-gradient(from 0deg, rgba(99, 102, 241, 0.0) 0deg, rgba(99, 102, 241, 0.7) 40deg, rgba(16, 185, 129, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(99, 102, 241, 0.7) 200deg, rgba(99, 102, 241, 0.0) 360deg); animation: circulateGlow 4s linear infinite; filter: blur(0.9px); /* lueur légèrement plus diffuse */ z-index: 0; pointer-events: none; /* Ne garder que le bord (masquer le centre) */ padding: 3px; /* anneau plus épais pour renforcer l'effet */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Halo intérieur doux et fixe pour renforcer l'effet sans gêner la lecture */ #kapturActives .kaptur-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 120% at 0% 0%, rgba(99, 102, 241, 0.12), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(16, 185, 129, 0.12), transparent 55%); z-index: 0; pointer-events: none; } /* S'assurer que le contenu reste au-dessus de la lueur */ #kapturActives .kaptur-card>* { position: relative; z-index: 1; } /* (Animation retirée pour garder le contour fixe) */ @media (max-width: 520px) { .kaptur-grid { grid-template-columns: 1fr; } .kaptur-details { grid-template-columns: 1fr; } } .kaptur-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; } .kaptur-detail { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); } .kaptur-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--border); } .kaptur-price { font-size: 1.5rem; font-weight: 700; color: var(--primary); } /* Réservations */ .reservations-list { display: flex; flex-direction: column; gap: 1.5rem; } .reservation-card { background: white; padding: 0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; transition: all 0.3s ease; overflow: visible !important; border: 1px solid var(--border); position: relative; min-width: 320px !important; } .reservation-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .booking-card-upcoming { border-left: 4px solid #10b981; } .booking-card-past { border-left: 4px solid #6b7280; opacity: 0.9; } .booking-card-cancelled { border-left: 4px solid #ef4444; opacity: 0.8; } .booking-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2rem !important; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-bottom: 1px solid var(--border); gap: 1.5rem !important; } .reservation-date { text-align: center; padding: 0.75rem 1rem; background: linear-gradient(135deg, var(--accent) 0%, #3B82F6 100%); border-radius: 8px; color: white; min-width: 70px; } .reservation-day { font-size: 1.8rem; font-weight: 800; color: white; line-height: 1; } .reservation-month { color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem; } .booking-status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .booking-status-badge.status-upcoming { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; } .booking-status-badge.status-past { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); color: #374151; } .booking-status-badge.status-cancelled { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b; } .reservation-content { padding: 1.5rem 2rem !important; display: flex; flex-direction: column; gap: 1rem; background: hsl(215, 25%, 15%); } .reservation-coach { display: flex; align-items: center; gap: 1rem; } .coach-avatar-small { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(168, 85, 247, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .coach-name-info h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: rgba(255, 255, 255, 0.95); font-weight: 600; } .reservation-mode { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .reservation-mode i { color: #a855f7; } .reservation-details { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(168, 85, 247, 0.2); min-width: 0 !important; overflow: visible !important; } .reservation-time-range { display: flex; align-items: center; white-space: nowrap !important; min-width: fit-content !important; gap: 0.5rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; } .reservation-time-range i { color: #a855f7; } .reservation-duration { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; } .reservation-price { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 1.1rem; } .reservation-price i { color: #a855f7; } .reservation-price strong { color: #a855f7; font-weight: 700; } .reservation-info h3 { font-size: 1.3rem; margin-bottom: 0.5rem; } .reservation-time { color: var(--text-secondary); margin-bottom: 0.5rem; } .reservation-status { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; } .reservation-status.confirmed { background: rgba(16, 185, 129, 0.1); color: var(--secondary); } .reservation-status.pending { background: rgba(245, 158, 11, 0.1); color: var(--accent); } .reservation-status.cancelled { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .reservation-status.completed { background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600; } .reservation-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(168, 85, 247, 0.2); } .reservation-actions .btn-primary, .reservation-actions .btn-primary.btn-sm { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); display: flex; align-items: center; gap: 0.5rem; justify-content: center; } .reservation-actions .btn-primary:hover, .reservation-actions .btn-primary.btn-sm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6); } .reservation-actions .btn-secondary, .reservation-actions .btn-secondary.btn-sm { background: hsl(215, 25%, 20%); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(168, 85, 247, 0.3); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; } .reservation-actions .btn-secondary:hover, .reservation-actions .btn-secondary.btn-sm:hover { background: hsl(215, 25%, 25%); border-color: rgba(168, 85, 247, 0.5); } /* ========== FIX DÉFINITIF MESSAGERIE ========== */ /* Forcer la section messages en plein écran */ #section-messages.active { position: fixed !important; top: 4rem !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100vh - 4rem) !important; margin: 0 !important; padding: 0 !important; z-index: 999 !important; overflow: hidden !important; } /* Retirer le padding du container dans la section messages */ #section-messages.active .container { max-width: 100% !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; } /* Messages layout en plein écran */ #section-messages.active .messages-layout { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; padding-top: 0 !important; display: grid !important; grid-template-columns: 180px 1fr !important; margin: 0 !important; } /* Conversations list */ #section-messages.active .conversations-list { height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #section-messages.active #conversationsList { flex: 1 !important; overflow-y: auto !important; } /* Chat area - structure flex */ #section-messages.active .chat-area { height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* Chat header */ #section-messages.active .chat-header { flex-shrink: 0 !important; height: auto !important; } /* Messages area - prend tout l'espace */ #section-messages.active .messages-area { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; } /* Message input - ne se compresse jamais */ #section-messages.active .message-input-area { flex-shrink: 0 !important; height: auto !important; min-height: 80px !important; display: flex !important; align-items: center !important; gap: 1rem !important; padding: 1rem 1.5rem !important; } #section-messages.active .message-input-area input { flex: 1 !important; padding: 0.75rem 1rem !important; border: 2px solid var(--border) !important; border-radius: 24px !important; font-size: 1rem !important; } #section-messages.active .message-input-area button { width: 48px !important; height: 48px !important; padding: 0.75rem !important; border-radius: 50% !important; border: none !important; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%) !important; color: white !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Bloquer le scroll du body */ body:has(#section-messages.active) { overflow: hidden !important; height: 100vh !important; } /* Conversation Swipe Styles */ .conversation-item { position: relative; overflow: hidden; transition: transform 0.3s ease; } .conversation-item.swiping { transform: translateX(-80px); } .conversation-item.swipe-delete { transform: translateX(-100%); opacity: 0; } /* ========== POPUP DE CONFIRMATION ========== */ .confirmation-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .confirmation-popup.active { opacity: 1; visibility: visible; } .confirmation-content { background: hsl(215, 25%, 15%); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 16px; padding: 2rem; max-width: 400px; width: 90%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.2); transform: scale(0.9); transition: transform 0.3s ease; } .confirmation-popup.active .confirmation-content { transform: scale(1); } .confirmation-title { font-size: 1.25rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.5rem; text-align: center; } .confirmation-message { color: rgba(255, 255, 255, 0.7); text-align: center; margin-bottom: 2rem; line-height: 1.5; } .confirmation-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; } .confirmation-icon { color: #a855f7; font-size: 2rem; margin-bottom: 0.5rem; display: flex; justify-content: center; } .confirmation-actions { display: flex; gap: 1rem; justify-content: center; } .confirmation-btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: none; font-size: 0.875rem; } .confirmation-btn-cancel { background: hsl(215, 25%, 20%); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(168, 85, 247, 0.3); } .confirmation-btn-cancel:hover { background: hsl(215, 25%, 25%); border-color: rgba(168, 85, 247, 0.5); } .confirmation-btn-confirm { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; } .confirmation-btn-confirm:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .conversation-swipe-actions { position: absolute; right: 0; top: 0; height: 100%; width: 80px; background: linear-gradient(135deg, #ff4757, #ff3742); display: flex; align-items: center; justify-content: center; transform: translateX(100%); transition: transform 0.3s ease; } .conversation-item.swiping .conversation-swipe-actions { transform: translateX(0); } .conversation-swipe-actions button { background: none; border: none; color: white; font-size: 1.2rem; padding: 0.5rem; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; } .conversation-swipe-actions button:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } /* Menu des trois points */ .conversation-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .conversation-menu.active { opacity: 1; visibility: visible; } .menu-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); } .menu-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); min-width: 280px; transition: transform 0.3s ease; } .conversation-menu.active .menu-content { transform: translate(-50%, -50%) scale(1); } .menu-content button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; border: none; background: none; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; margin-bottom: 0.5rem; } .menu-content button:last-child { margin-bottom: 0; } .menu-content button:hover { background: var(--light-bg); } .menu-content button i { width: 20px; text-align: center; } .menu-content button:first-child { color: #ff4757; } .menu-content button:first-child:hover { background: rgba(255, 71, 87, 0.1); } .conversations-list { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .conversations-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .conversation-item { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 1rem; } .conversation-item:hover { background: var(--bg-secondary); } .conversation-item.active { background: rgba(99, 102, 241, 0.1); } .conversation-item.unread { background: rgba(99, 102, 241, 0.05); } .conversation-avatar { position: relative; } .conversation-avatar .status-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: var(--secondary); border: 2px solid white; border-radius: 50%; } .conversation-info { flex: 1; } .conversation-name { font-weight: 600; margin-bottom: 0.25rem; } .conversation-preview { color: var(--text-secondary); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-time { font-size: 0.85rem; color: var(--text-secondary); } .chat-area { background: white; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; overflow: hidden; height: 100%; } .chat-header { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-secondary); } .chat-user-info { display: flex; align-items: center; gap: 0.5rem; } .chat-user-info img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .chat-user-info h4 { font-size: 0.85rem; font-weight: 600; margin: 0; color: var(--text-primary); } .status { font-size: 0.7rem; color: var(--text-secondary); } .chat-actions { display: flex; gap: 0.5rem; } /* Zone des messages - CORRIGÉ */ .messages-area { flex: 1; overflow-y: auto; padding: 1rem; background: var(--bg-primary); display: flex; flex-direction: column; height: 100%; /* Ajouté */ } .messages-container { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100%; } .message { display: flex; gap: 0.75rem; margin-bottom: 0; align-items: flex-end; } /* Quand le message contient une carte Kaptur, prendre toute la largeur */ .message:has(.kaptur-summary-card) { width: 100%; } .message:has(.kaptur-summary-card) .message-content { max-width: 100%; width: 100%; } .message-sent { justify-content: flex-end; } .message-received { justify-content: flex-start; } .message-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } /* Message content - Desktop only */ @media (min-width: 769px) { .message-content { max-width: 70%; padding: 0.875rem 1.25rem; border-radius: 1.25rem; position: relative; } .message-content:has(.kaptur-summary-card) { max-width: 100%; width: 100%; padding: 0.75rem; } .message-content p { margin: 0 0 0.375rem 0; color: inherit; word-wrap: break-word; } .message-sent .message-content { background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: white; border-bottom-right-radius: 0.25rem; } .message-received .message-content { background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: white; border-bottom-left-radius: 0.25rem; } .message-time { font-size: 0.75rem; opacity: 0.7; display: block; } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); } .empty-state i { font-size: 4rem; margin-bottom: 1rem; opacity: 0.3; } /* ========== MESSAGERIE PREMIUM ========== */ /* Layout de la messagerie */ .messages-layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 200px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .conversations-sidebar { background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0.5rem 0; } .conversations-header { display: none; } .conversations-list { flex: 1; overflow-y: auto; padding: 0; } .conversation-item { display: flex; align-items: center; padding: 0.6rem 0.5rem; border-radius: 0; cursor: pointer; transition: all 0.2s ease; margin-bottom: 0; position: relative; border-bottom: none; gap: 0.5rem; } .conversation-item:hover { background: rgba(0, 0, 0, 0.05); } .conversation-item.active { background: var(--primary); } .conversation-item.active .conversation-name, .conversation-item.active .conversation-time { color: white; } .conversation-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: none; } .conversation-info { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .conversation-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .conversation-time { font-size: 0.65rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .conversation-header { display: none; } .conversation-preview { display: none; } .unread-badge { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); background: var(--accent); color: white; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; } .conversation-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, white 0%, var(--bg-secondary) 100%); } .conversation-header-info { display: flex; align-items: center; gap: 1rem; } .conversation-header-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); } .conversation-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--primary); } .conversation-status { font-size: 0.85rem; color: var(--success); font-weight: 500; } .conversation-actions { display: flex; gap: 0.5rem; } /* Zone des messages */ .messages-container { flex: 1; overflow-y: auto; padding: 1rem; background: var(--bg-primary); } .message { margin-bottom: 1rem; display: flex; animation: messageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Quand le message contient une carte Kaptur, prendre toute la largeur */ .message:has(.kaptur-summary-card) { width: 100%; } .message:has(.kaptur-summary-card) .message-content { max-width: 100%; width: 100%; } .message-sent { justify-content: flex-end; } .message-received { justify-content: flex-start; } /* Message content - Desktop only (second block) */ @media (min-width: 769px) { .message-content { max-width: 70%; padding: 0.75rem 1rem; border-radius: 18px; position: relative; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); } .message-content:has(.kaptur-summary-card) { max-width: 100%; width: 100%; padding: 0.75rem; } .message-sent .message-content { background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: white; border-bottom-right-radius: 4px; } .message-received .message-content { background: linear-gradient(135deg, #065f46 0%, #047857 100%); color: white; border-bottom-left-radius: 4px; } .message-content p { margin: 0 0 0.25rem 0; line-height: 1.4; } .message-time { font-size: 0.75rem; opacity: 0.7; display: block; text-align: right; } .message-received .message-time { text-align: left; } } .message-input-area input { flex: 1; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 24px; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--bg-secondary); } .message-input-area input:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .message-input-area button { padding: 0.75rem; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); color: white; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .message-input-area button:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } /* Animations */ @keyframes messageSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 1024px) { .messages-layout { grid-template-columns: 160px 1fr; } } @media (max-width: 768px) { .messages-layout { grid-template-columns: 1fr; padding-top: 60px; } .conversations-sidebar { display: none; } .message-bubble { padding: 0.6rem 0.8rem; font-size: 0.9rem; max-width: 75%; } .message-time-side { font-size: 0.65rem; } .conversation-name { font-size: 0.75rem; } } /* ========== PAGE DEVENIR COACH PREMIUM ========== */ /* En-tête de page */ .page-header { text-align: center; margin-bottom: 2.5rem; } .page-header h1 { font-size: 2.25rem; font-weight: 800; color: var(--primary); margin-bottom: 0.75rem; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-subtitle { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; max-width: 600px; margin: 0 auto; line-height: 1.6; } /* Formulaire premium */ .premium-form { max-width: 800px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1); border: 1px solid var(--border); overflow: hidden; } .premium-form .form-section { padding: 1.75rem 2rem; border-bottom: 1px solid var(--border); } .premium-form .form-section:last-of-type { border-bottom: none; } .premium-form .form-section h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .premium-form .form-section h3 i { font-size: 1rem; color: var(--accent); } /* Groupes de formulaires compacts */ .premium-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .premium-form .form-group { margin-bottom: 1rem; } .premium-form .form-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; display: block; } .premium-form input, .premium-form textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 12px; font-size: 0.95rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--bg-secondary); } .premium-form input:focus, .premium-form textarea:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .premium-form textarea { resize: vertical; min-height: 80px; } /* Checkboxes premium */ .premium-checkbox-group { display: flex; gap: 1rem; flex-wrap: wrap; } .premium-checkbox { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; font-weight: 500; user-select: none; } .premium-checkbox:hover { background: white; border-color: var(--accent); transform: translateY(-1px); } .premium-checkbox input[type="checkbox"] { display: none; } .premium-checkbox .checkmark { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .premium-checkbox input[type="checkbox"]:checked+.checkmark { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-color: var(--accent); } .premium-checkbox input[type="checkbox"]:checked+.checkmark::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold; } .premium-checkbox i { color: var(--accent); font-size: 0.9rem; } /* Tags premium */ .premium-tag-select { display: flex; flex-wrap: wrap; gap: 0.5rem; } .premium-tag { display: inline-flex; align-items: center; padding: 0.5rem 0.875rem; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 20px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.85rem; font-weight: 500; user-select: none; } .premium-tag:hover { background: white; border-color: var(--accent); transform: translateY(-1px); } .premium-tag input[type="checkbox"] { display: none; } .premium-tag input[type="checkbox"]:checked+span { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); color: white; border-color: var(--accent); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } .premium-tag span { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Grille de disponibilités compacte */ .availability-grid-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .day-group-compact { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border); } .day-group-compact label { font-size: 0.8rem; font-weight: 600; color: var(--primary); min-width: 35px; margin: 0; } .day-group-compact input[type="time"] { flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; background: white; } .day-group-compact span { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; } /* Options de synchronisation compactes */ .sync-options-compact { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; } .sync-btn-compact { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.85rem; font-weight: 500; color: var(--text-primary); } .sync-btn-compact:hover { background: white; border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2); } .sync-btn-compact i { font-size: 1rem; } /* Actions du formulaire */ .form-actions { padding: 2rem; background: linear-gradient(135deg, var(--bg-secondary) 0%, white 100%); text-align: center; } .btn-premium { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); color: white; border: none; border-radius: 16px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); } .btn-premium:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4); } .btn-premium i { font-size: 1.1rem; } /* Responsive pour la page coach */ @media (max-width: 768px) { .page-header h1 { font-size: 1.875rem; } .page-subtitle { font-size: 1rem; } .premium-form .form-section { padding: 1.25rem 1.5rem; } .premium-form .form-row { grid-template-columns: 1fr; gap: 0.75rem; } .availability-grid-compact { grid-template-columns: 1fr; } .sync-options-compact { flex-direction: column; } .sync-btn-compact { justify-content: center; } } /* ========== TOP COACHS PREMIUM ========== */ /* ==================================================================================== ⚠️ SECTION CRITIQUE - TOP COACHES PREMIUM - NE PAS MODIFIER SANS CONSULTER LA DOC ==================================================================================== Documentation complète : DOCUMENTATION-CARTES-COACH.md Cette section contient les styles améliorés pour les top coachs : - Dégradé bleu marine/noir/or avec pattern damier animé - 4 pièces d'échecs animées qui voyagent de droite à gauche - Badges de rang (1-5) avec icône trophée - Avatar avec lueur or - Coins arrondis inférieurs ==================================================================================== */ .top-coach-card { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.05); border: 2px solid #000000; /* Cadre noir */ overflow: visible; position: relative; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; height: 100%; display: flex; flex-direction: column; transform-style: preserve-3d; perspective: 1000px; } .top-coach-card::before { content: ''; position: absolute; inset: -3px; border-radius: 22px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.4) 0%, rgba(139, 92, 246, 0.3) 50%, rgba(168, 85, 247, 0.4) 100%); background-size: 200% 200%; animation: gradientShiftDark 3s ease infinite; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .top-coach-card:hover::before { opacity: 1; } .top-coach-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.4); } /* Badges de rang - CRITIQUE : Toujours avec icône trophée pour tous les rangs */ .rank-badge { position: absolute; top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; color: white; z-index: 10002 !important; /* CRITIQUE : Au-dessus de tout */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); } .rank-badge.rank-1 { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4), 0 0 20px rgba(212, 175, 55, 0.15); /* Lueur or réduite */ animation: goldGlow 2s ease-in-out infinite alternate; } .rank-badge.rank-2 { background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%); box-shadow: 0 4px 15px rgba(192, 192, 192, 0.4), 0 0 20px rgba(192, 192, 192, 0.15); } .rank-badge.rank-3 { background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%); box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4), 0 0 20px rgba(205, 127, 50, 0.15); } .rank-badge.rank-4, .rank-badge.rank-5 { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.15); } @keyframes goldGlow { 0% { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.15); /* Lueur or réduite */ } 100% { box-shadow: 0 4px 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.25); /* Lueur or réduite */ } } .rank-badge i { font-size: 0.7rem; margin-right: 2px; } /* Badge spécial pour le champion */ .special-badge { position: absolute; top: 0.3rem; left: calc(50% - 2.6rem); transform: translateX(-50%); background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%); color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; gap: 0.3rem; z-index: 10; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); animation: championPulse 2s ease-in-out infinite alternate; } .special-badge i { font-size: 0.8rem; } /* En-tête de la carte */ .top-coach-header { padding: 1rem 1rem 0.75rem; min-height: 120px; overflow: visible; border-radius: 18px 18px 0 0; background: linear-gradient(135deg, #1e3a8a 0%, /* Bleu marine */ #1e40af 20%, /* Bleu marine plus clair */ #000000 40%, /* Noir */ #1e3a8a 60%, /* Bleu marine */ #000000 80%, /* Noir */ #1e40af 100% /* Bleu marine plus clair */ ); background-size: 200% 200%; animation: gradientFlow 10s ease infinite; color: white; position: relative; z-index: 10; } /* Pattern échiquier animé pour top coach */ .top-coach-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.04) 0px, /* Lueur or réduite */ rgba(212, 175, 55, 0.04) 20px, transparent 20px, transparent 40px), repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.04) 0px, /* Lueur or réduite */ rgba(212, 175, 55, 0.04) 20px, transparent 20px, transparent 40px); background-size: 40px 40px; background-position: 0 0; animation: chessMove 20s linear infinite; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 18px 18px 0 0; } /* Effet de particules/lumière pour top coach */ .top-coach-header::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); transform: translate(-50%, -50%); animation: rotate 15s linear infinite; z-index: 2; } .top-coach-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(212, 175, 55, 0.15); /* Lueur or réduite */ margin-bottom: 0.75rem; position: relative; z-index: 5; } .top-coach-name { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.5rem 0; color: white; } .top-coach-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; } .elo-badge { background: rgba(255, 255, 255, 0.2); padding: 0.375rem 0.75rem; border-radius: 16px; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(10px); } .rating-badge { background: rgba(255, 255, 255, 0.2); padding: 0.375rem 0.75rem; border-radius: 16px; font-size: 0.75rem; font-weight: 600; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 0.25rem; } .rating-badge i { color: rgba(255, 255, 255, 0.3); font-size: 0.65rem; } .rating-badge i.filled { color: #fbbf24 !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; } .rating-badge i.three-quarter-filled { color: transparent !important; background: linear-gradient(90deg, #fbbf24 75%, rgba(255, 255, 255, 0.3) 75%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .rating-badge i.half-filled { color: transparent !important; background: linear-gradient(90deg, #fbbf24 50%, rgba(255, 255, 255, 0.3) 50%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .rating-badge i.quarter-filled { color: transparent !important; background: linear-gradient(90deg, #fbbf24 25%, rgba(255, 255, 255, 0.3) 25%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .rating-badge span { margin-left: 0.25rem; } /* Corps de la carte */ .top-coach-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; } .top-coach-bio { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); margin: 0 0 0.75rem 0; flex: 1; min-height: 2.5rem; max-height: 2.5rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .top-coach-specialties { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; min-height: 2rem; max-height: 2rem; overflow: hidden; } .top-coach-details { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; margin-top: auto; flex-wrap: wrap; } .detail-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-primary); font-weight: 500; flex: 1; min-width: 80px; text-align: center; } .detail-item i { color: var(--accent); font-size: 1rem; margin-bottom: 0.1rem; } .detail-item span { line-height: 1.3; word-break: break-word; } /* Pièces d'échecs animées pour top coach - CRITIQUE : NE PAS SUPPRIMER */ .top-coach-header .chess-piece-card-top { position: absolute; font-size: 2.2rem; color: rgba(255, 255, 255, 0.85); z-index: 3; /* Au-dessus du background mais sous l'avatar */ pointer-events: none; user-select: none; text-shadow: 0 0 10px rgba(212, 175, 55, 0.25), /* Lueur or réduite */ 0 0 20px rgba(212, 175, 55, 0.15), /* Lueur or réduite */ 2px 2px 4px rgba(0, 0, 0, 0.5); filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.2)); /* Lueur or réduite */ opacity: 0; /* Invisible par défaut - visible uniquement pendant l'animation */ clip-path: inset(0 round 18px 18px 0 0); /* Respecte les coins arrondis du header */ transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); animation-fill-mode: backwards; /* Reste au premier frame (invisible) pendant le delay */ } /* Positionnement et animation de chaque pièce pour top coach - Voyage de droite à gauche */ .top-coach-header .chess-piece-card-top-1 { top: 10%; animation: flyChessCard1 8s linear infinite; animation-fill-mode: backwards; } .top-coach-header .chess-piece-card-top-2 { top: 40%; animation: flyChessCard2 9s linear infinite; animation-delay: 2s; animation-fill-mode: backwards; } .top-coach-header .chess-piece-card-top-3 { top: 70%; animation: flyChessCard3 10s linear infinite; animation-delay: 4s; animation-fill-mode: backwards; } .top-coach-header .chess-piece-card-top-4 { top: 25%; animation: flyChessCard4 8.5s linear infinite; animation-delay: 1s; animation-fill-mode: backwards; } /* Hover : les pièces deviennent plus visibles et plus rapides pour top coach (MÊMES keyframes) */ /* Animations simplifiées - supprimées pour un hover plus simple */ /* Pied de la carte */ .top-coach-footer { padding: 0.75rem 1rem 1rem; display: flex; gap: 0.5rem; border-top: 1px solid var(--border); background: var(--bg-secondary); border-radius: 0 0 20px 20px; /* Assure les coins arrondis inférieurs */ overflow: hidden; /* Assure les coins arrondis */ } .specialty-tag { background: linear-gradient(135deg, var(--bg-secondary) 0%, white 100%); border: 1px solid var(--border); padding: 0.25rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 500; color: var(--text-primary); } .top-coach-footer .btn-small { flex: 1; padding: 0.625rem 0.75rem; font-size: 0.8rem; font-weight: 600; } /* Animations */ @keyframes goldGlow { from { box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); } to { box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5); } } @keyframes championPulse { from { transform: scale(1); } to { transform: scale(1.05); } } /* Responsive pour les top coaches */ @media (max-width: 1200px) { .coaches-carousel { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } @media (max-width: 768px) { .coaches-carousel { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .top-coach-card { margin-bottom: 1rem; } .top-coach-header { padding: 0.875rem 0.875rem 0.625rem; } .top-coach-avatar { width: 50px; height: 50px; } .top-coach-name { font-size: 1rem; } .top-coach-stats { gap: 0.5rem; } .top-coach-body { padding: 0.875rem; } .top-coach-footer { padding: 0.625rem 0.875rem 0.875rem; flex-direction: column; } .rank-badge { width: 28px; height: 28px; font-size: 0.75rem; } .special-badge { font-size: 0.65rem; padding: 0.25rem 0.5rem; } } @media (max-width: 480px) { .coaches-carousel { grid-template-columns: 1fr; gap: 1rem; } } /* ========== SECTION PARAMÈTRES ========== */ .settings-layout { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto; } .settings-sidebar { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1); height: fit-content; } .settings-nav { display: flex; flex-direction: column; gap: 0.5rem; } .settings-nav-btn { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border: none; background: transparent; border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); text-align: left; width: 100%; } .settings-nav-btn:hover { background: var(--bg-secondary); color: var(--text-primary); } .settings-nav-btn.active { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); color: white; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); } .settings-nav-btn i { font-size: 1rem; width: 20px; } .settings-content { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1); } .settings-panel { display: none; } .settings-panel.active { display: block; } .settings-panel h2 { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); } .settings-form { max-width: 600px; } .settings-form .form-group { margin-bottom: 2rem; } .settings-form label { display: block; font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; } .settings-form input, .settings-form select { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--border); border-radius: 12px; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--bg-secondary); } .settings-form input:focus, .settings-form select:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Options de thème */ .theme-options { display: flex; gap: 1rem; flex-wrap: wrap; } .theme-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; font-weight: 500; } .theme-option:hover { background: white; border-color: var(--accent); } .theme-option input[type="radio"] { margin: 0; width: auto; } .theme-option input[type="radio"]:checked+span { color: var(--accent); font-weight: 600; } /* Toggle switches */ .toggle-switch { display: flex; align-items: center; gap: 1rem; } .toggle-switch input[type="checkbox"] { position: relative; width: 50px; height: 24px; appearance: none; background: var(--border); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .toggle-switch input[type="checkbox"]:checked { background: var(--accent); } .toggle-switch input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .toggle-switch input[type="checkbox"]:checked::before { transform: translateX(26px); } .toggle-switch span { font-size: 0.95rem; color: var(--text-primary); font-weight: 500; } /* Sessions actives */ .sessions-list { display: flex; flex-direction: column; gap: 1rem; } .session-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border); } .session-info strong { display: block; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.25rem; } .session-info span { font-size: 0.85rem; color: var(--text-secondary); } /* Types de notifications */ .notification-types { display: flex; flex-direction: column; gap: 0.75rem; } .checkbox-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .checkbox-item:hover { background: white; border: 1px solid var(--border); } .checkbox-item input[type="checkbox"] { width: auto; margin: 0; } .checkbox-item span { font-size: 0.95rem; color: var(--text-primary); font-weight: 500; } /* Texte d'avertissement */ .warning-text { font-size: 0.9rem; color: var(--error); margin-bottom: 1rem; padding: 1rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border-left: 4px solid var(--error); } /* Responsive pour les paramètres */ @media (max-width: 768px) { .settings-layout { grid-template-columns: 1fr; gap: 1.5rem; } .settings-sidebar { padding: 1rem; } .settings-nav { flex-direction: row; overflow-x: auto; gap: 0.5rem; } .settings-nav-btn { white-space: nowrap; padding: 0.75rem 1rem; font-size: 0.9rem; } .settings-content { padding: 1.5rem; } .theme-options { flex-direction: column; } .session-item { flex-direction: column; align-items: flex-start; gap: 1rem; } } /* Profil */ .profil-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; } .form-grid .form-group { min-width: 0; overflow: hidden; } .form-grid .form-group input, .form-grid .form-group select { max-width: 100%; box-sizing: border-box; } .form-grid .full-width { grid-column: 1 / -1; } .checkbox-group { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius); border: 2px solid var(--border); } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: var(--radius); transition: all 0.2s ease; font-weight: 500; } .checkbox-label:hover { background: rgba(59, 130, 246, 0.1); } .checkbox-label input[type="checkbox"] { width: auto; cursor: pointer; margin: 0; } .section-subtitle { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 2rem 0 1.5rem 0; padding-bottom: 0.75rem; border-bottom: 3px solid var(--accent); display: inline-block; } .form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; padding-top: 2rem; border-top: 2px solid var(--border); } /* Password Match */ .password-match { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; animation: fadeIn 0.3s ease; } .password-match i { font-size: 0.9rem; } /* Responsive Adjustments */ @media (max-width: 480px) { .form-row-auth { grid-template-columns: 1fr; } .password-requirements-list { grid-template-columns: 1fr; } } /* ========== VALIDATION COACH ========== */ .validation-header { margin-bottom: 2rem; } .validation-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .stat-card { background: var(--bg-secondary); padding: 1.5rem; border-radius: var(--radius); border: 2px solid var(--border); display: flex; align-items: center; gap: 1rem; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); transition: var(--transition); } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12); } .stat-card i { font-size: 2.5rem; color: var(--accent); } .stat-info { display: flex; flex-direction: column; } .stat-number { font-size: 2rem; font-weight: 700; color: var(--text-primary); } .stat-label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; } .validation-filters { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .filter-btn { padding: 0.75rem 1.5rem; border: 2px solid var(--border); background: var(--bg-secondary); border-radius: calc(var(--radius) + 4px); font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.3s ease; } .filter-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); } .validation-list { display: flex; flex-direction: column; gap: 1.5rem; } .validation-item { background: var(--bg-secondary); border: 2px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); transition: var(--transition); } .validation-item:hover { box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12); transform: translateY(-2px); } .validation-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .validation-item-info { display: flex; align-items: center; gap: 1rem; } .validation-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); } .validation-avatar-placeholder { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-secondary); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.5rem; } .validation-details h3 { margin: 0 0 0.25rem 0; color: var(--text-primary); font-size: 1.25rem; } .validation-details p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; } .validation-status { padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 0.85rem; } .validation-status.pending { background: #FEF3C7; color: #92400E; } .validation-status.approved { background: #D1FAE5; color: #065F46; } .validation-status.rejected { background: #FEE2E2; color: #991B1B; } .validation-item-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .validation-field { display: flex; flex-direction: column; gap: 0.25rem; } .validation-field-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; } .validation-field-value { font-size: 1rem; color: var(--text-primary); font-weight: 500; } .validation-item-actions { display: flex; gap: 1rem; justify-content: flex-end; } .validation-item-actions button { min-width: 120px; } .profil-sidebar { background: var(--bg-secondary); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; height: fit-content; } .profil-avatar { position: relative; width: 150px; height: 150px; margin: 0 auto 1.5rem; cursor: pointer; } .profil-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .btn-upload { position: relative; cursor: pointer; background: rgba(168, 85, 247, 0.8); color: white; border: 2px solid rgba(255, 255, 255, 0.3); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .btn-upload:hover { background: rgba(168, 85, 247, 1); transform: scale(1.1); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5); } .profil-badges { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .profil-content { background: var(--bg-secondary); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); } /* Admin */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .admin-card { background: white; padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .admin-stat { font-size: 2.5rem; font-weight: 800; color: var(--primary); margin: 1rem 0; } /* Modals */ .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(5px); } .modal.active { display: flex; animation: fadeIn 0.3s; } /* Modales Ultra-Premium */ .modal-content { background: linear-gradient(135deg, white 0%, #f8fafc 100%); border-radius: calc(var(--radius) + 6px); max-width: 650px; width: 95%; max-height: 90vh; overflow-y: auto; position: relative; animation: slideUp 0.3s; padding: 2rem; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2); border: 1px solid rgba(59, 130, 246, 0.1); } .modal-large { max-width: 700px; max-height: 80vh; } .coach-modal-premium { background: white; padding: 0; overflow-y: auto; max-height: 90vh; } .coach-modal-premium #coachDetails { padding: 2rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%); } /* Section Avis Premium */ .coach-reviews-section { background: var(--bg-secondary); padding: 2rem; border-top: 2px solid rgba(59, 130, 246, 0.1); } .reviews-title { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .reviews-title i { color: var(--secondary); } .reviews-stats { display: flex; justify-content: space-around; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.5rem; background: white; border-radius: calc(var(--radius) + 4px); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05); } .stat-item { text-align: center; min-width: 80px; } .stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 0.25rem; } .stat-label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; } .reviews-list { display: flex; flex-direction: row; overflow-x: auto; gap: 1rem; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; } .reviews-list::-webkit-scrollbar { height: 6px; } .reviews-list::-webkit-scrollbar-track { background: transparent; } .reviews-list::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 3px; } .reviews-list::-webkit-scrollbar-thumb:hover { background: var(--primary); } .review-card { background: hsl(215 25% 15%); padding: 0.875rem; border-radius: 10px; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(139, 92, 246, 0.3); min-width: 260px; max-width: 300px; flex-shrink: 0; } .review-card:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(139, 92, 246, 0.5); border-color: rgba(139, 92, 246, 0.5); } .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .review-author { display: flex; align-items: center; gap: 0.75rem; } .review-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.875rem; } .review-author-info { display: flex; flex-direction: column; } .review-author-name { font-weight: 600; color: hsl(271 91% 70%); font-size: 0.85rem; } .review-date { font-size: 0.75rem; color: hsl(215 20% 70%); } .review-content { font-size: 0.85rem; line-height: 1.5; color: hsl(215 20% 85%); } /* Responsive pour les avis */ @media (max-width: 768px) { .reviews-stats { flex-direction: column; gap: 0.75rem; } .stat-item { min-width: auto; } .stat-value { font-size: 1.5rem; } .review-card { min-width: 260px; max-width: 280px; } .review-avatar { width: 28px; height: 28px; } } /* ============================================ NOUVEAU DESIGN MODAL COACH ============================================ */ .coach-modal-new { width: 100%; animation: fadeInUp 0.4s ease-out; } /* Header avec bannière */ .coach-modal-header-new { position: relative; margin: -2rem -2rem 1rem -2rem; border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0; overflow: hidden; } .coach-modal-banner { height: 100px; background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(271 91% 55%) 50%, hsl(271 91% 45%) 100%); position: relative; } .coach-modal-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.3; } .coach-modal-avatar-container { position: relative; display: flex; justify-content: center; margin-top: -45px; z-index: 2; } .coach-modal-avatar { width: 90px; height: 90px; border-radius: 50%; border: 4px solid hsl(215 25% 15%); box-shadow: 0 0 20px rgba(139, 92, 246, 0.6), 0 8px 24px rgba(0, 0, 0, 0.3); object-fit: cover; background: hsl(215 25% 15%); transition: transform 0.3s ease; } .coach-modal-avatar:hover { transform: scale(1.05); } .coach-verified-badge { position: absolute; bottom: 5px; right: calc(50% - 60px + 5px); width: 32px; height: 32px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.875rem; border: 3px solid white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } /* Body */ .coach-modal-body-new { padding: 0; } /* Section titre */ .coach-modal-title-section { text-align: center; margin-bottom: 1rem; } .coach-modal-name-new { font-size: 1.75rem; font-weight: 800; background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(271 91% 45%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.375rem; line-height: 1.2; } .coach-modal-elo-new { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%); border-radius: 20px; color: hsl(271 91% 65%); font-weight: 700; font-size: 1rem; margin-bottom: 1rem; } .coach-modal-elo-new i { font-size: 1.1rem; } .coach-modal-badges-new { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .coach-badge-new { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } .coach-badge-new:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .coach-badge-verified { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .coach-badge-top { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } /* Rating */ .coach-modal-rating-new { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.25rem; padding: 0.75rem; background: hsl(215 25% 15%); border-radius: 12px; box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); border: 1px solid rgba(139, 92, 246, 0.3); } .coach-rating-stars-new { display: flex; align-items: center; gap: 0.5rem; color: #fbbf24; font-size: 1.25rem; } .coach-rating-value-new { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(271 91% 45%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-left: 0.5rem; } .coach-rating-count-new { color: hsl(215 20% 75%); font-size: 0.875rem; font-weight: 500; } /* Stats Grid */ .coach-stats-grid-new { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; } .coach-stat-card-new { background: hsl(215 25% 15%); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; padding: 0.875rem; display: flex; align-items: center; gap: 0.75rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); } .coach-stat-card-new:hover { transform: translateY(-2px); border-color: hsl(271 91% 65%); box-shadow: 0 0 25px rgba(139, 92, 246, 0.5); } .coach-stat-icon-new { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white; flex-shrink: 0; } .coach-stat-icon-price { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .coach-stat-icon-lang { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } .coach-stat-icon-location { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .coach-stat-icon-mode { background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(271 91% 55%) 100%); } .coach-stat-content-new { flex: 1; min-width: 0; } .coach-stat-value-new { font-size: 0.95rem; font-weight: 700; color: hsl(215 20% 90%); margin-bottom: 0.125rem; word-break: break-word; } .coach-stat-label-new { font-size: 0.75rem; color: hsl(215 20% 70%); font-weight: 500; } .coach-stat-sublabel-new { font-size: 0.7rem; color: hsl(215 20% 70%); margin-top: 0.125rem; } /* Sections */ .coach-section-new { margin-bottom: 1.25rem; } .coach-section-title-new { font-size: 1.1rem; font-weight: 700; color: hsl(215 20% 90%); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .coach-section-title-new i { color: hsl(271 91% 65%); font-size: 1rem; } .coach-bio-text-new { color: hsl(215 20% 80%); line-height: 1.6; font-size: 0.875rem; background: hsl(215 25% 15%); padding: 1rem; border-radius: 10px; border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); } /* Spécialités */ .coach-specialties-grid-new { display: flex; flex-wrap: wrap; gap: 0.5rem; } .coach-specialty-tag-new { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; background: hsl(215 25% 15%); border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 16px; color: hsl(271 91% 70%); font-weight: 600; font-size: 0.8rem; transition: all 0.2s ease; box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); } .coach-specialty-tag-new:hover { background: hsl(215 25% 18%); border-color: hsl(271 91% 65%); box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); transform: translateY(-1px); } .coach-specialty-tag-new i { font-size: 0.75rem; color: hsl(271 91% 65%); } /* Actions */ .coach-modal-actions-new { display: flex; gap: 0.75rem; margin: 1.5rem 0; } .btn-coach-action-new { flex: 1; padding: 0.875rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); } .btn-coach-action-new:not(.disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .btn-coach-action-new:not(.disabled):active { transform: translateY(0); } .btn-coach-primary-new { background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(271 91% 55%) 100%); color: white; } .btn-coach-primary-new:not(.disabled):hover { background: linear-gradient(135deg, hsl(271 91% 55%) 0%, hsl(271 91% 45%) 100%); box-shadow: 0 0 25px rgba(139, 92, 246, 0.6); } .btn-coach-secondary-new { background: hsl(215 25% 15%); color: hsl(271 91% 65%); border: 1px solid hsl(271 91% 65%); } .btn-coach-secondary-new:not(.disabled):hover { background: hsl(271 91% 65%); color: white; box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } .btn-coach-action-new.disabled { opacity: 0.5; cursor: not-allowed; background: hsl(215 20% 90%); color: hsl(215 20% 65%); border: 2px solid hsl(215 20% 85%); } /* Section Avis Nouvelle */ .coach-reviews-section-new { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(139, 92, 246, 0.3); } .reviews-stats-new { display: flex; justify-content: space-around; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 1rem; background: hsl(215 25% 15%); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); } .stat-item-new { text-align: center; min-width: 80px; } .stat-value-new { font-size: 1.75rem; font-weight: 800; background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(271 91% 45%) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.125rem; } .stat-label-new { font-size: 0.8rem; color: hsl(215 20% 75%); font-weight: 500; } .reviews-list-new { display: flex; flex-direction: row; overflow-x: auto; gap: 1rem; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: hsl(271 91% 65%) transparent; } .reviews-list-new::-webkit-scrollbar { height: 6px; } .reviews-list-new::-webkit-scrollbar-track { background: transparent; } .reviews-list-new::-webkit-scrollbar-thumb { background: hsl(271 91% 65%); border-radius: 3px; } .reviews-list-new::-webkit-scrollbar-thumb:hover { background: hsl(271 91% 55%); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 768px) { .coach-modal-name-new { font-size: 1.5rem; } .coach-stats-grid-new { grid-template-columns: 1fr; } .coach-modal-actions-new { flex-direction: column; } .coach-modal-avatar { width: 100px; height: 100px; } .coach-modal-banner { height: 120px; } .coach-modal-avatar-container { margin-top: -50px; } } .review-date { font-size: 0.85rem; color: var(--text-secondary); } .review-rating { display: flex; gap: 0.25rem; } .review-rating i { color: var(--secondary); font-size: 0.9rem; } .review-content { color: var(--text-primary); line-height: 1.6; font-size: 0.95rem; } /* Mode Toggle Group */ .mode-toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .mode-toggle-btn { padding: 0.75rem; background: white; border: 2px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .mode-toggle-btn:hover { border-color: var(--accent); background: rgba(59, 130, 246, 0.05); } .mode-toggle-btn.active { background: linear-gradient(135deg, var(--accent), var(--primary)); border-color: var(--accent); color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .mode-toggle-btn i { font-size: 1rem; } /* Tag Select Premium pour Langues et Spécialités */ .tag-select-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .tag-select-item { position: relative; cursor: pointer; } .tag-select-item input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .tag-select-item span { display: inline-block; padding: 0.625rem 1rem; background: linear-gradient(135deg, white 0%, #f8fafc 100%); border: 2px solid var(--border); border-radius: 24px; font-size: 0.9rem; font-weight: 500; color: var(--text-primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; } .tag-select-item:hover span { border-color: var(--accent); background: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); } .tag-select-item input[type="checkbox"]:checked+span { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-color: var(--accent); color: white; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); transform: translateY(-1px); } .tag-select-item input[type="checkbox"]:checked+span:hover { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition); z-index: 1; } .modal-close:hover { color: var(--text-primary); } /* Auth Modal */ .auth-container { padding: 1.5rem; color: var(--text-primary); } .auth-tabs { display: flex; gap: 0; margin-bottom: 2rem; border-bottom: 2px solid rgba(168, 85, 247, 0.2); position: relative; } .auth-tab { flex: 1; background: none; border: none; padding: 1rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; position: relative; transition: all 0.3s ease; font-size: 1rem; text-align: center; /* Fix click area */ height: 100%; display: flex; align-items: center; justify-content: center; z-index: 5; } .auth-tab:hover { color: var(--primary); background: rgba(168, 85, 247, 0.05); } .auth-tab.active { color: var(--primary); } .auth-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary); box-shadow: 0 -2px 10px rgba(168, 85, 247, 0.5); } .auth-panel { display: none; animation: fadeIn 0.3s ease; } .auth-panel.active { display: block; } .auth-panel h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem; background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn-google { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.875rem 1.5rem; border-radius: 12px; font-weight: 600; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transition: all 0.3s ease; } .btn-google:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .divider { text-align: center; margin: 1.5rem 0; color: var(--text-secondary); position: relative; font-size: 0.9rem; } .divider span { background: var(--bg-secondary); /* Assurez-vous que cela correspond à la couleur de fond du modal */ padding: 0 10px; position: relative; z-index: 1; } .divider::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); z-index: 0; } .forgot-password { display: block; text-align: center; margin-top: 1.5rem; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .forgot-password:hover { color: var(--primary); text-decoration: underline; } /* Form Row pour nom/prénom */ .form-row-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0; } /* Inputs modernes */ .auth-panel .form-group input { width: 100%; padding: 0.875rem 1.25rem; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 12px; color: white; font-size: 0.95rem; transition: all 0.3s ease; box-sizing: border-box; } .auth-panel .form-group input:focus { outline: none; border-color: var(--primary); background: rgba(15, 23, 42, 0.8); box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15); } /* Bouton principal avec animation */ .btn-primary-auth { width: 100%; background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); border: none; padding: 1rem; border-radius: 12px; font-weight: 600; color: white; cursor: pointer; margin-top: 1.5rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3); position: relative; overflow: hidden; } .btn-primary-auth:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4); } .btn-primary-auth::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .btn-primary-auth:hover::after { transform: translateX(100%); } /* Exigences mot de passe */ .password-requirements-list { margin-top: 0.75rem; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.8rem; } .requirement-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); transition: all 0.3s ease; } .requirement-item i { font-size: 0.6rem; transition: all 0.3s ease; } .requirement-item.valid { color: var(--success); } .requirement-item.valid i { color: var(--success); transform: scale(1.2); } /* Checkbox personnalisée */ .checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.5rem; } .checkbox-label input[type="checkbox"] { appearance: none; width: 20px; height: 20px; border: 2px solid rgba(168, 85, 247, 0.4); border-radius: 6px; background: rgba(15, 23, 42, 0.6); position: relative; cursor: pointer; transition: all 0.2s ease; } .checkbox-label input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); } .checkbox-label input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold; } /* Booking */ .booking-container { display: block; max-width: 600px; margin: 0 auto; } .booking-coach-info { background: linear-gradient(135deg, #EFF6FF 0%, white 100%); border: 2px solid var(--accent); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; } .booking-steps { display: flex; flex-direction: column; gap: 1rem; } .booking-step { background: white; border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: all 0.3s ease; } .booking-step.active { border-color: var(--accent); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15); } .booking-step h3 { margin: 0 0 0.75rem 0; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; } .booking-step h3 i { color: var(--accent); } .booking-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; /* Réduit de 0.5rem */ } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); /* Réduit de 2px à 1px */ border-radius: var(--radius); cursor: pointer; transition: all 0.3s ease; font-weight: 500; /* Réduit de 600 */ font-size: 0.875rem; /* Ajout pour réduire la taille */ background: white; padding: 0.25rem; /* Ajout de padding réduit */ } .calendar-day:hover:not(.disabled), .calendar-day.simulated-hover { border-color: var(--accent); background: #EFF6FF; } .calendar-day.selected { background: var(--accent); color: white; border-color: var(--accent); } .calendar-day.disabled { opacity: 0.3; cursor: not-allowed; background: var(--bg-secondary); } .calendar-day.today { border-color: var(--secondary); } .time-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; align-items: center; } .time-slot { padding: 0.75rem; border: 2px solid var(--border); border-radius: var(--radius); text-align: center; cursor: pointer; transition: all 0.3s ease; font-weight: 600; background: white; } .time-slot:hover:not(.disabled), .time-slot.simulated-hover { border-color: var(--accent) !important; background: #EFF6FF !important; transform: scale(1.05); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 10; } .time-slot.selected { background: var(--accent); color: white; border-color: var(--accent); } .time-slot.disabled { opacity: 0.3; cursor: not-allowed; background: var(--bg-secondary); } .mode-selection { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .mode-option { border: 2px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; background: white; position: relative; overflow: hidden; } .mode-option:hover { border-color: var(--accent); background: #EFF6FF; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); } .mode-option.selected { border-color: var(--accent) !important; background: linear-gradient(135deg, #EFF6FF 0%, white 100%) !important; box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25) !important; transform: translateY(-2px) !important; } .mode-option.selected::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, var(--accent) 0%, #3B82F6 100%) !important; } .mode-option.selected i { color: var(--accent) !important; transform: scale(1.1) !important; } .mode-option.selected h4 { color: var(--accent) !important; } .mode-option.selected p { color: var(--text-primary) !important; } .location-input { margin-top: 1rem; } .location-input label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); } .location-input input { width: 100%; padding: 0.75rem; border: 2px solid var(--border); border-radius: var(--radius); font-size: 1rem; } .booking-summary { background: var(--bg-secondary); padding: 1.5rem; border-radius: var(--radius); height: fit-content; position: sticky; top: 2rem; } .booking-summary h3 { margin-top: 0; } .empty-summary { text-align: center; color: var(--text-secondary); padding: 2rem 0; } .summary-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); } .summary-label { font-weight: 600; color: var(--text-secondary); } .summary-value { font-weight: 700; color: var(--text-primary); } .summary-total { display: flex; justify-content: space-between; padding: 1rem 0; font-size: 1.25rem; font-weight: 700; color: var(--accent); } .booking-summary button { margin-top: 1rem; } .booking-summary h3 { margin-bottom: 1rem; } /* Toast Notifications */ .toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 3000; display: flex; flex-direction: column; gap: 1rem; } .toast { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); padding: 1rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 1rem; min-width: 300px; animation: slideInRight 0.3s; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast.success { border-left: 4px solid var(--secondary); } .toast.error { border-left: 4px solid var(--danger); } .toast.info { border-left: 4px solid var(--primary); } .toast-icon { font-size: 1.5rem; } .toast.success .toast-icon { color: var(--secondary); } .toast.error .toast-icon { color: var(--danger); } .toast.info .toast-icon { color: var(--primary); } .toast-message { flex: 1; } /* Responsive */ @media (max-width: 1024px) { .search-layout { grid-template-columns: 1fr; } .filters-panel { position: static; } .messages-layout { grid-template-columns: 1fr; } .conversations-list { display: none; } .profil-layout { grid-template-columns: 1fr; } } @media (max-width: 1200px) { .coaches-grid { grid-template-columns: repeat(2, 1fr); } } /* Styles pour le nouveau calendrier fonctionnel */ .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; /* Réduit de 0.75rem */ padding: 0.25rem; } .calendar-header h4 { margin: 0; font-size: 0.875rem; /* Réduit de 1rem */ color: var(--text-primary); } .btn-nav-calendar { background: none; border: none; padding: 0.25rem; width: 2rem; height: 2rem; color: var(--accent); font-size: 0.875rem; /* Réduit de 1rem */ cursor: pointer; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .btn-nav-calendar:hover { background: var(--bg-secondary); } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; /* Ajusté pour correspondre au calendrier */ margin-bottom: 0.5rem; text-align: center; font-weight: 500; /* Réduit de 600 */ color: var(--text-secondary); font-size: 0.75rem; /* Réduit de 0.8rem */ } .booking-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; /* Augmenté légèrement de 0.25rem */ margin-bottom: 0.75rem; /* Réduit de 1rem */ } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 0.375rem; /* Réduit de 6px */ cursor: pointer; transition: all 0.3s ease; font-weight: 500; /* Réduit de 600 */ font-size: 0.875rem; /* Ajout pour réduire la taille */ padding: 0.25rem; /* Ajout de padding réduit */ background: white; font-size: 0.85rem; } .calendar-day:hover:not(.disabled) { border-color: var(--accent); background: #EFF6FF; transform: scale(1.02); } .calendar-day.selected { background: var(--accent); color: white; border-color: var(--accent); } .calendar-day.disabled { opacity: 0.3; cursor: not-allowed; background: var(--bg-secondary); } .calendar-day.today { border-color: var(--secondary); font-weight: 700; } .time-slots-container { max-height: 350px; overflow-y: auto; overflow-x: hidden; padding: 0.75rem; background: #f8fafc; border-radius: 8px; border: 1px solid var(--border); } .time-slots-organized { display: flex; flex-direction: row; gap: 1rem; overflow-x: auto; overflow-y: hidden; padding: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-secondary); -webkit-overflow-scrolling: touch; } .time-slots-organized::-webkit-scrollbar { height: 8px; } .time-slots-organized::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; } .time-slots-organized::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .time-slots-organized::-webkit-scrollbar-thumb:hover { background: #3B82F6; } .time-section { background: white; border-radius: 8px; padding: 0.75rem; border: 1px solid var(--border); min-width: 280px; flex-shrink: 0; } .time-section-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); white-space: nowrap; } .time-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; align-items: center; } /* Styles pour time-slot définis dans .time-slots-grid (plus bas dans le fichier) */ .time-slot.selected { background: var(--accent); color: white; border-color: var(--accent); } .time-slot.disabled { opacity: 0.3; cursor: not-allowed; background: var(--bg-secondary); } /* Styles pour les cartes de proposition et paiement */ /* Styles pour les messages en mode chat */ .messages-container { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; } .message-wrapper { display: flex; max-width: 75%; animation: fadeIn 0.3s ease; } .message-sent { align-self: flex-end; margin-left: auto; } .message-received { align-self: flex-start; margin-right: auto; } .message-bubble { background: var(--bg-secondary); padding: 0.75rem 1rem; border-radius: 16px; position: relative; word-wrap: break-word; } .message-sent .message-bubble { background: linear-gradient(135deg, var(--accent) 0%, #3B82F6 100%); color: white; border-bottom-right-radius: 4px; } .message-received .message-bubble { background: white; border: 1px solid var(--border); color: var(--text-primary); border-bottom-left-radius: 4px; } .message-time { font-size: 0.7rem; opacity: 0.7; margin-top: 0.25rem; text-align: right; } .proposal-card { background: hsl(215, 25%, 15%); border: 2px solid rgba(168, 85, 247, 0.3); border-radius: 8px; padding: 0.75rem; margin: 0; min-width: 250px; max-width: 300px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .proposal-card.proposal-accepted { border-color: #a855f7; background: hsl(215, 25%, 15%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.2); } .proposal-card.proposal-rejected { border-color: #ef4444; background: hsl(215, 25%, 15%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(239, 68, 68, 0.2); } .proposal-card h4 { margin: 0 0 0.5rem 0; color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; } .proposal-details { background: hsl(215, 25%, 18%); padding: 0.5rem; border-radius: 6px; margin-bottom: 0.5rem; border: 1px solid rgba(168, 85, 247, 0.2); } .proposal-details p { margin: 0.25rem 0; color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; } .proposal-price { font-size: 1rem; color: #a855f7; font-weight: 700; margin-top: 0.5rem !important; padding-top: 0.5rem; border-top: 1px solid rgba(168, 85, 247, 0.2); } .proposal-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .btn-accept, .btn-reject { flex: 1; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.85rem; min-width: 100px; } .btn-accept { background: linear-gradient(135deg, var(--success) 0%, #059669 100%); color: white; } .btn-accept:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); } .btn-reject { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; } .btn-reject:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); } /* Zone de refus */ .rejection-section { width: 100%; margin-top: 0.5rem; padding: 0.75rem; background: rgba(239, 68, 68, 0.05); border-radius: 6px; border: 1px solid rgba(239, 68, 68, 0.2); animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; max-height: 0; padding: 0; } to { opacity: 1; max-height: 200px; padding: 0.75rem; } } .rejection-section textarea { width: 100%; min-height: 60px; padding: 0.5rem; border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 4px; font-size: 0.85rem; font-family: inherit; resize: vertical; margin-bottom: 0.5rem; transition: all 0.3s ease; } .rejection-section textarea:focus { outline: none; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .rejection-section textarea::placeholder { color: rgba(107, 114, 128, 0.6); } .rejection-actions { display: flex; gap: 0.5rem; } .btn-confirm-reject { flex: 1; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.85rem; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; } .btn-confirm-reject:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); } .btn-cancel-reject { flex: 1; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.85rem; background: white; color: var(--text-primary); } .btn-cancel-reject:hover { background: var(--bg-secondary); transform: translateY(-2px); } .proposal-status { text-align: center; margin-top: 0.5rem; } .status-paid { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 15px; font-weight: 600; font-size: 0.8rem; } .status-pending { background: #FEF3C7; color: #92400E; } .status-accepted { background: #D1FAE5; color: #065F46; } .payment-card { background: linear-gradient(135deg, #D1FAE5 0%, white 100%); border: 2px solid var(--success); border-radius: 8px; padding: 0.75rem; margin: 0.5rem 0; text-align: center; max-width: 300px; } .payment-card h4 { margin: 0 0 0.5rem 0; color: var(--success); font-size: 0.95rem; } .btn-payment { background: linear-gradient(135deg, var(--success) 0%, #059669 100%); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin: 0.5rem 0; transition: all 0.3s ease; } .btn-payment:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); } .payment-info { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; } /* Nouveaux styles pour la sélection de plage horaire */ .time-slots-title { text-align: center; margin-bottom: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; } .time-slots-title h4 { margin: 0 0 0.25rem 0; color: var(--text-primary); font-size: 1rem; } .time-slots-title p { margin: 0; color: var(--text-secondary); font-size: 0.85rem; } .time-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 0.5rem; justify-items: stretch; padding: 0.25rem; } .time-slots-grid .time-slot { min-width: 70px; padding: 0.6rem 0.5rem; font-size: 0.85rem; border: 2px solid var(--border); border-radius: 6px; text-align: center; cursor: pointer; transition: all 0.2s ease; font-weight: 600; background: white; white-space: nowrap; } .time-slots-grid .time-slot:hover:not(.disabled) { border-color: var(--accent); background: #EFF6FF; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .time-range-display { background: linear-gradient(135deg, #EFF6FF 0%, white 100%); border: 2px solid var(--accent); border-radius: 12px; padding: 1rem; text-align: center; margin-top: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .selection-info { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } #selectedRange { font-weight: 600; color: var(--text-primary); font-size: 1rem; padding: 0.4rem 0.8rem; background: white; border-radius: 6px; border: 1px solid var(--border); min-width: 160px; } #selectedDuration { font-weight: 600; color: var(--accent); font-size: 1.1rem; padding: 0.4rem 0.8rem; background: linear-gradient(135deg, var(--accent) 0%, #3B82F6 100%); color: white; border-radius: 8px; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); min-width: 200px; } /* Styles pour les créneaux sélectionnés */ .time-slot.selected-start { background: linear-gradient(135deg, var(--accent) 0%, #3B82F6 100%); color: white; border-color: var(--accent); transform: scale(1.05); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); font-weight: 700; } .time-slot.selected-end { background: linear-gradient(135deg, var(--success) 0%, #10B981 100%); color: white; border-color: var(--success); transform: scale(1.05); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); font-weight: 700; } .time-slot.disabled-after-start { opacity: 0.3; cursor: not-allowed; background: var(--bg-secondary); transform: none; } .time-slot.selected-range { background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%); color: white; border-color: var(--accent); font-weight: 700; } /* Cette media query est maintenant gérée dans la section OPTIMISATIONS MOBILE */ /* Animations supplémentaires */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .feature-icon { animation: float 3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .status-dot { animation: pulse 2s ease-in-out infinite; } /* Animation pour réservation annulée */ @keyframes shrinkAndMove { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(0.6) translateY(-50px); opacity: 0; } } .booking-card.cancelling { animation: shrinkAndMove 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .booking-card.cancelled-anim { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Scrollbar personnalisé */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* Transitions fluides */ * { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } /* Effet de brillance sur survol */ .btn-primary::before, .btn-search::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .btn-primary:hover::before, .btn-search:hover::before { left: 100%; } .btn-primary, .btn-search { position: relative; overflow: hidden; } /* ========== STYLES MESSAGES IPHONE ========== */ /* Séparateur de date */ .date-separator { text-align: center; margin: 1rem 0; position: relative; background: var(--bg-primary); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; display: inline-block; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* Rangées de messages (comme iMessage) */ .message-row { display: flex; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.25rem; max-width: 100%; flex-wrap: wrap; } .message-row.sent { justify-content: flex-end; } .message-row.received { justify-content: flex-start; } .message-row .message-bubble { margin-right: 0.5rem; } .message-row .message-time-side { margin-left: 0.25rem; margin-right: 0.25rem; } /* Bulles de messages */ .message-bubble { position: relative; padding: 0.5rem 0.75rem; border-radius: 16px; margin-bottom: 0.25rem; max-width: 100%; word-wrap: break-word; animation: messageSlideIn 0.3s ease-out; } .message-bubble.sent { background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%); color: white; border-bottom-right-radius: 4px; } .message-bubble.received { background: #F2F2F7; color: #000; border-bottom-left-radius: 4px; } .message-bubble:last-child { margin-bottom: 0; } /* Heure sur le côté des messages (comme iMessage) */ .message-time-side { font-size: 0.7rem; color: var(--text-secondary); align-self: flex-end; margin-bottom: 0.25rem; white-space: nowrap; opacity: 1; transition: opacity 0.2s ease; } /* Texte du message */ .message-text { font-size: 0.9rem; line-height: 1.3; margin: 0; word-wrap: break-word; } /* Métadonnées du message */ .message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.75rem; } .message-bubble.sent .message-meta { color: rgba(255, 255, 255, 0.7); } .message-bubble.received .message-meta { color: var(--text-secondary); } .message-time { font-size: 0.7rem; opacity: 0.8; } /* Statuts des messages */ .message-status { font-size: 0.7rem; opacity: 0.8; font-weight: 500; } .message-status.sent { color: rgba(255, 255, 255, 0.7); } .message-status.delivered { color: rgba(255, 255, 255, 0.9); } .message-status.read { color: #4FC3F7; } /* Animation d'apparition des messages */ @keyframes messageSlideIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Amélioration du conteneur de messages */ .messages-container { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100%; } /* Responsive pour les messages */ @media (max-width: 768px) { .message-group { max-width: 85%; } .message-bubble { padding: 0.6rem 0.8rem; font-size: 0.95rem; } .messages-container { padding: 0.75rem; } } /* ========== MODAL DE COMMENTAIRE DE REFUS ========== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; z-index: 2000; } .modal-overlay.active { display: flex; } .modal-content { background: var(--bg-primary); border-radius: 12px; box-shadow: var(--shadow-xl); max-width: 650px; width: 95%; max-height: 90vh; overflow-y: auto; overflow-x: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid var(--border); } .modal-header h3 { margin: 0; color: var(--text-primary); font-size: 1.2rem; font-weight: 600; } .modal-body { padding: 1.5rem; } .modal-body p { margin: 0 0 1rem 0; color: var(--text-secondary); line-height: 1.5; } .modal-body textarea { width: 100%; min-height: 100px; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; line-height: 1.5; resize: vertical; transition: var(--transition); } .modal-body textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .modal-body textarea::placeholder { color: var(--text-muted); } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.5rem; border-top: 1px solid var(--border); } .modal-footer .btn-secondary, .modal-footer .btn-danger { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; transition: var(--transition); } .modal-footer .btn-secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); } .modal-footer .btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); } .modal-footer .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; border: none; } .modal-footer .btn-danger:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* ========== BOUTON ANNULER RÉSERVATION ========== */ .btn-cancel { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: none; border-radius: 8px; padding: 0.75rem 1.25rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); position: relative; overflow: hidden; min-width: 140px; } .btn-cancel::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-cancel:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); } .btn-cancel:hover::before { left: 100%; } .btn-cancel:active { transform: translateY(0) scale(0.98); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); } /* ========== ANIMATION DE DISPARITION DE LA CARTE ========== */ .proposal-card { background: hsl(215, 25%, 15%); border-radius: calc(var(--radius) + 4px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); border: 1px solid rgba(168, 85, 247, 0.3); padding: 1.5rem; margin: 1rem 0; min-width: 250px; max-width: 300px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } /* Animation de disparition de la carte */ .proposal-card.cancelling { animation: cardDisappear 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; pointer-events: none; position: relative; z-index: 1000; } /* Effet de vibration avant disparition */ .proposal-card.cancelling::after { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: linear-gradient(45deg, rgba(245, 158, 11, 0.3) 0%, rgba(239, 68, 68, 0.3) 25%, rgba(59, 130, 246, 0.3) 50%, rgba(16, 185, 129, 0.3) 75%, rgba(245, 158, 11, 0.3) 100%); border-radius: 25px; animation: particleGlow 1.2s ease-out forwards; z-index: -1; } @keyframes particleGlow { 0% { opacity: 0; transform: scale(1); filter: blur(0px); } 20% { opacity: 0.8; transform: scale(1.1); filter: blur(2px); } 40% { opacity: 0.6; transform: scale(1.2); filter: blur(4px); } 60% { opacity: 0.4; transform: scale(1.3); filter: blur(6px); } 80% { opacity: 0.2; transform: scale(1.4); filter: blur(8px); } 100% { opacity: 0; transform: scale(1.5); filter: blur(10px); } } @keyframes cardDisappear { 0% { transform: scale(1) rotate(0deg) translateY(0) translateX(0); opacity: 1; filter: blur(0px) brightness(1) saturate(1); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); border-radius: 20px; } 8% { transform: scale(1.15) rotate(5deg) translateY(-8px) translateX(3px); opacity: 0.95; filter: blur(0px) brightness(1.3) saturate(1.2); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.2), 0 0 20px rgba(245, 158, 11, 0.3); border-radius: 25px; } 16% { transform: scale(1.1) rotate(-3deg) translateY(-5px) translateX(-2px); opacity: 0.9; filter: blur(0px) brightness(1.1) saturate(1.1); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18), 0 0 15px rgba(245, 158, 11, 0.2); border-radius: 22px; } 25% { transform: scale(1.05) rotate(8deg) translateY(-2px) translateX(4px); opacity: 0.8; filter: blur(0.5px) brightness(0.9) saturate(0.9); box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15), 0 0 10px rgba(245, 158, 11, 0.15); border-radius: 20px; } 35% { transform: scale(0.95) rotate(-6deg) translateY(3px) translateX(-3px); opacity: 0.7; filter: blur(1px) brightness(0.8) saturate(0.8); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 0 8px rgba(245, 158, 11, 0.1); border-radius: 18px; } 45% { transform: scale(0.85) rotate(12deg) translateY(8px) translateX(5px); opacity: 0.6; filter: blur(1.5px) brightness(0.7) saturate(0.7); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.1), 0 0 6px rgba(245, 158, 11, 0.08); border-radius: 16px; } 55% { transform: scale(0.7) rotate(-10deg) translateY(15px) translateX(-4px); opacity: 0.5; filter: blur(2px) brightness(0.6) saturate(0.6); box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08), 0 0 4px rgba(245, 158, 11, 0.06); border-radius: 14px; } 65% { transform: scale(0.55) rotate(15deg) translateY(25px) translateX(6px); opacity: 0.4; filter: blur(3px) brightness(0.5) saturate(0.5); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 0 3px rgba(245, 158, 11, 0.04); border-radius: 12px; } 75% { transform: scale(0.4) rotate(-12deg) translateY(35px) translateX(-5px); opacity: 0.3; filter: blur(4px) brightness(0.4) saturate(0.4); box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04), 0 0 2px rgba(245, 158, 11, 0.03); border-radius: 10px; } 85% { transform: scale(0.25) rotate(8deg) translateY(45px) translateX(3px); opacity: 0.2; filter: blur(5px) brightness(0.3) saturate(0.3); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03), 0 0 1px rgba(245, 158, 11, 0.02); border-radius: 8px; } 95% { transform: scale(0.1) rotate(-5deg) translateY(55px) translateX(-2px); opacity: 0.1; filter: blur(6px) brightness(0.2) saturate(0.2); box-shadow: 0 0px 2px rgba(15, 23, 42, 0.02), 0 0 1px rgba(245, 158, 11, 0.01); border-radius: 6px; } 100% { transform: scale(0.05) rotate(0deg) translateY(65px) translateX(0); opacity: 0; filter: blur(8px) brightness(0.1) saturate(0.1); height: 0; padding: 0; margin: 0; border: none; box-shadow: none; border-radius: 0; } } /* Effet de brillance sur hover */ .proposal-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s ease; pointer-events: none; } .proposal-card:hover::before { left: 100%; } /* ========== BOUTONS DÉSACTIVÉS ========== */ .btn-secondary.disabled, .btn-outline.disabled, .btn-primary.disabled, .btn-kaptur:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; background: #e5e7eb; color: #9ca3af; border-color: #d1d5db; } .btn-secondary.disabled:hover, .btn-outline.disabled:hover, .btn-primary.disabled:hover { transform: none; box-shadow: none; background: #e5e7eb; color: #9ca3af; border-color: #d1d5db; } /* ========== MODAL D'AVIS ========== */ .review-container { padding: 2rem; } .review-form { margin-top: 1.5rem; } .rating-slider-container { padding: 1rem; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border); margin: 1rem 0; } .rating-slider { width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #e2e8f0 0%, var(--secondary) 100%); outline: none; appearance: none; -webkit-appearance: none; margin-bottom: 1rem; } .rating-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary) 0%, #f59e0b 100%); cursor: pointer; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); border: 3px solid white; transition: all 0.2s ease; } .rating-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6); } .rating-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary) 0%, #f59e0b 100%); cursor: pointer; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); border: 3px solid white; transition: all 0.2s ease; } .rating-slider::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6); } .rating-display { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; } .rating-stars { display: flex; gap: 0.2rem; flex-shrink: 0; font-size: 1.2rem; } .rating-stars i { color: #e2e8f0; transition: color 0.2s ease; } .rating-stars i.filled { color: #f59e0b; } .rating-stars i.three-quarter-filled { background: linear-gradient(90deg, #f59e0b 75%, #e2e8f0 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rating-stars i.half-filled { background: linear-gradient(90deg, #f59e0b 50%, #e2e8f0 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rating-stars i.quarter-filled { background: linear-gradient(90deg, #f59e0b 25%, #e2e8f0 25%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rating-value { font-size: 1.2rem; font-weight: 700; color: var(--primary); min-width: 3rem; text-align: center; } .rating-text { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); font-style: italic; } .review-form textarea { width: 100%; padding: 0.75rem; border: 2px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 100px; transition: border-color 0.3s ease; } .review-form textarea:focus { outline: none; border-color: var(--accent); } .form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; } /* Actions des réservations */ .reservation-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .reservation-actions .btn { width: 100%; justify-content: center; } /* Messages d'avis */ .no-reviews-message, .error-message { text-align: center; padding: 2rem; color: var(--text-secondary); } .no-reviews-message i, .error-message i { font-size: 2rem; margin-bottom: 1rem; opacity: 0.5; } .no-reviews-message p, .error-message p { margin: 0; font-style: italic; } /* ========== HISTORIQUE DES OFFRES (COMPACT VERTICAL) ========== */ .modal-content.modal-bids-compact { background: hsl(215, 25%, 15%); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 12px; max-width: 600px; width: 85%; max-height: 80vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.2); overflow: hidden; display: flex; flex-direction: column; } .modal-header.compact-header { padding: 0.75rem 1rem; background: hsl(215, 25%, 18%); border-bottom: 1px solid rgba(168, 85, 247, 0.2); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); flex-shrink: 0; } .modal-header-left { display: flex; align-items: center; gap: 1rem; } .modal-icon-compact { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.95rem; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); } .modal-title-compact { margin: 0; font-size: 1rem; font-weight: 700; color: var(--primary); } .modal-subtitle-compact { margin: 0.15rem 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.75rem; } .modal-header-right { display: flex; align-items: center; gap: 0.75rem; } .sort-dropdown-wrapper { position: relative; } .sort-btn-compact { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: hsl(215, 25%, 18%); border: 1.5px solid rgba(168, 85, 247, 0.3); border-radius: 8px; font-weight: 600; font-size: 0.8rem; color: rgba(255, 255, 255, 0.95); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .sort-btn-compact:hover { border-color: rgba(168, 85, 247, 0.6); background: hsl(215, 25%, 22%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); } .sort-btn-compact i.fa-sort { color: #a855f7; font-size: 0.85rem; } .sort-arrow { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: rgba(255, 255, 255, 0.7); font-size: 0.7rem; } .sort-dropdown-compact { position: absolute; top: calc(100% + 0.5rem); right: 0; background: hsl(215, 25%, 15%); border: 2px solid rgba(168, 85, 247, 0.3); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.2); min-width: 200px; z-index: 1000; display: none; opacity: 0; transform: translateY(-10px) scale(0.95); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .sort-dropdown-compact.show { display: block; opacity: 1; transform: translateY(0) scale(1); animation: dropdownSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes dropdownSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .sort-option-compact { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; background: hsl(215, 25%, 15%); border: none; text-align: left; font-weight: 500; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); color: var(--text-primary); cursor: pointer; transition: all 0.2s ease; position: relative; } .sort-option-compact::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #a855f7; transform: scaleY(0); transition: transform 0.2s ease; } .sort-option-compact:hover { background: hsl(215, 25%, 20%); padding-left: 1.25rem; color: rgba(255, 255, 255, 0.95); transform: translateX(4px); } .sort-option-compact:hover::before { transform: scaleY(1); } .sort-option-compact.active { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(126, 34, 206, 0.15) 100%); color: #a855f7; font-weight: 700; } .sort-option-compact.active::before { transform: scaleY(1); } .sort-option-compact i { color: #a855f7; width: 16px; text-align: center; font-size: 0.85rem; } .sort-option-compact:not(:last-child) { border-bottom: 1px solid rgba(168, 85, 247, 0.2); } .modal-close-compact { background: transparent; border: none; color: #a855f7; font-size: 1.2rem; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .modal-close-compact:hover { color: #9333ea; transform: scale(1.1); background: transparent; } .modal-body-compact { padding: 0; flex: 1; overflow-y: auto; background: hsl(215, 25%, 15%); display: flex; flex-direction: column; } .bids-stats-compact-bar { display: flex; gap: 0.5rem; padding: 0.6rem 1rem; background: white; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .stat-compact-item { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%); border-radius: 8px; font-weight: 600; font-size: 0.7rem; color: var(--primary); transition: all 0.3s ease; } .stat-compact-item.stat-count { flex: 0 0 auto; min-width: fit-content; } .stat-compact-item.stat-price { flex: 1 1 auto; min-width: 0; } .stat-compact-item span { white-space: normal; word-break: break-word; line-height: 1.3; } .stat-compact-item:hover { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%); transform: translateY(-2px); } .stat-compact-item i { color: var(--accent); font-size: 0.75rem; } .bids-list-compact { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .bid-card-compact { background: hsl(215, 25%, 18%); border: 1.5px solid rgba(168, 85, 247, 0.3); border-radius: 10px; padding: 0.75rem 1rem; display: flex; color: rgba(255, 255, 255, 0.95); gap: 0.75rem; align-items: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; animation: bidCardSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 0; transform: translateX(-20px); } @keyframes bidCardSlideIn { to { opacity: 1; transform: translateX(0); } } .bid-card-compact::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border); transition: all 0.3s ease; } .bid-card-compact:hover { transform: translateX(3px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.6); } .bid-card-compact:hover::before { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); width: 4px; } .bid-card-compact.current-lowest { border-color: #a855f7; background: hsl(215, 25%, 20%); box-shadow: 0 3px 15px rgba(168, 85, 247, 0.3); } .bid-card-compact.current-lowest::before { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); width: 4px; } /* Rang compact */ .bid-rank-compact { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 6px; font-weight: 700; font-size: 0.7rem; color: white; white-space: nowrap; flex-shrink: 0; } .bid-rank-compact.rank-1 { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3); } .bid-rank-compact.rank-2 { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: 0 2px 10px rgba(148, 163, 184, 0.3); } .bid-rank-compact.rank-3 { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 2px 10px rgba(217, 119, 6, 0.3); } .bid-rank-number-compact { color: rgba(255, 255, 255, 0.7); font-weight: 600; font-size: 0.7rem; width: 28px; text-align: center; flex-shrink: 0; } /* Contenu de l'offre compact */ .bid-content-compact { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .bid-coach-info-compact { display: flex; align-items: center; gap: 0.75rem; } .bid-avatar-wrapper-compact { position: relative; flex-shrink: 0; } .bid-avatar-compact { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; border: 1.5px solid rgba(168, 85, 247, 0.3); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } .badge-pulse-compact { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; background: linear-gradient(135deg, #10b981 0%, #34d399 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.55rem; border: 1.5px solid white; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); animation: pulseCompact 2s infinite; } @keyframes pulseCompact { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } 50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); } } .bid-status-dot-compact { position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid white; box-shadow: 0 0 0 1.5px currentColor; } .bid-status-dot-compact.pending { background: #3b82f6; color: #3b82f6; } .bid-status-dot-compact.accepted { background: #10b981; color: #10b981; } .bid-status-dot-compact.rejected { background: #ef4444; color: #ef4444; } .bid-status-dot-compact.beaten { background: #f59e0b; color: #f59e0b; } .bid-coach-text-compact { flex: 1; min-width: 0; } .bid-coach-name-compact { margin: 0 0 0.2rem; font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bid-coach-stats-compact { display: flex; gap: 0.6rem; flex-wrap: wrap; } .stat-compact { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); } .stat-compact i { color: #a855f7; font-size: 0.75rem; } .bid-message-compact { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.5rem 0.6rem; background: rgba(168, 85, 247, 0.1); border-radius: 6px; border-left: 2px solid #a855f7; font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); line-height: 1.4; } .bid-message-compact i { color: #a855f7; font-size: 0.8rem; margin-top: 0.15rem; flex-shrink: 0; } .bid-message-compact span { flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bid-meta-compact { display: flex; align-items: center; gap: 0.3rem; color: rgba(255, 255, 255, 0.6); font-size: 0.7rem; } .bid-date-compact { display: flex; align-items: center; gap: 0.3rem; } .bid-date-compact i { color: #a855f7; font-size: 0.65rem; } /* Prix compact */ .bid-price-compact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; min-width: 80px; flex-shrink: 0; } .bid-price-amount-compact { font-size: 1.25rem; font-weight: 800; color: #a855f7; line-height: 1; } .bid-price-amount-compact .currency-compact { font-size: 0.85rem; margin-left: 0.1rem; } .bid-price-unit-compact { font-size: 0.65rem; color: var(--text-secondary); font-weight: 500; } .bid-badges-compact { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.2rem; } .badge-compact { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; transition: all 0.3s ease; cursor: pointer; } .badge-compact:hover { transform: scale(1.15); } .badge-compact.winner { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: white; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .badge-compact.accepted { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: white; } .badge-compact.rejected { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); color: white; } .badge-compact.beaten { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); color: white; } .empty-bids-state { text-align: center; padding: 4rem 2rem; } .empty-icon { width: 100px; height: 100px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--accent); } .empty-bids-state h3 { margin: 0 0 0.5rem; color: var(--primary); font-size: 1.5rem; } .empty-bids-state p { margin: 0; color: var(--text-secondary); font-size: 1rem; } /* Responsive pour les cartes d'offres compactes */ @media (max-width: 768px) { .modal-header.compact-header { flex-direction: column; gap: 1rem; align-items: flex-start; } .modal-header-right { width: 100%; justify-content: space-between; } .sort-dropdown-wrapper { flex: 1; } .sort-btn-compact { width: 100%; justify-content: space-between; } .bid-card-compact { flex-direction: column; align-items: flex-start; } .bid-price-compact { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } .bids-stats-compact-bar { flex-direction: column; gap: 0.5rem; } } /* ========== CHATBOT IA ========== */ .chatbot-toggle { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3); transition: all 0.3s ease; z-index: 1000; } .chatbot-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4); } .chatbot-toggle i { color: white; font-size: 1.5rem; } .chatbot-container { position: fixed; bottom: 90px; right: 20px; width: 500px; max-width: 500px; /* Force la largeur maximale */ max-height: calc(100vh - 150px); height: auto; background: var(--bg-primary, white); border-radius: 20px; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15); border: 1px solid var(--border); display: none; flex-direction: column; z-index: 1001; overflow: hidden; /* Cache tout débordement */ } /* Force TOUS les enfants du chatbot à respecter la largeur */ .chatbot-container * { max-width: 100% !important; box-sizing: border-box !important; } .chatbot-container.active { display: flex; } .chatbot-header { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: white; padding: 0.75rem 1rem; /* Padding réduit pour gagner de l'espace */ display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; /* Ne pas réduire le header */ } .chatbot-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; /* Légèrement plus petit */ } .chatbot-title i { font-size: 1.1rem; } .chatbot-close { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; padding: 0.25rem; border-radius: 4px; transition: background-color 0.2s ease; } .chatbot-close:hover { background: rgba(255, 255, 255, 0.2); } .chatbot-messages { flex: 1; padding: 1rem; overflow-y: visible; /* Pas de scroll vertical sur desktop */ overflow-x: hidden; /* Empêche le débordement horizontal */ display: flex; flex-direction: column; gap: 0.75rem; line-height: 1.5; min-width: 0; width: 100%; max-width: 100%; /* Force le respect de la largeur */ box-sizing: border-box; } .chatbot-message { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; width: 100%; } .user-message { justify-content: flex-end; } .bot-message { justify-content: flex-start; } .message-content { display: flex; align-items: flex-start; gap: 0.5rem; max-width: 80%; min-width: 0; flex: 1; } .user-message .message-content { flex-direction: row-reverse; } .message-content i { font-size: 1rem; margin-top: 0.25rem; flex-shrink: 0; } .bot-message .message-content i { color: var(--accent); } .user-message .message-content i { color: var(--primary); } .message-text { background: var(--bg-secondary); padding: 0.75rem 1rem; border-radius: 18px; font-size: 0.9rem; line-height: 1.4; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; white-space: normal; /* Permet le retour à la ligne automatique */ max-width: 100%; min-width: 0; overflow: visible; } .user-message .message-text { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: white; } .bot-message .message-text { background: var(--bg-secondary); color: var(--text-primary); } /* Formatage markdown pour les messages du bot */ .bot-message .message-text strong { font-weight: 700; color: var(--primary); } .bot-message .message-text ul { margin: 0.5rem 0; padding-left: 1.5rem; } .bot-message .message-text li { margin: 0.25rem 0; } .bot-message .message-text p { margin: 0.5rem 0; white-space: normal !important; /* Force le retour à la ligne */ word-wrap: break-word !important; word-break: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; } .bot-message .message-text p:first-child { margin-top: 0; } .bot-message .message-text p:last-child { margin-bottom: 0; } /* Force TOUS les éléments texte (strong, span, etc.) à se couper */ .bot-message .message-text *, .message-text * { white-space: normal !important; word-wrap: break-word !important; word-break: break-word !important; max-width: 100% !important; } .typing-indicator .message-text { background: var(--bg-secondary); color: var(--text-secondary); } .typing-dots { display: inline-flex; gap: 2px; } .typing-dots span { width: 4px; height: 4px; background: var(--text-secondary); border-radius: 50%; animation: typing 1.4s infinite ease-in-out; } .typing-dots span:nth-child(1) { animation-delay: -0.32s; } .typing-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes typing { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* Badge NEW pour nouveaux coaches - CRITIQUE : Toujours visible au premier plan */ .new-coach-badge { position: absolute; top: -10px; right: -10px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; font-size: 10px; font-weight: bold; padding: 4px 8px; border-radius: 12px; z-index: 999999 !important; /* CRITIQUE : Au premier plan absolu */ transform: rotate(15deg); animation: newBadgePulse 2s infinite; border: 2px solid white; pointer-events: none; /* N'interfère pas avec les clics */ clip-path: none !important; /* Force la visibilité */ overflow: visible !important; /* Force la visibilité */ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); } @keyframes newBadgePulse { 0%, 100% { transform: rotate(15deg) scale(1); } 50% { transform: rotate(15deg) scale(1.05); } } .chatbot-quick-actions { padding: 1rem; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; max-height: 200px; overflow-y: auto; } .quick-action-btn { background: white; border: 2px solid var(--border); border-radius: 12px; padding: 0.75rem; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; } .quick-action-btn:hover { border-color: var(--accent); background: var(--bg-secondary); transform: translateY(-1px); } .quick-action-btn i { color: var(--accent); font-size: 1rem; } .quick-action-btn span { font-weight: 500; color: var(--text-primary); } /* Animation d'apparition */ @keyframes chatbotSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .chatbot-container.active { animation: chatbotSlideIn 0.3s ease-out; } /* Responsive */ @media (max-width: 768px) { .chatbot-container { width: calc(100vw - 40px); height: calc(100vh - 120px); bottom: 80px; right: 20px; left: 20px; } .chatbot-quick-actions { grid-template-columns: 1fr; } } /* ========== CARTE SYNTHÈSE KAPTUR FINALISÉE ========== */ .kaptur-summary-card { background: hsl(215, 25%, 15%); border: 2px solid rgba(168, 85, 247, 0.3); border-radius: 12px; padding: 1rem; margin: 0.5rem 0; width: 100%; max-width: 100%; min-width: 100%; box-sizing: border-box; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.2); position: relative; overflow: visible; /* laisser dépasser la lueur */ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Anneau lumineux animé sur le contour avec circulation de couleur */ .kaptur-summary-card::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: conic-gradient(from 0deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(126, 34, 206, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); animation: circulateGlowSummary 4s linear infinite; filter: blur(0.9px); z-index: 0; pointer-events: none; /* Ne garder que le bord (masquer le centre) */ padding: 3px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Animation de circulation de couleur autour du bord */ @keyframes circulateGlowSummary { 0% { background: conic-gradient(from 0deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(126, 34, 206, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } 12.5% { background: conic-gradient(from 45deg, rgba(126, 34, 206, 0.0) 0deg, rgba(126, 34, 206, 0.7) 40deg, rgba(236, 72, 153, 0.7) 90deg, rgba(168, 85, 247, 0.7) 140deg, rgba(126, 34, 206, 0.7) 200deg, rgba(126, 34, 206, 0.0) 360deg); } 25% { background: conic-gradient(from 90deg, rgba(236, 72, 153, 0.0) 0deg, rgba(236, 72, 153, 0.7) 40deg, rgba(168, 85, 247, 0.7) 90deg, rgba(126, 34, 206, 0.7) 140deg, rgba(236, 72, 153, 0.7) 200deg, rgba(236, 72, 153, 0.0) 360deg); } 37.5% { background: conic-gradient(from 135deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(126, 34, 206, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } 50% { background: conic-gradient(from 180deg, rgba(126, 34, 206, 0.0) 0deg, rgba(126, 34, 206, 0.7) 40deg, rgba(236, 72, 153, 0.7) 90deg, rgba(168, 85, 247, 0.7) 140deg, rgba(126, 34, 206, 0.7) 200deg, rgba(126, 34, 206, 0.0) 360deg); } 62.5% { background: conic-gradient(from 225deg, rgba(236, 72, 153, 0.0) 0deg, rgba(236, 72, 153, 0.7) 40deg, rgba(168, 85, 247, 0.7) 90deg, rgba(126, 34, 206, 0.7) 140deg, rgba(236, 72, 153, 0.7) 200deg, rgba(236, 72, 153, 0.0) 360deg); } 75% { background: conic-gradient(from 270deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(126, 34, 206, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } 87.5% { background: conic-gradient(from 315deg, rgba(126, 34, 206, 0.0) 0deg, rgba(126, 34, 206, 0.7) 40deg, rgba(236, 72, 153, 0.7) 90deg, rgba(168, 85, 247, 0.7) 140deg, rgba(126, 34, 206, 0.7) 200deg, rgba(126, 34, 206, 0.0) 360deg); } 100% { background: conic-gradient(from 360deg, rgba(168, 85, 247, 0.0) 0deg, rgba(168, 85, 247, 0.7) 40deg, rgba(126, 34, 206, 0.7) 90deg, rgba(236, 72, 153, 0.7) 140deg, rgba(168, 85, 247, 0.7) 200deg, rgba(168, 85, 247, 0.0) 360deg); } } /* Halo intérieur doux pour renforcer l'effet */ .kaptur-summary-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 120% at 0% 0%, rgba(168, 85, 247, 0.12), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(126, 34, 206, 0.12), transparent 55%); z-index: 0; pointer-events: none; } /* S'assurer que le contenu reste au-dessus de la lueur */ .kaptur-summary-card>* { position: relative; z-index: 1; } /* Effet hover amélioré */ .kaptur-summary-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.4), inset 0 0 30px rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); } .kaptur-summary-card:hover::after { filter: blur(1.2px); animation-duration: 3s; /* Animation plus rapide au hover */ } .kaptur-summary-card:hover::before { background: radial-gradient(120% 120% at 0% 0%, rgba(168, 85, 247, 0.18), transparent 55%), radial-gradient(120% 120% at 100% 100%, rgba(126, 34, 206, 0.18), transparent 55%); } .kaptur-summary-header { margin-bottom: 0.625rem; padding-bottom: 0.625rem; border-bottom: 1px solid rgba(168, 85, 247, 0.2); text-align: center; } .kaptur-summary-badge { display: inline-block; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 16px; margin-bottom: 0.5rem; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3); } .kaptur-summary-title { margin: 0; color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; } .kaptur-summary-info { background: hsl(215, 25%, 18%); padding: 0.625rem; border-radius: 8px; margin-bottom: 0.625rem; border: 1px solid rgba(168, 85, 247, 0.2); } .kaptur-summary-row { display: flex; justify-content: space-between; align-items: center; margin: 0.3rem 0; font-size: 0.75rem; padding: 0.25rem 0; border-bottom: 1px solid rgba(168, 85, 247, 0.1); } .kaptur-summary-row:last-child { border-bottom: none; } .kaptur-summary-label { color: rgba(255, 255, 255, 0.7); font-weight: 500; display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; } .kaptur-summary-label i { color: #a855f7; font-size: 0.65rem; width: 12px; text-align: center; } .kaptur-summary-value { color: rgba(255, 255, 255, 0.95); font-weight: 600; text-align: right; max-width: 55%; word-wrap: break-word; font-size: 0.75rem; line-height: 1.2; } .kaptur-summary-price { background: hsl(215, 25%, 18%); border-radius: 8px; padding: 0.625rem; margin-bottom: 0.625rem; border: 1px solid rgba(168, 85, 247, 0.3); } .kaptur-summary-price-section { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; } .kaptur-summary-price-per-hour { font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); font-weight: 500; letter-spacing: 0.2px; } .kaptur-summary-price-total { font-size: 1.2rem; color: #a855f7; font-weight: 800; letter-spacing: -0.3px; text-shadow: 0 1px 2px rgba(168, 85, 247, 0.3); } .kaptur-summary-pay-btn { width: 100%; padding: 0.625rem 1rem; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); margin-top: 0.375rem; display: none; box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3), 0 0 15px rgba(99, 102, 241, 0.2); position: relative; overflow: hidden; letter-spacing: 0.2px; } .kaptur-summary-pay-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .kaptur-summary-pay-btn:hover::before { left: 100%; } .kaptur-summary-pay-btn i { margin-right: 0.5rem; } .kaptur-summary-pay-btn[hidden], .kaptur-summary-pay-btn[style*="display: none"], .kaptur-summary-pay-btn[style*="display:none"] { display: none !important; margin: 0; padding: 0; height: 0; } .kaptur-summary-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(168, 85, 247, 0.6); background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%); } /* Badge "Payée" pour les Kaptur */ .kaptur-summary-paid-badge { margin-top: 0.5rem; text-align: center; } .kaptur-summary-paid-badge .status-badge.status-paid { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(126, 34, 206, 0.15) 100%); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 2px 6px rgba(168, 85, 247, 0.3); } .kaptur-summary-pay-btn:active { transform: translateY(0); } /* ========== MODAL DE PAIEMENT ========== */ .payment-container { padding: 1.5rem; } .payment-container h2 { margin-bottom: 1.5rem; color: var(--text-primary); font-size: 1.5rem; } .payment-summary { background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border: 2px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; } .payment-summary-item h3 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--text-primary); font-weight: 700; } .payment-details { display: flex; flex-direction: column; gap: 0.75rem; } .payment-details p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; } .payment-details strong { color: var(--text-primary); font-weight: 600; } .payment-total { margin-top: 1rem !important; padding-top: 1rem; border-top: 2px solid var(--border); font-size: 1.2rem !important; font-weight: 700 !important; color: var(--accent) !important; } .payment-methods { display: flex; flex-direction: column; gap: 1rem; } .payment-methods h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 600; } .payment-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 1.5rem; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 12px; background: rgba(30, 41, 59, 0.6); color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .payment-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.6); background: rgba(30, 41, 59, 0.8); } .payment-btn i { font-size: 1.5rem; } .payment-btn-stripe { background: linear-gradient(135deg, #635bff, #4e44e6); border: none; box-shadow: 0 4px 15px rgba(99, 91, 255, 0.3); } .payment-btn-stripe:hover { background: linear-gradient(135deg, #7a73ff, #635bff); box-shadow: 0 8px 25px rgba(99, 91, 255, 0.4); } .payment-btn-apple, .payment-btn-paypal { display: none !important; } .payment-container { padding: 2rem; background: transparent; } .payment-container h2 { color: white; text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem; } .payment-summary { background: rgba(30, 41, 59, 0.4); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; border: 1px solid rgba(168, 85, 247, 0.2); } .payment-methods h3 { color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; text-align: center; font-size: 1.1rem; } /* Animation pour les nouvelles cartes d'offres */ @keyframes slideInBid { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .bid-card { animation: slideInBid 0.3s ease-out; } /* Animation pour les nouvelles cartes de Kaptur */ @keyframes slideInAuction { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .kaptur-card { animation: slideInAuction 0.3s ease-out; } /* ========== STYLES SYNTHÈSE DE COURS ========== */ .synthese-container { padding: 2rem; } .synthese-container h2 { margin-bottom: 1.5rem; color: var(--text-primary); font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .synthese-form { display: flex; flex-direction: column; gap: 1.5rem; } .synthese-form .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .synthese-form label { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .synthese-form label .required { color: #ef4444; margin-left: 0.25rem; } .synthese-form label small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; } .synthese-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; } .synthese-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .synthese-form .char-count { font-size: 0.75rem; color: var(--text-secondary); text-align: right; margin-top: 0.25rem; } .synthese-form .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; } .synthese-form .form-actions button { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; } .synthese-form .form-actions .btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); } .synthese-form .form-actions .btn-secondary:hover { background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); color: white; border-color: #F59E0B; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } .synthese-form .form-actions .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); color: white; } .synthese-form .form-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } /* Affichage de la synthèse dans les cartes */ .synthese-display { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .synthese-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .synthese-header h4 { margin: 0; color: var(--text-primary); font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .synthese-date { font-size: 0.85rem; color: var(--text-secondary); } .synthese-content { display: flex; flex-direction: column; gap: 1.25rem; } .synthese-section { background: var(--bg-secondary); padding: 1rem; border-radius: 8px; border-left: 3px solid var(--accent); } .synthese-section h5 { margin: 0 0 0.75rem 0; color: var(--text-primary); font-size: 0.95rem; font-weight: 600; } .synthese-section p { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; } /* Responsive */ @media (max-width: 768px) { .synthese-container { padding: 1.5rem; } .synthese-form .form-actions { flex-direction: column; } .synthese-form .form-actions button { width: 100%; } .synthese-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* Modal de visualisation de synthèse (lecture seule) */ .synthese-view-container { padding: 2rem; } .synthese-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border); } .synthese-view-header h3 { margin: 0; color: var(--text-primary); font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .synthese-view-date { font-size: 0.9rem; color: var(--text-secondary); } .synthese-view-content { display: flex; flex-direction: column; gap: 1.5rem; } .synthese-view-content .synthese-section { background: var(--bg-secondary); padding: 1.25rem; border-radius: 8px; border-left: 3px solid var(--accent); } .synthese-view-content .synthese-section h5 { margin: 0 0 1rem 0; color: var(--text-primary); font-size: 1rem; font-weight: 600; } .synthese-view-content .synthese-section p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; } @media (max-width: 768px) { .synthese-view-container { padding: 1.5rem; } .synthese-view-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* ========== STYLES RÉUNION JITSI MEET ========== */ .meeting-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .meeting-section.meeting-info-only { padding: 0.75rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%); border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.15); } .meeting-info-message { display: flex; align-items: center; gap: 0.75rem; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; } .meeting-info-message i { color: var(--accent); font-size: 1rem; flex-shrink: 0; } .meeting-info { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; } .meeting-info i { color: var(--accent); } .meeting-link-container { display: flex; align-items: center; gap: 0.5rem; } .meeting-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: all 0.2s; flex: 1; } .meeting-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); color: white; } .meeting-link i { font-size: 0.85rem; } .btn-icon { padding: 0.625rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .btn-icon:hover { background: var(--bg-tertiary); border-color: var(--accent); color: var(--accent); } .meeting-note { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); font-style: italic; } .meeting-created { background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%); padding: 1rem; border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.2); } /* ========== MESSAGE DE SUCCÈS STRIPE CONNECT ========== */ .stripe-success-message { margin-bottom: 1.5rem; padding: 1.5rem; background: var(--bg-secondary); /* Beige #FFF7ED */ border: 2px solid rgba(212, 175, 55, 0.3); /* Bordure beige/dorée */ border-radius: 12px; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1); } .stripe-success-content h4 { color: var(--success); /* Vert #059669 */ font-size: 1.1rem; font-weight: 700; margin: 0 0 0.75rem 0; display: flex; align-items: center; gap: 0.5rem; } .stripe-success-content h4 i { color: var(--success); font-size: 1.2rem; } .stripe-success-content p { color: var(--success); /* Vert #059669 */ font-size: 0.95rem; line-height: 1.6; margin: 0; font-weight: 500; } /* ========== TABLEAU DES PAIEMENTS ET TRANSFERTS ========== */ .table-responsive { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-primary); } .payments-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .payments-table thead { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; } .payments-table th { padding: 1rem; text-align: left; font-weight: 600; white-space: nowrap; } .payments-table td { padding: 1rem; border-bottom: 1px solid var(--border); color: var(--text-primary); } .payments-table tbody tr:last-child td { border-bottom: none; } .payments-table tbody tr:hover { background: var(--bg-secondary); } .transfer-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .transfer-status.paid { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.3); } .transfer-status.pending { background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%); color: #B8942F; border: 1px solid rgba(212, 175, 55, 0.3); } .transfer-status.failed { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.3); } .coach-payout { font-weight: 700; color: var(--accent); font-size: 1rem; } @media (max-width: 768px) { .meeting-link-container { flex-direction: column; } .meeting-link { width: 100%; justify-content: center; } .btn-icon { width: 100%; } .payments-table { font-size: 0.8rem; } .payments-table th, .payments-table td { padding: 0.75rem 0.5rem; } .transfer-status { font-size: 0.75rem; padding: 0.25rem 0.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ ⚠️ SECTION CRITIQUE - TOGGLE MODE SOMBRE ⚠️ ═══════════════════════════════════════════════════════════════════════════ Cette section contient les styles pour le bouton de basculement du mode sombre. Le bouton doit être positionné directement à côté du texte "Mode sombre". ⚠️ ATTENTION : Ne pas supprimer cette section ! ═══════════════════════════════════════════════════════════════════════════ */ /* ========== TOGGLE MODE SOMBRE ========== */ .theme-toggle-label { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-secondary); border-radius: 8px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: fit-content; position: relative; overflow: hidden; } .theme-toggle-label::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); transition: left 0.5s; } .theme-toggle-label:hover::before { left: 100%; } .theme-toggle-label:hover { background: rgba(212, 175, 55, 0.1); } .theme-toggle-switch { position: relative; width: 50px; height: 26px; } .theme-toggle-switch input { opacity: 0; width: 0; height: 0; } .theme-toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: 0.4s; border-radius: 26px; } .theme-toggle-switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .theme-toggle-switch input:checked+.slider { background-color: var(--accent); } .theme-toggle-switch input:checked+.slider:before { transform: translateX(24px); } /* ========== MODE SOMBRE ========== */ body.dark-mode { --bg-primary: #0F172A; --bg-secondary: #1E293B; --bg-tertiary: #334155; --text-primary: #F1F5F9; --text-secondary: #94A3B8; --border: #475569; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7); background-color: var(--bg-primary); color: var(--text-primary); } /* Hero en mode sombre */ body.dark-mode .hero { background: linear-gradient(180deg, #1E293B 0%, #1E293B 50%, #0F172A 100%); } body.dark-mode .hero-title { color: var(--text-primary); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } body.dark-mode .hero-subtitle { color: var(--text-secondary); } body.dark-mode .hero-stats .stat-number { color: var(--text-primary); } body.dark-mode .hero-stats .stat-label { color: var(--text-secondary); } /* Navigation en mode sombre */ body.dark-mode .navbar { background: rgba(15, 23, 42, 0.98); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } body.dark-mode .nav-link { color: rgba(255, 255, 255, 0.9) !important; } body.dark-mode .nav-link:hover { color: hsl(271 91% 65%) !important; background: rgba(168, 85, 247, 0.1) !important; } body.dark-mode .nav-link.active { color: hsl(271 91% 65%) !important; background: rgba(168, 85, 247, 0.15) !important; } body.dark-mode .nav-logo { background: var(--bg-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Cartes et conteneurs */ body.dark-mode .settings-card, body.dark-mode .card, /* ═══════════════════════════════════════════════════════════════════════════ ⚠️ SECTION CRITIQUE - MODE SOMBRE POUR CARTES COACH ⚠️ ═══════════════════════════════════════════════════════════════════════════ */ body.dark-mode .coach-card, body.dark-mode .feature-card, body.dark-mode .coach-form-card { background: var(--bg-secondary); border-color: var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } body.dark-mode .coach-card { border-color: rgba(255, 255, 255, 0.1); } body.dark-mode .coach-card:hover { border-color: rgba(168, 85, 247, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } body.dark-mode .coach-card-header { background: linear-gradient(135deg, var(--primary) 0%, #1E3A8A 100%); } body.dark-mode .coach-card-body { background: var(--bg-secondary); color: var(--text-primary); } body.dark-mode .coach-card-name { color: var(--text-primary) !important; } body.dark-mode .coach-card-specialty, body.dark-mode .coach-card-location, body.dark-mode .coach-card-rating, body.dark-mode .coach-card-price { color: var(--text-secondary) !important; } body.dark-mode .coach-card-price .price { color: var(--accent) !important; } body.dark-mode .coach-card-avatar { border-color: var(--bg-secondary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(16, 185, 129, 0.3); } body.dark-mode .coach-card-stars { color: #fbbf24 !important; } body.dark-mode .coach-card-elo { color: var(--text-secondary) !important; } body.dark-mode .coach-card-specialties { color: var(--text-secondary) !important; } body.dark-mode .coach-card-specialties .badge { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Filtres et panneaux */ body.dark-mode .filters-panel { background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } body.dark-mode .filter-group { border-bottom-color: var(--border); } body.dark-mode .filter-group label { color: var(--text-primary); } /* Formulaires */ body.dark-mode .form-section { border-color: var(--border); background: transparent; } body.dark-mode .form-section h3 { color: var(--text-primary); } body.dark-mode .coach-form-card .form-section { border-bottom: 1px solid var(--border); } body.dark-mode .coach-form-card .form-section:last-of-type { border-bottom: none; } body.dark-mode #section-devenir-coach h1 { color: var(--text-primary); } body.dark-mode .coach-form-card label { color: var(--text-primary); } body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode input[type="tel"], body.dark-mode textarea, body.dark-mode select { background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .form-group input:hover, body.dark-mode .form-group textarea:hover, body.dark-mode .form-group select:hover { background: var(--bg-secondary) !important; border-color: var(--accent) !important; } body.dark-mode .form-group input:focus, body.dark-mode .form-group textarea:focus, body.dark-mode .form-group select:focus { background: var(--bg-secondary) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15), 0 8px 25px rgba(16, 185, 129, 0.1) !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: var(--text-secondary); } body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus { border-color: var(--accent); background: var(--bg-secondary); } /* Boutons */ body.dark-mode .btn-primary { background: linear-gradient(135deg, var(--secondary) 0%, #B8942F 100%); color: var(--primary); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3); } body.dark-mode .btn-primary:hover { box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4); } body.dark-mode .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--accent); } body.dark-mode .btn-secondary:hover { background: var(--accent); color: white; } body.dark-mode .btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); } body.dark-mode .btn-outline:hover { background: var(--accent); color: white; } /* Sections et conteneurs */ body.dark-mode .section { background: var(--bg-primary); } body.dark-mode .container { background: transparent; } body.dark-mode .search-header h1 { color: var(--text-primary); } body.dark-mode .coaches-grid { background: transparent; } /* Tableaux */ body.dark-mode .table-responsive { background: var(--bg-secondary); border-color: var(--border); } body.dark-mode .payments-table { background: var(--bg-secondary); } body.dark-mode .payments-table thead { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); } body.dark-mode .payments-table td { color: var(--text-primary); border-bottom-color: var(--border); } body.dark-mode .payments-table tbody tr:hover { background: var(--bg-tertiary); } /* Messages et notifications */ body.dark-mode .stripe-success-message { background: rgba(30, 41, 59, 0.9); border-color: rgba(212, 175, 55, 0.5); } body.dark-mode .status-card { background: var(--bg-secondary); border-color: var(--border); } body.dark-mode .stripe-info { background: var(--bg-tertiary); border-left-color: var(--accent); } body.dark-mode .stripe-info p { color: var(--text-secondary); } /* Modals */ body.dark-mode .modal-content { background: var(--bg-secondary); color: var(--text-primary); } body.dark-mode .modal-header { border-bottom-color: var(--border); } body.dark-mode .modal-footer { border-top-color: var(--border); } /* Tabs et onglets */ body.dark-mode .auth-tab { color: var(--text-secondary); border-bottom-color: var(--border); } body.dark-mode .auth-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); } /* Dropdowns */ body.dark-mode .dropdown-menu { background: hsl(215, 25%, 8%) !important; border-color: rgba(168, 85, 247, 0.4) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.3) !important; backdrop-filter: none !important; } body.dark-mode .dropdown-item { color: var(--text-primary); } body.dark-mode .dropdown-item:hover { background: var(--bg-tertiary); color: var(--text-primary); } /* Badges et statuts */ body.dark-mode .badge { background: var(--accent); color: white; } body.dark-mode .booking-status-badge { background: var(--bg-tertiary); color: var(--text-primary); } /* Toggle switches */ body.dark-mode .theme-toggle-label { background: var(--bg-tertiary); } body.dark-mode .theme-toggle-label:hover { background: rgba(212, 175, 55, 0.2); } body.dark-mode .theme-toggle-switch .slider { background-color: var(--border); } /* Scrollbar en mode sombre */ body.dark-mode ::-webkit-scrollbar { width: 10px; height: 10px; } body.dark-mode ::-webkit-scrollbar-track { background: var(--bg-primary); } body.dark-mode ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 5px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--border); } /* Messages de conversation */ body.dark-mode .message-content { background: var(--bg-tertiary); color: var(--text-primary); } body.dark-mode .message-time { color: var(--text-secondary); } /* Inputs de recherche */ body.dark-mode .search-input { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-primary); } body.dark-mode .search-input:focus { border-color: var(--accent); background: var(--bg-secondary); } /* Checkboxes et radios */ body.dark-mode input[type="checkbox"], body.dark-mode input[type="radio"] { accent-color: var(--accent); } /* Liens */ body.dark-mode a { color: var(--accent); } body.dark-mode a:hover { color: var(--text-primary); } /* Diviseurs */ body.dark-mode hr { border-color: var(--border); } /* Textarea */ body.dark-mode textarea { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-primary); } body.dark-mode textarea:focus { background: var(--bg-secondary); border-color: var(--accent); } /* Force tous les éléments avec un fond blanc ou clair à utiliser le fond sombre */ body.dark-mode .notification-panel, body.dark-mode .modal, body.dark-mode .modal-overlay, body.dark-mode .conversation-panel, body.dark-mode .messages-container, body.dark-mode .bookings-list, body.dark-mode .coaches-list, body.dark-mode .kaptur-list, body.dark-mode .auctions-list { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* CHATBOT: Force couleurs explicites en mode sombre */ body.dark-mode .chatbot-container { background: #1e293b !important; /* Gris foncé explicite */ border-color: #334155 !important; } body.dark-mode .chatbot-messages { background: #1e293b !important; /* Gris foncé explicite */ color: #e2e8f0 !important; /* Texte clair */ } body.dark-mode .chatbot-header { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important; border-bottom: 1px solid #334155; } body.dark-mode .chatbot-input-area { background: #1e293b !important; border-top: 1px solid #334155; } /* Styles pour les boutons FAQ */ .faq-options-grid { display: flex; flex-direction: column; gap: 0.4rem; /* Réduit de 0.5rem */ width: 100%; margin-top: 0.3rem; } .faq-btn { background: var(--bg-secondary, white); /* S'adapte au thème */ border: 1px solid var(--accent); color: var(--accent); padding: 0.6rem 0.8rem; /* Réduit de 0.75rem 1rem */ border-radius: 12px; cursor: pointer; font-size: 0.85rem; /* Réduit de 0.9rem */ text-align: left; transition: all 0.2s ease; width: 100%; line-height: 1.3; /* Ajout pour compacter les lignes */ white-space: normal; /* Permet le retour à la ligne */ overflow-wrap: break-word; /* Évite le débordement */ } .faq-btn:hover { background: var(--accent); color: white; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(168, 85, 247, 0.2); } body.dark-mode .faq-btn { background: var(--bg-primary); border-color: var(--accent); color: var(--text-primary); } body.dark-mode .faq-btn:hover { background: var(--accent); color: white; } /* Fix ULTIME pour le fond des messages du bot en mode sombre */ body.dark-mode .bot-message .message-text, body.dark-mode .chatbot-message.bot-message .message-text { background: #1e293b !important; /* Couleur sombre explicite */ color: #e2e8f0 !important; /* Texte clair explicite */ border: 1px solid #334155 !important; } /* S'assurer que le texte ne déborde JAMAIS */ .message-text, .faq-btn { max-width: 100%; word-wrap: break-word !important; word-break: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; /* Permet le retour à la ligne automatique */ } /* Ajustement mobile pour la taille de police et couleurs */ @media (max-width: 768px) { .message-text { font-size: 1rem !important; line-height: 1.5; } .faq-btn { font-size: 0.95rem !important; padding: 0.8rem 1rem; white-space: normal !important; } /* Force le contraste sur mobile en mode sombre */ body.dark-mode .faq-btn { background: #1e293b !important; color: #e2e8f0 !important; border-color: #a855f7 !important; } } /* Cacher la zone de saisie car on utilise des boutons */ .chatbot-input-area { display: none !important; } body.dark-mode [style*="background: white"], body.dark-mode [style*="background: #FFF"], body.dark-mode [style*="background: #FFFFFF"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Tous les éléments avec fond blanc explicite */ body.dark-mode .user-profile, body.dark-mode .notification-panel, body.dark-mode .modal-overlay, /* .chatbot-container retiré ici car géré plus haut */ /* .chatbot-header retiré ici car géré plus haut */ /* .chatbot-messages retiré ici car géré plus haut */ body.dark-mode .settings-card, body.dark-mode .form-group, body.dark-mode .toggle-group, body.dark-mode .search-results, body.dark-mode .booking-card, body.dark-mode .message-bubble, body.dark-mode .conversation-list, body.dark-mode .conversation-item, body.dark-mode .review-card, body.dark-mode .synthese-card { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Le dropdown-menu a ses propres styles plus opaques */ body.dark-mode .dropdown-menu { background: hsl(215, 25%, 8%) !important; border-color: rgba(168, 85, 247, 0.4) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.3) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Règle ultra-spécifique pour le menu profil en dark mode */ body.dark-mode #userDropdown, body.dark-mode #userDropdown.dropdown-menu, body.dark-mode .user-profile #userDropdown { background: #0a0a0a !important; background-color: #0a0a0a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; border: 1px solid rgba(168, 85, 247, 0.5) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5) !important; } body.dark-mode .dropdown-menu a { color: rgba(255, 255, 255, 0.98) !important; } body.dark-mode .dropdown-menu a:hover { color: white !important; background: rgba(168, 85, 247, 0.3) !important; } body.dark-mode .dropdown-menu a i { color: #a855f7 !important; } /* ═══════════════════════════════════════════════════════════════════════════ ⚠️ SECTION CRITIQUE - MODE SOMBRE POUR CARTES KAPTUR ⚠️ ═══════════════════════════════════════════════════════════════════════════ */ body.dark-mode .kaptur-card, body.dark-mode .auction-card { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } body.dark-mode .kaptur-card:hover, body.dark-mode .auction-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important; border-color: rgba(168, 85, 247, 0.5) !important; } body.dark-mode .kaptur-title { color: var(--text-primary) !important; } body.dark-mode .kaptur-badge { background: rgba(168, 85, 247, 0.2) !important; color: #a855f7 !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; } body.dark-mode .kaptur-status.active { background: rgba(16, 185, 129, 0.2) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; } body.dark-mode .kaptur-status.expired { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } body.dark-mode .kaptur-timer { background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .kaptur-detail-label { color: var(--text-secondary) !important; } body.dark-mode .kaptur-detail-value { color: var(--text-primary) !important; } body.dark-mode .kaptur-detail-value i { color: var(--accent) !important; } body.dark-mode .kaptur-description { color: var(--text-secondary) !important; } body.dark-mode .bid-card-accepted { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, var(--bg-secondary) 100%) !important; border-color: #a855f7 !important; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3) !important; } body.dark-mode .bid-card-accepted:hover { border-color: #7e22ce !important; box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4) !important; } body.dark-mode .bid-card-rejected { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-secondary) 100%) !important; border-color: #ef4444 !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important; } body.dark-mode .bid-card-rejected:hover { border-color: #dc2626 !important; box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important; } body.dark-mode .bid-card-beaten, body.dark-mode .bid-card-expired { border-color: rgba(107, 114, 128, 0.4) !important; } body.dark-mode .bid-card-best { border-color: rgba(168, 85, 247, 0.6) !important; } /* Textes qui doivent être visibles */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--text-primary) !important; } body.dark-mode p, body.dark-mode span, body.dark-mode div, body.dark-mode label { color: inherit; } /* Éléments spécifiques avec fond blanc */ body.dark-mode .user-menu, body.dark-mode .nav-actions, body.dark-mode .notification-item, body.dark-mode .message-item, body.dark-mode .booking-item, body.dark-mode .coach-item, body.dark-mode .filter-item, body.dark-mode .tab-item, body.dark-mode .auth-panel, body.dark-mode .auth-content, body.dark-mode .form-container, body.dark-mode .search-container, body.dark-mode .results-container { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Override pour les éléments avec background inline ou classes spécifiques */ body.dark-mode .card-body, body.dark-mode .card-header, body.dark-mode .modal-body, body.dark-mode .modal-content, body.dark-mode .panel-content, body.dark-mode .section-content { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Assurer que les textes sur les boutons restent lisibles */ body.dark-mode .btn-primary, body.dark-mode .btn-secondary, body.dark-mode .btn-outline { color: inherit; } /* Assurer la visibilité des icônes */ body.dark-mode i, body.dark-mode .fas, body.dark-mode .far, body.dark-mode .fab { color: inherit; } /* Override pour les éléments avec des styles inline ou des classes spécifiques */ body.dark-mode [class*="white"], body.dark-mode [class*="bg-white"], body.dark-mode [class*="light"] { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* ═══════════════════════════════════════════════════════════════════════════ ⚠️ SECTION CRITIQUE - MODE SOMBRE POUR CARTES RÉSERVATION ⚠️ ═══════════════════════════════════════════════════════════════════════════ */ /* Cartes de réservation en mode sombre */ body.dark-mode .reservation-card, body.dark-mode .booking-card { background: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } body.dark-mode .reservation-card:hover, body.dark-mode .booking-card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important; border-color: rgba(16, 185, 129, 0.3) !important; } body.dark-mode .booking-card-header { background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important; border-bottom-color: var(--border) !important; } body.dark-mode .reservation-content, body.dark-mode .reservation-details, body.dark-mode .reservation-actions { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } body.dark-mode .reservation-date { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%) !important; color: white !important; } body.dark-mode .reservation-day, body.dark-mode .reservation-month { color: white !important; } body.dark-mode .coach-name-info h3 { color: var(--text-primary) !important; } body.dark-mode .reservation-mode { color: var(--text-secondary) !important; } body.dark-mode .reservation-mode i { color: var(--accent) !important; } body.dark-mode .reservation-time-range { color: var(--text-primary) !important; } body.dark-mode .reservation-time-range i { color: var(--accent) !important; } body.dark-mode .booking-status-badge.status-upcoming { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; } body.dark-mode .booking-status-badge.status-past { background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(107, 114, 128, 0.1) 100%) !important; color: #9ca3af !important; border: 1px solid rgba(107, 114, 128, 0.3) !important; } body.dark-mode .booking-status-badge.status-cancelled { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } body.dark-mode .booking-card-upcoming { border-left-color: var(--accent) !important; } body.dark-mode .booking-card-past { border-left-color: #6b7280 !important; } body.dark-mode .booking-card-cancelled { border-left-color: #ef4444 !important; } body.dark-mode .reservation-card h3, body.dark-mode .reservation-card span, body.dark-mode .reservation-card p { color: var(--text-primary) !important; } body.dark-mode .reservation-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important; } /* Filtres et dropdowns en mode sombre */ body.dark-mode .filter-dropdown select, body.dark-mode .sort-dropdown select { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } body.dark-mode .filter-dropdown select:hover, body.dark-mode .sort-dropdown select:hover { background: var(--bg-secondary) !important; border-color: var(--accent) !important; } body.dark-mode .filter-dropdown select:focus, body.dark-mode .sort-dropdown select:focus { background: var(--bg-secondary) !important; border-color: var(--accent) !important; } body.dark-mode .filter-dropdown select option, body.dark-mode .sort-dropdown select option { background: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Toasts (messages) en mode sombre */ body.dark-mode .toast { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; } body.dark-mode .toast.success { border-left-color: var(--accent) !important; } body.dark-mode .toast.error { border-left-color: var(--danger) !important; } body.dark-mode .toast.info { border-left-color: var(--primary-light) !important; } body.dark-mode .toast-icon { color: inherit !important; } body.dark-mode .toast-message { color: var(--text-primary) !important; } /* Cartes de proposition (demande de cours) en mode sombre */ body.dark-mode .proposal-card { background: hsl(215, 25%, 15%) !important; border-color: rgba(168, 85, 247, 0.3) !important; color: rgba(255, 255, 255, 0.95) !important; } body.dark-mode .proposal-card.proposal-accepted { background: hsl(215, 25%, 15%) !important; border-color: #a855f7 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.2) !important; } body.dark-mode .proposal-card.proposal-rejected { background: hsl(215, 25%, 15%) !important; border-color: #ef4444 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(239, 68, 68, 0.2) !important; } body.dark-mode .proposal-card h4 { color: rgba(255, 255, 255, 0.95) !important; } body.dark-mode .proposal-details { background: hsl(215, 25%, 18%) !important; color: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(168, 85, 247, 0.2) !important; } body.dark-mode .proposal-details p { color: rgba(255, 255, 255, 0.9) !important; } body.dark-mode .proposal-details strong { color: var(--text-primary) !important; } body.dark-mode .proposal-price { color: var(--accent) !important; } body.dark-mode .proposal-actions { border-top-color: var(--border) !important; } body.dark-mode .proposal-status { color: var(--text-primary) !important; } /* Tags de filtre (Langue, Spécialité, Mode) en mode sombre */ body.dark-mode .tag-select-item span { background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .tag-select-item:hover span { background: var(--bg-secondary) !important; border-color: var(--accent) !important; } body.dark-mode .tag-select-item input[type="checkbox"]:checked+span { background: linear-gradient(135deg, var(--accent) 0%, var(--primary-light) 100%) !important; border-color: var(--accent) !important; color: white !important; } body.dark-mode .tag-select-item input[type="checkbox"]:checked+span:hover { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%) !important; } /* Premium tags en mode sombre */ body.dark-mode .premium-tag { background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .premium-tag:hover { background: var(--bg-secondary) !important; border-color: var(--accent) !important; } body.dark-mode .premium-tag.active, body.dark-mode .premium-tag.selected { background: linear-gradient(135deg, var(--accent) 0%, var(--primary-light) 100%) !important; border-color: var(--accent) !important; color: white !important; } /* Boutons Mode de Cours en mode sombre */ body.dark-mode .mode-toggle-btn { background: var(--bg-tertiary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .mode-toggle-btn:hover { background: var(--bg-secondary) !important; border-color: var(--accent) !important; } body.dark-mode .mode-toggle-btn.active { background: linear-gradient(135deg, var(--accent) 0%, var(--primary-light) 100%) !important; border-color: var(--accent) !important; color: white !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important; } body.dark-mode .mode-toggle-btn i { color: inherit !important; } /* ========== PROFIL EN MODE SOMBRE ========== */ body.dark-mode .profil-sidebar { background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); color: var(--text-primary); } body.dark-mode .profil-sidebar h2 { color: var(--text-primary); } body.dark-mode .profil-sidebar p { color: var(--text-secondary); } body.dark-mode .profil-content { background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); color: var(--text-primary); } body.dark-mode .profil-tabs { background: var(--bg-primary); border: 1px solid var(--border); } body.dark-mode .profil-tabs .tab-btn { color: var(--text-secondary); background: transparent; } body.dark-mode .profil-tabs .tab-btn:hover { background: rgba(30, 41, 59, 0.5); color: var(--text-primary); } body.dark-mode .profil-tabs .tab-btn.active { background: linear-gradient(135deg, var(--accent) 0%, var(--primary-light) 100%); color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } body.dark-mode .section-subtitle { color: var(--text-primary); border-bottom-color: var(--accent); } body.dark-mode .form-grid { background: transparent; } body.dark-mode .form-group label { color: var(--text-primary); } body.dark-mode .checkbox-group { background: var(--bg-primary); border-color: var(--border); } body.dark-mode .checkbox-group label, body.dark-mode .checkbox-group .checkbox-label { background: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } body.dark-mode .checkbox-group label:hover, body.dark-mode .checkbox-group .checkbox-label:hover { background: rgba(16, 185, 129, 0.15) !important; border-color: var(--accent) !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important; } body.dark-mode .checkbox-group input[type="checkbox"] { background: var(--bg-secondary) !important; border-color: var(--border) !important; } body.dark-mode .checkbox-group input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%) !important; border-color: var(--accent) !important; } body.dark-mode .checkbox-label { color: var(--text-primary); } body.dark-mode .checkbox-label:hover { background: rgba(16, 185, 129, 0.1); } body.dark-mode .checkbox-label input[type="checkbox"] { accent-color: var(--accent); background: var(--bg-secondary); border-color: var(--border); } body.dark-mode .form-actions { border-top-color: var(--border); } body.dark-mode .profil-avatar { border-color: var(--border); } body.dark-mode .btn-upload { background: var(--accent); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } body.dark-mode .btn-upload:hover { background: var(--success); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); } body.dark-mode .profil-badges { color: var(--text-primary); } body.dark-mode .profil-badges .badge, body.dark-mode .profil-badges .coach-badge { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); } body.dark-mode .tab-content { color: var(--text-primary); } body.dark-mode .form-group small { color: var(--text-secondary); } body.dark-mode .required { color: var(--danger); } /* ========== OPTIMISATIONS MOBILE ========== */ /* Menu Hamburger */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 2rem; height: 2rem; background: transparent; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.5rem; cursor: pointer; padding: 0.5rem; z-index: 1001; position: relative; transition: all 0.3s; } .mobile-menu-toggle:hover { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.5); } .mobile-menu-toggle span { width: 100%; height: 2px; background: white; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; display: block; } .mobile-menu-toggle.active { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.15); } .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); background: hsl(271 91% 65%); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); background: hsl(271 91% 65%); } /* Navigation Mobile */ @media (max-width: 768px) { .mobile-menu-toggle { display: flex; } .navbar-container { padding: 0 1rem; } .nav-container { padding: 0.75rem 1rem; } .nav-links { position: fixed; top: 4rem; left: 0; right: 0; background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: stretch; padding: 1rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(168, 85, 247, 0.2); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; max-height: calc(100vh - 4rem); overflow-y: auto; gap: 0.5rem; } .nav-links.mobile-open { transform: translateX(0); } .nav-link { padding: 1rem; border-radius: 0.5rem; margin-bottom: 0.25rem; text-align: left; font-size: 1rem; color: rgba(255, 255, 255, 0.9); transition: all 0.3s; border: 1px solid transparent; } .nav-link:hover { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); color: white; transform: translateX(4px); } .nav-link.active { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.4); color: hsl(271 91% 65%); } .nav-link::after { display: none; } .nav-actions { gap: 0.5rem; } .btn-auth, .btn-primary { padding: 0.5rem 1rem; font-size: 0.85rem; } .user-profile span { display: none; } body.menu-open { overflow: hidden; } } /* Hero Section Mobile */ @media (max-width: 768px) { .hero { padding: 2rem 1rem; min-height: auto; padding-top: 100px; } .hero-title { font-size: 2rem; line-height: 1.2; margin-bottom: 1rem; } .hero-subtitle { font-size: 1rem; margin-bottom: 1.5rem; } .hero-cta { flex-direction: column; gap: 1rem; width: 100%; } .hero-cta .btn-primary, .hero-cta .btn-secondary { width: 100%; padding: 1rem; } .hero-stats { flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .stat-item { width: 100%; } } /* Container et Espacements Mobile */ @media (max-width: 768px) { .main-content { margin-top: 65px; min-height: calc(100vh - 65px); } .container { padding: 1rem; } .section { padding: 1.5rem 0; } .section-title { font-size: 1.75rem; margin-bottom: 1.5rem; } } /* Grilles et Cartes Mobile */ @media (max-width: 768px) { .coaches-grid { grid-template-columns: 1fr; gap: 1rem; } .coaches-carousel { grid-template-columns: 1fr; gap: 1rem; } .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .feature-card { padding: 1.5rem; } .kaptur-grid { grid-template-columns: 1fr; gap: 1rem; } .coach-card { padding: 1rem; } .coach-card-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .coach-card-body { padding: 1rem 0; } } /* Recherche et Filtres Mobile */ @media (max-width: 768px) { .search-layout { grid-template-columns: 1fr; gap: 1rem; } .filters-panel { position: static; padding: 1rem; border-radius: 12px; margin-bottom: 1rem; } .filter-group { margin-bottom: 1.5rem; } .filter-group label { font-size: 0.9rem; margin-bottom: 0.5rem; } .range-inputs { display: flex; gap: 0.5rem; } .range-inputs input { flex: 1; padding: 0.75rem; font-size: 0.9rem; } .tag-select-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .tag-select-item { font-size: 0.85rem; padding: 0.5rem; } .mode-toggle-group { flex-direction: column; gap: 0.5rem; } .mode-toggle-btn { width: 100%; padding: 0.75rem; } .results-header { flex-direction: column; gap: 1rem; align-items: stretch; } .results-header select { width: 100%; } } /* Formulaires Mobile */ @media (max-width: 768px) { .form-row { flex-direction: column; gap: 1rem; } .form-group { width: 100%; } .form-grid { grid-template-columns: 1fr; gap: 1rem; } .coach-form-card { padding: 1rem; } .form-section { padding: 1.5rem 1rem; } .form-section h3 { font-size: 1.1rem; } .checkbox-group { flex-direction: column; gap: 0.75rem; } .premium-tag-select { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .form-actions { flex-direction: column; gap: 0.75rem; } .form-actions button { width: 100%; } } /* Modals Mobile */ @media (max-width: 768px) { .modal-content { width: 95%; max-width: 95%; margin: 1rem auto; max-height: 90vh; overflow-y: auto; padding: 1.5rem 1rem; } .modal-large { width: 95%; max-width: 95%; } .modal-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .modal-header h2, .modal-header h3 { font-size: 1.5rem; } .auth-container { padding: 1rem; } .auth-tabs { flex-direction: row; gap: 0.5rem; } .auth-tab { flex: 1; padding: 0.75rem; font-size: 0.9rem; } } /* Calendrier Mobile */ @media (max-width: 768px) { .booking-calendar { gap: 0.25rem; } .calendar-day { font-size: 0.75rem; padding: 0.5rem; } .calendar-weekdays { font-size: 0.7rem; } .time-slots-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .time-slot { padding: 0.75rem 0.5rem; font-size: 0.85rem; } } /* Réservations Mobile */ @media (max-width: 768px) { .reservation-card { flex-direction: column; } .booking-card-header { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem; } .reservation-date { width: 100%; text-align: center; } .reservation-info { width: 100%; } .reservation-actions { flex-direction: column; gap: 0.5rem; width: 100%; } .reservation-actions button { width: 100%; } } /* Messages Mobile */ @media (max-width: 768px) { .messages-layout { grid-template-columns: 1fr; height: calc(100vh - 65px); } .conversations-list { position: fixed; top: 65px; left: 0; right: 0; bottom: 0; background: white; z-index: 998; transform: translateX(-100%); transition: transform 0.3s ease; } .conversations-list.mobile-open { transform: translateX(0); } .chat-area { width: 100%; } .chat-header { padding: 1rem; } .message-bubble { max-width: 85%; font-size: 0.9rem; padding: 0.75rem 1rem; } .message-input-area { padding: 0.75rem; } .message-input-area input { font-size: 1rem; } } /* Profil Mobile */ @media (max-width: 768px) { .profil-layout { grid-template-columns: 1fr; gap: 1.5rem; } .profil-sidebar { text-align: center; padding: 1.5rem 1rem; } .profil-avatar { margin: 0 auto 1rem; } .profil-tabs { flex-wrap: wrap; gap: 0.5rem; } .tab-btn { flex: 1; min-width: calc(50% - 0.25rem); padding: 0.75rem; font-size: 0.85rem; } } /* Kaptur Mobile */ @media (max-width: 768px) { .kaptur-header { flex-direction: column; gap: 1rem; align-items: stretch; } .kaptur-header button { width: 100%; } .kaptur-tabs { flex-wrap: wrap; gap: 0.5rem; } .kaptur-tabs .tab-btn { flex: 1; min-width: calc(50% - 0.25rem); padding: 0.75rem; font-size: 0.85rem; } .kaptur-card { padding: 1rem; } .kaptur-details { grid-template-columns: 1fr; gap: 0.75rem; } .kaptur-footer { flex-direction: column; gap: 1rem; align-items: stretch; } .kaptur-footer button { width: 100%; } } /* Tableaux Mobile */ @media (max-width: 768px) { .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .payments-table { min-width: 600px; font-size: 0.85rem; } .payments-table th, .payments-table td { padding: 0.75rem 0.5rem; } .validation-list { gap: 1rem; } .validation-card { padding: 1rem; } .validation-actions { flex-direction: column; gap: 0.5rem; } .validation-actions button { width: 100%; } } /* Boutons Mobile */ @media (max-width: 768px) { .btn-primary, .btn-secondary, .btn-danger { padding: 0.875rem 1.5rem; font-size: 1rem; min-height: 44px; } .btn-large { padding: 1rem 2rem; font-size: 1.1rem; } .btn-block { width: 100%; } .btn-icon { width: 44px; height: 44px; padding: 0.75rem; } } /* Notifications Mobile */ @media (max-width: 768px) { .notification-panel { width: 100%; right: -100%; left: 0; border-radius: 0; max-height: calc(100vh - 65px); } .notification-panel.active { right: 0; } .notification-header { padding: 1rem; } .notification-header .btn-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .notification-item { padding: 1rem; } } /* Chatbot Mobile */ @media (max-width: 768px) { .chatbot-container { width: 100%; height: 100%; border-radius: 0; right: 0; left: 0; bottom: 0; top: 0; } .chatbot-toggle { width: 56px; height: 56px; bottom: 1rem; right: 1rem; } } /* Très petits écrans (480px et moins) */ @media (max-width: 480px) { .hero-title { font-size: 1.75rem; } .section-title { font-size: 1.5rem; } .nav-container { padding: 0.5rem; } .nav-logo { width: 40px; height: 40px; } .nav-logo i { font-size: 1.5rem; } .btn-auth, .btn-primary { padding: 0.75rem 1rem; font-size: 0.8rem; } .coach-card-header { padding: 0.75rem; } .coach-card-body { padding: 0.75rem; } .tag-select-group { grid-template-columns: 1fr; } .premium-tag-select { grid-template-columns: 1fr; } .time-slots-grid { grid-template-columns: 1fr; } .modal-content { padding: 1rem 0.75rem; } .form-section { padding: 1rem 0.75rem; } } /* Amélioration tactile pour mobile */ @media (max-width: 768px) { button, a, .nav-link, .tab-btn, .mode-toggle-btn, .tag-select-item, .time-slot, .calendar-day { min-height: 44px; min-width: 44px; } input, textarea, select { font-size: 16px; } } /* Désactiver les effets de hover sur mobile */ @media (hover: none) and (pointer: coarse) { .cursor-glow, .cursor-dot { display: none; } .btn-primary:hover, .btn-secondary:hover, .nav-link:hover { transform: none; } } /* Mode sombre sur mobile */ @media (max-width: 768px) { body.dark-mode .nav-links { background: var(--bg-dark); border-bottom: 1px solid var(--border); } body.dark-mode .nav-link { color: rgba(255, 255, 255, 0.9) !important; } body.dark-mode .conversations-list { background: var(--bg-dark); } body.dark-mode .notification-panel { background: var(--bg-dark); } } /* ═══════════════════════════════════════════════════════════════════════════ ⚠️ SECTION CRITIQUE - PROFIL (CALENDRIER, AVIS, STATISTIQUES) ⚠️ ═══════════════════════════════════════════════════════════════════════════ Cette section contient TOUS les styles pour : - Le calendrier dans le profil (.calendrier-container, .calendar-booking-card) - Les avis dans le profil (.avis-container, .review-card) - Les statistiques dans le profil (.stats-container, .stat-card) ⚠️ ATTENTION : Ne pas supprimer cette section entière ! ⚠️ Si vous modifiez ce fichier, gardez cette section intacte. ═══════════════════════════════════════════════════════════════════════════ */ /* ========== CALENDRIER PROFIL ========== */ .calendrier-container { padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08); animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .calendrier-container .section-subtitle { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; font-family: 'Outfit', sans-serif; } .calendrier-container .section-subtitle i { color: var(--accent); font-size: 1.1rem; } .bookings-list { display: flex; flex-direction: column; gap: 1rem; } .calendar-booking-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); position: relative; overflow: hidden; } .calendar-booking-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%); transition: width 0.3s; } .calendar-booking-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(15, 23, 42, 0.12); border-color: var(--accent); } .calendar-booking-card:hover::before { width: 6px; } .booking-date-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; height: 60px; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-radius: 12px; color: white; font-weight: 700; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s; } .calendar-booking-card:hover .booking-date-badge { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); } .date-day { font-size: 1.5rem; line-height: 1; } .date-month { font-size: 0.75rem; text-transform: uppercase; opacity: 0.9; letter-spacing: 0.5px; } .booking-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .booking-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; font-family: 'Outfit', sans-serif; } .booking-title i { color: var(--accent); font-size: 0.9rem; } .booking-details { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary); } .booking-details span { display: flex; align-items: center; gap: 0.4rem; } .booking-details i { color: var(--accent); font-size: 0.8rem; } .booking-status-badge { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s; } .booking-status-badge.status-pending { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; } .booking-status-badge.status-accepted { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; } .booking-status-badge.status-confirmed { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; } .booking-status-badge.status-paid { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; } .booking-status-badge.status-cancelled, .booking-status-badge.status-rejected { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b; } .empty-message { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); font-style: italic; } /* ========== AVIS PROFIL ========== */ .avis-container { padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08); animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .avis-container .section-subtitle { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; font-family: 'Outfit', sans-serif; } .avis-container .section-subtitle i { color: var(--accent); font-size: 1.1rem; } .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .review-card { background: white; padding: 1.5rem; border-radius: 12px; border: 2px solid var(--border); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .review-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%); transform: scaleX(0); transition: transform 0.3s; } .review-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15); border-color: var(--accent); } .review-card:hover::before { transform: scaleX(1); } .review-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .review-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); transition: all 0.3s; } .review-card:hover .review-avatar { transform: scale(1.1); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3); } .review-info h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); font-family: 'Outfit', sans-serif; } .review-rating { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } .review-rating .stars { color: #fbbf24; font-size: 0.9rem; } .rating-value { font-weight: 700; color: var(--accent); font-size: 1rem; font-family: 'Outfit', sans-serif; } .review-comment { color: var(--text-secondary); line-height: 1.6; margin-top: 0.75rem; font-style: italic; } .review-date { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.75rem; opacity: 0.7; } /* ========== STATISTIQUES PROFIL ========== */ .stats-container { padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08); animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .stats-container .section-subtitle { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; font-family: 'Outfit', sans-serif; } .stats-container .section-subtitle i { color: var(--accent); font-size: 1.1rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; } .stat-card { background: var(--bg-secondary); padding: 1.75rem; border-radius: 16px; border: 2px solid var(--border); display: flex; align-items: center; gap: 1.25rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08); position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s; } .stat-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.15); border-color: var(--accent); } .stat-card:hover::before { opacity: 1; } .stat-card.highlight { background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); color: white; border-color: var(--accent); } .stat-card.highlight .stat-icon, .stat-card.highlight .stat-value, .stat-card.highlight .stat-label { color: white; } .stat-icon { font-size: 2.5rem; color: var(--accent); transition: all 0.3s; flex-shrink: 0; } .stat-card:hover .stat-icon { transform: scale(1.2) rotate(5deg); } .stat-content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .stat-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); font-family: 'Outfit', sans-serif; line-height: 1; transition: all 0.3s; } .stat-card:hover .stat-value { transform: scale(1.1); } .stat-label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'DM Sans', sans-serif; } /* Mode sombre pour profil */ body.dark-mode .calendrier-container, body.dark-mode .avis-container, body.dark-mode .stats-container { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-color: var(--border); } body.dark-mode .calendar-booking-card, body.dark-mode .review-card, body.dark-mode .stat-card { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); } body.dark-mode .calendar-booking-card:hover, body.dark-mode .review-card:hover, body.dark-mode .stat-card:hover { border-color: var(--accent); box-shadow: 0 12px 35px rgba(16, 185, 129, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ FIN DE LA SECTION CRITIQUE - PROFIL (CALENDRIER, AVIS, STATISTIQUES) ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ⚠️ SECTION CRITIQUE - FICHIERS ATTACHÉS DANS LES MESSAGES ⚠️ ═══════════════════════════════════════════════════════════════════════════ Cette section contient TOUS les styles pour : - Les fichiers attachés dans les messages (.message-file-attachment) - Le badge de fichier avant envoi (.file-attachment-badge) - Les boutons "Voir" et "Télécharger" (.btn-file-view, .btn-file-download) - Le modal d'aperçu de fichier (.file-preview-modal-*) ⚠️ ATTENTION : Ne pas supprimer cette section entière ! ⚠️ Si vous modifiez ce fichier, gardez cette section intacte. ═══════════════════════════════════════════════════════════════════════════ */ /* ========== FICHIERS ATTACHÉS DANS LES MESSAGES ========== */ .message-file-attachment { margin-top: 0.75rem; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); border: 2px solid rgba(99, 102, 241, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .message-file-attachment:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15); transform: translateY(-2px); } .file-preview-container { position: relative; overflow: hidden; } .file-preview-image { max-width: 200px; max-height: 200px; border-radius: 8px; object-fit: cover; display: block; transition: transform 0.3s; } .message-file-attachment:hover .file-preview-image { transform: scale(1.05); } .file-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); border-radius: 12px; color: white; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s; } .message-file-attachment:hover .file-icon { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); } .file-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; } .file-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); word-break: break-word; font-family: 'DM Sans', sans-serif; } .file-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .btn-file-view, .btn-file-download { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; font-family: 'DM Sans', sans-serif; position: relative; overflow: hidden; } .btn-file-view { background: linear-gradient(135deg, var(--accent) 0%, #059669 100%); color: white; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .btn-file-view::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn-file-view:hover::before { width: 300px; height: 300px; } .btn-file-view:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); border-color: rgba(255, 255, 255, 0.3); } .btn-file-download { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; box-shadow: 0 2px 8px rgba(10, 37, 64, 0.3); } .btn-file-download::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn-file-download:hover::before { width: 300px; height: 300px; } .btn-file-download:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10, 37, 64, 0.4); border-color: rgba(255, 255, 255, 0.3); } .btn-file-view:active, .btn-file-download:active { transform: translateY(0); } .btn-file-view i, .btn-file-download i { font-size: 0.9rem; transition: transform 0.3s; } .btn-file-view:hover i { transform: scale(1.2); } .btn-file-download:hover i { transform: translateY(2px); } /* Badge fichier attaché avant envoi */ .file-attachment-badge { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); border: 2px solid rgba(99, 102, 241, 0.3); border-radius: 12px; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-primary); animation: slideInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1); } .file-attachment-badge .file-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'DM Sans', sans-serif; } .file-attachment-badge .file-remove { background: none; border: none; color: var(--danger); cursor: pointer; padding: 0.5rem; border-radius: 8px; transition: all 0.3s; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .file-attachment-badge .file-remove:hover { background: rgba(220, 38, 38, 0.1); transform: rotate(90deg); } /* Modal d'aperçu de fichier */ .file-preview-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); z-index: 10000; animation: fadeIn 0.3s; } .file-preview-modal.active { display: flex; align-items: center; justify-content: center; } .file-preview-modal-content { position: relative; max-width: 95vw; max-height: 95vh; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .file-preview-header { position: absolute; top: 1rem; right: 1rem; z-index: 10; } .file-preview-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s; backdrop-filter: blur(10px); } .file-preview-close:hover { background: rgba(220, 38, 38, 0.8); transform: rotate(90deg) scale(1.1); } .file-preview-body { padding: 1rem; max-height: 90vh; overflow: auto; } .file-preview-container-modal { display: flex; align-items: center; justify-content: center; min-height: 400px; max-height: 85vh; } .file-preview-image-modal { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .file-preview-iframe { width: 100%; min-height: 600px; max-height: 90vh; border: none; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .file-preview-info { text-align: center; padding: 1rem; margin-top: 1rem; } .file-preview-name { font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; font-family: 'DM Sans', sans-serif; } .btn-file-download-modal { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 0.5rem; font-family: 'DM Sans', sans-serif; } .btn-file-download-modal:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); } /* Mode sombre pour fichiers */ body.dark-mode .message-file-attachment { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); border-color: rgba(99, 102, 241, 0.3); } body.dark-mode .file-attachment-badge { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%); border-color: rgba(99, 102, 241, 0.4); color: var(--text-primary); } body.dark-mode .file-preview-modal-content { background: var(--bg-secondary); color: var(--text-primary); } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* ═══════════════════════════════════════════════════════════════════════════ FIN DE LA SECTION CRITIQUE - FICHIERS ATTACHÉS DANS LES MESSAGES ═══════════════════════════════════════════════════════════════════════════ */ /* ========================================= THEME CYBERPUNK - PAGE D'ACCUEIL ========================================= */ :root { --cyber-dark: #050508; --cyber-purple: #a855f7; --cyber-pink: #d946ef; --cyber-blue: #3b82f6; --cyber-text: #ffffff; --cyber-text-muted: #94a3b8; --cyber-glow: 0 0 20px rgba(168, 85, 247, 0.5); } /* Section Accueil Spécifique */ #section-accueil.cyberpunk-theme { background-color: var(--cyber-dark); color: var(--cyber-text); min-height: 100vh; overflow-x: hidden; padding-top: 0; } /* Hero Cyberpunk */ .hero-cyberpunk { position: relative; padding: 140px 2rem 4rem; min-height: 90vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top right, #1e1b4b 0%, transparent 40%), radial-gradient(circle at bottom left, #312e81 0%, transparent 40%); overflow: hidden; } .stars-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px), radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px), radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px); background-size: 550px 550px, 350px 350px, 250px 250px; background-position: 0 0, 40px 60px, 130px 270px; opacity: 0.3; z-index: 0; pointer-events: none; } .hero-content-wrapper { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; width: 100%; gap: 4rem; z-index: 1; } @media (max-width: 968px) { .hero-content-wrapper { flex-direction: column; text-align: center; padding-top: 2rem; } } /* Texte Hero */ .hero-text-content { flex: 1; max-width: 600px; } .hero-title { font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.02em; color: white; } @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } } .gradient-text { background: linear-gradient(135deg, #e0e7ff 0%, var(--cyber-purple) 50%, var(--cyber-pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.3)); } .hero-subtitle { font-size: 1.2rem; color: var(--cyber-text-muted); margin-bottom: 2.5rem; font-weight: 300; } /* Boutons Néon */ .hero-cta { display: flex; gap: 1.5rem; margin-bottom: 3rem; } @media (max-width: 968px) { .hero-cta { justify-content: center; } } .btn-neon-primary { background: linear-gradient(135deg, var(--cyber-purple), var(--cyber-pink)); color: white; border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4); text-transform: none; } .btn-neon-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(217, 70, 239, 0.6); } .btn-neon-secondary { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.2); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); text-transform: none; } .btn-neon-secondary:hover { border-color: var(--cyber-purple); box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.1); } /* Stats Cyberpunk */ .hero-stats-cyberpunk { display: flex; align-items: center; gap: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 968px) { .hero-stats-cyberpunk { justify-content: center; flex-wrap: wrap; gap: 1rem; } .stat-divider { display: none; } } .stat-item-cyber { display: flex; flex-direction: column; } .stat-number { font-size: 2rem; font-weight: 700; color: white; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } .stat-label { font-size: 0.9rem; color: var(--cyber-text-muted); } .stat-divider { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.1); } /* Visuel 3D Simulée */ .hero-visual { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; height: 500px; } .neon-rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(60deg); width: 400px; height: 400px; pointer-events: none; } .ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); } .ring-1 { width: 300px; height: 300px; border-color: rgba(168, 85, 247, 0.3); animation: spin 10s linear infinite; } .ring-2 { width: 400px; height: 400px; border-color: rgba(217, 70, 239, 0.2); animation: spin 15s linear infinite reverse; } .ring-3 { width: 500px; height: 500px; border: 1px dashed rgba(255, 255, 255, 0.1); animation: spin 20s linear infinite; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .chess-pieces-container { position: relative; display: flex; align-items: center; justify-content: center; gap: 2rem; transform-style: preserve-3d; } .chess-piece-3d { font-size: 8rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 20px rgba(168, 85, 247, 0.8), 0 0 40px rgba(217, 70, 239, 0.6); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)); animation: float 4s ease-in-out infinite; display: flex; align-items: center; justify-content: center; } .chess-piece-3d i { background: linear-gradient(to bottom, #fff, #e9d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; /* Fallback pour visibilité si background-clip ne marche pas */ text-shadow: 0 0 0 white; } /* Hack pour surcharger le color: transparent qui cache l'icone FontAwesome */ .chess-piece-3d i::before { background: linear-gradient(to bottom, #fff, #e9d5ff); -webkit-background-clip: text; background-clip: text; /*color: transparent; pas supporté sur ::before */ color: white; } .piece-center { font-size: 12rem; z-index: 2; animation-delay: 0s; filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.6)); } .piece-center i { color: #f0abfc !important; text-shadow: 0 0 30px rgba(216, 180, 254, 0.8); background: none; } .piece-left { animation-delay: -1s; transform: scale(0.8) translateX(20px); opacity: 0.8; } .piece-right { animation-delay: -2s; transform: scale(0.8) translateX(-20px); opacity: 0.8; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* Features Cyberpunk */ .features-container-cyber { padding: 4rem 2rem; position: relative; z-index: 2; margin-top: -80px; background: linear-gradient(to bottom, transparent, var(--cyber-dark) 20%); } .features-grid-cyber { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 6rem; } .feature-card-cyber { background: rgba(30, 27, 75, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 2rem; text-align: center; backdrop-filter: blur(10px); transition: all 0.3s ease; } .feature-card-cyber:hover { background: rgba(30, 27, 75, 0.8); border-color: var(--cyber-purple); box-shadow: 0 0 30px rgba(168, 85, 247, 0.15); transform: translateY(-5px); } .feature-icon-cyber { font-size: 1.8rem; color: var(--cyber-pink); margin-bottom: 1rem; background: rgba(217, 70, 239, 0.1); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin: 0 auto 1rem; transition: all 0.3s ease; border: 1px solid rgba(217, 70, 239, 0.2); } .feature-card-cyber:hover .feature-icon-cyber { background: var(--cyber-pink); color: white; box-shadow: 0 0 20px rgba(217, 70, 239, 0.4); } .feature-card-cyber h3 { color: white; font-size: 1rem; font-weight: 600; margin: 0; } /* Top Coaches Cyberpunk */ .top-coaches-cyber { padding: 2rem 0; } .section-title-cyber { text-align: center; font-size: 2.5rem; color: white; margin-bottom: 3rem; font-weight: 700; } /* Adaptation des cartes coach pour le thème cyberpunk */ #section-accueil.cyberpunk-theme .coach-card { background: #1e1b4b; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } #section-accueil.cyberpunk-theme .coach-card:hover { border-color: var(--cyber-pink); box-shadow: 0 0 25px rgba(217, 70, 239, 0.2), 0 10px 30px rgba(0, 0, 0, 0.3); transform: translateY(-5px); } #section-accueil.cyberpunk-theme .coach-name { color: white; } #section-accueil.cyberpunk-theme .coach-price { color: var(--cyber-purple); font-weight: 700; } #section-accueil.cyberpunk-theme .btn-secondary { border-color: var(--cyber-purple); color: white; background: rgba(168, 85, 247, 0.1); } #section-accueil.cyberpunk-theme .btn-secondary:hover { background: var(--cyber-purple); color: white; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); } #section-accueil.cyberpunk-theme .coach-rating { background: rgba(255, 255, 255, 0.1); color: #fbbf24; } /* ================================================================ XVIII. NOUVEAU DESIGN (LAUNCHPAD) ================================================================ */ /* --- Navbar New --- */ .navbar-new { position: fixed; top: 0; left: 0; right: 0; width: 100% !important; z-index: 1000; background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(168, 85, 247, 0.2); height: 4rem; display: flex; align-items: center; transition: all 0.3s; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 0 !important; margin: 0 !important; } .navbar-new.scrolled { background-color: rgba(15, 23, 42, 0.95); border-bottom-color: rgba(168, 85, 247, 0.3); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); } .navbar-container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; } .nav-logo-new { display: flex; align-items: center; gap: 0; font-weight: 700; font-size: 1.25rem; color: white; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0.5rem; margin-left: 1rem; border-radius: 0.5rem; } .nav-logo-new:hover { transform: translateY(-2px); } .logo-icon-box { width: 4rem; height: 4rem; background: transparent; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); overflow: hidden; } .nav-logo-new:hover .logo-icon-box { transform: rotate(5deg) scale(1.05); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5); } .logo-icon-box svg { color: white; width: 1.5rem; height: 1.5rem; } .logo-icon-box .logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.5rem; } .nav-logo-text { background: linear-gradient(135deg, #ffffff, hsl(271 91% 75%)); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800; letter-spacing: -0.02em; transition: all 0.3s; } .nav-logo-new:hover .nav-logo-text { background: linear-gradient(135deg, #ffffff, hsl(271 91% 65%)); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .nav-links-desktop { display: none; } @media (min-width: 768px) { .nav-links-desktop { display: flex; flex: 1; justify-content: space-evenly; align-items: center; gap: 0; margin: 0 1rem; } } .nav-link-item { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; font-weight: 500; position: relative; padding: 0.5rem 0.75rem; border-radius: 0.5rem; } .nav-link-item::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 80%; height: 2px; background: linear-gradient(90deg, hsl(271 91% 65%), hsl(271 91% 75%)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; } .nav-link-item:hover { color: #ffffff !important; background: rgba(168, 85, 247, 0.1); transform: translateY(-2px); } .nav-link-item:hover::before { transform: translateX(-50%) scaleX(1); } .nav-link-item:active { transform: translateY(0); background: rgba(168, 85, 247, 0.2); } .nav-link-item.active { color: hsl(271 91% 65%) !important; background: rgba(168, 85, 247, 0.15); } .nav-link-item.active::before { transform: translateX(-50%) scaleX(1); } /* --- Hero New --- */ .hero-new { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 5rem; padding-bottom: 2rem; /* Reduced padding */ overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.9), #0f172a); z-index: 1; } .hero-content-new { position: relative; z-index: 10; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; perspective: 1000px; } @media (min-width: 1024px) { .hero-content-new { grid-template-columns: 1fr 1fr; } } .hero-text h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 800; margin-bottom: 1.5rem; color: white; } @media (min-width: 768px) { .hero-text h1 { font-size: 3.5rem; } } @media (min-width: 1024px) { .hero-text h1 { font-size: 4.5rem; } } .hero-subtitle-new { font-size: 1.125rem; color: #94a3b8; /* text-muted-foreground */ margin-bottom: 2rem; max-width: 600px; } .hero-stats-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(148, 163, 184, 0.1); } .stat-item-new { text-align: center; } .stat-number-new { font-size: 1.875rem; font-weight: 700; background: linear-gradient(to right, #ffffff, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label-new { font-size: 0.875rem; color: #94a3b8; } /* --- Buttons New --- */ /* Navbar Buttons Specific Styles */ #authButtons .btn-primary-new, #authButtons .btn-outline-new { padding: 0.625rem 1.25rem; font-size: 0.95rem; font-weight: 600; border-radius: 0.5rem; letter-spacing: 0.02em; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #authButtons .btn-primary-new { background: linear-gradient(135deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); border: none; } #authButtons .btn-primary-new:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5); background: linear-gradient(135deg, hsl(271, 91%, 70%), hsl(271, 91%, 80%)); } #authButtons .btn-outline-new { border: 1.5px solid hsl(271, 91%, 65%); background: transparent; } #authButtons .btn-outline-new:hover { background: rgba(168, 85, 247, 0.1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2); } /* Default Button Styles */ .btn-new { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; text-decoration: none; position: relative; } /* Boutons agrandis pour le hero */ .hero-new .btn-new { padding: 1rem 2rem; font-size: 1.125rem; border-radius: 0.75rem; min-height: 3.5rem; } .btn-primary-new { background: linear-gradient(135deg, hsl(271 91% 65%), hsl(271 91% 75%)); color: white; box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); position: relative; overflow: hidden; } .btn-primary-new::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-primary-new:hover::before { left: 100%; } .btn-primary-new:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5); } .btn-primary-new:active { transform: translateY(0); box-shadow: 0 2px 15px rgba(168, 85, 247, 0.4); } .btn-outline-new { background: transparent; border: 1px solid hsl(271 91% 65%); color: hsl(271 91% 65%); position: relative; overflow: hidden; } .btn-outline-new::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: rgba(168, 85, 247, 0.1); transition: width 0.3s; z-index: 0; } .btn-outline-new:hover::before { width: 100%; } .btn-outline-new:hover { background: rgba(168, 85, 247, 0.1); border-color: hsl(271 91% 75%); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } .btn-outline-new:active { transform: translateY(0); } .btn-outline-new span, .btn-outline-new i { position: relative; z-index: 1; } /* Notification Button */ #notifBtn { position: relative; transition: all 0.3s; } #notifBtn:hover { transform: translateY(-2px); color: hsl(271 91% 65%); } #notifBtn:active { transform: translateY(0) scale(0.95); animation: bellRing 0.3s; } @keyframes bellRing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } } /* --- Why Kaptur Section --- */ .section-new { padding-top: 2rem; /* Reduced from 6rem */ padding-bottom: 1rem; /* Reduced from 6rem to 1rem */ position: relative; background-color: var(--bg-primary); } .section-title-new { text-align: center; margin-bottom: 4rem; } .section-title-new h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; color: white; } .features-grid-new { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } .why-kaptur-stats { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 64rem; margin-left: auto; margin-right: auto; padding: 0 1rem; } @media (min-width: 768px) { .features-grid-new { grid-template-columns: repeat(2, 1fr); } .why-kaptur-stats { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .features-grid-new { grid-template-columns: repeat(4, 1fr); } } .feature-card-new { background-color: rgba(30, 41, 59, 0.5); /* bg-card */ border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 1rem; padding: 2rem; transition: all 0.3s; position: relative; overflow: hidden; } .feature-card-new:hover { transform: translateY(-0.5rem); border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .feature-icon-box { width: 4rem; height: 4rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.05)); } .feature-card-new h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: white; } .feature-card-new p { color: #94a3b8; line-height: 1.6; } /* Feature Cards with Color Gradients */ .feature-card-group { position: relative; overflow: hidden; } .feature-gradient-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; z-index: 0; } .feature-card-group:hover .feature-gradient-bg { opacity: 0.1; } .feature-gradient-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); } .feature-gradient-green { background: linear-gradient(135deg, #10b981, #059669); } .feature-gradient-purple { background: linear-gradient(135deg, #a855f7, #9333ea); } .feature-gradient-amber { background: linear-gradient(135deg, #f59e0b, #d97706); } .feature-card-content { position: relative; z-index: 10; } .feature-icon-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; } .feature-icon-green { background: linear-gradient(135deg, #10b981, #059669) !important; } .feature-icon-purple { background: linear-gradient(135deg, #a855f7, #9333ea) !important; } .feature-icon-amber { background: linear-gradient(135deg, #f59e0b, #d97706) !important; } .feature-card-group:hover .feature-icon-box { transform: scale(1.1); } .feature-card-group:hover h3 { color: hsl(271 91% 65%); } .feature-corner-decoration { position: absolute; top: 0; right: 0; width: 5rem; height: 5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), transparent); border-radius: 0 0 0 100%; opacity: 0; transition: opacity 0.3s; } .feature-card-group:hover .feature-corner-decoration { opacity: 1; } /* --- Top Coaches Section (Wrapper) --- */ .top-coaches-new { padding-top: 1rem; /* Reduced from 6rem to 1rem */ padding-bottom: 1rem; /* Reduced from 6rem to 1rem */ background: linear-gradient(to bottom, rgba(30, 41, 59, 0.3), var(--bg-primary)); } /* --- Footer New --- */ .footer-new { background-color: #020617; /* Slate-950 */ color: white; padding-top: 4rem; padding-bottom: 2rem; border-top: 1px solid rgba(148, 163, 184, 0.1); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: 1280px; margin: 0 auto; padding: 0 1rem; margin-bottom: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } .footer-col h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; color: white; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.75rem; } .footer-links a { color: #94a3b8; text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: #a855f7; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(148, 163, 184, 0.1); color: #64748b; font-size: 0.875rem; } /* --- Animations --- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 6s ease-in-out infinite; } /* --- Calendar Preview (Hero Right) --- */ .calendar-preview { position: relative; display: none; transform-style: preserve-3d; transition: transform 0.2s ease-out; } @media (min-width: 1024px) { .calendar-preview { display: block; } } .calendar-card { background: rgba(30, 41, 59, 0.9); backdrop-filter: blur(20px); border: 2px solid rgba(168, 85, 247, 0.3); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 0 40px rgba(168, 85, 247, 0.3); transform-style: preserve-3d; position: relative; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-bottom: 1rem; } .calendar-day { text-align: center; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0.5rem; padding: 0.5rem 0.25rem; min-height: auto; } .calendar-time-slots { max-height: 24rem; overflow-y: auto; padding-right: 0.5rem; } .time-slot { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-radius: 0.75rem; margin-bottom: 0.5rem; transition: all 0.2s; } .time-slot.available { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); cursor: pointer; } .time-slot.available:hover { background: rgba(168, 85, 247, 0.2); } .time-slot.booked { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); opacity: 0.6; } .time-slot.break { background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.3); opacity: 0.4; } .calendar-badge { position: absolute; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 700; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-out; transform-style: preserve-3d; } .calendar-badge-price { top: -1rem; right: -1rem; background: linear-gradient(135deg, hsl(45 100% 51%), hsl(45 100% 60%)); color: #0f172a; } .calendar-badge-rating { bottom: -1rem; left: -1rem; background: linear-gradient(135deg, hsl(271 91% 65%), hsl(271 91% 75%)); color: white; display: flex; align-items: center; gap: 0.5rem; } /* --- How It Works Section --- */ .how-it-works-section { padding-top: 1rem; /* Reduced from 6rem to 1rem */ padding-bottom: 1rem; /* Reduced from 6rem to 1rem */ background-color: var(--bg-primary); position: relative; overflow: hidden; } .how-it-works-container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; } .how-it-works-timeline { position: relative; padding: 3rem 0; } /* Timeline line (background) */ .timeline-line { position: absolute; left: 2.5rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, rgba(168, 85, 247, 0.3), rgba(251, 191, 36, 0.3)); z-index: 0; } @media (min-width: 768px) { .timeline-line { left: 50%; transform: translateX(-50%); } } /* Animated progress line */ .timeline-progress { position: absolute; left: 2.5rem; top: 0; width: 2px; background: linear-gradient(to bottom, hsl(271 91% 65%), hsl(45 100% 51%)); transition: height 1s ease-out; z-index: 1; } @media (min-width: 768px) { .timeline-progress { left: 50%; transform: translateX(-50%); } } .steps-container { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 6rem; } .step-item { position: relative; display: flex; align-items: center; transition: all 0.7s; min-height: 8rem; width: 100%; } .step-item.hidden { opacity: 0; transform: translateY(2.5rem); } .step-item.visible { opacity: 1; transform: translateY(0); } /* Step Circle (always centered on timeline) */ .step-circle { position: absolute; left: 2.5rem; transform: translateX(-50%); width: 5rem; height: 5rem; background: linear-gradient(135deg, hsl(271 91% 65%), hsl(45 100% 51%)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; box-shadow: 0 0 40px rgba(168, 85, 247, 0.3); transition: all 0.5s; z-index: 20; flex-shrink: 0; } @media (min-width: 768px) { .step-circle { left: 50%; } } .step-item.hidden .step-circle { transform: translateX(-50%) scale(0) rotate(180deg); } .step-item.visible .step-circle { transform: translateX(-50%) scale(1) rotate(0deg); } /* Step Content Left (Step 1 & 3) */ .step-content-left-group { display: flex; align-items: center; gap: 1.5rem; margin-right: auto; padding-left: 0; padding-right: 2rem; } @media (min-width: 768px) { .step-content-left-group { margin-right: 0; padding-right: 0; max-width: calc(50% - 4rem); margin-left: 0; } } /* Step Content Right (Step 2) */ .step-content-right-group { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; padding-left: 2rem; padding-right: 0; flex-direction: row; } @media (min-width: 768px) { .step-content-right-group { margin-left: auto; padding-left: 0; padding-right: 0; max-width: calc(50% - 4rem); justify-content: flex-end; } } .step-text-content { flex: 1; } .step-text-content h3 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; } .step-text-content p { font-size: 1.125rem; color: #94a3b8; line-height: 1.6; } .step-icon-card { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 1rem; padding: 1.25rem; transition: all 0.3s; flex-shrink: 0; } .step-icon-card:hover { transform: translateY(-0.25rem); border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .step-icon-box { width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(251, 191, 36, 0.2)); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; } .step-icon-box i { font-size: 1.75rem; color: hsl(271 91% 65%); } /* --- Testimonials Section --- */ .testimonials-section { padding-top: 1rem; /* Reduced from 6rem to 1rem */ padding-bottom: 6rem; background-color: var(--bg-primary); } .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 1rem; padding: 2rem; transition: all 0.3s; } .testimonial-card:hover { transform: translateY(-0.5rem); border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .testimonial-rating { display: flex; gap: 0.25rem; margin-bottom: 1rem; } .testimonial-rating i { color: #fbbf24; font-size: 1.25rem; } .testimonial-comment { color: #94a3b8; line-height: 1.75; font-style: italic; margin-bottom: 1.5rem; } .testimonial-user { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(148, 163, 184, 0.1); } .testimonial-avatar { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(168, 85, 247, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- CTA Section --- */ .cta-section { padding: 6rem 0; position: relative; overflow: hidden; } .cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.6)); z-index: 1; } .cta-content { position: relative; z-index: 10; max-width: 48rem; margin: 0 auto; text-align: center; padding: 0 1rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .cta-content h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } @media (min-width: 768px) { .cta-content h2 { font-size: 3.75rem; } } .cta-content p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } @media (min-width: 768px) { .cta-content p { font-size: 1.5rem; } } /* --- Count Up Animation --- */ .stat-number-new { transition: all 0.3s; } /* --- Footer Social Icons --- */ .footer-social { display: flex; gap: 1rem; margin-top: 1rem; } .footer-social a { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: rgba(148, 163, 184, 0.1); color: #94a3b8; transition: all 0.2s; } .footer-social a:hover { background: rgba(168, 85, 247, 0.2); color: #a855f7; transform: translateY(-2px); } .footer-social a i { font-size: 1.25rem; } /* ================================================================ SECTION TROUVER UN COACH - NOUVEAU DESIGN (COACH CONNECT ELITE) ================================================================ */ /* Container */ .search-container-new { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem; } /* Header */ .search-header-new { margin-bottom: 2rem; animation: fadeInUp 0.6s ease-out; } .search-title-new { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.75rem; } .search-subtitle-new { font-size: 1.125rem; color: #94a3b8; } /* Mobile Filter Toggle */ .mobile-filter-toggle-new { display: none; margin-bottom: 1rem; } .btn-filter-mobile-new { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0.75rem; color: white; font-weight: 600; cursor: pointer; transition: all 0.3s; } .btn-filter-mobile-new:hover { background: rgba(30, 41, 59, 0.7); border-color: rgba(168, 85, 247, 0.3); } .btn-filter-mobile-new .flex { display: flex; align-items: center; gap: 0.5rem; } /* Search Layout */ .search-layout-new { display: flex; gap: 1.5rem; align-items: flex-start; } /* Filters Panel */ .filters-panel-new { width: 320px; flex-shrink: 0; } .filters-panel-content-new { background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); position: sticky; top: 5rem; max-height: calc(100vh - 7rem); overflow-y: auto; } .filters-title-new { font-size: 1rem; font-weight: 700; color: white; margin-bottom: 1.5rem; } .filter-group-new { margin-bottom: 1.25rem; } .filter-label-new { display: block; font-size: 0.75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .filter-input-new { width: 100%; padding: 0.625rem 0.75rem; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0.5rem; color: white; font-size: 0.875rem; transition: all 0.3s; } .filter-input-new:focus { outline: none; border-color: hsl(271, 91%, 65%); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); } .filter-input-new::placeholder { color: #64748b; } .range-inputs-new { display: flex; gap: 0.5rem; } .range-inputs-new .filter-input-new { flex: 1; min-width: 0; } /* Mode Toggle */ .mode-toggle-group-new { display: flex; gap: 0.5rem; } .mode-toggle-btn-new { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.75rem; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0.5rem; color: white; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mode-toggle-btn-new:hover { border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.05); } .mode-toggle-btn-new.active { background: rgba(168, 85, 247, 0.2) !important; border-color: hsl(271, 91%, 65%) !important; color: hsl(271, 91%, 65%) !important; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2); transform: scale(1.02); } .mode-toggle-btn-new i { font-size: 0.875rem; } /* Tag Select Group */ .tag-select-group-new { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .tag-select-btn-new { padding: 0.625rem 0.75rem; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0.5rem; color: white; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; } .tag-select-btn-new:hover { border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.05); } .tag-select-btn-new.active { background: rgba(168, 85, 247, 0.2) !important; border-color: hsl(271, 91%, 65%) !important; color: hsl(271, 91%, 65%) !important; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2); transform: scale(1.02); } /* Distance Slider */ .distance-slider-container-new { margin-top: 0.5rem; padding: 0 0.25rem; } .distance-slider-new { width: 100%; height: 4px; /* Reduced height */ border-radius: 2px; background: rgba(148, 163, 184, 0.2); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .distance-slider-new::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; /* Reduced size */ height: 14px; /* Reduced size */ border-radius: 50%; background: hsl(271, 91%, 65%); cursor: pointer; border: 2px solid #1e293b; /* Dark border for contrast */ box-shadow: 0 0 0 1px hsl(271, 91%, 65%); transition: transform 0.2s; margin-top: -5px; /* Center vertically relative to thinner track */ } .distance-slider-new::-webkit-slider-thumb:hover { transform: scale(1.2); } .distance-slider-new::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: transparent; /* Handled by JS gradient */ border-radius: 2px; } .distance-slider-new::-moz-range-thumb { width: 18px; height: 18px; background: hsl(271, 91%, 65%); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); } .distance-label-new { text-align: center; font-size: 0.875rem; color: #94a3b8; margin-top: 0.5rem; } /* Rating Slider */ .rating-slider-container-new { margin-top: 0.5rem; } .rating-slider-new { width: 100%; height: 6px; border-radius: 3px; background: rgba(148, 163, 184, 0.2); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; margin-bottom: 0.75rem; } .rating-slider-new::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: hsl(271, 91%, 65%); border-radius: 50%; cursor: pointer; box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); } .rating-slider-new::-moz-range-thumb { width: 18px; height: 18px; background: hsl(271, 91%, 65%); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); } .rating-display-new { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .rating-stars-new { display: flex; gap: 0.125rem; align-items: center; } .star-wrapper-new { position: relative; width: 1.25rem; height: 1.25rem; display: inline-block; margin-right: 0.125rem; } .star-bg-new { position: absolute; top: 0; left: 0; font-size: 1.25rem; color: #64748b; z-index: 1; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; } .star-fill-new { position: absolute; top: 0; left: 0; overflow: hidden; z-index: 2; height: 100%; width: 0%; transition: width 0.3s ease; } .star-filled-new { font-size: 1.25rem; color: #fbbf24 !important; width: 1.25rem; height: 1.25rem; display: block; line-height: 1.25rem; -webkit-text-fill-color: #fbbf24 !important; } .star-fill-new .star-filled-new { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; } .rating-value-new { font-size: 0.875rem; font-weight: 700; color: white; background: rgba(168, 85, 247, 0.1); padding: 0.25rem 0.625rem; border-radius: 0.375rem; min-width: 3rem; text-align: center; } /* Filter Actions */ .filter-actions-new { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(148, 163, 184, 0.1); display: flex; flex-direction: column; gap: 0.75rem; } .filter-actions-new:has(.btn-outline-new:only-child) { align-items: stretch; } .btn-block-new { width: 100%; padding: 0.875rem 1.5rem; font-size: 0.95rem; font-weight: 600; border-radius: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: relative; overflow: hidden; } .filter-actions-new .btn-primary-new { background: linear-gradient(135deg, hsl(271 91% 65%), hsl(271 91% 75%)); color: white; border: none; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } .filter-actions-new .btn-primary-new::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .filter-actions-new .btn-primary-new:hover::before { left: 100%; } .filter-actions-new .btn-primary-new:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(168, 85, 247, 0.5); } .filter-actions-new .btn-primary-new:active { transform: translateY(0); box-shadow: 0 2px 15px rgba(168, 85, 247, 0.4); } .filter-actions-new .btn-outline-new { background: transparent; border: 1.5px solid rgba(168, 85, 247, 0.4); color: hsl(271 91% 65%); position: relative; } .filter-actions-new .btn-outline-new::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: rgba(168, 85, 247, 0.1); transition: width 0.3s; z-index: 0; } .filter-actions-new .btn-outline-new:hover::before { width: 100%; } .filter-actions-new .btn-outline-new:hover { border-color: hsl(271 91% 75%); color: hsl(271 91% 75%); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3); } .filter-actions-new .btn-outline-new:active { transform: translateY(0); } .filter-actions-new .btn-outline-new span, .filter-actions-new .btn-primary-new span, .filter-actions-new .btn-outline-new i, .filter-actions-new .btn-primary-new i { position: relative; z-index: 1; } .filter-actions-new .btn-primary-new i, .filter-actions-new .btn-outline-new i { font-size: 1rem; transition: transform 0.3s; } .filter-actions-new .btn-primary-new:hover i, .filter-actions-new .btn-outline-new:hover i { transform: scale(1.1); } /* Search Results */ .search-results-new { flex: 1; min-width: 0; } .results-header-new { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(148, 163, 184, 0.1); } @media (min-width: 640px) { .results-header-new { flex-direction: row; align-items: center; justify-content: space-between; } } .results-count-new { font-weight: 600; color: #94a3b8; } .sort-container-new { display: flex; align-items: center; gap: 0.5rem; } .sort-label-new { font-size: 0.875rem; color: #94a3b8; white-space: nowrap; } @media (max-width: 639px) { .sort-label-new { display: none; } } .select-wrapper-new { position: relative; min-width: 180px; max-width: 220px; flex: 1; } .sort-select-new { display: none; } /* Custom Select Trigger */ .custom-select-trigger-new { width: 100%; padding: 0.625rem 2.5rem 0.625rem 0.75rem; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0.5rem; color: white; font-size: 0.875rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); user-select: none; position: relative; overflow: hidden; } .custom-select-trigger-new::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent); transition: left 0.5s; } .custom-select-trigger-new:hover::before { left: 100%; } .custom-select-trigger-new:hover { border-color: rgba(168, 85, 247, 0.5); background: rgba(30, 41, 59, 0.7); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .custom-select-trigger-new.active { border-color: hsl(271, 91%, 65%); background: rgba(30, 41, 59, 0.8); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15), 0 6px 20px rgba(168, 85, 247, 0.25); } .custom-select-value-new { flex: 1; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; } .select-arrow-new { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; font-size: 0.75rem; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s; } .custom-select-trigger-new.active .select-arrow-new { transform: translateY(-50%) rotate(180deg); color: hsl(271, 91%, 65%); } .custom-select-trigger-new:hover .select-arrow-new { color: hsl(271, 91%, 65%); } /* Custom Dropdown */ .custom-select-dropdown-new { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background: rgba(30, 41, 59, 0.98); backdrop-filter: blur(20px); border: 1.5px solid rgba(168, 85, 247, 0.25); border-radius: 0.75rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 85, 247, 0.15); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; overflow: hidden; max-height: 0; } .custom-select-dropdown-new.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); max-height: 400px; } /* Custom Options */ .custom-select-option-new { padding: 0.875rem 1rem; color: rgba(255, 255, 255, 0.9); cursor: pointer; display: flex; align-items: center; gap: 0.75rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border-bottom: 1px solid rgba(148, 163, 184, 0.08); font-size: 0.875rem; font-weight: 500; overflow: hidden; } .custom-select-option-new:last-child { border-bottom: none; } .custom-select-option-new::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), transparent); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } .custom-select-option-new:hover { background: rgba(168, 85, 247, 0.12); padding-left: 1.25rem; color: hsl(271, 91%, 75%); transform: translateX(4px); } .custom-select-option-new:hover::before { width: 4px; } .custom-select-option-new:active { background: rgba(168, 85, 247, 0.2); transform: translateX(4px) scale(0.98); } .custom-select-option-new.selected { background: rgba(168, 85, 247, 0.18); color: hsl(271, 91%, 65%); border-left: 3px solid hsl(271, 91%, 65%); padding-left: calc(1rem - 3px); font-weight: 600; } .custom-select-option-new.selected::before { width: 0; } .custom-select-option-new i:first-child { width: 1.125rem; text-align: center; color: hsl(271, 91%, 65%); font-size: 0.875rem; transition: transform 0.25s, color 0.25s; z-index: 1; position: relative; } .custom-select-option-new:hover i:first-child { transform: scale(1.15); color: hsl(271, 91%, 75%); } .custom-select-option-new.selected i:first-child { color: hsl(271, 91%, 65%); transform: scale(1.1); } .custom-select-option-new span { flex: 1; z-index: 1; position: relative; } .option-check-new { opacity: 0; transform: scale(0) rotate(-90deg); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: hsl(271, 91%, 65%); font-size: 0.875rem; z-index: 1; position: relative; } .custom-select-option-new.selected .option-check-new { opacity: 1; transform: scale(1) rotate(0deg); } /* Animation pour l'apparition des options */ .custom-select-dropdown-new.show .custom-select-option-new { animation: slideInOption 0.3s ease-out forwards; opacity: 0; } .custom-select-dropdown-new.show .custom-select-option-new:nth-child(1) { animation-delay: 0.03s; } .custom-select-dropdown-new.show .custom-select-option-new:nth-child(2) { animation-delay: 0.06s; } .custom-select-dropdown-new.show .custom-select-option-new:nth-child(3) { animation-delay: 0.09s; } .custom-select-dropdown-new.show .custom-select-option-new:nth-child(4) { animation-delay: 0.12s; } .custom-select-dropdown-new.show .custom-select-option-new:nth-child(5) { animation-delay: 0.15s; } @keyframes slideInOption { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } } /* Options styling */ .sort-select-new option { background-color: #1e293b; color: white; padding: 10px; } /* Empty State */ .empty-state-new { text-align: center; padding: 4rem 1rem; } .empty-state-new i { font-size: 4rem; color: #64748b; opacity: 0.5; margin-bottom: 1rem; } .empty-state-new p { font-size: 1.25rem; color: #94a3b8; margin-bottom: 1.5rem; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .animate-slide-in-left { animation: slideInLeft 0.4s ease-out; } /* Responsive */ @media (max-width: 1023px) { .mobile-filter-toggle-new { display: block; } .filters-panel-new { display: none; width: 100%; position: fixed; top: 4rem; left: 0; right: 0; bottom: 0; z-index: 100; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); padding: 1.5rem; overflow-y: auto; } .filters-panel-new.mobile-open { display: block; } .filters-panel-content-new { position: static; max-height: none; } .search-layout-new { flex-direction: column; } .search-results-new { width: 100%; } } /* ========== NOUVEAU MODAL DE RÉSERVATION (DESIGN RESERVATION) ========== */ /* Modal Container */ .booking-modal-new { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(10px); } .booking-modal-new.active { display: flex; animation: fadeIn 0.3s; } .booking-modal-content-new { max-width: 60rem; /* Réduit de 80rem à 60rem */ width: 90%; height: 85vh; /* Réduit de 95vh à 85vh */ background: rgba(15, 23, 42, 0.95); /* slate-900/95 */ border: 1px solid rgba(168, 85, 247, 0.2); /* purple-500/20 */ border-radius: 1rem; backdrop-filter: blur(20px); padding: 0; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); } /* Header */ .booking-modal-header-new { border-bottom: 1px solid rgba(168, 85, 247, 0.2); padding: 1rem 1.5rem; /* Réduit le padding vertical */ flex-shrink: 0; position: relative; } .booking-modal-close-new { position: absolute; top: 1rem; right: 1.5rem; background: transparent; border: none; color: #9ca3af; /* gray-400 */ font-size: 1.25rem; cursor: pointer; transition: color 0.2s; z-index: 10; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .booking-modal-close-new:hover { color: white; background: rgba(168, 85, 247, 0.1); } .booking-modal-title-new { text-align: center; color: white; font-size: 1.25rem; /* Réduit de 1.5rem */ font-weight: 600; margin-bottom: 0.75rem; /* Réduit de 1rem */ } /* Step Indicator */ .step-indicator-new { display: flex; align-items: center; justify-content: center; gap: 1rem; } .step-indicator-item-new { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .step-indicator-circle-new { width: 2.5rem; /* Réduit de 3rem */ height: 2.5rem; /* Réduit de 3rem */ border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s; background: #334155; /* slate-700 */ } .step-indicator-item-new.active .step-indicator-circle-new { background: linear-gradient(135deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5); } .step-indicator-item-new[data-step] .step-indicator-circle-new.completed { background: hsl(271, 91%, 65%); } .step-indicator-circle-new i { font-size: 1rem; /* Réduit de 1.25rem */ color: #9ca3af; } .step-indicator-item-new.active .step-indicator-circle-new i, .step-indicator-item-new[data-step] .step-indicator-circle-new.completed i { color: white; } .step-indicator-label-new { font-size: 0.875rem; color: #6b7280; /* gray-500 */ } .step-indicator-item-new.active .step-indicator-label-new { color: hsl(271, 91%, 75%); } .step-indicator-item-new[data-step] .step-indicator-label-new.completed { color: hsl(271, 91%, 65%); } .step-indicator-line-new { width: 3rem; /* Réduit de 4rem */ height: 2px; background: #334155; margin-bottom: 2rem; /* Réduit de 3rem */ position: relative; } .step-indicator-progress-new { height: 100%; background: linear-gradient(90deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); transition: width 0.3s; width: 0; } .step-indicator-progress-new.complete { width: 100%; } /* Body - Scrollable */ .booking-modal-body-new { flex: 1; overflow-y: auto; overflow-x: hidden; } .booking-steps-container-new { padding: 1.5rem; /* Réduit de 2rem */ max-width: 56rem; /* Réduit de 80rem */ margin: 0 auto; } /* Step Header */ .step-header-new { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; /* Réduit de 1.5rem */ } .step-icon-new { font-size: 1.25rem; /* Réduit de 1.5rem */ color: hsl(271, 91%, 75%); } .step-icon-box-new { width: 2.5rem; /* Réduit de 3rem */ height: 2.5rem; /* Réduit de 3rem */ border-radius: 0.625rem; /* Réduit de 0.75rem */ background: linear-gradient(135deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3); } .step-icon-box-new i { font-size: 1.25rem; /* Réduit de 1.5rem */ color: white; } .step-header-text-new { flex: 1; } .step-title-new { color: white; font-size: 1.25rem; /* Réduit de 1.5rem */ font-weight: 600; margin: 0; } .step-subtitle-new { color: #9ca3af; font-size: 0.875rem; margin: 0.25rem 0 0 0; } .duration-badge-new { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2)); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.625rem; /* Réduit de 0.75rem */ padding: 0.375rem 0.75rem; /* Réduit de 0.5rem 1rem */ } .duration-label-new { font-size: 0.625rem; color: #9ca3af; text-align: center; margin: 0 0 0.125rem 0; } .duration-value-new { color: white; font-weight: 700; text-align: center; margin: 0; font-size: 1rem; } /* Calendar Container */ .calendar-container-new { background: rgba(30, 41, 59, 0.5); /* slate-800/50 */ border-radius: 0.75rem; /* Réduit de 1rem */ padding: 0.75rem; /* Réduit encore plus */ border: 1px solid rgba(168, 85, 247, 0.1); max-width: 500px; /* Limite la largeur maximale */ margin: 0 auto; } .calendar-header-new { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; /* Réduit encore plus */ } .btn-nav-calendar-new { width: 1.75rem; /* Réduit encore plus */ height: 1.75rem; /* Réduit encore plus */ border-radius: 0.375rem; /* Réduit encore plus */ display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #9ca3af; cursor: pointer; transition: all 0.2s; } .btn-nav-calendar-new:hover { background: rgba(168, 85, 247, 0.2); color: white; } .btn-nav-calendar-new i { font-size: 0.875rem; /* Réduit encore plus */ } .calendar-month-new { color: white; font-size: 0.875rem; /* Réduit encore plus */ font-weight: 600; margin: 0; } .calendar-weekdays-new { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; /* Réduit encore plus */ margin-bottom: 0.5rem; /* Réduit encore plus */ } .calendar-weekdays-new span { text-align: center; font-size: 0.65rem; /* Réduit encore plus */ color: #9ca3af; font-weight: 500; padding: 0.125rem 0; /* Réduit encore plus */ } .booking-calendar-new { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; /* Réduit encore plus */ } .booking-calendar-new .calendar-day { aspect-ratio: 1; border-radius: 0.25rem; /* Réduit encore plus */ display: flex; align-items: center; justify-content: center; transition: all 0.2s; position: relative; background: transparent; border: none; color: white; cursor: pointer; font-weight: 500; font-size: 0.75rem !important; /* Réduit encore plus avec !important */ padding: 0.25rem; /* Ajout d'un petit padding */ min-height: 32px; /* Hauteur minimale réduite */ } .booking-calendar-new .calendar-day:hover:not(.disabled):not(.selected) { background: rgba(168, 85, 247, 0.2); transform: scale(1.05); } .booking-calendar-new .calendar-day.selected { background: linear-gradient(135deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); color: white; box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5); transform: scale(1.05); } .booking-calendar-new .calendar-day.disabled { color: #4b5563; /* gray-600 */ cursor: not-allowed; opacity: 0.5; } .booking-calendar-new .calendar-day.today::after { content: ''; position: absolute; bottom: 0.25rem; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: hsl(271, 91%, 75%); } /* Time Slots Container */ .time-slots-container-new { display: flex; flex-direction: column; gap: 2rem; } .time-period-section-new { display: flex; flex-direction: column; gap: 1rem; } .time-period-header-new { display: flex; align-items: center; gap: 0.75rem; } .time-period-icon-box-new { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .time-period-icon-box-new.morning { background: linear-gradient(135deg, #f59e0b, #f97316); /* amber-500 to orange-500 */ } .time-period-icon-box-new.afternoon { background: linear-gradient(135deg, #eab308, #f59e0b); /* yellow-500 to amber-500 */ } .time-period-icon-box-new.evening { background: linear-gradient(135deg, #f97316, #ec4899); /* orange-500 to pink-500 */ } .time-period-icon-box-new.night { background: linear-gradient(135deg, #6366f1, #a855f7); /* indigo-500 to purple-500 */ } .time-period-icon-box-new i { font-size: 1.25rem; color: white; } .time-period-title-new { color: white; font-weight: 500; font-size: 1rem; } .time-period-line-new { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.2), transparent); } .time-slots-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.75rem; } .time-slot-btn-new { position: relative; padding: 1rem; border-radius: 1rem; border: 2px solid; transition: all 0.3s; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; } .time-slot-btn-new:disabled { border-color: rgba(55, 65, 81, 0.5); background: rgba(30, 41, 59, 0.2); color: #4b5563; cursor: not-allowed; opacity: 0.5; } .time-slot-btn-new:not(:disabled):hover { transform: scale(1.05); } .time-slot-btn-new.start, .time-slot-btn-new.end { background: linear-gradient(135deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); border-color: rgba(196, 181, 253, 1); color: white; box-shadow: 0 20px 40px rgba(168, 85, 247, 0.5); transform: scale(1.05); z-index: 10; } .time-slot-btn-new.in-range { background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 85, 247, 0.4)); border-color: rgba(196, 181, 253, 0.6); color: white; box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3); } .time-slot-btn-new:not(:disabled):not(.start):not(.end):not(.in-range) { border-color: rgba(168, 85, 247, 0.2); color: white; } .time-slot-btn-new:not(:disabled):not(.start):not(.end):not(.in-range):hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2)); border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2); } .time-slot-icon-new { font-size: 1rem; transition: all 0.3s; } .time-slot-btn-new.start .time-slot-icon-new, .time-slot-btn-new.end .time-slot-icon-new { color: white; transform: scale(1.1); } .time-slot-btn-new.in-range .time-slot-icon-new { color: rgba(196, 181, 253, 1); } .time-slot-btn-new:not(:disabled):not(.start):not(.end):not(.in-range) .time-slot-icon-new { color: hsl(271, 91%, 75%); } .time-slot-time-new { font-weight: 600; font-size: 0.875rem; transition: all 0.3s; } .time-slot-btn-new.start .time-slot-time-new, .time-slot-btn-new.end .time-slot-time-new { font-size: 1rem; } .time-slot-label-new { font-size: 0.625rem; color: rgba(196, 181, 253, 0.8); margin-top: 0.25rem; } .time-slot-btn-new.start::after, .time-slot-btn-new.end::after { content: ''; position: absolute; inset: 0; border-radius: 1rem; background: linear-gradient(135deg, rgba(196, 181, 253, 0.2), rgba(168, 85, 247, 0.2)); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Mode Selection */ .mode-selection-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: 64rem; /* max-w-4xl */ margin: 0 auto; } .mode-option-new { padding: 2rem; border-radius: 1rem; border: 2px solid; transition: all 0.2s; background: transparent; cursor: pointer; text-align: left; } .mode-option-new:hover:not(.selected) { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.1); } .mode-option-new.selected { background: linear-gradient(135deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); border-color: rgba(196, 181, 253, 1); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5); transform: scale(1.05); } .mode-option-new:not(.selected) { border-color: rgba(168, 85, 247, 0.2); } .mode-option-content-new { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .mode-icon-circle-new { width: 5rem; height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .mode-option-new.selected .mode-icon-circle-new { background: rgba(255, 255, 255, 0.2); } .mode-option-new:not(.selected) .mode-icon-circle-new { background: rgba(168, 85, 247, 0.2); } .mode-icon-circle-new i { font-size: 2.5rem; color: white; } .mode-text-new h4 { color: white !important; /* Force la couleur blanche */ font-size: 1.25rem; margin: 0 0 0.5rem 0; font-weight: 600; } .mode-text-new p { color: rgba(255, 255, 255, 0.9) !important; /* Blanc avec opacité pour meilleure visibilité */ font-size: 0.875rem; margin: 0; } /* S'assurer que le texte est visible même quand non sélectionné */ .mode-option-new:not(.selected) .mode-text-new h4 { color: rgba(255, 255, 255, 0.95) !important; } .mode-option-new:not(.selected) .mode-text-new p { color: rgba(255, 255, 255, 0.85) !important; } /* Quand sélectionné, le texte reste blanc */ .mode-option-new.selected .mode-text-new h4, .mode-option-new.selected .mode-text-new p { color: white !important; } /* Location Input */ .location-input-new { animation: fadeIn 0.3s; padding-top: 1rem; max-width: 32rem; /* max-w-2xl */ margin: 0 auto; } .location-label-new { color: white; display: block; margin-bottom: 0.5rem; font-weight: 500; } .location-input-field-new { width: 100%; padding: 0.75rem; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem; color: white; font-size: 1rem; transition: all 0.2s; } .location-input-field-new:focus { outline: none; border-color: hsl(271, 91%, 65%); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1); } .location-input-field-new::placeholder { color: #64748b; } /* Step Actions */ .step-actions-new { display: flex; gap: 0.75rem; margin-top: 1.5rem; /* Réduit de 2rem */ padding-top: 1rem; /* Réduit de 1.5rem */ border-top: 1px solid rgba(168, 85, 247, 0.2); max-width: 28rem; /* max-w-md */ margin-left: auto; margin-right: auto; } .btn-continue-new { flex: 1; padding: 0.75rem 1.5rem; background: linear-gradient(90deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); color: white; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 3rem; } .btn-continue-new:hover:not(:disabled) { background: linear-gradient(90deg, hsl(271, 91%, 70%), hsl(271, 91%, 80%)); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4); } .btn-continue-new:disabled { opacity: 0.5; cursor: not-allowed; } .btn-back-new { flex: 1; padding: 0.75rem 1.5rem; background: transparent; color: white; border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 3rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-back-new:hover { background: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.5); } /* Booking Summary - Bottom Fixed */ .booking-summary-new { border-top: 1px solid rgba(168, 85, 247, 0.2); background: rgba(30, 41, 59, 0.7); /* slate-800/70 */ backdrop-filter: blur(10px); flex-shrink: 0; padding: 1rem; } .summary-empty-new { text-align: center; padding: 0.75rem; } .summary-empty-new i { font-size: 2rem; color: #4b5563; margin-bottom: 0.5rem; display: block; } .summary-empty-new p { color: #9ca3af; font-size: 0.75rem; margin: 0; } .summary-content-new { max-width: 80rem; /* max-w-6xl */ margin: 0 auto; } .summary-grid-new { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; } .summary-details-new { display: flex; flex-wrap: wrap; gap: 1.5rem 1.5rem; } .summary-item-new { display: flex; align-items: center; gap: 0.5rem; } .summary-avatar-new { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(168, 85, 247, 0.3); } .summary-icon-box-new { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(168, 85, 247, 0.2); display: flex; align-items: center; justify-content: center; } .summary-icon-box-new i { font-size: 1rem; color: hsl(271, 91%, 75%); } .summary-label-new { font-size: 0.625rem; color: #9ca3af; margin: 0; } .summary-value-new { color: white; font-size: 0.875rem; font-weight: 500; margin: 0; } .summary-pricing-new { display: flex; align-items: center; gap: 1rem; border-left: 1px solid rgba(168, 85, 247, 0.2); padding-left: 1rem; } .summary-price-box-new { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.2)); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.75rem; padding: 0.5rem 1rem; } .summary-price-label-new { font-size: 0.625rem; color: #9ca3af; text-align: center; margin: 0 0 0.125rem 0; } .summary-price-value-new { color: white; font-size: 1.25rem; font-weight: 700; text-align: center; margin: 0; } .btn-confirm-booking-new { background: linear-gradient(90deg, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); color: white; border: none; border-radius: 0.5rem; padding: 0.625rem 1.25rem; font-weight: 600; cursor: pointer; transition: all 0.2s; height: 2.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; white-space: nowrap; } .btn-confirm-booking-new:hover:not(:disabled) { background: linear-gradient(90deg, hsl(271, 91%, 70%), hsl(271, 91%, 80%)); box-shadow: 0 10px 25px rgba(168, 85, 247, 0.4); } .btn-confirm-booking-new:disabled { opacity: 0.5; cursor: not-allowed; } /* Booking Steps */ .booking-step-new { display: none; animation: fadeIn 0.3s; } .booking-step-new.active { display: block; } /* Responsive */ @media (max-width: 1024px) { .booking-modal-content-new { width: 95%; height: 90vh; /* Réduit de 98vh */ } .summary-grid-new { grid-template-columns: 1fr; gap: 1rem; } .summary-pricing-new { border-left: none; border-top: 1px solid rgba(168, 85, 247, 0.2); padding-left: 0; padding-top: 1rem; } } @media (max-width: 768px) { .booking-steps-container-new { padding: 1rem; } .calendar-container-new { padding: 0.75rem; /* Réduit de 1rem */ } .time-slots-grid-new { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } .mode-selection-new { grid-template-columns: 1fr; } .step-actions-new { flex-direction: column; } .summary-details-new { flex-direction: column; gap: 1rem; } } /* ================================================================ NOUVEAU DESIGN - DEVENIR COACH (FIGMA) ================================================================ */ /* Section Container */ .devenir-coach-section-new { position: relative; min-height: 100vh; padding: 3rem 1rem; overflow: hidden; } .devenir-coach-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .devenir-coach-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, #0f172a, #1e1b4b, #1e293b); opacity: 0.85; z-index: 1; } .devenir-coach-container-new { position: relative; z-index: 10; max-width: 64rem; /* max-w-4xl */ margin: 0 auto; } /* Hero Section */ .devenir-coach-hero-new { text-align: center; margin-bottom: 3rem; animation: fadeInUp 0.8s ease-out; } .devenir-coach-badge-new { display: inline-block; padding: 0.5rem 1rem; margin-bottom: 1.5rem; border-radius: 0.5rem; background: rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.3); backdrop-filter: blur(10px); animation: scaleIn 0.6s ease-out 0.2s both; } .devenir-coach-badge-new i { margin-right: 0.5rem; color: hsl(271, 91%, 75%); } .devenir-coach-badge-new span { color: hsl(271, 91%, 75%); font-size: 0.875rem; } .devenir-coach-title-new { background: linear-gradient(to right, white, hsl(271, 91%, 75%), hsl(271, 91%, 65%)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; animation: fadeInScale 0.6s ease-out 0.3s both; } .devenir-coach-title-new i { color: hsl(271, 91%, 75%); font-size: 2.5rem; -webkit-text-fill-color: hsl(271, 91%, 75%); } .devenir-coach-subtitle-new { font-size: 1.125rem; color: rgba(255, 255, 255, 0.8); max-width: 32rem; margin: 0 auto; animation: fadeIn 0.6s ease-out 0.5s both; } /* Form Container */ .devenir-coach-form-new { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 1.5rem; padding: 2.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; animation: fadeInUp 0.8s ease-out 0.4s both; } .devenir-coach-decoration { position: absolute; top: 0; right: 0; font-size: 12rem; opacity: 0.03; pointer-events: none; user-select: none; line-height: 1; } /* Section Headers */ .devenir-coach-form-section-new { margin-bottom: 2.5rem; animation: fadeInLeft 0.6s ease-out both; } .devenir-coach-form-section-new:nth-child(2) { animation-delay: 0.6s; } .devenir-coach-form-section-new:nth-child(3) { animation-delay: 0.85s; } .devenir-coach-form-section-new:nth-child(4) { animation-delay: 1.05s; } .devenir-coach-form-section-new:nth-child(5) { animation-delay: 1.25s; } .devenir-coach-form-section-new:nth-child(6) { animation-delay: 1.3s; } .devenir-coach-section-header-new { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .devenir-coach-section-icon-new { padding: 0.5rem; border-radius: 0.5rem; background: hsl(271, 91%, 65%, 0.2); display: flex; align-items: center; justify-content: center; transition: transform 0.6s ease; } .devenir-coach-section-icon-new:hover { transform: rotate(360deg) scale(1.1); } .devenir-coach-section-icon-new i { font-size: 1.5rem; color: hsl(271, 91%, 75%); } .devenir-coach-section-title-new { color: white; font-size: 1.5rem; font-weight: 600; margin: 0; } .devenir-coach-section-line-new { flex: 1; height: 1px; background: linear-gradient(to right, hsl(271, 91%, 65%, 0.5), transparent); margin-left: 0.75rem; } /* Form Grid */ .devenir-coach-form-grid-new { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; width: 100%; box-sizing: border-box; } .devenir-coach-form-group-new { margin-bottom: 1.25rem; min-width: 0; /* Empêche la superposition */ width: 100%; box-sizing: border-box; } /* Pour les groupes en dehors de la grille (comme les textarea) */ .devenir-coach-form-section-new>.devenir-coach-form-group-new { width: 100%; max-width: 100%; } .devenir-coach-label-new { display: block; color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; } .required-star { color: hsl(271, 91%, 75%); } /* Inputs */ .devenir-coach-input-new, .devenir-coach-textarea-new { width: 100%; max-width: 100%; padding: 0.875rem 1rem; background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.75rem; color: white; font-size: 1rem; transition: all 0.3s ease; font-family: inherit; box-sizing: border-box; /* Inclut padding dans la largeur */ overflow: hidden; /* Empêche le débordement */ } /* S'assurer que les inputs dans la grille ne débordent pas */ .devenir-coach-form-grid-new .devenir-coach-form-group-new { overflow: hidden; } .devenir-coach-form-grid-new .devenir-coach-input-new { width: 100%; max-width: 100%; } .devenir-coach-input-new::placeholder, .devenir-coach-textarea-new::placeholder { color: rgba(255, 255, 255, 0.4); } .devenir-coach-input-new:hover, .devenir-coach-textarea-new:hover { border-color: rgba(255, 255, 255, 0.3); } .devenir-coach-input-new:focus, .devenir-coach-textarea-new:focus { outline: none; border-color: hsl(271, 91%, 65%); box-shadow: 0 0 0 3px hsl(271, 91%, 65%, 0.2); } .devenir-coach-textarea-new { resize: vertical; min-height: 120px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; } .devenir-coach-helper-text-new { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.375rem; } /* Mode Cards */ .devenir-coach-modes-grid-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .devenir-coach-mode-card-new { padding: 1rem; border-radius: 0.75rem; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(15, 23, 42, 0.5); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .devenir-coach-mode-card-new:hover { border-color: hsl(271, 91%, 65%, 0.5); transform: translateY(-2px) scale(1.02); } .devenir-coach-mode-card-new.selected { border-color: hsl(271, 91%, 65%); background: linear-gradient(to bottom right, hsl(271, 91%, 65%, 0.2), hsl(271, 91%, 75%, 0.1)); } .devenir-coach-mode-card-new.selected::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, hsl(271, 91%, 65%, 0.1), transparent); pointer-events: none; } .devenir-coach-mode-card-content-new { display: flex; align-items: flex-start; gap: 0.75rem; position: relative; z-index: 1; } .devenir-coach-mode-icon-new { font-size: 1.25rem; color: rgba(255, 255, 255, 0.6); transition: all 0.5s ease; } .devenir-coach-mode-card-new.selected .devenir-coach-mode-icon-new { color: hsl(271, 91%, 75%); animation: rotateIcon 0.5s ease; } .devenir-coach-mode-text-new { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .devenir-coach-mode-label-new { color: white; font-weight: 500; display: flex; align-items: center; justify-content: space-between; } .devenir-coach-mode-check-new { font-size: 1.25rem; color: hsl(271, 91%, 75%); opacity: 0; transform: scale(0) rotate(-180deg); transition: all 0.3s ease; } .devenir-coach-mode-card-new.selected .devenir-coach-mode-check-new { opacity: 1; transform: scale(1) rotate(0deg); } .devenir-coach-mode-desc-new { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin: 0; } /* Tags */ .devenir-coach-tags-grid-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; } #languesCoach { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } #specialitesCoach { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .devenir-coach-tag-btn-new { padding: 0.625rem 1rem; border-radius: 0.5rem; border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(15, 23, 42, 0.5); color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; justify-content: center; position: relative; overflow: hidden; font-family: inherit; font-size: 0.875rem; font-weight: 500; } .devenir-coach-tag-btn-new:hover { border-color: hsl(271, 91%, 65%, 0.5); color: white; transform: translateY(-2px) scale(1.05); } .devenir-coach-tag-btn-new.selected { border-color: hsl(271, 91%, 65%); background: hsl(271, 91%, 65%, 0.2); color: white; } .devenir-coach-tag-btn-new.selected::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, hsl(271, 91%, 65%, 0.3), hsl(271, 91%, 75%, 0.2)); z-index: 0; } .devenir-coach-tag-emoji-new { font-size: 1.125rem; position: relative; z-index: 1; transition: transform 0.5s ease; } .devenir-coach-tag-btn-new.selected .devenir-coach-tag-emoji-new { animation: rotateEmoji 0.5s ease; } .devenir-coach-tag-btn-new span:not(.devenir-coach-tag-emoji-new) { position: relative; z-index: 1; } /* Submit Button */ .devenir-coach-submit-container-new { display: flex; justify-content: center; margin-top: 2rem; } .devenir-coach-submit-btn-new { width: 100%; max-width: 28rem; padding: 1.5rem 2rem; background: linear-gradient(to right, hsl(271, 91%, 65%), hsl(271, 91%, 75%)); color: white; border: none; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 25px rgba(168, 85, 247, 0.5); transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: inherit; } .devenir-coach-submit-btn-new:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 15px 35px rgba(168, 85, 247, 0.6); background: linear-gradient(to right, hsl(271, 91%, 70%), hsl(271, 91%, 80%)); } .devenir-coach-submit-btn-new:active { transform: translateY(0) scale(1); } .devenir-coach-submit-btn-new:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .devenir-coach-submit-shine-new { position: absolute; inset: 0; width: 50%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%) skewX(-12deg); animation: shine 3s infinite; } @keyframes shine { 0% { transform: translateX(-100%) skewX(-12deg); } 50% { transform: translateX(200%) skewX(-12deg); } 100% { transform: translateX(200%) skewX(-12deg); } } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes rotateIcon { 0% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } } @keyframes rotateEmoji { 0% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } } /* Responsive */ @media (max-width: 1024px) { .devenir-coach-form-new { padding: 2rem; } .devenir-coach-title-new { font-size: 2rem; } } @media (max-width: 768px) { .devenir-coach-section-new { padding: 2rem 1rem; } .devenir-coach-hero-new { margin-bottom: 2rem; } .devenir-coach-title-new { font-size: 1.75rem; flex-direction: column; gap: 0.5rem; } .devenir-coach-title-new i { font-size: 2rem; } .devenir-coach-subtitle-new { font-size: 1rem; } .devenir-coach-form-new { padding: 1.5rem; } .devenir-coach-form-grid-new { grid-template-columns: 1fr; gap: 1rem; } .devenir-coach-form-group-new { margin-bottom: 1rem; width: 100%; } .devenir-coach-input-new, .devenir-coach-textarea-new { width: 100%; max-width: 100%; } .devenir-coach-modes-grid-new { grid-template-columns: 1fr; } .devenir-coach-tags-grid-new { grid-template-columns: repeat(2, 1fr); } .devenir-coach-section-title-new { font-size: 1.25rem; } .devenir-coach-submit-btn-new { padding: 1.25rem 1.5rem; font-size: 1rem; } } /* ========== NOUVEAU DESIGN MESSAGES (FIGMA) ========== */ .messages-section-new { background: #0a0a0a; height: calc(100vh - 4rem); margin-top: 4rem; overflow: hidden; } .messages-container-new { display: flex; height: 100%; background: #0a0a0a; } /* Left Panel - Conversations List */ .conversations-list-new { width: 300px; background: hsl(215, 25%, 15%); border-right: 1px solid rgba(168, 85, 247, 0.2); display: flex; flex-direction: column; height: 100%; } .conversations-header-new { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.2); display: flex; align-items: center; justify-content: space-between; } .conversations-header-title { display: flex; align-items: center; gap: 1rem; } .conversations-header-title i { font-size: 1.25rem; color: #a855f7; } .conversations-header-title h3 { font-size: 1.125rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); margin: 0; } .conversations-header-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: #a855f7; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; } .conversations-header-btn:hover { background: hsl(215, 25%, 18%); } .conversations-scroll-new { flex: 1; overflow-y: auto; padding: 0.75rem 0.375rem; } .conversations-scroll-new::-webkit-scrollbar { width: 6px; } .conversations-scroll-new::-webkit-scrollbar-track { background: transparent; } .conversations-scroll-new::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.3); border-radius: 3px; } .conversations-scroll-new::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.5); } /* Conversation Item - Compatible avec JS existant */ .conversations-scroll-new .conversation-item { padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; border: 1px solid rgba(168, 85, 247, 0.1); background: hsl(215, 25%, 18%); transition: all 0.2s ease; position: relative; overflow: hidden; } .conversations-scroll-new .conversation-item:hover { background: hsl(215, 25%, 20%); border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); transform: translateX(4px); } .conversations-scroll-new .conversation-item.active { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(126, 34, 206, 0.1) 100%); border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } .conversations-scroll-new .conversation-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(168, 85, 247, 0.3); object-fit: cover; flex-shrink: 0; box-shadow: 0 0 8px rgba(168, 85, 247, 0.2); } .conversations-scroll-new .conversation-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .conversations-scroll-new .conversation-name { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversations-scroll-new .conversation-preview { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .conversations-scroll-new .conversation-time { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.125rem; } .conversations-scroll-new .unread-badge { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; } /* Right Panel - Chat Area */ .chat-area-new { flex: 1; background: hsl(215, 25%, 10%); display: flex; flex-direction: column; height: 100%; } .chat-header-new { height: 60px; padding: 0 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.2); background: hsl(215, 25%, 15%); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .chat-user-info-new { display: flex; align-items: center; gap: 0.875rem; } .chat-avatar-wrapper-new { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(168, 85, 247, 0.4); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); background: hsl(215, 25%, 18%); color: rgba(168, 85, 247, 0.5); font-size: 1.125rem; } .chat-avatar-wrapper-new img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .chat-user-details-new h4 { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); margin: 0; } .chat-status-new { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.125rem; display: none; /* Cacher le statut en ligne/déconnecté */ } .chat-status-new.online { color: #10b981; display: none; /* Cacher même si en ligne */ } .chat-actions-new { display: flex; align-items: center; } .chat-action-btn-new { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: #a855f7; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: 1.125rem; } .chat-action-btn-new:hover { background: hsl(215, 25%, 18%); } /* Messages Area */ .messages-area-new { flex: 1; overflow-y: auto; padding: 0; background: hsl(215, 25%, 10%); } .messages-area-new::-webkit-scrollbar { width: 6px; } .messages-area-new::-webkit-scrollbar-track { background: transparent; } .messages-area-new::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.3); border-radius: 3px; } .messages-area-new::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.5); } .messages-empty-state-new { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.5); } .messages-empty-state-new i { font-size: 4rem; color: rgba(168, 85, 247, 0.3); margin-bottom: 1rem; } .messages-empty-state-new p { font-size: 1.1rem; margin: 0; } /* Messages Container */ .messages-container { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0; margin: 0; } /* Date Separator */ .date-separator { display: flex; justify-content: center; margin: 1rem 0; } .date-separator span { padding: 0.625rem 1.25rem; border-radius: 9999px; background: hsl(215, 25%, 18%); color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; border: 1px solid rgba(168, 85, 247, 0.2); } /* Message Bubbles - Desktop only */ @media (min-width: 769px) { .message-sent { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; padding: 0 0.5rem; animation: fadeInUp 0.3s ease-out; } .message-received { display: flex; justify-content: flex-start; margin-bottom: 0.5rem; padding: 0 0.5rem; animation: fadeInUp 0.3s ease-out; } } /* Desktop Styles - Only apply when screen width is > 768px */ @media (min-width: 769px) { .message-sent .message-content, .message-received .message-content { max-width: 80%; min-width: 300px; padding: 1rem 1.375rem; border-radius: 20px; white-space: nowrap; overflow-x: auto; line-height: 1.7; font-size: 0.95rem; } .message-sent .message-content { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%) !important; color: white !important; border-radius: 20px 20px 6px 20px; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); border: none !important; } .message-received .message-content { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important; color: rgba(255, 255, 255, 0.95) !important; border-radius: 20px 20px 20px 6px; border: 1px solid rgba(59, 130, 246, 0.4) !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); } } /* MOBILE - Compact message bubbles */ @media (max-width: 768px) { .message-sent .message-content, .message-received .message-content { min-width: 0 !important; max-width: 75% !important; width: fit-content !important; padding: 4px 8px !important; border-radius: 10px !important; white-space: pre-wrap !important; overflow-x: visible !important; line-height: 1.2 !important; font-size: 0.75rem !important; min-height: unset !important; height: auto !important; } .message-sent .message-content { background: #1e3a5f !important; background-color: #1e3a5f !important; border-radius: 10px 10px 4px 10px !important; border: none !important; box-shadow: none !important; } .message-received .message-content { background: #262626 !important; background-color: #262626 !important; border-radius: 10px 10px 10px 4px !important; border: none !important; box-shadow: none !important; } .message-content p { white-space: pre-wrap !important; overflow-x: visible !important; line-height: 1.2 !important; font-size: 0.75rem !important; margin: 0 !important; } .message-time { font-size: 0.55rem !important; margin-top: 1px !important; } } /* TRÈS PETITS ÉCRANS - Ultra compact */ @media (max-width: 600px) { /* Container message */ .message-sent, .message-received { display: flex !important; margin: 0 0 4px 0 !important; padding: 0 !important; background: transparent !important; } .message-sent { justify-content: flex-end !important; } .message-received { justify-content: flex-start !important; } /* Bulle */ .message-sent .message-content, .message-received .message-content { display: inline-block !important; width: auto !important; max-width: 75% !important; min-width: 0 !important; padding: 6px 10px !important; margin: 0 !important; border-radius: 12px !important; font-size: 14px !important; line-height: 1.3 !important; } .message-sent .message-content { background: #1e3a5f !important; color: white !important; border-bottom-right-radius: 4px !important; } .message-received .message-content { background: #262626 !important; color: white !important; border-bottom-left-radius: 4px !important; } /* Texte */ .message-bubble { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.3 !important; } /* Heure */ .message-time { display: block !important; margin: 2px 0 0 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1 !important; text-align: right !important; opacity: 0.6 !important; } /* Cacher avatar sur mobile */ .message-avatar { display: none !important; } } .message-content p { margin: 0; line-height: 1.7; white-space: nowrap; overflow-x: auto; } .message-time { font-size: 0.75rem; margin-top: 0.5rem; } .message-sent .message-time { color: rgba(255, 255, 255, 0.8); text-align: right; } .message-received .message-time { color: rgba(255, 255, 255, 0.5); } /* File Attachment */ .message-file-attachment { margin-top: 0.75rem; padding: 1rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 1rem; } .message-file-attachment .file-icon, .message-file-attachment .file-preview-container { width: 36px; height: 36px; flex-shrink: 0; color: #a855f7; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .message-file-attachment .file-preview-image { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; } .message-file-attachment .file-info { flex: 1; min-width: 0; } .message-file-attachment .file-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .message-file-attachment .file-size { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.25rem; } .message-file-attachment .file-download { padding: 0.625rem; border-radius: 0.5rem; background: transparent; border: none; color: #a855f7; cursor: pointer; transition: all 0.2s ease; } .message-file-attachment .file-download:hover { background: rgba(168, 85, 247, 0.2); } /* Booking Card in Messages */ .message-booking-card, .proposal-card { margin-top: 0.75rem; padding: 1.25rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(168, 85, 247, 0.3); } .message-booking-card h4, .proposal-card h4 { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 700; margin: 0 0 1rem 0; color: rgba(255, 255, 255, 0.95); } .message-booking-card h4 i, .proposal-card h4 i { color: #a855f7; } .message-booking-card .booking-details, .proposal-card .booking-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1rem; } .message-booking-card .booking-detail-item, .proposal-card .booking-detail-item { display: flex; flex-direction: column; } .message-booking-card .booking-detail-label, .proposal-card .booking-detail-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.375rem; } .message-booking-card .booking-detail-value, .proposal-card .booking-detail-value { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); } .message-booking-card .booking-status, .proposal-card .booking-status { display: flex; justify-content: flex-end; margin-top: 1rem; } .message-booking-card .booking-status-badge, .proposal-card .booking-status-badge { padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; } .message-booking-card .booking-status-badge.confirmed, .proposal-card .booking-status-badge.confirmed { background: rgba(168, 85, 247, 0.2); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); } .message-booking-card .booking-status-badge.pending, .proposal-card .booking-status-badge.pending { background: rgba(245, 158, 11, 0.2); color: #f59e0b; } .message-booking-card .booking-status-badge.cancelled, .proposal-card .booking-status-badge.cancelled { background: rgba(239, 68, 68, 0.2); color: #ef4444; } /* Proposal Actions - Compatibilité */ .proposal-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .proposal-actions button { padding: 0.75rem 1rem; border-radius: 0.5rem; border: none; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .proposal-actions .btn-accept { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; } .proposal-actions .btn-reject { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; } .proposal-actions .btn-cancel { background: hsl(215, 25%, 18%); color: rgba(255, 255, 255, 0.95); border: 1px solid rgba(168, 85, 247, 0.2); } .proposal-actions .btn-pay { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; } /* Message Input Area */ .message-input-area-new { padding: 1.25rem 2rem; border-top: 1px solid rgba(168, 85, 247, 0.2); background: hsl(215, 25%, 15%); flex-shrink: 0; } .file-preview-new { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 0.75rem; background: hsl(215, 25%, 18%); margin-bottom: 1rem; } .file-preview-new i { width: 36px; height: 36px; flex-shrink: 0; color: #a855f7; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .file-preview-info-new { flex: 1; min-width: 0; } .file-preview-name-new { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-preview-size-new { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin: 0.25rem 0 0 0; } .file-preview-remove-new { padding: 0.625rem; border-radius: 0.5rem; background: transparent; border: none; color: #ef4444; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .file-preview-remove-new:hover { background: rgba(239, 68, 68, 0.2); } .message-input-wrapper-new { display: flex; align-items: center; gap: 1rem; } .message-attach-btn-new { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(168, 85, 247, 0.2); background: hsl(215, 25%, 18%); color: #a855f7; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; font-size: 1.25rem; } .message-attach-btn-new:hover { background: hsl(215, 25%, 20%); border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); } .message-input-new { flex: 1; padding: 1rem 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(168, 85, 247, 0.2); background: hsl(215, 25%, 18%); color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; outline: none; transition: all 0.2s ease; } .message-input-new:focus { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); } .message-input-new::placeholder { color: rgba(255, 255, 255, 0.5); } .message-send-btn-new { width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); font-size: 1.25rem; } .message-send-btn-new:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6); } .message-send-btn-new:disabled { opacity: 0.5; cursor: not-allowed; } /* Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========== NOUVEAU STYLE SOMBRE - SECTION KAPTUR ========== */ /* Section Kaptur - Header */ #section-kaptur { background: #0a0a0a; min-height: 100vh; padding: 2rem 0; } #section-kaptur .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } #section-kaptur h1 { color: rgba(255, 255, 255, 0.95); font-size: 2rem; font-weight: 700; margin: 0; } .kaptur-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .kaptur-header #createAuction { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; border: none; padding: 0.875rem 1.75rem; border-radius: 0.75rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); display: flex; align-items: center; gap: 0.5rem; } .kaptur-header #createAuction:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6); } /* Tabs Kaptur */ .kaptur-tabs, .reservations-tabs { display: flex; gap: 0.75rem; margin-bottom: 2rem; background: hsl(215, 25%, 15%); padding: 0.5rem; border-radius: 0.75rem; border: 1px solid rgba(168, 85, 247, 0.2); } .tab-btn { background: transparent; border: 1px solid transparent; padding: 0.875rem 1.5rem; font-weight: 600; font-size: 0.95rem; color: rgba(255, 255, 255, 0.6); cursor: pointer; position: relative; transition: all 0.3s ease; border-radius: 0.5rem; flex: 1; } .tab-btn:hover { color: rgba(255, 255, 255, 0.9); background: hsl(215, 25%, 18%); } .tab-btn.active { color: rgba(255, 255, 255, 0.95); background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(126, 34, 206, 0.15) 100%); border-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } .tab-btn.active::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); border-radius: 2px 2px 0 0; } /* Kaptur Cards */ .kaptur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; } .kaptur-card { background: hsl(215, 25%, 15%); padding: 1.5rem; border-radius: 1rem; border: 1px solid rgba(168, 85, 247, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem; } .kaptur-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .kaptur-timer { background: hsl(215, 25%, 18%); border: 1px solid rgba(168, 85, 247, 0.3); padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 0.5rem; } .kaptur-timer i { color: #a855f7; } .timer-text { color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 0.9rem; } .kaptur-card:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 30px rgba(168, 85, 247, 0.2); transform: translateY(-4px); } .kaptur-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: rgba(255, 255, 255, 0.95); line-height: 1.25; } .kaptur-status.active { background: rgba(168, 85, 247, 0.2); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); } .kaptur-status.expired { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .kaptur-timer { background: hsl(215, 25%, 18%); border: 1px solid rgba(168, 85, 247, 0.3); padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: rgba(255, 255, 255, 0.9); } .kaptur-detail-label { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; } .kaptur-detail-value { color: rgba(255, 255, 255, 0.95); font-weight: 600; font-size: 0.95rem; } .kaptur-detail-value i { color: #a855f7; margin-right: 0.25rem; } .kaptur-description { color: rgba(255, 255, 255, 0.7); margin: 0.5rem 0; line-height: 1.6; } .kaptur-actions .btn-bid { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; border: none; } .kaptur-actions .btn-view-bids { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; border: none; } .kaptur-actions .btn-delete { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border: none; } .kaptur-actions .btn-kaptur { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; border: none; } /* ========== NOUVEAU STYLE SOMBRE - SECTION RÉSERVATIONS ========== */ /* Section Réservations */ #section-mes-reservations { background: #0a0a0a; min-height: 100vh; padding: 2rem 0; } #section-mes-reservations .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } #section-mes-reservations h1 { color: rgba(255, 255, 255, 0.95); font-size: 2rem; font-weight: 700; margin: 0 0 2rem 0; } /* Reservation Cards */ .reservations-list { display: flex; flex-direction: column; gap: 1.5rem; } .reservation-card { background: hsl(215, 25%, 15%); padding: 0; border-radius: 1rem; border: 1px solid rgba(168, 85, 247, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; transition: all 0.3s ease; overflow: visible; position: relative; min-width: 320px; } .reservation-card:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 30px rgba(168, 85, 247, 0.2); transform: translateY(-4px); } .booking-card-upcoming { border-left: 4px solid #10b981; } .booking-card-past { border-left: 4px solid rgba(255, 255, 255, 0.3); } .booking-card-cancelled { border-left: 4px solid #ef4444; } .booking-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2rem; background: hsl(215, 25%, 18%); border-bottom: 1px solid rgba(168, 85, 247, 0.2); gap: 1.5rem; } .reservation-date { text-align: center; padding: 0.875rem 1.125rem; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); border-radius: 0.75rem; color: white; min-width: 70px; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3); } .reservation-day { font-size: 1.8rem; font-weight: 800; color: white; line-height: 1; } .reservation-month { color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; font-weight: 600; margin-top: 0.25rem; } .booking-status-badge.status-upcoming { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .booking-status-badge.status-past { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); } .booking-status-badge.status-cancelled { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .reservation-content { padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1rem; background: hsl(215, 25%, 15%); } .coach-name-info h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: rgba(255, 255, 255, 0.95); font-weight: 600; } .reservation-mode { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; } .reservation-mode i { color: #a855f7; } .reservation-details { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(168, 85, 247, 0.2); min-width: 0; overflow: visible; } .reservation-time-range { color: rgba(255, 255, 255, 0.9); font-weight: 500; white-space: nowrap; min-width: fit-content; } .reservation-duration, .reservation-price { color: rgba(255, 255, 255, 0.7); } .reservation-price strong { color: #a855f7; font-weight: 700; } /* ========== MODAL KAPTUR - STYLE SOMBRE ========== */ #createAuctionModal .modal-content, #bidModal .modal-content { background: hsl(215, 25%, 15%); border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.2); color: rgba(255, 255, 255, 0.95); } #createAuctionModal h2, #bidModal h2 { color: rgba(255, 255, 255, 0.95); } #createAuctionModal .form-group label, #bidModal .form-group label { color: rgba(255, 255, 255, 0.9); } #createAuctionModal input, #createAuctionModal select, #createAuctionModal textarea, #bidModal input, #bidModal textarea { background: hsl(215, 25%, 18%); border: 1px solid rgba(168, 85, 247, 0.3); color: rgba(255, 255, 255, 0.95); border-radius: 0.5rem; } #createAuctionModal input:focus, #createAuctionModal select:focus, #createAuctionModal textarea:focus, #bidModal input:focus, #bidModal textarea:focus { border-color: rgba(168, 85, 247, 0.6); box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); outline: none; } #createAuctionModal .btn-primary, #bidModal .btn-primary { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); color: white; border: none; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); } #createAuctionModal .btn-primary:hover, #bidModal .btn-primary:hover { box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6); transform: translateY(-2px); } #createAuctionModal .btn-secondary, #bidModal .btn-secondary { background: hsl(215, 25%, 20%); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(168, 85, 247, 0.3); } #createAuctionModal .btn-secondary:hover, #bidModal .btn-secondary:hover { background: hsl(215, 25%, 25%); border-color: rgba(168, 85, 247, 0.5); } /* Empty State */ .empty-state { text-align: center; padding: 3rem 1rem; color: rgba(255, 255, 255, 0.5); } .empty-state i { font-size: 3rem; color: rgba(168, 85, 247, 0.3); margin-bottom: 1rem; } .empty-state p { font-size: 1.1rem; margin: 0; } /* ========== MODAL VOIR LES OFFRES - STYLE SOMBRE ========== */ #bidsModal .modal { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); } #bidsModal .modal-content, .modal-bids-compact { background: hsl(215, 25%, 15%); border: 1px solid rgba(168, 85, 247, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.2); color: rgba(255, 255, 255, 0.95); border-radius: 1rem; } .modal-header-compact, .compact-header { background: hsl(215, 25%, 18%); border-bottom: 1px solid rgba(168, 85, 247, 0.2); padding: 1.5rem; } .modal-title-compact { color: rgba(255, 255, 255, 0.95); font-size: 1.5rem; font-weight: 700; margin: 0; } .modal-subtitle-compact { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: 0.25rem 0 0 0; } .modal-icon-compact { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(126, 34, 206, 0.15) 100%); display: flex; align-items: center; justify-content: center; color: #a855f7; font-size: 1.5rem; margin-right: 1rem; } .modal-close-compact { background: transparent; border: none; color: #a855f7; font-size: 1.2rem; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; width: auto; height: auto; border-radius: 0; } .modal-close-compact:hover { color: #9333ea; transform: scale(1.1); background: transparent; border-color: transparent; } } .modal-body-compact { padding: 1.5rem; background: hsl(215, 25%, 15%); } .bids-stats-compact-bar { display: flex; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background: hsl(215, 25%, 18%); border-radius: 0.75rem; border: 1px solid rgba(168, 85, 247, 0.2); } .stat-compact-item { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 0.9rem; } .stat-compact-item i { color: #a855f7; } .bids-list-compact { display: flex; flex-direction: column; gap: 1rem; } .bid-card { background: hsl(215, 25%, 18%); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.75rem; padding: 1.25rem; transition: all 0.3s ease; } .bid-card:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(168, 85, 247, 0.15); transform: translateY(-2px); } .bid-card-accepted { border: 2px solid #a855f7 !important; background: hsl(215, 25%, 18%) !important; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2) !important; } .bid-card-rejected { border: 2px solid #ef4444 !important; background: hsl(215, 25%, 18%) !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2) !important; } .bid-card-pending { border: 1px solid rgba(168, 85, 247, 0.3); } .bid-card-best { border: 2px solid rgba(168, 85, 247, 0.6); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } .empty-bids-state { text-align: center; padding: 3rem 1rem; color: rgba(255, 255, 255, 0.5); } .empty-bids-state h3 { color: rgba(255, 255, 255, 0.9); margin: 1rem 0 0.5rem 0; } .empty-bids-state .empty-icon { font-size: 3rem; color: rgba(168, 85, 247, 0.3); margin-bottom: 1rem; } /* Responsive */ @media (max-width: 768px) { .messages-container-new { flex-direction: column; } .conversations-list-new { width: 100%; height: auto; max-height: 40vh; border-right: none; border-bottom: 1px solid rgba(168, 85, 247, 0.2); } .chat-area-new { height: 60vh; } } /* ========== FIX OPAQUE MENU PROFIL - RÈGLE ULTRA-SPÉCIFIQUE ========== */ #userDropdown, #userDropdown.dropdown-menu, .user-profile #userDropdown, .user-profile .dropdown-menu#userDropdown, .user-profile #userDropdown.dropdown-menu, body #userDropdown, body .user-profile #userDropdown, body.dark-mode #userDropdown, body.dark-mode .user-profile #userDropdown { background: #0a0a0a !important; background-color: #0a0a0a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; border: 1px solid rgba(168, 85, 247, 0.5) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5) !important; } #userDropdown.show, .user-profile #userDropdown.show, body #userDropdown.show { background: #0a0a0a !important; background-color: #0a0a0a !important; opacity: 1 !important; } #userDropdown .dropdown-item, #userDropdown a.dropdown-item { color: rgba(255, 255, 255, 0.98) !important; } #userDropdown .dropdown-item:hover, #userDropdown a.dropdown-item:hover { color: white !important; background: rgba(168, 85, 247, 0.3) !important; } /* ================================================================ MODAL PAIEMENT - STYLES CORRIGÉS ================================================================ */ .payment-container { padding: 2rem !important; background: transparent !important; color: white !important; } .payment-container h2 { color: white !important; text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem; } .payment-summary { background: rgba(30, 41, 59, 0.6) !important; padding: 1.5rem !important; border-radius: 12px !important; margin-bottom: 2rem !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; color: #cbd5e1 !important; } .payment-methods h3 { color: rgba(255, 255, 255, 0.8) !important; margin-bottom: 1rem; text-align: center; font-size: 1.1rem; } /* Boutons de paiement */ .payment-btn { display: flex !important; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 1.5rem !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; border-radius: 12px !important; background: rgba(30, 41, 59, 0.6) !important; color: white !important; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); margin-bottom: 1rem; } .payment-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.6) !important; background: rgba(30, 41, 59, 0.8) !important; } .payment-btn-stripe { background: linear-gradient(135deg, #635bff, #4e44e6) !important; border: none !important; box-shadow: 0 4px 15px rgba(99, 91, 255, 0.3); } .payment-btn-stripe:hover { background: linear-gradient(135deg, #7a73ff, #635bff) !important; box-shadow: 0 8px 25px rgba(99, 91, 255, 0.4); } /* Cacher Apple Pay et PayPal */ .payment-btn-apple, .payment-btn-paypal { display: none !important; } /* ================================================================ FIX CARTES DE RÉSERVATION - FORCER LES STYLES ================================================================ */ .reservation-card, .booking-card { overflow: visible !important; min-width: 320px !important; } .booking-card-header { padding: 1.25rem 2rem !important; gap: 1.5rem !important; } .reservation-content { padding: 1.5rem 2rem !important; } .reservation-details { min-width: 0 !important; overflow: visible !important; } .reservation-time-range { white-space: nowrap !important; min-width: fit-content !important; } .reservation-date { flex-shrink: 0 !important; } .coach-name-info, .reservation-coach { flex: 1 !important; min-width: 0 !important; } /* FIX MESSAGES LONG */ .message-bubble, .message-text { white-space: pre-wrap !important; word-wrap: break-word !important; word-break: break-word !important; overflow-wrap: break-word !important; min-width: 0 !important; max-width: 100% !important; display: inline-block !important; } /* Conteneur de message - Desktop only */ @media (min-width: 769px) { .message, .message-content { max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } } /* Limiter la largeur des bulles pour qu'elles ne prennent pas toute la largeur */ .message.sent .message-bubble, .message.received .message-bubble { max-width: 85% !important; } .message-row { display: flex; flex-wrap: wrap; max-width: 100% !important; } /* S'assurer que le conteneur des messages ne force pas une largeur infinie */ .messages-list, .chat-messages, #messagesContainer, .conversation-messages { overflow-x: hidden !important; width: 100% !important; box-sizing: border-box !important; } /* Ajustement pour le texte dans les bulles */ .message-bubble p { margin: 0; word-break: break-word; } /* Pour les messages système */ .system-message .message-bubble { max-width: 100% !important; white-space: pre-wrap !important; word-break: break-word !important; } /* STYLE FORMULAIRE REFUS CORRIGÉ */ .rejection-section { background: var(--bg-tertiary) !important; border: 1px solid var(--border) !important; border-radius: 8px; padding: 1rem !important; margin: 1rem 0 0 0 !important; width: 100%; box-sizing: border-box; animation: fadeIn 0.3s ease; display: flex; flex-direction: column; } .rejection-label { display: block; margin-bottom: 0.5rem !important; font-weight: 500; color: var(--text-secondary) !important; font-size: 0.9rem !important; text-align: left; } .rejection-textarea { width: 100% !important; min-height: 80px; margin-bottom: 1rem !important; background: var(--bg-primary) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; padding: 0.75rem !important; font-size: 0.95rem !important; resize: none !important; box-sizing: border-box !important; } .rejection-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0; width: 100%; } .btn-cancel-reject { padding: 0.5rem 1rem !important; border: 1px solid var(--border) !important; border-radius: 6px !important; background: transparent !important; color: var(--text-secondary) !important; cursor: pointer; font-size: 0.9rem !important; transition: all 0.2s; } .btn-cancel-reject:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--text-primary) !important; } .btn-confirm-reject { padding: 0.5rem 1rem !important; border: none !important; border-radius: 6px !important; background: #ef4444 !important; color: white !important; cursor: pointer; font-size: 0.9rem !important; transition: all 0.2s; } .btn-confirm-reject:hover { background: #dc2626 !important; } #userDropdown .dropdown-item i, #userDropdown a.dropdown-item i { color: #a855f7 !important; } /* CSS pour la modal d'annulation */ .modal-cancel-content { background-color: #1e1b2e; padding: 2rem; border-radius: 12px; width: 90%; max-width: 500px; border: 1px solid rgba(255, 255, 255, 0.1); } .cancel-warning { background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; display: flex; align-items: start; gap: 1rem; } .cancel-warning i { color: #ef4444; font-size: 1.2rem; margin-top: 0.2rem; } .cancel-reasons { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.5rem; } .cancel-reason-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; cursor: pointer; transition: all 0.2s; } .cancel-reason-option:hover { background: rgba(255, 255, 255, 0.1); } .cancel-reason-option input[type="radio"] { accent-color: #ef4444; } .custom-reason-area { width: 100%; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0.8rem; color: white; margin-top: 0.5rem; display: none; } .btn-confirm-cancel { background: #ef4444; color: white; width: 100%; padding: 0.8rem; border-radius: 8px; border: none; font-weight: 600; margin-top: 1rem; cursor: pointer; transition: background 0.2s; } .btn-confirm-cancel:hover { background: #dc2626; } .btn-disabled-cancel { background: #4b5563; color: #9ca3af; cursor: not-allowed; opacity: 0.7; width: auto !important; min-width: 120px; margin: 0.5rem auto 0; display: flex; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; border: none; } /* ================================================================ OPTIMISATION MOBILE GLOBALE (AJOUTÉ LE 24/11/2025) ================================================================ */ /* Réduction globale de la taille pour les écrans mobiles */ @media (max-width: 768px) { /* 1. Échelle de base réduite pour tous les éléments en 'rem' */ html { font-size: 13px !important; /* Réduit de ~16px à 13px (~80%) */ } /* 2. Contraintes de conteneur global */ body, html { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } /* 3. Adaptation des conteneurs principaux */ .container, .navbar-container, section, header, footer, .main-content { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* Ajout de padding latéral pour éviter que le contenu touche les bords */ .container, section, .navbar-container { padding-left: 1rem !important; padding-right: 1rem !important; } /* 4. Images et médias réactifs */ img, video, iframe, svg { max-width: 100% !important; height: auto !important; } /* 5. Typographie - Réduction des titres s'ils sont en pixels fixes */ h1, .h1, .hero-title { font-size: 1.8rem !important; line-height: 1.2 !important; } h2, .h2, .section-title { font-size: 1.5rem !important; } h3, .h3 { font-size: 1.25rem !important; } h4, h5, h6 { font-size: 1.1rem !important; } p, .text-base { font-size: 1rem !important; } /* 6. Éléments d'interface */ .btn, button, .button-primary, .button-secondary { padding: 0.6rem 1rem !important; font-size: 0.95rem !important; max-width: 100%; } /* Navbar ajustements */ .navbar-new { padding: 0.5rem 0 !important; height: auto !important; } /* Ajustement des grilles et flexbox qui pourraient déborder */ /* On force le passage à la colonne pour les éléments côte à côte trop larges */ [class*="grid"], [class*="flex"] { max-width: 100% !important; } } /* Pour les très petits écrans */ @media (max-width: 480px) { html { font-size: 12px !important; /* Encore plus petit pour petits mobiles */ } h1, .h1 { font-size: 1.5rem !important; } .btn, button { width: 100% !important; /* Boutons pleine largeur sur petit mobile */ justify-content: center !important; } /* Navbar optimisée pour petits écrans */ .navbar-container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; gap: 0.5rem !important; } .navbar-brand { font-size: 1.1rem !important; gap: 0.25rem !important; } .navbar-logo { height: 28px !important; width: auto !important; } .brand-text { font-size: 1rem !important; } .mobile-menu-toggle { margin-left: auto !important; padding: 0.25rem !important; } } /* ============================================= MOBILE MESSAGES - BULLES ULTRA COMPACTES ============================================= */ @media (max-width: 768px) { /* Message wrapper - espacement minimal */ #messagesArea .message, .messages-area-new .message, .messages-area .message, .message.sent, .message.received, .message-sent, .message-received { margin-bottom: 2px !important; padding: 0 !important; gap: 4px !important; min-height: unset !important; height: auto !important; align-items: flex-end !important; /* Aligner en bas pour compacter */ } /* Avatar petit */ #messagesArea .message-avatar, .messages-area-new .message-avatar, .messages-area .message-avatar { width: 24px !important; height: 24px !important; margin-bottom: 2px !important; /* Aligner avec le bas du message */ } /* Bulle de message - ULTRA COMPACT */ #messagesArea .message-content, .messages-area-new .message-content, .messages-area .message-content, .message.sent .message-content, .message.received .message-content, .message-sent .message-content, .message-received .message-content { min-width: 0 !important; max-width: 75% !important; width: fit-content !important; padding: 4px 8px !important; border-radius: 12px !important; min-height: unset !important; height: auto !important; white-space: pre-wrap !important; overflow-x: visible !important; display: flex !important; /* Flex pour mieux gérer le contenu */ flex-direction: column !important; justify-content: center !important; } /* Texte du message - COMPACT */ #messagesArea .message-bubble, .messages-area-new .message-bubble, .messages-area .message-bubble, .message-content .message-bubble { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; font-size: 0.75rem !important; min-height: unset !important; height: auto !important; } /* Heure - petit */ #messagesArea .message-time, .messages-area-new .message-time, .messages-area .message-time, .message-content .message-time { font-size: 0.55rem !important; margin-top: 1px !important; margin-bottom: 0 !important; padding: 0 !important; line-height: 1 !important; align-self: flex-end !important; /* Pousser l'heure à droite/bas */ } /* Paragraphes dans messages */ #messagesArea .message-content p, .messages-area-new .message-content p, .messages-area .message-content p, .message-bubble p { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; font-size: 0.75rem !important; } /* Couleur fond message envoyé - BLEU */ .message-sent .message-content, .message.sent .message-content { background: #1e3a5f !important; background-color: #1e3a5f !important; } /* Couleur fond message reçu - GRIS FONCE */ .message-received .message-content, .message.received .message-content { background: #262626 !important; background-color: #262626 !important; } } /* ============================================= TRÈS PETITS ÉCRANS (523x934 etc) - HYPER COMPACT ============================================= */ @media (max-width: 600px) { /* Message wrapper - encore plus compact */ #messagesArea .message, .messages-area-new .message, .messages-area .message, .message.sent, .message.received, .message-sent, .message-received { margin-bottom: 1px !important; gap: 3px !important; } /* Avatar très petit */ #messagesArea .message-avatar, .messages-area-new .message-avatar, .messages-area .message-avatar { width: 18px !important; height: 18px !important; } /* Bulle de message - HYPER COMPACT */ #messagesArea .message-content, .messages-area-new .message-content, .messages-area .message-content, .message.sent .message-content, .message.received .message-content, .message-sent .message-content, .message-received .message-content { min-width: 0 !important; max-width: 80% !important; /* Un peu plus large pour éviter trop de sauts de ligne */ width: fit-content !important; padding: 3px 6px !important; /* Padding minimal */ border-radius: 8px !important; min-height: unset !important; height: auto !important; } /* Texte du message - HYPER COMPACT */ #messagesArea .message-bubble, .messages-area-new .message-bubble, .messages-area .message-bubble, .message-content .message-bubble { line-height: 1.1 !important; /* Interligne très serré */ font-size: 0.7rem !important; } /* Heure - très petit */ #messagesArea .message-time, .messages-area-new .message-time, .messages-area .message-time, .message-content .message-time { font-size: 0.5rem !important; margin-top: 0px !important; /* Collé au texte */ opacity: 0.6 !important; } /* Paragraphes dans messages - HYPER COMPACT */ #messagesArea .message-content p, .messages-area-new .message-content p, .messages-area .message-content p, .message-bubble p { line-height: 1.1 !important; font-size: 0.7rem !important; margin-bottom: 0 !important; } } /* ============================================================================ MOBILE MESSAGES - OVERRIDE FINAL ABSOLU Ce bloc est à la FIN du fichier pour écraser TOUS les autres styles ============================================================================ */ @media (max-width: 768px) { /* Reset ciblé */ #messagesArea, .messages-area-new { padding: 8px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .message-sent, .message-received { display: flex !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .message-sent { justify-content: flex-end !important; } .message-received { justify-content: flex-start !important; } /* BULLE - reprise du style web (violet / bleu) */ .message-sent .message-content { display: inline-block !important; background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%) !important; color: #ffffff !important; border-radius: 16px 16px 4px 16px !important; padding: 6px 10px !important; min-width: 0 !important; max-width: 80% !important; width: fit-content !important; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3) !important; font-size: 0.9rem !important; line-height: 1.25 !important; word-wrap: break-word !important; white-space: pre-wrap !important; } .message-received .message-content { display: inline-block !important; background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important; color: #ffffff !important; border: 1px solid rgba(59, 130, 246, 0.4) !important; border-radius: 16px 16px 16px 4px !important; padding: 6px 10px !important; min-width: 0 !important; max-width: 80% !important; width: fit-content !important; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25) !important; font-size: 0.9rem !important; line-height: 1.25 !important; word-wrap: break-word !important; white-space: pre-wrap !important; } .message-bubble { margin: 0 !important; padding: 0 !important; display: inline !important; } .message-time { display: inline-block !important; font-size: 0.55rem !important; opacity: 0.75 !important; margin-left: 6px !important; } .message-avatar { display: none !important; } } /* ============================================================================ MOBILE - REMONTER POURQUOI KPTUR ============================================================================ */ @media (max-width: 768px) { /* Retirer la marge entre navbar et hero */ .hero-new, .hero-content-new { margin-top: 0 !important; padding-top: 0 !important; } /* Remonter la section Pourquoi Kptur encore plus haut */ .features-section-new, .section-new:nth-of-type(2), .hero-new+.section-new, .why-kaptur-section { margin-top: -300px !important; position: relative !important; z-index: 10 !important; } /* Réduire drastiquement le padding du bas du hero pour coller aux stats */ .hero-new, .hero-content-new { padding-bottom: 20px !important; } /* S'assurer que les stats hero sont visibles */ .hero-stats-new { margin-bottom: 0 !important; padding-bottom: 0 !important; } }