/* Variables */
:root {
    --ap: #000000;
    --ap-accent: #060606;
    --ap-accent-002: #040404;
}

html, body {
    min-height: 95vh;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 70% 50%,
            #0f0c24 0%,
            #03040c 60%
        ),
        #03040c;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding-bottom: 64px;
    padding: 0;
}

nav {
    position: absolute;
    height: 92px;
    width: 100%;
    z-index: 2;

    backdrop-filter: blur(16px) brightness(80%);

    border-bottom: none;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav section:first-of-type {
    margin-left: 32px;
}

nav section:last-of-type {
    margin-right: 32px;
}

nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        to right,
        transparent 0%,
        #7b7d7e0d 5%,
        #7b7d7e59 50%,
        #7b7d7e0d 95%,
        transparent 100%
    );

    pointer-events: none;
}

nav.lander {
    backdrop-filter: none;
    user-select: none;
}

nav.lander::after {
    background: transparent;
}

nav.lander ul li:hover {
    background: transparent;
}

#marque {
    height: 24px;
}

#navigation ul, footer ul {
    display: flex;
    gap: 32px;
}

footer {
    margin-top: auto;

    width: 100%;
    min-height: 32px;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 16px 24px;
    box-sizing: border-box;
}

footer ul {
    display: flex;
    gap: 24px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#press-kit-index a {
    padding: 16px 24px;

    border: 1px solid transparent;
    border-radius: 12px;
}

#compte ul {
    display: flex;
    gap: 8px;
}

nav ul {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    position: relative;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;

    overflow: hidden; /* THIS is essential */
}

/* BASE GLOW LAYER */
nav ul li::before {
    content: "";
    position: absolute;
    inset: -40px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;

    background: radial-gradient(
        circle at top,
        var(--hover-1, #5d58580a) 0%,
        var(--hover-2, #ffffff31) 40%,
        transparent 70%
    );
}

nav.lander ul li::before {
    content: "";
    position: absolute;
    inset: 0px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    background: transparent;
}

/* HOVER TRIGGER */
nav ul li:hover::before {
    opacity: 1;
    z-index: inherit;
}

#hover-plugins {
    --hover-1: rgba(255, 107, 236, 0.22);
    --hover-2: rgba(255, 107, 236, 0.06);
    --glow-pos: 20% 0%;
}

#hover-bundles {
    --hover-1: rgba(242, 181, 22, 0.22);
    --hover-2: rgba(242, 181, 22, 0.06);
    --glow-pos: 80% 0%;
}

#hover-presets {
    --hover-1: rgba(90, 147, 246, 0.22);
    --hover-2: rgba(90, 147, 246, 0.06);
    --glow-pos: 50% 0%;
}

#hover-luts {
    --hover-1: rgba(120, 255, 210, 0.18);
    --hover-2: rgba(120, 255, 210, 0.05);
    --glow-pos: 30% 100%;
}

#hover-dctls {
    --hover-1: rgba(160, 110, 255, 0.22);
    --hover-2: rgba(160, 110, 255, 0.06);
    --glow-pos: 70% 100%;
}

#hover-scripts {
    --hover-1: rgba(255, 140, 90, 0.20);
    --hover-2: rgba(255, 140, 90, 0.05);
    --glow-pos: 50% 100%;
}

nav ul li:hover {
    transform: translateY(-1px);
}

nav.lander ul li:hover {
    transform: none;
}

#champ-chercher {
    width: 192px;
    display: flex;
    flex-wrap: nowrap;
    background-color: #06070e;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #7b7d7e0d;
    border-radius: 32px;
    gap: 8px;
    padding: 0px 16px;
    margin-right: 32px;
}

#champ-texte {
    /* font-family: "Space Grotesk", sans-serif;
    font-weight: 900; */
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: #ff4db6;
    gap: 12px;
    font-size: 24px;
    transition: .33s ease-in-out;
    cursor: auto;
    text-wrap: nowrap;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ap-accent)
}

*::-webkit-scrollbar {
    max-height: 8px;
    max-width: 8px;
    background-color: var(--ap-accent);
    
    cursor: none;
}

*::-webkit-scrollbar-track {
    max-height: 8px;
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
    max-height: 8px;
    border-radius: 8px;
    background-clip: border-box;
    background-color: var(--ap-accent);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--ap-accent-002);
}

/* URLs */

a {
    height: auto;
    background-color: transparent;
    color: white;
    text-decoration: none;
    
    cursor: pointer !important;
    transition: color ease-in-out .25s, outline ease-in-out .25s;
}

a:focus-visible, button:focus-visible {
    outline: none;
}

a:-webkit-any-link {
    text-decoration: none;
}

/* Selected (Highlighted) Text */

::-moz-selection { /* Code for Firefox */
    background: #1818188b;
    color: white;
}

::selection {
    background: #1818188b;
    color: white;
}


main {
    width: 100%;
}

#hero {
    padding: 64px;
    width: 90%;
    text-align: center;
    display: flex;
    justify-content: center;
}

#hero p {
    font-size: 64px;
}

#hero h1 {
    color: #F1F1F1;
    font-family: "Cal Sans", sans-serif;
    font-size: 128px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.legal-section {
    width: 100%;
    justify-content: flex-start;
}

.legal-section#merci h3 {
    justify-content: center;
    text-align: center;
}

.legal-section ul, .legal-section ul li {
    list-style: inside;
    text-align: left;
}

#hero h2, .legal-section h3 {
    color: #F1F1F1;
    font-family: "Cal Sans", sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}

.legal-section h3 {
    text-align: left;
    font-size: 32px;
}

.legal-section p, .legal-section li {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    color: #F1F1F1;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0;
    padding: 0;
}

.legal-section li {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1;
}

/* GRADIENT TEXT (CORE EFFECT) */
#ita {
    font-family: "Cal Sans", sans-serif;
    font-size: 128px;

    background: linear-gradient(
        90deg,
        #FF6BEC -5%,
        #F2B516 125%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;

    /* slight refinement so it doesn't feel "harsh digital" */
    filter: saturate(1.05);
}

#doc-texte #hero {
    height: 100%;
}

p, li {
    color: #F1F1F1;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    list-style: none;
}

#modal-launching-soon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(48px);
}

#modal-launching-soon #ap {
    z-index: 99;
    width: 92.5%;
    height: 90%;
    border-radius: 64px;
    border: 1px solid #7b7d7e2b;
    background-color: #F1F1F10b;
}


#modal-launching-soon #ap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#modal-launching-soon #ap h1 {
    font-size: 64px;
}

/* CLOSE BUTTON (top-left, minimal, premium) */
.modal-close {
    position: absolute;
    top: 18px;
    left: 18px;

    width: 34px;
    height: 34px;
    z-index: 9;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;

    color: rgba(255,255,255,0.75);
    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    transition: all 0.25s ease;
}

/* hover = subtle light lift (not flashy) */
.modal-close:hover,
.modal-close:focus-visible {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.95);
    transform: scale(1.05);
}

/* optional: active state restraint */
.modal-close:active {
    transform: scale(0.98);
}

#modal-launching-soon {
    display: none;
}









/* PREMIUM DIAMOND */

#champ-texte img {
    width: 22px;
    height: 22px;

    transition:
        transform .7s cubic-bezier(.22,1,.36,1),
        filter .9s cubic-bezier(.22,1,.36,1);

    filter:
        brightness(1)
        drop-shadow(0 0 0 rgba(234,132,192,0));

    transform-origin: center;
}

/* HOVER */
#champ-texte:hover img {
    transform: scale(1.08) rotate(-6deg);
    filter:
        brightness(1.2) drop-shadow(0 0 16px rgba(234,132,192,.2)
    );
}
#champ-texte:hover {
    filter: drop-shadow(0 0 16px rgba(234,132,192,.33));
    transition: .33s ease-in-out;
}

#champ-texte:hover img {
    animation: sparkle .9s ease;
}


#hero-lander {
    width: 100%;
    min-height: calc(92vh - 92px);

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 48px;
    box-sizing: border-box;

    gap: 24px;

    position: relative;
    overflow: clip;
}

/* OG */
/* #hero-lander {
    padding: 32px;
    text-align: left;
    width: 44%;
    user-select: none;
} */

/* LEFT */
#lander-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* ==========================================
   RIGHT HERO — REFERENCE MATCH
