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

/* ── BUREAU : PALETTE ────────────────────────────────────────────── */
/*                                                                      */
/*  Back-office interne kwargs — sobriété, encre, autorité tranquille.  */
/*  Bleu encre primaire, laiton chaud en accent (mobilier de bureau).   */
/*  Écrase la palette poesie par cascade CSS.                           */
/*                                                                      */
/* ─────────────────────────────────────────────────────────────────── */

:root {

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

    --ks-paper:     #f4f2ee;   /* papier — fond clair                     */
    --ks-charcoal:  #15181c;   /* charbon — fond sombre                   */
    --ks-ink:       #2b3a4a;   /* encre — primaire, autorité              */
    --ks-brass:     #b08442;   /* laiton — accent, action                 */
    --ks-sage:      #5c7a5c;   /* vert sauge — succès                     */
    --ks-brick:     #9d3b2f;   /* rouge brique — danger, erreur           */
    --ks-gold:      #cda434;   /* or — attention, warning                 */
    --ks-steel:     #3f6b8a;   /* acier bleu — info                       */

    /* ── 2. Variantes thème sombre ──────────────────────────────── */

    --ks-ink-light:    #5a7388;  /* encre éclaircie pour fond sombre         */
    --ks-brass-light:  #cda36b;  /* laiton éclairci pour fond sombre        */

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

    --ks-surface-light: var(--ks-paper);
    --ks-surface-dark:  var(--ks-charcoal);

    --ks-primary:       var(--ks-ink);
    --ks-primary-rgb:   43, 58, 74;

    --ks-secondary:     var(--ks-brass);
    --ks-secondary-rgb: 176, 132, 66;

    --ks-success:       var(--ks-sage);
    --ks-success-rgb:   92, 122, 92;

    --ks-danger:        var(--ks-brick);
    --ks-danger-rgb:    157, 59, 47;

    --ks-warning:       var(--ks-gold);
    --ks-warning-rgb:   205, 164, 52;

    --ks-info:          var(--ks-steel);
    --ks-info-rgb:      63, 107, 138;

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

    --ks-brand-accent:  var(--ks-brass);
}

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

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

/* ── 6. Surcharges composants ───────────────────────────────────── */

.btn-warning {
    color: var(--ks-charcoal);
}

.btn-warning:hover,
.btn-warning:active {
    color: var(--ks-charcoal);
}

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

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

/* ── 7. Thème sombre ─────────────────────────────────────────────── */

[data-bs-theme="dark"] {
    --ks-brand-accent: var(--ks-brass-light);
}

/* ── 8. Composants pointeuse (app pointage) ──────────────────────── */
/*  Portés de workloadr, réaccordés à la palette Bureau : sauge pour le   */
/*  départ, laiton pour l'état « en cours » et le chrono, encre pour les  */
/*  barres de la semaine.                                                 */

.wl-start {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--ks-sage);   /* vert sauge : bouton démarrer */
    color: #fff;
    box-shadow: 0 .3rem .75rem rgba(92, 122, 92, .3);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* En POST, le bouton-pointeuse est un <button> : on neutralise le natif. */
button.wl-start {
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.wl-start:hover,
.wl-start:focus {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(92, 122, 92, .4);
}

/* État « session en cours » : le bouton devient STOP (accent laiton). */
.wl-start--running {
    background-color: var(--ks-brass);
    box-shadow: 0 .3rem .75rem rgba(176, 132, 66, .3);
}

.wl-start--running:hover,
.wl-start--running:focus {
    box-shadow: 0 .5rem 1rem rgba(176, 132, 66, .4);
}

.wl-start--running .wl-start-pulse {
    border-color: var(--ks-brass);
}

.wl-start:focus-visible {
    outline: 3px solid var(--ks-sage);
    outline-offset: 4px;
}

/* Variante compacte (en-tête et navbar) : même identité, plus petite. */
.wl-start--sm .bi {
    font-size: 1rem;
    margin-left: 0;
}

/* Chrono vivant de la navbar : pilule compacte, accent laiton (cohérent  */
/* avec l'état STOP). Purement informatif.                                */
.wl-chrono {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border-radius: 2rem;
    background-color: color-mix(in srgb, var(--ks-brass) 14%, transparent);
    color: var(--ks-brass);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.wl-chrono .bi {
    font-size: 1.05rem;
}

/* Chiffres à chasse fixe : la largeur ne tremble pas à chaque seconde. */
.wl-chrono-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Anneau de pulsation : invite au geste, évoque le temps qui tourne. */
.wl-start-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ks-sage);
}

@media (prefers-reduced-motion: no-preference) {
    .wl-start-pulse {
        animation: wl-start-pulse 2.4s ease-out infinite;
    }
}

@keyframes wl-start-pulse {
    0%   { transform: scale(1);   opacity: .6; }
    100% { transform: scale(1.5); opacity: 0;  }
}

/* ── Heatmap de régularité (type « contributions ») ─────────────────── */
.hm-scroll { overflow-x: auto; }
.hm-grid-wrap { min-width: max-content; }
.hm-months { position: relative; height: 12px; margin-left: 16px; }
.hm-month { position: absolute; font-size: 8px; white-space: nowrap; opacity: .7; }
.hm-body { display: flex; gap: 2px; align-items: flex-start; }
.hm-days {
    display: grid; grid-template-rows: repeat(7, 12px); gap: 2px;
    width: 14px; font-size: 8px; line-height: 12px; opacity: .55; text-align: right;
}
.hm-cells {
    display: grid; grid-template-rows: repeat(7, 12px);
    grid-auto-flow: column; grid-auto-columns: 12px; gap: 2px;
}
.hm-cell { width: 12px; height: 12px; border-radius: 2px; }
.hm-future { background: color-mix(in srgb, var(--bs-body-color) 5%, transparent); }
.hm-0 { background: color-mix(in srgb, var(--bs-body-color) 12%, transparent); }
.hm-1 { background: color-mix(in srgb, var(--ks-sage) 30%, transparent); }
.hm-2 { background: color-mix(in srgb, var(--ks-sage) 50%, transparent); }
.hm-3 { background: color-mix(in srgb, var(--ks-sage) 75%, transparent); }
.hm-4 { background: var(--ks-sage); }
.hm-legend {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 3px; margin-top: 5px; font-size: 9px; opacity: .7;
}
.hm-legend .hm-cell { width: 9px; height: 9px; }

/* ── Graphique de la semaine courante ───────────────────────────────── */
.wk-chart { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 64px; padding-top: 6px; }
.wk-col { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 34px; }
.wk-val { font-size: .6rem; margin-bottom: 1px; }
.wk-bar { width: 70%; border-radius: 3px 3px 0 0; background: var(--ks-ink); }
.wk-bar--today { opacity: .7; }
.wk-bar--empty { width: 70%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--bs-body-color) 25%, transparent); }
.wk-lbl { font-size: .6rem; margin-top: 2px; }
.wk-lbl--today { font-weight: 700; }
.wk-lbl--future { opacity: .4; }