O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:42:"/home/blueskyshd/nxt/assets/styles/app.css";s:10:"publicPath";s:30:"/assets/styles/app-MgaH8kY.css";s:23:"publicPathWithoutDigest";s:22:"/assets/styles/app.css";s:15:"publicExtension";s:3:"css";s:7:"content";s:117301:"/* AEF - Antiquités en France - Design inspiré de l'ancien site */ /* Variables CSS pour les couleurs AEF - Couleurs authentiques de l'ancien site */ :root { --aef-blue-primary: #0088cc; --aef-blue-dark: #0055cc; --aef-blue-darker: #005580; --aef-blue-light: #eff4f9; --aef-blue-border: #cadbeb; --aef-beige-primary: #cc8822; --aef-brown-dark: #9f4f0f; --aef-beige-light: #f7f1e9; --aef-beige-border: #e9d9c4; --aef-accent-gold: #d4af37; --aef-white: #ffffff; --aef-grey-light: #f8f9fa; --aef-text-dark: #333333; --aef-text-muted: #666666; /* Dégradés AEF - Authentiques comme l'ancien site */ --aef-gradient-blue: linear-gradient(to bottom, var(--aef-blue-primary), var(--aef-blue-dark)); --aef-gradient-blue-reverse: linear-gradient(to top, var(--aef-blue-primary), var(--aef-blue-dark)); --aef-gradient-beige: linear-gradient(135deg, var(--aef-beige-light), var(--aef-beige-primary)); } /* Reset et base */ * { box-sizing: border-box; } body { font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif; background: var(--aef-white); color: var(--aef-text-dark); line-height: 1.6; margin: 0; padding: 0; /* Ajouter une texture subtile de fond */ background-image: url("../images/textures/texture-content-1-SMVuTf6.png"); background-repeat: repeat; background-attachment: fixed; } /* Navigation Header - Style AEF authentique de l'ancien site */ .navbar { background: var(--aef-gradient-blue) !important; border-bottom: 4px solid var(--aef-beige-primary); box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3); padding: 0.75rem 0; position: relative; z-index: 5 !important; } .navbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/textures/texture-content-2-SMVuTf6.png"); background-repeat: repeat; opacity: 0.1; z-index: 0; } .navbar .container { position: relative; z-index: 1; } .navbar-brand { color: var(--aef-white) !important; font-weight: 700; font-size: 1.8rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); display: flex; align-items: center; } .navbar-brand:hover { color: var(--aef-beige-primary) !important; transition: color 0.3s ease; } .navbar-brand i { color: var(--aef-beige-primary); margin-right: 0.5rem; font-size: 1.6rem; } .navbar-nav .nav-link { color: var(--aef-white) !important; font-weight: 500; padding: 0.5rem 1rem !important; border-radius: 6px; transition: all 0.3s ease; margin: 0 0.25rem; min-width: 80px; } .navbar-nav .nav-link.text-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; padding: 0.75rem 0.5rem !important; } .navbar-nav .nav-link.text-center div { display: flex; justify-content: center; margin-bottom: 0.25rem; } .navbar-nav .nav-link.text-center i { font-size: 1.2rem; margin-right: 0 !important; margin-bottom: 0.25rem; opacity: 0.9; } .navbar-nav .nav-link.text-center small { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; margin: 0; white-space: nowrap; } .navbar-nav .nav-link:hover { background-color: rgba(255, 255, 255, 0.15); color: var(--aef-beige-primary) !important; transform: translateY(-1px); } .navbar-nav .nav-link:hover i { transform: scale(1.1); color: var(--aef-beige-primary) !important; } /* Styles spéciaux pour le sélecteur de langue */ .navbar-nav .nav-item.dropdown .nav-link.text-center { border-left: 2px solid rgba(255, 255, 255, 0.2); margin-left: 0.5rem; padding-left: 1rem !important; } /* Dropdown positioning pour la langue */ .dropdown-menu-end { right: 0 !important; left: auto !important; } /* Dropdown menu styling */ .dropdown-menu { background-color: var(--aef-white); border: 2px solid var(--aef-blue-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(102, 153, 204, 0.2); margin-top: 0.5rem !important; } .dropdown-item { color: var(--aef-text-dark); transition: all 0.3s ease; padding: 0.5rem 1rem; } .dropdown-item:hover { background-color: var(--aef-blue-light); color: var(--aef-blue-dark); } /* Main content area */ .main-content { min-height: calc(100vh - 200px); background: linear-gradient(180deg, var(--aef-white) 0%, var(--aef-grey-light) 100%); padding: 2rem 0; position: relative; } .main-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/textures/texture-content-3-SMVuTf6.png"); background-repeat: repeat; opacity: 0.02; z-index: 0; } .main-content .container { position: relative; z-index: 1; } /* Cards - Style AEF */ .card { border: 2px solid var(--aef-beige-border); border-radius: 12px; background: var(--aef-beige-light); box-shadow: 0 6px 20px rgba(204, 136, 34, 0.15); transition: all 0.3s ease; overflow: hidden; position: relative; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/textures/texture-content-4-SMVuTf6.png"); background-repeat: repeat; opacity: 0.03; z-index: 0; } .card-body { position: relative; z-index: 1; background: var(--aef-beige-light); } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(204, 136, 34, 0.25); border-color: var(--aef-beige-primary); } .card-header { background: var(--aef-gradient-beige); border-bottom: 2px solid var(--aef-beige-border); color: var(--aef-white); font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; } /* Buttons - Style AEF modernisé */ .btn-primary { background: var(--aef-gradient-blue); border: 2px solid var(--aef-blue-dark); color: var(--aef-white); font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 8px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; position: relative; overflow: hidden; } .btn-primary: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:hover:before { left: 100%; } .btn-primary:hover { background: var(--aef-blue-dark); border-color: var(--aef-beige-primary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 153, 204, 0.4); } .btn-outline-primary { border: 2px solid var(--aef-blue-primary); color: var(--aef-blue-primary); background: transparent; font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 8px; transition: all 0.3s ease; } .btn-outline-primary:hover { background: var(--aef-blue-primary); border-color: var(--aef-blue-primary); color: var(--aef-white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 153, 204, 0.3); } /* Secondary button - Beige style */ .btn-secondary-aef { background: var(--aef-gradient-beige); border: 2px solid var(--aef-beige-primary); color: var(--aef-white); font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 8px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .btn-secondary-aef:hover { background: var(--aef-brown-dark); border-color: var(--aef-brown-dark); color: var(--aef-white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(204, 136, 34, 0.4); } /* Alert styling */ .alert { border: none; border-radius: 10px; border-left: 4px solid; font-weight: 500; } .alert-success { background-color: rgba(40, 167, 69, 0.1); border-left-color: #28a745; color: #155724; } .alert-danger { background-color: rgba(220, 53, 69, 0.1); border-left-color: #dc3545; color: #721c24; } .alert-info { background-color: var(--aef-blue-light); border-left-color: var(--aef-blue-primary); color: var(--aef-blue-dark); } /* Links */ a { color: var(--aef-blue-dark); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--aef-blue-primary); text-decoration: underline; } /* Decorative elements inspired by AEF */ .aef-decorative-border { border: 2px solid var(--aef-beige-border); border-radius: 12px; background: var(--aef-beige-light); padding: 1.5rem; margin: 1rem 0; position: relative; overflow: hidden; } .aef-decorative-border::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/textures/texture-content-5-SMVuTf6.png"); background-repeat: repeat; opacity: 0.05; z-index: 0; } .aef-decorative-border > * { position: relative; z-index: 1; } .aef-decorative-border:after { content: '🏺'; position: absolute; top: -15px; left: 20px; background: var(--aef-beige-light); padding: 0 10px; font-size: 1.5rem; z-index: 2; } /* Footer - Style AEF authentique de l'ancien site */ .footer { background: var(--aef-gradient-blue); border-top: 4px solid var(--aef-beige-primary); color: var(--aef-white); padding: 2rem 0 1rem; margin-top: 3rem; position: relative; overflow: hidden; box-shadow: 0 -4px 12px rgba(0, 136, 204, 0.3); } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/textures/footer-flower-SMVuTf6.png"); background-repeat: no-repeat; background-position: right bottom; background-size: 300px auto; opacity: 0.1; z-index: 0; } .footer .container { position: relative; z-index: 1; } .footer h5 { color: var(--aef-beige-primary); font-weight: 600; margin-bottom: 1rem; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; } .footer a:hover { color: var(--aef-beige-primary); } .footer .small { opacity: 0.7; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1rem; margin-top: 1.5rem; } /* Responsive design */ @media (max-width: 768px) { .navbar-brand { font-size: 1.4rem; } .card { margin-bottom: 1rem; } .btn-primary, .btn-outline-primary, .btn-secondary-aef { font-size: 0.9rem; padding: 0.5rem 1rem; } body { font-size: 0.9rem; } /* Collapse mobile avec arrière-plan clair et bords arrondis */ .navbar-collapse { background: rgba(255, 255, 255, 0.95) !important; border-radius: 15px !important; margin-top: 1rem; padding: 1.5rem !important; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 136, 204, 0.15); border: 2px solid rgba(0, 136, 204, 0.1); } /* Navigation mobile - icônes et texte en bleu sur fond clair */ .navbar-nav .nav-link { color: var(--aef-blue-primary) !important; background: rgba(255, 255, 255, 0.8); border-radius: 12px !important; margin: 0.25rem 0 !important; padding: 1rem !important; font-weight: 600 !important; border: 1px solid rgba(0, 136, 204, 0.2); transition: all 0.3s ease; } .navbar-nav .nav-link.text-center { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; min-height: auto !important; } .navbar-nav .nav-link.text-center i { display: inline !important; margin-bottom: 0 !important; margin-right: 0.75rem !important; font-size: 1.2rem; width: 24px; text-align: center; flex-shrink: 0; color: var(--aef-blue-primary) !important; } .navbar-nav .nav-link.text-center small { display: inline !important; font-size: 1rem; text-transform: none; letter-spacing: normal; font-weight: 600; line-height: 1.2; margin-left: 0; color: var(--aef-blue-primary) !important; } /* Hover sur les éléments du menu mobile */ .navbar-nav .nav-link:hover { background: var(--aef-blue-light) !important; color: var(--aef-blue-dark) !important; transform: translateX(5px); border-color: var(--aef-blue-primary); } .navbar-nav .nav-link:hover i { color: var(--aef-blue-dark) !important; transform: scale(1.1); } .navbar-nav .nav-link:hover small { color: var(--aef-blue-dark) !important; } /* Sélecteur de langue mobile */ .navbar-nav .nav-item.dropdown .nav-link.text-center { border-left: none; border-top: 2px solid rgba(0, 136, 204, 0.2); margin-top: 1rem !important; padding-top: 1rem !important; } .dropdown-menu-end { right: auto !important; left: 0 !important; width: 100%; margin-top: 0.5rem !important; background: rgba(255, 255, 255, 0.95); border-radius: 12px; border: 1px solid rgba(0, 136, 204, 0.2); } .dropdown-item { color: var(--aef-blue-primary) !important; padding: 0.75rem 1rem; border-radius: 8px; margin: 0.25rem; } .dropdown-item:hover { background: var(--aef-blue-light) !important; color: var(--aef-blue-dark) !important; } } /* Icône du menu hamburger en bleu sur fond clair */ .navbar-toggler { border: 2px solid var(--aef-blue-primary) !important; background-color: rgba(255, 255, 255, 0.9) !important; padding: 0.5rem !important; border-radius: 8px !important; } .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(0, 136, 204, 0.25) !important; border-color: var(--aef-blue-dark) !important; background-color: rgba(255, 255, 255, 0.95) !important; } .navbar-toggler:hover { border-color: var(--aef-blue-dark) !important; background-color: rgba(255, 255, 255, 0.95) !important; } .navbar-toggler:active { background-color: var(--aef-blue-light) !important; border-color: var(--aef-blue-dark) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23005580' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; filter: none !important; width: 1.5em !important; height: 1.5em !important; } /* Additional decorative elements */ .aef-logo-container { display: inline-block; padding: 0.5rem; background: var(--aef-white); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 136, 204, 0.2); margin-right: 1rem; } .aef-logo { height: 40px; width: auto; border-radius: 4px; } /* Vintage-inspired animations - Couleurs authentiques AEF */ @keyframes aef-glow { 0%, 100% { box-shadow: 0 0 5px rgba(0, 136, 204, 0.5); } 50% { box-shadow: 0 0 20px rgba(0, 136, 204, 0.8); } } .aef-glow-effect { animation: aef-glow 2s ease-in-out infinite; } /* Text styling */ .aef-title { color: var(--aef-blue-dark); font-weight: 700; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .aef-subtitle { color: var(--aef-beige-primary); font-weight: 600; } .aef-text-muted { color: var(--aef-text-muted); font-style: italic; } /* Texture backgrounds pour certaines sections */ .aef-texture-section { background-image: url("../images/textures/texture-content-6-SMVuTf6.png"); background-repeat: repeat; background-blend-mode: overlay; } /* Style spécial pour la bannière hero */ .aef-hero-section { background: linear-gradient( 135deg, var(--aef-beige-light) 0%, var(--aef-white) 50%, var(--aef-blue-light) 100% ); position: relative; overflow: hidden; } .aef-hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("../images/textures/texture-flower-large-SMVuTf6.png"); background-repeat: no-repeat; background-position: right center; background-size: 200px auto; opacity: 0.1; z-index: 0; } /* Amélioration des cartes avec textures */ .card-img-top { border-bottom: 2px solid var(--aef-beige-border); } /* Effet hover sur les éléments interactifs */ .aef-interactive:hover { transform: translateY(-2px); transition: transform 0.3s ease; } /* Styles pour les badges et étiquettes */ .badge { border-radius: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Menu mobile - Styles corrigés pour arrière-plan clair */ @media (max-width: 991.98px) { .navbar-collapse { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 1rem; margin-top: 0.5rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 136, 204, 0.2); } .navbar-nav .nav-link { color: var(--aef-blue-primary) !important; font-weight: 500; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.25rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .navbar-nav .nav-link:hover { background: rgba(0, 136, 204, 0.1); color: var(--aef-blue-dark) !important; } .navbar-nav .nav-link i { color: var(--aef-blue-primary) !important; font-size: 1.1rem; width: 20px; text-align: center; } /* Toggler avec icône SVG claire */ .navbar-toggler { border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 24px; height: 24px; } /* Sélecteur de langue dans le menu mobile */ .language-selector .dropdown-menu { background: white; border: 1px solid rgba(0, 136, 204, 0.2); border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .language-selector .dropdown-item { color: var(--aef-blue-primary); padding: 0.5rem 1rem; transition: all 0.3s ease; } .language-selector .dropdown-item:hover { background: rgba(0, 136, 204, 0.1); color: var(--aef-blue-dark); } } /* Cartes d'objets cliquables dans le catalogue */ .item-card { transition: all 0.3s ease; border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden; height: 100%; } .item-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: var(--aef-blue-primary); } .item-card-link { display: block; text-decoration: none !important; color: inherit !important; height: 100%; } .item-card-link:hover { text-decoration: none !important; color: inherit !important; } .item-card .item-image { height: 200px; object-fit: cover; transition: transform 0.3s ease; } .item-card:hover .item-image { transform: scale(1.05); } .item-card .card-body { padding: 1.25rem; display: flex; flex-direction: column; height: calc(100% - 200px); } .item-card .card-title { font-weight: 600; color: var(--aef-text-dark); line-height: 1.3; margin-bottom: 0.75rem; } .item-card .item-price { font-weight: bold; color: var(--aef-blue-primary); font-size: 1.1rem; } .item-card .item-member { font-size: 0.9rem; color: var(--aef-text-muted); margin-top: auto; } .item-card .badge { font-size: 0.75rem; } /* Responsive pour les cartes */ @media (max-width: 768px) { .item-card .item-image { height: 150px; } .item-card .card-body { padding: 1rem; height: calc(100% - 150px); } .item-card .card-title { font-size: 0.9rem; } .item-card .item-price { font-size: 1rem; } } /* ============================================ COMPOSANTS RÉUTILISABLES - SECTIONS HERO ============================================ */ /* Variables supplémentaires pour les composants */ :root { --aef-accent-gold: #cc8822; --aef-text-light: #6c757d; --aef-surface: #ffffff; --aef-background: #f8fafc; --aef-success: #10b981; } /* Page d'accueil et pages générales */ .home-page { background: var(--aef-background); min-height: 100vh; } /* Supprimer les marges du main-content sur la page d'accueil pour que la hero section soit collée */ body:has(.hero-section) .main-content { padding-top: 0; } /* Alternative pour les navigateurs sans support de :has() */ .page-with-hero .main-content { padding-top: 0; } /* Hero Section - En pleine largeur, collée à la navigation */ .hero-section { background: var(--aef-gradient-blue); position: relative; min-height: 80vh; overflow: hidden; display: flex; align-items: center; margin: 0; padding: 4rem 0; width: 100%; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 0%, transparent 50%); animation: shimmer 4s ease-in-out infinite alternate; } @keyframes shimmer { 0% { opacity: 0.7; } 100% { opacity: 1; } } .hero-content { position: relative; z-index: 2; color: white; width: 100%; } .hero-title { font-size: 4.5rem; font-weight: 900; margin-bottom: 2rem; text-shadow: 0 4px 30px rgba(0,0,0,0.4); letter-spacing: -0.03em; line-height: 1.1; } .hero-subtitle { font-size: 1.4rem; font-weight: 400; opacity: 0.95; margin-bottom: 3rem; line-height: 1.6; } .hero-buttons { display: flex; gap: 1.5rem; margin-bottom: 3rem; flex-wrap: wrap; } .btn-hero-primary { background: rgba(255,255,255,0.15); color: white; border: 2px solid rgba(255,255,255,0.3); padding: 15px 30px; border-radius: 25px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-hero-primary:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); color: white; text-decoration: none; } .btn-hero-secondary { background: var(--aef-accent-gold); color: white; border: 2px solid var(--aef-accent-gold); padding: 15px 30px; border-radius: 25px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-hero-secondary:hover { background: var(--aef-brown-dark); border-color: var(--aef-brown-dark); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(204, 136, 34, 0.3); color: white; text-decoration: none; } .hero-stats { display: flex; justify-content: center; gap: 4rem; margin-top: 3rem; } .stat-item { text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 900; display: block; color: var(--aef-accent-gold); text-shadow: 0 2px 15px rgba(0,0,0,0.3); } .stat-label { font-size: 1rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; } .hero-decoration { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); opacity: 0.15; font-size: 20rem; color: white; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(-60%) rotate(5deg); } } /* ============================================ SECTIONS DE CONTENU RÉUTILISABLES ============================================ */ /* Section Objets Récents et autres sections similaires */ .content-section { padding: 6rem 0; background: var(--aef-surface); } .recent-items-section { padding: 6rem 0; background: var(--aef-surface); } .section-header { text-align: center; margin-bottom: 4rem; } .section-title { font-size: 2.5rem; font-weight: 900; color: var(--aef-text-dark); margin-bottom: 1rem; } .section-subtitle { font-size: 1.2rem; color: var(--aef-text-light); max-width: 600px; margin: 0 auto; } /* ============================================ GRILLES D'OBJETS RÉUTILISABLES ============================================ */ .items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin: 3rem 0; } /* Cartes d'objets améliorées - réutilisables */ .item-card { background: var(--aef-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; height: 100%; } .item-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.02); } .item-image { position: relative; height: 280px; overflow: hidden; background: linear-gradient(135deg, #f8fafc, #e2e8f0); } .item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .item-card:hover .item-image img { transform: scale(1.08); } .item-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, var(--aef-blue-primary)e6, var(--aef-blue-dark)e6); opacity: 0; transition: opacity 0.4s ease; display: flex; align-items: center; justify-content: center; } .item-card:hover .item-overlay { opacity: 1; } .view-btn { background: rgba(255,255,255,0.95); color: var(--aef-text-dark); border: none; padding: 12px 24px; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; backdrop-filter: blur(10px); } .view-btn:hover { background: white; transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.15); color: var(--aef-text-dark); text-decoration: none; } .placeholder-image { display: flex; align-items: center; justify-content: center; color: var(--aef-text-light); font-size: 3rem; opacity: 0.3; } .item-info { padding: 2rem; display: flex; flex-direction: column; height: calc(100% - 280px); } .item-title { font-size: 1.3rem; font-weight: 700; color: var(--aef-text-dark); margin-bottom: 0.8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-description { color: var(--aef-text-light); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; } .item-price { font-size: 1.8rem; font-weight: 800; color: var(--aef-accent-gold); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .item-price::before { content: '€'; font-size: 1.2rem; opacity: 0.7; } .item-member { color: var(--aef-text-light); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; margin-top: auto; } .item-badge { background: var(--aef-gradient-blue); color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; } /* ============================================ GRILLES DE CATÉGORIES RÉUTILISABLES ============================================ */ /* Section Catégories */ .categories-section { padding: 6rem 0; background: linear-gradient(135deg, #f8fafc, #e2e8f0); } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 3rem 0; } .category-card { background: var(--aef-surface); padding: 3rem 2rem; border-radius: 20px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .category-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--aef-gradient-blue); } .category-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.02); } .category-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--aef-gradient-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; } .category-title { font-size: 1.4rem; font-weight: 700; color: var(--aef-text-dark); margin-bottom: 1rem; } .category-description { color: var(--aef-text-light); margin-bottom: 1.5rem; line-height: 1.6; } .category-count { color: var(--aef-accent-gold); font-weight: 600; margin-bottom: 1.5rem; } .category-btn { background: var(--aef-gradient-blue); color: white; border: none; padding: 10px 20px; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; display: inline-block; } .category-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3); color: white; text-decoration: none; } /* ============================================ RESPONSIVE DESIGN POUR NOUVEAUX COMPOSANTS ============================================ */ /* Responsive pour tablettes larges */ @media (max-width: 1199px) { .items-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } /* Responsive pour tablettes */ @media (max-width: 991px) { .items-grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } } @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-stats { flex-direction: column; gap: 2rem; } .hero-buttons { flex-direction: column; align-items: center; } .items-grid, .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .hero-decoration { display: none; } .item-image { height: 200px; } .item-info { padding: 1.5rem; height: calc(100% - 200px); } .item-title { font-size: 1.1rem; } .item-price { font-size: 1.5rem; } .category-card { padding: 2rem 1.5rem; } .category-icon { width: 60px; height: 60px; font-size: 1.5rem; } } /* Responsive pour petits mobiles */ @media (max-width: 480px) { .items-grid { grid-template-columns: 1fr; gap: 1.5rem; } .item-image { height: 250px; } .item-info { height: calc(100% - 250px); } .categories-grid { grid-template-columns: 1fr; } } /* ===== CATALOG PAGE STYLES ===== */ .catalog-hero { background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-dark) 100%); position: relative; overflow: visible; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); } .catalog-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 0%, transparent 50%); animation: shimmer 3s ease-in-out infinite alternate; } /* Breadcrumb des filtres actifs */ .breadcrumb-section { background: var(--aef-white); border-bottom: 1px solid var(--aef-blue-border); border-radius: 12px; padding: 1rem 0; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0, 136, 204, 0.1); position: relative; z-index: 5 !important; } .filters-breadcrumb { background: var(--aef-white); border-bottom: 1px solid var(--aef-blue-border); border-radius: 12px; padding: 1rem 0; margin-top: 20px; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0, 136, 204, 0.1); position: relative; z-index: 5 !important; } .breadcrumb-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .breadcrumb-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .breadcrumb-label { font-weight: 600; color: var(--aef-text-dark); margin-right: 0.5rem; } .breadcrumb-label i { color: var(--aef-blue-primary); } .active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .filter-badge { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; background: var(--aef-blue-light); border: 1px solid var(--aef-blue-border); border-radius: 12px; font-size: 0.875rem; font-weight: 500; color: var(--aef-blue-darker); transition: all 0.3s ease; } .filter-badge:hover { background: var(--aef-blue-primary); color: var(--aef-white); } .filter-badge i { margin-right: 0.375rem; font-size: 0.8rem; } .remove-filter { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.5rem; padding: 0; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 50%; width: 18px; height: 18px; font-size: 0.625rem; color: var(--aef-white); text-decoration: none; transition: all 0.3s ease; cursor: pointer; line-height: 1; text-align: center; vertical-align: middle; } .remove-filter i { margin: 0; padding: 0; line-height: 1; display: block; } .remove-filter:hover { background: #dc3545; color: var(--aef-white); border-color: #dc3545; transform: scale(1.1); box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3); } .filter-badge:hover .remove-filter { background: rgba(220, 53, 69, 0.6); border-color: rgba(220, 53, 69, 0.8); } .breadcrumb-info { display: flex; align-items: center; gap: 1rem; } .results-summary { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--aef-text-muted); } .results-count { font-weight: 600; color: var(--aef-blue-darker); } .page-indicator { color: var(--aef-text-muted); font-size: 0.8rem; } .clear-all-filters { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; background: transparent; border: 1px solid var(--aef-beige-primary); border-radius: 12px; font-size: 0.875rem; font-weight: 500; color: var(--aef-beige-primary); text-decoration: none; transition: all 0.3s ease; } .clear-all-filters:hover { background: var(--aef-beige-primary); color: var(--aef-white); text-decoration: none; } /* Media query pour tablettes et petits écrans - éviter superposition breadcrumb */ @media (max-width: 999px) { .breadcrumb-section { margin-top: 1rem; z-index: 15; } .filters-breadcrumb { margin-top: 1.5rem; z-index: 15; } .filters-section { z-index: 5; margin-top: -2rem; } } @media (max-width: 768px) { .breadcrumb-content { flex-direction: column; align-items: flex-start; } .breadcrumb-filters { width: 100%; flex-direction: column; align-items: flex-start; } .active-filters { margin-top: 0.5rem; } .breadcrumb-info { width: 100%; justify-content: space-between; } .filter-badge { font-size: 0.8rem; padding: 0.25rem 0.5rem; } } /* Filtres modernes */ .filters-section { background: white; border-radius: 24px; padding: 2.5rem; margin: -3rem 0 3rem; position: relative; z-index: 5; box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02); } .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .filter-group { position: relative; } .filter-label { font-weight: 600; color: var(--aef-text-dark); margin-bottom: 0.5rem; display: block; text-align: center; } .filter-input { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: #fafbfc; } .filter-input:focus { border-color: var(--aef-blue-primary); background: white; box-shadow: 0 0 0 0.2rem rgba(0, 136, 204, 0.15); outline: none; } .filter-buttons { display: flex; gap: 1rem; justify-content: center; } .btn-filter { background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-dark)); color: white; border: none; padding: 12px 24px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .btn-filter:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3); color: white; text-decoration: none; } .btn-reset { background: white; color: var(--aef-text-dark); border: 2px solid #e2e8f0; padding: 12px 24px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; text-decoration: none; } .btn-reset:hover { border-color: var(--aef-blue-primary); color: var(--aef-blue-primary); text-decoration: none; } /* Pagination moderne */ .pagination-wrapper { text-align: center; margin-top: 4rem; } .pagination-modern { display: inline-flex; gap: 0.5rem; align-items: center; } .page-btn { background: white; color: var(--aef-text-dark); border: 2px solid #e2e8f0; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .page-btn:hover, .page-btn.active { background: var(--aef-blue-primary); border-color: var(--aef-blue-primary); color: white; text-decoration: none; } /* Responsivité pour catalogue */ @media (max-width: 768px) { .filters-grid { grid-template-columns: 1fr; } .filter-buttons { flex-direction: column; } } /* Styles pour les filtres intégrés dans le hero */ .hero-filters { position: relative; margin-top: 3rem; margin-bottom: -120px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); z-index: 5; } .hero-filters .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .hero-filters .filter-group { display: flex; flex-direction: column; gap: 0.5rem; } .hero-filters .filter-label { font-weight: 600; color: var(--aef-text-dark); font-size: 0.9rem; margin-bottom: 0.25rem; } .hero-filters .filter-input { padding: 0.75rem 1rem; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 10px; background: rgba(255, 255, 255, 0.9); color: var(--aef-text-dark); font-size: 0.9rem; transition: all 0.3s ease; } .hero-filters .filter-input:focus { outline: none; border-color: var(--aef-blue-primary); box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1); background: white; } .hero-filters .filter-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-filters .btn-filter, .hero-filters .btn-reset { padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; border: 2px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .hero-filters .btn-filter { background: var(--aef-blue-primary); color: white; border-color: var(--aef-blue-primary); } .hero-filters .btn-filter:hover { background: var(--aef-blue-secondary); border-color: var(--aef-blue-secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3); } .hero-filters .btn-reset { background: rgba(255, 255, 255, 0.9); color: var(--aef-text-muted); border-color: rgba(255, 255, 255, 0.8); } .hero-filters .btn-reset:hover { background: white; color: var(--aef-text-dark); border-color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-decoration: none; } @media (max-width: 768px) { .hero-filters { padding: 1.5rem; margin-top: 1.5rem; } .hero-filters .filters-grid { grid-template-columns: 1fr; gap: 1rem; } .hero-filters .filter-buttons { flex-direction: column; gap: 0.75rem; } .hero-filters .btn-filter, .hero-filters .btn-reset { width: 100%; justify-content: center; } } /* Styles pour l'annuaire des antiquaires */ .members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; } .member-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); } .member-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); } .member-image { position: relative; height: 180px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .member-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .member-card:hover .member-image img { transform: scale(1.05); } .placeholder-logo { width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; } .premium-badge { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #2d3748; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 0.3rem; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); } .premium-badge i { font-size: 0.8rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } .member-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .member-card:hover .member-overlay { opacity: 1; } .view-btn { background: rgba(255, 255, 255, 0.95); color: #2d3748; border: none; padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 0.5rem; } .view-btn:hover { background: white; color: #2d3748; text-decoration: none; transform: translateY(-2px); } .member-info { padding: 1.5rem; } .member-title { font-size: 1.25rem; font-weight: 700; color: #2d3748; margin-bottom: 0.5rem; line-height: 1.3; } .member-location { color: #718096; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .member-location i { color: #667eea; } .member-specialties { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .specialty-tag { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.75rem; font-weight: 500; } .specialty-more { background: #e2e8f0; color: #718096; } .member-description { color: #4a5568; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; } .member-stats { display: flex; gap: 1rem; flex-wrap: wrap; } .member-stats .stat-item { display: flex; align-items: center; gap: 0.25rem; color: #718096; font-size: 0.8rem; } .member-stats .stat-item i { color: #667eea; } .results-section { padding: 2rem 0; } .results-section h3 { color: #2d3748; font-weight: 600; margin-bottom: 2rem; } @media (max-width: 768px) { .members-grid { grid-template-columns: 1fr; gap: 1.5rem; } .member-card { border-radius: 16px; } .member-image { height: 150px; } } @media (max-width: 480px) { .member-info { padding: 1rem; } .member-title { font-size: 1.1rem; } } @media (max-width: 576px) { .items-grid, .categories-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (min-width: 992px) { .items-grid { grid-template-columns: repeat(4, 1fr); } } /* ===== BLOG PAGE STYLES ===== */ .blog-hero { background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-dark) 100%); position: relative; overflow: hidden; } .hero-decoration { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); opacity: 0.1; font-size: 15rem; color: white; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(-50%) rotate(0deg); } 50% { transform: translateY(-60%) rotate(10deg); } } /* Articles Section */ .articles-section { padding: 6rem 0; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; margin: 3rem 0; } .article-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; } .article-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.02); } .article-image { position: relative; height: 300px; overflow: hidden; background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-dark)); } .article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .article-card:hover .article-image img { transform: scale(1.08); } .placeholder-image { display: flex; align-items: center; justify-content: center; color: white; font-size: 4rem; opacity: 0.7; } .article-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 136, 204, 0.9), rgba(0, 85, 204, 0.9)); opacity: 0; transition: opacity 0.4s ease; display: flex; align-items: center; justify-content: center; } .article-card:hover .article-overlay { opacity: 1; } .read-btn { background: rgba(255,255,255,0.95); color: var(--aef-text-dark); border: none; padding: 12px 24px; border-radius: 25px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; backdrop-filter: blur(10px); } .read-btn:hover { background: white; transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.15); color: var(--aef-text-dark); text-decoration: none; } .article-info { padding: 2.5rem; } .article-date { color: var(--aef-accent-gold); font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .article-title { font-size: 1.5rem; font-weight: 700; color: var(--aef-text-dark); margin-bottom: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-excerpt { color: var(--aef-text-light); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .article-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .article-author { color: var(--aef-text-light); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; } .article-category { background: linear-gradient(135deg, var(--aef-blue-primary), #2563eb); color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; } /* Responsivité pour blog */ @media (max-width: 768px) { .articles-grid { grid-template-columns: 1fr; } .hero-decoration { display: none; } } /* ===== DIRECTORY PAGE STYLES ===== */ .directory-hero { background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-dark) 100%); color: white; position: relative; overflow: hidden; } .directory-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat; animation: patternMove 30s linear infinite; z-index: 1; } @keyframes patternMove { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } } .directory-hero .hero-content { position: relative; z-index: 2; } .member-avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: var(--aef-blue-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; flex-shrink: 0; } .member-avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, var(--aef-blue-primary), var(--aef-blue-dark)); color: white; font-weight: bold; font-size: 1.2rem; } .member-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(0, 136, 204, 0.1); border-radius: 15px; box-shadow: 0 8px 25px rgba(0, 136, 204, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .member-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0, 136, 204, 0.2); border-color: var(--aef-blue-primary); } /* ===== ITEM SHOW PAGE STYLES ===== */ .item-hero { background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-dark) 100%); color: white; position: relative; overflow: hidden; } .item-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M25 25c0-6.9-5.6-12.5-12.5-12.5S0 18.1 0 25s5.6 12.5 12.5 12.5S25 31.9 25 25zm25 0c0-6.9-5.6-12.5-12.5-12.5S37.5 18.1 37.5 25s5.6 12.5 12.5 12.5S50 31.9 50 25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat; animation: itemPattern 25s linear infinite; z-index: 1; } @keyframes itemPattern { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .item-hero .hero-content { position: relative; z-index: 2; } .item-meta-info { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .item-ref { font-family: 'Courier New', monospace; font-size: 0.9rem; } /* Gallery styles */ .item-gallery { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 136, 204, 0.1); border: 1px solid rgba(0, 136, 204, 0.1); } .main-image-container { position: relative; } .main-image { position: relative; overflow: hidden; border-radius: 20px 20px 0 0; } .main-image img { width: 100%; height: 400px; object-fit: cover; transition: transform 0.3s ease; } .main-image:hover img { transform: scale(1.02); } .image-count { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 12px; border-radius: 20px; font-size: 0.9rem; backdrop-filter: blur(10px); } .thumbnails-container { padding: 1rem; } .thumbnail { aspect-ratio: 1; overflow: hidden; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; opacity: 0.7; } .thumbnail.active { border-color: var(--aef-blue-primary); opacity: 1; box-shadow: 0 0 0 2px rgba(0, 136, 204, 0.3); } .thumbnail:hover { opacity: 1; transform: scale(1.05); } .thumbnail img { width: 100%; height: 100%; object-fit: cover; } .thumbnail-more { aspect-ratio: 1; background: var(--aef-blue-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--aef-blue-primary); font-weight: bold; cursor: pointer; transition: all 0.3s ease; } .thumbnail-more:hover { background: var(--aef-blue-primary); color: white; transform: scale(1.05); } .placeholder-image { height: 400px; background: var(--aef-blue-light); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--aef-text-light); border-radius: 20px; } /* Item details styles */ .item-details { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 15px 40px rgba(0, 136, 204, 0.1); border: 1px solid rgba(0, 136, 204, 0.1); } .price-section { text-align: center; padding: 2rem; background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-dark)); color: white; border-radius: 15px; margin-bottom: 2rem; } .current-price { font-size: 2.5rem; font-weight: 900; display: block; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .original-price { font-size: 1.2rem; text-decoration: line-through; opacity: 0.7; display: block; margin-top: 0.5rem; } .discount-badge { display: inline-block; background: var(--aef-accent-gold); color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.9rem; font-weight: bold; margin-top: 0.5rem; } .price-on-request { font-size: 1.8rem; font-weight: 700; color: var(--aef-accent-gold); } .section-title { color: var(--aef-text-dark); font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; border-bottom: 2px solid var(--aef-blue-light); padding-bottom: 0.5rem; } .description-content { color: var(--aef-text-light); line-height: 1.7; font-size: 1rem; } .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .spec-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--aef-blue-light); border-radius: 10px; border: 1px solid rgba(0, 136, 204, 0.1); } .spec-label { font-weight: 600; color: var(--aef-text-dark); } .spec-value { font-weight: 500; color: var(--aef-blue-primary); } .action-buttons .btn-lg { padding: 1rem 2rem; font-size: 1.1rem; font-weight: 600; border-radius: 15px; } .secondary-actions { display: flex; gap: 0.5rem; justify-content: center; } .secondary-actions .btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Seller info styles */ .seller-info { border-top: 2px solid var(--aef-blue-light); padding-top: 2rem; } .seller-card { background: var(--aef-blue-light); padding: 1.5rem; border-radius: 15px; border: 1px solid rgba(0, 136, 204, 0.1); } .seller-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--aef-blue-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; flex-shrink: 0; } .seller-avatar img { width: 100%; height: 100%; object-fit: cover; } .seller-name { color: var(--aef-text-dark); font-weight: 700; margin-bottom: 0.5rem; } .seller-location { color: var(--aef-text-light); font-size: 0.9rem; margin-bottom: 1rem; } .seller-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Related items section */ .related-items-section { background: var(--aef-blue-light); padding: 4rem 0; border-radius: 20px; margin-top: 3rem; } /* Modal customization */ .modal-content { border-radius: 20px; border: none; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3); } .modal-header { border-bottom: 2px solid var(--aef-blue-light); padding: 1.5rem 2rem; } .modal-title { color: var(--aef-text-dark); font-weight: 700; } .modal-body { padding: 2rem; } .modal-footer { border-top: 2px solid var(--aef-blue-light); padding: 1.5rem 2rem; } /* Responsive */ @media (max-width: 768px) { .item-meta-info { flex-direction: column; align-items: flex-start; } .main-image img { height: 300px; } .current-price { font-size: 2rem; } .specs-grid { grid-template-columns: 1fr; } .secondary-actions { flex-direction: column; } .seller-actions { flex-direction: column; } } /* ===== MEMBER SHOW PAGE STYLES (REMOVED - See new compact design below) ===== */ .member-hero-avatar { width: 120px; height: 120px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.2); border: 4px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .member-hero-avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-placeholder-large { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, var(--aef-blue-primary), var(--aef-blue-dark)); color: white; font-weight: 900; font-size: 3rem; } .member-location { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; } .member-specialties { margin-top: 1rem; } .member-specialties .badge { margin-right: 0.5rem; margin-bottom: 0.5rem; padding: 8px 12px; font-size: 0.9rem; } /* Member sections */ .member-section { margin-bottom: 2rem; } .member-section .card { border-radius: 20px; border: 1px solid rgba(0, 136, 204, 0.1); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.08); transition: all 0.3s ease; } .member-section .card:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0, 136, 204, 0.15); } .member-section .card-header { background: var(--aef-blue-light); border-bottom: 2px solid rgba(0, 136, 204, 0.1); border-radius: 20px 20px 0 0 !important; padding: 1.5rem 2rem; } .member-section .card-body { padding: 2rem; } .member-description { color: var(--aef-text-light); line-height: 1.7; font-size: 1.1rem; } /* Items grid specific to member page - 3 colonnes */ .member-section .items-grid, .items-grid-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } @media (min-width: 992px) { .items-grid-3col { grid-template-columns: repeat(3, 1fr); } } /* Spécialités en grille */ .specialties-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .specialty-card { display: flex; align-items: center; padding: 1rem; background: rgba(0, 136, 204, 0.05); border: 1px solid rgba(0, 136, 204, 0.1); border-radius: 12px; text-decoration: none; color: var(--aef-blue-dark); font-weight: 500; transition: all 0.3s ease; } .specialty-card:hover { background: rgba(0, 136, 204, 0.1); border-color: var(--aef-blue-primary); color: var(--aef-blue-primary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 136, 204, 0.2); } .specialty-card i { color: var(--aef-beige-primary); transition: transform 0.3s ease; } .specialty-card:hover i { transform: translateX(3px); } .item-status-badge { position: absolute; top: 10px; right: 10px; padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .item-status-badge.sold { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); } .item-status-badge.reserved { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } /* Gallery grid */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .gallery-item { position: relative; aspect-ratio: 1; border-radius: 15px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; } .gallery-item:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.2); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-overlay { position: absolute; inset: 0; background: rgba(0, 136, 204, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; color: white; font-size: 1.5rem; } .gallery-item:hover .gallery-overlay { opacity: 1; } /* Sidebar */ .member-sidebar-card { margin-bottom: 1.5rem; } .member-sidebar-card .card { border-radius: 15px; border: 1px solid rgba(0, 136, 204, 0.1); box-shadow: 0 5px 15px rgba(0, 136, 204, 0.1); } .member-sidebar-card .card-header { background: var(--aef-blue-light); border-bottom: 1px solid rgba(0, 136, 204, 0.1); border-radius: 15px 15px 0 0 !important; padding: 1rem 1.5rem; } .member-sidebar-card .card-body { padding: 1.5rem; } .contact-info { margin-bottom: 1.5rem; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--aef-blue-light); } .contact-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .contact-item i { color: var(--aef-blue-primary); width: 20px; margin-right: 1rem; margin-top: 2px; flex-shrink: 0; } .contact-item a { color: var(--aef-text-dark); text-decoration: none; font-weight: 500; } .contact-item a:hover { color: var(--aef-blue-primary); text-decoration: underline; } .specialties-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .specialty-badge { background: var(--aef-blue-primary); color: white; padding: 6px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 500; } .opening-hours { color: var(--aef-text-light); line-height: 1.6; } /* Map styles */ .member-map { height: 250px; border-radius: 0; background: var(--aef-blue-light); } .map-footer { background: var(--aef-blue-light); border-top: 1px solid rgba(0, 136, 204, 0.1); } /* Responsive */ @media (max-width: 768px) { .member-hero-info .row { text-align: center; } .member-hero-avatar { width: 100px; height: 100px; } .avatar-placeholder-large { font-size: 2.5rem; } .member-specialties .badge { font-size: 0.8rem; padding: 6px 10px; } .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .member-section .items-grid { grid-template-columns: 1fr; } .contact-actions { gap: 0.75rem; } } /* ============================================================================ MEMBER PROFILE STYLES ============================================================================ */ /* Member Hero Section */ .member-hero { background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-dark) 100%); color: white; padding: 80px 0 60px; position: relative; overflow: hidden; } .member-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../images/textures/texture-content-4-SMVuTf6.png") repeat; opacity: 0.1; z-index: 1; } .member-hero-content { position: relative; z-index: 2; } .hero-breadcrumb { margin-bottom: 2rem; } .hero-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; } .hero-breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; } .hero-breadcrumb .breadcrumb-item a:hover { color: white; } .hero-breadcrumb .breadcrumb-item.active { color: rgba(255, 255, 255, 0.6); } .hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.6); } .member-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .member-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9; } .member-specialties { margin-bottom: 2rem; } .specialty-badge { background: rgba(255, 255, 255, 0.2); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; margin-right: 0.5rem; margin-bottom: 0.5rem; display: inline-block; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); } .member-stats { display: flex; gap: 2rem; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-number { display: block; font-size: 2rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .stat-label { display: block; font-size: 0.9rem; opacity: 0.8; margin-top: 0.25rem; } /* Member Avatar */ .member-avatar { text-align: center; margin-bottom: 2rem; } .member-logo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); } .member-logo-placeholder { width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 4px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto; backdrop-filter: blur(10px); } .member-logo-placeholder i { font-size: 3rem; color: rgba(255, 255, 255, 0.8); } .member-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Hero Buttons */ .btn-hero-primary, .btn-hero-secondary { padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border: 2px solid transparent; backdrop-filter: blur(10px); } .btn-hero-primary { background: rgba(255, 255, 255, 0.2); color: white; border-color: rgba(255, 255, 255, 0.3); } .btn-hero-primary:hover { background: white; color: var(--aef-blue-primary); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .btn-hero-secondary { background: transparent; color: white; border-color: rgba(255, 255, 255, 0.5); } .btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.1); color: white; border-color: white; transform: translateY(-2px); } /* Member Content */ .member-content { padding: 4rem 0; background: #f8f9fa; } .member-section { margin-bottom: 3rem; } .member-section .card { border: none; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .member-section .card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); } .member-section .card-header { background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-dark)); color: white; border-radius: 15px 15px 0 0 !important; padding: 1.5rem; border: none; } .section-title { font-size: 1.5rem; font-weight: 600; margin: 0; } .section-title i { color: rgba(255, 255, 255, 0.8); } /* Certifications Grid */ .certificates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .certificate-item { background: #f8f9fa; padding: 1rem; border-radius: 10px; border-left: 4px solid var(--aef-blue-primary); transition: all 0.3s ease; } .certificate-item:hover { background: #e9ecef; transform: translateX(5px); } /* Testimonials Grid */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .testimonial-item { background: #f8f9fa; padding: 2rem; border-radius: 15px; position: relative; transition: all 0.3s ease; } .testimonial-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .testimonial-quote { position: absolute; top: 1rem; left: 1.5rem; font-size: 2rem; color: var(--aef-blue-primary); opacity: 0.3; } .testimonial-content { margin-bottom: 1.5rem; } .testimonial-content p { font-style: italic; margin: 0; padding-left: 2rem; line-height: 1.6; } .testimonial-author { text-align: right; padding-top: 1rem; border-top: 2px solid #dee2e6; } .testimonial-rating { margin-top: 0.5rem; } /* Social Networks */ .social-networks { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .social-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #f8f9fa; color: #333; text-decoration: none; border-radius: 25px; transition: all 0.3s ease; border: 2px solid transparent; } .social-link:hover { transform: translateY(-2px); color: white; text-decoration: none; } .social-link.social-facebook:hover { background: #1877f2; border-color: #1877f2; } .social-link.social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: #e6683c; } .social-link.social-twitter:hover { background: #1da1f2; border-color: #1da1f2; } .social-link.social-linkedin:hover { background: #0077b5; border-color: #0077b5; } .social-link i { font-size: 1.2rem; } /* Sidebar */ .member-sidebar-card { margin-bottom: 2rem; } .member-sidebar-card .card { border: none; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .member-sidebar-card .card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .member-sidebar-card .card-header { background: linear-gradient(135deg, var(--aef-beige-primary), #d4940f); color: white; border-radius: 15px 15px 0 0 !important; padding: 1.25rem; border: none; } /* Contact Info */ .contact-info { margin-bottom: 1.5rem; } .contact-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f0f0f0; } .contact-item:last-child { border-bottom: none; } .contact-item i { font-size: 1.2rem; margin-top: 0.2rem; width: 20px; text-align: center; } .contact-content { flex: 1; } .contact-content strong { display: block; margin-bottom: 0.25rem; color: #333; font-weight: 600; } .contact-content span { display: block; color: #666; line-height: 1.4; } .contact-content a { color: var(--aef-blue-primary); text-decoration: none; } .contact-content a:hover { text-decoration: underline; } /* Email Reveal */ .email-reveal { color: var(--aef-blue-primary) !important; font-size: inherit; line-height: inherit; } .email-reveal:hover { text-decoration: underline !important; } /* Contact Actions */ .contact-actions .btn { border-radius: 10px; font-weight: 600; padding: 0.75rem; transition: all 0.3s ease; } .contact-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Member Map */ .member-map { height: 250px; border-radius: 0; background: #f0f0f0; } .map-footer { background: #f8f9fa; border-radius: 0 0 15px 15px; } .map-footer .btn { border-radius: 8px; font-size: 0.9rem; padding: 0.5rem 1rem; } /* Specialties List */ .specialties-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .specialty-tag { background: var(--aef-blue-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; border: 2px solid transparent; } .specialty-tag:hover { background: var(--aef-blue-dark); color: white; text-decoration: none; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3); } /* Contact Modal */ .contact-form .form-label { font-weight: 600; color: #333; margin-bottom: 0.5rem; } .contact-form .form-control, .contact-form .form-select { border-radius: 8px; border: 2px solid #e9ecef; padding: 0.75rem; transition: all 0.3s ease; } .contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--aef-blue-primary); box-shadow: 0 0 0 0.2rem rgba(0, 136, 204, 0.25); } .form-check-input { border-radius: 4px; border: 2px solid #dee2e6; } .form-check-input:checked { background-color: var(--aef-blue-primary); border-color: var(--aef-blue-primary); } /* Story and Description */ .member-story, .member-description { line-height: 1.8; color: #555; font-size: 1.1rem; } .member-story { margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 10px; border-left: 4px solid var(--aef-blue-primary); } /* Responsive Design */ @media (max-width: 768px) { .member-title { font-size: 2rem; } .member-stats { justify-content: center; gap: 1rem; } .member-actions { flex-direction: column; align-items: stretch; } .btn-hero-primary, .btn-hero-secondary { margin-bottom: 0.5rem; } .certificates-grid, .testimonials-grid { grid-template-columns: 1fr; } .social-networks { flex-direction: column; align-items: stretch; } .member-logo, .member-logo-placeholder { width: 180px; height: 180px; } .member-logo-placeholder i { font-size: 2rem; } } /* Responsive pour nouveau layout */ @media (max-width: 768px) { .member-hero-banner { min-height: 350px; } .member-brand-card { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem; } .member-contact-card { padding: 1.5rem; margin-top: 2rem; } .contact-info-grid { gap: 0.8rem; } .contact-actions { gap: 0.4rem; flex-wrap: nowrap; } .contact-actions .btn { flex: 1; min-width: 0; padding: 0.6rem 0.7rem; font-size: 0.8rem; } .items-grid-3col { grid-template-columns: 1fr; gap: 1rem; } .specialties-grid { grid-template-columns: 1fr; } .brand-info .member-title { font-size: 1.5rem; } .brand-info .member-subtitle { font-size: 0.9rem; } } @media (max-width: 576px) { .member-hero-banner { min-height: 300px; } .member-brand-card { padding: 1rem; } .member-contact-card { padding: 1rem; } .brand-info .member-title { font-size: 1.3rem; } .brand-logo .member-logo, .brand-logo .member-logo-placeholder { width: 120px; height: 120px; } .brand-logo .member-logo-placeholder i { font-size: 1.5rem; } .member-content { padding: 2rem 0; } .member-section { margin-bottom: 1.5rem; } .contact-actions .btn { padding: 0.6rem 0.75rem; font-size: 0.8rem; min-width: 0; } } /* ============================================ SUBSCRIPTION PLANS COMPONENTS ============================================ */ .subscription-hero { background: var(--aef-gradient-blue); padding: 4rem 0; color: white; text-align: center; } .subscription-hero .display-4 { font-weight: 900; margin-bottom: 2rem; text-shadow: 0 4px 30px rgba(0,0,0,0.4); } .subscription-hero .lead { font-size: 1.3rem; opacity: 0.95; margin-bottom: 2rem; } .billing-toggle-section { margin-bottom: 3rem; } .billing-toggle { display: flex; justify-content: center; align-items: center; gap: 1rem; } .billing-toggle .form-check-input { transform: scale(1.5); } .pricing-card { border-radius: 20px; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s ease; height: 100%; } .pricing-card.featured { border-color: var(--aef-blue-primary); box-shadow: 0 20px 40px rgba(0, 136, 204, 0.15); transform: scale(1.05); position: relative; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-5px); } .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--aef-blue-primary); color: white; padding: 8px 20px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); } .trial-badge { position: absolute; top: 15px; right: 15px; background: var(--aef-success); color: white; padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 500; } .pricing-header { text-align: center; padding: 2.5rem 2rem 2rem; background: linear-gradient(135deg, #f8fafc, #e2e8f0); } .pricing-card.featured .pricing-header { background: linear-gradient(135deg, var(--aef-blue-light), var(--aef-blue-primary)); color: white; } .plan-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .pricing-display { margin: 1.5rem 0; } .price-amount { font-size: 3.5rem; font-weight: 900; line-height: 1; } .price-period { font-size: 1rem; opacity: 0.8; margin-left: 0.5rem; } .plan-features { padding: 2rem; background: white; } .plan-features ul { list-style: none; padding: 0; margin: 0; } .plan-features li { padding: 0.75rem 0; display: flex; align-items: center; font-size: 0.95rem; } .plan-features li i { margin-right: 0.75rem; width: 20px; text-align: center; } .plan-cta { padding: 2rem; background: #f8fafc; } .plan-cta .btn { width: 100%; padding: 12px 0; font-weight: 600; border-radius: 12px; transition: all 0.3s ease; } .plan-cta .btn-primary { background: var(--aef-blue-primary); border-color: var(--aef-blue-primary); } .plan-cta .btn-outline-primary { border-color: var(--aef-blue-primary); color: var(--aef-blue-primary); } .subscription-support { margin-top: 4rem; text-align: center; } .support-card { background: linear-gradient(135deg, var(--aef-blue-light), var(--aef-beige-light)); border-radius: 20px; padding: 3rem 2rem; border: none; } .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; } .support-item { text-align: center; padding: 1.5rem; } .support-item i { font-size: 2.5rem; margin-bottom: 1rem; color: var(--aef-blue-primary); } .support-item h5 { color: var(--aef-blue-dark); margin-bottom: 0.5rem; } .support-item p { color: var(--aef-blue-dark); margin: 0; font-size: 0.9rem; } /* ============================================ SEARCH RESULTS COMPONENTS ============================================ */ .search-hero { background: var(--aef-gradient-blue); padding: 6rem 0 4rem; color: white; text-align: center; } .search-form-container { max-width: 700px; margin: 0 auto 2rem; } .search-input-group { position: relative; background: rgba(255,255,255,0.95); border-radius: 25px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.15); backdrop-filter: blur(10px); display: flex; align-items: stretch; } .search-input-group .form-control { border: none; padding: 1.2rem 2rem; font-size: 1.1rem; background: transparent; color: var(--aef-text-dark); flex: 1; } .search-input-group .form-control:focus { box-shadow: none; outline: none; } .search-input-group .form-control::placeholder { color: #999; } .search-btn { background: var(--aef-accent-gold); border: none; padding: 1.2rem 2.5rem; color: white; font-weight: 600; transition: all 0.3s ease; border-radius: 0; } .search-btn:hover { background: var(--aef-brown-dark); transform: translateX(-3px); box-shadow: 0 8px 25px rgba(204, 136, 34, 0.4); color: white; } .filters-wrapper { background: var(--aef-surface); padding: 3rem 0; } .filters-card { background: white; border-radius: 20px; padding: 2rem; box-shadow: 0 15px 40px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; position: sticky; top: 2rem; z-index: 5; } .filter-title { font-size: 1.3rem; font-weight: 700; color: var(--aef-text-dark); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } .filter-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e2e8f0; } .filter-section:last-child { border-bottom: none; margin-bottom: 0; } .filter-label { font-weight: 600; color: var(--aef-text-dark); margin-bottom: 1rem; display: block; text-align: center; } .filter-check { margin-bottom: 0.5rem; } .filter-check input[type="checkbox"] { margin-right: 0.75rem; transform: scale(1.1); } .filter-check label { font-size: 0.95rem; color: var(--aef-text-light); margin-bottom: 0; cursor: pointer; } .filter-badge { background: var(--aef-accent-gold); color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; margin-left: 0.5rem; } .results-wrapper { padding: 3rem 0; } .results-header { margin-bottom: 2rem; } .results-title { font-size: 1.8rem; font-weight: 700; color: var(--aef-text-dark); margin-bottom: 0.5rem; } .results-count { color: var(--aef-text-light); font-size: 1rem; } .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .result-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; transition: all 0.3s ease; } .result-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); } .result-image { position: relative; height: 200px; overflow: hidden; } .result-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .result-card:hover .result-image img { transform: scale(1.05); } .result-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(0,0,0,0.3), transparent); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .result-card:hover .result-overlay { opacity: 1; } .result-view-btn { background: rgba(255,255,255,0.9); color: var(--aef-text-dark); border: none; padding: 10px 20px; border-radius: 20px; font-weight: 600; transition: all 0.3s ease; text-decoration: none; } .result-view-btn:hover { background: white; transform: scale(1.05); color: var(--aef-text-dark); text-decoration: none; } .result-info { padding: 1.5rem; } .result-title { font-size: 1.2rem; font-weight: 700; color: var(--aef-text-dark); margin-bottom: 0.5rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .result-description { color: var(--aef-text-light); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .result-price { font-size: 1.3rem; font-weight: 800; color: var(--aef-accent-gold); margin-bottom: 0.5rem; } .result-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--aef-text-light); } .result-category { background: var(--aef-blue-primary); color: white; padding: 4px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 500; } .no-results { text-align: center; padding: 4rem 2rem; color: var(--aef-text-light); } .no-results i { font-size: 4rem; margin-bottom: 2rem; opacity: 0.5; } /* ============================================ CONTACT FORM COMPONENTS ============================================ */ .contact-page { padding: 2rem 0; } .contact-member-info { background: white; border-radius: 15px; overflow: hidden; margin-bottom: 2rem; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .contact-header { background: var(--aef-blue-primary); color: white; padding: 1.5rem; } .contact-header h1 { font-size: 1.3rem; margin: 0; font-weight: 600; } .member-preview { padding: 1.5rem; } .member-avatar-small { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .avatar-placeholder-small { width: 60px; height: 60px; border-radius: 50%; background: var(--aef-text-light); display: flex; align-items: center; justify-content: center; color: white; } .member-details h5 { margin-bottom: 0.5rem; color: var(--aef-text-dark); } .member-details .text-muted { margin-bottom: 0.5rem; } .contact-info-notice { background: #e8f4fd; border: 1px solid #bee5eb; border-radius: 10px; padding: 1rem; margin-top: 1rem; } .contact-form-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .contact-form-header { background: #f8fafc; padding: 1.5rem; border-bottom: 1px solid #e2e8f0; } .contact-form-body { padding: 2rem; } .form-label.required::after { content: " *"; color: #dc3545; } .form-control { border: 2px solid #e2e8f0; border-radius: 8px; padding: 0.75rem 1rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--aef-blue-primary); box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1); } .contact-textarea { min-height: 120px; resize: vertical; } .char-counter { text-align: right; font-size: 0.8rem; color: var(--aef-text-light); margin-top: 0.25rem; } .char-counter.warning { color: #f39c12; } .char-counter.danger { color: #e74c3c; } .contact-submit-btn { background: var(--aef-blue-primary); border: none; padding: 12px 0; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .contact-submit-btn:hover { background: var(--aef-blue-dark); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); } .contact-back-link { text-align: center; margin-top: 2rem; } /* ============================================ SUCCESS & ERROR PAGES ============================================ */ .status-page { text-align: center; padding: 4rem 0; } .status-icon { font-size: 5rem; margin-bottom: 2rem; } .status-icon.success { color: var(--aef-success); } .status-icon.warning { color: #f39c12; } .status-icon.error { color: #e74c3c; } .status-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: var(--aef-text-dark); } .status-message { font-size: 1.1rem; color: var(--aef-text-light); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .status-actions { margin-top: 3rem; } /* ============================================ RESPONSIVE DESIGN ============================================ */ @media (max-width: 768px) { .subscription-hero .display-4 { font-size: 2.5rem; } .pricing-card.featured { transform: none; } .pricing-card.featured:hover { transform: translateY(-5px); } .support-grid { grid-template-columns: 1fr; } .search-hero { padding: 4rem 0 2rem; } .search-hero .hero-title { font-size: 2rem; } .search-input-group { flex-direction: column; border-radius: 15px; } .search-input-group .form-control { border-radius: 15px 15px 0 0; } .search-btn { border-radius: 0 0 15px 15px; padding: 1rem 2rem; } .filters-card { position: static; margin-bottom: 2rem; } .results-grid { grid-template-columns: 1fr; } .contact-form-body { padding: 1.5rem; } } /* ============================================ STATUS PAGES COMPONENTS (SUCCESS/CANCEL/ERROR) ============================================ */ .status-page { padding: 3rem 0; background: var(--aef-background); min-height: 50vh; } .status-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2.5rem; } .status-icon.success { background: linear-gradient(135deg, #28a745, #198754); color: white; animation: successPulse 2s infinite; } .status-icon.warning { background: linear-gradient(135deg, #ffc107, #e0a800); color: white; animation: warningShake 2s infinite; } .status-icon.error { background: linear-gradient(135deg, #dc3545, #c82333); color: white; animation: errorPulse 2s infinite; } @keyframes successPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes warningShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } @keyframes errorPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } } .status-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } .status-actions .btn { transition: all 0.3s ease; } .status-actions .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } /* ============================================ CONTACT PAGE COMPONENTS ============================================ */ .contact-page { padding: 3rem 0; background: var(--aef-background); } .contact-member-info { background: white; border-radius: 20px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.02); } .contact-header h1 { color: var(--aef-text-dark); font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; } .member-preview { background: var(--aef-surface); border-radius: 15px; padding: 1.5rem; border-left: 4px solid var(--aef-accent-gold); } .member-avatar-small { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--aef-accent-gold); } .avatar-placeholder-small { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .member-details h5 { color: var(--aef-text-dark); font-weight: 600; margin-bottom: 0.25rem; } .contact-info-notice { background: rgba(13, 110, 253, 0.05); border: 1px solid rgba(13, 110, 253, 0.1); border-radius: 10px; padding: 1rem; margin-top: 1rem; color: var(--aef-blue-primary); } .contact-info-notice ul { font-size: 0.9rem; margin-left: 1rem; } .contact-info-notice li { margin-bottom: 0.5rem; } .contact-form-card { background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.02); overflow: hidden; margin-bottom: 2rem; } .contact-form-header { background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-secondary)); color: white; padding: 1.5rem 2rem; } .contact-form-header h2 { margin: 0; font-size: 1.3rem; font-weight: 600; } .contact-form-body { padding: 2rem; } .contact-textarea { min-height: 120px; resize: vertical; border-radius: 10px; border: 2px solid #e9ecef; transition: border-color 0.3s ease; } .contact-textarea:focus { border-color: var(--aef-blue-primary); box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } .contact-submit-btn { background: linear-gradient(135deg, var(--aef-blue-primary), var(--aef-blue-secondary)); border: none; border-radius: 10px; padding: 1rem 2rem; font-weight: 600; transition: all 0.3s ease; } .contact-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(13, 110, 253, 0.3); } .contact-back-link { text-align: center; margin-top: 2rem; } .char-counter { font-size: 0.8rem; color: var(--aef-text-light); text-align: right; margin-top: 0.5rem; } .char-counter.warning { color: #ffc107; } .char-counter.danger { color: #dc3545; } /* ============================================ FINAL CLEANUP CLASSES ============================================ */ .trial-alert { max-width: 500px; } .subscription-progress { height: 8px; } .usage-progress { height: 6px; } .fair-map { height: 400px; } /* ============================================ MEMBER PAGES - COMPACT & MODERN REDESIGN ============================================ */ /* Hero principal avec banner en fond */ .member-hero-banner { position: relative; height: 320px; background: var(--aef-gradient-blue); overflow: hidden; display: flex; align-items: end; padding-bottom: 2rem; } .hero-banner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-banner-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--aef-blue-primary) 0%, var(--aef-blue-secondary) 100%); } .hero-banner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(1px); } .member-hero-content { position: relative; z-index: 10; width: 100%; color: white; } /* Breadcrumb compact */ .hero-breadcrumb .breadcrumb { background: rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 0.5rem 1rem; margin-bottom: 1.5rem; backdrop-filter: blur(10px); } .hero-breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 0.9rem; } .hero-breadcrumb .breadcrumb-item.active { color: white; font-weight: 500; } /* Carte membre compacte */ .member-brand-card { background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 2rem; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); color: var(--aef-text-dark); } .brand-logo { float: left; margin-right: 1rem; margin-bottom: 0.5rem; } .member-logo { width: 180px; height: 180px; border-radius: 10px; object-fit: cover; border: 2px solid var(--aef-accent-gold); } .member-logo-placeholder { width: 180px; height: 180px; border-radius: 10px; background: var(--aef-gradient-blue); display: flex; align-items: center; justify-content: center; color: white; font-size: 2.7rem; } .brand-info .member-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--aef-text-dark); } .brand-info .member-subtitle { color: var(--aef-text-light); font-size: 0.95rem; margin-bottom: 0.75rem; } .member-specialties { clear: both; margin-top: 0.25rem; margin-bottom: 0.25rem; } .specialty-badge { display: inline-block; background: var(--aef-accent-gold); color: white; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.8rem; font-weight: 500; margin-right: 0.5rem; margin-bottom: 0.1rem; } /* Carte contact compacte */ .member-contact-card { background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 2rem; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); color: var(--aef-text-dark); } .contact-header h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: var(--aef-text-dark); } .contact-info-grid { margin-bottom: 1.5rem; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .contact-item:last-child { border-bottom: none; margin-bottom: 0; } .contact-item i { width: 20px; color: var(--aef-blue-primary); margin-right: 0.75rem; margin-top: 0.25rem; flex-shrink: 0; } .contact-content { flex: 1; } .contact-content strong { display: block; font-size: 0.85rem; color: var(--aef-text-dark); margin-bottom: 0.25rem; font-weight: 600; } .contact-content span, .contact-content a { font-size: 0.9rem; color: var(--aef-text-light); display: block; line-height: 1.4; } .contact-content a:hover { color: var(--aef-blue-primary); } .phone-reveal { color: var(--aef-blue-primary) !important; text-decoration: none; font-size: 0.9rem; } .contact-actions { display: flex; gap: 0.5rem; flex-wrap: nowrap; } .contact-actions .btn { flex: 1; min-width: 0; padding: 0.65rem 0.85rem; font-size: 0.85rem; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--aef-blue-primary); background: white; border: 2px solid var(--aef-blue-primary); transition: all 0.3s ease; } .contact-actions .btn:hover { background: var(--aef-blue-primary); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3); } /* Section contenu membre */ .member-content { padding: 2rem 0; background: var(--aef-background); } .member-section { margin-bottom: 2rem; } .member-section .card { border-radius: 15px; border: none; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); overflow: hidden; } .member-section .card-header { background: white; border-bottom: 2px solid var(--aef-accent-gold); padding: 1.25rem 1.5rem; } .section-title { color: var(--aef-text-dark); font-size: 1.3rem; font-weight: 600; margin: 0; } .section-title i { color: var(--aef-accent-gold); margin-right: 0.5rem; } /* Grille d'objets compacte - 4 colonnes */ .items-grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding: 1.5rem; } .item-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; } .item-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .item-image { position: relative; height: 180px; overflow: hidden; } .item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .item-card:hover .item-image img { transform: scale(1.05); } .item-image-placeholder { width: 100%; height: 100%; background: var(--aef-surface); display: flex; align-items: center; justify-content: center; color: var(--aef-text-light); font-size: 2rem; } .item-status { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-reserved { background: #ff9800; color: white; } .status-sold { background: #f44336; color: white; } .item-info { padding: 1rem; } .item-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; } .item-title a { color: var(--aef-text-dark); text-decoration: none; } .item-title a:hover { color: var(--aef-blue-primary); } .item-description { font-size: 0.85rem; color: var(--aef-text-light); line-height: 1.4; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-price { font-size: 1rem; font-weight: 700; color: var(--aef-accent-gold); } /* Responsive design */ @media (max-width: 992px) { .member-hero-banner { height: 280px; padding-bottom: 1.5rem; } .member-brand-card, .member-contact-card { margin-bottom: 1.5rem; } .items-grid-4col { grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1rem; } } @media (max-width: 992px) { .member-logo, .member-logo-placeholder { width: 160px; height: 160px; } .member-logo-placeholder { font-size: 2.4rem; } } @media (max-width: 768px) { .member-hero-banner { height: 250px; padding-bottom: 1rem; } .member-brand-card, .member-contact-card { padding: 1.25rem; } .brand-info .member-title { font-size: 1.3rem; } .member-logo, .member-logo-placeholder { width: 120px; height: 120px; } .member-logo-placeholder { font-size: 2rem; } .contact-actions { flex-direction: column; } .items-grid-4col { grid-template-columns: repeat(2, 1fr); } .item-image { height: 140px; } } @media (max-width: 576px) { .items-grid-4col { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } } /* Pagination moderne pour galerie membre */ .gallery-pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin: 2rem 0; padding: 0 1rem; } .gallery-pagination .page-btn { background: white; border: 2px solid var(--aef-blue-primary); color: var(--aef-blue-primary); padding: 0.75rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; min-width: 45px; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .gallery-pagination .page-btn:hover { background: var(--aef-blue-primary); color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3); } .gallery-pagination .page-btn.active { background: var(--aef-blue-primary); color: white; box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4); } .gallery-pagination .page-btn.disabled { background: #f8f9fa; border-color: #dee2e6; color: #6c757d; cursor: not-allowed; } .gallery-pagination .page-btn.disabled:hover { background: #f8f9fa; color: #6c757d; transform: none; box-shadow: none; } .gallery-pagination .page-dots, .pagination-modern .page-dots { color: var(--aef-text-light); font-weight: 600; padding: 0.75rem 0.5rem; display: flex; align-items: center; pointer-events: none; user-select: none; } /* Indicateur de chargement */ .gallery-loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); justify-content: center; align-items: center; z-index: 1050; color: var(--aef-blue-primary); } .gallery-loading.active { display: flex; } .gallery-loading-content { display: flex; align-items: center; background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .loading-spinner { border: 3px solid rgba(0, 136, 204, 0.2); border-top: 3px solid var(--aef-blue-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-right: 1rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Transition fluide pour le changement de page */ .gallery-container { transition: opacity 0.3s ease; } .gallery-container.loading { opacity: 0.6; } @media (max-width: 768px) { .gallery-pagination { flex-wrap: wrap; gap: 0.25rem; } .gallery-pagination .page-btn { min-width: 40px; padding: 0.6rem 0.8rem; font-size: 0.9rem; } } /* Styles pour les icônes de contact */ .contact-icons-grid { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .contact-icon-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem; background: white; border: 2px solid var(--aef-blue-primary); border-radius: 12px; color: var(--aef-blue-primary); text-decoration: none; transition: all 0.3s ease; min-width: 80px; cursor: pointer; } .contact-icon-btn:hover { background: var(--aef-blue-primary); color: white; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3); text-decoration: none; } .contact-icon-btn i { font-size: 1.2rem; margin-bottom: 0.25rem; } .contact-icon-btn span { font-size: 0.75rem; font-weight: 600; text-align: center; } .contact-icon-btn.phone-reveal { background: none; border: 2px solid var(--aef-blue-primary); } .contact-icon-btn.phone-reveal:hover { background: var(--aef-blue-primary); color: white; } @media (max-width: 768px) { .contact-icons-grid { gap: 0.5rem; } .contact-icon-btn { min-width: 70px; padding: 0.6rem; } .contact-icon-btn i { font-size: 1rem; } .contact-icon-btn span { font-size: 0.7rem; } } /* ============================================ CORRECTION Z-INDEX POUR DROPDOWNS ET MODALES ============================================ */ /* S'assurer que les dropdowns de la navbar restent au-dessus des éléments sticky */ .dropdown-menu { z-index: 1050 !important; } /* ============================================ MODALES - SOLUTION PROPRE ET ÉLÉGANTE ============================================ */ /* Réduire le z-index des éléments qui peuvent interférer avec les modales */ body.modal-open .hero-content, body.modal-open .hero-title, body.modal-open .hero-decoration, body.modal-open .filters-section, body.modal-open .hero-filters, body.modal-open .filters-card { z-index: 1 !important; } /* S'assurer que les modales et leur backdrop soient toujours au premier plan */ body.modal-open .modal, body.modal-open .modal-backdrop { z-index: 1050 !important; } /* Styles personnalisés pour nos modales (sans toucher aux z-index Bootstrap) */ .modal-content { border: none; border-radius: 15px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .modal-header { background: var(--aef-blue-primary); color: white; border-bottom: none; border-radius: 15px 15px 0 0; padding: 1.5rem; } .modal-header .btn-close { background: none; border: none; font-size: 1.5rem; color: white; opacity: 0.8; filter: invert(1); } .modal-header .btn-close:hover { opacity: 1; } .modal-body { padding: 2rem; } .modal-footer { border-top: 1px solid #e9ecef; padding: 1rem 2rem; border-radius: 0 0 15px 15px; } /* Styles spécifiques pour les modales spécialisées */ #newAlertModal .modal-dialog, #contactModal .modal-dialog, #phoneModal .modal-dialog, #mapModal .modal-dialog, #quoteModal .modal-dialog, #gpsMapModal .modal-dialog { max-width: 800px; } #newAlertModal .form-control { border: 2px solid #e9ecef; border-radius: 8px; padding: 0.75rem; transition: border-color 0.3s ease; } #newAlertModal .form-control:focus { border-color: var(--aef-blue-primary); box-shadow: 0 0 0 0.2rem rgba(0, 136, 204, 0.25); } #newAlertModal .btn-primary { background: var(--aef-blue-primary); border-color: var(--aef-blue-primary); padding: 0.75rem 2rem; border-radius: 8px; } #newAlertModal .btn-primary:hover { background: var(--aef-blue-dark); border-color: var(--aef-blue-dark); } /* ============================================ CORRECTION POINTER-EVENTS POUR MODALES ============================================ */ /* S'assurer que les modales soient interactives */ .modal { pointer-events: auto; } .modal-dialog { pointer-events: none; } .modal-content { pointer-events: auto; } /* S'assurer que tous les éléments de la modale soient cliquables */ .modal-content *, .modal-header *, .modal-body *, .modal-footer *, .modal .form-control, .modal .btn, .modal input, .modal textarea, .modal select, .modal button, .modal a { pointer-events: auto; } /* S'assurer que le backdrop soit cliquable pour fermer la modale */ .modal-backdrop { pointer-events: auto; } /* S'assurer que les modales ne soient pas grisées */ .modal.show, .modal.show .modal-dialog, .modal.show .modal-content { opacity: 1; filter: none; } /* Correction pour éviter l'effet grisé global */ body.modal-open { overflow: hidden; } .modal-backdrop.show { opacity: 0.5; } /* ============================================ CORRECTION COMPLETE MODALES - SOLUTION AGGRESSIVE ============================================ */ /* Force les modales à être au premier plan avec z-index très élevé */ .modal { z-index: 1055 !important; pointer-events: auto !important; } .modal-backdrop { z-index: 1054 !important; pointer-events: auto !important; } /* Force l'opacité et supprime tous les filtres */ .modal, .modal *, .modal .modal-dialog, .modal .modal-content, .modal .modal-header, .modal .modal-body, .modal .modal-footer { opacity: 1 !important; filter: none !important; backdrop-filter: none !important; } /* Force tous les éléments interactifs de la modale à être cliquables */ .modal .btn, .modal button, .modal input, .modal textarea, .modal select, .modal .form-control, .modal .btn-close, .modal a, .modal [data-bs-dismiss], .modal [type="submit"], .modal [type="button"] { pointer-events: auto !important; z-index: 1060 !important; position: relative !important; } /* Supprime tout overlay ou élément qui pourrait bloquer */ .modal-content { position: relative !important; z-index: 1058 !important; pointer-events: auto !important; background: white !important; border: none !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important; } /* Force le focus et la visibilité */ .modal.show .modal-dialog { transform: none !important; opacity: 1 !important; } /* Supprime tout élément qui pourrait se superposer */ body.modal-open .hero-content, body.modal-open .navbar, body.modal-open .search-bar, body.modal-open .main-content, body.modal-open .footer { z-index: 1 !important; } /* Force la visibilité des boutons spécifiquement */ .modal .modal-footer .btn, .modal .modal-header .btn-close { z-index: 1061 !important; pointer-events: auto !important; position: relative !important; background: var(--aef-blue-primary) !important; border: none !important; color: white !important; opacity: 1 !important; cursor: pointer !important; } .modal .modal-footer .btn-secondary { background: #6c757d !important; } .modal .modal-header .btn-close { background: transparent !important; opacity: 0.8 !important; filter: invert(1) !important; } .modal .modal-header .btn-close:hover { opacity: 1 !important; }";s:6:"digest";s:32:"320687f2460bb432e5fb9579bafb7ba8";s:13:"isPredigested";b:0;s:11:"logicalPath";s:14:"styles/app.css";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:9:{i:0;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-1.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-1-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-1.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-1.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:1;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-2.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-2-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-2.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-2.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:2;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-3.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-3-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-3.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-3.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:3;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-4.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-4-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-4.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-4.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:4;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-5.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-5-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-5.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-5.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:5;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:61:"/home/blueskyshd/nxt/assets/images/textures/footer-flower.png";s:10:"publicPath";s:49:"/assets/images/textures/footer-flower-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:41:"/assets/images/textures/footer-flower.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:33:"images/textures/footer-flower.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:6;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-6.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-6-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-6.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-6.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:7;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:68:"/home/blueskyshd/nxt/assets/images/textures/texture-flower-large.png";s:10:"publicPath";s:56:"/assets/images/textures/texture-flower-large-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:48:"/assets/images/textures/texture-flower-large.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:40:"images/textures/texture-flower-large.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}i:8;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:65:"/home/blueskyshd/nxt/assets/images/textures/texture-content-4.png";s:10:"publicPath";s:53:"/assets/images/textures/texture-content-4-SMVuTf6.png";s:23:"publicPathWithoutDigest";s:45:"/assets/images/textures/texture-content-4.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"48c56e4dfeb3973900a47fa3b624bba5";s:13:"isPredigested";b:0;s:11:"logicalPath";s:37:"images/textures/texture-content-4.png";s:8:"isVendor";b:0;s:55:"Symfony\Component\AssetMapper\MappedAssetdependencies";a:0:{}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}}s:59:"Symfony\Component\AssetMapper\MappedAssetfileDependencies";a:0:{}s:60:"Symfony\Component\AssetMapper\MappedAssetjavaScriptImports";a:0:{}}