========================================== */


/* Right hero — fixed to its half, never moves */
#lander-right {
    position: absolute;
    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 820px;
    height: 760px;

    pointer-events: none;
    z-index: 1;

    overflow: hidden;
    contain: layout paint;
}

/* Step 2 overrides — no longer needed, remove */
.onboard-step[data-step="2"] #hero-signup,
.onboard-step[data-step="2"] .hero-signup {
    all: unset;
}

/* ----------------------------------
   CENTRAL AMBIENT GLOW
---------------------------------- */

#lander-right::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,150,90,.09) 0%,
            rgba(155,100,255,.06) 26%,
            rgba(30,15,60,.03) 48%,
            transparent 72%
        );

    filter: blur(55px);
    opacity: .9;
}

/* ----------------------------------
   STAR PARTICLES
---------------------------------- */

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;

    opacity: .75;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.24) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,170,120,.12) 1px, transparent 2px),
        radial-gradient(circle, rgba(180,120,255,.08) 1px, transparent 2px);

    background-size:
        26px 26px,
        70px 70px,
        120px 120px;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,.85) 42%,
            transparent 78%
        );

    animation:
        particleDrift 20s linear infinite;
}

@keyframes particleDrift {
    0%, 100% {
        background-position:
            0 0,
            0 0,
            0 0;
    }

    50% {
        background-position:
            0 -26px,
            0 -70px,
            0 -120px;
    }
}

/* ----------------------------------
   ORBIT RINGS
---------------------------------- */

.orbit {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    border-radius: 999px;

    border:
        1px solid rgba(255,255,255,.035);

    box-shadow:
        inset 0 0 30px rgba(255,255,255,.015),
        0 0 40px rgba(140,110,255,.03);

    overflow: hidden;

    animation:
        orbitPulse 10s ease-in-out infinite;
}

.orbit::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(255,160,90,.06),
            transparent,
            rgba(160,110,255,.05),
            transparent
        );

    filter: blur(12px);

    animation:
        orbitRotate 18s linear infinite;
}

@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitPulse {
    0%,100% {
        opacity: .55;
    }

    50% {
        opacity: .9;
    }
}

.orbit-dots {
    position: absolute;
    left: 50%;
    top: 50%;

    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* tiny glowing nodes */
.orbit-dots::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background:
        radial-gradient(circle,
            rgba(255,255,255,.8) 0px,
            rgba(255,255,255,.75) 1.4px,
            transparent 2px
        );

    background-size: 26px 26px;

    mask-image:
        radial-gradient(circle, transparent 96%, black 97%);

    opacity: .4;

    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.14))
        drop-shadow(0 0 12px rgba(255,160,90,.08));

    animation:
        dotPulse 6s ease-in-out infinite;
}

.orbit-dots-1 {
    width: 220px;
    height: 220px;
}

.orbit-dots-2 {
    width: 360px;
    height: 360px;
}

.orbit-dots-3 {
    width: 520px;
    height: 520px;
}

.orbit-dots-4 {
    width: 120px;
    height: 320px;
}

.orbit-dots-5 {
    width: 220px;
    height: 920px;
}

.orbit-dots-6 {
    width: 220px;
    height: 420px;
}

@keyframes dotPulse {
    0%,100% {
        opacity: .25;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(1.02);
    }
}


.orbit-1 {
    width: 180px;
    height: 180px;
}

.orbit-2 {
    width: 300px;
    height: 300px;
}

.orbit-3 {
    width: 440px;
    height: 440px;
}

.orbit-4 {
    width: 610px;
    height: 610px;
}

/* LES ÉTOILLES */

.stars {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.5), transparent),
        radial-gradient(2px 2px at 80% 65%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.5), transparent),
        radial-gradient(2px 2px at 55% 50%, rgba(255,255,255,.6), transparent);

    opacity: .45;

    animation: starsDrift 20s linear infinite;
}

@keyframes starsDrift {
    0%, 100% {
        background-position: 0 0;
    }

    50% {
        background-position: 0 -120px;
    }
}

/* ----------------------------------
   CURVED CONNECTIONS
---------------------------------- */

.hero-lines {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.hero-lines path {
    fill: none;

    stroke: rgba(140,110,255,.12);
    stroke-width: 1.2;

    filter:
        drop-shadow(
            0 0 10px rgba(130,90,255,.06)
        );
}

/* ----------------------------------
   CENTER LOGO
---------------------------------- */

#resolve-center {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 0px;
    height: 0px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 20;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,.08),
            rgba(255,255,255,.0)
        );

    border: 1px solid rgba(255,255,255,.06);

    backdrop-filter: blur(32px);

    box-shadow:
        0 0 80px rgba(255,120,70,.14),
        0 0 180px rgba(180,100,255,.12),
        inset 0 0 40px rgba(255,255,255,.02);

    animation:
        centerMotion 10s cubic-bezier(.445,.05,.55,.95) infinite;
}

#resolve-center::before {
    content: "";
    position: absolute;
    inset: -180px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,140,80,.12),
            rgba(160,110,255,.08),
            transparent 65%
        );

    filter: blur(70px);

    animation:
        centerAura 8s ease-in-out infinite;
}

@keyframes centerAura {
    0%,100% {
        opacity: .55;
        transform: scale(.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes centerPulse {
    0%,100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.035);
    }
}

@keyframes ambientBreath {
    0%,100% {
        opacity: .55;
        transform: scale(.96);
    }

    50% {
        opacity: .95;
        transform: scale(1.12);
    }
}

@keyframes centerFloat {
    0%,100% {
        transform:
            translate(-50%, -50%)
            translateY(0px);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-6px);
    }
}

@keyframes centerMotion {
    0%,100% {
        transform:
            translate(-50%, -50%)
            translateY(0px)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-6px)
            scale(1.035);
    }
}

/* soft lens light */
#resolve-center::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(255,255,255,.12),
            transparent 75%
        );

    pointer-events: none;
}

#resolve-center img {
    width: 92px;
    z-index: 2;
}

/* ----------------------------------
   FLOATING CIRCLES
---------------------------------- */

.hero-node {
    position: absolute;

    width: 96px;
    height: 96px;

    border-radius: 999px;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 4;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,255,255,.08),
            rgba(255,255,255,.015)
        );

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(22px);

    box-shadow:
        inset 0 0 18px rgba(255,255,255,.02),
        0 0 60px rgba(160,120,255,.05);

    animation:
        nodeGlow 5s ease-in-out infinite;
}

@keyframes nodeGlow {
    0%,100% {
        box-shadow:
            inset 0 0 20px rgba(255,255,255,.03),
            0 0 40px rgba(160,120,255,.05);
    }

    50% {
        box-shadow:
            inset 0 0 24px rgba(255,255,255,.05),
            0 0 80px rgba(255,140,80,.12);
    }
}

/* @keyframes nodeFloat {
    0%,100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
} */

/* OUTER ORBITAL RING */
.hero-node::before {
    content: "";
    position: absolute;
    inset: -14px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.045);

    animation:
        ringPulse 5s ease-in-out infinite;
}

/* ICON */
.hero-node img {
    width: 48px;
    opacity: .92;
    filter:
        drop-shadow(0 0 14px rgba(255,255,255,.18));
}



/* ----------------------------------
   POSITIONS
---------------------------------- */

.top-left {
    left: 180px;
    top: 140px;
    animation-delay: 0s;
    outline: 1px solid #ea66cb6b;
}

.bottom-left {
    left: 180px;
    bottom: 150px;
    animation-delay: 1.2s;
    outline: 1px solid #03ecde6b;
}

.top-right {
    right: 185px;
    top: 150px;
    animation-delay: 2.1s;
    outline: 1px solid #eb861f6b;
}

.middle-right {
    right: 80px;
    top: calc(50% - 48px);
    transform: translateY(-50%);
    animation-delay: 2.8s;
    outline: 1px solid #eda8ee6b;
}

.bottom-right {
    right: 210px;
    bottom: 150px;
    animation-delay: .7s;
    outline: 1px solid #d8a1076b;
}

/* ==========================================
   RESOLVE PAGE COLOURS
========================================== */

/* MEDIA — blue */
.top-left img {
    filter:
        invert(71%)
        sepia(43%)
        saturate(1250%)
        hue-rotate(195deg)
        brightness(1.08)
        drop-shadow(0 0 14px rgba(70,170,255,.28));
}

