/* ==========================================================================
   HYPERDESK — DESIGN SYSTEM « CONSOLE SOBRE »

   Trois principes tiennent toute la feuille :
   1. La séparation se fait par un filet d'1 px, jamais par une ombre.
      L'élévation (--shadow-pop) est réservée aux calques réellement flottants
      — dialogues et palette de commandes. L'écran supporte ainsi une densité
      supérieure sans devenir bruyant.
   2. La couleur encode, elle ne décore pas. Bleu = action ou sélection ;
      vert / ambre / rouge = état ; violet / turquoise / ambre / bleu = famille
      de ressource. Tout le reste est neutre.
   3. Le chiffre prime sur son étiquette : chasse tabulaire partout, valeur
      d'abord, unité en gris, libellé en capitales fines au-dessus.

   Référence visuelle : docs/superpowers/specs/2026-07-26-maquettes-console-sobre.html
   ========================================================================== */

/* == Polices ===============================================================
   Toutes deux hébergées localement, sous-ensemble latin : aucun appel à un
   CDN au runtime. Inter porte l'interface (chasse tabulaire native, essentielle
   dans les grilles denses) ; Sora reste réservée au wordmark SYNTIS. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Sora-SemiBold-latin.woff2") format("woff2");
}

/* == Jetons ================================================================
   Le thème sombre ne surcharge que ce bloc, jamais les composants. */
:root {
    /* Marque SYNTIS (issue des logos, wwwroot/Images/logos). */
    --syntis-navy: #00203c;
    --syntis-blue: #0b78be;
    --syntis-blue-light: #24abe2;

    /* Surfaces : trois niveaux, écarts volontairement faibles. */
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --surface-3: #f2f4f7;

    /* Filets. --border ne fait que séparer (décoratif) ; --border-strong borne
       les contrôles — champs, boutons — et doit donc atteindre 3:1 sur la
       surface, exigence WCAG 1.4.11 sur les éléments d'interface. */
    --border: #e7eaee;
    --border-strong: #868f9d;

    /* Texte : trois niveaux, pas davantage. --text-subtle porte de vrais
       libellés (en-têtes de colonne, unités) : il tient le 4,5:1, il n'est
       pas décoratif. */
    --text: #101828;
    --text-muted: #5d6b7e;
    --text-subtle: #667085;

    /* Action et sélection. --accent-ink est l'encre posée SUR l'accent : blanche
       en clair, sombre en thème sombre où l'accent s'éclaircit — du blanc sur le
       bleu clair tomberait à 2,8:1. */
    --accent: #0b78be;
    --accent-hover: #0a6aa9;
    --accent-soft: #eaf4fb;
    --accent-ring: #24abe2;
    --accent-ink: #ffffff;

    /* États sémantiques : même signification partout. */
    --ok: #067647;
    --ok-bg: #ecfdf3;
    --ok-border: #a6f4c5;
    --warn: #b54708;
    --warn-bg: #fffaeb;
    --warn-border: #fedf89;
    --err: #b42318;
    --err-bg: #fef3f2;
    --err-border: #fecdca;

    /* Familles de ressources : la couleur dit de QUOI on parle. Un picto
       violet signifie toujours « processeur », sur toutes les fiches. */
    --res-calcul: #6941c6;
    --res-memoire: #0e7090;
    --res-stockage: #b54708;
    --res-reseau: #0b78be;

    /* Élévation, réservée aux calques flottants. */
    --shadow-pop: 0 12px 32px -8px rgb(16 24 40 / .18), 0 0 0 1px var(--border);

    /* Espacement (densité console) et rayons. */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --r-sm: 5px;
    --r: 7px;
    --r-lg: 10px;
}

[data-theme="dark"] {
    --bg: #0d0f13;
    --surface: #15181d;
    --surface-2: #1a1e24;
    --surface-3: #212630;
    --border: #262c35;
    --border-strong: #5c6674;
    --text: #e7ebf0;
    --text-muted: #9aa7b8;
    --text-subtle: #8290a0;
    --accent: #38a3dd;
    --accent-hover: #55b5e8;
    --accent-soft: #10222f;
    --accent-ring: #38a3dd;
    --accent-ink: #06131c;
    --ok: #5ed88f;
    --ok-bg: #0d2318;
    --ok-border: #1c4a30;
    --warn: #f0b45e;
    --warn-bg: #2a1f0d;
    --warn-border: #573f16;
    --err: #f97970;
    --err-bg: #2c1414;
    --err-border: #5c2622;
    --res-calcul: #a58bf0;
    --res-memoire: #4bb8cf;
    --res-stockage: #e0a45c;
    --res-reseau: #55b5e8;
    --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / .6), 0 0 0 1px var(--border);
}

