/* ================================================ COPY PROTECTION ================================================ */ body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Allow selection in form inputs */ input, textarea, select { -webkit-user-select: text; user-select: text; } /* ================================================ THEME SYSTEM - LIGHT MODE OVERRIDES Default: Dark (existing inline styles) Light: Applied via [data-theme="light"] on ================================================ */ /* ---- TRANSITION ---- */ [data-theme-mode] body, [data-theme-mode] .glass, [data-theme-mode] .border-gradient-wrapper, [data-theme-mode] .premium-logo, [data-theme-mode] .premium-logo span, [data-theme-mode] footer { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ================================================ BODY & BASE ================================================ */ [data-theme="light"] body { background-color: #f8fafc !important; color: #1e293b !important; } /* ================================================ BACKGROUNDS ================================================ */ [data-theme="light"] .bg-dark { background-color: #ffffff !important; } [data-theme="light"] .bg-surface { background-color: #f1f5f9 !important; } [data-theme="light"] .bg-black { background-color: #f1f5f9 !important; } [data-theme="light"] .bg-slate-950\/30 { background-color: rgba(241, 245, 249, 0.5) !important; } /* ================================================ GLASS EFFECT ================================================ */ [data-theme="light"] .glass { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06) !important; } /* ================================================ BORDER GRADIENT WRAPPER ================================================ */ [data-theme="light"] .border-gradient-wrapper { background: #ffffff !important; } [data-theme="light"] .border-gradient-wrapper::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), transparent 60%) !important; } [data-theme="light"] .skill-card .border-gradient-wrapper::before { background: linear-gradient(135deg, rgba(var(--accent), 0.2), transparent 60%) !important; } [data-theme="light"] .skill-card:hover .border-gradient-wrapper::before { background: linear-gradient(135deg, rgba(var(--accent), 0.35), transparent 70%) !important; } /* ================================================ TEXT COLORS ================================================ */ /* Broad white text → dark (headings, labels, strong, etc.) */ [data-theme="light"] .text-white { color: #0f172a !important; } /* Re-preserve white text on gradient/colored buttons */ [data-theme="light"] .bg-cobalt-gradient .text-white, [data-theme="light"] .bg-cobalt-gradient.text-white, [data-theme="light"] [class*="bg-cobalt-gradient"] { color: #ffffff !important; } [data-theme="light"] .bg-blue-600 { color: #ffffff !important; } [data-theme="light"] button.bg-cobalt-gradient, [data-theme="light"] a.bg-cobalt-gradient { color: #ffffff !important; } /* Slate shades */ [data-theme="light"] .text-slate-300 { color: #475569 !important; } [data-theme="light"] .text-slate-400 { color: #475569 !important; } [data-theme="light"] .text-slate-500 { color: #64748b !important; } [data-theme="light"] .text-slate-600 { color: #334155 !important; } [data-theme="light"] .text-slate-700 { color: #1e293b !important; } /* Hover text */ [data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; } /* ================================================ PREMIUM LOGO ================================================ */ [data-theme="light"] .premium-logo { color: #0f172a !important; } [data-theme="light"] .premium-logo span { color: #3b82f6 !important; } /* ================================================ BORDERS ================================================ */ [data-theme="light"] .border-white\/3, [data-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .border-white\/20 { border-color: rgba(0, 0, 0, 0.12) !important; } /* ================================================ SHADOWS ================================================ */ [data-theme="light"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .shadow-blue-900\/40 { --tw-shadow-color: rgba(30, 58, 138, 0.15) !important; } /* ================================================ HOVER STATES ================================================ */ [data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .hover\:bg-blue-900\/30:hover { background-color: rgba(59, 130, 246, 0.08) !important; } [data-theme="light"] .hover\:border-blue-500\/30:hover { border-color: rgba(59, 130, 246, 0.3) !important; } /* ================================================ BACKGROUND DECORATIVE ELEMENTS ================================================ */ [data-theme="light"] .bg-gradient-radial { background: radial-gradient(circle at 50% 0%, rgba(30, 58, 138, 0.06) 0%, transparent 60%) !important; } [data-theme="light"] .text-glow { text-shadow: 0 0 40px rgba(46, 81, 162, 0.2) !important; } /* Blur orbs - reduce opacity */ [data-theme="light"] [class*="blur-"][class*="bg-cobalt"], [data-theme="light"] [class*="blur-"][class*="bg-blue"] { opacity: 0.3 !important; } /* ================================================ MODAL / OVERLAY ================================================ */ [data-theme="light"] .bg-black\/90 { background-color: rgba(255, 255, 255, 0.92) !important; } /* ================================================ TERMINAL / CODE BLOCKS ================================================ */ [data-theme="light"] [class*="bg-[#0c1524]"] { background-color: #e8edf5 !important; } /* ================================================ NOSCRIPT ================================================ */ [data-theme="light"] noscript div { background: #dbeafe !important; color: #1e3a8a !important; } /* ================================================ SCROLLBAR ================================================ */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ================================================ IMAGE / PHOTO ADJUSTMENTS ================================================ */ [data-theme="light"] .grayscale { filter: grayscale(100%) !important; } [data-theme="light"] .hover\:grayscale-0:hover { filter: grayscale(0) !important; } /* ================================================ FAQ ACCORDIONS (solutions pages) ================================================ */ [data-theme="light"] [x-data] .bg-white\/5, [data-theme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(0, 0, 0, 0.02) !important; } /* ================================================ CONTACT FORM (contact.html) ================================================ */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background-color: #f8fafc !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #1e293b !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; } /* ================================================ THEME TOGGLE BUTTON ================================================ */ .theme-toggle { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(10, 15, 30, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; cursor: pointer; transition: all 0.3s ease; font-size: 14px; flex-shrink: 0; } .theme-toggle:hover { background: rgba(10, 15, 30, 0.9); border-color: rgba(255, 255, 255, 0.2); color: #f8fafc; transform: scale(1.08); } .theme-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } /* Hide all icons by default */ .theme-toggle .fa-moon, .theme-toggle .fa-sun, .theme-toggle .fa-desktop { position: absolute; opacity: 0; transform: scale(0.6) rotate(-30deg); transition: all 0.3s ease; } /* Show active icon based on mode */ [data-theme-mode="dark"] .theme-toggle .fa-moon, [data-theme-mode="light"] .theme-toggle .fa-sun { opacity: 1; transform: scale(1) rotate(0deg); } /* Light mode button style */ [data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); color: #475569; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } [data-theme="light"] .theme-toggle:hover { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Tooltip */ .theme-toggle[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(0, 0, 0, 0.9); color: white; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .theme-toggle:hover[data-tooltip]::after { opacity: 1; transform: translateX(-50%) translateY(0); } [data-theme="light"] .theme-toggle[data-tooltip]::after { background: #1e293b; } /* ================================================ MOBILE THEME TOGGLE ================================================ */ .theme-toggle-mobile { width: auto; height: auto; padding: 0.75rem 1rem; border-radius: 0.75rem; gap: 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .theme-toggle-mobile .fa-moon, .theme-toggle-mobile .fa-sun, .theme-toggle-mobile .fa-desktop { position: static !important; display: none; } [data-theme-mode="dark"] .theme-toggle-mobile .fa-moon, [data-theme-mode="light"] .theme-toggle-mobile .fa-sun { display: inline-block; opacity: 1 !important; transform: none !important; } .theme-toggle-mobile[data-tooltip]::after { display: none; } /* ================================================ MOBILE CONTENT DENSITY — AERER LES PAGES Le contenu reste dans le DOM pour le SEO, mais est tronqué ou masqué visuellement sur mobile. ================================================ */ @media (max-width: 639px) { /* --- Reduce section vertical padding --- */ section[class*="py-32"] { padding-top: 4rem !important; padding-bottom: 4rem !important; } section[class*="py-24"] { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* --- Section intro paragraphs: hide on mobile --- */ /* These sit after

in centered header blocks */ .reveal-scroll.text-center > p, .text-center.reveal-scroll > p { display: none !important; } /* --- Section side descriptions (hidden on md+ already or shown) --- */ .reveal-scroll > p.text-slate-400.text-right { display: none !important; } /* --- Card body descriptions: clamp to 2 lines --- */ .border-gradient-wrapper p.text-slate-400 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Pain point / glass cards: clamp to 3 lines */ section .glass > p.text-sm.text-slate-400, section .glass p.text-sm.text-slate-400.leading-relaxed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* --- Timeline step descriptions: clamp to 2 lines --- */ .relative.flex.gap-8 .glass p.text-slate-400 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- Reduce card padding on mobile --- */ .glass[class*="p-10"] { padding: 1.5rem !important; } .border-gradient-wrapper .bg-dark[class*="p-10"] { padding: 1.5rem !important; } /* --- Section spacing inside --- */ .space-y-20 { --tw-space-y-reverse: 0; row-gap: 3rem; } .space-y-20 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem !important; margin-bottom: 0 !important; } /* Hero description: full text visible on mobile */ /* --- CTA section description: clamp to 2 lines --- */ section[aria-label*="Reservation"] p.text-lg, section[aria-label*="eservation"] p.text-lg, section[aria-label*="Consultation"] p.text-lg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- KPI descriptions: hide on mobile (keep number + label) --- */ .grid-cols-2 .glass p.text-xs.text-slate-500 { display: none !important; } /* --- Timeline tags row: keep compact --- */ .flex.flex-wrap.gap-3.mt-6 { margin-top: 0.75rem !important; } /* --- FAQ: reduce padding --- */ details summary { padding: 1rem 1.25rem !important; } details .faq-answer { padding: 0 1.25rem 1rem !important; } /* --- "Autres solutions" link cards: compact --- */ section[aria-label*="autres solutions"] .glass.p-6, section[aria-label*="Autres solutions"] .glass.p-6, section[aria-label*="solutions"] .grid a.glass { padding: 1rem !important; } section[aria-label*="solutions"] .grid a.glass h3 { font-size: 0.75rem !important; } } /* ================================================ REDUCED MOTION ================================================ */ @media (prefers-reduced-motion: reduce) { [data-theme-mode] body, [data-theme-mode] .glass, .theme-toggle, .theme-toggle .fa-moon, .theme-toggle .fa-sun, .theme-toggle .fa-desktop, .theme-toggle::after { transition: none !important; } } /* ================================================ VIEW TRANSITIONS (cross-document, Chrome/Edge) ================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: fade-out 0.2s ease-in; } ::view-transition-new(root) { animation: fade-in 0.3s ease-out; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* Element-specific view transitions */ .premium-logo { view-transition-name: site-logo; } header { view-transition-name: site-header; } footer { view-transition-name: site-footer; } /* Header stays pinned during transition */ ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; } /* ================================================ WHATSAPP FLOATING WIDGET ================================================ */ .whatsapp-widget { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; } .whatsapp-widget:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(37, 211, 102, 0.55); } .whatsapp-widget:active { transform: scale(0.95); } @media (max-width: 639px) { .whatsapp-widget { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 24px; } } /* Logo morphs smoothly between pages */ ::view-transition-old(site-logo), ::view-transition-new(site-logo) { animation-duration: 0.25s; } /* Footer slides up on new page */ ::view-transition-old(site-footer) { animation: vt-slide-down 0.2s ease-in; } ::view-transition-new(site-footer) { animation: vt-slide-up 0.3s ease-out; } @keyframes vt-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes vt-slide-down { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-old(site-footer), ::view-transition-new(site-footer), ::view-transition-old(site-logo), ::view-transition-new(site-logo) { animation: none !important; } } /* ================================================ DARK MODE — VISUAL HIERARCHY & HARMONY Improves depth, card definition, and contrast ================================================ */ /* Glass cards: more defined with subtle inner highlight */ html:not([data-theme="light"]) .glass { background: rgba(10, 16, 32, 0.78) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Border-gradient cards: subtle shadow for depth */ html:not([data-theme="light"]) .border-gradient-wrapper { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } /* Section dividers: slightly more visible */ html:not([data-theme="light"]) .border-white\/5 { border-color: rgba(255, 255, 255, 0.07); } /* Footer: subtle top border glow */ html:not([data-theme="light"]) footer { border-top-color: rgba(59, 130, 246, 0.1); } /* Header backdrop: slightly warmer */ html:not([data-theme="light"]) header[role="banner"] { background: rgba(3, 7, 18, 0.92) !important; } /* Body text: slightly brighter for readability */ html:not([data-theme="light"]) .text-slate-400 { color: #9ca3b4; } /* Section labels: blue tint for consistency */ html:not([data-theme="light"]) .text-slate-500 { color: #717b94; }