/* EDIT — green */
.bottom-left img {
    filter:
        invert(83%)
        sepia(35%)
        saturate(1700%)
        hue-rotate(50deg)
        brightness(1.16)
        drop-shadow(0 0 14px rgba(110,255,120,.24));
}

/* COLOUR — orange/red */
.top-right img {
    filter:
        invert(67%)
        sepia(90%)
        saturate(2200%)
        hue-rotate(-12deg)
        brightness(1.08)
        drop-shadow(0 0 14px rgba(255,130,70,.28));
}

/* FUSION — purple */
.middle-right img {
    filter:
        invert(62%)
        sepia(54%)
        saturate(2307%)
        hue-rotate(165deg)
        brightness(1.34)
        drop-shadow(0 0 14px rgba(180,110,255,.28));
}

/* FAIRLIGHT — amber */
.bottom-right img {
    filter:
        invert(82%)
        sepia(88%)
        saturate(1700%)
        hue-rotate(8deg)
        brightness(1.08)
        drop-shadow(0 0 14px rgba(255,190,80,.24));
}

@keyframes nodePulse {
    0%,100% {
        transform: scale(1);
        box-shadow:
            inset 0 0 18px rgba(255,255,255,.02),
            0 0 40px rgba(160,120,255,.04);
    }

    50% {
        transform: scale(1.06);
        box-shadow:
            inset 0 0 18px rgba(255,255,255,.03),
            0 0 90px rgba(255,150,90,.10);
    }
}

@keyframes ringPulse {
    0%,100% {
        opacity: .3;
        transform: scale(1);
    }

    50% {
        opacity: .75;
        transform: scale(1.08);
    }
}

#hero-lander p, #hero-signup p {
    /* font-family: "Elms Sans", sans-serif; */
    /* font-family: "Open Sans", sans-serif; */
    /* font-family: "Nunito", sans-serif; */
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    color: #bbbbc0;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 1.4;
    text-align: left;
    margin: 0;
}

#hero-lander p#texte-sous, #hero-signup p#texte-sous {
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    color: #bbbbc0;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .2;
    text-align: left;
    margin: 0;
    text-align: center;
    margin-top: 4px;

    animation:
        textRevealSous 3.9s
        ease-in-out
        forwards;
}

#hero-lander p#texte-avertissement, #hero-signup p#texte-avertissement {
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    color: #bbbbc099;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 3%;
    text-align: left;
    margin: 0;
    margin-top: 3px;
    text-align: center;
}

/* LINKS */
p a,
footer a {
    position: relative;
    display: inline-block;
    color: white;
    text-decoration: none;
}

/* GRADIENT UNDERLINE */
p a::after,
footer a::after,
.sous-ligne-animé a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        to right,
        #d73e89,
        #ff8336
    );

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

/* HOVER + TAB FOCUS */
p a:hover::after,
footer a:hover::after,
p a:focus-visible::after,
footer a:focus-visible::after,
.sous-ligne-animé a:focus-visible::after {
    transform: scaleX(1);
}

footer:has(a:hover) a:not(a:hover),
footer:has(a:focus-visible) a:not(a:focus-visible),
.sous-ligne-animé:has(a:focus-visible) a:not(a:focus-visible),
.sous-ligne-animé:has(a:focus-visible) a:not(a:focus-visible) {
    color: #F1F1F12b;
}

footer a:hover,
.sous-ligne-animé a:hover {
    color: #F1F1F1;
}

/* subtle text polish */
p a:hover,
.sous-ligne-animé a:hover {
    opacity: .96;
}

#hero-lander h1,
#hero-signup h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    color: #F1F1F1;
    font-size: 92px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0;

    text-rendering: geometricPrecision;
}

/* Chrome / Edge / Chromium */
@supports (-webkit-appearance: none) {
    #hero-lander h1,
    #hero-signup h1 {
        font-weight: 500;
        letter-spacing: -0.028em;
    }
}

#hero-signup h1 {
    text-wrap: nowrap;
}

#hero-lander h2, .modal-droite h2, #hero-signup h2, .modal-droite h2 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    color: #F1F1F1;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0;
}

#hero-lander h2 {
    text-wrap: nowrap;
}

.modal-droite h2 {
    font-size: 32px;
}

#lander-left {
    display: flex;
    flex-direction: column;
    
}

.texte-gradient {
    background: linear-gradient(
        to right,
        #d73e89 0%,
        #ff8336 90%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

#hero-lander button, #hero-signup button {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    width: 80%;
    padding: 16px 24px;

    border: 1px solid transparent;
    border-radius: 12px;

    background:
        linear-gradient(#080912, #080912) padding-box,
        linear-gradient(
            to right,
            #d73e89 0%,
            #ff8336 80%
        ) border-box;

    color: white;
    font-family: "Cal Sans", sans-serif;
    font-size: 20px;
    align-self: center;

    cursor: pointer;

    box-shadow: 0 0px 48px #7a2d296b,
    inset 0px 0px 24px #eb498c2b;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1),
        filter .35s ease;
}

/* GRADIENT FILL */
#hero-lander button::before, #hero-signup button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;

    background: linear-gradient(
        to right,
        #d73e89 0%,
        #ff8336 80%
    );

    opacity: 0;
    transition: opacity .45s ease;
}

#hero h1 {
    margin-bottom: 8px;
}

.contaneur-des-liens {
    display: flex;
    justify-content: center;
    gap: 32px;
}

#liens {
    width: 50%;
}

/* HOVER */
#hero-lander button:hover,
#hero-lander button:focus-visible,
#hero-signup button:hover,
#hero-signup button:focus-visible {
    /* transform: translateY(-2px); */
    filter: brightness(1.08);

    box-shadow:
        0 10px 28px rgba(234,132,192,.18);
}


/* reveal fill */
#hero-lander button:hover::before,
#hero-lander button:focus-visible::before,
#hero-signup button:hover::before,
#hero-signup button:focus-visible::before {
    opacity: 1;
}

/* CLICK */
#hero-lander button:active, #hero-signup button:active {
    transform: scale(.99);
    transition-duration: 1s;
}

#perks {
    width: 50%;
    padding: 8px;
    /* background-color: #02050f6b; */
    /* border: 1px solid #F1F1F10b; */
    border-radius: 8px;
    margin: 24px 0px;
    backdrop-filter: blur(4px);
    /* background-color: purple; */
}

#perks .row {
    margin-bottom: 8px;
    border: 1px solid #F1F1F10b;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    backdrop-filter: blur(12px);
}

#perks .row .droite {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    /* background-color: purple; */
}

#perks .titre {
    margin-top: 8px;
    color: #F1F1F1;
    font-family: "Cal Sans", sans-serif;
    font-size: 24px;
    line-height: 1;
    /* letter-spacing: .9px; */
    text-align: left;
    /* background-color: green; */
}

#perks .desc {
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #bbbbc0;
    text-align: left;
    /* background-color: yellow; */
}

.icone img {
    width: 72px;
    height: 72px;
    padding: 8px;
    filter: invert(100%);
}

#bg {
    position: absolute;
    filter: blur(12px) brightness(115%);
    margin-top: -12px;
}

#bg-loader {
    position: absolute;
    filter: blur(12px) brightness(115%);
}

#main {
    z-index: 2;
    margin-top: -12px !important;
}

/* LOGO LINK */
.a-focus, .a-hover {
    position: relative;
    display: inline-flex; /* important */
    width: fit-content;   /* only as wide as logo */
}

/* underline */
.a-focus::after,
.a-hover::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -6px; /* tweak spacing */

    width: 100%;
    height: 2px;

    background: linear-gradient(
        to right,
        #d73e89,
        #ff8336
    );

    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

/* avec keyboard focus */
.a-focus:focus-visible::after {
    transform: scaleX(1);
}

/* sur hover */
.a-hover:hover::after {
    transform: scaleX(1);
}











/* ==========================================
   MODAL — DAVINCI MARKET STYLE
========================================== */

.modal {
    display: none;
}

.modal.is-open {
    display: block;
}

/* OVERLAY */
.modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 32px;

    background:
        radial-gradient(
            circle at center,
            rgba(12,10,26,.35),
            rgba(2,4,12,.82)
        );

    backdrop-filter:
        blur(28px)
        brightness(.82);

    /* animation: modalFade .35s ease; */
}

