/*
 * Copyright (c) 2025-2026.
 * kwargs SRL — Ingénierie logicielle, Bruxelles
 * Tous droits réservés.
 */

/* ── WORKLOADR : PALETTE ─────────────────────────────────────────── */
/*                                                                      */
/*  Identité visuelle workloadr — rythme / équilibre / ajustement       */
/*  Écrase la palette poesie par cascade CSS.                           */
/*  colors.css fait le mapping --ks-* → --bs-* automatiquement.         */
/*                                                                      */
/* ─────────────────────────────────────────────────────────────────── */

:root {

    /* ── 1. Les 8 couleurs ───────────────────────────────────────── */

    --ks-chalk:       #EEF4ED;   /* menthe givrée — fond clair             */
    --ks-night:       #0a0a2e;   /* nuit sourde — fond sombre               */
    --ks-indigo:      #434371;   /* indigo crépusculaire — action           */
    --ks-tangerine:   #ff7f11;   /* mandarine — énergie, accent             */
    --ks-sea-green:   #488b49;   /* vert marin — succès, validation         */
    --ks-wine:        #800e13;   /* vin sombre — danger, erreur             */
    --ks-canary:      #faff81;   /* canari — signal, attention              */
    --ks-mint:        #7AE7C7;   /* menthe vive — info, technique           */

    /* ── 2. Assignation des rôles ─────────────────────────────────── */

    --ks-surface-light: var(--ks-chalk);
    --ks-surface-dark:  var(--ks-night);

    --ks-primary:       var(--ks-indigo);
    --ks-primary-rgb:   67, 67, 113;

    --ks-secondary:     var(--ks-tangerine);
    --ks-secondary-rgb: 255, 127, 17;

    --ks-success:       var(--ks-sea-green);
    --ks-success-rgb:   72, 139, 73;

    --ks-danger:        var(--ks-wine);
    --ks-danger-rgb:    128, 14, 19;

    --ks-warning:       var(--ks-canary);
    --ks-warning-rgb:   250, 255, 129;

    --ks-info:          var(--ks-mint);
    --ks-info-rgb:      122, 231, 199;

    /* ── 3. Forme ─────────────────────────────────────────────────── */

    --ks-border-radius: 0.375rem;   /* Bootstrap défaut */

    /* ── 4. Logo typographique ────────────────────────────────────── */

    --ks-brand-accent:  var(--ks-tangerine);

    /* ── 5. Dashboard header ──────────────────────────────────────── */

    --ks-dash-header-bg: var(--ks-indigo);
    --ks-dash-header-color: #fff;
}

[data-bs-theme="dark"] {
    --ks-brand-accent:  color-mix(in srgb, var(--ks-tangerine) 75%, white);
    --ks-dash-header-bg: color-mix(in srgb, var(--ks-indigo) 75%, black);
    --ks-dash-header-color: #fff;
}

/* ── Dashboard header ────────────────────────────────────────────── */

#dash-header .page-header-title,
#dash-header .page-header-text {
    color: var(--ks-dash-header-color);
}

#dash-header .page-header-text {
    opacity: .75;
}

#dash-header .nav-link {
    color: var(--ks-dash-header-color);
    opacity: .6;
}

#dash-header .nav-link.active {
    color: var(--ks-dash-header-color);
    opacity: 1;
}

/* ── Brand typographique (navbar) ────────────────────────────────── */

.wrkldr-brand {
    font-size: 1.25rem;
    letter-spacing: -.02em;
}

.wrkldr-brand-light {
    font-weight: 300;
    color: var(--bs-body-color);
}

.wrkldr-brand-accent {
    font-weight: 700;
    color: var(--ks-brand-accent);
}

.wrkldr-brand-bold {
    font-weight: 700;
    color: var(--bs-body-color);
}

/* ── Scroll offset pour navbar sticky ────────────────────────────── */

section[id] {
    scroll-margin-top: 5rem;
}

/* ── Surcharges composants ───────────────────────────────────────── */

#btn-back-to-top {
    background-color: var(--ks-tangerine);
}

#btn-back-to-top:hover {
    background-color: var(--ks-indigo);
}

#btn-back-to-top:focus-visible {
    outline-color: var(--ks-tangerine);
}

/* ── Dashboard : pills navigation ────────────────────────────────── */

.nav-pills .nav-link {
    color: var(--bs-body-color);
}

.nav-pills .nav-link.active {
    background-color: var(--ks-mint);
    color: var(--ks-night);
}

/* ── Dashboard : pointeuse pulse ─────────────────────────────────── */

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ── Card hover (projets cliquables) ─────────────────────────────── */

.card-hover {
    transition: box-shadow .2s ease, transform .2s ease;
}

.card-hover:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    transform: translateY(-2px);
}

/* ── Scroll tabs mobile ──────────────────────────────────────────── */

.nav-underline.overflow-auto::-webkit-scrollbar {
    display: none;
}

/* ── Screenshots en perspective ──────────────────────────────────── */

.screenshot-tilt {
    transform: perspective(1000px) rotateY(-12deg) rotateX(3deg);
    transition: transform .4s ease;
}

.screenshot-tilt:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.screenshot-tilt-reverse {
    transform: perspective(1000px) rotateY(12deg) rotateX(3deg);
    transition: transform .4s ease;
}

.screenshot-tilt-reverse:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

/* ── Séparateur vertical responsive (desktop only) ──────────────── */

@media (min-width: 992px) {
    .border-end-lg {
        position: relative;
    }
    .border-end-lg::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--bs-border-color);
    }
}