/* =====================================================================
   Sites.sn — Design system (plateforme : landing, auth, onboarding,
   dashboard, admin). Complete Tailwind CDN (voir assets/js/tw.js).
   Palette : ink #0D0A1F · violet #6C47FF · magenta #C04BFF · corail #FF7A45
   ===================================================================== */

:root {
    --ink: #0D0A1F;
    --ink-soft: #2A2545;
    --muted: #5B5675;
    --primary: #6C47FF;
    --primary-dark: #5130E0;
    --magenta: #C04BFF;
    --accent: #FF7A45;
    --mint: #10B981;
    --surface: #F7F6FB;
    --line: #E9E6F2;
    --brand-gradient: linear-gradient(120deg, #6C47FF 0%, #C04BFF 48%, #FF7A45 100%);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --z-header: 40;
    --z-overlay: 50;
    --z-modal: 60;
    --z-toast: 70;
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); }
.font-display { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
::selection { background: rgba(108, 71, 255, .18); }

:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D8D2EA; border-radius: 20px; border: 3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: #BDB3DD; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* =====================================================================
   Marque : degrades, texte, fonds
   ===================================================================== */
.bg-brand { background: var(--brand-gradient); }
.bg-brand-animated { background: linear-gradient(120deg, #6C47FF, #C04BFF, #FF7A45, #C04BFF, #6C47FF); background-size: 300% 300%; animation: gradient-shift 10s ease infinite; }
.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-animated {
    background: linear-gradient(90deg, #8B6BFF, #D26BFF, #FF8A5B, #D26BFF, #8B6BFF);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradient-shift 6s linear infinite;
}
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Fond sombre "aurore" (hero landing, panneaux auth, CTA) */
.aurora { position: relative; background: var(--ink); overflow: hidden; isolation: isolate; }
.aurora::before, .aurora::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none;
    animation: aurora-drift 18s ease-in-out infinite;
}
.aurora::before { width: 60vmax; height: 60vmax; top: -30vmax; left: -15vmax; background: radial-gradient(circle, rgba(108,71,255,.55), transparent 65%); }
.aurora::after { width: 50vmax; height: 50vmax; bottom: -28vmax; right: -12vmax; background: radial-gradient(circle, rgba(255,122,69,.38), transparent 65%); animation-delay: -9s; }
.aurora-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1; animation: aurora-drift 22s ease-in-out infinite; }
@keyframes aurora-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(6%, 8%) scale(1.08); }
    66% { transform: translate(-5%, 4%) scale(.94); }
}

/* Grille technique en filigrane */
.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.grid-bg-light {
    background-image:
        linear-gradient(rgba(13,10,31,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,10,31,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 70%);
}
/* Grain subtil (texture premium) */
.noise::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Verre depoli */
.glass { background: rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255,255,255,.6); }
.glass-dark { background: rgba(255,255,255,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); }

/* =====================================================================
   Boutons
   ===================================================================== */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .9rem; line-height: 1.2;
    cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate;
    transition: transform .2s var(--ease-out), box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn.is-loading { opacity: .75; pointer-events: none; }