.modal__overlay {
    animation: modalFade .35s ease forwards;
}

.modal__container {
    animation:
        modalIn .42s cubic-bezier(.22,1,.36,1) forwards;
}

/* CLOSE */
.modal.is-closing .modal__overlay {
    animation:
        modalFadeOut .35s ease forwards;
}

.modal.is-closing .modal__container {
    animation:
        modalOut .35s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes modalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(.96) translateY(16px);
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* CONTAINER */
.modal__container {
    position: relative;

    width: min(720px, 94vw);
    min-height: 620px;
    max-height: 80vh;

    overflow: hidden;

    border-radius: 40px;

    border: 1px solid #7b7d7e2b;

    background:
radial-gradient(
            circle at top left,
            rgba(215,62,137,.12),
            transparent 15%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255,131,54,.10),
            transparent 20%
        );

    backdrop-filter: blur(32px);

    box-shadow:
        0 0 80px rgba(130,90,255,.08),
        0 0 140px rgba(255,120,70,.08),
        inset 0 0 0 1px rgba(255,255,255,.015);

    padding: 56px;

    animation:
        modalIn .42s cubic-bezier(.22,1,.36,1);
}

.contaneur__sinscrire {
    max-width: 90vw !important;
    min-width: 80vw !important;
}

/* SOFT AMBIENT GLOW */
.modal__container::before {
    content: "";
    position: absolute;
    inset: -120px;

    background:
        radial-gradient(
            circle at top left,
            rgba(215,62,137,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(255,131,54,.10),
            transparent 35%
        );

    filter: blur(60px);

    pointer-events: none;
}

/* CLOSE */
.modal-close {
    position: absolute;
    top: 24px;
    right: 24px;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.03);

    color: rgba(255,255,255,.75);

    font-size: 20px;
    cursor: pointer;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.modal-close:hover {
    transform: scale(1.05);

    border-color: rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.06);
}

/* HEADER */
.modal-header {
    position: relative;
    z-index: 2;

    text-align: center;
}

.modal-badge {
    width: fit-content;
    margin: auto;

    padding: 10px 18px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.04);

    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: #F1F1F1;

    margin-bottom: 28px;

    backdrop-filter: blur(18px);
}

.modal-badge-001 {
    color: #d73e89;
    filter: drop-shadow(0px 0px 8px #d73e89);
}

.modal-badge-002 {
    color: #ff8336;
    filter: drop-shadow(0px 0px 8px #ff8336);
}

.modal-header h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 56px;
    font-weight: 600;

    line-height: .95;
    letter-spacing: -0.03em;

    margin: 0;

    color: #F1F1F1;
}

.modal-header p {
    margin-top: 16px;

    font-family: "Quicksand", sans-serif;
    font-size: 18px;
    font-weight: 500;

    color: #bbbbc0;

    text-align: center;
}

/* PROGRESS */
.modal-progress {
    margin-top: 40px;
    margin-bottom: 48px;

    width: 100%;
    height: 8px;

    overflow: hidden;
    border-radius: 999px;

    background:
        rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.04);
}

.progress-bar {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            to right,
            #d73e89,
            #ff8336
        );

    box-shadow:
        0 0 30px rgba(215,62,137,.25);
}

/* PROGRESS */
.indicateur-du-progres {
    position: relative;
    width: 100%;
    max-width: 520px; /* was unconstrained */
    margin: 72px 0 64px;
    right: -16px;
}

/* Background line */
.ligne-de-progres {
    position: absolute;
    top: 32px;
    left: 48px;
    right: 48px;
    height: 2px;
    background: rgba(255,255,255,.12);
    z-index: 1;
    border-radius: 999px;
    overflow: hidden;
}

/* Active progress */
.barre-de-progres {
    width: 0%; /* control progress here */
    height: 100%;

    background: linear-gradient(
        to right,
        #d73e89,
        #ff6f91
    );

    box-shadow:
        0 0 18px rgba(215,62,137,.35);
}

/* Step wrapper */
.points-de-progres {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each step */
.points-de-progres li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Circle */
.point {
    width: 36px;
    height: 36px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #181818;
    border: 1px solid rgba(255,255,255,.08);

    transition: all .25s ease;
}

/* Active state */
.points-de-progres li.actif .point {
    background: #d85b8f;
    border-color: rgba(255,255,255,.08);

    box-shadow:
        0 0 16px rgba(216,91,143,.25);
}

/* Check icon */
.point img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* Labels */
.points-de-progres span {
    font-size: 14px;
    color: rgba(255,255,255,.72);
    font-weight: 500;
    letter-spacing: -.02em;
    text-wrap: nowrap;
}

/* CONTENT */
.modal-content {
    position: relative;
    z-index: 2;
}

.form-step h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 34px;
    font-weight: 600;

    color: #F1F1F1;

    text-align: center;
    margin-bottom: 32px;
}

/* GRID */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

/* CARD */
.choice-card {
    position: relative;

    min-height: 220px;

    padding: 32px;

    border-radius: 28px;

    border: 1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 14px;

    cursor: pointer;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

/* HOVER */
.choice-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(255,255,255,.16);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.03)
        );

    box-shadow:
        0 0 40px rgba(215,62,137,.08),
        0 0 70px rgba(255,131,54,.06);
}

/* ICON */
.choice-card span {
    font-size: 42px;
}

/* TITLE */
.choice-card {
    font-family: "Cal Sans", sans-serif;
    font-size: 28px;
    color: #F1F1F1;
}

/* DESCRIPTION */
.choice-card small {
    max-width: 260px;

    font-family: "Quicksand", sans-serif;
    font-size: 15px;
    font-weight: 600;

    line-height: 1.45;

    text-align: center;

    color: #bbbbc0;
}

/* ACTIVE STATE */
.choice-card.selected {
    border-color: transparent;

    background:
        linear-gradient(#080912, #080912)
        padding-box,

        linear-gradient(
            to right,
            #d73e89,
            #ff8336
        ) border-box;

    border: 1px solid transparent;

    box-shadow:
        0 0 44px rgba(215,62,137,.18),
        inset 0 0 24px rgba(235,73,140,.08);
}

/* ANIMATIONS */
@keyframes modalFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform:
            translateY(20px)
            scale(.98);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

#formulaire {
    min-height: fit-content;
    height: 400px;
    width: 100%;
}

.modal-content {
    /* background-color: purple !important; */
}

.modal {
    display: none;
    position: fixed;
}

.modal.is-open {
    display: block;
}

/* hidden state */
.modal[aria-hidden="true"]:not(.is-closing) {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/* visible state */
.modal[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

.modal[aria-hidden="false"] {
    display: block;
}

/* OPEN */
.modal.is-open .modal__overlay {
    animation: modalFade .35s ease forwards;
}

.modal.is-open .modal__container {
    animation: modalIn .42s cubic-bezier(.22,1,.36,1) forwards;
}

/* CLOSE */
.modal.is-closing .modal__overlay {
    animation: modalFadeOut .35s ease forwards;
}

.modal.is-closing .modal__container {
    animation: modalOut .35s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalOut {
    from {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

    to {
        opacity: 0;
        transform:
            translateY(20px)
            scale(.98);
    }
}

.modal-gauche, .modal-droite {
    width: 50%;
    min-width: 40vw;
}

.modal-content {
    display: flex;
}

.contaneur-dual {
    width: 100%;
}

.modal-droite {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-droite #perks, .modal-gauche #formulaire {
    width: 100%;
}

/* ==========================================
   HERO CTA (LANDING PAGE)
========================================== */

#hero .index-lien {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin-top: 24px;

    text-decoration: none;
}

#hero .index-lien button {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 16px 28px;

    border: 1px solid transparent;
    border-radius: 12px;

    background:
        linear-gradient(#080912, #080912) padding-box,
        linear-gradient(
            to right,
            #d73e89 0%,
            #ff8336 80%
        ) border-box;

    color: white;
    font-family: "Cal Sans", sans-serif;
    font-size: 20px;

    cursor: pointer;

    box-shadow:
        0 0 48px #7a2d296b,
        inset 0 0 24px #eb498c2b;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1),
        filter .35s ease;
}

/* gradient fill */
#hero .index-lien button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;

    background: linear-gradient(
        to right,
        #d73e89 0%,
        #ff8336 80%
    );

    opacity: 0;
    transition: opacity .45s ease;
}

/* hover */
#hero .index-lien button:hover,
#hero .index-lien button:focus-visible {
    filter: brightness(1.08);

    box-shadow:
        0 10px 28px rgba(234,132,192,.18);
}

#hero .index-lien button:hover::before,
#hero .index-lien button:focus-visible::before {
    opacity: 1;
}

