/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PRIMITIVES MAISON — ce que MudBlazor rendait avant.

   Née dans IkuLight (lot L12), cette feuille vit maintenant chez Streamiku : c'est Streamiku qui
   doit encore sortir de Mud, et on ne convertit pas un markup vers des classes que le projet ne
   sert pas. IkuLight la reçoit par le miroir wwwroot (Target SyncWwwroot), donc une seule source.

   Les composants qui ont leur propre .razor (Toast, Tip, Stack, Bar, Spinner, IconBtn, Alert,
   Segmented, Icon) embarquent leur <style> ; ici ne vivent que les classes posées par du markup
   INLINE, qui n'ont pas de composant où se loger.

   ⚠️ Les variables orphelines de MudBlazor (--mud-palette-*) ne sont PAS ici : elles n'ont de sens
   que là où MudBlazor est absent, donc dans IkuLight/wwwroot/css/iku-mud-orphans.css, hors miroir.
   Les poser ici écraserait la vraie palette Mud que Streamiku charge encore.

   🎨 PARTI PRIS SUR LES COULEURS. MudBlazor nommait des rôles (Primary, Info, Tertiary, Error…) ;
   on garde ces rôles au lieu de les aplatir, parce qu'ils PORTENT DU SENS : un solde négatif en
   Error et une progression en Tertiary ne disent pas la même chose. Chaque rôle est rebranché sur
   un jeton du thème, donc le clair/sombre suit sans code.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ PONT --mud-palette-* → JETONS MAISON ══════════════════════════════════════════════════════
   ⚠️ CE BLOC EST LA CONDITION DU RETRAIT DU PAQUET MUDBLAZOR. Le CSS et le markup de Streamiku
   référencent ces variables **918 fois**. Elles étaient produites par MudThemeProvider : le jour où
   il part, elles disparaissent — et `var(--mud-palette-primary)` sans repli rend la propriété
   invalide au calcul, donc silencieusement ignorée. Build vert, interface délavée.

   On ne réécrit PAS les 918 sites : on redéfinit les variables comme des ALIAS des jetons maison.
   Les jetons de `pilotage-shared.css` basculent déjà sous html[data-theme="light"], donc le
   clair/sombre suit sans une ligne de plus.

   ℹ️ QUATRE SONT DÉJÀ POSÉES AILLEURS et ne sont donc pas ici : primary, secondary, tertiary et
   info sont écrites directement par le script de palette d'index.html (setProperty au boot, puis à
   chaque changement de palette cabinet). Elles couvrent 572 des 918 références et ne dépendaient
   déjà plus du provider. Les 18 ci-dessous couvrent les 346 restantes.

   Ce bloc est posé APRÈS MudBlazor.min.css dans index.html : il gagne donc dès maintenant, ce qui
   permet de VÉRIFIER le pont pendant que le paquet est encore là. */
