:root { --bg: #FAF7F2; --surface: #FFFFFF; --ink: #1C1917; --accent: #FF5A3D; } /* Mode sombre — appliqué quand */ html.dark { --bg: #0C0A09; /* stone-950, plus sombre que stone-900 pour fond global */ --surface: #1C1917; /* stone-900 pour cards et headers */ --ink: #F5F5F4; /* stone-100 pour texte principal */ --accent: #FF6B4F; /* orange légèrement plus chaud, plus lisible sur fond noir */ color-scheme: dark; } /* Override global du dark mode — convertit en lot les classes Tailwind les plus communes pour que tout l'app passe en sombre sans toucher chaque composant. On cible les classes Tailwind utilitaires utilisées comme fonds/textes/bordures. */ html.dark body { background: #0C0A09; color: #F5F5F4; } html.dark .bg-stone-50, html.dark .bg-stone-50\/90, html.dark .bg-white, html.dark .bg-white\/95 { background-color: #1C1917 !important; } html.dark .bg-stone-100 { background-color: #292524 !important; } html.dark .bg-stone-200 { background-color: #44403C !important; } html.dark .text-stone-900 { color: #F5F5F4 !important; } html.dark .text-stone-800 { color: #E7E5E4 !important; } html.dark .text-stone-700 { color: #D6D3D1 !important; } html.dark .text-stone-600 { color: #A8A29E !important; } html.dark .text-stone-500 { color: #78716C !important; } html.dark .border-stone-100, html.dark .border-stone-200 { border-color: #44403C !important; } html.dark .border-stone-300 { border-color: #57534E !important; } /* Inputs et selects en dark mode */ html.dark input, html.dark select, html.dark textarea { background-color: #292524 !important; color: #F5F5F4 !important; border-color: #44403C !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #78716C !important; } /* Encadrés d'info/alerte (Sync Firebase, stock bas, erreurs) On les transforme en fonds sombres teintés au lieu de pastels clairs */ html.dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.25) !important; } html.dark .bg-amber-100 { background-color: rgba(146, 64, 14, 0.4) !important; } html.dark .bg-orange-50 { background-color: rgba(124, 45, 18, 0.25) !important; } html.dark .bg-orange-100 { background-color: rgba(154, 52, 18, 0.4) !important; } html.dark .bg-rose-50 { background-color: rgba(136, 19, 55, 0.25) !important; } html.dark .bg-rose-100 { background-color: rgba(159, 18, 57, 0.4) !important; } html.dark .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.25) !important; } html.dark .bg-emerald-100 { background-color: rgba(6, 95, 70, 0.4) !important; } html.dark .bg-pink-100 { background-color: rgba(157, 23, 77, 0.4) !important; } html.dark .bg-sky-100 { background-color: rgba(7, 89, 133, 0.4) !important; } html.dark .bg-violet-100 { background-color: rgba(91, 33, 182, 0.4) !important; } /* Textes colorés associés — éclaircis pour lisibilité sur fond sombre */ html.dark .text-amber-700, html.dark .text-amber-800 { color: #FCD34D !important; } html.dark .text-orange-700, html.dark .text-orange-800 { color: #FDBA74 !important; } html.dark .text-rose-700 { color: #FDA4AF !important; } html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6EE7B7 !important; } html.dark .text-pink-700, html.dark .text-pink-800 { color: #F9A8D4 !important; } html.dark .text-sky-700, html.dark .text-sky-800 { color: #7DD3FC !important; } html.dark .text-violet-700, html.dark .text-violet-800 { color: #C4B5FD !important; } /* Bordures d'encadrés d'alerte */ html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(217, 119, 6, 0.4) !important; } html.dark .border-orange-200 { border-color: rgba(234, 88, 12, 0.4) !important; } html.dark .border-rose-200 { border-color: rgba(225, 29, 72, 0.4) !important; } html.dark .border-emerald-200, html.dark .border-emerald-300 { border-color: rgba(16, 185, 129, 0.4) !important; } /* Vignettes carrées des produits dans le catalogue Stock (fonds pastels qui font tache sur thème sombre) */ html.dark .bg-amber-50\/50, html.dark .bg-amber-100\/50 { background-color: rgba(120, 53, 15, 0.2) !important; } html.dark .bg-emerald-50\/50, html.dark .bg-emerald-100\/50 { background-color: rgba(6, 78, 59, 0.2) !important; } html.dark .bg-pink-50\/50, html.dark .bg-pink-100\/50 { background-color: rgba(131, 24, 67, 0.2) !important; } html.dark .bg-sky-50\/50, html.dark .bg-sky-100\/50 { background-color: rgba(7, 89, 133, 0.2) !important; } html.dark .bg-orange-50\/50 { background-color: rgba(124, 45, 18, 0.2) !important; } /* Toute l'app scale à 112.5 % (≈ 18 px sur un défaut 16). Les espacements en rem suivent aussi → proportions cohérentes. Les utilisateurs avec une taille de police personnalisée gardent l'échelle relative. */ html { font-size: 112.5%; } body { font-family: 'Bricolage Grotesque', system-ui, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } .font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-variation-settings: "opsz" 96; letter-spacing: -0.02em; } .font-mono { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .tabular-nums { font-variant-numeric: tabular-nums; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @keyframes flash-success { 0% { background-color: rgba(34,197,94,0.25); } 100% { background-color: transparent; } } .flash-success { animation: flash-success 0.6s ease-out; } @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .slide-up { animation: slide-up 0.25s ease-out; } @keyframes pop-in { 0% { transform: scale(0.9); opacity: 0; } 50% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .pop-in { animation: pop-in 0.3s ease-out; } .scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; } .scrollbar-thin::-webkit-scrollbar-track { background: transparent; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,90,61,0.3); border-radius: 2px; } #boot-loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); z-index: 9999; transition: opacity 0.3s; } #boot-loader.hidden { opacity: 0; pointer-events: none; } #boot-loader .brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.5rem; letter-spacing: -0.03em; margin-bottom: 0.75rem; } #boot-loader .label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #78716c; margin-bottom: 1rem; } #boot-loader .dots { display: flex; gap: 0.375rem; align-items: center; justify-content: center; } #boot-loader .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #f97316; animation: boot-pulse 1.4s ease-in-out infinite; } #boot-loader .dot:nth-child(2) { animation-delay: 0.15s; } #boot-loader .dot:nth-child(3) { animation-delay: 0.3s; } @keyframes boot-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } /* === iOS Safari : désactive les comportements natifs gênants ============ Sur iOS Safari, un long-press sur une image ou un bouton affiche par défaut : - un menu contextuel "Save Image" / "Copy" / "Share" - une miniature flottante (drag preview) qui s'affiche par-dessus la page Ces previews iOS apparaissent parfois en HAUT de la page (chevauchant le header sticky), ce qui donne l'impression d'un bug de z-index/sticky alors que c'est un overlay natif iOS qu'on ne peut pas styler. On désactive ces comportements sur tous les boutons et toutes les images. */ button, a[role="button"], label[for], img, .no-touch-callout { -webkit-touch-callout: none; /* désactive le menu contextuel long-press */ -webkit-user-select: none; /* désactive la sélection */ user-select: none; -webkit-user-drag: none; /* désactive le drag (et donc le preview) */ -webkit-tap-highlight-color: transparent; /* enlève le flash gris au tap */ touch-action: manipulation; /* supprime le délai 300ms et la zoom-double-tap */ } /* On laisse les inputs texte/textarea avec leur comportement natif (sélection ok) */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }