body {
            font-family: 'Inter', sans-serif;
            background-color: #F8FAFC;
            color: #111827;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* Fallback couleurs Bloomar si Tailwind met du temps à charger */
        :root {
            --bloomar-navy: #0B1232;
            --bloomar-violet: #7B2FF7;
            --bloomar-turquoise: #12C7B7;
            --bloomar-bg: #F8FAFC;
            --bloomar-text: #111827;
        }
        .text-bloomar-navy { color: var(--bloomar-navy); }
        .text-bloomar-violet { color: var(--bloomar-violet); }
        .text-bloomar-turquoise { color: var(--bloomar-turquoise); }
        .text-bloomar-text { color: var(--bloomar-text); }
        .bg-bloomar-navy { background-color: var(--bloomar-navy); }
        .bg-bloomar-violet { background-color: var(--bloomar-violet); }
        .bg-bloomar-turquoise { background-color: var(--bloomar-turquoise); }
        .bg-bloomar-bg { background-color: var(--bloomar-bg); }
        .border-bloomar-violet { border-color: var(--bloomar-violet); }
        .from-bloomar-navy { --tw-gradient-from: var(--bloomar-navy); }
        .to-bloomar-violet { --tw-gradient-to: var(--bloomar-violet); }

        /* Glassmorphism for light premium theme */
        .glass-header {
            background: rgba(248, 250, 252, 0.95);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(11, 18, 50, 0.06);
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(11, 18, 50, 0.08);
        }
        .glow-violet {
            box-shadow: 0 10px 40px -10px rgba(123, 47, 247, 0.12);
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #F8FAFC;
        }
        ::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 9999px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }
        .hover-lift {
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
        }
        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -15px rgba(11, 18, 50, 0.12);
        }
        
        /* Section À propos — texte toujours net, sans couche floue */
        #propos {
            position: relative;
            z-index: 2;
            isolation: isolate;
        }
        .story-container {
            background-color: #0B1232;
            color: #ffffff;
        }
        .story-container.light-mode {
            background-color: #ffffff;
            color: #111827;
        }
        .story-container.light-mode h2,
        .story-container.light-mode h3 {
            color: #7B2FF7;
        }
        .story-block {
            opacity: 1;
            transform: none;
            margin-bottom: 4rem;
        }
        .story-block:last-child {
            margin-bottom: 0;
        }
        
        /* Chat Typing Indicator animation */
        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #7B2FF7;
            border-radius: 50%;
            display: inline-block;
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1.0); }
        }

        /* Logo Bloomar ONE — fond fusionné avec le site */
        .bloomar-logo-link {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }
        .bloomar-logo {
            display: block;
            height: auto;
            object-fit: contain;
            image-rendering: -webkit-optimize-contrast;
        }
        .bloomar-logo--header {
            width: clamp(148px, 18vw, 200px);
            max-height: 52px;
        }
        .bloomar-logo--footer {
            width: clamp(160px, 20vw, 220px);
            max-height: 56px;
            filter: brightness(1.05) contrast(1.02);
        }
        .bloomar-logo--hero {
            width: clamp(220px, 42vw, 340px);
            max-height: 88px;
        }