/* == Base ================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -.011em;
}

a {
    color: var(--accent);
}

h1:focus {
    outline: none;
}

/* Anneau de focus clavier homogène : les composants Syncfusion neutralisent
   celui du navigateur, la navigation au clavier devenait invisible. */
:focus-visible {
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Chiffres alignés en colonne : indispensable dès qu'on compare des valeurs. */
.num {
    font-variant-numeric: tabular-nums;
}

.mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .86em;
}

/* Texte réservé aux lecteurs d'écran : là où un symbole porte l'information
   visuellement, ce libellé la porte à l'oral. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Nom de l'entreprise en toutes lettres. */
.brand-wordmark {
    font-family: "Sora", Inter, sans-serif;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
}

/* Affiche le logo adapté au thème courant (voir Images/logos). */
.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: inline;
}

/* == Coquille applicative ================================================== */
.shell {
    display: flex;
    min-height: 100dvh;
}

/* --- Sidebar ------------------------------------------------------------ */
.sb {
    display: flex;
    flex-direction: column;
    width: 228px;
    flex: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.sb-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 47px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}

.sb-mark {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    background: linear-gradient(140deg, var(--syntis-blue-light), var(--syntis-navy));
}

.sb-word {
    font-size: 13px;
    white-space: nowrap;
}

.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    padding: 12px 8px;
}

.sb-group {
    padding: 16px 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.sb-group:first-child {
    padding-top: 2px;
}

.sb-link {
    /* position: relative porte l'indicateur vertical de l'élément actif. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .sb-link svg {
        flex: none;
        opacity: .85;
    }

    .sb-link:hover {
        background: var(--surface-3);
        color: var(--text);
    }

.sb-badge {
    margin-left: auto;
    padding: 1px 6px;
    border: 1px solid var(--err-border);
    border-radius: 99px;
    background: var(--err-bg);
    color: var(--err);
    font-size: 11px;
    font-weight: 600;
}

.sb-foot {
    padding: 8px;
    border-top: 1px solid var(--border);
}

/* État réduit : piloté par un attribut posé sur <html> avant le premier
   rendu (theme.js). Lu depuis Blazor, il arriverait après la peinture et
   produirait un saut de 172 px. */
[data-sidebar="rail"] .sb {
    width: 56px;
}

[data-sidebar="rail"] .sb-word,
[data-sidebar="rail"] .sb-link span,
[data-sidebar="rail"] .sb-group,
[data-sidebar="rail"] .sb-badge {
    display: none;
}

[data-sidebar="rail"] .sb-link {
    justify-content: center;
    padding: 8px 0;
}

[data-sidebar="rail"] .sb-brand {
    justify-content: center;
    padding: 0;
}

/* --- Zone principale et topbar ------------------------------------------ */
.main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.tb {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: 47px;
    padding: 0 var(--s5);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.crumb {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    color: var(--text-muted);
}

    .crumb a {
        color: var(--text-muted);
        text-decoration: none;
    }

        .crumb a:hover {
            color: var(--text);
        }

.crumb-sep {
    color: var(--text-subtle);
}

.crumb-now {
    color: var(--text);
    font-weight: 550;
}

/* Marque en topbar (espace client, qui n'a pas de sidebar). */
.tb-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

/* Groupe d'actions aligné à droite. Groupé plutôt que poussé élément par
   élément : l'alignement ne dépend alors pas de la présence des contrôles
   conditionnels. */
.tb-actions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-left: auto;
}

.tb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 270px;
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-subtle);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: text;
}

    .tb-search:hover {
        background: var(--surface-3);
    }

.kbd {
    margin-left: auto;
    padding: 1px 5px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-subtle);
    font-family: inherit;
    font-size: 11px;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

    .icon-btn:hover {
        background: var(--surface-3);
        color: var(--text);
    }

