/* ============================================================ BEN'S HZ CAR — DESIGN SYSTEM 2026 Site public : navbar, hero, listing, filtres, fiche, footer. admin.css réutilise les variables et classes définies ici (.card, .btn-*, .form-group, .badge-*, .alert-*…) — ne pas renommer ces classes sans mettre à jour admin.css. ============================================================ */ /* ---------- Polices (chargées dans , voir header.php) ---------- */ /* Inter (300–700) + Font Awesome pour les icônes. */ /* ---------- Variables du thème ---------- */ :root { /* Marque */ --primary: #D71920; --primary-dark: #B8141A; --primary-light: #FBE6E7; --accent: #FF4D4D; --dark: #101114; --dark-soft: #1B1D22; /* Statuts (indépendants de la marque) */ --success: #16a34a; --success-bg: #dcfce7; --danger: #dc2626; --danger-bg: #fee2e2; --warning: #d97706; --warning-bg: #fef3c7; --whatsapp: #25d366; /* Neutres */ --text: #1A1A1A; --text-light: #6E6E73; --bg: #F5F7FA; --white: #FFFFFF; --border: #E8E8E8; /* Rayons / ombres / transitions */ --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --shadow: 0 2px 10px rgba(16, 17, 20, .06); --shadow-md: 0 8px 24px rgba(16, 17, 20, .10); --shadow-lg: 0 16px 40px rgba(16, 17, 20, .16); --transition: all .25s cubic-bezier(.4, 0, .2, 1); --transition-fast: all .15s ease; /* Typo */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Rythme vertical */ --gap: 24px; } /* ---------- Réinitialisation ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); font-weight: 400; color: var(--text); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--primary); text-decoration: none; } ul { list-style: none; } button { font-family: inherit; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } p { color: var(--text); } /* ---------- Accessibilité ---------- */ :focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } /* ---------- Utilitaires de mise en page ---------- */ .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 760px; } .center { text-align: center; } .mt-2 { margin-top: 2rem; } /* ============================================================ NAVIGATION ============================================================ */ .site-header { background: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 200; } .nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 20px; } .logo { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 800; color: var(--text); flex-shrink: 0; } .logo-icon { font-size: 1.6rem; } .logo-text { color: var(--dark); } .logo-text span { color: var(--primary); } .logo-img { height: 44px; width: auto; } .main-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; } .main-nav a { position: relative; padding: 10px 18px; border-radius: 999px; color: var(--text); font-weight: 500; font-size: .95rem; transition: var(--transition-fast); } .main-nav a:hover { background: var(--bg); color: var(--primary); } .main-nav a.active { color: var(--primary); font-weight: 400; } .main-nav a.active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 3px; height: 2px; background: var(--primary); border-radius: 2px; } .nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-cta .btn { border-radius: 999px; } /* Menu burger (mobile) */ .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition-fast); } /* ============================================================ BANNIÈRE (HERO) ============================================================ */ .hero { position: relative; background: linear-gradient(135deg, rgba(16, 17, 20, .92), rgba(16, 17, 20, .78)), radial-gradient(circle at 15% 20%, rgba(215, 25, 32, .35), transparent 45%), radial-gradient(circle at 90% 80%, rgba(215, 25, 32, .18), transparent 40%), var(--dark); color: #fff; padding: 120px 0 150px; overflow: hidden; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); padding: 6px 16px; border-radius: 999px; font-size: .82rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: #f1c1c3; margin-bottom: 1.4rem; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.12; margin-bottom: 1.2rem; } .hero h1 span { color: var(--primary); } .hero p { font-size: 1.15rem; color: #cbd0d6; max-width: 620px; margin: 0 auto 2.4rem; } /* Véhicule flottant dans le hero */ .hero-floating-car { position: absolute; right: -40px; bottom: 0; max-width: 46%; z-index: 1; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); animation: floatCar 6s ease-in-out infinite; display: none; } @keyframes floatCar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Animations légères d'apparition */ .fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp .7s ease forwards; } .delay-1 { animation-delay: .15s; } .delay-2 { animation-delay: .3s; } .delay-3 { animation-delay: .45s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } @keyframes scaleIn { to { opacity: 1; transform: scale(1); } } /* ---------- Recherche par dates (flottante, glassmorphism) ---------- */ .hero-search { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 24px; max-width: 820px; margin: 0 auto; box-shadow: var(--shadow-lg); position: relative; z-index: 2; } .hero-search-field { display: flex; flex-direction: column; gap: 6px; text-align: left; flex: 1 1 190px; } .hero-search-field label { font-size: .78rem; font-weight: 400; color: #e4e7eb; text-transform: uppercase; letter-spacing: .03em; } .hero-search-field label i { margin-right: 6px; color: var(--primary); } .hero-search-field input, .hero-search-field select { padding: 13px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; background: rgba(255, 255, 255, .95); color: var(--text); transition: var(--transition-fast); } .hero-search-field input:focus, .hero-search-field select:focus { outline: none; box-shadow: 0 0 0 3px rgba(215, 25, 32, .35); } .hero-search .btn { flex: 0 0 auto; white-space: nowrap; } .hero-skip { display: inline-block; margin-top: 1.4rem; color: #cbd0d6; font-size: .9rem; text-decoration: underline; position: relative; z-index: 2; } .hero-skip:hover { color: #fff; } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 80px 0; } .section-alt { background: var(--white); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .section-eyebrow { display: inline-block; color: var(--primary); font-weight: 400; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem; } .section-title { text-align: center; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: .8rem; } .section-sub { color: var(--text-light); font-size: 1.05rem; } .page-head { background: linear-gradient(135deg, rgba(16, 17, 20, .95), rgba(16, 17, 20, .88)), radial-gradient(circle at 85% 20%, rgba(215, 25, 32, .3), transparent 45%); color: #fff; padding: 56px 0; } .page-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; } .page-head p { color: #cbd0d6; margin-top: .4rem; } /* ---------- Points forts ---------- */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); } .feature-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 24px; text-align: center; transition: var(--transition); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); } .feature-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 1.4rem; } .feature-card h3 { margin-bottom: .5rem; font-size: 1.05rem; } .feature-card p { color: var(--text-light); font-size: .93rem; } /* ============================================================ BOUTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: var(--radius-sm); border: none; font-size: .95rem; font-weight: 400; font-family: inherit; cursor: pointer; text-align: center; transition: var(--transition); position: relative; overflow: hidden; isolation: isolate; } .btn:active { transform: scale(.97); } .btn-lg { padding: 15px 34px; font-size: 1.02rem; border-radius: var(--radius-sm); } .btn-sm { padding: 7px 14px; font-size: .82rem; border-radius: 8px; } .btn-block { display: flex; width: 100%; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 8px 20px rgba(215, 25, 32, .28); } .btn-primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 26px rgba(215, 25, 32, .38); } .btn-primary:disabled { background: #b8bcc4; cursor: not-allowed; transform: none; box-shadow: none; } .btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-1px); } .btn-ghost { background: var(--bg); color: var(--text); } .btn-ghost:hover { background: var(--border); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #b91c1c; transform: translateY(-1px); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #15803d; transform: translateY(-1px); } .btn-warning { background: var(--warning); color: #fff; } .btn-warning:hover { background: #b45309; transform: translateY(-1px); } .btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 8px 20px rgba(37, 211, 102, .3); } .btn-whatsapp:hover { background: #1eb856; transform: translateY(-2px); } /* Effet ripple au clic (CSS + petite aide JS ajoute .btn-ripple) */ .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .5s ease-out; pointer-events: none; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } /* Icônes seules (favoris, comparer, aperçu, partage) */ .icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); border: 1px solid var(--border); border-radius: 50%; color: var(--text); cursor: pointer; transition: var(--transition-fast); box-shadow: var(--shadow); } .icon-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); } .icon-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } .icon-btn.active i { font-weight: 900; } /* ============================================================ BADGES (statuts) ============================================================ */ .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 400; } .badge-dispo { background: var(--success-bg); color: var(--success); } .badge-indispo { background: var(--danger-bg); color: var(--danger); } .badge-attente { background: var(--warning-bg); color: var(--warning); } .badge-terminee { background: #e5e7eb; color: #4b5563; } /* Pastilles premium sur les cartes véhicule */ .badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px; border-radius: 999px; font-size: .72rem; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; box-shadow: var(--shadow); } .badge-pill-available { background: var(--success-bg); color: var(--success); } .badge-pill-unavailable { background: var(--danger-bg); color: var(--danger); } .badge-pill-new { background: var(--primary); color: #fff; } /* ============================================================ CARTES VÉHICULE (premium) ============================================================ */ .vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); } .vehicle-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); transition: var(--transition); display: flex; flex-direction: column; opacity: 0; animation: fadeUp .5s ease forwards; } .vehicle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(215, 25, 32, .35); } .vehicle-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); } .vehicle-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .vehicle-card:hover .vehicle-card-media img { transform: scale(1.08); } .vehicle-card-badges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .vehicle-card-actions { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 2; opacity: 0; transform: translateX(8px); transition: var(--transition); } .vehicle-card:hover .vehicle-card-actions, .vehicle-card-actions:focus-within { opacity: 1; transform: translateX(0); } .vehicle-card-actions .icon-btn { width: 36px; height: 36px; font-size: .85rem; } .vehicle-card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; } .vehicle-card-tag { display: inline-block; font-size: .74rem; font-weight: 400; color: var(--primary); background: var(--primary-light); padding: 3px 10px; border-radius: 999px; margin-bottom: .6rem; align-self: flex-start; } .vehicle-card-title { font-size: 1.15rem; margin-bottom: .7rem; } .vehicle-card-title a { color: var(--text); } .vehicle-card-title a:hover { color: var(--primary); } .vehicle-card-specs { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-light); font-size: .87rem; margin-bottom: 1.1rem; } .vehicle-card-specs li { display: flex; align-items: center; gap: 6px; } .vehicle-card-specs i { color: var(--primary); font-size: .85rem; width: 16px; text-align: center; } .vehicle-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); } .vehicle-card-price { line-height: 1.1; } .vehicle-card-price .amount { font-size: 1.35rem; font-weight: 800; color: var(--primary); } .vehicle-card-price .unit { display: block; font-size: .78rem; font-weight: 500; color: var(--text-light); } .vehicle-card-price .old-total { display: block; font-size: .78rem; color: var(--text-light); } /* Squelette de chargement (image) */ .img-skeleton { background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 37%, #eef0f3 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; } @keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ============================================================ RÉSULTATS DE RECHERCHE : FILTRES LATÉRAUX + GRILLE ============================================================ */ .catalogue-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--gap); align-items: start; } .sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; } .sidebar-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .sidebar-box h3 { font-size: 1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; } .sidebar-box h3 i { color: var(--primary); } .sidebar-box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .sidebar-box-head h3 { margin-bottom: 0; } .sidebar-box-head a { font-weight: 400; } .booking-info p { font-size: .9rem; margin-bottom: .4rem; color: var(--text-light); } .booking-info p strong { color: var(--text); } /* ---------- Filtres en accordéon ---------- */ .filter-accordion { border-top: 1px solid var(--border); } .filter-accordion:first-of-type { border-top: none; } .filter-section { border-bottom: 1px solid var(--border); padding: 14px 0; } .filter-section:last-child { border-bottom: none; padding-bottom: 0; } .filter-section-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; font-weight: 400; font-size: .92rem; color: var(--text); padding: 4px 0; } .filter-section-toggle i.chevron { transition: var(--transition-fast); color: var(--text-light); } .filter-section.open .filter-section-toggle i.chevron { transform: rotate(180deg); } .filter-section-body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .25s ease; } .filter-section-body > div { overflow: hidden; } .filter-section.open .filter-section-body { grid-template-rows: 1fr; } .filter-section-body-inner { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; } .filters-panel .form-group { margin-bottom: 0; } .filters-panel input[type="text"], .filters-panel input[type="number"], .filters-panel select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit; transition: var(--transition-fast); } .filters-panel input:focus, .filters-panel select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* Case à cocher façon "switch" moderne */ .switch-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; cursor: pointer; } .switch-option input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { width: 38px; height: 22px; background: var(--border); border-radius: 999px; position: relative; transition: var(--transition-fast); flex-shrink: 0; } .switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: var(--transition-fast); box-shadow: var(--shadow); } .switch-option input:checked + .switch-track { background: var(--primary); } .switch-option input:checked + .switch-track::after { transform: translateX(16px); } /* Curseur de prix */ .price-range-value { font-size: .85rem; color: var(--text-light); margin-top: 2px; } .price-range-value strong { color: var(--primary); } input[type="range"].price-range { width: 100%; height: 5px; border-radius: 999px; background: var(--border); accent-color: var(--primary); cursor: pointer; } /* ---------- Filtre mobile (bouton flottant + tiroir) ---------- */ .filter-fab { display: none; position: fixed; bottom: 22px; right: 22px; z-index: 300; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 400; font-size: .9rem; border: none; box-shadow: 0 10px 26px rgba(215, 25, 32, .4); cursor: pointer; } .filter-drawer-overlay { position: fixed; inset: 0; background: rgba(16, 17, 20, .5); z-index: 400; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .filter-drawer-overlay.open { opacity: 1; pointer-events: auto; } .filter-drawer-close { display: none; } /* ---------- Liste (grille) des résultats ---------- */ .results-list { display: flex; flex-direction: column; gap: var(--gap); } .results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: var(--text-light); font-size: .92rem; } /* ============================================================ PAGINATION ============================================================ */ .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 2.5rem; } .pagination a { min-width: 42px; padding: 9px 0; text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 400; transition: var(--transition-fast); } .pagination a:hover { border-color: var(--primary); color: var(--primary); } .pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ============================================================ PAGE DÉTAIL / GALERIE ============================================================ */ .back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 1.4rem; font-weight: 400; } .detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; } .gallery-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16 / 10; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .gallery-thumbs .thumb { width: 88px; height: 62px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 3px solid transparent; opacity: .65; transition: var(--transition-fast); } .gallery-thumbs .thumb:hover { opacity: 1; } .gallery-thumbs .thumb.active { border-color: var(--primary); opacity: 1; } .detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .8rem; } .detail-head h1 { font-size: 1.8rem; } .detail-price { font-size: 2rem; font-weight: 800; color: var(--primary); margin-bottom: 1.4rem; } .detail-price span { font-size: .95rem; color: var(--text-light); font-weight: 500; } .detail-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 1.6rem; } .detail-spec-item { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: var(--radius-sm); padding: 12px 14px; } .detail-spec-item i { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: 50%; color: var(--primary); flex-shrink: 0; box-shadow: var(--shadow); } .detail-spec-item .label { font-size: .76rem; color: var(--text-light); display: block; } .detail-spec-item .value { font-weight: 400; font-size: .92rem; } .specs-table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; } .specs-table th, .specs-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: .93rem; } .specs-table th { color: var(--text-light); font-weight: 400; width: 45%; } .detail-cta-row { display: flex; flex-wrap: wrap; gap: 10px; } .detail-cta-row .btn { flex: 1 1 160px; } .detail-cta-row .icon-btn { flex: 0 0 auto; } /* Sticky mobile "Réserver" bar shown only on small screens (see @media 700px below) */ .sticky-reserve-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.08); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 14px; } .sticky-reserve-bar .price { line-height: 1.1; } .sticky-reserve-bar .price .amount { font-size: 1.15rem; font-weight: 800; color: var(--primary); display: block; } .sticky-reserve-bar .price .unit { font-size: .75rem; color: var(--text-light); } .sticky-reserve-bar .btn { flex: 0 0 auto; } .detail-description { background: var(--white); border-radius: var(--radius); padding: 30px; margin-top: 2.8rem; box-shadow: var(--shadow); border: 1px solid var(--border); } .detail-description h2 { margin-bottom: .9rem; } .detail-description p { color: var(--text-light); } /* ============================================================ FORMULAIRES ============================================================ */ .card { background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 1.6rem; } .card h2 { font-size: 1.25rem; margin-bottom: 1.2rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 1.4rem; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group-full { grid-column: 1 / -1; } .form-group label { font-weight: 400; font-size: .9rem; } .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; transition: var(--transition-fast); } .form-group input::placeholder, .form-group textarea::placeholder { color: #a3a3aa; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); } /* Champ invalide après tentative d'envoi (classe ajoutée en JS) */ .form-group input.invalide, .form-group textarea.invalide { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); } .checkbox-group label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; } .checkbox-group input { width: 18px; height: 18px; accent-color: var(--primary); } .form-hint { text-align: center; color: var(--text-light); font-size: .85rem; margin-top: .7rem; } .dates-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Résultat de la vérification de disponibilité */ .dispo-resultat { margin-top: 1rem; font-weight: 400; } .dispo-resultat.ok { color: var(--success); } .dispo-resultat.ko { color: var(--danger); } .dispo-resultat.att { color: var(--text-light); } .cout-total { margin-top: 1rem; padding: 16px 18px; background: var(--primary-light); border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; } .cout-total strong { font-size: 1.3rem; color: var(--primary); } /* ---------- Alertes ---------- */ .alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; animation: fadeUp .4s ease; } .alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #86efac; } .alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #fca5a5; } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-light); } .empty-state p { font-size: 1.1rem; margin-bottom: 1.2rem; } /* ---------- Confirmation ---------- */ .confirm-card { text-align: center; } .confirm-icon { font-size: 3rem; margin-bottom: .6rem; } .confirm-card h1 { margin-bottom: .4rem; } .confirm-numero { color: var(--text-light); margin-bottom: 1.4rem; } .confirm-card .specs-table th, .confirm-card .specs-table td { text-align: left; } .confirm-card .btn { margin-top: .8rem; } /* ---------- Connexion ---------- */ .login-card { max-width: 420px; margin: 40px auto; text-align: center; } .login-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto .8rem; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 1.6rem; } .login-card h1 { font-size: 1.4rem; margin-bottom: 1.4rem; } .login-card .form-group { text-align: left; margin-bottom: 1rem; } /* ============================================================ APERÇU RAPIDE (modale) + BARRE DE COMPARAISON ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(16, 17, 20, .6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 500; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-box { background: var(--white); border-radius: var(--radius-lg); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: scale(.95); transition: transform .25s ease; } .modal-overlay.open .modal-box { transform: scale(1); } .modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: none; cursor: pointer; font-size: 1rem; } .modal-body { padding: 28px; position: relative; } .modal-body img { border-radius: var(--radius); margin-bottom: 1.2rem; aspect-ratio: 16/10; object-fit: cover; width: 100%; } .modal-body h3 { font-size: 1.3rem; margin-bottom: .6rem; } .compare-bar { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 120%); background: var(--dark); color: #fff; border-radius: var(--radius-lg); padding: 14px 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-lg); z-index: 300; transition: transform .3s ease; } .compare-bar.visible { transform: translate(-50%, 0); } .compare-bar-items { display: flex; gap: 8px; } .compare-bar-chip { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 12px; font-size: .82rem; display: flex; align-items: center; gap: 6px; } .compare-bar-chip button { background: none; border: none; color: #fff; opacity: .7; cursor: pointer; } .compare-table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .88rem; text-align: left; } .compare-table th { color: var(--text-light); font-weight: 400; } /* ============================================================ PIED DE PAGE ============================================================ */ .site-footer { background: var(--dark); color: #b7bac1; margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 64px 24px 44px; max-width: 1240px; margin: 0 auto; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .footer-brand .logo-img { height: 38px; filter: brightness(0) invert(1); } .logo-img-force-white { filter: brightness(0) invert(1); } .site-footer h3 { color: #fff; margin-bottom: 1.1rem; font-size: 1rem; font-weight: 700; } .site-footer a { color: #b7bac1; transition: var(--transition-fast); } .site-footer a:hover { color: #fff; } .site-footer li { margin-bottom: .6rem; font-size: .93rem; } .site-footer li i { width: 18px; color: var(--primary); margin-right: 6px; } .site-footer p { font-size: .93rem; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0; text-align: center; font-size: .85rem; color: #6e7180; } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 901px) { .hero-floating-car { display: block; } } @media (max-width: 1080px) { .catalogue-layout { grid-template-columns: 260px 1fr; } } @media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .detail-specs-grid { grid-template-columns: 1fr 1fr; } .catalogue-layout { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; right: -340px; bottom: 0; width: 320px; max-width: 88vw; background: var(--white); z-index: 500; padding: 24px; overflow-y: auto; transition: right .3s ease; box-shadow: var(--shadow-lg); } .sidebar.open { right: 0; } .filter-fab { display: flex; } .filter-drawer-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); border: none; margin-bottom: 16px; cursor: pointer; } } @media (max-width: 700px) { .burger { display: flex; } .main-nav { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: var(--white); flex-direction: column; align-items: stretch; padding: 16px 20px; box-shadow: var(--shadow-lg); display: none; gap: 4px; z-index: 190; } .main-nav.open { display: flex; } .main-nav a.active::after { display: none; } .main-nav a.active { background: var(--primary-light); } .hero { padding: 90px 0 90px; } .hero-search { flex-direction: column; align-items: stretch; padding: 18px; } .hero-search .btn { width: 100%; } .form-grid { grid-template-columns: 1fr; } .dates-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; padding: 48px 20px 32px; } .detail-head { flex-direction: column; align-items: flex-start; } .detail-specs-grid { grid-template-columns: 1fr; } .detail-cta-row .btn { flex: 1 1 100%; } .vehicle-grid { grid-template-columns: 1fr; } body.has-sticky-reserve { padding-bottom: 76px; } .sticky-reserve-bar.visible { display: flex; } .compare-bar { left: 12px; right: 12px; transform: translateY(120%); width: auto; } .compare-bar.visible { transform: translateY(0); } } @media (max-width: 380px) { .container { padding: 0 16px; } .hero h1 { font-size: 1.8rem; } } /* ============================================================ SÉLECTEUR DE DATES (calendrier) — date-range-picker.js ============================================================ */ .date-range-picker { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; } .drp-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 12px; } .drp-nav { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; color: var(--dark); } .drp-nav:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); } .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .drp-dow { text-align: center; font-size: .72rem; color: var(--text-light); font-weight: 600; padding-bottom: 4px; } .drp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 8px; font-size: .85rem; color: var(--dark); cursor: pointer; transition: background .15s, color .15s; } .drp-day:not(.drp-disabled):not(.drp-empty):hover { background: var(--primary-light); color: var(--primary); } .drp-day.drp-empty { cursor: default; } .drp-day.drp-disabled { color: #c7c7cc; cursor: not-allowed; } .drp-day.drp-occupied { background: #f1f1f3; text-decoration: line-through; } .drp-day.drp-inrange { background: var(--primary-light); border-radius: 0; } .drp-day.drp-start, .drp-day.drp-end { background: var(--primary); color: #fff; font-weight: 700; } .drp-day.drp-start { border-top-right-radius: 0; border-bottom-right-radius: 0; } .drp-day.drp-end { border-top-left-radius: 0; border-bottom-left-radius: 0; } .drp-day.drp-start.drp-end { border-radius: 8px; } .drp-legend { display: flex; gap: 16px; margin-top: 12px; font-size: .78rem; color: var(--text-light); } .drp-legend span { display: inline-flex; align-items: center; gap: 6px; } .drp-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .drp-legend-dot-occupied { background: #f1f1f3; border: 1px solid #c7c7cc; } .drp-legend-dot-selected { background: var(--primary); }