/* =============
   UPKEO – THEME (harmonisé)
   ============= */

/* =========================
   GLOBAL TOKENS (ne dépendent pas du thème)
   ========================= */
:root{
    --upk-header-offset: 40px;
    --upk-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Marque ORANGE (base) */
    --upk-orange: #FC910C;
    --upk-orange-dark: #cf4e18;

    /* Violet (bordure light) */
    --upk-violet-top: #a79bff;
    --upk-violet-bottom: #6259CA;

    --pro-gold-light: #f9e5a8;
    --pro-gold: #d3a64f;
    --pro-gold-dark: #a7702a;

    /* Contour gradient (sera override en light) */
    --upk-grad-border: linear-gradient(180deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);

    /* Épaisseur du contour + rayon */
    --upk-gborder-w: 2px;
    --upk-gborder-r: 1.25rem;
}

/* Fix ancres : place réservée sous header fixed-top */
html{ scroll-padding-top: var(--upk-header-offset); }
section[id]{ scroll-margin-top: var(--upk-header-offset); }

/* =========================
   THEME VARIABLES — DARK
   ========================= */
html[data-bs-theme="dark"]{
    --upk-base-1: #26273a;
    --upk-base-2: #2e2f47;
    --upk-base-3: #343658;

    --upk-accent: #7c6cff;
    --upk-accent-2: #a79bff;
    --upk-accent-3: #a79bff;

    --upk-ink: #F5F6FF;
    --upk-ink-2: rgba(245, 246, 255, .78);
    --upk-ink-3: rgba(245, 246, 255, .58);

    --upk-border: rgba(255, 255, 255, .10);
    --upk-shadow: 0 18px 45px rgba(0, 0, 0, .45);

    --upk-nav-link: rgba(245, 246, 255, .78);
    --upk-nav-link-hover: #ffffff;
    --upk-nav-link-active: var(--upk-accent-2);

    --upk-grad-body:
            radial-gradient(circle at 18% 0%, rgba(124, 108, 255, .18) 0, transparent 58%),
            radial-gradient(circle at 100% 10%, rgba(52, 54, 88, .55) 0, transparent 55%),
            radial-gradient(circle at 0% 100%, rgba(46, 47, 71, .65) 0, transparent 55%);

    --upk-grad-navbar: linear-gradient(90deg, rgba(35, 36, 54, .92), rgba(46, 47, 71, .92));

    --upk-grad-brand: linear-gradient(0deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);
    --upk-grad-badge: linear-gradient(180deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);

    --upk-grad-btn: linear-gradient(135deg, var(--upk-orange), rgba(252,145,12,.86));
    --upk-grad-btn-hover: linear-gradient(135deg, rgba(252,145,12,.95), var(--upk-orange-dark));

    --upk-soft-bg: rgba(124, 108, 255, .16);
    --upk-soft-border: rgba(124, 108, 255, .40);

    --upk-grad-icon: linear-gradient(135deg, rgba(124,108,255,.95), rgba(167,155,255,.75));
    --upk-grad-glass:
            radial-gradient(circle at 0 0, rgba(255, 255, 255, .06), transparent 55%),
            linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .22));

    --upk-grad-border: linear-gradient(180deg, var(--upk-orange) 0%, var(--upk-orange-dark) 100%);
}

/* =========================
   THEME VARIABLES — LIGHT
   ========================= */
html[data-bs-theme="light"]{
    --upk-base-1: #F4F6FB;
    --upk-base-2: #FFFFFF;
    --upk-base-3: #F8FAFF;

    --upk-accent: #6259CA;
    --upk-accent-2: #4f47b8;
    --upk-accent-3: #3b31b8;

    --upk-ink: #111319;
    --upk-ink-2: rgba(17, 19, 25, .78);
    --upk-ink-3: rgba(17, 19, 25, .58);

    --upk-border: rgba(17, 19, 25, .12);
    --upk-shadow: 0 18px 45px rgba(17, 19, 25, .12);

    --upk-nav-link: rgba(17, 19, 25, .78);
    --upk-nav-link-hover: #111319;
    --upk-nav-link-active: var(--upk-accent-2);

    --upk-grad-body:
            radial-gradient(circle at 18% 0%, rgba(98, 89, 202, .12) 0, transparent 58%),
            radial-gradient(circle at 100% 10%, rgba(252, 145, 12, .10) 0, transparent 55%);

    --upk-grad-navbar: linear-gradient(90deg, rgba(255,255,255,.92), rgba(244,246,251,.92));

    --upk-grad-brand: linear-gradient(180deg, var(--upk-accent) 0%, var(--upk-accent-3) 100%);
    --upk-grad-badge: linear-gradient(180deg, var(--upk-accent) 0%, var(--upk-accent-3) 100%);

    --upk-grad-btn: linear-gradient(135deg, var(--upk-orange), rgba(252,145,12,.92));
    --upk-grad-btn-hover: linear-gradient(135deg, var(--upk-orange-dark), var(--upk-orange));

    --upk-soft-bg: rgba(98, 89, 202, .10);
    --upk-soft-border: rgba(98, 89, 202, .32);

    --upk-grad-icon: linear-gradient(135deg, rgba(98,89,202,.85), rgba(252,145,12,.70));
    --upk-grad-glass:
            radial-gradient(circle at 0 0, rgba(98, 89, 202, .08), transparent 55%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .86));

    --upk-grad-border: linear-gradient(180deg, var(--upk-violet-top) 0%, var(--upk-violet-bottom) 100%);
}