.avatar {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 650;
}

.content {
    flex: 1;
    min-width: 0;
    padding: var(--s5);
}

/* --- En-tête de page ---------------------------------------------------- */
.ph {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    margin-bottom: var(--s4);
}

    .ph h1 {
        font-size: 20px;
    }

.ph-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.ph-act {
    display: flex;
    gap: var(--s2);
    flex: none;
    margin-left: auto;
}

/* Deux colonnes qui se replient sur une seule en écran étroit. */
.cols2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s3);
    align-items: start;
}

/* == Boutons =============================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    /* Un bouton peut être porté par un <a> (navigation) : il ne doit pas
       hériter du soulignement des liens. */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .btn:hover {
        background: var(--surface-3);
        text-decoration: none;
    }

    .btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

    .btn--primary:hover {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
    }

.btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}

    .btn--ghost:hover {
        background: var(--surface-3);
        color: var(--text);
    }

.btn--danger {
    color: var(--err);
    border-color: var(--err-border);
}

    .btn--danger:hover {
        background: var(--err-bg);
    }

.btn--sm {
    height: 26px;
    padding: 0 9px;
    font-size: 12.5px;
}

.btn--icon {
    width: 26px;
    padding: 0;
    justify-content: center;
}

/* == Pastilles et états ==================================================== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px 1px 6px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}

    .pill::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: none;
        border-radius: 50%;
        background: currentColor;
    }

.pill--ok {
    color: var(--ok);
    background: var(--ok-bg);
    border-color: var(--ok-border);
}

.pill--warn {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-border);
}

.pill--err {
    color: var(--err);
    background: var(--err-bg);
    border-color: var(--err-border);
}

/* État symbolique : le symbole porte l'information autant que la couleur,
   pour rester lisible sans perception fine des teintes. */
.state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

    .state i {
        font-style: normal;
        font-size: 11px;
        line-height: 1;
    }

.state--ok i { color: var(--ok); }
.state--warn i { color: var(--warn); }
.state--err i { color: var(--err); }
.state--off i { color: var(--text-subtle); }

.tag {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11.5px;
}

/* Teintes posées sur l'élément lui-même : elles alimentent currentColor,
   dont se servent la pastille de picto et le remplissage des jauges. */
/* Pas de teinte « succès » : un état sain se rend en neutre. La couleur est
   réservée à ce qui demande une action. */
.teinte-alerte { color: var(--warn); }
.teinte-danger { color: var(--err); }
.teinte-neutre { color: var(--text-subtle); }

/* == Cartes ================================================================ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.card-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px var(--s4);
    border-bottom: 1px solid var(--border);
}

    .card-h h2 {
        font-size: 14px;
        color: var(--text);
    }

    .card-h .count {
        margin-left: 2px;
        padding: 0 6px;
        border-radius: 99px;
        background: var(--surface-3);
        color: var(--text-muted);
        font-size: 11.5px;
        font-weight: 600;
    }

    .card-h .right {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

.card-b {
    padding: var(--s4);
}

/* Variante dont le contenu suit directement l'en-tête, sans bloc de corps
   intermédiaire : la carte porte le rembourrage et l'en-tête est ramené aux
   bords pour conserver son filet pleine largeur. */
.card--pad {
    padding: var(--s4);
}

    .card--pad > .card-h {
        margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
    }

/* Le picto vit dans une pastille teintée de la couleur de sa famille : la
   couleur reste lisible sans jamais devenir un aplat criard. */
