/* Devissalles (privés) - Override des palettes pour le theme-full.css partagé. Charger APRÈS shared/theme-full.css (qui définit les valeurs violet/pink/ peach/mint d'origine SOS-DJ). On redéfinit ces vars en palette tout-en-chaud : rose (primaire) + corail rouge + orange + rose pâle, alignée sur le tailwind.config.js de l'app pour rester cohérente entre les classes Tailwind hardcodées et les CSS vars du shared theme. Les noms de variables restent inchangés pour ne pas casser le CSS partagé. Mode clair / sombre : la palette de marque (violet/pink/peach/mint) reste identique dans les deux modes — c'est l'identité visuelle. Seules les variables de surfaces (--bg, --surface, --line, …) basculent. Le mode est piloté par la classe `.dark` posée sur par shared/theme.js. */ :root { /* === Palette principale (était violet → devient ROSE). === */ --violet-50: #FDF2F8; --violet-100: #FCE7F3; --violet-200: #FBCFE8; --violet-300: #F9A8D4; --violet-400: #F472B6; --violet-500: #EC4899; --violet-600: #DB2777; --violet-700: #BE185D; --violet-800: #9D174D; --violet-900: #831843; --violet-950: #500724; /* === Accent 1 (était pink → devient CORAIL/RED, sœur chaude du rose). === */ --pink-300: #FDA4AF; --pink-400: #FB7185; --pink-500: #F43F5E; --pink-600: #E11D48; /* === Accent 2 (était peach → ORANGE chaud). === */ --peach-300: #FDBA74; --peach-400: #FB923C; --peach-500: #F97316; /* === Accent 3 (mint → ROSE pâle, cohérence chromatique). === */ --mint-300: #F9A8D4; --mint-400: #F472B6; } /* Variables génériques de la plateforme (pour les composants partagés). */ :root { --brand-50: #FDF2F8; --brand-100: #FCE7F3; --brand-500: #EC4899; --brand-600: #DB2777; --brand-700: #BE185D; --accent-1: #FB923C; --accent-2: #F472B6; /* === Surfaces — mode CLAIR === */ /* Subtile teinte rose pour rester dans l'identité de marque. */ --bg: #FFF7FA; --bg-soft: #FCE7F3; --surface: #FFFFFF; --surface-2: #FDF2F8; --text: #500724; --text-soft: #9D174D; --line: rgba(190, 24, 93, 0.10); --line-strong: rgba(190, 24, 93, 0.18); } /* === Surfaces — mode SOMBRE (héritage du look d'origine, légère teinte rose). === */ .dark { --bg: #0D070A; --bg-soft: #1A0F14; --surface: #201319; --surface-2: #2C1C24; --text: #FDF2F8; --text-soft: #F9A8D4; --line: rgba(249, 168, 212, 0.10); --line-strong: rgba(249, 168, 212, 0.20); } /* === Override des couleurs hardcodées du theme-full.css partagé pour la barre de recherche de la homepage — uniquement en mode sombre. Le mode clair hérite du styling de theme-full.css (qui utilise les vars de surface ci-dessus, donc reste cohérent en rose). === */ .dark .search-shell { background: rgba(44, 28, 36, 0.65); box-shadow: 0 1px 0 rgba(249, 168, 212, 0.10) inset, 0 30px 80px -20px rgba(236, 72, 153, 0.30), 0 12px 30px -10px rgba(251, 146, 60, 0.15); } .dark .search-shell:focus-within { box-shadow: 0 1px 0 rgba(249, 168, 212, 0.12) inset, 0 0 0 6px rgba(244, 114, 182, 0.18), 0 40px 80px -20px rgba(236, 72, 153, 0.4); } .dark .search-suggestions { background: rgba(26, 15, 20, 0.92); border-color: rgba(249, 168, 212, 0.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -10px rgba(236, 72, 153, 0.4); } .dark .search-suggestion:hover, .dark .search-suggestion.is-highlighted { background: linear-gradient(110deg, rgba(236, 72, 153, 0.22), rgba(251, 146, 60, 0.16)); } @media (max-width: 640px) { .dark .search-suggestions { box-shadow: 0 12px 30px -10px rgba(236, 72, 153, 0.28), 0 0 0 1px rgba(236, 72, 153, 0.06); } .dark .search-suggestion:active { background: linear-gradient(110deg, rgba(236, 72, 153, 0.16), rgba(251, 146, 60, 0.12)); } } .dark .search-mobile-shell:focus-within { box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.18); } /* === CTA cross-app : invite à basculer vers DevisSalles Pro depuis la home particuliers. Couleurs alignées sur la palette de marque de l'app (rose ici), via les vars --brand-* / --accent-1. === */ .cross-app-cta { display: flex; align-items: center; gap: 0.85rem; width: 100%; max-width: 36rem; margin-left: auto; margin-right: auto; padding: 0.85rem 1.35rem; border-radius: 9999px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 9%, var(--surface)), color-mix(in srgb, var(--accent-1) 6%, var(--surface))); border: 1px solid var(--line-strong); color: var(--text); text-align: left; text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; } .cross-app-cta:hover, .cross-app-cta:focus-visible { transform: translateY(-1px); border-color: var(--brand-500); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 14%, var(--surface)), color-mix(in srgb, var(--accent-1) 10%, var(--surface))); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 30px -14px color-mix(in srgb, var(--brand-500) 45%, transparent); outline: none; } .cross-app-cta__icon { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg, var(--brand-500), var(--accent-1)); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand-500) 50%, transparent); } .cross-app-cta__icon svg { width: 1.1rem; height: 1.1rem; } .cross-app-cta__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.35; } .cross-app-cta__title { font-weight: 600; font-size: 0.95rem; color: var(--text); } .cross-app-cta__sub { font-size: 0.825rem; color: var(--text-soft); } .cross-app-cta__arrow { flex: 0 0 auto; color: var(--brand-600); transition: transform .25s ease; } .cross-app-cta:hover .cross-app-cta__arrow, .cross-app-cta:focus-visible .cross-app-cta__arrow { transform: translateX(3px); } .dark .cross-app-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 16%, var(--surface)), color-mix(in srgb, var(--accent-1) 10%, var(--surface-2))); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; } .dark .cross-app-cta:hover, .dark .cross-app-cta:focus-visible { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 22%, var(--surface)), color-mix(in srgb, var(--accent-1) 14%, var(--surface-2))); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 18px 36px -12px color-mix(in srgb, var(--brand-500) 55%, transparent); } @media (max-width: 480px) { .cross-app-cta { padding: 0.75rem 1.1rem; gap: 0.7rem; border-radius: 1.25rem; } .cross-app-cta__title { font-size: 0.9rem; } .cross-app-cta__sub { font-size: 0.78rem; } .cross-app-cta__icon { flex-basis: 2rem; width: 2rem; height: 2rem; } } /* === Cartes « options » en mode sombre. Le HTML partagé utilise des gradients `peach + mint` / `pink + peach` (hérités de SOS-DJ) qui, avec la palette tout-en-chaud de devissalles (peach=orange, mint=rose foncé), virent au rouge brique en dark et donnent l'impression d'un état d'erreur. On les ramène sur la palette rose de marque, plus subtile. Le mode clair n'est pas modifié. Concerne : blocs traiteur/DJ optionnels (étape Budget & options) et cartes du récap final (étape de confirmation). === */ .dark .card[class*="dark:from-peach-900"][class*="dark:to-mint-900"], .dark .card[class*="dark:from-pink-900"][class*="dark:to-peach-900"], .dark .card[class*="dark:from-peach-900"][class*="dark:to-pink-900"], .dark .card[class*="dark:from-mint-900"][class*="dark:to-peach-900"] { background-image: linear-gradient(135deg, rgba(157, 23, 77, 0.18), rgba(80, 7, 36, 0.22)); border-color: rgba(249, 168, 212, 0.16); }