/* click */
#hero .index-lien button:active {
    transform: scale(.99);
}

.cta-link {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 80%;
    margin: 0 auto;

    text-decoration: none;
}

.cta-link button {
    text-wrap: nowrap;
    max-width: 100%;
}

#transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #03040c;
    opacity: 0;
    pointer-events: none;
}

[data-barba="wrapper"] {
    position: relative;
    overflow: hidden;
}

[data-barba="container"] {
    width: 100%;
}

footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

[data-barba="wrapper"] {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

/* ==========================================
   ON-LOAD ANIMATIONS (WAITING STATE)
========================================== */

/* hidden initial state */
#lander-left,
#lander-right,
.orbit,
.hero-node,
#hero-lander h1,
#hero-lander p,
#hero-lander p#texte-sous,
#hero-signup h1,
#hero-signup p,
#hero-signup h2,
.info-groupe,
#perks,
.btn-continue,
.cta-link {
    opacity: 0;
    will-change: transform, opacity;
}

/* LEFT HERO */
body.is-ready #lander-left {
    animation:
        heroReveal 1.2s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

/* RIGHT HERO */
body.is-ready #lander-right {
    animation:
        resolveReveal 1.6s
        cubic-bezier(.22,1,.36,1)
        .15s forwards;
}

/* ORBITS */
body.is-ready .orbit {
    animation:
        orbitEnter 1.8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body.is-ready .orbit-1 { animation-delay: .15s; }
body.is-ready .orbit-2 { animation-delay: .28s; }
body.is-ready .orbit-3 { animation-delay: .4s; }
body.is-ready .orbit-4 { animation-delay: .52s; }

/* HERO NODES */
body.is-ready .hero-node {
    animation:
        nodeReveal 1s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body.is-ready .top-left     { animation-delay: .35s; }
body.is-ready .top-right    { animation-delay: .5s; }
body.is-ready .middle-right { animation-delay: .65s; }
body.is-ready .bottom-left  { animation-delay: .8s; }
body.is-ready .bottom-right { animation-delay: .95s; }

/* TEXT */
body.is-ready #hero-lander h1,
body.is-ready #hero-signup h1 {
    animation:
        textReveal .9s
        cubic-bezier(.22,1,.36,1)
        .1s forwards;
}

/* TEXT */
body.is-ready #hero-signup h2 {
    animation:
        textRevealSous 1.6s
        cubic-bezier(.22,1,.36,1)
        .1s forwards;
        animation-delay: 1s;
}

/* TEXT */
body.is-ready #hero-lander p {
    animation:
        textRevealSous 1.9s
        cubic-bezier(.22,1,.36,1)
        .1s forwards;
        animation-delay: 0s;
}

/* TEXT */
body.is-ready #hero-lander p#texte-sous {
    animation:
        textRevealSous 1.9s
        cubic-bezier(.22,1,.36,1)
        .1s forwards;
        animation-delay: 3.4s;
}
/* TEXT */
body.is-ready #hero-signup p {
    animation:
        textRevealSous 2.9s
        cubic-bezier(.22,1,.36,1)
        .1s forwards;
        animation-delay: 2.1s;
}

/* TEXT */
body.is-ready .info-groupe {
    animation:
        textRevealSous 4s
        cubic-bezier(.22,1,.36,1)
        .1s forwards;
        animation-delay: 3s;
}

body.is-ready #perks,
body.is-ready .cta-link {
    animation:
        textReveal 1.3s
        cubic-bezier(.22,1,.36,1)
        forwards;
        animation-delay: 1s;
}

body.is-ready .cta-link {
    animation-delay: .75s;
}


body.is-ready #hero-signup .btn-continue {
    animation: textRevealSous 2s
        cubic-bezier(.22,1,.36,1)
        4s
        forwards;
}

/* ==========================================
   KEYFRAMES
========================================== */

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes resolveReveal {
    from {
        opacity: 0;
        transform:
            translateY(-50%)
            translateX(40px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(-50%)
            translateX(0)
            scale(1);
    }
}

@keyframes resolveReveal1000Px {
    from {
        opacity: 0;
        transform:
            translate(-50%, -55%)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

@keyframes orbitEnter {
    from {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.88);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

@keyframes nodeReveal {
    from {
        opacity: 0;
        transform:
            scale(.72)
            translateY(14px);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }
}

@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textRevealSous {
    0%, 33% {
        opacity: 0;
        transform: translateY(0px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   SITE LOADER
========================================== */

#site-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle at center,
            #0f0c24 0%,
            #03040c 60%
        ),
        #03040c;

    transition:
        opacity .8s ease,
        visibility .8s ease;

    overflow: hidden;
}

#site-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.loader-center img {
    width: 74px;

    opacity: 0;
    transform: translateY(18px);

    animation:
        loaderLogo 1s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.loader-line {
    width: 220px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;

    background:
        rgba(255,255,255,.08);

    position: relative;
}

.loader-line::after {
    content: "";
    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            to right,
            #d73e89,
            #ff8336
        );

    animation:
        loadingBar 1.4s
        cubic-bezier(.22,1,.36,1)
        infinite;
}

@keyframes loadingBar {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes loaderLogo {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#page-titre {
    z-index: 101;
}

.onboard-step .question-group {
    margin-top: 8px;
}

#page-titre h1 {
    color: #F1F1F1;
    font-family: "Cal Sans", sans-serif;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.02em;
}

#page-titre h2 {
    color: #F1F1F1;
    font-family: "Cal Sans", sans-serif;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.02em;
    /* margin-top: 8px; */
}

#page-titre p {
    margin: 24px 0px;
    max-width: 60%;
}

#page-titre h2.note {
    margin-top: 8px;
}

#page-titre p.note {
    margin-top: 0px;
    margin-bottom: 16px;
}

/* Left panel — centered vertically */
#onboarding {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 64px 0 72px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Steps stacked on top of each other */
.onboard-step {
    position: absolute;
    width: calc(100% - 136px); /* matches padding */
    opacity: 0;
    pointer-events: none;
}

.onboard-step.actif {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

/* Main container */
#hero-signup {
    width: 100%;
    height: calc(92vh - 92px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
    position: relative;
}
/* headings */
#hero-signup h2 {
    margin-bottom: 6px;
}

/* CTA under heading */
.cta-link {
    margin: 0;
    width: auto;

    opacity: 0;
    transform: translateY(16px);
}

/* reveal AFTER h2 */
body.is-ready .cta-link {
    animation:
        textReveal .8s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay: 2s;
}

.btn-continue {
    margin-top: 16px;
    max-width: fit-content;
}


.cards-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* BASE CARD */
.profile-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(#080912, #080912) padding-box,
        linear-gradient(
            to right,
            rgba(255,255,255,.08),
            rgba(255,255,255,.08)
        ) border-box;

    border: 1px solid transparent;
    border-radius: 24px;
    padding: 28px;

    color: #F1F1F1;
    cursor: pointer;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1),
        filter .35s ease,
        border-color .35s ease;
}

/* GRADIENT LAYER — SAME AS BUTTONS */
.profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;

    background: linear-gradient(
        to right,
        #d73e89 0%,
        #ff8336 80%
    );

    opacity: 0;

    transition:
        opacity .45s cubic-bezier(.22,1,.36,1);
}

/* HOVER */
.profile-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(234,132,192,.12);
}

.profile-card:hover::before {
    opacity: .08;
}

/* ACTIVE STATE */
.profile-card.selected,
.profile-card.active,
.profile-card-selected {
    border-color: transparent;

    background:
        linear-gradient(
            to right,
            #d73e89,
            #ff8336
        ) border-box !important;

    border: 1px solid transparent;

    box-shadow:
        0 0 44px rgba(215,62,137,.18),
        inset 0 0 24px rgba(235,73,140,.08);

    transform: translateY(-2px);
}

/* KEEP GLOW ON */
.profile-card.selected::before,
.profile-card.active::before,
.profile-card-selected::before {
    opacity: 1;
}