.chip {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    background: color-mix(in srgb, currentColor 13%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.f-calcul { color: var(--res-calcul); }
.f-memoire { color: var(--res-memoire); }
.f-stockage { color: var(--res-stockage); }
.f-reseau { color: var(--res-reseau); }
.f-neutre { color: var(--text-subtle); }

/* == Tuiles de synthèse ==================================================== */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: var(--s3);
}

.tile {
    display: flex;
    flex-direction: column;
    padding: 13px var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

/* min-height de deux lignes : les libellés longs passent à la ligne sans
   décaler le chiffre par rapport aux tuiles voisines. Une rangée de chiffres
   alignés se balaie d'un coup d'œil, une rangée en escalier non. */
.tile-k {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-height: 2.6em;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

    .tile-k .picto {
        flex: none;
        margin-top: 1px;
    }

.tile-v {
    margin-top: 6px;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
}

    .tile-v small {
        margin-left: 3px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
    }

.tile-d {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* == Jauges alloué / consommé ==============================================
   Élément signature des fiches. En virtualisation, tout est une promesse :
   un disque « de 2 To » n'occupe que ce qu'il contient, 50 vCPU tiennent sur
   16 cœurs. La jauge montre toujours la même chose — la piste est ce qui est
   alloué, le remplissage ce qui est réellement consommé. */
.gauges {
    display: grid;
    /* min() borne le minimum à la largeur disponible : sans lui, une piste de
       210 px impose un débordement horizontal sur écran étroit. */
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: var(--s3);
}

.gauge {
    padding: 13px var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}

.gauge-h {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.gauge-l {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.gauge-n {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text);
}

    .gauge-n small {
        margin-left: 4px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--text-muted);
    }

.track {
    height: 5px;
    margin-top: 9px;
    border-radius: 99px;
    background: color-mix(in srgb, currentColor 15%, transparent);
    overflow: hidden;
}

    .track i {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: currentColor;
        transition: width 600ms ease-out;
    }

/* Surallocation : le remplissage sature la piste et la part au-delà des
   100 % est hachurée, pour qu'un dépassement ne se lise pas comme un plein. */
.track.over i {
    background: repeating-linear-gradient(135deg,
        currentColor 0 5px,
        color-mix(in srgb, currentColor 40%, transparent) 5px 10px);
}

.gauge-d {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

    .gauge-d b {
        color: currentColor;
    }

/* == Tableaux ==============================================================
   Mise en forme de référence ; la surcouche Syncfusion plus bas aligne
   SfGrid sur ces mêmes valeurs. */
.tbl-wrap {
    overflow: auto;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

    .tbl th {
        position: sticky;
        top: 0;
        padding: 8px var(--s3);
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        color: var(--text-subtle);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    .tbl td {
        padding: 9px var(--s3);
        border-bottom: 1px solid var(--border);
        color: var(--text);
    }

    .tbl th.r, .tbl td.r { text-align: right; }
    .tbl th.c, .tbl td.c { text-align: center; }

    .tbl tbody tr:last-child td {
        border-bottom: 0;
    }

    .tbl tbody tr:hover td {
        background: var(--surface-2);
    }

/* Utilitaires de cellule, volontairement globaux : les mêmes conventions
   doivent valoir dans un tableau maison comme dans une grille Syncfusion. */
.lead {
    font-weight: 550;
}

a.lead,
.lead a {
    color: var(--accent);
    text-decoration: none;
}

    a.lead:hover,
    .lead a:hover {
        text-decoration: underline;
    }

.muted { color: var(--text-muted); }
.empty { color: var(--text-subtle); }

/* Les actions restent en retrait tant que la ligne n'est pas survolée :
   elles ne doivent pas concurrencer la donnée. */
.acts {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: .55;
}

tr:hover .acts,
.acts:focus-within {
    opacity: 1;
}

/* == Barre de filtres ====================================================== */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    padding: 10px var(--s4);
    border-bottom: 1px solid var(--border);
}

.field {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-subtle);
    font-size: 13px;
}

    .field.grow {
        flex: 1;
        min-width: 200px;
        max-width: 340px;
    }

/* Un composant Syncfusion imbriqué dans .field ne doit pas dessiner sa
   propre bordure : le conteneur porte déjà le cadre et l'état de focus. */
.field .e-input-group,
.field .e-input-group.e-control-wrapper,
.field .e-ddl.e-input-group {
    flex: 1;
    height: auto;
    border: 0;
    background: transparent;
}

    .field .e-input-group.e-input-focus {
        box-shadow: none;
    }

.field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.filters .count {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

/* == Listes de spécifications ============================================== */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px var(--s5);
    margin: 0;
}

    .specs dt {
        margin-bottom: 2px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    .specs dd {
        margin: 0;
        font-size: 13.5px;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

/* == Barres de volume ====================================================== */
.vols {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.vol-h {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: 5px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

    .vol-h .muted {
        color: var(--text-muted);
    }

.vbar {
    height: 5px;
    border-radius: 99px;
    background: var(--surface-3);
    overflow: hidden;
}

    .vbar i,
    .vbar > div {
        display: block;
        height: 100%;
        border-radius: 99px;
        background: var(--res-stockage);
        transition: width 600ms ease-out;
    }

        .vbar i.crit,
        .vbar > div.crit {
            background: var(--err);
        }

/* == États vides =========================================================== */
.empty-state {
    padding: var(--s7) var(--s5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    text-align: center;
}

    .empty-state .chip {
        width: 38px;
        height: 38px;
        margin: 0 auto var(--s3);
        border-radius: 10px;
    }

    .empty-state h2 {
        font-size: 15px;
    }

    .empty-state p {
        margin: 6px auto var(--s4);
        max-width: 46ch;
        color: var(--text-muted);
        font-size: 13.5px;
    }

/* == Alertes =============================================================== */
.alert {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--warn-border);
    border-radius: var(--r);
    background: var(--warn-bg);
    color: var(--text);
    font-size: 13px;
}

    .alert > svg,
    .alert > .picto {
        flex: none;
        margin-top: 1px;
        color: var(--warn);
    }

    .alert b {
        font-weight: 600;
    }

    .alert .sub {
        color: var(--text-muted);
    }

.alert--err {
    border-color: var(--err-border);
    background: var(--err-bg);
}

    .alert--err > svg,
    .alert--err > .picto {
        color: var(--err);
    }

/* == Champs de formulaire ================================================== */
.fg {
    margin-bottom: var(--s4);
}

    .fg:last-child {
        margin-bottom: 0;
    }

.lbl {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
}

.hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Intertitre de section : découpe un formulaire long en groupes de sens, ce
   qu'une pile de champs pleine largeur ne fait pas. */
.fs-titre {
    margin: var(--s5) 0 var(--s3);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

    .fs-titre:first-child {
        margin-top: 0;
    }

/* Paire de champs courts sur une ligne : deux champs de 12 caractères côte à
   côte se lisent mieux que l'un sous l'autre sur toute la largeur. Ils se
   replient dès que la place manque. */
.fg-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0 var(--s4);
}

/* Valeur en lecture seule : ce qui est calculé par l'application ne doit pas
   ressembler à un champ de saisie, même grisé. */
.readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
    padding: 10px var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.readout-k {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.readout-v {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 550;
    color: var(--text);
}

    .readout-v.empty {
        font-weight: 400;
        color: var(--text-subtle);
    }

.readout-d {
    font-size: 12px;
    color: var(--text-muted);
}

/* Actions de formulaire en pied de dialogue. Alignées à droite, l'action
   principale en dernier : l'œil termine sa lecture sur ce qu'il vient
   valider. Le filet sépare la saisie de la décision. */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s2);
    margin: var(--s5) calc(var(--s5) * -1) calc(var(--s5) * -1);
    padding: 12px var(--s5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* == Palette de commandes ================================================== */
.cmdk {
    width: 530px;
    max-width: calc(100vw - var(--s6));
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.cmdk-in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px var(--s4);
    border-bottom: 1px solid var(--border);
    color: var(--text-subtle);
}

.cmdk-sec {
    padding: 9px var(--s4) 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.cmdk-i {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--s4);
    font-size: 13.5px;
}

    .cmdk-i .picto {
        color: var(--text-subtle);
    }

    .cmdk-i.sel {
        background: var(--accent-soft);
        color: var(--accent-hover);
    }

        .cmdk-i.sel .picto {
            color: var(--accent);
        }

    .cmdk-i .meta {
        margin-left: auto;
        font-size: 12px;
        color: var(--text-subtle);
    }

.cmdk-f {
    display: flex;
    gap: 14px;
    padding: 9px var(--s4);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 11.5px;
    color: var(--text-subtle);
}

/* == Connexion ============================================================= */
.auth {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}

.auth-l {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s7);
    background: linear-gradient(155deg, var(--syntis-navy) 0%, #063a63 55%, var(--syntis-blue) 130%);
    color: #fff;
}

    .auth-l h2 {
        max-width: 16ch;
        font-size: 27px;
        letter-spacing: -.02em;
        line-height: 1.25;
    }

    .auth-l p {
        margin: 12px 0 0;
        max-width: 40ch;
        color: rgb(255 255 255 / .72);
        font-size: 14px;
    }

/* Sur fond navy, le wordmark est toujours blanc, quel que soit le thème. */
.auth-word {
    font-family: "Sora", Inter, sans-serif;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
}

.auth-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6);
    font-size: 12.5px;
    color: rgb(255 255 255 / .62);
}

    .auth-facts b {
        display: block;
        color: #fff;
        font-size: 19px;
        font-weight: 600;
    }

.auth-r {
    display: grid;
    place-items: center;
    padding: var(--s6);
    background: var(--surface);
}

.auth-box {
    width: 320px;
    max-width: 100%;
}

    .auth-box h1 {
        font-size: 21px;
    }

    .auth-box p {
        margin: 8px 0 var(--s5);
        color: var(--text-muted);
        font-size: 13.5px;
    }

.ms-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
}

    .ms-btn:hover {
        background: var(--surface-3);
    }

.auth-help {
    margin-top: var(--s4);
    font-size: 12.5px;
    color: var(--text-subtle);
    text-align: center;
}

/* == Portail client ======================================================== */
.portal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s3);
}

.portal-c {
    display: block;
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: inherit;
    text-decoration: none;
}

a.portal-c:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

    .portal-c h3 {
        margin-top: 11px;
        font-size: 14px;
    }

    .portal-c p {
        margin: 5px 0 0;
        color: var(--text-muted);
        font-size: 13px;
    }

.portal-c.soon {
    opacity: .6;
}

/* == Reliquats de fiches =================================================== */
.detail-muted {
    margin: 0;
    color: var(--text-muted);
}

.detail-refreshing {
    color: var(--accent);
    font-style: italic;
}

.admin-loading {
    padding: var(--s6) 0;
    color: var(--text-muted);
}

.vm-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
}

/* Les chemins de VHD sont longs : ils doivent pouvoir se couper. */
.vm-chemin {
    margin-top: 4px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Notes multilignes ramenées sur une ligne : le texte complet est en infobulle. */
.vm-note {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-notes {
    margin: 0;
    white-space: pre-wrap;
}

.vm-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 99px;
    color: var(--text-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.vm-badge--alerte {
    border-color: var(--warn-border);
    background: var(--warn-bg);
    color: var(--warn);
}

.vm-sous-titre-sep {
    opacity: .5;
}

.vm-timeline,
.vm-services {
    list-style: none;
    margin: var(--s2) 0 0;
    padding: 0;
}

    .vm-timeline li,
    .vm-services li {
        display: flex;
        align-items: center;
        gap: var(--s2);
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
    }

        .vm-timeline li:last-child,
        .vm-services li:last-child {
            border-bottom: 0;
        }

.vm-timeline-date {
    min-width: 9rem;
    font-variant-numeric: tabular-nums;
}

/* == Diagnostic de connexion =============================================== */
.diagnostic-libelle {
    font-weight: 600;
}

.diagnostic-detail {
    color: var(--text-muted);
    /* Les messages WinRM sont longs : on les laisse passer à la ligne. */
    overflow-wrap: anywhere;
}

/* == Mouvement ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .track i,
    .vbar i,
    .vbar > div {
        transition: none;
    }
}

/* == Validation Blazor ===================================================== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ok);
}

.invalid {
    outline: 1px solid var(--err);
}

.validation-message {
    margin-top: 4px;
    color: var(--err);
    font-size: 12.5px;
}

/* == Bannière d'erreur Blazor ==============================================
   Style global car elle est rendue par plusieurs layouts. color-scheme forcé
   en clair : le jaune d'alerte du framework n'a pas d'équivalent sombre et
   doit rester reconnaissable. */
#blazor-error-ui {
    color-scheme: light only;
    position: fixed;
    inset: auto 0 0 0;
    display: none;
    z-index: 1000;
    box-sizing: border-box;
    padding: .6rem 1.25rem .7rem;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgb(0 0 0 / .2);
}

    #blazor-error-ui .dismiss {
        position: absolute;
        top: .5rem;
        right: .75rem;
        cursor: pointer;
    }

.blazor-error-boundary {
    padding: 1rem;
    background: var(--err);
    color: #fff;
}

    .blazor-error-boundary::after {
        content: "Une erreur inattendue s'est produite.";
    }

/* == Surcouche Syncfusion ==================================================
   Les composants restent ceux de la bibliothèque ; seule leur peinture est
   reprise. Trois pièges vérifiés dans le navigateur :
   — le thème impose « border: 0 » via « .e-grid.e-verticallines .e-rowcell »,
     plus spécifique qu'un simple « .e-grid .e-rowcell » : il faut au moins
     égaler cette spécificité pour reposer ou retirer un filet ;
   — l'alternance de lignes s'appuie sur la seule classe « e-altrow » : y
     ajouter nth-child(even) couvrirait l'union, donc toutes les lignes ;
   — les composants neutralisent l'anneau de focus du navigateur, d'où la
     règle globale :focus-visible plus haut, qui doit rester en vigueur. */

/* --- Grille ------------------------------------------------------------- */
.e-grid {
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
}

    .e-grid .e-gridheader {
        border: 0;
        background: var(--surface-2);
    }

    .e-grid .e-headercell,
    .e-grid .e-detailheadercell {
        padding: 8px 12px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
    }

    .e-grid .e-headercelldiv {
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    .e-grid .e-rowcell {
        padding: 9px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-size: 13px;
    }

/* Le quadrillage vertical disparaît : le filet horizontal suffit à guider
   l'œil. Spécificité alignée sur celle du thème. */
.e-grid.e-verticallines .e-headercell,
.e-grid.e-verticallines .e-rowcell {
    border-right: 0;
}

/* L'alternance fait doublon avec le filet horizontal. */
.e-grid .e-row.e-altrow .e-rowcell {
    background: var(--surface);
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-row.e-altrow:hover .e-rowcell {
    background: var(--surface-2);
}

.e-grid .e-sortfilterdiv {
    color: var(--text-subtle);
}

.e-grid .e-emptyrow td {
    padding: var(--s6) 12px;
    background: var(--surface);
    color: var(--text-muted);
}

/* --- Boutons ------------------------------------------------------------ */
.e-btn,
.e-css.e-btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 550;
    text-transform: none;
}

    .e-btn:hover,
    .e-css.e-btn:hover {
        background: var(--surface-3);
        border-color: var(--border-strong);
        color: var(--text);
    }

    .e-btn:disabled,
    .e-css.e-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

    .e-btn.e-primary:hover,
    .e-css.e-btn.e-primary:hover {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
    }

.e-btn.e-outline {
    background: transparent;
}

.e-btn.e-danger,
.e-css.e-btn.e-danger {
    background: transparent;
    border-color: var(--err-border);
    color: var(--err);
}

    .e-btn.e-danger:hover,
    .e-css.e-btn.e-danger:hover {
        background: var(--err-bg);
        color: var(--err);
    }

.e-btn.e-small,
.e-css.e-btn.e-small {
    height: 26px;
    padding: 0 9px;
    font-size: 12.5px;
}

/* --- Champs de saisie et listes ---------------------------------------- */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-ddl.e-input-group {
    height: 34px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
}

/* La bibliothèque anime un soulignement façon Material : sans objet ici,
   la bordure complète porte déjà l'état de focus. */
.e-input-group::before,
.e-input-group::after,
.e-input-group.e-control-wrapper::before,
.e-input-group.e-control-wrapper::after {
    display: none;
}

.e-input-group input.e-input,
.e-input-group .e-ddl-hidden + .e-input {
    padding: 0 11px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
}

    .e-input-group input.e-input::placeholder {
        color: var(--text-subtle);
    }

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus,
.e-ddl.e-input-group.e-input-focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.e-popup {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

.e-popup.e-ddl .e-list-item {
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
}

    .e-popup.e-ddl .e-list-item.e-active,
    .e-popup.e-ddl .e-list-item.e-hover {
        background: var(--accent-soft);
        color: var(--accent);
    }

/* --- Dialogue ----------------------------------------------------------- */
.e-dialog {
    border: 0;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

    .e-dialog .e-dlg-header-content {
        padding: 14px var(--s5);
        border-bottom: 1px solid var(--border);
        border-radius: 12px 12px 0 0;
        background: var(--surface);
    }

    .e-dialog .e-dlg-header {
        color: var(--text);
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
    }

    .e-dialog .e-dlg-content {
        padding: var(--s5);
        color: var(--text);
        font-family: inherit;
        font-size: 13.5px;
    }

    .e-dialog .e-footer-content {
        padding: 12px var(--s5);
        border-top: 1px solid var(--border);
        border-radius: 0 0 12px 12px;
        background: var(--surface-2);
    }

.e-dlg-overlay {
    background: rgb(16 24 40 / .32);
}

[data-theme="dark"] .e-dlg-overlay {
    background: rgb(0 0 0 / .55);
}

/* --- Case à cocher ------------------------------------------------------ */
.e-checkbox-wrapper .e-frame {
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface);
}

    .e-checkbox-wrapper .e-frame.e-check {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--accent-ink);
    }

.e-checkbox-wrapper .e-label {
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
}

/* ===================================================================
   Portail client — styles propres à HyperDesk.Client.
   Tout le reste du fichier est le design system du site interne,
   recopié tel quel : mêmes tokens, mêmes composants.
   =================================================================== */

.portail-coquille { min-height: 100vh; display: flex; flex-direction: column; }

.portail-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; height: 56px;
    border-bottom: 1px solid var(--border);
    background: var(--surface, #fff);
}

.portail-topbar .marque { font-weight: 650; letter-spacing: .02em; }
.portail-topbar .marque span { color: var(--text-muted); font-weight: 400; }

.portail-topbar .compte { display: flex; align-items: center; gap: 16px; font-size: .875rem; }

.portail-corps { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 24px; }

.bandeau-liaison {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin-bottom: 20px;
    border: 1px solid var(--warning-border, #eab308);
    background: var(--warning-soft, #fefce8);
    color: var(--text); border-radius: 6px; font-size: .875rem;
}

.cartes-vms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.carte-vm {
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface, #fff); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
}

.carte-vm .entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carte-vm .nom { font-weight: 600; overflow-wrap: anywhere; }

.carte-vm dl {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
    margin: 0; font-size: .8125rem;
}
.carte-vm dt { color: var(--text-muted); }
.carte-vm dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.carte-vm .pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carte-vm .motif { font-size: .8125rem; color: var(--danger, #b42318); }

/* Mention de protection : un acquis rassurant, pas une alerte. Elle emprunte
   donc le vert du succès, en retrait — la donnée de la machine reste le sujet
   de la tuile. */
.carte-vm .protection {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--ok);
    font-size: .8125rem;
}

.carte-vm .protection-marque {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    background: var(--ok-bg);
    font-size: 9px;
    line-height: 1;
}

.page-connexion {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.panneau-connexion {
    width: 100%; max-width: 380px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface, #fff); padding: 32px;
    display: flex; flex-direction: column; gap: 18px;
}
.panneau-connexion h1 { margin: 0; font-size: 1.25rem; }
.panneau-connexion label { display: block; font-size: .8125rem; color: var(--text-muted); margin-bottom: 4px; }
.panneau-connexion input {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border-strong); border-radius: 6px;
    background: transparent; color: var(--text); font: inherit;
}
.panneau-connexion .erreur { color: var(--danger, #b42318); font-size: .8125rem; }

/* == Page Ma société ======================================================= */
.societe-titre { margin: 24px 0 8px; font-size: 1.0625rem; }
.societe-contacts { list-style: none; padding: 0; display: grid; gap: 6px; }
.societe-adresse-edit { display: grid; gap: 10px; max-width: 480px; }
.societe-adresse-edit label { display: block; font-size: .8125rem; color: var(--text-muted); margin-bottom: 2px; }
.societe-adresse-edit input {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border-strong); border-radius: 6px;
    background: transparent; color: var(--text); font: inherit;
}
.societe-adresse-cp { display: flex; gap: 10px; }
.societe-adresse-cp > div:first-child { width: 130px; }
.societe-adresse-cp > div:last-child { flex: 1; }
.societe-contact-edit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.societe-contact-edit input, .societe-contact-edit select {
    padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 6px;
    background: transparent; color: var(--text); font: inherit; width: 130px;
}
.erreur { color: var(--danger, #b42318); font-size: .8125rem; }
.portail-nav { display: flex; gap: 14px; margin-left: 24px; margin-right: auto; }
.portail-nav a { color: var(--text-muted); text-decoration: none; padding: 4px 2px; }
.portail-nav a.active { color: var(--text); border-bottom: 2px solid currentColor; }