/* ============================================================ VINKER - Feuille de style principale Palette : beige ivoire, bordeaux, or chaud ============================================================ */ /* Google Fonts chargées via dans le — voir header.php */ :root { --bordeaux: #6D1141; --bordeaux-deep: #6D1141; --bordeaux-dark: #1E0A12; --bordeaux-light: #8C2258; --gold: #C4973A; --gold-light: #D4AE5A; --beige: #F7F2E8; --beige-dark: #EDE5D4; --beige-mid: #E8DCC8; --cream: #FDFAF4; --text-dark: #2A1810; --text-mid: #5C3D2E; --text-light: #8A6552; --white: #FFFFFF; --shadow: rgba(42, 24, 16, 0.12); --shadow-deep: rgba(42, 24, 16, 0.22); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', sans-serif; --radius: 4px; --radius-lg: 8px; --transition: 0.28s ease; --max-width: 1280px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background: var(--cream); color: var(--text-dark); line-height: 1.6; min-height: 100vh; } /* ---- TYPOGRAPHY ---- */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; color: var(--bordeaux-deep); } h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); } h4 { font-size: 1.2rem; } p { color: var(--text-mid); margin-bottom: 1rem; } a { color: var(--bordeaux); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold); } /* ---- LAYOUT ---- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 4rem 0; } .section-title { font-family: var(--font-display); font-size: 2.2rem; color: var(--bordeaux-deep); margin-bottom: 0.5rem; } .section-subtitle { color: var(--text-light); font-style: italic; margin-bottom: 2.5rem; font-family: var(--font-display); font-size: 1.1rem; } .divider { width: 60px; height: 2px; background: var(--gold); margin: 1rem 0 2.5rem; } /* ---- NAVBAR ---- */ .navbar { background: var(--bordeaux-deep); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 20px rgba(0,0,0,0.2); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; max-width: var(--max-width); margin: 0 auto; height: 72px; } .navbar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .navbar-logo .logo-icon { width: 36px; height: 36px; } .navbar-logo .logo-text { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--beige); letter-spacing: 0.05em; } .navbar-logo .logo-tagline { font-size: 0.65rem; color: var(--gold-light); letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-top: -4px; } .navbar-nav { display: flex; align-items: center; gap: 0.25rem; list-style: none; } .navbar-nav a { color: var(--beige-dark); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: var(--radius); transition: all var(--transition); white-space: nowrap; } .navbar-nav a:hover, .navbar-nav a.active { color: var(--gold-light); background: rgba(196,151,58,0.1); } /* Dropdown */ .nav-item { position: relative; } .nav-has-dropdown { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; background: none; border: none; font-family: inherit; color: var(--beige-dark); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: var(--radius); transition: all var(--transition); } .nav-has-dropdown:hover, .nav-has-dropdown.active { color: var(--gold-light); background: rgba(196,151,58,0.1); } .dropdown-arrow { opacity: 0.6; transition: transform 0.2s; flex-shrink: 0; } .nav-item.open .dropdown-arrow { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--bordeaux-deep); border: 1px solid rgba(196,151,58,0.25); border-radius: var(--radius); min-width: 200px; padding: 0.35rem 0; box-shadow: 0 8px 28px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 200; list-style: none; } .nav-item.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; font-size: 0.8rem; text-transform: none; letter-spacing: 0.03em; border-radius: 0; } .nav-dropdown a:hover { background: rgba(196,151,58,0.15); } .dropdown-divider { height: 1px; background: rgba(196,151,58,0.2); margin: 0.3rem 0; } .cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .navbar-actions { display: flex; align-items: center; gap: 0.75rem; } .cart-btn { display: flex; align-items: center; gap: 6px; background: var(--gold); color: var(--bordeaux-deep) !important; padding: 0.45rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; transition: all var(--transition); } .cart-btn:hover { background: var(--gold-light) !important; transform: translateY(-1px); } .cart-count { background: var(--bordeaux-deep); color: var(--gold); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: transparent; border: none; outline: none; -webkit-tap-highlight-color: transparent; } .hamburger span { width: 24px; height: 2px; background: var(--beige); border-radius: 2px; transition: var(--transition); display: block; } /* Liens visibles uniquement dans le menu burger */ li.nav-mobile-divider, li.nav-mobile-auth, li.nav-mobile-only { display: none; } /* Boutons icônes cercle (recherche, admin, déconnexion) */ .nav-icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(196,151,58,0.22); color: rgba(247,242,232,0.68); transition: all var(--transition); text-decoration: none; } .nav-icon-btn:hover { background: rgba(196,151,58,0.18); border-color: rgba(196,151,58,0.55); color: var(--gold-light); transform: translateY(-1px); } .nav-icon-btn.nav-icon-admin { border-color: rgba(196,151,58,0.42); color: var(--gold); } .nav-icon-btn.nav-icon-admin:hover { background: rgba(196,151,58,0.22); color: var(--gold-light); } /* ---- HERO ---- */ .hero { background: image-set(url('/images/hero-vineyard.webp') type('image/webp'), url('/images/hero-vineyard.jpg') type('image/jpeg')) center/cover no-repeat; min-height: 600px; display: flex; align-items: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(75,10,45,0.90) 0%, rgba(109,17,65,0.80) 45%, rgba(60,8,35,0.60) 100%); } .hero-content { position: relative; z-index: 1; max-width: 640px; } .hero-eyebrow { color: var(--gold-light); font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1.2rem; display: block; } .hero h1 { color: var(--beige); font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.2rem; } .hero p { color: rgba(247,242,232,0.75); font-size: 1.05rem; margin-bottom: 2rem; } .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; } /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.7rem 1.8rem; border-radius: 2px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all var(--transition); text-decoration: none; } .btn-primary { background: var(--gold); color: var(--bordeaux-deep); } .btn-primary:hover { background: var(--gold-light); color: var(--bordeaux-deep); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(196,151,58,0.35); } .btn-outline { background: transparent; color: var(--beige); border: 1px solid rgba(247,242,232,0.4); } .btn-outline:hover { background: rgba(247,242,232,0.1); color: var(--beige); border-color: var(--gold-light); } .btn-bordeaux { background: var(--bordeaux); color: var(--beige); } .btn-bordeaux:hover { background: var(--bordeaux-deep); color: var(--beige); transform: translateY(-1px); } .btn-sm { padding: 0.45rem 1.1rem; font-size: 0.76rem; } .btn-lg { padding: 0.9rem 2.4rem; font-size: 0.9rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } /* ---- WINE CARDS ---- */ .wines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.75rem; } .wine-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 12px var(--shadow); transition: all 0.32s ease; display: flex; flex-direction: column; } .wine-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px var(--shadow-deep); } .wine-card-img { height: 220px; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--bordeaux-deep), var(--bordeaux)); } .wine-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .wine-card:hover .wine-card-img img { transform: scale(1.06); } .wine-card-img .wine-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .wine-card-img .wine-placeholder svg { width: auto; height: 72px; } .wine-badge { position: absolute; top: 10px; right: 10px; background: var(--bordeaux); color: var(--white); font-size: 0.70rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.22rem 0.65rem; border-radius: 99px; } .wine-card-body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; } .wine-category { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; } .wine-card-body h3 { font-size: 1.1rem; margin-bottom: 0.25rem; color: var(--bordeaux-deep); line-height: 1.3; } .wine-appellation { font-size: 0.82rem; color: var(--text-light); margin-bottom: 0.5rem; font-style: italic; } .wine-region { font-size: 0.75rem; color: var(--text-light); margin-bottom: 1rem; } .wine-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .wine-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--bordeaux); } .wine-vintage { font-size: 0.75rem; color: var(--text-light); margin-left: 4px; } .stock-badge { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 10px; letter-spacing: 0.05em; } .stock-ok { background: #E8F5E8; color: #2D6A2D; } .stock-low { background: #FFF3E0; color: #B35A00; } .stock-out { background: #FEECEC; color: #B01C1C; } /* ---- SEARCH / FILTERS ---- */ .search-bar { background: var(--white); padding: 1.5rem; border-radius: var(--radius-lg); box-shadow: 0 2px 12px var(--shadow); margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 160px; } .form-group label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); } .form-control { padding: 0.6rem 0.9rem; border: 1px solid var(--beige-mid); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.9rem; color: var(--text-dark); background: var(--cream); transition: border-color var(--transition); outline: none; } .form-control:focus { border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(107,26,42,0.1); } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 100px; } /* ---- TABLE ---- */ .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: 0 2px 12px var(--shadow); } table { width: 100%; border-collapse: collapse; background: var(--white); } thead { background: var(--bordeaux-deep); } thead th { color: var(--beige); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 1rem 1.2rem; text-align: left; } tbody tr { border-bottom: 1px solid var(--beige-dark); transition: background var(--transition); } tbody tr:hover { background: var(--beige); } tbody td { padding: 0.85rem 1.2rem; font-size: 0.9rem; color: var(--text-mid); vertical-align: middle; } tbody tr:last-child { border-bottom: none; } /* ---- STATUS BADGES ---- */ .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 0.2rem 0.7rem; border-radius: 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; } .status-pending { background: #FFF8E1; color: #C67B00; } .status-confirmed { background: #E8F0FE; color: #1A56C4; } .status-shipped { background: #F0F4FF; color: #5C35C4; } .status-delivered { background: #E6F4EA; color: #1A7A1A; } .status-cancelled { background: #FEECEC; color: #B01C1C; } /* ---- CARDS ---- */ .card { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 2px 12px var(--shadow); padding: 1.5rem; } .card-header { border-bottom: 1px solid var(--beige-dark); padding-bottom: 1rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; } .card-title { font-family: var(--font-display); font-size: 1.3rem; color: var(--bordeaux-deep); } /* ---- STAT CARDS ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; } .stat-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.4rem; box-shadow: 0 2px 12px var(--shadow); display: flex; align-items: center; gap: 1rem; } .stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon.bordeaux { background: rgba(107,26,42,0.1); color: var(--bordeaux); } .stat-icon.gold { background: rgba(196,151,58,0.1); color: var(--gold); } .stat-icon.green { background: #E6F4EA; color: #1A7A1A; } .stat-icon.blue { background: #E8F0FE; color: #1A56C4; } .stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--bordeaux-deep); line-height: 1; } .stat-label { font-size: 0.78rem; color: var(--text-light); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; } /* ---- ALERTS / FLASH ---- */ .alert { padding: 0.85rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; } .alert-success { background: #E6F4EA; color: #1A6B1A; border-left: 4px solid #2D9A2D; } .alert-error { background: #FEECEC; color: #A01818; border-left: 4px solid #D63B3B; } .alert-info { background: #E8F0FE; color: #1A3A9A; border-left: 4px solid #2B5FD4; } .alert-warning { background: #FFF8E1; color: #9A5800; border-left: 4px solid #E0A020; } /* ---- ADMIN SIDEBAR ---- */ .admin-layout { display: flex; min-height: calc(100vh - 72px); } .sidebar { width: 230px; background: var(--bordeaux-deep); flex-shrink: 0; padding: 0.75rem 0; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; } .admin-hamburger { display: none; } .sidebar-overlay { display: none; } .admin-mobile-actions { display: none; } /* ── Header pages espace client ── */ .client-page-hero { background: var(--bordeaux-deep); color: var(--beige); padding: 2rem 0; } .client-page-hero h1 { color: var(--beige); font-size: 1.8rem; } .client-page-hero p { color: rgba(247,242,232,0.65); margin: 0; font-size: 0.9rem; } /* ── Layout client (sidebar + contenu) ── */ .client-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; } /* ── Nav client : style des liens ── */ .client-nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; color: var(--text-mid); font-size: 0.88rem; text-decoration: none; border-bottom: 1px solid var(--beige-dark); border-left: 3px solid transparent; transition: all 0.2s; } .client-nav a:hover { background: var(--beige); color: var(--bordeaux); } .client-nav a.active { background: var(--beige); color: var(--bordeaux); font-weight: 600; border-left-color: var(--bordeaux); } /* ── Grilles dashboard admin ── */ .admin-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .admin-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } /* ── Page catégories admin ── */ .admin-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } /* ── Layouts admin liste + formulaire latéral (newsletter, invitations…) ── */ .newsletter-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; } /* ── Formulaire codes promo ── */ .promo-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .promo-form-grid .promo-full { grid-column: 1 / -1; } .promo-form-grid .promo-uses { grid-column: 3 / 4; } .promo-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--beige-dark); } /* ── Tables : scroll horizontal sur mobile ── */ .table-wrap { -webkit-overflow-scrolling: touch; } /* Les tables "larges" (6+ colonnes) gardent un min-width pour forcer le scroll */ .table-wrap.table-wide table { min-width: 560px; } .sidebar-section { padding: 0 0.75rem; margin-bottom: 0.75rem; } .sidebar-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(196,151,58,0.6); padding: 0 0.4rem; margin-bottom: 0.25rem; } .sidebar-nav { list-style: none; } .sidebar-nav a { display: flex; align-items: center; gap: 8px; padding: 0.4rem 0.6rem; border-radius: var(--radius); color: rgba(247,242,232,0.75); font-size: 0.82rem; transition: all var(--transition); } .sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(196,151,58,0.15); color: var(--gold-light); } .sidebar-nav a svg { width: 14px; height: 14px; flex-shrink: 0; } .admin-content { flex: 1; padding: 2rem; background: var(--beige); overflow-y: auto; } .admin-header { margin-bottom: 2rem; } .admin-title { font-family: var(--font-display); font-size: 2rem; color: var(--bordeaux-deep); } .admin-subtitle { color: var(--text-light); font-size: 0.9rem; margin-top: 0.25rem; } /* ---- CART ---- */ .cart-table td { vertical-align: middle; } .cart-qty { display: flex; align-items: center; gap: 8px; } .qty-btn { width: 28px; height: 28px; border: 1px solid var(--beige-mid); background: var(--cream); border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all var(--transition); } .qty-btn:hover { background: var(--bordeaux); color: var(--beige); border-color: var(--bordeaux); } .qty-input { width: 50px; text-align: center; border: 1px solid var(--beige-mid); border-radius: var(--radius); padding: 0.3rem; } .order-summary { background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 2px 12px var(--shadow); } .summary-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--beige-dark); font-size: 0.9rem; } .summary-row:last-child { border-bottom: none; font-weight: 700; font-size: 1.1rem; font-family: var(--font-display); color: var(--bordeaux); } /* ---- FOOTER ---- */ footer { background: var(--bordeaux-dark); color: rgba(247,242,232,0.85); padding: 3rem 0 1.5rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } .footer-brand .footer-logo { display: inline-block; margin-bottom: 0.9rem; text-decoration: none; } .footer-brand .footer-logo-img { height: 60px; width: auto; display: block; border-radius: 4px; opacity: 0.92; transition: opacity 0.2s; } .footer-brand .footer-logo:hover .footer-logo-img { opacity: 1; } .footer-brand p { font-size: 0.88rem; line-height: 1.7; color: rgba(247,242,232,0.82); } .footer-col h4 { font-family: var(--font-display); color: var(--beige); font-size: 1rem; margin-bottom: 1rem; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 0.5rem; } .footer-col ul li a { font-size: 0.85rem; color: rgba(247,242,232,0.78); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--gold-light); } .footer-bottom { border-top: 1px solid rgba(247,242,232,0.1); padding-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 0.8rem; margin: 0; } /* ---- PRIX MASQUÉ (visiteurs non connectés) ---- */ .price-hidden { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-light); text-decoration: none; letter-spacing: 0.04em; transition: color var(--transition); } .price-hidden:hover { color: var(--bordeaux); } .price-hidden span { font-size: 1rem; } /* Variante grande taille (page fiche vin) */ .wine-price-large.price-hidden { font-size: 2.5rem; } .wine-price-large { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; color: var(--bordeaux); } /* ---- WISHLIST / FAVORIS ---- */ .btn-wishlist { background: none; border: 1px solid var(--beige-mid); cursor: pointer; font-size: 1.1rem; padding: 0.3rem 0.55rem; border-radius: var(--radius); color: var(--text-light); transition: all var(--transition); line-height: 1; flex-shrink: 0; } .btn-wishlist:hover { border-color: #D63B3B; color: #D63B3B; background: #FEECEC; } .btn-wishlist.active { border-color: #D63B3B; color: #D63B3B; background: #FEECEC; } /* ---- STAR RATING ---- */ .stars { display: inline-flex; gap: 1px; } .stars .star { color: var(--beige-mid); font-size: 1rem; } .stars .star-on { color: var(--gold); } .star-input { display: flex; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; } .star-input input { display: none; } .star-input label { font-size: 1.8rem; color: var(--beige-mid); cursor: pointer; transition: color 0.15s; } .star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--gold); } /* ---- REVIEW CARD ---- */ .review-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: 0 1px 6px var(--shadow); border-left: 3px solid var(--gold); } .review-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; } .review-author { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); } .review-date { font-size: 0.78rem; color: var(--text-light); } .review-comment { font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; margin: 0; } /* ---- PAGINATION ---- */ .pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; } .page-link { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 0.88rem; font-weight: 500; border: 1px solid var(--beige-mid); color: var(--text-mid); background: var(--white); transition: all var(--transition); } .page-link:hover { border-color: var(--bordeaux); color: var(--bordeaux); } .page-link.active { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--white); } /* ---- MODAL ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 2000; backdrop-filter: blur(3px); } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: var(--radius-lg); max-width: 560px; width: 90%; padding: 2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .modal-close { background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--text-light); transition: color var(--transition); } .modal-close:hover { color: var(--bordeaux); } /* ---- BREADCRUMB ---- */ .breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; font-size: 0.82rem; color: var(--text-light); } .breadcrumb a { color: var(--bordeaux); } .breadcrumb span.sep { color: var(--text-light); opacity: 0.5; } /* ---- WINE DETAIL ---- */ .wine-detail-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; } .wine-detail-img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; background: linear-gradient(135deg, var(--bordeaux-deep), var(--bordeaux)); display: flex; align-items: center; justify-content: center; } .wine-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.5rem 0; } .spec-item { background: var(--beige); border-radius: var(--radius); padding: 0.75rem; } .spec-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); } .spec-value { font-size: 0.95rem; color: var(--text-dark); margin-top: 0.2rem; font-weight: 500; } /* ---- RESPONSIVE ---- */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } .wine-detail-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .navbar-nav, .navbar-actions .btn-outline { display: none; } .hamburger { display: flex; } /* ── Admin sidebar mobile : slide-in depuis la gauche ── */ .admin-hamburger { display: flex !important; } .admin-nav-info { display: none; } /* ── Liens rapides mobile admin (← Site + Déco.) ── */ .admin-mobile-actions { display: flex; align-items: center; gap: 0.4rem; } .admin-mobile-actions a { color: var(--gold-light); font-size: 0.72rem; font-weight: 600; text-decoration: none; padding: 0.3rem 0.55rem; border: 1px solid rgba(196,151,58,0.4); border-radius: 4px; white-space: nowrap; transition: background 0.18s; } .admin-mobile-actions a:last-child { color: rgba(247,242,232,0.55); border-color: rgba(247,242,232,0.2); } .admin-mobile-actions a:hover { background: rgba(196,151,58,0.15); } /* ── Stats grid : 2 colonnes sur mobile ── */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } /* ── Grilles dashboard admin : 1 colonne ── */ .admin-grid-2-1, .admin-grid-1-1 { grid-template-columns: 1fr !important; } /* ── Catégories : "Nouvelle" remonte en premier sur mobile ── */ .admin-cat-grid { grid-template-columns: 1fr; } .admin-cat-grid .admin-card:last-child { order: -1; } /* ── Layouts liste + formulaire latéral : empilement mobile ── */ .newsletter-layout { grid-template-columns: 1fr; } /* Le formulaire latéral (2e enfant) remonte en premier sur mobile */ .newsletter-layout > div:last-child, .sidebar-form-card { order: -1; } /* ── Colonnes tableau masquées sur mobile ── */ .col-hide-mobile { display: none; } /* ── Boutons Actions dans tableaux : compacts sur mobile ── */ .table-wrap td [class*="btn-sm"] { padding: 0.3rem 0.6rem; font-size: 0.7rem; } .table-wrap td { font-size: 0.82rem; padding: 0.6rem 0.75rem; } /* ── Formulaire codes promo : 2 colonnes sur mobile ── */ .promo-form-grid { grid-template-columns: 1fr 1fr; } .promo-form-grid .promo-uses { grid-column: 1 / -1; } .promo-form-footer { flex-wrap: wrap; } .promo-form-footer button { width: 100%; } /* ── Admin content : contraint par le viewport ── */ .admin-content { padding: 1.25rem; min-width: 0; width: 100%; overflow: hidden; } /* Les cards créent un contexte de formatage → table-wrap peut scroller */ .admin-content .card { overflow: hidden; } .table-wrap { overflow-x: auto; } /* ── Layout client : sidebar empilée au-dessus du contenu ── */ .client-layout { grid-template-columns: 1fr !important; gap: 1rem; } /* Exactement 2 colonnes — évite tout calcul auto-fill dépendant de la largeur */ .client-layout > nav, .client-nav { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0; border-radius: 8px; overflow: hidden; } .client-layout > nav a, .client-nav a { border-bottom: 1px solid var(--beige-dark) !important; border-left: none !important; border-right: 1px solid var(--beige-dark); font-size: 0.8rem !important; padding: 0.7rem 0.75rem !important; justify-content: flex-start; } /* Contenu client : min-width:0 pour éviter que les enfants élargissent le layout */ .client-layout > div { min-width: 0; } .admin-layout { flex-direction: column; } .sidebar { position: fixed !important; top: 72px; left: -280px; bottom: 0; width: 280px !important; height: calc(100vh - 72px) !important; z-index: 1100; transition: left 0.28s ease; box-shadow: none; } .sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.45); } /* Overlay sombre derrière la sidebar */ .sidebar-overlay { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1090; } .sidebar-overlay.visible { display: block; } .wines-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .footer-grid { grid-template-columns: 1fr; } /* ── Menu mobile ouvert ────────────────────────────────── */ .navbar-nav.open { display: flex; flex-direction: column; align-items: stretch; /* fixed : toujours ancré sous la navbar sticky, même en cas de scroll */ position: fixed; top: 72px; left: 0; right: 0; background: #1E0A12; /* bordeaux-dark solide, pas de variable pour éviter toute transparence */ border-top: 2px solid var(--gold); padding: 0.75rem 0 1.5rem; box-shadow: 0 12px 40px rgba(0,0,0,0.6); z-index: 1200; max-height: calc(100vh - 72px); overflow-y: auto; } /* Liens principaux du menu mobile */ .navbar-nav.open > li > a, .navbar-nav.open > li > .nav-has-dropdown { display: flex; align-items: center; width: 100%; padding: 0.9rem 1.5rem; font-size: 1rem; font-weight: 500; letter-spacing: 0.06em; color: #F7F2E8; /* beige explicite */ border-radius: 0; text-align: left; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.18s, color 0.18s; } .navbar-nav.open > li > a:hover, .navbar-nav.open > li > .nav-has-dropdown:hover, .navbar-nav.open > li > a.active, .navbar-nav.open > li > .nav-has-dropdown.active { background: rgba(196,151,58,0.15); color: var(--gold-light); } /* Dropdown "Notre Cave" inline */ .navbar-nav.open .nav-item { position: static; } .navbar-nav.open .nav-dropdown { position: static !important; transform: none !important; left: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; background: rgba(0,0,0,0.25) !important; padding: 0.25rem 0 !important; min-width: 0 !important; transition: none !important; display: none; } .navbar-nav.open .nav-item.open .nav-dropdown { display: block; } .navbar-nav.open .nav-dropdown a { padding: 0.75rem 1.5rem 0.75rem 2.5rem; font-size: 0.9rem; color: rgba(247,242,232,0.8); border-bottom: 1px solid rgba(255,255,255,0.04); } .navbar-nav.open .nav-dropdown a:hover { color: var(--gold-light); background: rgba(196,151,58,0.12); } .navbar-nav.open .dropdown-divider { display: none; } /* Flèche du dropdown en mode mobile */ .navbar-nav.open .nav-has-dropdown { justify-content: space-between; } /* Liens mobile-only dans le burger */ .navbar-nav.open li.nav-mobile-only { display: block; } .navbar-nav.open li.nav-mobile-divider { display: block; height: 1px; background: rgba(196,151,58,0.3); margin: 0.5rem 1.5rem; } .navbar-nav.open li.nav-mobile-auth { display: block; } .navbar-nav.open li.nav-mobile-auth > a { color: var(--gold-light) !important; font-weight: 600; } /* Hamburger → croix quand ouvert */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ---- ANIMATIONS ---- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.4s ease forwards; } /* ---- PAGE HERO BANNERS ---- */ .page-hero { position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: var(--bordeaux-deep); } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(75,10,45,0.86) 0%, rgba(109,17,65,0.72) 55%, rgba(60,8,35,0.50) 100%); } .page-hero .container, .page-hero > * { position: relative; z-index: 1; } .page-hero .breadcrumb, .page-hero .breadcrumb span { color: rgba(247,242,232,0.55); } .page-hero .breadcrumb a { color: rgba(247,242,232,0.75); } .page-hero .breadcrumb a:hover { color: var(--gold-light); } /* ---- FORM PAGES ---- */ .auth-page { min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--beige) 0%, var(--beige-dark) 100%); padding: 2rem; } .auth-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 8px 40px var(--shadow-deep); padding: 2.5rem; width: 100%; max-width: 440px; } .auth-logo { text-align: center; margin-bottom: 2rem; } .auth-logo .brand { font-family: var(--font-display); font-size: 2.5rem; color: var(--bordeaux-deep); } .auth-logo .tagline { font-size: 0.78rem; color: var(--text-light); letter-spacing: 0.1em; text-transform: uppercase; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Util */ .text-center { text-align: center; } .text-right { text-align: right; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .d-flex { display: flex; } .align-center { align-items: center; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .flex-between { justify-content: space-between; } .font-display { font-family: var(--font-display); } .color-bordeaux { color: var(--bordeaux); } .color-gold { color: var(--gold); } .fw-600 { font-weight: 600; } /* ===================== ADMIN COMPONENTS ===================== */ /* Cards */ .admin-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 2px 12px var(--shadow); padding: 1.5rem; margin-bottom: 1.5rem; } .admin-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .admin-page-header h1 { font-family: var(--font-display); font-size: 1.9rem; color: var(--bordeaux-deep); margin: 0; } .admin-page-header p { color: var(--text-light); margin: .25rem 0 0; font-size: .9rem; } /* Tables */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .admin-table th { text-align: left; padding: .625rem .875rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); background: var(--beige); border-bottom: 2px solid var(--beige-dark); } .admin-table td { padding: .75rem .875rem; border-bottom: 1px solid var(--beige-dark); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: var(--beige); } /* Buttons */ .admin-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem 1rem; border-radius: var(--radius); font-size: .875rem; font-weight: 600; cursor: pointer; border: 1px solid var(--beige-dark); background: var(--white); color: var(--bordeaux-dark); text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; } .admin-btn:hover { background: var(--beige); } .admin-btn-primary { background: var(--bordeaux); color: var(--white); border-color: var(--bordeaux); } .admin-btn-primary:hover { background: var(--bordeaux-deep); border-color: var(--bordeaux-deep); } .admin-btn-secondary { background: var(--beige-dark); color: var(--bordeaux-dark); border-color: var(--beige-dark); } .admin-btn-secondary:hover { background: #e0d8c8; } .admin-btn-sm { padding: .3rem .7rem; font-size: .8rem; } /* ============================================================ AGE GATE ============================================================ */ #age-gate { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s ease; } #age-gate.ag-visible { opacity: 1; } .ag-overlay { position: absolute; inset: 0; background: rgba(14, 4, 8, 0.92); backdrop-filter: blur(6px); } .ag-card { position: relative; z-index: 1; background: var(--cream); border: 1px solid var(--beige-dark); border-radius: 12px; padding: 2.5rem 2rem; max-width: 440px; width: calc(100% - 2rem); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: opacity .28s ease, transform .28s ease; } .ag-logo { margin-bottom: 1.5rem; } .ag-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; color: var(--bordeaux-dark); margin-bottom: .75rem; } .ag-text { font-size: .95rem; color: var(--text-mid); margin-bottom: 1.75rem; line-height: 1.6; } .ag-actions { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; } .ag-btn { width: 100%; padding: .85rem 1.25rem; border-radius: 4px; font-size: .95rem; font-family: var(--font-body); font-weight: 500; cursor: pointer; transition: all .22s ease; border: 1px solid transparent; } .ag-btn-primary { background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); } .ag-btn-primary:hover { background: var(--bordeaux-light); border-color: var(--bordeaux-light); } .ag-btn-outline { background: transparent; color: var(--text-mid); border-color: var(--beige-dark); } .ag-btn-outline:hover { border-color: var(--text-light); color: var(--text-dark); } .ag-legal { font-size: .75rem; color: var(--text-light); line-height: 1.5; margin: 0; } .ag-legal a { color: var(--gold); } /* Refused state */ .ag-denied { position: absolute; z-index: 2; inset: 0; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; } .ag-denied-inner { background: var(--cream); border: 1px solid var(--beige-dark); border-radius: 12px; padding: 2.5rem 2rem; max-width: 380px; width: calc(100% - 2rem); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.45); } /* ============================================================ COOKIE BANNER ============================================================ */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; display: none; transform: translateY(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); } #cookie-banner.ck-visible { transform: translateY(0); } .ck-bar { background: var(--bordeaux-dark); border-top: 2px solid var(--gold); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .ck-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: .3rem; } .ck-text strong { color: var(--beige); font-size: .95rem; font-family: var(--font-display); font-weight: 500; } .ck-text span { color: rgba(247,242,232,.6); font-size: .78rem; line-height: 1.5; } .ck-actions { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; } .ck-btn { padding: .55rem 1.1rem; border-radius: 4px; font-size: .82rem; font-family: var(--font-body); font-weight: 500; cursor: pointer; transition: all .22s ease; border: 1px solid transparent; white-space: nowrap; } .ck-btn-primary { background: var(--gold); color: var(--bordeaux-dark); border-color: var(--gold); } .ck-btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); } .ck-btn-outline { background: transparent; color: rgba(247,242,232,.75); border-color: rgba(247,242,232,.25); } .ck-btn-outline:hover { color: var(--beige); border-color: rgba(247,242,232,.55); } /* Cookie panel (modal) */ #cookie-panel { position: fixed; inset: 0; z-index: 9100; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; } #cookie-panel.ck-panel-visible { opacity: 1; } .ck-overlay { position: absolute; inset: 0; background: rgba(14,4,8,.75); backdrop-filter: blur(4px); } .ck-panel-card { position: relative; z-index: 1; background: var(--cream); border: 1px solid var(--beige-dark); border-radius: 12px; padding: 2rem; max-width: 520px; width: calc(100% - 2rem); box-shadow: 0 20px 50px rgba(0,0,0,.35); transform: translateY(20px); transition: transform .3s ease; } #cookie-panel.ck-panel-visible .ck-panel-card { transform: translateY(0); } .ck-panel-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--bordeaux-dark); margin-bottom: .5rem; font-weight: 400; } .ck-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--beige-dark); } .ck-toggle-row:last-of-type { border-bottom: none; } .ck-toggle-row > div strong { display: block; font-size: .9rem; color: var(--text-dark); margin-bottom: .2rem; } .ck-toggle-row > div p { font-size: .78rem; color: var(--text-light); margin: 0; line-height: 1.45; } /* Toggle switch */ .ck-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .ck-toggle input { opacity: 0; width: 0; height: 0; } .ck-toggle span { position: absolute; inset: 0; background: var(--beige-dark); border-radius: 99px; cursor: pointer; transition: background .22s ease; } .ck-toggle span::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; left: 3px; top: 3px; transition: transform .22s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .ck-toggle input:checked + span { background: var(--bordeaux); } .ck-toggle input:checked + span::before { transform: translateX(20px); } .ck-toggle-disabled span { background: var(--bordeaux); cursor: not-allowed; opacity: .6; } .ck-toggle-disabled span::before { transform: translateX(20px); } @media (max-width: 600px) { .ag-card, .ag-denied-inner { padding: 2rem 1.25rem; } .ck-bar { flex-direction: column; align-items: stretch; padding: 1rem; } .ck-actions { justify-content: stretch; } .ck-btn { flex: 1; text-align: center; } } /* Inputs */ .admin-input { display: block; width: 100%; padding: .5rem .75rem; border: 1px solid var(--beige-dark); border-radius: var(--radius); font-size: .9rem; background: var(--white); color: var(--text); box-sizing: border-box; transition: border-color .15s; } .admin-input:focus { outline: none; border-color: var(--bordeaux); } .admin-label { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); margin-bottom: .375rem; } /* Order / payment status badges (used outside original status-badge class) */ .order-status { display: inline-block; padding: .2rem .65rem; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; } .status-pending { background: #FFF8E1; color: #C67B00; } .status-confirmed { background: #E8F0FE; color: #1A56C4; } .status-shipped { background: #F0F4FF; color: #5C35C4; } .status-delivered { background: #E6F4EA; color: #1A7A1A; } .status-cancelled { background: #FEECEC; color: #B01C1C; } .pay-pending { background: #FFF8E1; color: #C67B00; } .pay-paid { background: #E6F4EA; color: #1A7A1A; } .pay-refunded { background: #F0F4FF; color: #5C35C4; }