/* ==========================================
   STEP 2 — FORM POLISH ONLY
   (keeps Step 1 layout intact)
========================================== */

.onboard-step[data-step="2"] {
    width: 100%;
}

/* keep onboarding composition */
.onboard-step[data-step="2"] .hero-signup {
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}

/* title spacing consistency */
.onboard-step[data-step="2"] #page-titre {
    margin-bottom: 12px;
}

.onboard-step[data-step="2"] #page-titre p {
    max-width: 60%;
}

/* ==========================================
   QUESTION GROUPS
========================================== */

.question-group {
    width: 100%;
    max-width: 720px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-bottom: 28px;
    z-index: 5;
}

.question-group label {
    font-family: "Cal Sans", sans-serif;
    font-size: 24px;
    color: #F1F1F1;
    letter-spacing: -.02em;
}

/* ==========================================
   INPUTS
========================================== */

.question-group input,
.question-group textarea {
    width: 100%;
    box-sizing: border-box;
    position: relative;

    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    /* remove blur from main element */
    backdrop-filter: none;

    color: #F1F1F1;

    font-family: "Quicksand", sans-serif;
    font-size: 18px;
    font-weight: 600;

    outline: none;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

    overflow: hidden;
    isolation: isolate;
}

/* animated blur layer */
.question-group {
    position: relative;
}

.question-group::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: 24px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    transform: scale(.98);

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.22,1,.36,1);

    pointer-events: none;
}

#pt {
    opacity: 20%;
}

/* visible state */
.onboard-step.actif .question-group::before {
    opacity: 1;
    transform: scale(1);
}

.question-group input {
    height: 68px;
    padding: 0 24px;
}

.question-group textarea {
    min-height: 150px;
    max-height: 400px;
    resize: vertical;
    padding: 22px 24px;
}

.question-group input::placeholder,
.question-group textarea::placeholder {
    color: rgba(255,255,255,.32);
}

.question-group input:focus,
.question-group textarea:focus {
    border-color: rgba(215,62,137,.35);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.03)
        );

    box-shadow:
        0 0 0 1px rgba(215,62,137,.12),
        0 0 28px rgba(215,62,137,.08);
}

/* ==========================================
   OPTION CARDS
========================================== */

.select-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0px;
}

.select-grid .profile-card {
    position: relative;
    overflow: hidden;

    width: fit-content;
    min-height: 58px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.02)
        );

    border: 1px solid rgba(255,255,255,.08);

    font-family: "Cal Sans", sans-serif;
    font-size: 18px;
    color: #F1F1F1;

    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

/* hover */
.select-grid .profile-card:hover {
    transform: translateY(-2px);

    border-color: rgba(255,255,255,.16);

    box-shadow:
        0 0 24px rgba(215,62,137,.08),
        0 0 40px rgba(255,131,54,.04);
}

/* sell category pills */
.sell-type .profile-card {
    border-radius: 999px;
    min-height: 52px;
}

/* spacing rhythm */
.creator-level,
.creator-type,
.sell-type {
    margin-top: 4px;
}

/* button spacing */
.onboard-step[data-step="2"] .btn-continue {
    margin-top: 8px;
}

/* ==========================================
   STEP 2 FIXES ONLY
   (preserves Step 1 exactly)
========================================== */

/* STEP 2 MUST SCROLL */
html,
body {
    overflow-x: hidden;
    overflow-y: auto;
}

[data-barba="wrapper"],
[data-barba="container"] {
    overflow: visible !important;
}

#onboarding,
.onboard-step[data-step="2"] {
    overflow: visible !important;
}

/* preserve Step 1 composition */
.onboard-step[data-step="2"] #hero-signup {
    width: 100%;
    min-height: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    padding-top: 128px;
    padding-bottom: 120px;

    /* important */
    overflow: visible;
}

/* KEEP HERO/TITLE LEFT ALIGNED LIKE STEP 1 */
.onboard-step[data-step="2"] #page-titre {
    text-align: left;
    margin-bottom: 20px;
}

.onboard-step[data-step="2"] #page-titre h1,
.onboard-step[data-step="2"] #page-titre h2,
.onboard-step[data-step="2"] #page-titre p {
    text-align: left;
}

.onboard-step[data-step="2"] #page-titre p {
    max-width: 720px;
}

/* ==========================================
   BUTTON / TAG LAYOUT FIX
========================================== */

/* container */
.select-grid,
.cards-profile,
.creator-level,
.creator-type,
.sell-type {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 14px;
    width: 100%;
}

/* buttons should size to content */
.select-grid .profile-card,
.cards-profile .profile-card,
.sell-type .profile-card {
    flex: 0 0 auto;

    width: auto !important;
    min-width: fit-content;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    min-height: 54px;
    padding: 0 22px;
}

/* nicer wrapping rhythm */
.question-group {
    max-width: 50vw;
    min-width: 256px;
}

/* continue button stays left aligned */
.onboard-step[data-step="2"] .btn-continue {
    align-self: flex-start;
    width: auto;
    min-width: 220px;
}

.profile-card {
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* hover */
.profile-card:hover {
    transform: translateY(-2px);
}
/* hidden input */
.hidden {
    display: none;
}

.other-input {
    width: 100%;
    margin-top: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: white;
    font-size: 15px;
    outline: none;
}

.other-input:focus {
    border-color:
        rgba(255,255,255,.22);
}

/* ==========================================
   LAUNCH PAGE — AUTO ANIMATIONS
   (no JS / no .is-ready required)
========================================== */

/* NAV */
nav {
    opacity: 0;
    animation:
        textReveal .8s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay: .1s;
}

/* HERO WRAPPER */
#hero {
    opacity: 0;
    transform: translateY(24px);

    display: flex;
    flex-direction: column;
    align-items: center;

    animation:
        heroReveal 1.1s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay: .2s;
}

/* H1 */
#hero h1 {
    opacity: 0;
    transform: translateY(24px);

    animation:
        textReveal .95s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay: .35s;
}

/* BUTTON GROUP */
.contaneur-des-liens {
    display: flex;
    gap: 16px;
    margin-top: 32px;

    opacity: 0;
    transform: translateY(16px);

    animation:
        textReveal .9s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay: .65s;
}

/* BUTTON STAGGER */
.index-lien {
    opacity: 0;
    transform: translateY(16px);

    animation:
        textReveal .8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.index-lien:nth-child(1) {
    animation-delay: .82s;
}

.index-lien:nth-child(2) {
    animation-delay: .94s;
}

/* FOOTER */
footer {
    opacity: 0;
    transform: translateY(18px);

    animation:
        textReveal .9s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay: 1.05s;
}

@media screen and (min-width: 1000px) {
    #perks .row:last-of-type {
        margin-bottom: 0px;
    }
}

@media screen and (max-width: 1200px) {
    #hero h1 {
        font-size: 96px;
    }

    main#index {
        display: flex;
        justify-content: center;
    }

    #hero {
        width: 100%;
        padding: 0px 16px;
        margin: 0;
    }

    #hero-lander h2 {
        font-size: 48px;
    }

    #hero-lander h1 {
        font-size: 72px;
    }

    #hero-lander p {
        font-size: 20px;
    }

    #lander-left {
        margin-top: -128px;
    }

        #hero-lander button {
        width: 100%;
    }

    #onboarding {
        padding: 0px 32px;
    }
}

