/* ========================================================================= theme-vitrine.css — thème "spatial" des pages vitrine (accueil, créations, portfolio) : remplace l'identité claire/sombre ivoire-espresso du reste du site par deux thèmes, sur le même bouton clair/sombre existant (aucun nouveau sélecteur, aucun changement de mécanisme) : - Planète (clair) : ciel pastel (rose/bleu/lavande), verre blanc. - Stellaire (sombre) : nuit spatiale étoilée, verre sombre. Chargé APRÈS base.css sur les pages qui portent (voir $page['body_class'] dans head.php). Comme le reste du CSS du site consomme déjà ces mêmes jetons (--bg-color, --card-bg, --accent-color…) et que --nav-bg/--submenu-bg ont déjà leur backdrop-filter (shared-nav.css), les redéfinir ici suffit à retinter toute la page — nav comprise — sans toucher aux règles de composants. Ne s'applique JAMAIS à /jeux/*, /overlays/*, ni à l'admin (thème séparé dans shared-admin.css) : ces pages n'ont pas cette classe sur . */ body.theme-vitrine { /* --- Planète (clair, par défaut) --- Un vrai ciel pastel (rose poudré / bleu ciel / lavande), pas un blanc à peine teinté : la première version passait pour "juste du blanc", ces halos sont volontairement plus larges et plus opaques pour que la couleur se voie vraiment, tout en restant doux (jamais saturé). */ --bg-color: #EAE7F6; --bg-elevated: #FDFBFF; --card-bg: rgba(255, 255, 255, 0.62); --submenu-bg: rgba(255, 255, 255, 0.88); --submenu-hover: rgba(90, 70, 160, 0.07); --nav-bg: rgba(255, 255, 255, 0.7); --text-color: #2A2145; --text-secondary: #746C99; --accent-color: #0E9C9C; --accent-soft: rgba(14, 156, 156, 0.12); --accent-warm: #9333EA; --accent-warm-soft: rgba(147, 51, 234, 0.12); --border-color: rgba(90, 70, 160, 0.16); --shadow-card: 0 20px 40px rgba(60, 40, 110, 0.12); /* Ciel pastel plutôt que les trois halos discrets du site normal : même mécanique (fond-derive, déjà défini dans base.css), mais des taches de couleur bien visibles — rose poudré, bleu ciel, lavande — qui se chevauchent doucement, comme une aurore vue depuis l'orbite. */ background-color: var(--bg-color); background-image: radial-gradient(130% 85% at 12% -15%, rgba(248, 195, 224, 0.55), transparent 62%), radial-gradient(120% 90% at 105% 10%, rgba(163, 201, 250, 0.5), transparent 60%), radial-gradient(140% 100% at 35% 115%, rgba(196, 181, 253, 0.5), transparent 62%), radial-gradient(90% 70% at 75% 65%, rgba(255, 255, 255, 0.4), transparent 60%); background-attachment: fixed; background-size: 130% 130%; animation: fond-derive 50s ease-in-out infinite alternate; } /* --- Stellaire (sombre) --------------------------------------------------- html.dark-mode (pas body.dark-mode) : theme-init.js pose la classe sur , voir base.css. Spécificité (0,2,2) > (0,2,1) de la règle de fond par défaut de base.css (:root:not(.dark-mode) body) : cette redéfinition gagne sans dépendre de l'ordre de chargement des feuilles. */ html.dark-mode body.theme-vitrine { --bg-color: #050110; --bg-elevated: #150E26; --card-bg: rgba(21, 14, 38, 0.55); --submenu-bg: rgba(21, 14, 38, 0.75); --submenu-hover: rgba(168, 85, 247, 0.14); --nav-bg: rgba(10, 6, 20, 0.55); --text-color: #F4ECFF; --text-secondary: #9C8AC2; --accent-color: #4CE0D2; --accent-soft: rgba(76, 224, 210, 0.15); --accent-warm: #E93CFF; --accent-warm-soft: rgba(233, 60, 255, 0.14); --border-color: rgba(168, 133, 255, 0.20); --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.5); /* Vrai fond étoilé, fixe (pas de dérive : une nuit spatiale ne bouge pas comme une lueur d'atmosphère) — mêmes coordonnées que /creations/planning et la console admin, pour la même identité. */ background-image: radial-gradient(1.6px 1.6px at 8% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 68%, #fff, transparent), radial-gradient(1.4px 1.4px at 38% 24%, rgba(255, 255, 255, .85), transparent), radial-gradient(1px 1px at 55% 82%, #fff, transparent), radial-gradient(1.6px 1.6px at 72% 15%, rgba(168, 85, 247, .9), transparent), radial-gradient(1.2px 1.2px at 85% 55%, #fff, transparent), radial-gradient(1.4px 1.4px at 92% 88%, rgba(233, 60, 255, .85), transparent), radial-gradient(1px 1px at 12% 92%, #fff, transparent), radial-gradient(1.3px 1.3px at 65% 40%, #fff, transparent), radial-gradient(120% 60% at 15% -10%, rgba(168, 85, 247, 0.20), transparent 60%), radial-gradient(110% 60% at 100% 10%, rgba(76, 224, 210, 0.10), transparent 55%), radial-gradient(120% 70% at 90% 110%, rgba(233, 60, 255, 0.14), transparent 60%); background-size: auto; animation: none; } /* .btn-primary (base.css) est pensé pour l'accent bleu du site, assez sombre pour du texte blanc — le cyan clair de Stellaire ne l'est pas : sans ce correctif, les boutons principaux deviendraient illisibles. */ html.dark-mode body.theme-vitrine .btn-primary { color: var(--bg-color); }