/* ========================================================================== JM ELEO — Feuille de style de la page d'accueil ========================================================================== */ :root{ --bg-deep: #010e1e; --bg-navy: #05121f; --bg-navy-2: #071a2c; --blue-500: #2f7bff; --blue-400: #4f9bff; --blue-300: #8fc2ff; --orange-500: #ff8a1f; --orange-400: #ff9f45; --card-border: rgba(120, 160, 220, 0.18); --card-bg: rgba(12, 20, 40, 0.55); --text-main: #eaf1ff; --text-muted: #9fb0d0; --font-display: 'Poppins', 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } *{ box-sizing: border-box; } [hidden]{ display: none !important; } html{ /* Le fond est posé uniquement ici (pas sur body) : en CSS, le fond de devient le fond "de la page" tout en bas, alors que le fond de se peint par-dessus les éléments position:fixed à z-index négatif (notre canvas de particules) — le mettre sur les deux masquait donc totalement les particules, sur toutes les pages. */ background: var(--bg-deep); } html, body{ margin: 0; padding: 0; min-height: 100%; color: var(--text-main); font-family: var(--font-body); overflow-x: hidden; } body{ display: flex; flex-direction: column; min-height: 100vh; } button{ font-family: inherit; } img{ -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* ---------------------------------------------------------------------- */ /* Fond animé */ /* ---------------------------------------------------------------------- */ .bg-scene{ position: fixed; inset: 0; z-index: -2; background: var(--bg-deep); overflow: hidden; } #bg-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; } #bg-canvas[data-particles="white"], #bg-canvas[data-particles="blanc-bleu"]{ opacity: 1; } .bg-glow{ position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.16; animation: drift 18s ease-in-out infinite; } .bg-glow--blue{ width: 520px; height: 520px; top: -120px; left: -100px; background: radial-gradient(circle, var(--blue-500), transparent 70%); } .bg-glow--orange{ width: 480px; height: 480px; bottom: -140px; right: -100px; background: radial-gradient(circle, var(--orange-500), transparent 70%); animation-delay: -9s; } @keyframes drift{ 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } } @media (prefers-reduced-motion: reduce){ .bg-glow{ animation: none; } } /* ---------------------------------------------------------------------- */ /* Header */ /* ---------------------------------------------------------------------- */ .site-header{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 22px 48px; border-bottom: 1px solid rgba(120, 160, 220, 0.12); position: relative; } .brand{ display: flex; align-items: center; gap: 14px; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; } .brand-logo-img{ height: 64px; width: auto; display: block; flex-shrink: 0; } .header-left{ display: flex; align-items: center; min-width: 1px; } .header-actions{ display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 14px; } .btn-connexion{ display: flex; align-items: center; gap: 8px; background: rgba(20, 32, 60, 0.5); border: 1.5px solid rgba(90, 140, 255, 0.55); color: #eaf1ff; font-weight: 600; font-size: 0.95rem; padding: 11px 22px; border-radius: 12px; cursor: pointer; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .btn-connexion:hover{ transform: scale(1.06); border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } .btn-connexion:active{ transform: scale(0.98); } .contact-cta-wrap{ display: flex; justify-content: center; margin: 8px 0 48px; } .btn-contact-cta{ display: flex; align-items: center; justify-content: center; background: rgba(20, 32, 60, 0.5); border: 1.5px solid rgba(90, 140, 255, 0.55); color: #eaf1ff; font-weight: 600; font-size: 0.95rem; padding: 11px 64px; border-radius: 12px; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .btn-contact-cta:hover{ transform: scale(1.06); border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } .btn-contact-cta:active{ transform: scale(0.98); } .btn-back{ display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(90, 140, 255, 0.55); background: rgba(20, 32, 60, 0.5); color: var(--text-main); cursor: pointer; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .btn-back:hover{ transform: scale(1.08); border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } .btn-back:active{ transform: scale(0.95); } .btn-cart-icon{ position: relative; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(90, 140, 255, 0.55); background: rgba(20, 32, 60, 0.5); color: var(--text-main); cursor: pointer; text-decoration: none; flex-shrink: 0; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .btn-cart-icon:hover{ transform: scale(1.08); border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } .btn-cart-icon:active{ transform: scale(0.95); } .btn-cart-badge{ position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: linear-gradient(135deg, #34d67a, #1a9e52); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .btn-connexion[hidden]{ display: none !important; } /* ---------------------------------------------------------------------- */ /* Avatar utilisateur / menu déroulant */ /* ---------------------------------------------------------------------- */ .user-menu{ position: relative; } .avatar-btn{ background: none; border: none; padding: 0; cursor: pointer; display: flex; transition: transform 0.25s ease; } .avatar-btn:hover{ transform: scale(1.06); } .avatar-btn:active{ transform: scale(0.98); } .avatar-circle{ width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3f8bff, #1a52d6); border: 2px solid rgba(120, 160, 220, 0.35); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(47, 123, 255, 0.35); } .user-dropdown{ position: absolute; top: calc(100% + 14px); right: 0; min-width: 240px; background: linear-gradient(180deg, #0e1729 0%, #0a121f 100%); border: 1px solid rgba(120, 160, 220, 0.22); border-radius: 16px; padding: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); z-index: 900; animation: dropdownIn 0.2s ease; } @keyframes dropdownIn{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } } .user-dropdown-name{ margin: 4px 10px 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text-main); } .user-dropdown-divider{ height: 1px; background: rgba(120, 160, 220, 0.18); margin: 4px 0; } .user-dropdown-item{ display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text-main); font-family: var(--font-body); font-size: 0.92rem; padding: 11px 10px; border-radius: 10px; cursor: pointer; text-align: left; transition: background 0.2s ease, color 0.2s ease; } .user-dropdown-item svg{ color: var(--blue-400); flex-shrink: 0; } .user-dropdown-item:hover{ background: rgba(79, 155, 255, 0.1); } .user-dropdown-item--danger svg{ color: #ff6b6b; } .user-dropdown-item--danger:hover{ background: rgba(255, 107, 107, 0.1); color: #ff8080; } /* ---------------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------------- */ .hero{ max-width: 1240px; margin: 0 auto; padding: 56px 32px 60px; text-align: center; } .hero-logo{ display: block; height: 160px; width: auto; margin: -18px auto 18px; } .accent-blue{ color: var(--blue-400); } .hero-sub{ color: var(--text-muted); font-size: 1.05rem; margin: 0 0 44px; } /* ---------------------------------------------------------------------- */ /* Cartes */ /* ---------------------------------------------------------------------- */ .cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 56px; } .card{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 40px 36px 34px; cursor: pointer; overflow: hidden; color: inherit; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease; isolation: isolate; } .card:hover{ transform: scale(1.025); } .card--pool:hover{ box-shadow: 0 20px 60px rgba(47, 123, 255, 0.28); border-color: rgba(79, 155, 255, 0.5); } .card--elec:hover{ box-shadow: 0 20px 60px rgba(255, 138, 31, 0.28); border-color: rgba(255, 159, 69, 0.5); } .card-icon{ width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; background: rgba(10, 18, 36, 0.6); } .card-icon--blue{ color: var(--blue-400); border: 2px solid rgba(79, 155, 255, 0.55); box-shadow: 0 0 30px rgba(47, 123, 255, 0.25) inset, 0 0 24px rgba(47, 123, 255, 0.18); } .card-icon--orange{ color: var(--orange-400); border: 2px solid rgba(255, 159, 69, 0.55); box-shadow: 0 0 30px rgba(255, 138, 31, 0.25) inset, 0 0 24px rgba(255, 138, 31, 0.18); } .card-title{ font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; margin: 0 0 14px; } .card-title--blue{ color: var(--blue-400); } .card-title--orange{ color: var(--orange-400); } .card-divider{ width: 56px; height: 3px; border-radius: 2px; margin-bottom: 18px; } .card-divider--blue{ background: var(--blue-400); } .card-divider--orange{ background: var(--orange-400); } .card-text{ color: var(--text-muted); font-size: 0.98rem; line-height: 1.5; max-width: 380px; margin: 0 0 30px; } .card-features{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; margin-bottom: 34px; } .feature{ display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-main); } .card--pool .feature svg{ color: var(--blue-400); } .card--elec .feature svg{ color: var(--orange-400); } .card-cta{ margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 0px); max-width: 400px; padding: 15px 22px; border-radius: 14px; font-weight: 700; font-size: 1rem; color: #fff; position: relative; z-index: 2; transition: transform 0.25s ease, box-shadow 0.25s ease; } .card-cta--blue{ background: linear-gradient(135deg, #3f8bff, #1a52d6); box-shadow: 0 10px 26px rgba(47, 123, 255, 0.35); } .card-cta--orange{ background: linear-gradient(135deg, #ff9d40, #ff7a1a); box-shadow: 0 10px 26px rgba(255, 138, 31, 0.35); } .card:hover .card-cta{ transform: scale(1.05); } .card:hover .card-cta--blue{ box-shadow: 0 14px 34px rgba(47, 123, 255, 0.5); } .card:hover .card-cta--orange{ box-shadow: 0 14px 34px rgba(255, 138, 31, 0.5); } /* ---------------------------------------------------------------------- */ /* Bandeau de confiance */ /* ---------------------------------------------------------------------- */ .trust-bar{ display: flex; justify-content: center; flex-wrap: wrap; gap: 56px; padding-top: 30px; border-top: 1px solid rgba(120, 160, 220, 0.12); } .trust-item{ display: flex; align-items: center; gap: 12px; color: var(--text-main); font-size: 0.9rem; font-weight: 500; text-align: left; } .trust-item svg{ color: var(--blue-400); flex-shrink: 0; } .social-bar{ display: flex; justify-content: center; gap: 16px; margin-top: 18px; margin-bottom: 18px; } .social-icon{ display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: var(--blue-400); background: rgba(20, 32, 60, 0.5); border: 1.5px solid rgba(90, 140, 255, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .social-icon:hover{ transform: scale(1.1); border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } .social-icon:active{ transform: scale(0.96); } /* ---------------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------------- */ @media (max-width: 980px){ .cards{ grid-template-columns: 1fr; } .site-header{ padding: 18px 24px; } .hero{ padding: 40px 20px 40px; } .hero-title{ font-size: 2rem; } .card-features{ grid-template-columns: repeat(2, 1fr); } .trust-bar{ gap: 28px; } } .nav-toggle{ display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid rgba(90, 140, 255, 0.55); background: rgba(20, 32, 60, 0.5); color: var(--text-main); cursor: pointer; flex-shrink: 0; transition: border-color 0.25s ease, background 0.25s ease; } .nav-toggle:hover{ border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } @media (max-width: 980px){ .nav-toggle{ display: flex; } .main-nav{ display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: linear-gradient(180deg, #0e1729 0%, #0a121f 100%); border-bottom: 1px solid rgba(120, 160, 220, 0.22); padding: 12px 24px 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); z-index: 500; } .main-nav.is-open{ display: flex; } .main-nav a{ padding: 12px 10px; border-radius: 10px; } .main-nav a:hover{ background: rgba(79, 155, 255, 0.1); } } @media (max-width: 640px){ .header-actions{ gap: 8px; } } @media (max-width: 480px){ .brand-sub{ display: none; } .btn-connexion span{ display: none; } .btn-connexion{ padding: 11px 14px; } } /* ---------------------------------------------------------------------- */ /* Popup Connexion / Créer un compte */ /* ---------------------------------------------------------------------- */ .modal-overlay{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 7, 16, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal-overlay.is-open{ opacity: 1; visibility: visible; } .modal{ position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #0e1729 0%, #0a121f 100%); border: 1px solid rgba(120, 160, 220, 0.22); border-radius: 24px; padding: 44px 40px 40px; scrollbar-width: thin; scrollbar-color: var(--blue-400) transparent; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); transform: scale(0.94) translateY(10px); transition: transform 0.3s cubic-bezier(.2,.8,.2,1); } .modal--sm{ max-width: 420px; } .modal-confirm-actions{ display: flex; gap: 12px; margin-top: 8px; } .modal-confirm-actions .btn-connexion, .modal-confirm-actions .form-delete{ flex: 1; margin-top: 0; justify-content: center; } .modal-overlay.is-open .modal{ transform: scale(1) translateY(0); } .modal::-webkit-scrollbar{ width: 6px; } .modal::-webkit-scrollbar-track{ background: transparent; } .modal::-webkit-scrollbar-thumb{ background-color: var(--blue-400); border-radius: 10px; } .modal::-webkit-scrollbar-thumb:hover{ background-color: var(--blue-500); } .modal-close{ position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(160, 185, 220, 0.4); background: transparent; color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .modal-close:hover{ transform: scale(1.08); border-color: var(--blue-400); background: rgba(79, 155, 255, 0.1); } .modal-logo{ height: 72px; width: auto; margin: 0 auto 20px; display: block; } .modal-title{ font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; margin: 0 0 12px; color: #f4f8ff; } .modal-sub{ color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; max-width: 380px; margin: 0 auto 30px; } .modal-options{ display: flex; flex-direction: column; gap: 16px; } .modal-option{ display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: rgba(255, 255, 255, 0.02); border-radius: 16px; padding: 18px 20px; cursor: pointer; color: inherit; font-family: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .modal-option--blue{ border: 1.5px solid rgba(79, 155, 255, 0.45); } .modal-option--orange{ border: 1.5px solid rgba(255, 159, 69, 0.45); } .modal-option:hover{ transform: scale(1.02); background: rgba(255, 255, 255, 0.045); } .modal-option--blue:hover{ box-shadow: 0 10px 30px rgba(47, 123, 255, 0.25); } .modal-option--orange:hover{ box-shadow: 0 10px 30px rgba(255, 138, 31, 0.25); } .modal-option-icon{ flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 18, 36, 0.6); } .modal-option-icon--blue{ color: var(--blue-400); border: 2px solid rgba(79, 155, 255, 0.55); } .modal-option-icon--orange{ color: var(--orange-400); border: 2px solid rgba(255, 159, 69, 0.55); } .modal-option-text{ flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .modal-option-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .modal-option-title--blue{ color: var(--blue-400); } .modal-option-title--orange{ color: var(--orange-400); } .modal-option-desc{ font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; } .modal-option-arrow{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease; } .modal-option--blue .modal-option-arrow{ color: var(--blue-400); } .modal-option--orange .modal-option-arrow{ color: var(--orange-400); } .modal-option:hover .modal-option-arrow{ transform: translateX(4px); } .modal-option-body{ flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .modal-option-header{ display: flex; align-items: center; gap: 8px; } .modal-option--blue .modal-option-header svg{ color: var(--blue-400); } .modal-option--orange .modal-option-header svg{ color: var(--orange-400); } .modal-option-value{ font-size: 0.98rem; font-weight: 600; color: var(--text-main); text-decoration: none; } @media (max-width: 480px){ .modal{ padding: 34px 22px 28px; border-radius: 20px; } .modal-option{ padding: 14px 16px; gap: 12px; } .modal-option-icon{ width: 44px; height: 44px; } } /* ---------------------------------------------------------------------- */ /* Étapes du modal (multi-step) */ /* ---------------------------------------------------------------------- */ .modal-step{ animation: stepIn 0.3s ease; } .modal-step--center{ display: flex; flex-direction: column; align-items: center; } .modal-step[hidden]{ display: none !important; } @keyframes stepIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } } .modal-back{ position: absolute; top: 20px; left: 20px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(160, 185, 220, 0.4); background: transparent; color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .modal-back:hover{ transform: scale(1.08); border-color: var(--blue-400); background: rgba(79, 155, 255, 0.1); } /* ---------------------------------------------------------------------- */ /* Formulaire de création de compte */ /* ---------------------------------------------------------------------- */ .modal-form{ display: flex; flex-direction: column; gap: 14px; text-align: left; } .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-field{ position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; background: rgba(255, 255, 255, 0.02); border: 1.5px solid rgba(120, 160, 220, 0.28); border-radius: 14px; padding: 0 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-field:focus-within{ border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(79, 155, 255, 0.15); } .form-icon{ display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; } .form-field input{ flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text-main); font-family: var(--font-body); font-size: 0.95rem; padding: 14px 0; } .form-field input::placeholder{ color: var(--text-muted); } .form-field input:disabled{ color: var(--text-muted); cursor: not-allowed; } .form-field input:-webkit-autofill, .form-field input:-webkit-autofill:hover, .form-field input:-webkit-autofill:focus{ -webkit-text-fill-color: var(--text-main); -webkit-box-shadow: 0 0 0 1000px rgba(12, 20, 40, 0.92) inset; box-shadow: 0 0 0 1000px rgba(12, 20, 40, 0.92) inset; caret-color: var(--text-main); transition: background-color 5000s ease-in-out 0s; } .form-field--textarea{ align-items: flex-start; padding: 14px 16px; } .form-field--textarea .form-icon{ margin-top: 2px; } .form-field textarea{ flex: 1; min-width: 0; min-height: 96px; resize: vertical; background: transparent; border: none; outline: none; color: var(--text-main); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5; padding: 0; } .form-field textarea::placeholder{ color: var(--text-muted); } .form-field select{ flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: transparent; border: none; outline: none; color: var(--text-main); font-family: var(--font-body); font-size: 0.95rem; padding: 14px 0; cursor: pointer; } .form-field select option{ background: #0e1729; color: var(--text-main); } .form-field-chevron{ flex-shrink: 0; color: var(--text-muted); } .form-eye{ background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 4px; transition: color 0.2s ease; } .form-eye:hover{ color: var(--text-main); } .form-hint{ font-size: 0.78rem; color: var(--text-muted); margin: -4px 0 0; } .form-error{ font-size: 0.85rem; color: #ff6b6b; background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 10px; padding: 10px 14px; margin: 0; text-align: center; } /* Toast "connexion requise" (voir afficherToastConnexionRequise() dans script.js) — notification flottante affichée quand un visiteur non connecté tente d'envoyer un message, de demander un devis ou de commander. */ .auth-toast{ position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 1200; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px; background: var(--bg-navy-2); border: 1px solid rgba(255, 138, 31, 0.45); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); color: var(--text-main); font-size: 0.92rem; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .auth-toast.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .form-success{ font-size: 0.85rem; color: #2ecf7a; background: rgba(46, 207, 122, 0.1); border: 1px solid rgba(46, 207, 122, 0.3); border-radius: 10px; padding: 10px 14px; margin: 0; text-align: center; } .form-submit{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 6px; padding: 16px 22px; border: none; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #3f8bff, #1a52d6); box-shadow: 0 10px 26px rgba(47, 123, 255, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .form-submit:hover{ transform: scale(1.02); box-shadow: 0 14px 34px rgba(47, 123, 255, 0.5); } .form-delete{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 12px; padding: 14px 22px; border: 1.5px solid rgba(255, 107, 107, 0.45); border-radius: 14px; background: rgba(255, 107, 107, 0.08); color: #ff6b6b; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .form-delete:hover{ border-color: #ff6b6b; box-shadow: 0 10px 26px rgba(255, 107, 107, 0.25); } .form-divider{ display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 0.85rem; margin: 4px 0; } .form-divider::before, .form-divider::after{ content: ""; flex: 1; height: 1px; background: rgba(120, 160, 220, 0.22); } .form-footnote{ text-align: center; font-size: 0.9rem; color: var(--text-muted); margin: 0; } .form-footnote a{ color: var(--blue-400); font-weight: 600; text-decoration: none; cursor: pointer; } .form-footnote a:hover{ text-decoration: underline; } .form-forgot{ text-align: right; margin: -6px 0 0; } .form-forgot a{ color: var(--blue-400); font-size: 0.88rem; font-weight: 500; text-decoration: none; cursor: pointer; } .form-forgot a:hover{ text-decoration: underline; } /* ---------------------------------------------------------------------- */ /* Vérification du code */ /* ---------------------------------------------------------------------- */ .code-inputs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 10px 0 18px; } .code-box{ width: 48px; height: 58px; text-align: center; font-size: 1.4rem; font-weight: 700; font-family: var(--font-display); color: var(--text-main); background: rgba(255, 255, 255, 0.03); border: 1.5px solid rgba(120, 160, 220, 0.3); border-radius: 12px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .code-box:focus{ border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(79, 155, 255, 0.15); } .code-timer{ text-align: center; font-size: 0.88rem; color: var(--text-muted); margin: 0 0 14px; } .code-timer strong{ color: var(--blue-300); } .code-demo-note{ font-size: 0.78rem; color: var(--text-muted); background: rgba(120, 160, 220, 0.08); border: 1px dashed rgba(120, 160, 220, 0.3); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; text-align: center; display: none; } .code-demo-note.is-visible{ display: block; } .code-demo-note strong{ color: var(--blue-300); letter-spacing: 0.15em; } /* ---------------------------------------------------------------------- */ /* Résultat (succès / erreur) */ /* ---------------------------------------------------------------------- */ .result-icon{ width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 10px 0 24px; } .result-icon--success{ color: #33d17a; border: 3px solid rgba(51, 209, 122, 0.55); box-shadow: 0 0 30px rgba(51, 209, 122, 0.25) inset, 0 0 24px rgba(51, 209, 122, 0.18); } .result-icon--error{ color: #ff5c5c; border: 3px solid rgba(255, 92, 92, 0.55); box-shadow: 0 0 30px rgba(255, 92, 92, 0.25) inset, 0 0 24px rgba(255, 92, 92, 0.18); } .modal-step--center .modal-title{ margin-bottom: 10px; } .modal-step--center .modal-sub{ margin-bottom: 28px; } .modal-step--center .form-submit{ max-width: 320px; } /* ---------------------------------------------------------------------- */ /* Navigation principale (pages de service) */ /* ---------------------------------------------------------------------- */ .main-nav{ display: flex; align-items: center; justify-content: center; gap: 32px; min-width: 0; } .main-nav a{ color: var(--text-main); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s ease; } .main-nav a:hover{ color: var(--blue-400); } /* ---------------------------------------------------------------------- */ /* Page de service (ex. pisciniste) */ /* ---------------------------------------------------------------------- */ .page{ display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 32px 60px; } .service-hero{ text-align: center; margin-bottom: 48px; } .service-eyebrow{ color: var(--blue-400); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 14px; } .service-title{ font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; margin: 0 0 16px; color: #f4f8ff; } .service-subtitle{ color: var(--text-muted); font-size: 1.05rem; max-width: 640px; margin: 0 auto; } .service-title--sm{ font-size: 2rem; } .service-cards{ display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin-bottom: 56px; } .reviews-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 8px 0 56px; } .review-card{ display: flex; flex-direction: column; gap: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 28px 26px; } .review-card-header{ display: flex; align-items: center; gap: 14px; } .review-card-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-main); margin: 0; } .review-card-date{ font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 0; } .review-card-stars{ display: flex; gap: 3px; color: #ffb84d; } .review-card-stars svg{ width: 16px; height: 16px; } .review-card-stars .star-off{ color: rgba(159, 176, 208, 0.3); } .review-card-text{ color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; } .reviews-empty{ grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 40px 20px; } @media (max-width: 900px){ .reviews-list{ grid-template-columns: 1fr; } } .star-rating{ display: flex; justify-content: center; gap: 10px; margin: -4px 0 4px; } .star-btn{ background: none; border: none; padding: 4px; cursor: pointer; color: rgba(159, 176, 208, 0.35); transition: color 0.15s ease, transform 0.15s ease; } .star-btn svg{ width: 30px; height: 30px; display: block; } .star-btn:hover{ transform: scale(1.12); } .star-btn.is-active{ color: #ffb84d; } .about-intro{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; margin-bottom: 56px; } .about-text p{ color: var(--text-muted); font-size: 1rem; line-height: 1.75; margin: 0 0 18px; } .about-text p:last-child{ margin-bottom: 0; } .about-text strong{ color: var(--text-main); } @media (max-width: 900px){ .about-intro{ grid-template-columns: 1fr; } } .service-card{ display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1 1 320px; max-width: 380px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 34px 30px; transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease; } .service-card:hover{ transform: scale(1.02); box-shadow: 0 20px 50px rgba(47, 123, 255, 0.2); border-color: rgba(79, 155, 255, 0.4); } .service-card-icon{ width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--blue-400); background: rgba(10, 18, 36, 0.6); border: 1.5px solid rgba(79, 155, 255, 0.4); margin-bottom: 20px; } .service-card-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--text-main); margin: 0 0 6px; } .service-card-tag{ color: var(--blue-400); font-size: 0.92rem; font-weight: 600; text-decoration: none; margin-bottom: 16px; display: inline-block; } .service-card-tag:hover{ text-decoration: underline; } .service-card-text{ color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 0 28px; flex: 1; } .service-card-cta{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; color: #fff; text-decoration: none; background: linear-gradient(135deg, #3f8bff, #1a52d6); box-shadow: 0 10px 24px rgba(47, 123, 255, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; } .service-card-cta:hover{ transform: scale(1.03); box-shadow: 0 14px 30px rgba(47, 123, 255, 0.45); } /* ---------------------------------------------------------------------- */ /* Bandeau contact */ /* ---------------------------------------------------------------------- */ .contact-banner{ display: flex; align-items: center; gap: 24px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 30px 34px; margin-top: 40px; } .contact-banner-icon{ flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--blue-400); background: rgba(10, 18, 36, 0.6); border: 1.5px solid rgba(79, 155, 255, 0.4); } .contact-banner-text{ flex: 1; min-width: 0; } .contact-banner-text h2{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text-main); margin: 0 0 4px; } .contact-banner-text p{ color: var(--text-muted); font-size: 0.92rem; margin: 0; } .contact-banner-actions{ display: flex; gap: 14px; flex-shrink: 0; } .btn-outline, .btn-filled{ display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .btn-outline{ color: var(--text-main); border: 1.5px solid rgba(90, 140, 255, 0.55); background: rgba(20, 32, 60, 0.5); } .btn-outline:hover{ transform: scale(1.05); border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.35); } .btn-filled{ color: #fff; background: linear-gradient(135deg, #3f8bff, #1a52d6); box-shadow: 0 10px 24px rgba(47, 123, 255, 0.3); } .btn-filled:hover{ transform: scale(1.05); box-shadow: 0 14px 30px rgba(47, 123, 255, 0.45); } /* ---------------------------------------------------------------------- */ /* Pied de page */ /* ---------------------------------------------------------------------- */ .site-footer{ display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: auto; padding-top: 28px; padding-bottom: 8px; border-top: 1px solid rgba(120, 160, 220, 0.12); } .footer-item{ display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.9rem; } .footer-item svg{ color: var(--blue-400); flex-shrink: 0; } .footer-legal-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .footer-legal-links a{ padding: 8px 16px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .footer-legal-links a:hover{ color: var(--blue-400); border-color: rgba(79, 155, 255, 0.45); background: rgba(79, 155, 255, 0.08); } /* ---------------------------------------------------------------------- */ /* Pages légales (Mentions légales, Confidentialité, CGU) */ /* ---------------------------------------------------------------------- */ .legal-content{ max-width: 820px; margin: 0 auto; color: var(--text-muted); font-size: 0.98rem; line-height: 1.75; } .legal-content h2{ font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text-main); margin: 40px 0 14px; } .legal-content h2:first-child{ margin-top: 0; } .legal-content h3{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-main); margin: 24px 0 10px; } .legal-content p{ margin: 0 0 14px; } .legal-content ul{ margin: 0 0 14px; padding-left: 22px; } .legal-content li{ margin-bottom: 8px; } .legal-content strong{ color: var(--text-main); } .legal-content a{ color: var(--blue-400); } .legal-updated{ color: var(--text-muted); font-size: 0.85rem; font-style: italic; margin-bottom: 30px; } .legal-placeholder{ color: var(--orange-400); } /* ---------------------------------------------------------------------- */ /* Responsive — page de service */ /* ---------------------------------------------------------------------- */ @media (max-width: 980px){ .main-nav{ display: none; } .service-card{ flex-basis: 100%; } .service-title{ font-size: 2rem; } .contact-banner{ flex-direction: column; align-items: flex-start; } .contact-banner-actions{ width: 100%; } .btn-outline, .btn-filled{ flex: 1; justify-content: center; } } /* ---------------------------------------------------------------------- */ /* Variante orange (page électricien) */ /* ---------------------------------------------------------------------- */ .accent-orange{ color: var(--orange-400); } .service-cards--two{ grid-template-columns: repeat(2, 1fr); max-width: 840px; margin-left: auto; margin-right: auto; } .service-eyebrow--orange{ color: var(--orange-400); } .service-card--orange:hover{ box-shadow: 0 20px 50px rgba(255, 138, 31, 0.2); border-color: rgba(255, 159, 69, 0.4); } .service-card-icon--orange{ color: var(--orange-400); border-color: rgba(255, 159, 69, 0.4); } .service-card-tag--orange{ color: var(--orange-400); } .service-card-cta--orange{ background: linear-gradient(135deg, #ff9d40, #ff7a1a); box-shadow: 0 10px 24px rgba(255, 138, 31, 0.3); } .service-card-cta--orange:hover{ box-shadow: 0 14px 30px rgba(255, 138, 31, 0.45); } .contact-banner-icon--orange{ color: var(--orange-400); border-color: rgba(255, 159, 69, 0.4); } .btn-outline--orange:hover{ border-color: var(--orange-400); box-shadow: 0 0 22px rgba(255, 138, 31, 0.35); } .btn-filled--orange{ background: linear-gradient(135deg, #ff9d40, #ff7a1a); box-shadow: 0 10px 24px rgba(255, 138, 31, 0.3); } .btn-filled--orange:hover{ box-shadow: 0 14px 30px rgba(255, 138, 31, 0.45); } /* ---------------------------------------------------------------------- */ /* Page Administration */ /* ---------------------------------------------------------------------- */ .admin-layout{ display: flex; align-items: flex-start; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 32px 48px 60px; min-height: 60vh; } .account-layout{ display: flex; align-items: flex-start; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 32px 48px 60px; min-height: 60vh; } .account-spacer{ width: 240px; flex-shrink: 0; margin-left: 24px; transition: width 0.25s ease; } .account-spacer.is-collapsed{ width: 68px; } .admin-sidebar, .account-sidebar{ width: 240px; flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 18px; margin-right: 24px; transition: width 0.25s ease, padding 0.25s ease; } .admin-sidebar.is-collapsed, .account-sidebar.is-collapsed{ width: 68px; padding: 18px 12px; } .admin-sidebar-toggle, .account-sidebar-toggle{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid rgba(90, 140, 255, 0.4); background: rgba(20, 32, 60, 0.5); color: var(--text-main); cursor: pointer; margin-bottom: 18px; transition: border-color 0.2s ease, transform 0.2s ease; } .admin-sidebar-toggle:hover, .account-sidebar-toggle:hover{ border-color: var(--blue-400); transform: scale(1.05); } .admin-sidebar-nav, .account-sidebar-nav{ display: flex; flex-direction: column; gap: 6px; } .admin-nav-item, .account-nav-item{ display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; cursor: pointer; white-space: nowrap; overflow: hidden; width: 100%; transition: background 0.2s ease, color 0.2s ease; } .admin-nav-item svg, .account-nav-item svg{ flex-shrink: 0; } .admin-nav-item:hover, .account-nav-item:hover{ background: rgba(79, 155, 255, 0.1); color: var(--text-main); } .admin-nav-item.is-active, .account-nav-item.is-active{ background: rgba(79, 155, 255, 0.16); color: var(--blue-400); } .admin-sidebar.is-collapsed .admin-nav-item span, .account-sidebar.is-collapsed .account-nav-item span{ display: none; } .admin-content, .account-content{ flex: 1; min-width: 0; } .account-content{ display: flex; flex-direction: column; align-items: center; } .account-section{ width: 100%; max-width: 820px; } .admin-title, .account-title{ font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: #f4f8ff; margin: 0 0 28px; } .admin-section-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text-main); margin: 0 0 20px; } .account-section-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text-main); margin: 0 0 20px; text-align: center; } .account-section-title--spaced{ margin-top: 48px; } .admin-avis-list{ display: flex; flex-direction: column; gap: 16px; } .admin-avis-card{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 22px 24px; } .admin-avis-header{ display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .admin-avis-name{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0; } .admin-avis-date{ font-size: 0.78rem; color: var(--text-muted); margin: 2px 0 0; } .admin-avis-stars{ display: flex; gap: 3px; color: #ffb84d; margin-bottom: 10px; } .admin-avis-stars svg{ width: 15px; height: 15px; } .admin-avis-stars .star-off{ color: rgba(159, 176, 208, 0.3); } .admin-avis-body{ flex: 1; min-width: 0; } .admin-avis-text{ color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; } .admin-avis-actions{ display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .btn-approve, .btn-reject{ display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; border: 1.5px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .btn-approve{ color: #2ecf7a; border-color: rgba(46, 207, 122, 0.45); background: rgba(46, 207, 122, 0.1); } .btn-approve:hover{ border-color: #2ecf7a; box-shadow: 0 0 18px rgba(46, 207, 122, 0.3); } .btn-reject{ color: #ff6b6b; border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); } .btn-reject:hover{ border-color: #ff6b6b; box-shadow: 0 0 18px rgba(255, 107, 107, 0.25); } .admin-empty{ text-align: center; color: var(--text-muted); padding: 40px 20px; } /* ---------------------------------------------------------------------- */ /* Page compte : listes génériques (commandes, avis, devis) */ /* ---------------------------------------------------------------------- */ .account-list{ display: flex; flex-direction: column; gap: 16px; } .account-card{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 22px 24px; } .account-card-header{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; } .account-card-title{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0; } .account-card-meta{ font-size: 0.78rem; color: var(--text-muted); } .account-card-body{ color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; } .account-status{ display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .account-status--attente{ background: rgba(255, 159, 69, 0.14); color: var(--orange-400); border: 1px solid rgba(255, 159, 69, 0.35); } .account-status--valide{ background: rgba(46, 207, 122, 0.14); color: #2ecf7a; border: 1px solid rgba(46, 207, 122, 0.35); } .account-status--refuse{ background: rgba(255, 107, 107, 0.14); color: #ff6b6b; border: 1px solid rgba(255, 107, 107, 0.35); } .account-order-items{ display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; } .account-order-item{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--text-muted); } .account-order-item span:first-child{ color: var(--text-main); } .account-order-total{ display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(120, 160, 220, 0.14); font-family: var(--font-display); font-weight: 700; color: var(--text-main); } .account-profile-form{ max-width: 560px; margin: 0 auto; } .admin-toggle-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px 22px; margin-bottom: 24px; } .admin-toggle-label{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0 0 4px; } .admin-toggle-desc{ font-size: 0.85rem; color: var(--text-muted); margin: 0; } .admin-toggle{ position: relative; width: 54px; height: 30px; flex-shrink: 0; border: none; border-radius: 999px; background: #e0454d; cursor: pointer; padding: 0; transition: background 0.25s ease; } .admin-toggle[aria-checked="true"]{ background: #2ecf7a; } .admin-toggle:disabled{ opacity: 0.6; cursor: not-allowed; } .admin-toggle-thumb{ position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.25s ease; } .admin-toggle[aria-checked="true"] .admin-toggle-thumb{ transform: translateX(24px); } .admin-toggle--sm{ width: 40px; height: 22px; } .admin-toggle--sm .admin-toggle-thumb{ width: 16px; height: 16px; top: 3px; left: 3px; } .admin-toggle--sm[aria-checked="true"] .admin-toggle-thumb{ transform: translateX(18px); } .admin-add-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 20px; border: 1.5px dashed rgba(90, 140, 255, 0.45); border-radius: 14px; background: rgba(20, 32, 60, 0.35); color: var(--blue-400); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none; margin-bottom: 24px; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .admin-add-btn:hover{ transform: scale(1.01); border-color: var(--blue-400); background: rgba(79, 155, 255, 0.1); } .admin-products-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .admin-product-card{ display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; } .admin-product-image, .admin-product-image-placeholder{ width: 100%; height: 150px; object-fit: cover; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .admin-product-body{ padding: 14px 16px 8px; } .admin-product-title{ font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--text-main); margin: 0 0 6px; } .admin-product-price{ color: var(--blue-400); font-weight: 700; font-size: 0.95rem; margin: 0; } .admin-product-actions{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; margin-top: auto; } .admin-product-edit{ display: flex; align-items: center; gap: 6px; background: none; border: 1.5px solid rgba(90, 140, 255, 0.4); color: var(--text-main); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; } .admin-product-edit:hover{ border-color: var(--blue-400); background: rgba(79, 155, 255, 0.1); } .faq-category-select{ display: flex; gap: 12px; margin: -4px 0 4px; } .faq-category-btn{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid rgba(120, 160, 220, 0.28); background: rgba(255, 255, 255, 0.02); color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .faq-category-btn:hover{ color: var(--text-main); } .admin-faq-filter{ max-width: 360px; margin: 20px auto 24px; } .faq-category-btn--pool.is-selected{ border-color: var(--blue-400); background: rgba(79, 155, 255, 0.14); color: var(--blue-400); } .faq-category-btn--elec.is-selected{ border-color: var(--orange-400); background: rgba(255, 159, 69, 0.14); color: var(--orange-400); } .admin-faq-category{ display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .admin-faq-category--piscine{ background: rgba(79, 155, 255, 0.14); color: var(--blue-400); border: 1px solid rgba(79, 155, 255, 0.35); } .admin-faq-category--electricite{ background: rgba(255, 159, 69, 0.14); color: var(--orange-400); border: 1px solid rgba(255, 159, 69, 0.35); } .admin-faq-list{ display: flex; flex-direction: column; gap: 14px; } .admin-faq-card{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s ease; } .admin-faq-card.is-open{ border-color: rgba(79, 155, 255, 0.45); } .admin-faq-header{ display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 22px; background: none; border: none; cursor: pointer; text-align: left; } .admin-faq-body{ flex: 1; min-width: 0; } .admin-faq-question{ font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--text-main); margin: 0; } .admin-faq-chevron{ flex-shrink: 0; display: flex; color: var(--blue-400); transition: transform 0.25s ease; } .admin-faq-card.is-open .admin-faq-chevron{ transform: rotate(180deg); } .admin-faq-answer-wrap{ max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .admin-faq-answer-inner{ padding: 0 22px 20px; } .admin-faq-answer{ color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin: 0 0 16px; white-space: pre-line; } .admin-faq-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-faq-delete{ display: flex; align-items: center; gap: 6px; background: none; border: 1.5px solid rgba(255, 107, 107, 0.35); color: #ff6b6b; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .admin-faq-delete:hover{ border-color: #ff6b6b; background: rgba(255, 107, 107, 0.14); } @media (max-width: 640px){ .admin-faq-actions{ width: 100%; } } /* ---------------------------------------------------------------------- */ /* Photos des réalisations (admin) */ /* ---------------------------------------------------------------------- */ .admin-photo-hint{ color: var(--text-muted); font-size: 0.88rem; margin: 22px 0 16px; } .admin-photo-subtitle{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0 0 16px; } .admin-photo-subtitle--divider{ margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--card-border); } .admin-photo-save-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 22px; padding: 16px 22px; border: none; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 10px 26px rgba(5, 150, 105, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease; } .admin-photo-save-btn:hover{ transform: scale(1.015); box-shadow: 0 14px 30px rgba(5, 150, 105, 0.45); } .admin-photo-save-btn:disabled{ cursor: not-allowed; opacity: 0.4; transform: none; box-shadow: none; } .admin-photo-columns{ display: flex; flex-direction: column; gap: 14px; } .admin-photo-count{ display: inline-block; margin-left: 8px; background: rgba(79, 155, 255, 0.14); color: var(--blue-400); font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: middle; } .admin-photo-column-body{ min-height: 70px; } .admin-photo-column-empty{ grid-column: 1 / -1; color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 18px 0; border: 1.5px dashed rgba(120, 160, 220, 0.25); border-radius: 12px; margin: 0; } .admin-photo-thumb{ position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); cursor: grab; transition: border-color 0.2s ease; } .admin-photo-thumb:hover{ border-color: rgba(79, 155, 255, 0.45); } .admin-photo-thumb.is-dragging{ opacity: 0.3; } .admin-photo-thumb.is-drop-target{ border-color: var(--blue-400); box-shadow: 0 0 0 2px var(--blue-400) inset; } .admin-photo-thumb img{ width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .admin-photo-thumb-delete{ position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(10, 15, 30, 0.75); color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; } .admin-photo-thumb:hover .admin-photo-thumb-delete{ opacity: 1; } .admin-photo-thumb-delete:hover{ background: #ff6b6b; } .admin-categorie-list{ display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; margin-bottom: 18px; } .admin-categorie-row{ display: flex; align-items: center; gap: 10px; } .admin-categorie-row input{ flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.02); border: 1.5px solid rgba(120, 160, 220, 0.28); border-radius: 12px; padding: 10px 14px; color: var(--text-main); font-family: var(--font-body); font-size: 0.9rem; } .admin-categorie-row input:focus{ outline: none; border-color: var(--blue-400); } .admin-categorie-delete{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid rgba(255, 107, 107, 0.35); background: none; color: #ff6b6b; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .admin-categorie-delete:hover{ border-color: #ff6b6b; background: rgba(255, 107, 107, 0.14); } /* ---------------------------------------------------------------------- */ /* Journal d'activité */ /* ---------------------------------------------------------------------- */ .admin-journal-header{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .admin-journal-header .admin-section-title{ margin: 0; } .admin-journal-filter{ position: relative; } .admin-journal-filter-btn{ display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1.5px solid rgba(120, 160, 220, 0.28); background: rgba(255, 255, 255, 0.02); color: var(--text-main); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .admin-journal-filter-btn:hover{ border-color: var(--blue-400); } .admin-journal-filter-btn svg:last-child{ color: var(--text-muted); transition: transform 0.2s ease; } .admin-journal-filter.is-open .admin-journal-filter-btn svg:last-child{ transform: rotate(180deg); } .admin-journal-filter-menu{ position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; background: linear-gradient(180deg, #0e1729 0%, #0a121f 100%); border: 1px solid rgba(120, 160, 220, 0.22); border-radius: 14px; padding: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); z-index: 50; animation: dropdownIn 0.2s ease; } .admin-journal-filter-option{ display: block; width: 100%; background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; padding: 9px 10px; border-radius: 9px; cursor: pointer; text-align: left; transition: background 0.2s ease, color 0.2s ease; } .admin-journal-filter-option:hover{ background: rgba(79, 155, 255, 0.1); color: var(--text-main); } .admin-journal-filter-option.is-active{ background: rgba(79, 155, 255, 0.16); color: var(--blue-400); } /* ---------------------------------------------------------------------- */ /* Statistiques (admin) */ /* ---------------------------------------------------------------------- */ .admin-stats-kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0; } .admin-stats-kpi{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px; } .admin-stats-kpi-value{ font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--blue-400); margin: 0 0 4px; } .admin-stats-kpi-label{ color: var(--text-muted); font-size: 0.82rem; margin: 0; } .admin-stats-card{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 24px; margin-bottom: 20px; } .admin-stats-chart-wrap{ width: 100%; } .admin-stats-chart-svg{ width: 100%; height: 220px; overflow: visible; } .admin-stats-chart-area{ fill: rgba(79, 155, 255, 0.14); stroke: none; } .admin-stats-chart-line{ fill: none; stroke: var(--blue-400); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .admin-stats-chart-label{ fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; } .admin-stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .admin-stats-list{ display: flex; flex-direction: column; gap: 12px; } .admin-stats-bar-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 2fr) 36px; align-items: center; gap: 10px; } .admin-stats-bar-label{ color: var(--text-main); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-stats-bar-track{ height: 8px; background: rgba(120, 160, 220, 0.14); border-radius: 999px; overflow: hidden; } .admin-stats-bar-fill{ height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--blue-400)); border-radius: 999px; } .admin-stats-bar-value{ color: var(--text-muted); font-size: 0.8rem; font-weight: 700; text-align: right; } /* ---------------------------------------------------------------------- */ /* Commandes / Devis (admin) */ /* ---------------------------------------------------------------------- */ .admin-order-list{ display: flex; flex-direction: column; gap: 14px; } .admin-order-card{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 22px 24px; } .admin-order-header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .admin-order-name{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0 0 4px; } .admin-order-date{ color: var(--text-muted); font-size: 0.85rem; margin: 0; } .admin-order-badge{ flex-shrink: 0; padding: 5px 14px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; white-space: nowrap; } .admin-order-badge--nouvelle, .admin-order-badge--nouveau{ background: rgba(79, 155, 255, 0.14); color: var(--blue-400); } .admin-order-badge--prete{ background: rgba(255, 159, 69, 0.14); color: var(--orange-400); } .admin-order-badge--recuperee, .admin-order-badge--traite{ background: rgba(52, 211, 153, 0.14); color: #34d399; } .admin-order-items{ list-style: none; margin: 0 0 16px; padding: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; } .admin-order-description{ color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 16px; } .admin-order-footer{ display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--card-border); } .admin-order-total{ color: var(--text-main); font-weight: 700; font-size: 0.92rem; margin: 0; } .admin-order-contact{ color: var(--text-muted); font-size: 0.85rem; margin: 0; } .admin-order-status{ display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; } .admin-order-status-select{ flex: 1; max-width: 220px; background: rgba(255, 255, 255, 0.02); border: 1.5px solid rgba(120, 160, 220, 0.28); border-radius: 10px; padding: 8px 12px; color: var(--text-main); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; } .admin-order-status-select:focus{ outline: none; border-color: var(--blue-400); } .admin-order-status-select option{ background: #0e1729; color: var(--text-main); } .admin-journal-list{ display: flex; flex-direction: column; gap: 10px; } .admin-journal-item{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 18px; flex-wrap: wrap; } .admin-journal-main{ flex: 1; min-width: 220px; } .admin-journal-action{ font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--text-main); margin: 0 0 4px; } .admin-journal-details{ font-size: 0.85rem; color: var(--text-muted); margin: 0; } .admin-journal-meta{ flex-shrink: 0; text-align: right; } .admin-journal-who{ font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--blue-400); margin: 0 0 2px; } .admin-journal-when{ font-size: 0.78rem; color: var(--text-muted); margin: 0; } @media (max-width: 640px){ .admin-journal-item{ flex-direction: column; } .admin-journal-meta{ text-align: left; } } .admin-form-card{ max-width: 560px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 36px 34px; } .shop-file-field{ position: relative; overflow: hidden; cursor: pointer; } .shop-file-field input[type="file"]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; } .shop-file-preview{ width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } @media (max-width: 760px){ .admin-layout, .account-layout{ flex-direction: column; padding-left: 20px; padding-right: 20px; } .admin-sidebar, .account-sidebar{ width: 100%; margin-right: 0; margin-bottom: 20px; } .admin-sidebar.is-collapsed, .account-sidebar.is-collapsed{ width: 100%; } .account-spacer{ display: none; } .admin-sidebar.is-collapsed .admin-nav-item span, .account-sidebar.is-collapsed .account-nav-item span{ display: inline; } .admin-avis-card{ flex-direction: column; } .admin-avis-actions{ flex-direction: row; width: 100%; } .btn-approve, .btn-reject{ flex: 1; justify-content: center; } } /* ---------------------------------------------------------------------- */ /* Page Boutique */ /* ---------------------------------------------------------------------- */ .shop-cats{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 8px 0 44px; } .shop-cat-chip{ display: flex; flex-direction: column; align-items: center; gap: 8px; width: 108px; padding: 16px 10px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-muted); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; text-align: center; line-height: 1.3; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .shop-cat-chip svg{ color: var(--blue-400); flex-shrink: 0; } .shop-cat-chip:hover{ transform: translateY(-3px); border-color: rgba(79, 155, 255, 0.4); color: var(--text-main); } .shop-cat-chip.is-active{ background: rgba(79, 155, 255, 0.14); border-color: var(--blue-400); color: var(--text-main); } .shop-page{ display: flex; align-items: flex-start; gap: 24px; padding: 20px; } .shop-main{ flex: 1; min-width: 0; max-width: 1040px; margin: 0 auto; } .shop-sidebar{ width: 340px; flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 26px; padding: 36px 30px; } .shop-sidebar-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-main); margin: 0 0 20px; } .shop-filter-group{ margin-bottom: 26px; } .shop-filter-group:last-child{ margin-bottom: 0; } .shop-filter-title{ font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 12px; } .shop-filter-note{ font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0; } .shop-checkbox{ display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text-muted); font-size: 0.92rem; cursor: pointer; } .shop-checkbox input{ appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgba(120, 160, 220, 0.4); background: transparent; cursor: pointer; position: relative; transition: border-color 0.2s ease, background 0.2s ease; } .shop-checkbox input:checked{ border-color: #22d3ee; background: #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, 0.45); } .shop-checkbox input:checked::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #0a121f; transform: translate(-50%, -50%); } .shop-checkbox:hover input{ border-color: #22d3ee; } .shop-checkbox:hover{ color: var(--text-main); } .shop-price-range{ width: 100%; accent-color: var(--blue-400); } .shop-price-values{ display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; } .shop-content{ flex: 1; min-width: 0; } .shop-toolbar{ display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .shop-toolbar label{ font-size: 0.88rem; color: var(--text-muted); } .shop-toolbar-sort{ display: flex; align-items: center; gap: 10px; } .shop-search{ display: flex; align-items: center; gap: 10px; flex: 1 1 220px; max-width: 360px; background: rgba(20, 32, 60, 0.5); border: 1.5px solid rgba(90, 140, 255, 0.35); border-radius: 12px; padding: 0 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .shop-search:focus-within{ border-color: var(--blue-400); box-shadow: 0 0 22px rgba(60, 130, 255, 0.25); } .shop-search svg{ color: var(--text-muted); flex-shrink: 0; } .shop-search input{ flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text-main); font-family: var(--font-body); font-size: 0.92rem; padding: 11px 0; } .shop-search input::placeholder{ color: var(--text-muted); } .shop-search input::-webkit-search-cancel-button{ cursor: pointer; } .shop-sort{ position: relative; } .shop-sort-trigger{ display: flex; align-items: center; gap: 10px; background: rgba(20, 32, 60, 0.5); border: 1.5px solid rgba(90, 140, 255, 0.35); color: var(--text-main); font-family: var(--font-body); font-size: 0.88rem; padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: border-color 0.2s ease; } .shop-sort-trigger svg{ color: var(--text-muted); transition: transform 0.2s ease; } .shop-sort-trigger:hover, .shop-sort-trigger[aria-expanded="true"]{ border-color: var(--blue-400); } .shop-sort-trigger[aria-expanded="true"] svg{ transform: rotate(180deg); } .shop-sort-menu{ position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; background: linear-gradient(180deg, #0e1729 0%, #0a121f 100%); border: 1px solid rgba(120, 160, 220, 0.22); border-radius: 16px; padding: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); z-index: 200; animation: dropdownIn 0.2s ease; } .shop-sort-option{ display: block; width: 100%; background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 0.9rem; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; transition: background 0.2s ease, color 0.2s ease; } .shop-sort-option:hover{ background: rgba(79, 155, 255, 0.1); color: var(--text-main); } .shop-sort-option.is-selected{ color: var(--blue-400); background: rgba(79, 155, 255, 0.12); } .shop-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; min-height: 240px; } .shop-product-card{ display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .shop-product-card:hover{ transform: translateY(-3px); border-color: rgba(79, 155, 255, 0.4); box-shadow: 0 16px 40px rgba(47, 123, 255, 0.18); } .shop-product-image, .shop-product-image-placeholder{ width: 100%; height: 170px; object-fit: cover; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .shop-product-body{ padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .shop-product-title{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0; } .shop-product-price{ color: var(--blue-400); font-weight: 700; font-size: 0.95rem; margin: 0 0 14px; } .shop-product-cta{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 11px 16px; border-radius: 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; color: #fff; text-decoration: none; border: none; cursor: pointer; background: linear-gradient(135deg, #3f8bff, #1a52d6); box-shadow: 0 8px 20px rgba(47, 123, 255, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .shop-product-cta:hover{ transform: scale(1.03); box-shadow: 0 12px 26px rgba(47, 123, 255, 0.45); } /* ---------------------------------------------------------------------- */ /* Fiche produit */ /* ---------------------------------------------------------------------- */ .product-detail-layout{ display: flex; align-items: flex-start; gap: 32px; margin-bottom: 56px; } .product-detail-main{ flex: 1; min-width: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; overflow: hidden; } .product-detail-image, .product-detail-image-placeholder{ width: 100%; height: 320px; object-fit: cover; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .product-detail-body{ padding: 28px 32px 34px; } .product-detail-title{ font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #f4f8ff; margin: 0 0 10px; } .product-detail-price{ color: var(--blue-400); font-weight: 700; font-size: 1.3rem; margin: 0 0 22px; } .product-detail-description{ color: var(--text-muted); font-size: 0.98rem; line-height: 1.75; margin: 0; } .click-collect-card{ width: 320px; flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 30px 26px; } .click-collect-title{ font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #f4f8ff; margin: 0 0 26px; text-align: center; } .cc-group{ margin-bottom: 24px; } .cc-group:last-child{ margin-bottom: 0; } .cc-group-title{ font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 12px; } .cc-chips{ display: flex; flex-wrap: wrap; gap: 10px; } .cc-chip{ padding: 10px 16px; border-radius: 10px; border: 1.5px solid rgba(90, 140, 255, 0.3); background: rgba(20, 32, 60, 0.5); color: var(--text-muted); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .cc-chip:hover{ border-color: var(--blue-400); color: var(--text-main); } .cc-chip.is-selected{ border-color: var(--blue-400); background: linear-gradient(135deg, #3f8bff, #1a52d6); color: #fff; box-shadow: 0 8px 20px rgba(47, 123, 255, 0.3); transform: scale(1.03); } .btn-cart{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 28px; padding: 14px 20px; border: none; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #34d67a, #1a9e52); box-shadow: 0 10px 26px rgba(46, 207, 122, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn-cart:hover{ transform: scale(1.02); box-shadow: 0 14px 32px rgba(46, 207, 122, 0.5); } .btn-cart:active{ transform: scale(0.98); } @media (max-width: 860px){ .product-detail-layout{ flex-direction: column; } .click-collect-card{ width: 100%; } } /* ---------------------------------------------------------------------- */ /* Nos réalisations */ /* ---------------------------------------------------------------------- */ .realisation-card{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 32px 30px 36px; margin-bottom: 40px; } .realisation-card-title{ font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: #f4f8ff; margin: 0 0 26px; } .realisation-transition{ display: flex; align-items: center; flex-wrap: wrap; gap: 16px; row-gap: 28px; } .realisation-step{ flex: 1 1 200px; min-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .realisation-step-image{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1px solid var(--card-border); transition: transform 0.3s ease, box-shadow 0.3s ease; } .realisation-step-image:hover{ transform: scale(1.02); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); } .realisation-step-label{ display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; } .realisation-step-label--before{ background: rgba(255, 159, 69, 0.12); color: var(--orange-400); border: 1px solid rgba(255, 159, 69, 0.35); } .realisation-step-label--after{ background: rgba(79, 155, 255, 0.14); color: var(--blue-400); border: 1px solid rgba(79, 155, 255, 0.4); } .realisation-arrow{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .realisation-single{ display: flex; justify-content: center; } .realisation-single .realisation-step-image{ max-width: 480px; } .realisation-text{ color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; margin: 28px 0 0; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } @media (max-width: 760px){ .realisation-transition{ flex-direction: column; } .realisation-arrow{ transform: rotate(90deg); } } /* ---------------------------------------------------------------------- */ /* FAQ */ /* ---------------------------------------------------------------------- */ .faq-list{ display: flex; flex-direction: column; gap: 14px; max-width: 800px; margin: 0 auto; } .faq-item{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; transition: border-color 0.2s ease; } .faq-item.is-open{ border-color: rgba(79, 155, 255, 0.45); } .faq-question{ display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 22px; background: none; border: none; color: var(--text-main); font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer; } .faq-question-icon{ flex-shrink: 0; display: flex; color: var(--blue-400); transition: transform 0.25s ease; } .faq-item.is-open .faq-question-icon{ transform: rotate(180deg); } .faq-answer{ max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-inner{ padding: 0 22px 22px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; white-space: pre-line; } /* ---------------------------------------------------------------------- */ /* Réalisations — galerie photo par catégorie (format FAQ) */ /* ---------------------------------------------------------------------- */ #realisationList{ max-width: 1100px; } .realisation-gallery{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .realisation-gallery img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); cursor: zoom-in; transition: transform 0.2s ease, border-color 0.2s ease; } .realisation-gallery img:hover{ transform: scale(1.03); border-color: rgba(79, 155, 255, 0.45); } .lightbox-overlay{ position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(1, 14, 30, 0.92); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .lightbox-overlay.is-open{ opacity: 1; visibility: visible; } .lightbox-stage{ display: flex; align-items: center; justify-content: center; gap: 28px; max-width: 100%; max-height: 100%; } .lightbox-stage img{ max-width: 100%; max-height: calc(100vh - 80px); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-close{ position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox-nav{ flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #3f8bff, #1a52d6); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(20, 60, 160, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; } .lightbox-nav:hover{ transform: scale(1.08); box-shadow: 0 10px 28px rgba(20, 60, 160, 0.6); } .lightbox-overlay--orange .lightbox-nav{ background: linear-gradient(135deg, #ff9d40, #ff7a1a); box-shadow: 0 8px 24px rgba(190, 90, 10, 0.45); } .lightbox-overlay--orange .lightbox-nav:hover{ box-shadow: 0 10px 28px rgba(190, 90, 10, 0.6); } .lightbox-nav[hidden]{ display: none; } @media (max-width: 760px){ .lightbox-stage{ gap: 12px; } .lightbox-nav{ width: 42px; height: 42px; } } @media (max-width: 640px){ .realisation-gallery, .admin-photo-column-body{ grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; } .lightbox-overlay{ padding: 20px; } .lightbox-close{ top: 14px; right: 14px; width: 38px; height: 38px; } .lightbox-stage{ gap: 8px; } .lightbox-stage img{ max-height: calc(100vh - 60px); } .lightbox-nav{ width: 36px; height: 36px; } } /* ---------------------------------------------------------------------- */ /* Panier */ /* ---------------------------------------------------------------------- */ .cart-layout{ display: flex; align-items: flex-start; gap: 32px; margin-bottom: 56px; } .cart-main{ flex: 1; min-width: 0; } .cart-items{ display: flex; flex-direction: column; gap: 16px; } .cart-item{ display: flex; align-items: center; gap: 18px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 16px 18px; } .cart-item-image, .cart-item-image-placeholder{ width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .cart-item-body{ flex: 1; min-width: 0; } .cart-item-title{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0 0 4px; } .cart-item-meta{ font-size: 0.82rem; color: var(--text-muted); margin: 0 0 6px; } .cart-item-price{ color: var(--blue-400); font-weight: 700; font-size: 0.92rem; margin: 0; } .cart-item-qty{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .cart-qty-btn{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid rgba(90, 140, 255, 0.35); background: rgba(20, 32, 60, 0.5); color: var(--text-main); font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .cart-qty-btn:hover{ border-color: var(--blue-400); background: rgba(79, 155, 255, 0.1); } .cart-qty-value{ min-width: 20px; text-align: center; font-weight: 700; color: var(--text-main); font-size: 0.95rem; } .cart-item-remove{ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid rgba(255, 107, 107, 0.35); background: rgba(255, 107, 107, 0.06); color: #ff6b6b; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease; } .cart-item-remove:hover{ border-color: #ff6b6b; background: rgba(255, 107, 107, 0.14); } .cart-recap-card{ width: 320px; flex-shrink: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 28px 26px; position: sticky; top: 24px; } .cart-recap-title{ font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #f4f8ff; margin: 0 0 22px; } .cart-recap-row{ display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.92rem; margin-bottom: 12px; } .cart-recap-row--total{ color: var(--text-main); font-weight: 700; font-size: 1.05rem; margin-bottom: 0; } .cart-recap-divider{ height: 1px; background: rgba(120, 160, 220, 0.18); margin: 14px 0; } .result-icon--neutral{ color: var(--blue-400); border: 3px solid rgba(79, 155, 255, 0.4); box-shadow: 0 0 30px rgba(79, 155, 255, 0.2) inset, 0 0 24px rgba(79, 155, 255, 0.15); } .cart-state{ max-width: 480px; margin: 0 auto; text-align: center; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 22px; padding: 44px 40px; } .cart-confirm-cta{ max-width: 320px; margin: 24px auto 0; text-decoration: none; } @media (max-width: 860px){ .cart-layout{ flex-direction: column; } .cart-recap-card{ width: 100%; position: static; } } @media (max-width: 980px){ .shop-page{ flex-direction: column; } .shop-sidebar{ width: 100%; } .shop-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .shop-grid{ grid-template-columns: 1fr; } } @media (max-width: 980px){ .service-cards--two{ grid-template-columns: 1fr; max-width: none; } } /* ---------------------------------------------------------------------- */ /* Ajustements mobile généraux (toutes pages) */ /* ---------------------------------------------------------------------- */ @media (max-width: 640px){ .site-header{ padding: 16px 20px; gap: 10px; } /* Sur mobile, la place manque pour le logo complet (texte + slogan) à côté des boutons d'action (menu, retour, panier, compte...). On bascule sur la version icône seule, plus compacte, pour éviter tout débordement horizontal du header. */ .brand-logo-img{ content: url('../images/logo-icon.png'); height: 40px; width: 40px; } .page{ padding: 36px 18px 40px; } .service-title{ font-size: 1.7rem; } .service-subtitle{ font-size: 0.95rem; } .hero{ padding: 32px 18px 36px; } .hero-logo{ height: 110px; margin: -10px auto 14px; } .hero-sub{ font-size: 0.95rem; margin-bottom: 30px; } .card{ padding: 30px 22px 26px; } .admin-layout, .account-layout{ padding: 20px 18px 40px; } .admin-title, .account-title{ font-size: 1.6rem; } .admin-toggle-row{ flex-wrap: wrap; } .shop-page{ padding: 14px; gap: 16px; } .shop-sidebar{ padding: 26px 20px; } .shop-cats{ gap: 10px; } .shop-cat-chip{ width: 92px; padding: 12px 8px; font-size: 0.75rem; } .product-detail-body{ padding: 22px 20px 26px; } .product-detail-title{ font-size: 1.35rem; } .click-collect-card{ padding: 24px 20px; } .realisation-card{ padding: 24px 18px 28px; } .realisation-card-title{ font-size: 1.2rem; } .realisation-step{ flex: 1 1 140px; min-width: 120px; } .cart-item{ flex-wrap: wrap; row-gap: 12px; } .cart-item-image, .cart-item-image-placeholder{ width: 64px; height: 64px; } .cart-item-body{ flex: 1 1 auto; } .cart-item-qty{ order: 3; } .cart-item-remove{ order: 4; margin-left: auto; } .cart-recap-card{ padding: 22px 20px; } .cart-confirm, .cart-state{ padding: 34px 22px; } .admin-form-card{ padding: 28px 22px; } .form-row{ grid-template-columns: 1fr; } /* Les 2 boutons du bandeau contact ("Nous contactez" / "Demander un devis") ont un texte + icône qui ne peuvent pas se rétrécir en dessous de leur largeur naturelle (white-space: nowrap) : côte à côte, ils débordaient de l'écran sur mobile. On les empile. */ .contact-banner-actions{ flex-direction: column; width: 100%; } .btn-outline, .btn-filled{ width: 100%; } } @media (max-width: 400px){ .card-features{ gap: 14px; } } @media (max-width: 420px){ .site-header{ padding: 14px 16px; } .header-actions{ gap: 6px; } .btn-back, .btn-cart-icon, .nav-toggle{ width: 38px; height: 38px; } .avatar-circle{ width: 38px; height: 38px; } .service-title{ font-size: 1.45rem; } .service-eyebrow{ font-size: 0.72rem; } .hero-logo{ height: 84px; } .realisation-transition{ gap: 10px; } .realisation-step{ flex: 1 1 100%; } .realisation-arrow{ transform: rotate(90deg); } .shop-cat-chip{ width: 80px; } .code-inputs{ gap: 7px; } .code-box{ width: 38px; height: 48px; font-size: 1.15rem; } } /* ---------------------------------------------------------------------- */ /* Page d'accueil provisoire (site en construction) */ /* ---------------------------------------------------------------------- */ .soon-page{ flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; } .soon-content{ max-width: 620px; } .soon-content .hero-logo{ margin: 0 auto 28px; } .soon-text{ color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin: 18px 0 0; } .soon-admin-btn{ position: fixed; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(120, 160, 220, 0.18); background: rgba(12, 20, 40, 0.4); color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; cursor: pointer; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .soon-admin-btn:hover{ opacity: 1; border-color: rgba(79, 155, 255, 0.4); color: var(--text-main); } .soon-admin-btn svg{ flex-shrink: 0; } @media (max-width: 420px){ .soon-admin-btn{ left: 14px; bottom: 14px; padding: 8px 14px; font-size: 0.75rem; } }