/* ============================================================================
 * RH SAMKO · Socle visuel de l'espace collaborateur (lot C, 2026-08-03).
 *
 * ⚠️ POURQUOI UNE FEUILLE À PART, et pas une modification de style.css :
 * style.css est partagé avec les DOUZE pages de l'espace admin. Y toucher
 * repeindrait l'administration, qui n'est pas dans le périmètre de la refonte.
 * Ce fichier n'est chargé que par /collab/*.html : l'admin garde son apparence.
 *
 * Chargé APRÈS style.css et tw.css : il surcharge, il ne remplace pas. Retirer
 * la balise <link> suffit à revenir à l'ancien rendu — c'est la sortie de
 * secours si quelque chose se passe mal en production.
 *
 * Direction validée par Charles :
 *   - le navy passe de couleur d'action à couleur de STRUCTURE ;
 *   - le bleu est remonté en luminosité (#1a5490 est illisible sur fond sombre
 *     et trop sourd en plein jour sur un téléphone) ;
 *   - l'or ne signale plus que la nouveauté et ce qui attend une action ;
 *   - les bordures grises d'un pixel cèdent la place à des surfaces posées,
 *     avec une profondeur donnée par des ombres TEINTÉES (jamais noires) ;
 *   - Manrope pour les titres et les chiffres, Inter conservée pour le texte ;
 *   - le mode sombre est un vrai thème, défini par tokens, pas une inversion.
 * ==========================================================================*/

