/* ==========================================================================
   SoftiField v2 - composants de la charte SoftiROB
   --------------------------------------------------------------------------
   Sections B (base) et C (composes) de design-system.html, copiees regle par
   regle ; seuls changent le suffixe -demo retire, les selecteurs .demo--dark
   (propres a la page de demonstration, le theme sombre passe ici par les
   jetons) et les ecarts marques ECART, tous listes dans
   doc/21-CHARTE-SOFTIROB.md :
     - cibles interactives portees a 44 px (--tap) ;
     - valeurs chiffrees en IBM Plex Mono (la charte les met en Display) ;
     - rayons de 16 px ramenes a --r-lg (regle projet : 12 px au plus) ;
     - contraste AA dans les deux themes : --muted-ink, --brand-fill,
       --brand-ink, --danger-fill, --warning-ink, --pop-* (bloc 2 de
       tokens.css) a la place des jetons de la charte qui n'y arrivent pas ;
     - ajouts absents de la charte : base, focus, icone, theme, case a cocher
       native, modal, toast, etat vide, bouton segmente, glass.
   Dependances : tokens.css (jetons), fonts.css (polices).
   ========================================================================== */

/* ==========================================================================
   BASE (charte, bloc html/body)
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    background: var(--bg-2);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; outline: none; }
a { text-decoration: none; color: inherit; }

/* AJOUT : l'attribut hidden doit gagner sur les display: flex des composants */
[hidden] { display: none !important; }

/* AJOUT : focus clavier toujours visible. La base ci-dessus retire l'outline
   des controles (clic souris) ; :focus-visible le rend au clavier. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* AJOUT : regle projet, tous les chiffres en Plex Mono a chasse fixe */
input[type="number"],
.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* AJOUT : texte reserve aux lecteurs d'ecran */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* AJOUT : icone du sprite /img/icons.svg (SF.ui.icon). Trait 1.7 arrondi,
   comme tous les svg de la charte. */
.icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* AJOUT : bascule de theme (charte : .theme-icon, pilotee ici par data-theme) */
.theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--sun { display: inline-block; }
[data-theme="dark"] .theme-icon--moon { display: none; }
/* AJOUT : pendant une bascule (theme.js), aucune transition. Sinon les
   boutons et entrees de navigation fondent leur fond en 0,1 a 0,15 s alors
   que topbar et canevas changent d'un coup : un carre de l'ancien theme
   reste visible sur la nouvelle topbar. */
.theme-bascule *,
.theme-bascule *::before,
.theme-bascule *::after { transition: none !important; }

/* ==========================================================================
   B1 - BOUTONS
   ========================================================================== */
.btn {
    height: 52px; padding: 0 20px;
    border: none; border-radius: var(--r-md);
    font-family: var(--display); font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; cursor: pointer;
    transition: transform 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ECART : fond --brand-fill au lieu de --brand (texte blanc a 4,6:1 au lieu
   de 3,6:1, tokens.css) ; ombre --brand-fill-deep pour garder le relief */
.btn--primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: 0 3px 0 var(--brand-fill-deep); }
.btn--primary:active { box-shadow: 0 1px 0 var(--brand-fill-deep); }
.btn--ble { background: var(--ble); color: var(--on-ble); box-shadow: 0 3px 0 var(--ble-deep); }
.btn--ble:active { box-shadow: 0 1px 0 var(--ble-deep); }
.btn--ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: var(--bg-2); }
/* ECART : --danger s'eclaircit en sombre (texte blanc a 3,8:1) : fond
   --danger-fill, identique dans les deux themes (4,75:1) */
.btn--danger { background: var(--danger-fill); color: var(--on-brand); }
/* ECART : 44 px au lieu de 40 (cible tactile) */
.btn--small { height: var(--tap); padding: 0 14px; font-size: 13px; }
/* AJOUT : etat desactive (connexion en cours, formulaire invalide) */
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
/* AJOUT : action refusee mais focalisable (aria-disabled) : le clavier et le
   lecteur d'ecran atteignent le bouton et son explication (aria-describedby),
   ce que disabled empeche */
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* AJOUT : pas de survol sur une action refusee, comme .icon-btn[aria-disabled] */
.btn--ghost[aria-disabled="true"]:hover { background: var(--bg); }
.btn--block { width: 100%; }