:root {
    --mud-palette-text-primary: var(--color-text-primary, #ffffff);
    --mud-palette-text-secondary: var(--color-text-secondary, #d9e4ea);
    --mud-palette-dark-text: var(--color-text-primary, #ffffff);
    --mud-palette-surface: var(--color-bg-card, #23252e);
    --mud-palette-background: var(--surf-app, transparent);
    --mud-palette-background-gray: var(--color-text-muted, #8fa8b5);
    --mud-palette-lines-default: var(--color-border-light, rgba(255, 255, 255, .14));
    --mud-palette-error: var(--color-danger, #fb7185);
    --mud-palette-success: var(--color-success, #34d399);
    --mud-palette-warning: var(--color-warning, #fbbf24);
    --mud-palette-black: #000;
    --mud-palette-transparent: transparent;
    --mud-palette-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Déclinaisons : Mud les calculait depuis la couleur de base. color-mix fait le même travail,
       et reste juste quand la palette du cabinet change à chaud. */
    --mud-palette-primary-darken: color-mix(in srgb, var(--brand, #00b1cf) 82%, #000);
    --mud-palette-tertiary-hover: color-mix(in srgb, var(--mud-palette-tertiary, var(--brand3, #34d399)) 12%, transparent);
    --mud-palette-tertiary-text: var(--color-text-primary, #ffffff);
    --mud-palette-action-default-hover: var(--o8, rgba(255, 255, 255, .08));
    --mud-palette-action-disabled: var(--color-text-dim, #6b8a9a);
}

/* ═══ JETONS DU KIT NON DÉFINIS — trouvés en vérifiant le MODE CLAIR ═══════════════════════════
   ⚠️ Les composants du kit (Alert, Tip, Bar, Spinner, IconBtn, Segmented) référencent quatre jetons
   qui n'existaient NULLE PART : --srf-2, --ok, --danger, --warn. Ils tombaient donc sur leur valeur
   de repli — et ces replis ont été écrits pour un fond SOMBRE. Le plus visible : --srf-2 sert de
   FOND à l'Alert et à la bulle riche de Tip, avec un repli quasi noir (#23252e) → une boîte sombre
   posée sur une page claire.

   On les aliase sur les jetons sémantiques du projet, qui basculent déjà avec le thème. Les trois
   couleurs d'état sont VOLONTAIREMENT identiques en clair et en sombre : c'est le parti pris de
   pilotage-shared.css (« Accents teal & états inchangés — OK sur les 2 »), on ne le contredit pas.
   ⚠️ Ne PAS remettre de repli sombre ici : c'est précisément ce qui masquait le problème. */
:root {
    --srf-2: var(--color-bg-card);
    --ok: var(--color-success);
    --danger: var(--color-danger);
    --warn: var(--color-warning);
    /* ── La marque comme TEXTE ────────────────────────────────────────────────────────────────
       Mesuré en mode clair : --brand posé en couleur de texte donne 2,43:1 — sous le minimum
       lisible. On ne touche PAS --brand : en aplat (bouton plein, segment actif, jauge) il est
       juste, et c'est la couleur du cabinet. On sépare donc le RÔLE : --brand-text ne sert qu'à
       écrire. En sombre c'est la marque telle quelle ; en clair on l'assombrit juste assez. */
    --brand-text: var(--brand, #00b1cf);
}
html[data-theme="light"] {
    --brand-text: color-mix(in srgb, var(--brand, #00b1cf) 62%, #000);
}

/* ── Rôles de couleur (ex-Color.*) ─────────────────────────────────────────────────────────────
   Applicables au TEXTE — pour un fond, cf. .iku-chip-* et .iku-btn-* plus bas. */
/* ⚠️ Ces classes ECRIVENT : elles pointent donc sur --brand-text, pas sur --brand. */
.iku-c-primary   { color: var(--brand-text); }
.iku-c-secondary { color: var(--brand2, #7c9cff); }
.iku-c-info      { color: var(--brand2, #7c9cff); }
.iku-c-tertiary  { color: var(--ok, #34d399); }
.iku-c-success   { color: var(--ok, #34d399); }
.iku-c-warning   { color: var(--warn, #fbbf24); }
.iku-c-error     { color: var(--danger, #fb7185); }
.iku-c-surface   { color: var(--sl3, #e8f3f6); }
.iku-c-dark      { color: var(--sl5, #64748b); }
.iku-c-default   { color: var(--sl1, #94a3b8); }
/* Inherit et Transparent existent pour que la conversion reste LISIBLE : le rôle d'origine se lit
   encore dans le markup, au lieu de disparaître dans une absence de classe. */
.iku-c-inherit     { color: inherit; }
.iku-c-transparent { color: transparent; }

/* ── Typographie (ex-Typo.*) ───────────────────────────────────────────────────────────────────
   Valeurs reprises du thème MudBlazor par défaut, pour que la conversion ne bouge aucune taille. */
.iku-t           { display: block; margin: 0; }
.iku-t-caption   { font-size: .75rem;   font-weight: 400; line-height: 1.66; letter-spacing: .03333em; }
.iku-t-body2     { font-size: .875rem;  font-weight: 400; line-height: 1.43; letter-spacing: .01071em; }
.iku-t-body1     { font-size: 1rem;     font-weight: 400; line-height: 1.5;  letter-spacing: .00938em; }
.iku-t-subtitle1 { font-size: 1rem;     font-weight: 400; line-height: 1.75; letter-spacing: .00938em; }
.iku-t-subtitle2 { font-size: .875rem;  font-weight: 500; line-height: 1.57; letter-spacing: .00714em; }
.iku-t-h6        { font-size: 1.25rem;  font-weight: 500; line-height: 1.6;  letter-spacing: .0075em; }
.iku-t-h5        { font-size: 1.5rem;   font-weight: 400; line-height: 1.33; }
.iku-t-h4        { font-size: 2.125rem; font-weight: 400; line-height: 1.17; }
.iku-t-h3        { font-size: 3rem;     font-weight: 400; line-height: 1.17; }
.iku-t-button    { font-size: .875rem;  font-weight: 500; line-height: 1.75; text-transform: uppercase; }
.iku-t-overline  { font-size: .75rem;   font-weight: 400; line-height: 2.66; text-transform: uppercase; }
/* Un texte posé DANS une pile horizontale (à côté d'une icône) ne doit pas prendre toute la
   largeur — d'où cette variante, à mettre quand le parent est une Stack en ligne. */
.iku-t-inline      { display: inline-block; }
.iku-align-center  { text-align: center; }
.iku-align-justify { text-align: justify; }
.iku-align-right   { text-align: right; }

/* ── Séparateurs (ex-MudDivider) ───────────────────────────────────────────────────────────── */
.iku-vsep {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 14px;
    background: var(--o14, rgba(255, 255, 255, .16));
}
.iku-hsep {
    height: 1px;
    margin: 6px 0;
    border: 0;
    background: var(--o14, rgba(255, 255, 255, .16));
}

/* ── Surfaces (ex-MudPaper) ────────────────────────────────────────────────────────────────────
   Mud rendait une élévation en ombre portée. On garde DEUX niveaux seulement : posé (une ombre
   discrète) et détouré (un liseré). Au-delà, l'ombre devient du bruit sur un fond sombre. */
.iku-paper {
    border-radius: 10px;
    background: var(--surf-2, #23252e);
    color: var(--sl3, #e8f3f6);
}
.iku-paper-raised   { box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
.iku-paper-outlined { border: 1px solid var(--o14, rgba(255, 255, 255, .14)); }
.iku-paper-flat     { background: transparent; }

/* ── Étiquettes (ex-MudChip) ─────────────────────────────────────────────────────────────────── */
.iku-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--o14, rgba(255, 255, 255, .14));
    background: var(--o5, rgba(255, 255, 255, .05));
    color: var(--sl3, #e8f3f6);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}
/* Le LISERÉ garde la marque (c'est un aplat), le TEXTE prend la variante lisible. */
.iku-chip-primary { border-color: var(--brand, #00b1cf); color: var(--brand-text); }
.iku-chip-info    { border-color: var(--brand2, #7c9cff); color: var(--brand2, #7c9cff); }
.iku-chip-success { border-color: var(--ok, #34d399); color: var(--ok, #34d399); }
.iku-chip-error   { border-color: var(--danger, #fb7185); color: var(--danger, #fb7185); }
.iku-chip-filled  { background: var(--brand, #00b1cf); color: var(--brand-contrast, #06141a); border-color: transparent; }
button.iku-chip { cursor: pointer; font-family: inherit; }
button.iku-chip:hover { background: var(--o10, rgba(255, 255, 255, .10)); }

/* Étiquette de section (ex-MudChip en rôle de titre) */
.iku-chip-title {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin: 8px;
    border-radius: 8px;
    background: var(--o5, rgba(255, 255, 255, .05));
    border: 1px solid var(--o8, rgba(255, 255, 255, .08));
    color: var(--sl3, #e8f3f6);
    font-weight: 600;
}

/* ── Dépôt de fichier (ex-MudFileUpload) ───────────────────────────────────────────────────────
   L'input natif couvre le bouton, invisible mais cliquable : le navigateur n'ouvre son sélecteur
   que depuis un vrai <input type="file"> — un clic simulé sur un bouton ne le ferait pas. */
.iku-upload-wrap {
    position: relative;
    display: inline-flex;
    width: 100%;
}
.iku-upload-wrap > .btn-upload-primary { width: 100%; }
.iku-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ── Boutons (ex-MudButton) ────────────────────────────────────────────────────────────────────
   Trois variantes, comme Mud : plein (action principale), détouré (secondaire), nu (lien).
   Le contraste du plein vient de --brand-contrast, posé par RefreshPalette. */
.iku-btn-primary,
.iku-btn-outlined,
.iku-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, background .15s, border-color .15s;
}
.iku-btn-primary {
    border: 0;
    background: var(--brand, #00b1cf);
    color: var(--brand-contrast, #06141a);
}
.iku-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.iku-btn-outlined {
    /* Le LISERÉ garde la marque (c'est un aplat) ; le LIBELLÉ prend la variante lisible. */
    border: 1px solid var(--brand, #00b1cf);
    background: transparent;
    color: var(--brand-text);
}
.iku-btn-outlined:hover:not(:disabled) { background: var(--o8, rgba(255, 255, 255, .08)); }
.iku-btn-text {
    border: 0;
    background: transparent;
    color: var(--brand-text);
}
.iku-btn-text:hover:not(:disabled) { background: var(--o8, rgba(255, 255, 255, .08)); }
.iku-btn-primary:disabled, .iku-btn-outlined:disabled, .iku-btn-text:disabled { opacity: .5; cursor: default; }
.iku-btn-primary:focus-visible, .iku-btn-outlined:focus-visible, .iku-btn-text:focus-visible {
    outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px;
}
/* Déclinaisons de rôle pour les variantes non-marque (Error surtout : « supprimer », « arrêter »). */
.iku-btn-outlined.role-error { border-color: var(--danger, #fb7185); color: var(--danger, #fb7185); }
.iku-btn-text.role-error     { color: var(--danger, #fb7185); }
.iku-btn-primary.role-error  { background: var(--danger, #fb7185); color: #fff; }
.iku-btn-outlined.role-info  { border-color: var(--brand2, #7c9cff); color: var(--brand2, #7c9cff); }
.iku-btn-text.role-info      { color: var(--brand2, #7c9cff); }

/* ── Champs de saisie (ex-MudTextField / MudSelect / MudDatePicker) ────────────────────────────
   Un seul habillage pour tout ce qui se tape ou se choisit : la cohérence d'un formulaire tient
   surtout à ce que ses champs se ressemblent. */
.iku-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.iku-field-label { font-size: .75rem; color: var(--sl1, #94a3b8); }
.iku-input, .iku-select, .iku-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--o14, rgba(255, 255, 255, .16));
    border-radius: 8px;
    background: var(--o3, rgba(255, 255, 255, .03));
    color: var(--sl3, #e8f3f6);
    font: inherit;
    font-size: .875rem;
}
.iku-textarea { resize: vertical; min-height: 64px; }
.iku-input:focus, .iku-select:focus, .iku-textarea:focus { outline: none; border-color: var(--brand, #00b1cf); }
.iku-input::placeholder, .iku-textarea::placeholder { color: var(--sl1, #94a3b8); opacity: .7; }
.iku-input:disabled, .iku-select:disabled, .iku-textarea:disabled { opacity: .5; }
.iku-field-error { font-size: .75rem; color: var(--danger, #fb7185); }

/* Interrupteur (ex-MudSwitch) — une case native remise en forme, donc accessible sans effort. */
.iku-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.iku-switch input { accent-color: var(--brand, #00b1cf); width: 16px; height: 16px; cursor: pointer; }

/* Curseur (ex-MudSlider) */
.iku-slider { width: 100%; accent-color: var(--brand, #00b1cf); }

/* Sélecteur de couleur (ex-MudColorPicker) — l'input natif fait le travail, on ne garde que la
   pastille cliquable ; c'est le seul contrôle où le navigateur bat de loin toute réimplémentation. */
.iku-color {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--o14, rgba(255, 255, 255, .16));
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.iku-color::-webkit-color-swatch-wrapper { padding: 2px; }
.iku-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.iku-color::-moz-color-swatch { border: 0; border-radius: 4px; }

/* ── Voile modal (ex-MudOverlay) ─────────────────────────────────────────────────────────────── */
.iku-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
}
.iku-overlay.is-light { background: rgba(255, 255, 255, .35); }

/* ── Bouton flottant (ex-MudFab) ─────────────────────────────────────────────────────────────── */
.iku-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--brand, #00b1cf);
    color: var(--brand-contrast, #06141a);
    font-family: inherit;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    cursor: pointer;
}
.iku-fab:hover { filter: brightness(1.08); }

/* ── Frise chronologique (ex-MudTimeline) ──────────────────────────────────────────────────────
   Une ligne verticale et un point par étape : la lecture se fait de haut en bas, sans décoration. */
.iku-timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 22px; }
.iku-timeline::before {
    content: "";
    position: absolute;
    left: 6px; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--o14, rgba(255, 255, 255, .16));
}
.iku-timeline-item { position: relative; }
.iku-timeline-item::before {
    content: "";
    position: absolute;
    left: -22px; top: 5px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--brand, #00b1cf);
    box-shadow: 0 0 0 3px var(--surf-1, #0e1620);
}
.iku-timeline-item.dot-info::before    { background: var(--brand2, #7c9cff); }
.iku-timeline-item.dot-success::before { background: var(--ok, #34d399); }
.iku-timeline-item.dot-error::before   { background: var(--danger, #fb7185); }

/* ── Tableau simple (ex-MudTable) ──────────────────────────────────────────────────────────────
   Pour les trois colonnes d'un récapitulatif, pas pour une grille de données : celle-là a son
   propre composant (FinTreeTable / DataGrid). */
.iku-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.iku-table th, .iku-table td { padding: 6px 8px; text-align: center; }
.iku-table th { color: var(--sl1, #94a3b8); font-weight: 600; border-bottom: 1px solid var(--o14, rgba(255, 255, 255, .16)); }
.iku-table td { border-bottom: 1px solid var(--o5, rgba(255, 255, 255, .05)); }
.iku-table tr:last-child td { border-bottom: 0; }

/* ── Panneau dépliant (ex-MudExpansionPanel) ───────────────────────────────────────────────────
   <details>/<summary> natif : le dépliage marche sans JS et le clavier le pilote déjà. */
.iku-expand { border: 1px solid var(--o14, rgba(255, 255, 255, .14)); border-radius: 10px; overflow: hidden; }
.iku-expand > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    background: var(--o3, rgba(255, 255, 255, .03));
}
.iku-expand > summary::-webkit-details-marker { display: none; }
.iku-expand > summary::after { content: " ▾"; float: right; opacity: .6; }
.iku-expand[open] > summary::after { content: " ▴"; }
.iku-expand-body { padding: 12px 14px; }

/* ── Retour en haut (ex-MudScrollToTop) ──────────────────────────────────────────────────────── */
.iku-totop {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 1100;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--o14, rgba(255, 255, 255, .16));
    border-radius: 50%;
    background: var(--surf-2, #23252e);
    color: var(--sl3, #e8f3f6);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.iku-totop.is-visible { opacity: 1; visibility: visible; }

/* ── Grille (ex-MudGrid / MudItem) ─────────────────────────────────────────────────────────────
   Mud découpait en douzièmes ; les usages ici sont tous « deux ou trois blocs côte à côte qui
   passent en colonne sur mobile », ce que fait un flex-basis sans qu'on ait à compter. */
.iku-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.iku-grid > .iku-gitem { flex: 1 1 240px; min-width: 0; }
.iku-gitem-full { flex-basis: 100% !important; }

/* ── Conteneur centré (ex-MudContainer) ──────────────────────────────────────────────────────── */
.iku-container { width: 100%; margin-inline: auto; padding-inline: 16px; }
.iku-container-sm { max-width: 600px; }
.iku-container-md { max-width: 960px; }
.iku-container-lg { max-width: 1280px; }