/* =========================
   BASE
   ========================= */
* { scroll-behavior: smooth; }
body{
    font-family: var(--upk-font);
    color: var(--upk-ink);
    background: var(--upk-grad-body), var(--upk-base-1);
}
.muted{ color: var(--upk-ink-2); }
.section-padding{ padding-top: 5rem; padding-bottom: 5rem; }
#hero{ min-height: 100vh; display:flex; align-items:center; }

/* =========================
   NAVBAR
   ========================= */
.navbar{
    background: var(--upk-grad-navbar);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--upk-border);
}
.navbar .nav-link{
    color: var(--upk-nav-link) !important;
    font-weight: 600;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
    color: var(--upk-nav-link-hover) !important;
}
.navbar .nav-link.active{
    color: var(--upk-nav-link-active) !important;
}
.navbar .nav-link i{ opacity: .92; }

.upk-navbar-logo{
    width: 140px;
    display: block;
    margin-bottom: 10px; 
}

/* =========================
   GRADIENT BORDER
   ========================= */
.upk-gborder{
    position: relative;
    border-radius: var(--upk-gborder-r);
    z-index: 0;
}
.upk-gborder::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    padding: var(--upk-gborder-w);
    background: var(--upk-grad-border);
    z-index:-1;

    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    mask-composite: exclude;

    filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
html[data-bs-theme="dark"] .upk-gborder::before{
    filter: drop-shadow(0 10px 22px rgba(252,145,12,.18));
}
html[data-bs-theme="light"] .upk-gborder::before{
    filter: drop-shadow(0 10px 22px rgba(98,89,202,.16));
}

/* =========================
   BRAND / BADGES
   ========================= */
