* injectés par ambient.js (80 dots animés). Si JS désactivé : on a * juste les 3 gradients de fond, c'est dégradable proprement. */ body[data-goulia-ambient] { position: relative; background: var(--bg); } body[data-goulia-ambient]::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; /* Halos pilotés par --halo-opacity (dark=0.33, light=0.18). * Les 3 gradients (primary/pink/cyan) suivent automatiquement le thème. */ background: radial-gradient(70% 50% at 80% 0%, color-mix(in srgb, var(--primary) calc(var(--halo-opacity) * 100%), transparent) 0%, transparent 60%), radial-gradient(50% 40% at 0% 60%, color-mix(in srgb, var(--pink) calc(var(--halo-opacity) * 80%), transparent) 0%, transparent 60%), radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--cyan) calc(var(--halo-opacity) * 80%), transparent) 0%, transparent 60%); } .gd-ambient-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .gd-ambient-stars > i { position: absolute; display: block; border-radius: 50%; /* fallback statique — ambient.js réécrit en inline via var(--star-color) */ background: var(--star-color, rgba(255, 255, 255, 0.5)); opacity: 0.5; will-change: opacity; } /* Le contenu principal doit passer au-dessus de l'ambient */ body[data-goulia-ambient] > :not(.gd-ambient-stars) { position: relative; z-index: 1; } /* ─── Eyebrow pill ────────────────────────────────────────────────────── */ .gd-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .gd-eyebrow--pink { color: var(--pink); border-color: color-mix(in srgb, var(--pink) 20%, transparent); } .gd-eyebrow--cyan { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 20%, transparent); } .gd-eyebrow--lime { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 20%, transparent); } .gd-eyebrow--amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 20%, transparent); } .gd-eyebrow--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } /* ─── Pulse dot (status indicator) ───────────────────────────────────── */ .gd-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 0 4px rgba(255, 77, 106, 0.2); animation: gd-pulse-dot 1.4s ease-in-out infinite; } .gd-dot--accent { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .gd-dot--cyan { background: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 25%, transparent); } .gd-dot--pink { background: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 25%, transparent); } .gd-dot--lime { background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 25%, transparent); } .gd-dot--success { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 25%, transparent); } /* ─── Spectrum text (gradient animé pink→primary→cyan) ──────────────── */ .gd-spectrum { background: linear-gradient(110deg, var(--pink) 0%, var(--accent) 45%, var(--cyan) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gd-shimmer 8s linear infinite; } .gd-spectrum--cool { background: linear-gradient(110deg, var(--cyan) 0%, var(--accent) 45%, var(--pink) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gd-shimmer 8s linear infinite; } .gd-spectrum--warm { background: linear-gradient(110deg, var(--lime) 0%, var(--cyan) 45%, var(--accent) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gd-shimmer 8s linear infinite; } /* ─── Lang badge (rond coloré avec code ISO 2 lettres) ───────────────── */ .gd-lang-badge { --c: var(--accent); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 14px -4px color-mix(in srgb, var(--c) 60%, transparent); font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); flex-shrink: 0; position: relative; } .gd-lang-badge--lg { width: 48px; height: 48px; font-size: 15px; } .gd-lang-badge--sm { width: 28px; height: 28px; font-size: 11px; } .gd-lang-badge--pink { --c: var(--pink); } .gd-lang-badge--cyan { --c: var(--cyan); } .gd-lang-badge--lime { --c: var(--lime); } .gd-lang-badge--amber { --c: var(--amber); } .gd-lang-badge--accent { --c: var(--accent); } /* Live indicator dot dans le coin du badge */ .gd-lang-badge--live::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #ff4d6a; border: 2px solid var(--bg-soft); animation: gd-pulse-dot 1.4s ease-in-out infinite; } /* ─── Buttons ─────────────────────────────────────────────────────────── */ .gd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 14px; border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white) 0%, var(--accent) 100%); color: #fff; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 34px -10px color-mix(in srgb, var(--accent) 75%, transparent); transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease; } .gd-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .gd-btn:active { transform: translateY(0); } .gd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .gd-btn--sm { padding: 10px 18px; font-size: 14px; border-radius: 10px; } .gd-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 14px; background: var(--surface); color: var(--text); font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; border: 1px solid var(--border); transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .gd-btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } .gd-btn-ghost:active { transform: scale(0.98); } .gd-btn-ghost--sm { padding: 10px 18px; font-size: 14px; border-radius: 10px; } /* ─── Card glass (panel frosté) ──────────────────────────────────────── */ .gd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); padding: 24px; } .gd-card--lg { padding: 32px; border-radius: 24px; } .gd-card--sm { padding: 16px; border-radius: 14px; } /* ─── Divider ─────────────────────────────────────────────────────────── */ .gd-divider { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 0; } /* ─── Flow step (item numéroté avec dot coloré) ─────────────────────── */ .gd-flow-step { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); } .gd-flow-step__n { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); padding-top: 2px; } .gd-flow-step__bullet { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 0 4px var(--accent-soft); margin-top: 6px; } .gd-flow-step__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .gd-flow-step__body { font-size: 14px; color: var(--text-soft, var(--muted)); margin-top: 3px; line-height: 1.45; } /* ─── Stat (chiffre + label uppercase) ──────────────────────────────── */ .gd-stat__value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(110deg, var(--pink), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .gd-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, var(--muted-2)); margin-top: 4px; } /* ─── Reduced motion : coupe toutes les animations décoratives ───────── */ @media (prefers-reduced-motion: reduce) { .gd-spectrum, .gd-spectrum--cool, .gd-spectrum--warm, .gd-dot, .gd-lang-badge--live::after, .gd-ambient-stars > i { animation: none !important; } }