@media screen and (max-width: 1000px) {
    .hero-node, .hero-lines {
        display: none;
    }

    .question-group {
        max-width: 100vw;
    }

    #hero-lander h2, #hero-signup h2, #hero-signup #page-titre h2 {
        text-align: center;
    }

    #hero-lander h1, #hero-signup h1, #hero-signup #page-titre h1 {
        text-align: center;
    }

    #hero-lander p, #hero-signup p, #hero-signup #page-titre p {
        text-align: center;
        max-width: 100%;
    }

    #hero-signup #page-titre {
        top: 10%;
        padding: 16px 0px;

    }

    .select-grid {
        justify-content: center ;
    }

    #lander-left {
        margin-top: -128px;
    }

    #hero-signup h2 {
        font-size: 32px;
    }

    #hero-signup h1 {
        font-size: 48px;
    }

    #hero-signup p {
        font-size: 20px;
        line-height: 1;
        padding: 0px 32px;
    }

    #hero-signup .btn-continue {
        margin-top: 128px;   
    }

    #hero-signup .onboard-step {
        display: flex;
        flex-direction: column;
    }

    #perks {
        width: 100%;
        margin-top: 50vh;
        /* display: none; */
        flex-direction: row;
        display: flex;
        gap: 8px;
        padding: 0;
        /* display: none; */
        position: absolute;
    }

    #perks .row {
        width: 100%;
        display: flex;
        justify-self: flex-start;
        flex-direction: column;
        text-align: center;
        /* background-color: blue; */
        gap: 0;
        background-color: #03040c4b;
        border: 1px solid #F1F1F12b;
    }

    #liens {
        width: 100%;
        position: absolute;
        top: 100%;
        margin-top: 64px;
    }

    .droite {
        width: 100%;
    }

    #perks .titre, #perks .desc {
        text-align: center;
        text-wrap: wrap;
        /* background-color: green; */
    }

    #perks .titre {
        margin: 0;
        font-size: 16px;
    }

    #perks .desc {
        margin: 0;
        font-size: 12px;
        padding: 0px 3px 6px 3px;
    }
    
    .icone img {
        width: 64px;
        height: 64px;
    }

    #lander-right {
        position: absolute;
        top: 50%;

        /* move hero to true center */
        transform: translate(-50%, -50%);

        width: 100vw;
        height: auto;

        overflow: visible;
        pointer-events: none;
        z-index: 1;

        /* optional subtle atmosphere */
        opacity: 0.9;

        animation:
            resolveReveal1000Px 1.6s
            cubic-bezier(.22,1,.36,1)
            .15s forwards;
    }

    /* Keep content above hero */
    #lander-left {
        position: relative;
        z-index: 3;
        height: 66vh;
    }
}

@media screen and (min-height: 700px) and (max-width: 1000px) {
    #perks {
        margin-top: 52.5vh;
    }
}

@media screen and (min-height: 800px) and (max-width: 1000px) {
    #perks {
        margin-top: 55vh;
    }
}

@media screen and (max-width: 1000px) {
    #lander-right {
        position: absolute;
        left: 50%;
        top: 50%;

        width: 100vw;
        min-height: 80vh;

        overflow: visible;
        pointer-events: none;
        z-index: 1;
        opacity: 0;

        /* IMPORTANT:
           Start in exact same position as animation "from" */
        transform:
            translate(-50%, -55%)
            scale(.96);

        will-change: transform, opacity;
        backface-visibility: hidden;
    }

    #onboarding {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 128px;
        height: 100%;
    }

    body.is-ready #lander-right {
        animation:
            resolveReveal1000Px 1.6s
            cubic-bezier(.22,1,.36,1)
            .15s forwards;

        width: 100%;
        overflow: hidden;
    }
}

@media screen and (max-width: 800px) {
    #hero h1 {
        font-size: 64px;
    }

    .contaneur-des-liens {
        margin-top: 0px;
    }
    
    #hero-signup h2 {
        font-size: 28px;
    }

    #hero-signup h1 {
        font-size: 40px;
    }

    #hero-signup p {
        font-size: 20px;
        line-height: 1;
        padding: 0px 48px;
    }

    #hero-signup .btn-continue {
        margin-top: 156px;   
    }

    #page-titre p {
        margin-top: 12px !important;
    }

    .indicateur-du-progres {
        position: absolute;
        margin: 0;
        inset: 0;
        top: 96px;
        height: 100%;
        width: 100%;
        /* background-color: green; */
        transform: scale(75%);
        justify-self: center;
    }
}

@media screen and (max-width: 700px) {
    nav.lander {
        margin-top: 16px;
    }

    nav section:first-of-type {
        margin-left: 12px;
    }

    #hero-lander {
        padding: 0px 32px;
    }

    #hero-lander h2 {
        font-size: 40px;
    }

    #hero-lander h1 {
        font-size: 56px;
        text-wrap: nowrap;
    }

    #hero-lander p {
        font-size: 20px;
    }

    #hero-lander button {
        width: 100%;
    }

    footer {
        justify-content: center;
    }

    .lander {
        height: fit-content;
    }

    #lander-left {
        position: relative;
        z-index: 3;
        height: 50vh;
    }

    #lander-right {
        top: 55%;
    }

    #perks {
        display: none;
    }

    #hero-signup h2 {
        font-size: 24px;
    }

    #hero-signup h1 {
        font-size: 32px;
    }

    #hero-signup p {
        font-size: 16px;
        padding: 0px 16px;
    }

    #hero-signup .btn-continue {
        margin-top: 128px;   
    }

    .indicateur-du-progres {
        margin: 0;
    }

    .onboard-step {
        justify-content: center;
        height: 100%;
    }

    #onboarding {
        margin: 0px 0px;
        padding: 64px 0px;
    }

}

@media screen and (max-width: 600px) {
    #forumlaire {
        height: 512px;
    }
    #hero {
        height: 80vh;
    }

    .index-lien button {
        text-wrap: nowrap;
    }

    #hero h1 {
        font-size: 32px;
    }

    .contaneur-des-liens {
        margin-top: 0px;
    }

    .onboard-step[data-step="6"] {
        margin-top: 128px;
    }

    nav section:first-of-type {
        margin-left: 12px;
    }

    nav section:last-of-type {
        margin-right: 12px;
    }

    nav {
        height: 72px;
    }

    #marque {
        height: 16px;
    }

    #champ-texte {
        font-size: 16px;
        padding-right: 0;
    }

    .icone img {
        width: 48px;
        height: 48px;
    }

    #hero-signup button.profile-card {
        font-size: 12px;
        padding: 4px 8px;
        min-height: fit-content;
        max-height: fit-content;
        height: fit-content;
        padding: 12px;
        border-radius: 8px;
    }

    #hero-signup h2 {
        font-size: 16px;
    }

    #hero-signup h1 {
        font-size: 24px;
    }

    #hero-signup p {
        font-size: 12px;
    }
}

@media screen and (max-width: 550px) {   
    
    #perks .titre {
        font-size: 11px;
    }

    #perks .desc {
        font-size: 10px;
    }

    #hero-lander {
        padding: 0px 16px;
    }

    #liens {
        margin-top: 72px;
    }
}

@media screen and (max-width: 500px) {   
    #hero-lander h2 {
        font-size: 32px;
    }

    #hero-lander h1 {
        font-size: 40px;
        text-wrap: nowrap;
    }

    #hero-lander p {
        font-size: 16px;
    }

    #hero-lander p#texte-sous {
        font-size: 12px;
    }

    footer li {
        font-size: 14px;
    }

    #champ-texte {
        gap: 4px;
    }

    footer a {
        text-wrap: nowrap;
    }
}

@media screen and (max-width: 412px) {   
    #hero-lander h2 {
        font-size: 28px;
    }

    #hero-lander h1 {
        font-size: 32px;
        text-wrap: nowrap;
    }

    #hero-lander p {
        font-size: 14px;
    }

    #lander-right {
        top: 52.5%;
    }

    footer li {
        font-size: 12px;
    }

    #perks .titre {
        font-size: 10px;
    }

    #perks .desc {
        font-size: 10px;
    }

    #hero-lander p#texte-sous {
        font-size: 10px;
    }

    #hero-signup h2 {
        font-size: 16px;
        font-weight: 300;
    }

    #hero-signup h1 {
        font-size: 20px;
    }

    #hero-signup p {
        font-size: 12px;
        padding: 0px 16px;
    }
    
    #hero-signup button.profile-card {
        font-size: 10px;
        padding: 8px;
    }

    .select-grid {
        gap: 6px;
    }
}

@media screen and (max-width: 366px) {   
    #hero-lander h2 {
        font-size: 24px;
    }

    #hero-lander h1 {
        font-size: 28px;
        text-wrap: nowrap;
    }

    #hero-lander p {
        font-size: 12px;
    }

    #hero-lander p#texte-sous {
        font-size: 10px;
    }
}

@media screen and (max-width: 1000px) {
    #resolve-center,
    .hero-node,
    #perks .row,
    .modal__overlay,
    .modal__container {
        backdrop-filter: none;
    }

    .modal__container {
        background-color: #03040c;
    }
}

@media screen and (max-width: 1000px) {
    #lander-right::before,
    #resolve-center::before {
        filter: blur(18px);
        opacity: .45;
    }

    
    /* stop background motion */
    .hero-particles,
    .stars,
    .orbit::after,
    .orbit-dots::before {
        animation: none !important;
    }
}

