/* ============================================================ style.css — Feuille de style principale Portail Client BiMP ============================================================ */ /* ── Typographie ──────────────────────────────────────────── */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: #f5f5f7; color: #1d1d1f; -webkit-font-smoothing: antialiased; } /* ── Glassmorphism (nav sticky) ───────────────────────────── */ .apple-blur { background: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); } /* ── Tuiles de services ───────────────────────────────────── */ .tile-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01); } .tile-card:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06); border-color: rgba(249, 115, 22, 0.3); } /* ── Icônes orange BiMP ───────────────────────────────────── */ .orange-icon { color: #f97316; stroke-width: 1.5; transition: transform 0.3s ease; } .tile-card:hover .orange-icon { transform: scale(1.1); } /* ── Dégradé orange BiMP ──────────────────────────────────── */ .bimp-gradient-orange { background: linear-gradient(135deg, #ff8c3a 0%, #f97316 100%); } /* ── Modal de contact ─────────────────────────────────────── */ #contactModal { display: none; opacity: 0; transition: opacity 0.3s ease; } #contactModal.active { display: flex; align-items: center; justify-content: center; opacity: 1; } .modal-content { transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } #contactModal.active .modal-content { transform: scale(1); } /* ── Switch dark mode ─────────────────────────────────────── */ .theme-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .theme-switch input { display: none; } .theme-track { width: 40px; height: 22px; background: #d1d5db; border-radius: 999px; position: relative; flex-shrink: 0; transition: background 0.3s; } .theme-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .theme-switch input:checked + .theme-track { background: #f97316; } .theme-switch input:checked + .theme-track::after { transform: translateX(18px); } /* ═══════════════════════════════════════════════════════════ DARK MODE — classe .dark sur ═══════════════════════════════════════════════════════════ */ html.dark, html.dark body { background-color: #111113; color: #f5f5f7; } /* nav */ html.dark .apple-blur { background: rgba(28, 28, 30, 0.80); border-color: rgba(255, 255, 255, 0.08); } html.dark nav { border-color: rgba(255, 255, 255, 0.08) !important; } html.dark nav span { color: #f5f5f7 !important; } /* tuiles */ html.dark .tile-card { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.06); box-shadow: none; } html.dark .tile-card:hover { border-color: rgba(249, 115, 22, 0.4); } html.dark .tile-card h3 { color: #f5f5f7; } html.dark .tile-card p { color: #8e8e93; } /* bloc aide */ html.dark .help-block { background: #2c2c2e !important; } /* footer */ html.dark footer { background: #1c1c1e !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark footer p { color: #8e8e93; } html.dark footer a { color: #ebebf0; } html.dark .theme-track { background: #3a3a3c; } /* modal */ html.dark .modal-content { background: #1c1c1e !important; } html.dark .modal-content h3 { color: #f5f5f7; } html.dark .modal-content .border-b { border-color: rgba(255, 255, 255, 0.08) !important; } html.dark .modal-content input, html.dark .modal-content textarea { background: #2c2c2e !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f5f5f7 !important; } html.dark .modal-content input::placeholder, html.dark .modal-content textarea::placeholder { color: #636366; } html.dark .modal-content label { color: #8e8e93; }