/* ==========================================================================
   B2 - ICON BUTTON
   ========================================================================== */
.icon-btn {
    /* ECART : 44 px au lieu de 40 (cible tactile) */
    width: var(--tap); height: var(--tap);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.12s ease;
    flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-2); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px;
    background: var(--ble);
    border-radius: 50%;
    border: 2px solid var(--bg);
}
.icon-btn--dark {
    background: #1F2324;
    border-color: #2A2D2E;
    color: #F2F4F2;
}
.icon-btn--dark:hover { background: #14181A; }
.icon-btn--dark .dot { border-color: #1F2324; }
/* AJOUT : meme regle que .btn[aria-disabled] */
.icon-btn:disabled,
.icon-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.icon-btn[aria-disabled="true"]:hover { background: var(--bg); }

/* ==========================================================================
   B3 - CHAMPS DE SAISIE
   ========================================================================== */
.field {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%; max-width: 380px;
}
.field__label {
    font-family: var(--mono); font-size: 11px;
    /* ECART : --ink-soft et non --muted (3,8:1) : il nomme le champ */
    color: var(--ink-soft);
    letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 600;
}
.field__input-wrap {
    height: 56px;
    background: var(--bg-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    display: flex; align-items: center;
    padding: 0 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field__input-wrap:focus-within {
    border-color: var(--brand);
    background: var(--bg);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.field__icon { width: 18px; height: 18px; color: var(--muted); margin-right: 12px; flex-shrink: 0; }
.field__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field__input {
    flex: 1;
    background: none; border: none;
    font-family: var(--sans); font-size: 16px; font-weight: 500;
    color: var(--ink);
    /* AJOUT : un input flex garde sinon sa largeur intrinseque et deborde */
    min-width: 0; height: 100%;
}
/* ECART : --muted-ink (--muted : 3,5:1 sur --bg-2) */
.field__input::placeholder { color: var(--muted-ink); opacity: 1; }
/* AJOUT : l'anneau de .field__input-wrap signale deja le focus */
.field__input:focus-visible { outline: none; }
/* AJOUT : auto-remplissage. Chrome impose son fond (light-dark(), en
   !important) au seul <input>, pas au cadre arrondi : un rectangle bleute
   a angles vifs dans le champ, dans les deux themes. Une ombre interne de
   la couleur du cadre le recouvre ; le texte garde --ink. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--bg-2) inset;
    box-shadow: 0 0 0 100px var(--bg-2) inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
}
.field__input-wrap:focus-within .field__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
    box-shadow: 0 0 0 100px var(--bg) inset;
}
.field__action {
    /* ECART : 44 px au lieu de 32 (cible tactile) ; la marge negative garde
       l'icone a la meme distance du bord que dans la charte */
    width: var(--tap); height: var(--tap);
    margin-right: -8px;
    background: transparent; border: none;
    color: var(--muted);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.field__action:hover { background: var(--line); color: var(--ink); }
.field__action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Search input (compact, topbar style) */
.search-input {
    /* ECART : 44 px au lieu de 40 (cible tactile) */
    height: var(--tap);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px;
    width: 100%; max-width: 360px;
}
.search-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search-input svg { width: 16px; height: 16px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.search-input input {
    flex: 1; background: none; border: none;
    font-size: 13px; color: var(--ink);
    min-width: 0;
}
.search-input input::placeholder { color: var(--muted-ink); opacity: 1; }
.search-input input:focus-visible { outline: none; }
.search-input__hint {
    font-family: var(--mono); font-size: 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--muted-ink);
    padding: 2px 6px; border-radius: var(--r-sm);
    letter-spacing: 0.04em;
}

/* Filter select */
.filter-select {
    flex: 1; min-width: 200px;
    height: 48px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 0 14px;
    font-family: var(--sans); font-size: 14px;
    color: var(--ink);
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
}
.filter-select:hover { border-color: var(--line-strong); }
.filter-select__label {
    font-family: var(--mono); font-size: 10px;
    color: var(--muted-ink);
    letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 600;
}
.filter-select__value { font-family: var(--display); font-weight: 700; color: var(--ink); margin-right: auto; }
.filter-select__chev svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }

/* ==========================================================================
   B4 - CASE A COCHER ET INTERRUPTEUR
   ========================================================================== */
.checkbox {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer;
    font-size: 13px; color: var(--ink-soft);
    background: none; border: none;
    /* ECART : ligne cliquable de 44 px de haut (cible tactile) */
    min-height: var(--tap);
    position: relative;
}
/* Signature DATUM : boite arrondie transparente a bord fort ; cochee = bord de
   marque + PAVE plein a l'interieur (pas de coche). Distincte de l'interrupteur
   (reglage on/off), c'est de la multi-selection. */
.checkbox__box {
    /* pour le pave ::after, absolu */
    position: relative;
    width: 20px; height: 20px;
    /* DATUM : boite transparente, la carte transparait */
    background: transparent;
    /* ECART : --muted au lieu du --line-strong de la charte. Bord non coche a
       1,9:1 sinon (--line-strong sur blanc) ; --muted fait >= 3:1 dans les deux
       themes (WCAG 1.4.11) */
    border: 2px solid var(--muted);
    border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* DATUM : pas de coche svg, le signal est le pave plein (::after) */
.checkbox__box svg { display: none; }
.checkbox.is-on .checkbox__box,
.checkbox__native:checked + .checkbox__box { border-color: var(--brand); }
.checkbox.is-on .checkbox__box::after,
.checkbox__native:checked + .checkbox__box::after {
    content: ""; position: absolute; inset: 4px;
    background: var(--brand); border-radius: 3px;
}
/* AJOUT : variante formulaire, avec une vraie case native (valeur envoyee,
   clavier, lecteur d'ecran) masquee sous le dessin de la charte */
.checkbox__native {
    position: absolute;
    opacity: 0;
    width: 20px; height: 20px;
    margin: 0;
    cursor: pointer;
}
.checkbox__native:focus-visible + .checkbox__box { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Signature DATUM : piste RECTANGLE arrondi + pouce CARRE flottant (pas la
   pilule iOS + pouce rond). Le pouce garde une marge de 5 px sur les 4 cotes ;
   sa course vaut 56 - 22 - 2x5 = 24 px. */
.switch {
    position: relative;
    width: 56px; height: 32px;
    background: var(--bg-3);
    /* DATUM : coins doux (6 px), pas une pilule */
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.18s ease;
    border: none;
}
.switch::after {
    content: "";
    position: absolute;
    top: 5px; left: 5px;
    width: 22px; height: 22px;
    background: #FFFFFF;
    /* DATUM : carre arrondi, PAS un cercle */
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.22);
    transition: transform 0.18s ease;
}
/* ECART : zone de clic etendue a 44 px de haut, sans changer le dessin */
.switch::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -6px; bottom: -6px;
}
/* Piste activee : aplat de marque + liseré interne de meme teinte (bord net) */
.switch.is-on { background: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.switch.is-on::after { transform: translateX(24px); }
/* AJOUT : etat porte par aria-checked (role="switch"), comme .seg__btn ;
   inactif par disabled ou aria-disabled (.btn[aria-disabled]) */
.switch[aria-checked="true"] { background: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(24px); }
.switch:disabled,
.switch[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* ECART : contour --muted sur la piste eteinte. En clair, --bg-3 sur une
   carte blanche fait 1,21:1 et le curseur blanc se confond avec la carte :
   meme correction que .checkbox__box (3,80:1 sur la carte en clair, 3,84:1
   en sombre ; 3,14 et 3,12 sur la piste). */
.switch:not([aria-checked="true"]):not(.is-on) { box-shadow: inset 0 0 0 1.5px var(--muted); }
@media (prefers-reduced-motion: reduce) {
    .switch, .switch::after { transition: none; }
}

/* ==========================================================================
   B5 - BADGES, B6 - TAGS, B7 - AVATAR
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
/* ECART : --brand-ink (--brand-deep sur la teinte sombre : 2,5:1) */
.badge--online { background: var(--brand-soft); color: var(--brand-ink); }
.badge--offline { background: var(--bg-2); color: var(--muted-ink); }
.badge--ready { background: var(--brand-soft); color: var(--brand-ink); }
.badge--draft { background: var(--bg-2); color: var(--muted-ink); }
/* ECART : texte --ink, la pastille et le fond portent la couleur, comme
   .login__error (--ble-deep sur sa teinte : 2,4:1 ; --danger : 3,8:1) */
.badge--running { background: var(--ble-soft); color: var(--ink); }
.badge--running::before { background: var(--ble-deep); }
.badge--error { background: var(--danger-soft); color: var(--ink); }
.badge--error::before { background: var(--danger); }

.tag {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--brand-soft);
    /* ECART : --brand-ink (--brand-deep sur la teinte sombre : 2,5:1) */
    color: var(--brand-ink);
}
.tag--neutral { background: var(--bg-2); color: var(--muted-ink); }
/* ECART : --ink (--ble-deep sur sa teinte : 2,4:1), le fond porte le ble */
.tag--ble { background: var(--ble-soft); color: var(--ink); }

.user-avatar {
    width: 36px; height: 36px;
    /* ECART : --brand-fill (texte blanc, tokens.css) */
    background: var(--brand-fill); color: var(--on-brand);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
}
.user-avatar--lg { width: 52px; height: 52px; font-size: 18px; }
.user-avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ==========================================================================
   B8 - ETIQUETTE DE CHAMP (sur carte), B9 - CONTROLES DE CARTE
   ========================================================================== */
.field-label {
    background: var(--bg);
    color: var(--ink);
    padding: 5px 12px;
    /* ECART : 16 px dans la charte, ramene au rayon maximal du projet */
    border-radius: var(--r-lg);
    font-family: var(--display); font-size: 13px; font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    border: 1px solid var(--brand);
    cursor: pointer;
}
.field-label:hover { background: var(--brand-fill); color: var(--on-brand); }

.map-controls { display: flex; flex-direction: column; gap: 6px; }
.map-controls--row { flex-direction: row; }
.map-btn {
    width: 44px; height: 44px;
    background: var(--glass-soft);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-md);
    color: var(--glass-ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
/* ECART : --brand-fill, meme bleu que toute selection qui porte du blanc */
.map-btn:active { background: var(--brand-fill); border-color: var(--brand-fill); }
.map-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-btn__txt { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1; }

/* ==========================================================================
   C1 - TOPBAR
   ========================================================================== */
.topbar {
    width: 100%;
    height: 64px;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-line);
    border-radius: var(--r-md);
    color: var(--sidebar-text);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    padding: 0 22px;
    gap: 18px;
    overflow: hidden;
}
.crumb {
    font-family: var(--mono); font-size: 11px;
    /* ECART : --muted-ink (--muted : 3,8:1 sur --sidebar-bg clair) */
    color: var(--muted-ink);
    letter-spacing: 0.04em; text-transform: uppercase;
}
.crumb--current {
    font-family: var(--display); font-size: 17px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--ink);
    text-transform: none;
}
.crumb-sep {
    font-family: var(--mono); font-size: 12px;
    color: var(--muted-ink); opacity: 0.5;
}
.crumb-row { display: flex; align-items: center; gap: 10px; min-width: 0; }

.robot-picker {
    display: inline-flex; align-items: center; gap: 8px;
    /* ECART : 44 px au lieu de 40 (cible tactile) */
    height: var(--tap); padding: 0 14px;
    background: var(--brand-fill); color: var(--on-brand);
    border: none; border-radius: var(--r-md);
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.robot-picker:hover { background: var(--brand-fill-deep); }
.robot-picker svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.robot-picker__chev { opacity: 0.7; }

/* ==========================================================================
   C2 - NAVIGATION (sidebar)
   ========================================================================== */
.nav-list {
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-line);
    border-radius: var(--r-md);
    padding: 8px;
    width: 240px;
    display: flex; flex-direction: column; gap: 1px;
    color: var(--sidebar-text);
}
.nav-section__label {
    font-family: var(--mono); font-size: 10px;
    /* ECART : --muted-ink (--muted : 3,8:1) */
    color: var(--muted-ink);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 8px 10px 4px;
    font-weight: 600;
}
.nav-item {
    height: 64px;
    padding: 8px 12px;
    border: none; background: transparent;
    color: inherit;
    border-radius: var(--r-md);
    display: flex; align-items: center;
    gap: 12px;
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
    text-align: left;
}
.nav-item:hover { background: var(--bg-2); }
.nav-item svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Signature DATUM : entree active = barre a GAUCHE + tint leger, pas une pilule
   pleine avec marqueur ble.
   ECART : texte et icone en --brand-ink, pas --brand. --brand sur --brand-softer
   ne fait que 3,22:1 en clair (echec 4,5:1) ; --brand-ink fait 6,1:1 en clair,
   8,1:1 en nuit. La barre, elle, reste en --brand (aplat decoratif, >= 3:1). */
.nav-item.is-active { background: var(--brand-softer); color: var(--brand-ink); font-weight: 700; }
.nav-item.is-active::before {
    content: ""; position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 5px; border-radius: 0 3px 3px 0;
    background: var(--brand);
}
.nav-item__count {
    margin-left: auto;
    font-family: var(--mono); font-size: 11px;
    background: var(--bg-2); color: var(--muted-ink);
    padding: 2px 7px; border-radius: 10px;
    font-weight: 700;
}
/* Compteur d'une entree active : tint de marque + encre de marque (coherent
   avec l'entree, --brand-ink sur --brand-soft >= 5,4:1) */
.nav-item.is-active .nav-item__count { background: var(--brand-soft); color: var(--brand-ink); }

/* ==========================================================================
   C3 - WORKSPACE, C4 - ONGLETS FILTRES
   ========================================================================== */
.workspace {
    width: 220px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: 4px;
    cursor: pointer;
}
.workspace:hover { border-color: var(--brand); }
.workspace__head { display: flex; align-items: center; justify-content: space-between; }
.workspace__label {
    font-family: var(--mono); font-size: 10px;
    color: var(--muted-ink);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.workspace__chev svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; }
.workspace__name {
    font-family: var(--display); font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.workspace__sub {
    font-family: var(--mono); font-size: 11px;
    /* ECART : --brand-ink (--brand sur --bg clair : 3,6:1) ; la pastille
       garde --brand */
    color: var(--brand-ink);
    letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 6px;
}
.workspace__sub::before {
    content: ""; width: 6px; height: 6px;
    background: var(--brand); border-radius: 50%;
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.filter-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    width: 100%;
}
.filter-tab {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 12px;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    transition: all 0.12s ease;
}
.filter-tab:hover { border-color: var(--line-strong); background: var(--bg-2); }
.filter-tab svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    color: var(--muted);
}
.filter-tab__label {
    font-family: var(--display); font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.filter-tab__count {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    color: var(--muted-ink);
    background: var(--bg-2);
    padding: 2px 7px; border-radius: 10px;
}
/* AJOUT : actif aussi par aria-selected="true", pour un onglet role="tab"
   (l'etat est alors porte par l'attribut, comme .seg__btn) */
.filter-tab.is-active,
.filter-tab[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand); }
.filter-tab.is-active svg,
.filter-tab[aria-selected="true"] svg { color: var(--brand); }
/* ECART : --brand-ink (--brand-deep sur la teinte sombre : 2,5:1) */
.filter-tab.is-active .filter-tab__label,
.filter-tab[aria-selected="true"] .filter-tab__label { color: var(--brand-ink); }
.filter-tab.is-active .filter-tab__count,
.filter-tab[aria-selected="true"] .filter-tab__count { background: var(--brand-fill); color: var(--on-brand); }

/* ==========================================================================
   C5 - CARD
   ========================================================================== */
.card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.12s ease;
    width: 100%; max-width: 480px;
}
.card:hover { border-color: var(--line-strong); }
.card__head {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--line);
}
.card__icon {
    width: 44px; height: 44px;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
}
.card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__icon--ble { background: var(--ble-soft); color: var(--ble-deep); }
.card__icon--neutral { background: var(--bg-2); color: var(--ink-soft); }
.card__title { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.card__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ECART : --muted-ink (--muted : 3,8:1) */
.card__sub { font-size: 12px; color: var(--muted-ink); margin-top: 2px; }
.card__menu {
    /* ECART : 44 px au lieu de 32 (cible tactile) */
    width: var(--tap); height: var(--tap);
    background: transparent; border: none;
    color: var(--muted);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.card__menu:hover { background: var(--bg-2); color: var(--ink); }
.card__menu svg { width: 18px; height: 18px; fill: currentColor; }
.card__body { padding: 14px 16px; }
.card__body--metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card-metric { display: flex; flex-direction: column; gap: 2px; }
.card-metric__label {
    font-family: var(--mono); font-size: 10px;
    color: var(--muted-ink);
    letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.card-metric__value {
    /* ECART : Plex Mono (regle projet : tous les chiffres en mono) */
    font-family: var(--mono); font-size: 17px; font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.card__footer {
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    background: var(--bg-2);
}
.card__footer-meta {
    font-family: var(--mono); font-size: 11px;
    /* ECART : --muted-ink (--muted : 3,5:1 sur le pied --bg-2) */
    color: var(--muted-ink);
    letter-spacing: 0.04em;
}
.card__footer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   C6 - CARTE DE CHAMP (parcelle)
   ========================================================================== */
.field-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    cursor: pointer;
    width: 280px;
}
.field-card:hover { border-color: var(--brand); }
.field-card__head { display: flex; align-items: center; justify-content: space-between; }
.field-card__name { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.field-card__shape { width: 60px; height: 60px; background: var(--brand-soft); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.field-card__shape svg { width: 100%; height: 100%; }
.field-card__metrics {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* ==========================================================================
   C7 - PANNEAU DE TABLEAU DE BORD (glass sombre sur la carte)
   ========================================================================== */
.dash-panel {
    width: 340px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    padding: 18px;
    color: var(--glass-ink);
    display: flex; flex-direction: column; gap: 16px;
    backdrop-filter: blur(10px);
}
.dash-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 1px solid var(--glass-rule);
}
.dash-panel__title {
    font-family: var(--display); font-size: 18px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--glass-ink);
}
.dash-panel__title small {
    display: block;
    font-family: var(--mono); font-size: 10px;
    color: var(--glass-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-top: 2px; font-weight: 500;
}
.dash-panel__pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--r-sm);
    background: var(--brand-fill); color: var(--on-brand);
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.dash-panel__pill::before {
    content: ""; width: 6px; height: 6px;
    background: currentColor; border-radius: 50%;
}

.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-stat {
    background: var(--glass-fill);
    border: 1px solid var(--glass-rule);
    border-radius: var(--r-md);
    padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.dash-stat__label {
    font-family: var(--mono); font-size: 10px;
    color: var(--glass-muted);
    letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.dash-stat__value {
    /* ECART : Plex Mono (regle projet : tous les chiffres en mono) */
    font-family: var(--mono); font-size: 24px; font-weight: 700;
    line-height: 1; color: var(--glass-ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 4px;
}
.dash-stat__value small { font-family: var(--sans); font-size: 12px; color: var(--glass-muted); font-weight: 500; }
/* ECART : fond --brand-fill, libelle et valeur en --on-brand. Le blanc a
   85 % de la charte tombait a 3:1 sur --brand ; --glass-ink (#F2F4F2) fait
   4,2:1 sur --brand-fill, trop peu quand la valeur passe a 18 px. */
.dash-stat--brand { background: var(--brand-fill); border-color: var(--brand-fill); }
.dash-stat--brand .dash-stat__label,
.dash-stat--brand .dash-stat__value { color: var(--on-brand); }

.dash-events { display: flex; flex-direction: column; gap: 6px; }
.dash-events__title {
    font-family: var(--mono); font-size: 10px;
    color: var(--glass-muted);
    letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 4px;
}
.dash-event {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 8px; align-items: center;
    padding: 6px 0;
    font-size: 12px;
}
.dash-event__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.dash-event__dot--warn { background: var(--ble); }
.dash-event__dot--err { background: var(--danger); }
.dash-event__msg { color: var(--glass-ink-soft); }
.dash-event__msg strong { font-family: var(--display); font-weight: 700; color: var(--glass-ink); }
.dash-event__time {
    font-family: var(--mono); font-size: 10px;
    color: var(--glass-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   AJOUT - GLASS (panneaux flottants sur la carte, meme matiere que C7)
   ========================================================================== */
.glass {
    background: var(--glass);
    color: var(--glass-ink);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

/* ==========================================================================
   AJOUT - BOUTON SEGMENTE (choix exclusif court : Liste | Carte, % | dose)
   ========================================================================== */
.seg {
    display: inline-flex;
    padding: 4px; gap: 4px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.seg__btn {
    min-height: var(--tap);
    padding: 0 16px;
    border: none; background: transparent;
    border-radius: var(--r-sm);
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    color: var(--ink-soft);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.seg__btn:hover { background: var(--bg-3); color: var(--ink); }
.seg__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg__btn.is-active,
.seg__btn[aria-pressed="true"],
.seg__btn[aria-checked="true"],
.seg__btn[aria-selected="true"] { background: var(--brand-fill); color: var(--on-brand); }

/* AJOUT : couleurs forcees (contraste eleve de Windows). Les fonds sont
   remplaces par Canvas : interrupteur et segment choisi, dessines par leur
   seul fond, disparaitraient. Couleurs systeme posees a la main. */
@media (forced-colors: active) {
    .switch {
        forced-color-adjust: none;
        background: Canvas;
        border: 1px solid ButtonText;
    }
    .switch:not([aria-checked="true"]):not(.is-on) { box-shadow: none; }
    .switch::after { background: ButtonText; box-shadow: none; }
    /* box-shadow: none aussi sur l'etat actif : forced-color-adjust:none garde
       sinon le lisere --brand en dur (#0a85ff) par-dessus le fond Highlight. */
    .switch.is-on,
    .switch[aria-checked="true"] { background: Highlight; border-color: Highlight; box-shadow: none; }
    .switch.is-on::after,
    .switch[aria-checked="true"]::after { background: HighlightText; }
    .switch:disabled,
    .switch[aria-disabled="true"] { border-color: GrayText; }
    /* La case DATUM ne signale l'etat coche que par un pave (fond --brand) et un
       bord --brand : en contraste eleve le fond passerait a Canvas et les bords
       coche/decoche a la meme couleur systeme (case cochee = decochee). On pose
       les couleurs systeme a la main, comme pour l'interrupteur. */
    .checkbox__box {
        forced-color-adjust: none;
        background: Canvas;
        border-color: ButtonText;
    }
    .checkbox.is-on .checkbox__box,
    .checkbox__native:checked + .checkbox__box { border-color: Highlight; }
    .checkbox.is-on .checkbox__box::after,
    .checkbox__native:checked + .checkbox__box::after { background: Highlight; }
    .seg__btn.is-active,
    .seg__btn[aria-pressed="true"],
    .seg__btn[aria-checked="true"],
    .seg__btn[aria-selected="true"] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }
}

/* ==========================================================================
   AJOUT - ETAT VIDE (liste vide, recherche sans resultat, erreur de chargement)
   ========================================================================== */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
    background: var(--bg);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    color: var(--ink-soft);
}
.empty-state__icon {
    width: 56px; height: 56px;
    margin-bottom: 8px;
    background: var(--bg-2);
    color: var(--muted);
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
}
.empty-state__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.empty-state--error .empty-state__icon { background: var(--danger-soft); color: var(--danger); }
.empty-state__title {
    font-family: var(--display); font-size: 18px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--ink);
}
.empty-state__text { font-size: 14px; max-width: 48ch; }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* ==========================================================================
   AJOUT - MODAL (SF.ui.alert / confirm / prompt)
   Structure de C5 : tete, corps, pied gris avec les actions a droite.
   ========================================================================== */
.modal-backdrop {
    position: fixed; inset: 0;
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
    animation: sf-fondu 0.12s ease-out;
}
.modal {
    width: 100%; max-width: 440px;
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--pop-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: sf-apparition 0.14s ease-out;
}
.modal__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 16px 0;
}
.modal__icon {
    width: 44px; height: 44px;
    background: var(--brand-soft); color: var(--brand);
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.modal__icon svg { width: 22px; height: 22px; }
.modal--danger .modal__icon { background: var(--danger-soft); color: var(--danger); }
.modal__title {
    font-family: var(--display); font-size: 18px; font-weight: 700;
    letter-spacing: -0.015em; line-height: 1.2;
}
.modal__body {
    padding: 12px 16px 16px;
    overflow-y: auto;
}
.modal__msg {
    font-size: 14px; color: var(--ink-soft);
    white-space: pre-wrap; word-break: break-word;
}
.modal__body .field { max-width: none; margin-top: 12px; }
/* SF.ui.form : aide et erreur sous chaque champ, erreur generale sous les
   champs. --danger sur --bg : 4,7:1 dans les deux themes. */
.modal__aide { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.modal__erreur { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--danger); }
.modal__erreur:empty { display: none; }
/* Lisere et fond portent la couleur, le texte reste en --ink (.login__error) */
.modal__erreur--generale {
    margin-top: 12px;
    padding: 12px 16px;
    border-left: 4px solid var(--danger);
    border-radius: var(--r-md);
    background: var(--danger-soft);
    color: var(--ink);
    font-size: 14px;
}
.modal__body .field__input-wrap:has(> [aria-invalid="true"]) { border-color: var(--danger); }
/* Le dialogue garde le focus pendant l'envoi (boutons inactifs) : pas de cadre */
.modal:focus { outline: none; }
.modal__foot {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}
/* "OK" seul ferait un bouton carre, trop facile a manquer au doigt */
.modal__foot .btn { min-width: 88px; }

/* ==========================================================================
   AJOUT - TOAST (SF.ui.toast)
   ========================================================================== */
.toasts {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: var(--z-toast);
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    min-height: 48px;
    min-width: 240px; max-width: min(400px, calc(100vw - 32px));
    padding: 12px 16px;
    /* Surface posee (tokens.css) : en sombre, --bg-3 et bordure --line-strong
       la detachent des cartes --bg qu'elle recouvre */
    background: var(--pop-bg);
    color: var(--ink);
    border: 1px solid var(--pop-line);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-pop);
    font-size: 14px; font-weight: 500;
    word-break: break-word;
    cursor: pointer;
    animation: sf-glisse 0.16s ease-out;
}
.toast svg { width: 20px; height: 20px; color: var(--brand); }
.toast--error { border-left-color: var(--danger); }
.toast--error svg { color: var(--danger); }
.toast--warn { border-left-color: var(--warning); }
/* --warning sur blanc : 2,25:1 ; le lisere garde --warning */
.toast--warn svg { color: var(--warning-ink); }
/* Lisere --muted-ink comme l'icone : en sombre --line-strong est aussi
   --pop-line, le lisere se fondait dans la bordure */
.toast--info { border-left-color: var(--muted-ink); }
.toast--info svg { color: var(--muted-ink); }
.toast.is-leaving { animation: sf-sortie 0.2s ease-in forwards; }

@keyframes sf-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-apparition { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sf-glisse { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sf-sortie { to { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop, .modal, .toast, .toast.is-leaving { animation-duration: 0.01ms; }
}

@media (max-width: 480px) {
    .toasts { left: 16px; align-items: stretch; }
    .toast { min-width: 0; max-width: none; }
}