.btn-sm { padding: .55rem 1rem; font-size: .8rem; }
.btn-lg { padding: 1rem 1.8rem; font-size: 1rem; }
.btn-primary { background: var(--brand-gradient); background-size: 150% 100%; background-position: 0% 50%; color: #fff; box-shadow: 0 8px 24px -8px rgba(108,71,255,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { background-position: 100% 50%; box-shadow: 0 14px 34px -10px rgba(192,75,255,.7), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-1px); }
.btn-primary::after { /* reflet qui balaie le bouton au survol */
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
    transition: left .7s var(--ease-out);
}
.btn-primary:hover::after { left: 140%; }
.btn-solid { background: var(--primary); color: #fff; box-shadow: 0 8px 20px -8px rgba(108,71,255,.55); }
.btn-solid:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(13,10,31,.5); }
.btn-dark:hover { background: #1F1A38; transform: translateY(-1px); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 8px 24px -10px rgba(13,10,31,.35); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(13,10,31,.45); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: #CFC6EC; background: #FBFAFF; color: var(--primary); }
.btn-glass { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.16); }
.btn-soft { background: var(--primary-light, #F1EDFF); color: var(--primary); }
.btn-soft:hover { background: #E6DEFF; }
.btn-danger { background: #FEF2F2; color: #DC2626; }
.btn-danger:hover { background: #FEE2E2; }
.btn .spinner { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn-label-icon { display: none; }
.spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
    width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .8rem;
    color: #8A84A3; transition: background-color .2s, color .2s, transform .15s; cursor: pointer;
}
.icon-btn:hover { background: #F1EEF9; color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn-danger:hover { background: #FEF2F2; color: #DC2626; }

/* Pulsation d'appel a l'action */
.btn-pulse { position: relative; }
.btn-pulse::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
    animation: pulse-ring 2.6s ease-out infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(108,71,255,.45); }
    70% { box-shadow: 0 0 0 18px rgba(108,71,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(108,71,255,0); }
}

/* =====================================================================
   Cartes
   ===================================================================== */
.card { background: #fff; border: 1px solid var(--line); border-radius: 1.4rem; box-shadow: 0 1px 2px rgba(13,10,31,.03); }
.card-pad { padding: 1.4rem; }
@media (min-width: 640px) { .card-pad { padding: 1.75rem; } }
.card-hover { transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(108,71,255,.35); border-color: #DCD3F7; }
.hover-lift { transition: transform .35s var(--ease-out), box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -20px rgba(108,71,255,.3); }

/* Projecteur qui suit la souris (--mx/--my poses par main.js) */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(108,71,255,.10), transparent 45%);
    transition: opacity .3s ease;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
.spotlight-dark::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 45%); }

/* Bordure degradee animee (carte mise en avant) */
.border-gradient { position: relative; background: #fff; border-radius: 1.6rem; }
.border-gradient::before {
    content: ''; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1;
    background: linear-gradient(120deg, #6C47FF, #C04BFF, #FF7A45, #C04BFF, #6C47FF); background-size: 300% 300%;
    animation: gradient-shift 8s ease infinite;
}

/* Icones dans une pastille */
.icon-tile { width: 2.75rem; height: 2.75rem; border-radius: .95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-tile-sm { width: 2.2rem; height: 2.2rem; border-radius: .75rem; }
.tile-violet { background: #F1EDFF; color: #6C47FF; }
.tile-coral { background: #FFF1EB; color: #E8602B; }
.tile-mint { background: #E7F8F1; color: #0E9F6E; }
.tile-sky { background: #E8F4FF; color: #2B7FD9; }
.tile-amber { background: #FFF6E0; color: #C98A00; }
.tile-rose { background: #FFEEF3; color: #E0406F; }
.tile-ink { background: var(--ink); color: #fff; }
.tile-brand { background: var(--brand-gradient); color: #fff; box-shadow: 0 8px 20px -8px rgba(108,71,255,.6); }

/* =====================================================================
   Formulaires
   ===================================================================== */
.label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .45rem; }
.help { margin-top: .4rem; font-size: .75rem; color: #8A84A3; }
.field {
    width: 100%; padding: .8rem 1rem; border-radius: .95rem; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
    font-size: .95rem; transition: border-color .2s, box-shadow .2s, background-color .2s; outline: none;
}
.field::placeholder { color: #A9A3BF; }
.field:hover { border-color: #D6CEEE; }
.field:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(108,71,255,.12); }
.field-group { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: .95rem; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.field-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(108,71,255,.12); }
.field-group input { flex: 1; min-width: 0; padding: .8rem 1rem; outline: none; background: transparent; font-size: .95rem; }
.field-group .addon { display: flex; align-items: center; padding: 0 .95rem; color: #8A84A3; font-size: .85rem; background: #FAF9FD; white-space: nowrap; }
.field-icon { position: relative; }
.field-icon > i, .field-icon > svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: #A9A3BF; pointer-events: none; }
.field-icon > .field { padding-left: 2.7rem; }
textarea.field { resize: vertical; min-height: 7rem; line-height: 1.6; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A84A3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; }

/* Interrupteur (switch) */
.switch { position: relative; display: inline-flex; width: 2.9rem; height: 1.65rem; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #DAD5E8; transition: background-color .25s ease; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: calc(1.65rem - 6px); height: calc(1.65rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(13,10,31,.25); transition: transform .3s var(--ease-spring); }
.switch input:checked ~ .track { background: var(--primary); }
.switch input:checked ~ .thumb { transform: translateX(1.25rem); }
.switch input:focus-visible ~ .track { box-shadow: 0 0 0 4px rgba(108,71,255,.2); }

/* Zone de depot d'image */
.dropzone { border: 2px dashed #D6CEEE; border-radius: 1.2rem; background: #FBFAFF; transition: border-color .2s, background-color .2s; cursor: pointer; }
.dropzone:hover, .dropzone.is-drag { border-color: var(--primary); background: #F4F0FF; }

/* Pastilles de couleur predefinies */
.swatch { width: 2.4rem; height: 2.4rem; border-radius: 999px; cursor: pointer; position: relative; transition: transform .2s var(--ease-spring); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.swatch:hover { transform: scale(1.1); }
.swatch.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.color-input { -webkit-appearance: none; appearance: none; border: none; width: 2.6rem; height: 2.6rem; border-radius: .8rem; cursor: pointer; padding: 0; background: none; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: 2px solid #fff; border-radius: .8rem; box-shadow: 0 0 0 1px var(--line); }

/* =====================================================================
   Chips, badges, controle segmente
   ===================================================================== */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; transition: all .2s ease; white-space: nowrap; }
.chip:hover { border-color: #CFC6EC; color: var(--ink); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.badge-dot::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.badge-live::before { animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.badge-green { background: #E7F8F1; color: #0E8F63; }
.badge-amber { background: #FFF5DD; color: #B77900; }
.badge-red { background: #FEEEEE; color: #D23434; }
.badge-slate { background: #F1EFF6; color: #6B6585; }
.badge-violet { background: #F1EDFF; color: #5A34F0; }
.badge-blue { background: #E8F2FF; color: #2466C9; }
.badge-coral { background: #FFF0E9; color: #D4531F; }

.seg { display: inline-flex; padding: .3rem; gap: .2rem; border-radius: 999px; background: #EFECF7; }
.seg a, .seg button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--muted); transition: all .25s var(--ease-out); white-space: nowrap; cursor: pointer; }
.seg a:hover, .seg button:hover { color: var(--ink); }
.seg .is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -2px rgba(13,10,31,.15); }

/* =====================================================================
   Toasts
   ===================================================================== */
.toast-stack { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 30rem); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem .8rem .8rem; border-radius: 1.1rem; background: rgba(13,10,31,.94); color: #fff; box-shadow: 0 20px 40px -12px rgba(13,10,31,.45); backdrop-filter: blur(12px); animation: toast-in .55s var(--ease-spring) both; }
.toast.is-leaving { animation: toast-out .35s ease forwards; }
.toast p { flex: 1; }
.toast-icon { width: 1.9rem; height: 1.9rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast-success .toast-icon { background: #10B981; }
.toast-error .toast-icon { background: #EF4444; }
.toast-close { width: 1.8rem; height: 1.8rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); flex-shrink: 0; }
.toast-close:hover { background: rgba(255,255,255,.1); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px) scale(.97); } }

/* =====================================================================
   Animations d'apparition
   ===================================================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].is-in { opacity: 1; transform: none; }

.onb-enter { animation: fade-up .6s var(--ease-out) backwards; }
.stagger > * { animation: fade-up .6s var(--ease-out) backwards; }
.stagger > *:nth-child(1) { animation-delay: .03s; }
.stagger > *:nth-child(2) { animation-delay: .08s; }
.stagger > *:nth-child(3) { animation-delay: .13s; }
.stagger > *:nth-child(4) { animation-delay: .18s; }
.stagger > *:nth-child(5) { animation-delay: .23s; }
.stagger > *:nth-child(6) { animation-delay: .28s; }
.stagger > *:nth-child(n+7) { animation-delay: .32s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }

.float-slow { animation: float-y 7s ease-in-out infinite; }
.float-med { animation: float-y 5.5s ease-in-out infinite; animation-delay: -2s; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Squelette de chargement (iframes d'apercu) */
.skeleton { background: linear-gradient(90deg, #F1EEF8 0%, #FAF9FD 50%, #F1EEF8 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* =====================================================================
   Landing : elements specifiques
   ===================================================================== */
.nav-float { transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease, top .35s ease; }
.nav-float.is-scrolled { background: rgba(13,10,31,.72); border-color: rgba(255,255,255,.1); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }

#hero-rotate-word { display: inline-block; transition: opacity .3s ease, transform .3s var(--ease-out), filter .3s ease; }
#hero-rotate-word.swap { opacity: 0; transform: translateY(12px); filter: blur(6px); }

.browser-frame { border-radius: 1.3rem; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.browser-dots span { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }

.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: .9rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.step-line { position: absolute; top: 2rem; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #D8D0F0 0 8px, transparent 8px 16px); }
.step-line::after { content: ''; position: absolute; inset: 0; background: var(--brand-gradient); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease-out) .3s; }
.is-in .step-line::after, .step-line.is-in::after { transform: scaleX(1); }

.faq-item[open] summary .faq-icon { transform: rotate(45deg); background: var(--ink); color: #fff; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-body { animation: fade-up .4s var(--ease-out); }

/* Mockup telephone */
.phone-frame { border-radius: 2.2rem; padding: .55rem; background: #0B0918; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.phone-frame .phone-screen { border-radius: 1.75rem; overflow: hidden; background: #fff; position: relative; }
.phone-frame .phone-notch { position: absolute; top: .45rem; left: 50%; transform: translateX(-50%); width: 34%; height: 1.15rem; background: #0B0918; border-radius: 999px; z-index: 2; }

/* Iframe d'apercu reduite (4x) */
.mini-frame { position: relative; overflow: hidden; background: #F3F1F9; }
.mini-frame iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: top left; border: 0; pointer-events: none; }
.mini-frame.is-3x iframe { width: 300%; height: 300%; transform: scale(.3333); }

/* =====================================================================
   Onboarding
   ===================================================================== */
.onb-progress { height: 4px; background: #ECE8F6; border-radius: 999px; overflow: hidden; }
.onb-progress > span { display: block; height: 100%; background: var(--brand-gradient); border-radius: 999px; transition: width 1s var(--ease-out); }
.onb-dot { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; background: #fff; border: 1.5px solid var(--line); color: #A9A3BF; transition: all .4s var(--ease-out); flex-shrink: 0; }
.onb-dot.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.onb-dot.is-active { background: var(--brand-gradient); border-color: transparent; color: #fff; box-shadow: 0 0 0 5px rgba(108,71,255,.15); animation: step-pulse 2.2s ease-out infinite; }
@keyframes step-pulse { 0% { box-shadow: 0 0 0 0 rgba(108,71,255,.35); } 70% { box-shadow: 0 0 0 10px rgba(108,71,255,0); } 100% { box-shadow: 0 0 0 0 rgba(108,71,255,0); } }

.choice-card { position: relative; display: block; cursor: pointer; border-radius: 1.3rem; border: 1.5px solid var(--line); background: #fff; transition: border-color .25s, box-shadow .25s, transform .3s var(--ease-out); }
.choice-card:hover { border-color: #CFC6EC; transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(108,71,255,.45); }
.peer:checked + .choice-card, .choice-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(108,71,255,.14), 0 18px 36px -22px rgba(108,71,255,.5); }
.choice-check { position: absolute; top: .8rem; right: .8rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); transition: all .35s var(--ease-spring); z-index: 3; }
.peer:checked + .choice-card .choice-check, .choice-card.is-selected .choice-check { opacity: 1; transform: scale(1); }
.peer:checked + .choice-card .choice-icon { background: var(--brand-gradient); color: #fff; transform: rotate(-6deg) scale(1.06); }
.choice-icon { transition: all .35s var(--ease-spring); }

/* =====================================================================
   Dashboard
   ===================================================================== */
.side-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: .9rem; font-size: .88rem; font-weight: 600; color: #6B6585; transition: background-color .2s, color .2s; position: relative; }
.side-link:hover { background: #F4F2FA; color: var(--ink); }
.side-link.is-active { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(13,10,31,.6); }
.side-link.is-active .side-icon { color: #C9B8FF; }
.side-link .side-count { margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: .4rem; font-size: .68rem; font-weight: 700; color: #8A84A3; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); font-family: ui-monospace, monospace; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .spark { position: absolute; right: 0; bottom: 0; width: 55%; height: 55%; opacity: .9; pointer-events: none; }

/* Graphique aire (SVG) */
.area-line { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw-line 1.6s var(--ease-out) .2s forwards; }
.area-fill { opacity: 0; animation: fade-in .9s ease .9s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* Barres (ancien graphique, conserve) */
.bars-chart { display: flex; align-items: flex-end; gap: 8px; height: 88px; }
.bars-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bars-chart .bar-track { width: 100%; height: 64px; display: flex; align-items: flex-end; }
.bars-chart .bar-fill { width: 100%; background: var(--brand-gradient); border-radius: 6px 6px 2px 2px; height: 0; animation: bar-grow .8s var(--ease-out) forwards; }
@keyframes bar-grow { from { height: 0; } to { height: var(--h, 60%); } }

/* Anneau de progression */
.ring { --p: 0; --size: 3.6rem; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--primary) calc(var(--p) * 1%), #ECE8F6 0); transition: --p 1s; }
.ring > span { width: calc(var(--size) - 10px); height: calc(var(--size) - 10px); border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; }

/* Palette de commandes (Ctrl+K) */
.cmdk-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(13,10,31,.45); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; }
.cmdk-backdrop.is-open { display: flex; animation: fade-in .2s ease; }
.cmdk { width: min(100%, 36rem); background: #fff; border-radius: 1.4rem; box-shadow: 0 40px 80px -20px rgba(13,10,31,.5); overflow: hidden; animation: pop-in .3s var(--ease-spring); }
.cmdk-item { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: .9rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.cmdk-item.is-active, .cmdk-item:hover { background: #F4F1FF; color: var(--primary); }

/* Drawer / modale generique */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(13,10,31,.5); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop.is-open { display: flex; animation: fade-in .2s ease; }
.modal-panel { background: #fff; border-radius: 1.6rem; width: min(100%, 30rem); max-height: 90vh; overflow: auto; box-shadow: 0 40px 80px -20px rgba(13,10,31,.5); animation: pop-in .35s var(--ease-spring); }

/* Tri par glisser-deposer (SortableJS) */
.sortable-ghost { opacity: .35; }
.sortable-chosen { box-shadow: 0 20px 40px -18px rgba(108,71,255,.5); background: #fff; }
.drag-handle { cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; }

/* Confettis */
.confetti-piece { position: fixed; top: -12px; width: 8px; height: 14px; opacity: .95; z-index: var(--z-toast); pointer-events: none; animation: confetti-fall 3s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } }

/* Anciennes classes conservees pour compatibilite */
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: aurora-drift 14s ease-in-out infinite; pointer-events: none; }
.blob-1 { background: #9F80FF; width: 420px; height: 420px; top: -120px; right: -100px; }
.blob-2 { background: #FFB08F; width: 320px; height: 320px; bottom: -80px; left: -60px; animation-delay: -5s; }
.blob-3 { background: #E08BFF; width: 260px; height: 260px; top: 40%; left: 30%; animation-delay: -9s; opacity: .35; }

/* =====================================================================
   Accessibilite : mouvement reduit
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .area-line { stroke-dashoffset: 0; }
    .area-fill { opacity: 1; }
}