.brand-gradient{
    background: var(--upk-grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
html[data-bs-theme="light"] .brand-gradient{
    text-shadow: 0 6px 18px rgba(17,19,25,.10);
}

.badge-upkeo{
    background: var(--upk-grad-badge);
    color: #e9f0ff;
    font-weight: 800;
    box-shadow: rgba(0,0,0,.35) 0 6px 10px -6px inset;
    border: var(--upk-soft-bg) 2px solid;
}
html[data-bs-theme="light"] .badge-upkeo{
    color: #fff;
    box-shadow: rgba(0,0,0,.08) 0 6px 10px -6px inset;
}

.badge-upkeo.badge-outline{
    background: rgba(0,0,0,.12);
    color: var(--upk-ink);
    border: 0 !important;
    position: relative;
    z-index: 0;
    border-radius: 999px;
    padding: .35rem .6rem;
}
html[data-bs-theme="light"] .badge-upkeo.badge-outline{
    background: rgba(17,19,25,.04);
}
.badge-upkeo.badge-outline::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    padding: 1px;
    background: var(--upk-grad-border);
    z-index:-1;

    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* =========================
   BUTTONS
   ========================= */
.btn-upkeo{
    color: #111319 !important;
    border: 0 !important;
    background-image: var(--upk-grad-btn) !important;
    background-color: transparent !important;
    background-size: 200% 200%;
    background-position: 0% 50%;
    transition: background-position .25s ease, transform .12s ease, box-shadow .2s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.btn-upkeo:hover,
.btn-upkeo:focus{
    background-image: var(--upk-grad-btn-hover) !important;
    background-position: 100% 50%;
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.btn-upkeo:active{
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.btn-upkeo-soft{
    color: var(--upk-ink) !important;
    background: var(--upk-soft-bg) !important;
    border: 1px solid var(--upk-soft-border) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
html[data-bs-theme="dark"] .btn-upkeo-soft:hover,
html[data-bs-theme="dark"] .btn-upkeo-soft:focus{
    background: rgba(124,108,255,.22) !important;
    border-color: rgba(124,108,255,.55) !important;
}
html[data-bs-theme="light"] .btn-upkeo-soft:hover,
html[data-bs-theme="light"] .btn-upkeo-soft:focus{
    background: rgba(98,89,202,.16) !important;
    border-color: rgba(98,89,202,.45) !important;
}

.theme-toggle{
    border: 1px solid var(--upk-border);
    background: rgba(255,255,255,.06);
    color: var(--upk-ink);
}
html[data-bs-theme="light"] .theme-toggle{
    background: rgba(17,19,25,.04);
}

/* =========================
   CARDS
   ========================= */
.glass-card{
    background: var(--upk-grad-glass);
    border: 0 !important;
    box-shadow: var(--upk-shadow);
}

.feature-card{
    background: linear-gradient(145deg, rgba(52, 54, 88, .92), rgba(46, 47, 71, .92));
    border-radius: 1.25rem;
    border: 0 !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .35);
    height: 100%;
}
html[data-bs-theme="light"] .feature-card{
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
    box-shadow: 0 14px 35px rgba(17, 19, 25, .10);
}
.feature-card .icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--upk-grad-icon);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.feature-card .icon i{
    color:#111319;
    font-size:1.35rem;
}

.module-card{
    background:
            radial-gradient(circle at top left, rgba(0, 16, 236, 0.15), transparent 55%),
            radial-gradient(circle at top right, rgba(124,108,255,.14), transparent 55%),
            rgba(46,47,71,.78);
    border: 0 !important;
    border-radius: 1.2rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
html[data-bs-theme="light"] .module-card{
    background:
            radial-gradient(circle at top left, rgba(252,145,12,.08), transparent 55%),
            radial-gradient(circle at top right, rgba(98,89,202,.10), transparent 55%),
            rgba(255,255,255,.98);
}
.module-card .badge{ font-size:.68rem; }

/* =========================
   USECASES / STEPS
   ========================= */
.usecase-step{
    border: 1px solid var(--upk-border);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
html[data-bs-theme="light"] .usecase-step{
    background: rgba(17,19,25,.02);
}
.usecase-bullet{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--upk-grad-icon);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 46px;
}
.usecase-bullet i{
    color: #111319;
    font-size: 1.25rem;
}
.usecase-meta{
    font-size: .85rem;
    color: var(--upk-ink-3);
}
.usecase-modules .badge{
    border: 1px solid var(--upk-border);
    background: rgba(255,255,255,.05);
    color: var(--upk-ink);
}
html[data-bs-theme="light"] .usecase-modules .badge{
    background: rgba(17,19,25,.03);
}

/* =========================
   FORMS (inclut select/options)
   ========================= */
.form-control,
.form-select,
textarea.form-control{
    background-color: rgba(0,0,0,.16);
    border-color: rgba(255,255,255,.14);
    color: var(--upk-ink);
}

html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] textarea.form-control{
    background-color: rgba(255,255,255,.92);
    border-color: rgba(17,19,25,.14);
    color: var(--upk-ink);
    box-shadow: 0 10px 24px rgba(17,19,25,.06);
}
html[data-bs-theme="light"] .form-control::placeholder,
html[data-bs-theme="light"] textarea.form-control::placeholder{
    color: rgba(17,19,25,.45);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
    border-color: var(--upk-orange);
    box-shadow: 0 0 0 .25rem rgba(252,145,12,.20);
}

/* Checkbox/radio */
.form-check-input{
    border-color: rgba(124,108,255,.55) !important;
    background-color: rgba(0,0,0,.12);
}
html[data-bs-theme="light"] .form-check-input{
    border-color: rgba(98,89,202,.45) !important;
    background-color: rgba(17,19,25,.02);
}
.form-check-input:focus{
    box-shadow: 0 0 0 .25rem rgba(124,108,255,.18);
    border-color: rgba(124,108,255,.75) !important;
}
html[data-bs-theme="light"] .form-check-input:focus{
    box-shadow: 0 0 0 .25rem rgba(98,89,202,.16);
    border-color: rgba(98,89,202,.65) !important;
}
.form-check-input:checked{
    background-color: var(--upk-accent) !important;
    border-color: var(--upk-accent) !important;
}

/* Honeypot */
.hp-field{
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
}

/* Select/options */
html[data-bs-theme="dark"] select.form-select,
html[data-bs-theme="dark"] .form-select{ color-scheme: dark; }
html[data-bs-theme="dark"] select.form-select option,
html[data-bs-theme="dark"] .form-select option{
    background-color: rgba(10, 11, 18, .98);
    color: var(--upk-ink);
}
html[data-bs-theme="dark"] select.form-select optgroup,
html[data-bs-theme="dark"] .form-select optgroup{
    background-color: rgba(10, 11, 18, .98);
    color: var(--upk-ink-2);
}
html[data-bs-theme="light"] select.form-select,
html[data-bs-theme="light"] .form-select{ color-scheme: light; }
html[data-bs-theme="light"] select.form-select option,
html[data-bs-theme="light"] .form-select option{
    background-color: #ffffff;
    color: var(--upk-ink);
}

/* =========================
   FOOTER
   ========================= */
footer{
    border-top: 1px solid var(--upk-border);
    background: rgba(46,47,71,.70);
}
html[data-bs-theme="light"] footer{
    background: var(--upk-soft-bg);
}
a.text-upkeo{ color: var(--upk-orange); text-decoration:none; }
a.text-upkeo:hover{ color: var(--upk-orange-dark); }

/* Pastille or */
.bg-gold-pill {
    background: linear-gradient(135deg, var(--pro-gold-dark), var(--pro-gold-light));
    color: #111319;
}