:root {
    --white: #ffffff;
    --blue: #018adf;
    --dark-blue: #182032;
    --bg-dark: #0a0e17;
    --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
    --font-body: "Poppins", system-ui, -apple-system, sans-serif;
    --transition-smooth: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background-color: #050810;
    color: var(--white);
    font-family: var(--font-body);
    letter-spacing: -0.01em;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    /* Ne pas recouvrir le calque .site-bg (comme le fond dashboard) */
    background-color: transparent;
    color: var(--white);
    font-family: var(--font-body);
    letter-spacing: -0.01em;
    overflow-x: hidden;
    position: relative;
}

/* Titres principaux : Montserrat */
h1,
h2 {
    font-family: var(--font-heading);
}

/* Sous-titres et intertitres : Poppins (héritage body ; assurances explicites) */
h3,
h4,
h5,
h6 {
    font-family: var(--font-body);
}

/* Libellés « signature » / accroches de blocs (kickers, pied de page) : Montserrat */
.offers-kicker,
.workspace-kicker,
.help-hero-kicker,
.help-hero-card-kicker,
.footer-title,
.quote-result-tag,
.auth-header-title,
.error-page-kicker,
.help-toc-title {
    font-family: var(--font-heading);
}

.site-shell {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* Scrollbar globale (style HOKKO) */
* {
    scrollbar-width: thin;
    scrollbar-color: #018adf #182032;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #182032;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #23a4ef, #018adf);
    border-radius: 999px;
    border: 2px solid #182032;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #50b9f5, #23a4ef);
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1180px, 92vw);
    margin: 0 auto;
}

/* Fond site : halos « liquides » + traînée lumineuse (mouvement lent, style actuel) */
.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.site-bg-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 95% 75% at 8% 15%, rgba(1, 138, 223, 0.14), transparent 52%),
        radial-gradient(ellipse 85% 70% at 92% 8%, rgba(35, 164, 239, 0.11), transparent 48%),
        radial-gradient(ellipse 70% 55% at 50% 105%, rgba(24, 32, 50, 0.65), transparent 58%),
        linear-gradient(160deg, #060a12 0%, #0a1422 45%, #0b1630 100%);
}

.site-bg-flow {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.site-bg-flow-inner {
    display: block;
    width: 100%;
    height: 100%;
    filter: blur(76px);
    opacity: 0.92;
    will-change: border-radius, transform;
    animation: siteFlowMorph 32s ease-in-out infinite;
}

.site-bg-flow--1 {
    width: min(72vmin, 680px);
    height: min(72vmin, 680px);
    top: -18%;
    left: -14%;
    animation: siteFlowDrift1 52s ease-in-out infinite;
}

.site-bg-flow--1 .site-bg-flow-inner {
    background: radial-gradient(ellipse 62% 64% at 44% 42%, rgba(1, 138, 223, 0.4), transparent 71%);
    animation-duration: 28s;
    animation-delay: -2s;
}

.site-bg-flow--2 {
    width: min(62vmin, 560px);
    height: min(62vmin, 560px);
    bottom: -22%;
    right: -16%;
    animation: siteFlowDrift2 58s ease-in-out infinite;
    animation-delay: -12s;
}

.site-bg-flow--2 .site-bg-flow-inner {
    background: radial-gradient(ellipse 58% 60% at 52% 48%, rgba(35, 164, 239, 0.32), transparent 70%);
    animation-duration: 34s;
    animation-delay: -8s;
    opacity: 0.85;
}

.site-bg-flow--3 {
    width: min(48vmin, 440px);
    height: min(48vmin, 440px);
    top: 32%;
    left: 38%;
    animation: siteFlowDrift3 46s ease-in-out infinite;
    animation-delay: -20s;
}

.site-bg-flow--3 .site-bg-flow-inner {
    background: radial-gradient(ellipse 54% 56% at 48% 50%, rgba(132, 215, 255, 0.09), rgba(1, 138, 223, 0.15) 48%, transparent 72%);
    animation-duration: 38s;
    animation-delay: -14s;
    opacity: 0.75;
}

.site-bg-beam {
    position: absolute;
    width: 160%;
    height: 45%;
    top: 25%;
    left: -32%;
    background: linear-gradient(
        102deg,
        transparent 0%,
        rgba(1, 138, 223, 0.04) 38%,
        rgba(255, 255, 255, 0.06) 49%,
        rgba(35, 164, 239, 0.05) 58%,
        transparent 100%
    );
    filter: blur(48px);
    transform: rotate(-11deg);
    opacity: 0.65;
    animation: siteBeamSweep 24s ease-in-out infinite;
}

.site-bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 85% at 50% 45%, transparent 18%, rgba(2, 5, 11, 0.78) 100%);
    pointer-events: none;
}

@keyframes siteFlowMorph {
    0%, 100% { border-radius: 62% 38% 48% 52% / 52% 48% 55% 45%; }
    25% { border-radius: 42% 58% 62% 38% / 45% 55% 48% 52%; }
    50% { border-radius: 54% 46% 38% 62% / 58% 42% 51% 49%; }
    75% { border-radius: 48% 52% 44% 56% / 50% 50% 46% 54%; }
}

@keyframes siteFlowDrift1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    20% { transform: translate3d(5%, 3%, 0) scale(1.05) rotate(1.5deg); }
    45% { transform: translate3d(2%, -3%, 0) scale(0.97) rotate(-1deg); }
    70% { transform: translate3d(-4%, 2%, 0) scale(1.03) rotate(0.8deg); }
}

@keyframes siteFlowDrift2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    25% { transform: translate3d(-5%, 2%, 0) scale(1.04) rotate(-1.2deg); }
    50% { transform: translate3d(3%, 4%, 0) scale(0.98) rotate(1deg); }
    75% { transform: translate3d(4%, -2%, 0) scale(1.02) rotate(0.5deg); }
}

@keyframes siteFlowDrift3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(-3%, -4%, 0) scale(1.06); }
    66% { transform: translate3d(4%, 2%, 0) scale(0.95); }
}

@keyframes siteBeamSweep {
    0%, 100% { transform: rotate(-12deg) translate3d(-8%, 0, 0); opacity: 0.45; }
    50% { transform: rotate(-9deg) translate3d(10%, 2%, 0); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .site-bg-flow,
    .site-bg-flow-inner,
    .site-bg-beam {
        animation: none !important;
    }

    .site-bg-flow-inner {
        border-radius: 50%;
    }

    .site-bg-beam {
        opacity: 0.28;
    }
}