/* -----------------------------
   MOBILE NAV
----------------------------- */

.mobile-menu-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border-radius: 16px;
    border: 1px solid #ffffff18;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.02)
        );

    backdrop-filter: blur(18px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    padding: 0 12px;
    cursor: pointer;
    z-index: 999;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #d73e89,
            #ff8336
        );

    transition: transform .3s ease,
    opacity .5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mobile-nav-panel {
    position: fixed;
    top: 84px;
    left: 16px;
    right: 16px;

    z-index: 998;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);

    border-radius: 28px;
    border: 1px solid #ffffff12;

    background:
        rgba(7,8,16,.88);

    backdrop-filter: blur(28px);

    overflow: hidden;
}

.mobile-nav-inner {
    padding: 24px;
}

.mobile-links {
    display: flex;
    flex-direction: column;
    gap: 4px;

    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-links li a {
    display: flex;
    align-items: center;

    height: 56px;
    padding: 0 18px;

    border-radius: 18px;

    color: #f1f1f1;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;

    transition: .25s ease;
}

.mobile-links li a:hover {
    background:
        rgba(255,255,255,.04);
}

.mobile-actions {
    display: flex;
    gap: 12px;

    margin-top: 20px;
}

.mobile-actions button {
    font-family: 'Cal Sans', serif;
    flex: 1;
    height: 52px;

    border-radius: 18px;
    border: 1px solid #ffffff14;

    background:
        linear-gradient(
            90deg,
            #d73e89,
            #ff8336
        );

    color: white;
    font-size: 15px;
    cursor: pointer;
}

@media screen and (max-width: 1000px) {

    #navigation,
    #compte {
        display: none;
    }

    nav {
        position: relative;
    }
}

/* ==========================================
   MOBILE MODAL — FULLSCREEN
========================================== */

@media screen and (max-width: 768px) {

    /* overlay becomes edge-to-edge */
    .modal__overlay {
        padding: 0;
        align-items: stretch;

        backdrop-filter:
            blur(22px)
            brightness(.82);
    }

    /* fullscreen container */
    .modal__container {
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;

        border-radius: 0;
        border: none;

        padding:
            max(72px, env(safe-area-inset-top))
            24px
            max(32px, env(safe-area-inset-bottom))
            24px;

        overflow-y: auto;
        overflow-x: hidden;

        box-shadow: none;

        background:
            radial-gradient(
                circle at top left,
                rgba(215,62,137,.10),
                transparent 22%
            ),
            radial-gradient(
                circle at bottom right,
                rgba(255,131,54,.08),
                transparent 24%
            ),
            linear-gradient(
                180deg,
                #06070e 0%,
                #04050b 100%
            );

        animation:
            modalMobileIn .42s
            cubic-bezier(.22,1,.36,1);
    }

    /* glow too large for mobile */
    .modal__container::before {
        inset: -60px;
        filter: blur(40px);
        opacity: .65;
    }

    /* close button easier to tap */
    .modal-close {
        top: max(18px, env(safe-area-inset-top));
        right: 18px;

        width: 48px;
        height: 48px;

        border-radius: 14px;
        font-size: 22px;
    }

    /* typography scale */
    .modal-header h1 {
        font-size: clamp(36px, 9vw, 56px);
        line-height: .96;
        text-wrap: balance;
    }

    .modal-header p {
        font-size: 16px;
        line-height: 1.5;
        max-width: 95%;
        margin-inline: auto;
    }

    .modal-badge {
        font-size: 13px;
        padding: 9px 16px;
        margin-bottom: 24px;
    }

    .modal-progress {
        margin-top: 28px;
        margin-bottom: 36px;
    }

    .contaneur__sinscrire {
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* mobile entrance */
@keyframes modalMobileIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   MODAL VISIBILITY
========================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* OPEN */
.modal[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* KEEP VISIBLE DURING CLOSE */
.modal.is-closing {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* OPEN */
.modal[aria-hidden="false"] .modal__overlay {
    animation: modalFade .35s ease forwards;
}

.modal[aria-hidden="false"] .modal__container {
    animation: modalIn .42s cubic-bezier(.22,1,.36,1) forwards;
}

/* CLOSE */
.modal.is-closing .modal__overlay {
    animation: modalFadeOut .35s ease forwards;
}

.modal.is-closing .modal__container {
    animation: modalOut .35s cubic-bezier(.22,1,.36,1) forwards;
}

.mobile-menu-toggle span {
    transition:
        transform .42s cubic-bezier(.22,1,.36,1),
        opacity .24s ease;
}

/* TOP LINE */
body.mobile-nav-open
.mobile-menu-toggle
span:first-of-type {

    transform:
        translate(0, 8px),
        scale(.75);

    opacity: 0;
}

/* MIDDLE LINE */
body.mobile-nav-open
.mobile-menu-toggle
span:nth-of-type(2) {

    transform:
        translate(0, 0)
        scale(.75);
}

/* BOTTOM LINE */
body.mobile-nav-open
.mobile-menu-toggle
span:last-of-type {

    transform:
        translate(0, -8px),
        scale(.75);

    opacity: 0;
}

#press-kit #hero h2, #doc-texte #hero h2, #confirmed #hero h2 {
    margin: 0;
    padding-bottom: 8px;
}

#press-kit #hero p {
    font-size: 20px;
    max-width: 50%;
}

#doc-texte #hero p, #confirmed #hero p {
    font-size: 20px;
    font-weight: 200;
    max-width: 100%;
}

#doc-texte #hero .contaneur-des-liens a {
    text-wrap: nowrap;
}

#doc-texte #hero .contaneur-des-liens p, #doc-texte #hero .contaneur-des-liens a.index-lien {
    padding: 0;
    margin: 0;
}

#doc-texte #hero .contaneur-des-liens {
    display: flex;
    align-items: center;
}

#press-kit .contaneur-des-liens {
    margin-top: 8px;
}

@media screen and (max-width: 1200px) {
    #doc-texte #hero {
        margin: 0;
        padding: 0;
    }

    #doc-texte #hero h3,
    #doc-texte #hero p {
        padding: 0px 6px;
        line-height: 1;
    }

    .legal-section {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media screen and (max-width: 1000px) {
    #press-kit {
        margin: 0;
    }

    #press-kit #hero, #confirmed #hero {
        padding: 0;
    }

    #press-kit #hero h2, #doc-texte #hero h2 {
        padding: 0px 8px 8px 8px;
    }
}

@media screen and (max-width: 800px) {
    #press-kit #hero p, #doc-texte #hero p {
        width: 90%;
        max-width: 90%;
    }
}

@media screen and (max-width: 600px) {
    #press-kit #hero h2, #doc-texte #hero h2  {
        font-size: 32px;
    }

    #press-kit #hero p, #doc-texte #hero p, #doc-texte #hero li {
        font-size: 14px;
    }
}

/* ==========================================
   AUTH BUTTONS
========================================== */

.btn-auth {
    width: 100%;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 18px 24px;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.03);

    color: #F1F1F1;

    font-family: "Cal Sans", sans-serif;
    font-size: 18px;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.btn-auth img {
    width: 22px;
    height: 22px;
}

.btn-auth:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255,255,255,.16);

    background:
        rgba(255,255,255,.06);

    box-shadow:
        0 0 30px rgba(215,62,137,.08);
}

/* divider */

.auth-divider {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 28px 0;
}

.auth-divider::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background:
        rgba(255,255,255,.08);
}

.auth-divider span {
    position: relative;
    z-index: 2;

    background:
        #080912;

    padding: 0 14px;

    color:
        rgba(255,255,255,.45);

    font-family:
        "Quicksand",
        sans-serif;
}

/* better spacing */

.modal-gauche {
    padding-right: 32px;
}

.modal-droite {
    padding-left: 32px;
}

.modal-content iframe {
    height: 800px !important;
}

/* responsive */

@media (max-width: 980px) {

    .modal-content {
        flex-direction: column;
    }

    .modal-gauche,
    .modal-droite {
        width: 100%;
        min-width: 100%;
        padding: 0;
    }

    #perks {
        width: 100%;
        margin-top: 32px;
        bottom: 0;
        margin-bottom: -64px;
    }

    .modal__container {
        overflow-y: auto;
    }
}