:root {
    /* Fonds et surfaces */
    --c-fond: #f4f7fb;
    --c-surf: #ffffff;
    --c-surf-2: #eef3f9;
    --c-bord: rgba(15, 42, 71, .08);

    /* Texte */
    --c-ink: #0b1b2c;
    --c-ink-2: #4a5c71;
    --c-ink-3: #7a8ea6;

    /* Marque */
    --c-navy: #0f2a47;
    /* Plus lumineux que l'ancien #1a5490, mais pas au point de tomber sous le
       seuil de contraste : #2f7cc9 donnait 4,4:1 sur blanc, en dessous des
       4,5:1 exigés pour du petit texte. Celui-ci tient ~5,8:1. */
    --c-bleu: #1f6bb5;
    --c-bleu-doux: rgba(31, 107, 181, .12);
    --c-or: #b98d3a;
    --c-or-doux: rgba(201, 169, 97, .18);

    /* États · délibérément HORS palette de marque : un statut doit se lire
       sans lire le texte, donc il ne doit jamais partager la couleur d'action. */
    --c-ok: #1f8f63;
    --c-warn: #c47a26;
    --c-bad: #c25151;

    /* Profondeur : ombres teintées navy, jamais du noir pur. */
    --o-1: 0 1px 2px rgba(15, 42, 71, .05), 0 8px 20px -14px rgba(15, 42, 71, .3);
    --o-2: 0 2px 6px rgba(15, 42, 71, .07), 0 18px 36px -20px rgba(15, 42, 71, .4);

    /* Espacement · six pas, au lieu des valeurs improvisées page par page. */
    --e-1: 4px;  --e-2: 8px;  --e-3: 12px;
    --e-4: 16px; --e-5: 24px; --e-6: 40px;

    /* Rayons */
    --r-2: 12px; --r-3: 16px; --r-4: 20px;

    --f-titre: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html[data-theme="dark"] {
    --c-fond: #080f1a;
    --c-surf: #0f1b2b;
    --c-surf-2: #16263a;
    --c-bord: rgba(255, 255, 255, .09);
    --c-ink: #eaf1f9;
    --c-ink-2: #a3b6cb;
    --c-ink-3: #6d829a;
    --c-navy: #cddcec;
    --c-bleu: #5aa5e8;
    --c-bleu-doux: rgba(90, 165, 232, .15);
    --c-or: #e8be6e;
    --c-or-doux: rgba(232, 190, 110, .15);
    --c-ok: #43b98a;
    --c-warn: #dda05a;
    --c-bad: #e08585;
    --o-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px -14px rgba(0, 0, 0, .8);
    --o-2: 0 2px 8px rgba(0, 0, 0, .45), 0 20px 40px -22px rgba(0, 0, 0, .9);
}

/* ---------------------------------------------------------------- Fond ---- */
/* ⚠️ On NE touche PAS au `body`. Les pages portent la classe `.bg-samko-ivory`,
   plus spécifique que le sélecteur d'élément : seule la COULEUR DU TEXTE aurait
   pris, donnant du texte clair sur fond ivoire en thème sombre — illisible.
   Constaté en production le 2026-08-03 et retiré aussitôt. Le fond de page
   reste géré par style.css et par les classes des pages, jusqu'à ce que les
   lots D et E reprennent ces pages. */

/* Lot D : le fond de page vient de la CLASSE `.bg-samko-ivory` (style.css), pas
   du `body`. On la surcharge ici — même spécificité, mais collab-ui.css est
   déclaré après style.css, donc il gagne, et uniquement sur /collab/. Sans ça
   les cartes devenaient sombres au-dessus d'un fond ivoire resté clair.
   L'espace admin, qui utilise la même classe, n'est pas concerné. */
.bg-samko-ivory { background-color: var(--c-fond); }

/* ------------------------------------------------------------ Typographie -- */
/* Manrope remplace Playfair Display : titres serrés, chiffres tabulaires.
   `.font-display` est la classe historique des titres de l'app. */
.font-display,
.app-bar-title,
h1, h2, h3 {
    font-family: var(--f-titre);
    font-weight: 800;
    letter-spacing: -.022em;
}
.app-bar-title { font-size: 1.16rem; color: var(--c-ink); }
.app-bar-sub { color: var(--c-ink-3); }

/* Les chiffres alignés en colonne doivent être tabulaires (soldes, heures,
   compteurs) : sinon les colonnes dansent d'une ligne à l'autre. */
.agr-pct, .grp-count, .grp-meta, .tk-hint, .nb, .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Barre -- */
.app-bar {
    background: color-mix(in srgb, var(--c-fond) 88%, transparent);
    border-bottom: 1px solid var(--c-bord);
}
.app-bar-back, .app-bar-aide { color: var(--c-ink); border-radius: var(--r-2); }

/* ------------------------------------------------------------------ Carte -- */
/* Le changement le plus visible : plus de bordure grise, une surface posée. */
.carte {
    background: var(--c-surf);
    border: 0;
    border-radius: var(--r-3);
    box-shadow: var(--o-1);
}
.carte:active { transform: scale(.995); }

/* ------------------------------------------------- Groupes et lignes tâches - */
.grp {
    background: var(--c-surf);
    border: 0;
    border-radius: var(--r-3);
    box-shadow: var(--o-1);
    overflow: hidden;
}
.grp-head { background: transparent; }
.grp-nom { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.018em; color: var(--c-ink); }
.grp-meta, .grp-equipe { color: var(--c-ink-3); }
.grp-count {
    background: var(--c-surf-2);
    color: var(--c-ink-2);
    border-radius: 999px;
    font-weight: 700;
}
.grp-body { border-top: 1px solid var(--c-bord); }

.tk-row { background: transparent; border-bottom: 1px solid var(--c-bord); }
.tk-row:last-child { border-bottom: 0; }
.tk-titre { font-weight: 600; color: var(--c-ink); }
.tk-resp { color: var(--c-ink-3); }
.tk-resp.moi { color: var(--c-bleu); }
.tk-resp.orphelin { color: var(--c-warn); }
.tk-hint { color: var(--c-ink-3); }

/* Progression : le sujet même de l'application, traitée comme un objet. */
.prog-bar { background: var(--c-surf-2); border-radius: 999px; height: 6px; overflow: hidden; }
.prog-fill { background: linear-gradient(90deg, var(--c-bleu), color-mix(in srgb, var(--c-bleu) 60%, #fff)); border-radius: 999px; }
.agr-pct { color: var(--c-ink-2); font-family: var(--f-titre); font-weight: 800; }

/* ------------------------------------------------------------- Étiquettes -- */
.tk-role { background: var(--c-bleu-doux); color: var(--c-bleu); font-family: var(--f-titre); font-weight: 800; }
.tk-role.equipe { background: var(--c-surf-2); color: var(--c-ink-2); }

/* ---------------------------------------------------------------- Filtres -- */
.sf-chip {
    background: var(--c-surf);
    border: 1px solid var(--c-bord);
    border-radius: 999px;
    color: var(--c-ink-2);
    font-weight: 600;
}
.sf-chip.actif {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: #fff;
}
html[data-theme="dark"] .sf-chip.actif { background: var(--c-bleu); color: #04101d; }

/* ----------------------------------------------------------------- Boutons - */
.btn-collab {
    background: var(--c-navy);
    border-radius: var(--r-2);
    font-family: var(--f-titre);
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: var(--o-1);
}
html[data-theme="dark"] .btn-collab { background: var(--c-bleu); color: #04101d; }
.btn-retour, .btn-projet {
    background: var(--c-surf);
    border: 1px solid var(--c-bord);
    border-radius: var(--r-2);
    color: var(--c-ink-2);
    font-weight: 600;
}

/* -------------------------------------------------- Navigation (mobile) ---- */
/* Barre flottante : le geste central de l'app devient le point le plus visible. */
.collab-nav {
    background: color-mix(in srgb, var(--c-surf) 92%, transparent);
    border-top: 1px solid var(--c-bord);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}
.collab-nav-item { color: var(--c-ink-3); }
.collab-nav-item.is-active { color: var(--c-bleu); }
.collab-nav-fab { box-shadow: 0 8px 20px -6px var(--c-or-doux); }

/* --------------------------------------------------- Sidebar (desktop) ----- */
.collab-sidebar { background: var(--c-navy); }
html[data-theme="dark"] .collab-sidebar { background: #0a1626; }

/* -------------------------------------------------------------- Formulaires */
.form-input, .form-select {
    background: var(--c-surf);
    border: 1px solid var(--c-bord);
    border-radius: var(--r-2);
    color: var(--c-ink);
}
.form-input:focus, .form-select:focus {
    outline: 2px solid var(--c-bleu);
    outline-offset: 1px;
    border-color: transparent;
}
.form-label { color: var(--c-ink-2); font-weight: 600; }

/* ------------------------------------------------------------------- Aide -- */
.aide-card { background: var(--c-surf); border: 0; border-radius: var(--r-3); box-shadow: var(--o-1); }
.aide-titre { font-family: var(--f-titre); font-weight: 800; color: var(--c-ink); letter-spacing: -.015em; }
.aide-cat { color: var(--c-ink-3); }
.aide-hero h1 { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.025em; }
.aide-search { background: var(--c-surf); border: 1px solid var(--c-bord); border-radius: var(--r-2); color: var(--c-ink); }

/* --------------------------------------------------------------- Confort --- */
:focus-visible { outline: 2px solid var(--c-bleu); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}