/*
  Orbite.Blazor — l'allure d'Orbite 3 (Docs/Design-Orbite3.md, lot WP2 « thème et coquille », 22 octobre 2026).

  Le thème DevExpress reste Fluent (clair et sombre, App.razor) pour les composants ; tout le reste est
  à Orbite : la coquille (barre supérieure, navigation latérale), les cartes, les titres, les grilles
  réglées, les pastilles et les bandeaux. Les couleurs viennent des jetons d'Orbite.Theme/couleurs.json,
  générés dans css/orbite-couleurs.css (--orbite-…, chargé avant ce fichier ; Docs/Theme-Orbite.md) :
  ce fichier ne redéfinit jamais un jeton, il les emploie. Les surfaces de Fluent (--dxds-…) sont
  alignées sur les jetons, pour que grilles, fenêtres et éditeurs suivent le même clair et le même sombre.

  Échelle : espacement 4, 8, 12, 16, 24, 32 ; rayon des cartes 8 px, des boutons et champs 6 px, des
  pastilles 999 px ; une seule ombre (--orbite-ombre). Police système (aucune police téléchargée).
  La navigation en tuiles (allure Metro) est retirée le 30 octobre 2026 ; reste la Tuile de compte (section « Tuile »).
*/

:root {
    --orbite-police: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    --orbite-entete-hauteur: 48px;
    --orbite-nav-largeur: 240px;
    --orbite-nav-largeur-repliee: 56px;
    --orbite-gauche-largeur: 200px;
    /* La marge du contenu, partout (coquille, téléphone ; écarts et décalages collants qui s'y alignent) :
       réduite de moitié le 29 octobre 2026 (François : « en restant très confortable »). */
    --orbite-marge: 12px;
    --orbite-marge-haut: 10px;
    --orbite-rayon-carte: 8px;
    --orbite-rayon: 6px;
    /* Fond d'une barre dans une page (barres d'outils des côtés des Nouvelles) : la surface. */
    --orbite-fond-entete: var(--orbite-fond-surface);
    /* Survol et ligne courante : une teinte du texte, juste dans les deux modes. */
    --orbite-survol: color-mix(in srgb, currentColor 7%, transparent);
    --orbite-courant: color-mix(in srgb, currentColor 13%, transparent);

    /* Fluent suit Orbite : surfaces, bordures et texte des composants DevExpress (Docs/Theme-Orbite.md). */
    --dxds-color-surface-neutral-default-rest: var(--orbite-fond-surface);
    --dxds-color-surface-neutral-subdued-rest: var(--orbite-fond-discret);
    --dxds-color-border-neutral-default-rest: var(--orbite-bordure);
    --dxds-color-border-neutral-subdued-rest: var(--orbite-bordure-discrete);
    --dxds-color-content-neutral-default-rest: var(--orbite-texte);
    --dxds-color-content-neutral-subdued-rest: var(--orbite-texte-secondaire);
}

/* Le thème ne pose pas color-scheme sur la page : la classe vient d'App.razor (témoin) puis de js/orbite.js.
   Elle règle les contrôles natifs et les couleurs light-dark() d'ici. */
html.orbite-clair { color-scheme: light; }
html.orbite-sombre { color-scheme: dark; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html, html body {
    background-color: var(--orbite-fond-page);
    color: var(--orbite-texte);
    font-family: var(--orbite-police);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* Les composants DevExpress prennent la police d'Orbite (Fluent déclare la sienne par variable). */
:root { --dxbl-font-family: var(--orbite-police); --dxds-font-family-base: var(--orbite-police); }
/* Taille du texte des composants DevExpress (champs, listes, boutons, grilles). Fluent « moyen » vaut 0.875rem, et la
   racine d'Orbite est à 14 px (html ci-dessus) : 12,25 px, plus petit que le texte de la page. François (23 octobre
   2026) : les données se lisaient mieux en v2. On fixe en pixels la taille du texte de la page. */
:root { --dxds-font-size-base-md: 14px; }
.dxbl-text-edit, .dxbl-btn, .dxbl-grid, .dxbl-popup, .dxbl-fl, .dxbl-tabs, .dxbl-scheduler, .dxbl-toast, .dxbl-dropdown, .dxbl-menu, .dxbl-list-box, .dxbl-pager,
.dxbl-checkbox, .dxbl-memo, .dxbl-spin-edit, .dxbl-combobox, .dxbl-date-edit, .dxbl-tag-box, .dxbl-pivot-grid, .dxbl-modal, .dxbl-context-menu, .dxbl-dropdown-dialog {
    font-family: var(--orbite-police);
}

a { color: var(--orbite-lien); }
a:hover { color: var(--orbite-accent-texte); }

h1, h2, h3 { font-weight: 600; margin: 0 0 8px 0; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }

/* Focus clavier : un seul anneau, celui d'Orbite. */
:focus-visible { outline: 2px solid var(--orbite-focus); outline-offset: 2px; }

/* ====================================================================================================
   La coquille (Layout/MainLayout.razor, mode Classique) : barre supérieure 48 px, navigation latérale
   240 px repliable à 56 px (témoin orbite-navigation-repliee), contenu fluide ; tiroir sur téléphone.
   ==================================================================================================== */

.orbite-app {
    display: grid;
    grid-template-columns: var(--orbite-nav-largeur) minmax(0, 1fr);
    grid-template-rows: var(--orbite-entete-hauteur) minmax(0, 1fr);
    grid-template-areas: "barre barre" "nav contenu";
    min-height: 100vh;
}

.orbite-app.nav-repliee { grid-template-columns: var(--orbite-nav-largeur-repliee) minmax(0, 1fr); }

/* ---------- Barre supérieure ---------- */

.orbite-barre-haut {
    grid-area: barre;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--orbite-entete-hauteur);
    padding: 0 12px 0 8px;
    box-sizing: border-box;
    background: var(--orbite-nav-fond);
    color: var(--orbite-sur-bleu);
    box-shadow: var(--orbite-ombre);
}

.orbite-barre-bouton {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--orbite-rayon);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.orbite-barre-bouton:hover { background: var(--orbite-nav-actif-fond); }
.orbite-barre-bouton:focus-visible { outline-color: var(--orbite-sur-bleu); outline-offset: -2px; }
/* ☰ : sur grand écran, replie la navigation ; sur téléphone, ouvre le tiroir (un bouton chacun, site.css choisit). */
.orbite-barre-tiroir { display: none; }

.orbite-marque {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--orbite-rayon);
    color: inherit;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .2px;
}

.orbite-marque:hover { background: var(--orbite-nav-actif-fond); color: inherit; }
.orbite-marque svg { width: 26px; height: 26px; display: block; }

/* La marque en image (MarqueOrbite, phase 3) : le logo d'Orbite (AppIconText.png, fond transparent) sur une
   petite plaque claire arrondie, pour qu'il se lise sur la barre bleue en clair comme en sombre. */
.orbite-logo {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: var(--orbite-rayon);
    background: var(--orbite-sur-bleu);
    line-height: 0;
}
.orbite-logo img { display: block; width: auto; }

.orbite-organisme {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 8px;
    border-left: 1px solid var(--orbite-nav-actif-fond);
    color: var(--orbite-nav-texte);
    font-size: 14px;
}

/* Recherche de dossier : un champ discret sur la marque (Entrée ouvre la page Dossiers). */
.orbite-recherche {
    flex: 0 1 320px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: var(--orbite-rayon);
    background: rgba(255, 255, 255, .12);
    color: var(--orbite-sur-bleu);
}

.orbite-recherche:focus-within { background: var(--orbite-fond-surface); color: var(--orbite-texte); box-shadow: 0 0 0 2px var(--orbite-focus); }
.orbite-recherche .orbite-ico { flex: none; opacity: .85; }
.orbite-recherche input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}
.orbite-recherche input::placeholder { color: currentColor; opacity: .7; }

/* Pastille utilisateur et son menu. */
.orbite-utilisateur { flex: none; position: relative; }

.orbite-utilisateur-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.orbite-utilisateur-bouton:hover, .orbite-utilisateur-bouton[aria-expanded="true"] { background: var(--orbite-nav-actif-fond); }
.orbite-utilisateur-bouton:focus-visible { outline-color: var(--orbite-sur-bleu); outline-offset: -2px; }
.orbite-utilisateur-bouton img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--orbite-fond-surface); }
.orbite-utilisateur-nom { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.orbite-menu-voile { position: fixed; inset: 0; z-index: 1001; }

.orbite-menu-flottant {
    position: absolute;
    z-index: 1002;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    padding: 6px 0;
    box-sizing: border-box;
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon-carte);
    box-shadow: var(--orbite-ombre);
}

.orbite-menu-flottant-titre { padding: 6px 14px 8px 14px; font-size: 13px; color: var(--orbite-texte-secondaire); }
.orbite-menu-flottant-titre strong { display: block; color: var(--orbite-texte); font-size: 14px; }

.orbite-menu-flottant a, .orbite-menu-flottant button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.orbite-menu-flottant a:hover, .orbite-menu-flottant button:hover, .orbite-menu-flottant a:focus-visible, .orbite-menu-flottant button:focus-visible { background: var(--orbite-survol); color: inherit; outline: none; }
.orbite-menu-flottant .orbite-ico { color: var(--orbite-texte-secondaire); }
.orbite-menu-flottant-separateur { height: 1px; margin: 6px 0; background: var(--orbite-bordure-discrete); }

/* ---------- Navigation latérale ---------- */

.orbite-nav {
    grid-area: nav;
    position: sticky;
    top: var(--orbite-entete-hauteur);
    height: calc(100vh - var(--orbite-entete-hauteur));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--orbite-nav-fond);
    color: var(--orbite-nav-texte);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.orbite-nav-liste { flex: 1; padding: 8px 0 8px 0; }

.orbite-nav-item, .orbite-nav-groupe-bouton {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 36px;
    padding: 0 12px 0 16px;
    box-sizing: border-box;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.orbite-nav-item .orbite-ico, .orbite-nav-groupe-bouton .orbite-ico { flex: none; width: 20px; height: 20px; opacity: .9; }
.orbite-nav-item:hover, .orbite-nav-groupe-bouton:hover { background: var(--orbite-nav-actif-fond); color: var(--orbite-sur-bleu); }
.orbite-nav-item:focus-visible, .orbite-nav-groupe-bouton:focus-visible { outline-color: var(--orbite-sur-bleu); outline-offset: -2px; }

/* L'élément actif : voile clair et barre d'accent à gauche. */
.orbite-nav-item.actif {
    background: var(--orbite-nav-actif-fond);
    border-left-color: var(--orbite-accent);
    color: var(--orbite-sur-bleu);
    font-weight: 600;
}
.orbite-nav-item.actif .orbite-ico { opacity: 1; }

.orbite-nav-libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.orbite-nav-chevron { flex: none; width: 16px; height: 16px; opacity: .7; transition: transform .15s ease-out; }
.orbite-nav-groupe.ouvert > .orbite-nav-groupe-bouton .orbite-nav-chevron { transform: rotate(180deg); }
/* Un groupe dont une entrée est active, replié : le bouton du groupe porte la marque. */
.orbite-nav-groupe.courant:not(.ouvert) > .orbite-nav-groupe-bouton { border-left-color: var(--orbite-accent); color: var(--orbite-sur-bleu); }

.orbite-nav-sous .orbite-nav-item { min-height: 32px; padding-left: 48px; font-size: 13.5px; }
.orbite-nav-sous .orbite-nav-item .orbite-ico { width: 16px; height: 16px; }
.orbite-nav-separateur { height: 1px; margin: 6px 16px; background: rgba(255, 255, 255, .12); }

/* Pied : Réglages, version, aide. */
.orbite-nav-pied {
    flex: none;
    padding: 8px 0 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.orbite-nav-pied-info {
    padding: 8px 16px 0 19px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--orbite-nav-texte);
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orbite-nav-pied-info a { color: inherit; }

/* Repliée : icônes seules, libellés en infobulle (title), sous-entrées à plat. */
.nav-repliee .orbite-nav-libelle, .nav-repliee .orbite-nav-chevron, .nav-repliee .orbite-nav-pied-info { display: none; }
.nav-repliee .orbite-nav-item, .nav-repliee .orbite-nav-groupe-bouton { justify-content: center; padding: 0; }
.nav-repliee .orbite-nav-sous .orbite-nav-item { padding-left: 0; }
.nav-repliee .orbite-nav-sous .orbite-nav-item .orbite-ico { width: 18px; height: 18px; }
.nav-repliee .orbite-nav-groupe-bouton { opacity: .55; }

/* Le voile du tiroir (téléphone) : nulle part ailleurs. */
.orbite-nav-voile { display: none; }

/* ---------- Contenu ---------- */

.orbite-contenu {
    grid-area: contenu;
    min-width: 0;
    padding: var(--orbite-marge-haut) var(--orbite-marge) calc(var(--orbite-marge) + 4px) var(--orbite-marge);
    box-sizing: border-box;
}

.orbite-page { width: 100%; }

/* Tableaux croisés (Analyse/PivotAnalyse) : le tableau prend le reste de la hauteur de la fenêtre au lieu des 400 px
   par défaut de DxPivotTable ; sous 420 px de tableau, c'est la page qui défile. */
.orbite-contenu:has(> .pivot-zone) { display: flex; flex-direction: column; }
.orbite-contenu > .pivot-zone { flex: 1 1 0; min-height: 420px; display: flex; flex-direction: column; }
.orbite-contenu > .pivot-zone > .pivot-tableau { flex: 1 1 0; min-height: 0; height: auto; max-height: none; }

/* Téléphone et petite tablette : la navigation devient un tiroir par-dessus le contenu. */
@media (max-width: 899px) {
    .orbite-app, .orbite-app.nav-repliee { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barre" "contenu"; }
    .orbite-nav {
        position: fixed;
        top: var(--orbite-entete-hauteur);
        left: 0;
        bottom: 0;
        z-index: 1100;
        width: var(--orbite-nav-largeur);
        height: auto;
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: none;
    }
    /* Le tiroir ne s'ouvre que par le bouton ☰ (nav-ouverte) ; seule l'ouverture glisse. Sans transition à la
       fermeture : quand une page déjà chargée est rétrécie sous 900 px, la navigation disparaît tout de suite
       (avec une transition sur l'état fermé, elle restait visible le temps de glisser, ou pour de bon dans un
       onglet en arrière-plan, et semblait s'ouvrir toute seule). */
    .orbite-app.nav-ouverte .orbite-nav { transform: none; visibility: visible; transition: transform .18s ease-out; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
    .nav-repliee .orbite-nav-libelle, .nav-repliee .orbite-nav-chevron, .nav-repliee .orbite-nav-pied-info { display: initial; }
    .nav-repliee .orbite-nav-libelle { display: block; }
    .nav-repliee .orbite-nav-item, .nav-repliee .orbite-nav-groupe-bouton { justify-content: flex-start; padding: 0 12px 0 16px; }
    .nav-repliee .orbite-nav-sous .orbite-nav-item { padding-left: 48px; }
    .nav-repliee .orbite-nav-groupe-bouton { opacity: 1; }
    .orbite-app.nav-ouverte .orbite-nav-voile { display: block; position: fixed; inset: var(--orbite-entete-hauteur) 0 0 0; z-index: 1099; background: rgba(0, 0, 0, .35); }
    .orbite-barre-tiroir { display: inline-flex; }
    .orbite-barre-replier { display: none; }
    .orbite-organisme { display: none; }
    .orbite-recherche { flex: 1 1 auto; }
    .orbite-utilisateur-nom { display: none; }
}

/* Impression : la page seule. */
@media print {
    .orbite-barre-haut, .orbite-nav, .orbite-nav-voile, .dossier-gauche, .orbite-barre, .orbite-titre-droite { display: none !important; }
    .orbite-app { display: block; }
    .orbite-contenu { padding: 0; }
    html, html body { background-color: white; }
}

/* ====================================================================================================
   Les pages : titre, cartes, chargement, barres, pastilles, bandeaux.
   ==================================================================================================== */

/* ---------- Titre de page (PageTitre) : icône 24 px en accent, titre 20 px, actions à droite ---------- */

.orbite-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px 0;
}

.orbite-titre-gauche { display: flex; align-items: center; gap: 10px; min-width: 0; }
.orbite-titre-gauche > .orbite-ico { flex: none; width: 24px; height: 24px; color: var(--orbite-accent-texte); }
.orbite-titre-gauche > img { height: 24px; }

.orbite-titre-texte {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.1px;
}

.orbite-titre-droite { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Un titre de section dans une page (deuxième bloc, ex. « Distribution des médicaments ») : 16 px. */
.orbite-titre.section .orbite-titre-texte { font-size: 16px; }
.orbite-titre.section .orbite-titre-gauche > .orbite-ico { width: 20px; height: 20px; }

/* ---------- Carte (Panneau) ---------- */

.orbite-panneau {
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon-carte);
    margin-bottom: 16px;
    overflow: hidden;
}

.orbite-panneau-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--orbite-bordure-discrete);
    background: var(--orbite-fond-discret);
    font-size: 15px;
    font-weight: 600;
    cursor: default;
    user-select: none;
}

.orbite-panneau-entete > .orbite-ico { color: var(--orbite-accent-texte); }
.orbite-panneau-entete img { height: 16px; }
.orbite-panneau-titre { flex: 1; }
.orbite-panneau.reductible .orbite-panneau-entete { cursor: pointer; }
.orbite-panneau.reductible .orbite-panneau-entete:hover { background: color-mix(in srgb, var(--orbite-fond-discret) 60%, var(--orbite-survol)); }
.orbite-panneau-bouton { flex: none; display: inline-flex; color: var(--orbite-texte-secondaire); transition: transform .15s ease-out; }
.orbite-panneau.ferme .orbite-panneau-bouton { transform: rotate(-90deg); }
.orbite-panneau.ferme .orbite-panneau-entete { border-bottom: 0; }

.orbite-panneau-corps { padding: 16px; }

/* Un encadré pointillé (fiche en lecture) devient un bloc discret. */
.divCadreEclairant { border: 1px solid var(--orbite-bordure-discrete); border-radius: var(--orbite-rayon); }

/* ---------- Chargement ---------- */

.orbite-chargement {
    padding: 48px;
    text-align: center;
    color: var(--orbite-texte-secondaire);
}

.orbite-chargement-ligne { display: inline-flex; align-items: center; gap: 8px; padding: 8px; color: var(--orbite-texte-secondaire); }

.orbite-roue {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--orbite-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: orbite-tourne .8s linear infinite;
    vertical-align: middle;
}

@keyframes orbite-tourne { to { transform: rotate(360deg); } }

/* ---------- Barre d'outils de page (ASPxRibbon une ligne) ---------- */

.orbite-barre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.orbite-barre .separateur {
    width: 1px;
    align-self: stretch;
    background: var(--orbite-bordure);
    margin: 0 4px;
}

/* Formulaire en deux colonnes (libellé / valeur), comme les tables d'Orbite.Web. */
.orbite-fiche td { padding: 3px 8px; vertical-align: top; }
.orbite-fiche td.libelle { white-space: nowrap; color: var(--orbite-texte-secondaire); font-size: 13px; }

.text-danger { color: var(--orbite-danger); }
.validation-message { color: var(--orbite-danger); }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.orbite-multiligne { white-space: pre-wrap; }
.orbite-secondaire { color: var(--orbite-texte-secondaire); font-size: 13px; }
.orbite-attenue { color: var(--orbite-texte-attenue); }

/* ---------- Pastilles d'état (Pastille.razor) : fond teinté à 15 %, texte de la teinte ---------- */

.orbite-pastille {
    --pastille-teinte: var(--orbite-texte-secondaire);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pastille-teinte) 15%, transparent);
    color: var(--pastille-teinte);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.orbite-pastille .orbite-ico { flex: none; width: 12px; height: 12px; }
/* Une couleur de données (programme, étiquette) : un point, le texte garde la teinte du genre. */
.orbite-pastille-point { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.orbite-pastille--actif { --pastille-teinte: var(--orbite-signe); }
.orbite-pastille--signe { --pastille-teinte: var(--orbite-signe); }
.orbite-pastille--raye { --pastille-teinte: var(--orbite-danger); }
.orbite-pastille--attente { --pastille-teinte: var(--orbite-attente); }
.orbite-pastille--externe { --pastille-teinte: var(--orbite-accent-texte); }
.orbite-pastille--bleu { --pastille-teinte: var(--orbite-accent-texte); }
.orbite-pastille--neutre { --pastille-teinte: var(--orbite-texte-secondaire); }
/* Un programme : sa couleur (donnée) en teinte ; sans couleur, le bleu. */
.orbite-pastille--programme { --pastille-teinte: var(--orbite-accent-texte); }
.orbite-pastilles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* « En sortie » (cd1, François 27 octobre 2026 : « être en sortie pourrait être un peu plus visible ») : une pastille
   PLEINE (pas teintée à 15 %), violette, avec l'icône de la sortie ; le fond de la carte reste réservé à mon dossier
   et au dossier fermé (CouleursDossier). Jetons sortie-fond / sortie-texte (contraste vérifié par ThemeTests). */
.orbite-pastille--sortie {
    background: var(--orbite-sortie-fond);
    color: var(--orbite-sortie-texte);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--orbite-sortie-fond) 60%, transparent);
}
.orbite-pastille--sortie.orbite-pastille--compacte { padding: 0 6px; }

/* SS2 (27 octobre 2026) : les boutons rapides d'un séjour ou d'une sortie en cours (ActionsSejour, BoutonRetourSortie). */
.sejour-actions-rapides { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; align-items: center; }
.sortie-retour { margin-left: 8px; vertical-align: middle; }
.sejour-actions-rapides .sortie-retour { margin-left: 0; }

/* ---------- Bandeaux (avertissements, alertes du dossier) : barre de 4 px à gauche, fond teinté ---------- */

.orbite-bandeau {
    --bandeau-teinte: var(--orbite-accent);
    --bandeau-fond: var(--orbite-bleu-pale);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 12px;
    margin-bottom: 8px;
    border-left: 4px solid var(--bandeau-teinte);
    border-radius: var(--orbite-rayon);
    background: var(--bandeau-fond);
    color: var(--orbite-texte);
}

.orbite-bandeau > .orbite-ico { flex: none; width: 16px; height: 16px; color: var(--bandeau-teinte); }
.orbite-bandeau-texte { flex: 1; min-width: 0; }
.orbite-bandeau strong { font-weight: 600; }
.orbite-bandeau--danger { --bandeau-teinte: var(--orbite-danger); --bandeau-fond: var(--orbite-nouvelle-alerte); }
.orbite-bandeau--avertissement { --bandeau-teinte: var(--orbite-attente); --bandeau-fond: var(--orbite-avertissement-fond); }
.orbite-bandeau--signe { --bandeau-teinte: var(--orbite-signe); --bandeau-fond: var(--orbite-signe-fond); }
.orbite-bandeau--info { --bandeau-teinte: var(--orbite-accent); --bandeau-fond: var(--orbite-bleu-pale); }

/* Alertes du dossier (DossierCadre) : un bandeau par alerte active ; la couleur dit la gravité. */
.dossier-alerte {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 12px;
    margin-bottom: 8px;
    border-left: 4px solid var(--orbite-attente);
    border-radius: var(--orbite-rayon);
    font-weight: 600;
}
.dossier-alerte > .orbite-ico { flex: none; width: 16px; height: 16px; }
.dossier-alerte img { width: 18px; height: 18px; vertical-align: middle; }
.dossier-alerte.critique { background-color: var(--orbite-alerte-critique); border-left-color: var(--orbite-danger); }
.dossier-alerte.critique > .orbite-ico { color: var(--orbite-danger); }
.dossier-alerte.normale { background-color: var(--orbite-alerte-normale); }
.dossier-alerte.normale > .orbite-ico { color: var(--orbite-attente); }
.dossier-alerte-note { font-weight: 400; color: var(--orbite-texte-secondaire); }

/* ad4 (François, 27 octobre 2026 : « est-ce que les alertes pourraient flasher ? », dans Orbite comme dans AddictA) :
   les GIF clignotants de la v2 reviennent en pulsation DISCRÈTE de l'indicateur d'une alerte en vigueur — l'icône respire : un peu plus petite et plus pâle, puis revient. Critique : 1,6 s ; ordinaire
   (orbite-pulsation--douce) : plus lente et plus légère. Jamais de clignotement franc ni de couleur qui alterne ; rien
   du tout si l'appareil demande moins d'animations (prefers-reduced-motion). Seulement les alertes EN VIGUEUR (bandeaux
   du dossier, sommaire, capsules de dossiers, occupation), pas les listes d'alertes passées ni les nouvelles. */
@keyframes orbite-pulsation {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.86); }
}
@keyframes orbite-pulsation-douce {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}
.orbite-pulsation { animation: orbite-pulsation 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.orbite-pulsation--douce { animation: orbite-pulsation-douce 2.8s ease-in-out infinite; }
.dossier-alerte.critique > .orbite-ico { animation: orbite-pulsation 1.6s ease-in-out infinite; transform-origin: center; }
.dossier-alerte.normale > .orbite-ico { animation: orbite-pulsation-douce 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .orbite-pulsation, .orbite-pulsation--douce,
    .dossier-alerte.critique > .orbite-ico, .dossier-alerte.normale > .orbite-ico { animation: none; }
}

/* Notifications (DxToast) : la même allure de bandeau. */
.dxbl-toast { border-radius: var(--orbite-rayon-carte); box-shadow: var(--orbite-ombre); font-family: var(--orbite-police); }

/* ---------- Nouvelles : la couleur dit la catégorie (Orbite.css) ---------- */

.Nouvelle { background-color: var(--orbite-fond-surface); border: 1px solid var(--orbite-bordure); border-radius: var(--orbite-rayon-carte); padding: 4px; }
.Hot { background-color: var(--orbite-nouvelle-hot); border: 1px solid color-mix(in srgb, var(--orbite-attente) 35%, transparent); border-radius: var(--orbite-rayon-carte); padding: 4px; }
.MyDossier { background-color: var(--orbite-nouvelle-mon-dossier); border: 1px solid color-mix(in srgb, var(--orbite-lit-libre) 35%, transparent); border-radius: var(--orbite-rayon-carte); padding: 4px; }
.MessageCentral { background-color: var(--orbite-nouvelle-message); border: 1px solid color-mix(in srgb, var(--orbite-memo-moi) 35%, transparent); border-radius: var(--orbite-rayon-carte); padding: 4px; }
.Alerte { background-color: var(--orbite-nouvelle-alerte); border: 1px solid color-mix(in srgb, var(--orbite-danger) 40%, transparent); border-radius: var(--orbite-rayon-carte); padding: 4px; }
.Sortie { background-color: var(--orbite-nouvelle-sortie); border: 1px solid color-mix(in srgb, var(--orbite-signe) 35%, transparent); border-radius: var(--orbite-rayon-carte); padding: 4px; }
/* Sites (lot E4) : un mémo pour tous les sites (MemoDto.EstGlobal), quand l'organisme travaille en plusieurs sites. */
.memo-global { background-color: var(--orbite-memo-global); border: 1px solid color-mix(in srgb, var(--orbite-memo-tous) 35%, transparent); border-radius: var(--orbite-rayon-carte); padding: 4px; }

/* ====================================================================================================
   Composants DevExpress (Fluent) réglés : boutons, champs, grilles, fenêtres, formulaires, onglets.
   ==================================================================================================== */

/* Boutons : rayon 6, icône 16 px et libellé ; le primaire est plein (accent), le secondaire en contour. */
.dxbl-btn { border-radius: var(--orbite-rayon); font-weight: 500; }
.dxbl-btn .orbite-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.dxbl-btn > .dxbl-image.orbite-ico { width: 16px; height: 16px; }
.dxbl-btn.dxbl-btn-secondary.dxbl-btn-outline, .dxbl-btn.dxbl-btn-outline-secondary { border-color: var(--orbite-bordure); color: var(--orbite-texte); background: var(--orbite-fond-surface); }
.dxbl-btn.dxbl-btn-secondary.dxbl-btn-outline:hover, .dxbl-btn.dxbl-btn-outline-secondary:hover { background: var(--orbite-fond-discret); border-color: var(--orbite-texte-attenue); }

/* Boutons communs d'Orbite (hors DevExpress) : la même tenue. */
.orbite-bouton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.orbite-bouton:hover { background: var(--orbite-fond-discret); border-color: var(--orbite-texte-attenue); color: var(--orbite-texte); }
.orbite-bouton:disabled { opacity: .5; cursor: default; }
.orbite-bouton--primaire { background: var(--orbite-accent); border-color: var(--orbite-accent); color: var(--orbite-sur-bleu); }
.orbite-bouton--primaire:hover { background: color-mix(in srgb, var(--orbite-accent) 88%, black); border-color: transparent; color: var(--orbite-sur-bleu); }
.orbite-bouton--texte { border-color: transparent; background: transparent; }
.orbite-bouton .orbite-ico { width: 16px; height: 16px; }

/* Champs : rayon 6. */
.dxbl-text-edit, .dxbl-memo, .dxbl-spin-edit, .dxbl-combobox, .dxbl-date-edit, .dxbl-tag-box, .dxbl-list-box { border-radius: var(--orbite-rayon); }
.dxbl-text-edit:focus-within { box-shadow: 0 0 0 1px var(--orbite-focus); }

/* Formulaires (DxFormLayout) : libellés au-dessus, 13 px, secondaires ; deux colonnes dès 720 px (ColSpanMd des pages). */
.dxbl-fl .dxbl-fl-cpt, .dxbl-fl-cpt { font-size: 13px; color: var(--orbite-texte-secondaire); }
.dxbl-fl .dxbl-fl-item.dxbl-fl-item-caption-top .dxbl-fl-cpt { margin-bottom: 2px; }
.dxbl-fl .dxbl-group-header, .dxbl-fl .dxbl-fl-group-header { font-size: 15px; font-weight: 600; }
.dxbl-fl .dxbl-group, .dxbl-fl-group { border-radius: var(--orbite-rayon-carte); border-color: var(--orbite-bordure); }

/* Grilles DevExpress qui restent (l'aperçu des rapports de liste, RapportsListe.razor ; les outils de données ;
   les écrans d'administration tant que WP7f ne les a pas convertis) : en-tête sans fond, texte secondaire
   13 px semi-gras ; lignes séparées d'un filet discret ; survol ; hauteur de ligne 34 px (taille Small de
   Fluent, imposée ici sans changer chaque DxGrid). Les listes d'objets sont des cartes et des lignes (plus bas). */
.orbite-grille { border-radius: var(--orbite-rayon-carte); border-color: var(--orbite-bordure); font-size: 14px; overflow: hidden; }
.orbite-grille .dxbl-grid-header-row > th, .orbite-grille .dxbl-grid-header, .orbite-grille th.dxbl-grid-header {
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte-secondaire);
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--orbite-bordure);
}
.orbite-grille .dxbl-grid-table > tbody > tr > td, .orbite-grille .dxbl-grid-table > thead > tr > th { padding-top: 6px; padding-bottom: 6px; border-color: var(--orbite-bordure-discrete); }
.orbite-grille .dxbl-grid-table > tbody > tr.dxbl-grid-data-row { min-height: 34px; }
.orbite-grille .dxbl-grid-data-row:hover > td { background: var(--orbite-survol); }
.orbite-grille .dxbl-grid-table > tbody > tr.orbite-ligne-alternee > td { background-color: var(--orbite-fond-discret); }
.orbite-grille .dxbl-grid-table > tbody > tr.orbite-ligne-alternee:hover > td { background: color-mix(in srgb, var(--orbite-fond-discret) 50%, var(--orbite-survol)); }
.orbite-grille .dxbl-grid-selected-row > td, .orbite-grille .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td { background-color: var(--orbite-bleu-pale) !important; }
.orbite-grille .dxbl-grid-filter-row > td { background: var(--orbite-fond-discret); }
.orbite-grille .dxbl-grid-pager, .orbite-grille .dxbl-pager { border-top: 1px solid var(--orbite-bordure-discrete); padding: 4px 8px; }
.orbite-grille .dxbl-grid-empty-data { color: var(--orbite-texte-secondaire); padding: 24px; }

/* Fenêtres (DxPopup) : rayon 8, ombre unique, titre 16 px, pied avec Annuler en contour à gauche de l'action pleine. */
.dxbl-popup, .dxbl-modal .dxbl-popup, .dxbl-popup-root .dxbl-popup { border-radius: var(--orbite-rayon-carte); border-color: var(--orbite-bordure); box-shadow: var(--orbite-ombre), 0 12px 40px rgba(16, 24, 40, .18); }
.dxbl-popup-header { font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--orbite-bordure-discrete); }
.dxbl-popup-footer { border-top: 1px solid var(--orbite-bordure-discrete); gap: 8px; }
.dxbl-popup-footer .dxbl-btn-secondary { order: -1; }

/* Onglets et menus déroulants. */
.dxbl-tabs .dxbl-tab.dxbl-tab-active { font-weight: 600; }
.dxbl-dropdown, .dxbl-context-menu, .dxbl-dropdown-dialog { border-radius: var(--orbite-rayon-carte); box-shadow: var(--orbite-ombre), 0 8px 24px rgba(16, 24, 40, .14); }

/* ====================================================================================================
   La fiche du dossier (Shared/DossierCadre.razor) : en-tête en carte, alertes en bandeaux, rail vertical
   de sections (200 px, repliable en icônes 44 px), liste déroulante sur téléphone. AdminCadre et
   EspaceCadre partagent le rail.
   ==================================================================================================== */

.dossier-cadre {
    display: flex;
    gap: var(--orbite-marge);
    align-items: flex-start;
}

.dossier-gauche {
    position: sticky;
    top: calc(var(--orbite-entete-hauteur) + var(--orbite-marge-haut));
    width: var(--orbite-gauche-largeur);
    min-width: var(--orbite-gauche-largeur);
    max-height: calc(100vh - var(--orbite-entete-hauteur) - 2 * var(--orbite-marge-haut));
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon-carte);
    scrollbar-width: thin;
}

.dossier-gauche.reduit { width: 44px; min-width: 44px; }

.dossier-nav-groupe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 4px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--orbite-texte-secondaire);
}

.dossier-nav-groupe.cliquable { cursor: pointer; }
.dossier-nav-groupe.cliquable:hover { color: var(--orbite-texte); }
.dossier-nav-groupe .orbite-nav-chevron { width: 14px; height: 14px; }
.dossier-nav-groupe.ferme .orbite-nav-chevron { transform: rotate(-90deg); }

.dossier-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0 12px 0 11px;
    box-sizing: border-box;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--orbite-texte);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dossier-nav-item > .orbite-ico { flex: none; width: 16px; height: 16px; color: var(--orbite-texte-secondaire); }
.dossier-nav-item > span { overflow: hidden; text-overflow: ellipsis; }
.dossier-nav-item img { width: 16px; height: 16px; }
.dossier-nav-item:hover { background: var(--orbite-survol); color: var(--orbite-texte); }

/* La section courante : comme dans la navigation (voile bleu pâle et barre d'accent). */
.dossier-nav-item.actif {
    background: var(--orbite-bleu-pale);
    border-left-color: var(--orbite-accent);
    color: var(--orbite-accent-texte);
    font-weight: 600;
}
.dossier-nav-item.actif > .orbite-ico { color: var(--orbite-accent-texte); }

.dossier-nav-item.sous { padding-left: 32px; font-size: 13px; }
.dossier-nav-item.inactif { opacity: .45; cursor: default; }

.dossier-nav-reduire {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 4px 10px 6px 14px;
    color: var(--orbite-texte-secondaire);
    cursor: pointer;
}
.dossier-nav-reduire:hover { color: var(--orbite-texte); }
.dossier-nav-reduire .orbite-ico { width: 16px; height: 16px; }

.dossier-gauche.reduit .dossier-nav-groupe { display: none; }
.dossier-gauche.reduit .dossier-nav-item { justify-content: center; padding: 0; }
/* Replié : on cache le texte, pas l'icône (elle est aussi un span, classe orbite-ico). */
.dossier-gauche.reduit .dossier-nav-item > span:not(.orbite-ico) { display: none; }
.dossier-gauche.reduit .dossier-nav-item.sous { padding-left: 0; }
.dossier-gauche.reduit .dossier-nav-reduire { justify-content: center; padding: 4px 0 6px 0; }
.dossier-gauche.reduit .dossier-nav-reduire span:not(.orbite-ico) { display: none; }

.dossier-droite { flex: 1; min-width: 0; }

/* Téléphone et tablette : le rail cède la place à la barre de sections à icônes (DossierCadre.razor.css, lot M2 mobile). */
@media (max-width: 899px) {
    .dossier-cadre { flex-direction: column; gap: 0; }
    .dossier-gauche { display: none; }
    .dossier-droite { width: 100%; }
}

/* En-tête du dossier : carte avec photo ronde 72 px, nom 22 px, sous-ligne, pastilles, boutons à droite. */
.dossier-entete {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon-carte);
}

.dossier-entete-photo {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--orbite-fond-discret);
    border: 1px solid var(--orbite-bordure-discrete);
}

.dossier-entete-texte { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dossier-entete-nom { font-size: 22px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.dossier-entete-sous { font-size: 13px; color: var(--orbite-texte-secondaire); overflow: hidden; text-overflow: ellipsis; }
.dossier-entete-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

@media (max-width: 599px) {
    .dossier-entete { gap: 12px; padding: 12px; }
    .dossier-entete-photo { width: 56px; height: 56px; }
    .dossier-entete-nom { font-size: 18px; }
}

/* L'ancien nom flottant en haut à droite (EspaceCadre encore) : une ligne discrète. */
.dossier-entete-client {
    float: right;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}
.dossier-entete-client img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; }

/* ====================================================================================================
   Connexion (Pages/Connexion.razor) : une carte centrée sur la marque en dégradé discret.
   ==================================================================================================== */

.orbite-login {
    position: fixed;
    inset: 0;
    overflow: auto;
    /* Le pied est dans le flux (après la carte), poussé en bas quand la page est courte : plus de chevauchement quand
       la carte est plus haute que la fenêtre (choix de version du 5 novembre 2026, fenêtre étroite). */
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--orbite-bleu) 0%, color-mix(in srgb, var(--orbite-bleu) 80%, black) 100%);
    color: var(--orbite-sur-bleu);
}

.login-cadre {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 16px 24px 16px;
    box-sizing: border-box;
}

.login-marque { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 600; letter-spacing: .2px; }
.login-marque svg { width: 44px; height: 44px; }
.login-marque .orbite-logo { padding: 8px 16px; border-radius: var(--orbite-rayon-carte); box-shadow: var(--orbite-ombre); }

.login-fenetre {
    width: 440px;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte);
    border: 1px solid var(--orbite-bordure);
    border-radius: 12px;
    box-shadow: var(--orbite-ombre), 0 16px 48px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.login-organisme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 24px 12px 24px;
    text-align: center;
}
.login-organisme img { max-width: 220px; max-height: 96px; object-fit: contain; }
.login-organisme-nom { font-size: 18px; font-weight: 600; }
.login-organisme-slogan { font-size: 13px; color: var(--orbite-texte-secondaire); }

.login-fenetre-titre { padding: 4px 24px 0 24px; font-size: 15px; font-weight: 600; color: var(--orbite-texte-secondaire); text-align: center; }
.login-fenetre-corps { padding: 16px 24px 24px 24px; }

.login-champs { display: flex; flex-direction: column; gap: 12px; }
.login-champs label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--orbite-texte-secondaire); }

.login-champ {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte);
    font: inherit;
    font-size: 14px;
}
.login-champ:focus { outline: none; border-color: var(--orbite-accent); box-shadow: 0 0 0 1px var(--orbite-accent); }
.login-champ:disabled { background: var(--orbite-fond-discret); }

.login-message { min-height: 20px; margin-top: 8px; color: var(--orbite-danger); font-size: 13px; text-align: center; }
.login-avertissement { margin-bottom: 8px; font-size: 13px; color: var(--orbite-texte-secondaire); text-align: center; }
.login-boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.login-boutons .orbite-bouton--primaire { min-width: 160px; justify-content: center; }
.login-boutons .orbite-bouton--texte { margin-right: auto; }

/* Gabarit (Docs/Plan-Mobile.md § 3) : le choix de version sur la page de connexion, deux segments ; la version détectée
   est cochée d'avance, l'autre se prend d'un toucher. */
.login-interface { margin: 14px 0 0 0; padding: 0; border: 0; min-width: 0; }
.login-interface legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--orbite-texte-secondaire); }
.login-interface-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--orbite-bordure); border-radius: var(--orbite-rayon); overflow: hidden; }
.login-interface-choix label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 0 10px; cursor: pointer; font-size: 14px; color: var(--orbite-texte);
    background: var(--orbite-fond-surface);
}
.login-interface-choix label + label { border-left: 1px solid var(--orbite-bordure); }
.login-interface-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.login-interface-choix label:has(input:checked) { background: var(--orbite-accent); color: var(--orbite-sur-bleu); font-weight: 600; }
.login-interface-choix label:has(input:focus-visible) { outline: 2px solid var(--orbite-accent); outline-offset: -2px; }
.login-interface-detecte { margin-top: 6px; font-size: 12px; color: var(--orbite-texte-secondaire); }

.login-pied {
    flex: none;
    padding: 0 16px 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--orbite-nav-texte);
}
.login-pied a { color: inherit; }
/* Le logo de Virtys (texte sombre) passe en blanc sur la marque. */
.login-pied img { height: 20px; opacity: .85; vertical-align: middle; filter: brightness(0) invert(1); }
.login-quoi-de-neuf { display: inline-flex; align-items: center; gap: 6px; }
.login-dev { font-size: 12px; }
.login-version { white-space: nowrap; }

/* ====================================================================================================
   Boutons image (icônes d'Orbite), commandes des grilles, menu des lignes.
   ==================================================================================================== */

.orbite-bouton-image {
    border: none;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.orbite-bouton-image:hover:not(:disabled) { background: var(--orbite-survol); color: var(--orbite-accent-texte); }
.orbite-bouton-image:disabled { opacity: .35; cursor: default; }
/* Dans un titre ou l'en-tête du dossier (Outils) : un bouton secondaire comme les DxButton voisins. */
.orbite-titre-droite > .orbite-bouton-image, .dossier-entete-actions > .orbite-bouton-image {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    background: var(--orbite-fond-surface);
    font-weight: 500;
}
.orbite-titre-droite > .orbite-bouton-image:hover:not(:disabled), .dossier-entete-actions > .orbite-bouton-image:hover:not(:disabled) { background: var(--orbite-fond-discret); border-color: var(--orbite-texte-attenue); color: var(--orbite-texte); }
.orbite-titre-droite > .orbite-bouton-image .orbite-ico, .dossier-entete-actions > .orbite-bouton-image .orbite-ico { width: 16px; height: 16px; }

/* Commandes des grilles (cellules, en-têtes « Nouveau », lignes en édition) : une seule taille,
   quel que soit le nombre de boutons ou le Taille du BoutonImage. Icône de 16 px dans une zone
   cliquable de 28 px ; au-delà de la largeur de la colonne, les boutons passent à la ligne au lieu
   de rapetisser. Le « ⋯ » a la même zone. */
:root { --orbite-commande-zone: 28px; --orbite-commande-icone: 16px; }
.orbite-commandes { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; }
.orbite-commandes .orbite-bouton-image {
    box-sizing: border-box;
    min-width: var(--orbite-commande-zone);
    height: var(--orbite-commande-zone);
    padding: 0 4px;
    justify-content: center;
    border-radius: 4px;
    flex: 0 0 auto;
    color: var(--orbite-texte-secondaire);
}
.orbite-commandes .orbite-bouton-image:hover:not(:disabled) { color: var(--orbite-accent-texte); }
.orbite-commandes .orbite-bouton-image img {
    width: var(--orbite-commande-icone) !important;
    height: var(--orbite-commande-icone) !important;
}
/* Un indicateur (cadenas « Protégé ») n'est pas cliquable : pas d'effet de survol. */
.orbite-commandes .orbite-indicateur, .orbite-indicateur:hover { cursor: default; background: transparent !important; }

/* Boutons des lignes (CommandesLigne, Réglages) : toujours visibles, ou le menu « ⋯ » (bs92, 28 octobre 2026 : plus de
   mode « Au survol »). */

/* Menu : le bouton « ⋯ » ; le menu des actions (MenuActionsLigne, DxContextMenu) avec nos icônes à la taille des commandes. */
.orbite-commandes-menu .orbite-commandes-bouton { box-sizing: border-box; width: var(--orbite-commande-zone); height: var(--orbite-commande-zone); min-height: 0; padding: 0 0 4px 0; font-size: 18px; line-height: 1; font-weight: bold; border: 1px solid var(--orbite-bordure); border-radius: 4px; }
.orbite-menu-indicateur { font-style: italic; }
.orbite-menu-ligne img, .orbite-menu-ligne .dxbl-image { width: var(--orbite-commande-icone); height: var(--orbite-commande-icone); }
/* Déclencheur du clic droit (js/orbite.js) : jamais affiché. */
.orbite-commandes-clic-droit { display: none !important; }

/* ====================================================================================================
   Pages de composition (plein écran), saisie PDF, signature.
   ==================================================================================================== */

.composition-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--orbite-fond-page);
}

.composition-barre {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 8px;
    background: var(--orbite-fond-surface);
    border-bottom: 1px solid var(--orbite-bordure);
}

.composition-groupe {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--orbite-bordure-discrete);
    padding: 0 8px;
}

.composition-groupe-boutons { display: flex; align-items: center; gap: 2px; flex: 1; }
.composition-groupe-titre { text-align: center; font-size: 12px; color: var(--orbite-texte-secondaire); }

.composition-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--orbite-rayon);
    background: transparent;
    color: inherit;
    cursor: pointer;
    white-space: pre-line;
    text-align: center;
    font: inherit;
    font-size: 12px;
}

.composition-bouton:hover:not(:disabled) { background: var(--orbite-survol); border-color: var(--orbite-bordure); }
.composition-bouton:disabled { opacity: .4; cursor: default; }
.composition-info { font-size: 12px; line-height: 1.5; color: var(--orbite-texte-secondaire); }
.composition-titre { font-weight: 600; align-self: center; margin-right: 12px; }
.composition-editeur { flex: 1; min-height: 0; position: relative; }

/* Bandeau « finalisé » : un avertissement, il doit se voir. */
.composition-finalise {
    background: var(--orbite-avertissement-fond);
    border-left: 4px solid var(--orbite-attente);
    padding: 6px 12px;
    text-align: center;
}

/* Consultation et modification d'un document (réponses du 28 octobre 2026) : « Modifier » est le bouton plein de
   l'accent ; en modification, un bandeau de l'accent et un cadre autour de l'éditeur disent clairement le mode. */
.composition-bouton--primaire { background: var(--orbite-accent); color: var(--orbite-sur-bleu); font-weight: 600; }
.composition-bouton--primaire:hover:not(:disabled) { background: color-mix(in srgb, var(--orbite-accent) 88%, black); border-color: transparent; }
.composition-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--orbite-fond-discret);
    color: var(--orbite-texte-secondaire);
    border-bottom: 1px solid var(--orbite-bordure-discrete);
}
.composition-mode--modification {
    background: color-mix(in srgb, var(--orbite-accent) 16%, var(--orbite-fond-surface));
    color: var(--orbite-texte);
    font-weight: 600;
    border-bottom: 2px solid var(--orbite-accent);
}
.composition-mode--modification + .composition-editeur::after,
.composition-mode--modification ~ .composition-editeur::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 10; box-shadow: inset 0 0 0 3px var(--orbite-accent); }
.composition-mode .orbite-ico { flex: none; }

.signature-canevas {
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    background: var(--orbite-papier);
    width: 100%;
    max-width: 600px;
    aspect-ratio: 3 / 1;
    touch-action: none;
}

/* ---------- Saisie des formulaires PDF (image des pages + champs) ---------- */

.pdf-saisie {
    height: 100%;
    overflow: auto;
    padding: 16px 0;
    box-sizing: border-box;
    background: var(--orbite-document-fond);
}

.pdf-page {
    position: relative;
    margin: 0 auto 16px auto;
    background: var(--orbite-papier);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.pdf-page > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}

/* Les champs doivent se distinguer du fond imprimé de la page. */
.pdf-champ {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2px;
    border: 1px solid rgba(70, 110, 180, .45);
    background: rgba(220, 232, 255, .65);
    font-family: Helvetica, Arial, sans-serif;
    color: #000; /* sur la page imprimée (blanche), quel que soit le thème */
    line-height: 1.1;
    resize: none;
}

.pdf-champ:focus { outline: 2px solid #4a7fd0; background: rgba(255, 255, 255, .95); }
.pdf-champ:disabled { background: transparent; border-color: transparent; color: black; }

/* Cases à cocher et boutons radio d'un PDF : les images du web v2 (Images/EvalPDF, PdfControlMaker),
   selon l'apparence du champ (« Theme » v2, gabarit_pdf_champ.apparence) :
   normale = case blanche à contour bleu ; transparente = contour seul, la page reste visible dessous
   (échelles colorées V/J/O/R de la GEDPAS) ; invisible = un contour à peine visible (case) ou une
   lueur jaune (radio) tant que rien n'est coché. Cochée : la case noire (radio invisible : bleu voilé). */
.pdf-case {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent center / 100% 100% no-repeat;
    cursor: pointer;
}
.pdf-case:disabled { cursor: default; }
.pdf-case:not(:disabled):hover, .pdf-case:focus-visible { outline: none; box-shadow: 0 0 4px 1px rgba(30, 120, 220, .8); }
.pdf-case.pdf-normal { background-image: url("../Images/EvalPDF/Square.png"); }
.pdf-case.pdf-transparent { background-image: url("../Images/EvalPDF/SquareHollow.png"); }
.pdf-case-cocher.pdf-invisible { background-image: url("../Images/EvalPDF/SquareInvis.png"); }
.pdf-case-radio.pdf-invisible { background-image: url("../Images/EvalPDF/SquareHint.png"); }
.pdf-case:checked { background-image: url("../Images/EvalPDF/SquareChecked.png"); }
.pdf-case-radio.pdf-invisible:checked { background-image: url("../Images/EvalPDF/SquareCheckedHollow.png"); }
/* Champs texte et listes transparents ou invisibles : pas de voile, la page reste lisible dessous. */
.pdf-champ.pdf-transparent:not(:focus) { background: transparent; }
.pdf-champ.pdf-invisible:not(:focus) { background: transparent; border-color: transparent; }
.pdf-champ.pdf-invisible:not(:focus):not(:disabled):hover { border-color: rgba(70, 110, 180, .45); }
/* Efface la réponse d'un groupe radio (PdfSaisie). */
.pdf-effacer-radio {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .8;
}
.pdf-effacer-radio:hover, .pdf-effacer-radio:focus-visible { opacity: 1; }
.pdf-effacer-radio > img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media print { .pdf-effacer-radio { display: none; } }
.pdf-page-attente { position: absolute; top: 45%; width: 100%; text-align: center; }

/* ====================================================================================================
   Notes évolutives : éditeur, plein écran, texte mis en forme (Docs/Plan-Notes.md)
   ==================================================================================================== */

.note-editeur { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.note-editeur-barre { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 28px; }
.note-editeur-titre { flex: 1; font-weight: 600; }
.note-editeur-etat { font-size: 13px; color: var(--orbite-texte-secondaire); }
/* Pastille d'une couleur de la palette (menu « Couleur » ; la teinte vient de EditeurNote.razor). */
.note-couleur { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.note-plein-ecran {
    position: fixed; inset: 0; z-index: 2000; padding: 12px 16px;
    background: var(--orbite-fond-surface);
}
.note-plein-ecran .note-editeur-memo textarea { height: calc(100vh - 110px) !important; }
.note-avertissement { font-size: 13px; margin-bottom: 4px; color: var(--orbite-attente); }
.note-champs-perso { font-size: 13px; margin-top: 4px; color: var(--orbite-texte-secondaire); }
.note-aide { font-size: 13px; color: var(--orbite-texte-secondaire); margin-bottom: 4px; }
.note-texte-formate { overflow-wrap: anywhere; }

/* ====================================================================================================
   Page Réglages.
   ==================================================================================================== */

.reglages { max-width: 900px; }
.reglages-choix { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reglages-choix legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.reglages-choix label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.reglages-choix input { margin-top: 3px; accent-color: var(--orbite-accent); }
.reglages-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.reglages-colonnes legend { grid-column: 1 / -1; }
.reglages-aide { margin: 8px 0; color: var(--orbite-texte-secondaire); font-size: 13px; }
.reglages-sous-titre { font-weight: 600; margin: 14px 0 6px 0; }

/* ====================================================================================================
   Tuile (Shared/Tuile.razor) : une tuile de compte en contenu, en navigation classique — la rangée de
   comptes de la Vue d'ensemble et des Envois au portail (un chiffre, un libellé, un filtre rapide au clic).
   Aplat d'un bleu d'Orbite (--orbite-tuile-*), icône en silhouette en haut à gauche, chiffre en haut à droite,
   libellé en bas à gauche. La navigation en tuiles (accueil, fiche du dossier, pages hub, barre d'application
   Metro, rails Metro) est retirée le 30 octobre 2026 à la demande de François
   (Suivi/Reponses-2026-10-30-Sans-Tuiles.md) ; la page de la tuile règle sa hauteur (.vue-comptes, .envois-comptes).
   ==================================================================================================== */

.tuile-place {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 96px;
}

.tuile {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--orbite-tuile-bleu);
    color: var(--orbite-sur-bleu);
    font: inherit;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease-out, filter .08s ease-out;
}

.tuile:hover { filter: brightness(1.1); color: var(--orbite-sur-bleu); }
.tuile:active { transform: scale(.96); }
/* Focus au clavier : un liseré clair dans la tuile et un anneau autour, visibles sur les deux fonds. */
.tuile:focus-visible {
    outline: 3px solid var(--orbite-focus);
    outline-offset: 2px;
    box-shadow: inset 0 0 0 2px var(--orbite-sur-bleu);
}

.tuile-contenu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 0;
}

.tuile-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.tuile-icone { width: 32px; height: 32px; flex: none; }
.tuile-compte { font-size: 34px; font-weight: 300; line-height: 1; margin-top: -2px; animation: tuile-apparait .25s ease-out; }
.tuile-bas { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-right: 18px; }
.tuile-info {
    font-size: 14px;
    opacity: .92;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    animation: tuile-apparait .25s ease-out;
}
.tuile-libelle {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@keyframes tuile-apparait { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .tuile, .tuile-compte, .tuile-info, .orbite-nav { transition: none; animation: none; }
    .tuile:active { transform: none; }
}

/* ====================================================================================================
   Listes (Components/Shared/Listes, Docs/Design-Orbite3.md § 9, Docs/Listes-Orbite.md) : la barre de
   filtres standard, la liste, les cartes (« en grand »), les lignes (« en ligne »), la fiche d'édition.
   Phase 2 (22 octobre 2026) : plus de grille DevExpress pour les listes d'objets de la Standard.
   ==================================================================================================== */

/* ---------- Barre de filtres (FiltresBarre) : une ligne, enveloppe sur téléphone ---------- */

.orbite-filtres { margin-bottom: 12px; }

.orbite-filtres-barre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
}

/* Le filtre principal de la page, avant la recherche (phase 3) : une liste déroulante (Étiquette des
   documents) ou un bouton bascule (Actifs des dossiers) ; sur téléphone, il prend la largeur. */
.orbite-filtres-avant { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.orbite-filtres-avant .orbite-filtres-liste { width: 240px; max-width: 100%; }
.orbite-filtres-avant .orbite-filtres-liste .dxbl-text-edit { height: 32px; }
.orbite-filtres-bascule .orbite-ico { color: var(--orbite-texte-secondaire); }
.orbite-filtres-bascule.actif .orbite-ico { color: var(--orbite-accent-texte); }

.orbite-filtres-recherche {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    max-width: 420px;
    min-width: 0;
    height: 32px;
    padding: 0 8px 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte-secondaire);
}
.orbite-filtres-recherche:focus-within { border-color: var(--orbite-focus); box-shadow: 0 0 0 1px var(--orbite-focus); }
.orbite-filtres-recherche > .orbite-ico { flex: none; }
.orbite-filtres-recherche input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--orbite-texte);
    font: inherit;
    outline: none;
}
.orbite-filtres-recherche input::-webkit-search-cancel-button { display: none; }
.orbite-filtres-effacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--orbite-texte-secondaire);
    cursor: pointer;
    padding: 0;
}
.orbite-filtres-effacer:hover { background: var(--orbite-survol); color: var(--orbite-texte); }

/* Bouton Filtres et bascule Grand / Ligne : la tenue des boutons secondaires ; actif = bleu pâle. */
.orbite-filtres-bouton, .orbite-filtres-vue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}
.orbite-filtres-bouton:hover, .orbite-filtres-vue:hover { background: var(--orbite-fond-discret); border-color: var(--orbite-texte-attenue); }
.orbite-filtres-bouton.actif, .orbite-filtres-vue.actif { background: var(--orbite-bleu-pale); border-color: var(--orbite-accent); color: var(--orbite-accent-texte); }
/* Un filtre posé : un point d'accent sur le bouton. */
.orbite-filtres-bouton--marque::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--orbite-accent);
    border: 2px solid var(--orbite-fond-page);
}
.orbite-filtres-vues { display: inline-flex; }
.orbite-filtres-vues .orbite-filtres-vue { padding: 0; width: 32px; }
.orbite-filtres-vues .orbite-filtres-vue:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.orbite-filtres-vues .orbite-filtres-vue:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.orbite-filtres-tri.dxbl-btn, .orbite-filtres-tri .dxbl-btn { height: 32px; }
.orbite-filtres-compte { color: var(--orbite-texte-secondaire); font-size: 13px; white-space: nowrap; }
.orbite-filtres-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Le panneau des filtres typés : une carte sous la barre. */
.orbite-filtres-panneau {
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon-carte);
}
.orbite-filtres-panneau-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (max-width: 599px) {
    .orbite-filtres-libelle { display: none; }
    .orbite-filtres-bouton { padding: 0; width: 32px; }
    .orbite-filtres-recherche { flex-basis: 100%; max-width: none; }
    .orbite-filtres-avant { flex-basis: 100%; }
    .orbite-filtres-avant .orbite-filtres-liste { width: 100%; }
    .orbite-filtres-bascule { width: auto; padding: 0 10px; }
    .orbite-filtres-actions { margin-left: 0; flex-basis: 100%; }
    .orbite-filtres-compte { flex-basis: 100%; }
}

/* ---------- La liste (Liste) ---------- */

.orbite-liste-elements { display: flex; flex-direction: column; gap: 8px; }
.orbite-liste--lignes .orbite-liste-elements { gap: 4px; }
/* Sections des cartes et des lignes (Liste.Groupe, 28 octobre 2026 : « Grouper par étiquette ») : un titre de groupe
   discret au-dessus de ses éléments, la couleur du groupe en point. */
.orbite-liste-groupe--sections {
    display: flex;
    align-items: center;
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--orbite-bordure-discrete);
    color: var(--orbite-texte);
    font-weight: 600;
}
.orbite-liste-groupe--sections:first-of-type { margin-top: 0; }
.orbite-liste-groupe-point { width: 12px; height: 12px; border-radius: 999px; flex: none; box-shadow: 0 0 0 1px var(--orbite-bordure); }
.orbite-liste-element { min-width: 0; }
.orbite-liste-vide { padding: 32px; text-align: center; color: var(--orbite-texte-secondaire); }

/* Vue « Données » (29 octobre 2026, droit vue_donnees) : la grille DevExpress compacte (GrilleDonnees.razor) ; elle
   pagine elle-même et défile à l'horizontale quand ses colonnes débordent. Une rangée qui ouvre l'élément montre la main. */
.orbite-liste-donnees { min-width: 0; }
.orbite-liste-donnees .orbite-grille-donnees { font-size: 13px; }
.orbite-grille-donnees .dxbl-grid-table > tbody > tr > td, .orbite-grille-donnees .dxbl-grid-table > thead > tr > th { padding-top: 3px; padding-bottom: 3px; }
.orbite-grille-donnees .dxbl-grid-table > tbody > tr.dxbl-grid-data-row { min-height: 28px; }
.orbite-grille-donnees .dxbl-grid-group-row > td { background: var(--orbite-fond-discret); font-weight: 600; }
.orbite-grille-donnees .dxbl-grid-footer-row > td, .orbite-grille-donnees .dxbl-grid-group-footer-row > td { color: var(--orbite-texte-secondaire); }
.orbite-grille-cliquable .dxbl-grid-data-row { cursor: pointer; }
.orbite-grille-donnees .dxbl-toolbar { padding: 2px 0; }

/* Vue « Tableau » (27 octobre 2026) : une surface bordée, un en-tête discret, une rangée par élément, les
   cellules alignées sur --liste-colonnes ; défile à l'horizontale sur un écran étroit. */
.orbite-liste-defilement { overflow-x: auto; }
.orbite-liste--tableau .orbite-liste-elements {
    display: grid;
    grid-template-columns: var(--liste-colonnes);
    column-gap: 10px;
    row-gap: 0;
    min-width: min-content;
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    overflow: hidden;
}
/* Chaque rangée est une sous-grille : les colonnes sont celles du tableau, donc alignées sous l'en-tête. */
.orbite-liste--tableau .orbite-liste-entete,
.orbite-liste--tableau .orbite-liste-element {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 3px 10px;
    min-height: 38px;
    box-sizing: border-box;
}
.orbite-liste--tableau .orbite-liste-entete {
    background: var(--orbite-fond-discret);
    border-bottom: 1px solid var(--orbite-bordure);
    font-size: 12px;
    font-weight: 600;
    color: var(--orbite-texte-secondaire);
    min-height: 32px;
}
.orbite-liste--tableau .orbite-liste-element + .orbite-liste-element { border-top: 1px solid var(--orbite-bordure-discrete); }
.orbite-liste--tableau .orbite-liste-element:hover { background: color-mix(in srgb, var(--orbite-bleu-pale) 45%, transparent); }
.orbite-liste--tableau .orbite-liste-element > * { min-width: 0; }
/* Sections (Liste.GroupeTableau) : une ligne de groupe pleine largeur, puis ses rangées décalées d'une tabulation
   (une première colonne vide, --liste-retrait, que l'en-tête porte aussi). */
.orbite-liste--sections { --liste-retrait: 18px; }
.orbite-liste--tableau .orbite-liste-groupe {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: var(--orbite-fond-discret);
    border-top: 1px solid var(--orbite-bordure);
    border-bottom: 1px solid var(--orbite-bordure);
    color: var(--orbite-accent-texte);
    font-weight: 600;
}
.orbite-liste--tableau .orbite-liste-entete + .orbite-liste-groupe { border-top: 0; }
.orbite-liste-groupe > span { display: inline-flex; align-items: center; gap: 8px; }
.orbite-liste-groupe-compte {
    font-size: 12px;
    font-weight: 600;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    text-align: center;
    background: var(--orbite-fond-surface);
    color: var(--orbite-texte-secondaire);
    border: 1px solid var(--orbite-bordure-discrete);
}
.orbite-liste--tableau .orbite-liste-groupe + .orbite-liste-element { border-top: 0; }
/* Une colonne étroite (AdminColonne.Etroite) : l'en-tête peut passer sur deux lignes. */
.orbite-entete-etroite { white-space: normal; line-height: 1.15; font-size: 11px; }
.orbite-cellule-centre { justify-self: center; text-align: center; }
.orbite-cellule-droite { justify-self: end; text-align: right; }
.orbite-cellule-texte { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbite-cellule-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.orbite-cellule-inactive { opacity: .55; }

/* Une case à cocher de tableau : grande et facile à atteindre (toute la cellule réagit). */
.orbite-case {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--orbite-accent-texte);
}
.orbite-case:disabled { cursor: default; }

/* Éditeur Word (DxRichEdit) : le quadrillage des tableaux sans bordure (orbite.grilleTableaux) en bleu bien
   visible plutôt que la couleur du texte. Le quadrillage est le seul trait pointillé sans couleur propre : une
   vraie bordure porte sa couleur dans son style. La page reste blanche en mode sombre : un bleu fixe. */
.dxreTableBrd[style*="dashed"]:not([style*="border-bottom-color"]):not([style*="border-right-color"]):not([style*="border-top-color"]):not([style*="border-left-color"]) {
    border-color: #2f7de1 !important;
}

/* Aide croisée (27 octobre 2026, François) : les sections d'aide (AideAdmin, InfoAide) prennent les couleurs
   de l'AUTRE marque, pour qu'on voie qu'il y a de l'aide : dans Orbite, celles d'AddictA (jaune, crème, encre ;
   Docs/Marques.md) ; dans AddictA, celles d'Orbite (marques/addicta/marque.css redéfinit les variables). */
:root {
    --orbite-aide-fond: #fdf6e3;
    --orbite-aide-bordure: #eddba4;
    --orbite-aide-texte: #1d1d1b;
    --orbite-aide-entete: #f1c651;
    --orbite-aide-entete-texte: #1d1d1b;
    --orbite-aide-accent: #7d5c00;
}
html.orbite-sombre {
    --orbite-aide-fond: #2b2821;
    --orbite-aide-bordure: #3d382c;
    --orbite-aide-texte: #f0ece2;
    --orbite-aide-entete: #d4ae45;
    --orbite-aide-entete-texte: #1d1d1b;
    --orbite-aide-accent: #f1c651;
}
.aide-croisee {
    background: var(--orbite-aide-fond);
    border-color: var(--orbite-aide-bordure);
    color: var(--orbite-aide-texte);
}
.aide-croisee .aide-admin-entete,
.aide-croisee .orbite-panneau-entete {
    background: var(--orbite-aide-entete);
    color: var(--orbite-aide-entete-texte);
    border-bottom-color: var(--orbite-aide-bordure);
}
.aide-croisee .aide-admin-entete .orbite-ico,
.aide-croisee .orbite-panneau-entete > .orbite-ico,
.aide-croisee .orbite-panneau-bouton { color: var(--orbite-aide-entete-texte); }
.aide-croisee .aide-admin-entete:hover,
.aide-croisee.reductible .orbite-panneau-entete:hover { background: color-mix(in srgb, var(--orbite-aide-entete) 88%, var(--orbite-aide-entete-texte)); }
.aide-croisee .aide-admin-entete:focus-visible { outline: 2px solid var(--orbite-aide-accent); outline-offset: -2px; }
.aide-croisee h1, .aide-croisee h2, .aide-croisee a { color: var(--orbite-aide-accent); }

/* Réglages d'une page de configuration (Commun/Reglage.razor, Organisme) : un tableau à trois colonnes
   alignées (libellé, valeur, explication), une ligne par réglage, des intertitres de section ; sur un
   écran étroit, l'un sous l'autre. */
.reglages {
    display: grid;
    grid-template-columns: minmax(170px, 260px) minmax(140px, 260px) minmax(260px, 1fr);
    column-gap: 16px;
    margin-top: 12px;
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon);
    overflow: hidden;
}
.reglage {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--orbite-bordure-discrete);
}
.reglages > .reglage:first-child, .reglages-section + .reglage { border-top: 0; }
.reglage:hover { background: color-mix(in srgb, var(--orbite-bleu-pale) 30%, transparent); }
.reglage-libelle { font-weight: 600; }
.reglage-valeur { min-width: 0; }
.reglage-aide { font-size: 13px; color: var(--orbite-texte-secondaire); }
.reglages-section {
    grid-column: 1 / -1;
    padding: 6px 14px;
    background: var(--orbite-fond-discret);
    border-top: 1px solid var(--orbite-bordure);
    border-bottom: 1px solid var(--orbite-bordure);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--orbite-accent-texte);
}
.reglages > .reglages-section:first-child { border-top: 0; }
@media (max-width: 760px) {
    .reglages { grid-template-columns: 1fr; }
    .reglage { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
}

/* Pages d'administration (AdminTableau) : le nom en gras dans le tableau ; une pastille qui se bascule d'un
   clic (un booléen modifiable, Actif) ; éteinte (faux) : contour pointillé, atténuée. */
.admin-tableau-nom { font-weight: 600; }
.admin-tableau-coche { color: var(--orbite-signe); }
.admin-tableau-icone { display: inline-flex; align-items: center; justify-content: center; }
/* Une vignette (photo d'utilisateur, icône d'évaluation) tient dans la colonne de l'icône, quelle que soit la taille
   que la page lui donne ailleurs : sinon elle déborde sur le nom et décale la rangée vers la droite. */
.orbite-liste--tableau .admin-tableau-icone { overflow: hidden; }
.orbite-liste--tableau .admin-tableau-icone img { width: 26px; height: 26px; max-width: 100%; object-fit: contain; }
.admin-pastille-bascule {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
}
.admin-pastille-bascule:hover .orbite-pastille { box-shadow: 0 0 0 1px var(--pastille-teinte, var(--orbite-bordure)); }
.admin-pastille-bascule:focus-visible { outline: 2px solid var(--orbite-focus, var(--orbite-accent-texte)); outline-offset: 1px; }
.admin-pastille-bascule.eteinte .orbite-pastille {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--orbite-bordure);
    color: var(--orbite-texte-secondaire);
    opacity: .75;
}
.orbite-liste-plus { display: flex; justify-content: center; margin-top: 12px; }

/* Colonnes="auto" : grille de cartes à partir de 1 100 px (2 ou 3 colonnes selon la largeur). */
@media (min-width: 1100px) {
    .orbite-liste--colonnes.orbite-liste--cartes .orbite-liste-elements {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 10px;
        align-items: stretch;
    }
    .orbite-liste--colonnes.orbite-liste--cartes .orbite-liste-element > .orbite-carte { height: 100%; box-sizing: border-box; }
}

/* ---------- Carte (Carte) : surface, bordure, rayon 8, liseré de 4 px à gauche ---------- */

.orbite-carte {
    --carte-fond: var(--orbite-fond-surface);
    --carte-lisere: var(--orbite-carte-lisere);
    display: block;
    position: relative;
    background: var(--carte-fond);
    border: 1px solid var(--orbite-bordure);
    border-left: 4px solid var(--carte-lisere);
    border-radius: var(--orbite-rayon-carte);
    padding: 10px 14px 10px 12px;
    color: var(--orbite-texte);
    text-decoration: none;
    transition: box-shadow .1s ease-out;
}
/* Une catégorie : la couleur en fond, le liseré de la même teinte foncée (en sombre : éclaircie par le texte). */
.orbite-carte--teintee { border-color: color-mix(in srgb, var(--carte-fond) 80%, var(--orbite-texte)); }
/* Sur un fond de catégorie, le texte secondaire et la date prennent la couleur du texte (seul contraste garanti par ThemeTests). */
.orbite-carte--teintee .orbite-carte-sous-titre, .orbite-carte--teintee .orbite-carte-meta, .orbite-carte--teintee .orbite-carte-pied, .orbite-carte--teintee .orbite-carte-details, .orbite-carte--teintee .orbite-secondaire { color: var(--orbite-texte); }
.orbite-carte--teintee .orbite-carte-date { color: var(--orbite-texte); }
.orbite-carte--teintee:not(.orbite-carte--liseree) { --carte-lisere: color-mix(in srgb, var(--carte-fond) 60%, var(--orbite-texte)); }
.orbite-carte--cliquable { cursor: pointer; }
.orbite-carte--cliquable:hover { box-shadow: var(--orbite-ombre), 0 2px 8px rgba(16, 24, 40, .10); color: var(--orbite-texte); }
/* Bandes (Bande, la couleur du programme d'un dossier) : 6 px à gauche et à droite, dans la bordure ; le liseré
   gauche reste celui de la carte (alerte), la bordure neutre sans liseré redevient fine. */
.orbite-carte--bandes { --carte-bandes: inset 6px 0 0 var(--carte-bande), inset -6px 0 0 var(--carte-bande); box-shadow: var(--carte-bandes); padding-left: 18px; padding-right: 20px; }
.orbite-carte--bandes:not(.orbite-carte--liseree) { border-left-width: 1px; }
.orbite-carte--bandes.orbite-carte--cliquable:hover { box-shadow: var(--carte-bandes), var(--orbite-ombre), 0 2px 8px rgba(16, 24, 40, .10); }
/* Bordure (cartes de dossiers, CouleursDossier, François 23 octobre 2026) : le liseré (l'alerte, jaune ou rouge) colore
   toute la bordure, pas seulement le bord gauche ; il reste visible à côté des bandes du programme et sur un fond. */
.orbite-carte--bordure.orbite-carte--liseree { border-color: var(--carte-lisere); }
/* cd4 (François, 27 octobre 2026) : une capsule de dossier sans alerte ni fond (ni mon dossier ni fermé) prend un liseré
   gris très pâle au lieu du bleu neutre : elle paraît unie, et celles qui ont une caractéristique (alerte, programme en
   bandes, mon dossier, fermé, en sortie) se démarquent. Premier essai : jeton dossier-lisere-neutre (page Thème). */
.orbite-carte--bordure:not(.orbite-carte--liseree):not(.orbite-carte--teintee) { --carte-lisere: var(--orbite-dossier-lisere-neutre); }
.orbite-carte--cliquable:focus-visible { outline: 2px solid var(--orbite-focus); outline-offset: 2px; }
.orbite-carte--selectionnee { background: var(--orbite-bleu-pale); border-color: var(--orbite-accent); }
.orbite-carte--rayee .orbite-carte-titre, .orbite-carte--rayee .orbite-carte-corps { text-decoration: line-through; color: var(--orbite-texte-attenue); }

.orbite-carte-entete { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.orbite-carte-vignette { flex: none; }
.orbite-carte-icone { flex: none; margin-top: 2px; color: var(--orbite-accent-texte); }
.orbite-carte-titres { flex: 1 1 auto; min-width: 0; }
.orbite-carte-titre { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.orbite-carte-titre .orbite-ico { vertical-align: -2px; }
.orbite-carte-sous-titre { font-size: 13px; color: var(--orbite-texte-secondaire); overflow-wrap: anywhere; }
.orbite-carte-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: var(--orbite-texte-secondaire); text-align: right; max-width: 45%; }
.orbite-carte-auteur { display: inline-flex; align-items: center; gap: 6px; }
.orbite-carte-date { color: var(--orbite-lien); font-weight: 600; white-space: nowrap; }
.orbite-carte-actions { flex: none; margin: -4px -6px 0 0; }
.orbite-carte-actions .orbite-commandes { justify-content: flex-end; }
.orbite-carte-corps { margin-top: 8px; overflow-wrap: anywhere; }
.orbite-carte-texte { white-space: pre-wrap; }
.orbite-carte-pied { margin-top: 8px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--orbite-texte) 10%, transparent); font-size: 13px; color: var(--orbite-texte-secondaire); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
/* Des détails en ligne dans le corps ou le pied : « Niveau : … · Séjour : … ». */
.orbite-carte-details { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--orbite-texte-secondaire); }
.orbite-carte-details .orbite-ico { vertical-align: -2px; margin-right: 3px; }
.orbite-carte-corps .orbite-pastilles { margin-top: 6px; }

/* Une pastille d'importance : la teinte d'attente. */
.orbite-pastille--important { --pastille-teinte: var(--orbite-attente); }

@media (max-width: 599px) {
    .orbite-carte { padding: 8px 10px 8px 10px; }
    .orbite-carte-entete { flex-wrap: wrap; }
    .orbite-carte-meta { max-width: none; flex-direction: row; gap: 8px; align-items: center; order: 1; width: 100%; justify-content: space-between; }
}

/* ---------- Ligne (LigneListe) : une rangée de 40 px, liseré gauche ---------- */

.orbite-ligne {
    --carte-fond: var(--orbite-fond-surface);
    --carte-lisere: var(--orbite-carte-lisere);
    background: var(--orbite-fond-surface);
    border: 1px solid var(--orbite-bordure);
    border-left: 4px solid var(--carte-lisere);
    border-radius: var(--orbite-rayon);
    color: var(--orbite-texte);
}
.orbite-ligne--teintee { background: color-mix(in srgb, var(--carte-fond) 45%, var(--orbite-fond-surface)); }
.orbite-ligne--teintee:not(.orbite-ligne--liseree) { --carte-lisere: color-mix(in srgb, var(--carte-fond) 60%, var(--orbite-texte)); }
/* Bandes (couleur du programme), comme la carte : 5 px à gauche et à droite. */
.orbite-ligne--bandes { box-shadow: inset 5px 0 0 var(--carte-bande), inset -5px 0 0 var(--carte-bande); padding-left: 5px; padding-right: 5px; }
.orbite-ligne--bandes:not(.orbite-ligne--liseree) { border-left-width: 1px; }
/* Bordure (l'alerte d'un dossier), comme la carte. */
.orbite-ligne--bordure.orbite-ligne--liseree { border-color: var(--carte-lisere); }
/* cd4 : la rangée d'un dossier sans caractéristique, unie comme la carte. */
.orbite-ligne--bordure:not(.orbite-ligne--liseree):not(.orbite-ligne--teintee) { --carte-lisere: var(--orbite-dossier-lisere-neutre); }
.orbite-ligne--selectionnee { background: var(--orbite-bleu-pale); border-color: var(--orbite-accent); }
.orbite-ligne--rayee .orbite-ligne-titre, .orbite-ligne--rayee .orbite-ligne-sous-titre, .orbite-ligne--rayee .orbite-ligne-corps { text-decoration: line-through; color: var(--orbite-texte-attenue); }

/* La ligne mesure sa propre largeur (requête de conteneur) : la rangée se réorganise selon la place qu'elle
   a, pas selon l'écran (la fiche du dossier laisse ≈ 660 px à 1 280 px, la liste des documents moins encore). */
.orbite-ligne { container-type: inline-size; }

/* La rangée enveloppe dès que ça ne tient pas, à toute largeur (BS51) : la droite (margin-left: auto) et
   les actions passent sous le titre plutôt que de déborder. Un titre court et une droite courte : une
   seule rangée, le sous-titre prend le reste. */
.orbite-ligne-rangee {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 2px;
    min-height: 40px;
    padding: 4px 10px 4px 8px;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.orbite-ligne--cliquable .orbite-ligne-rangee, .orbite-ligne--depliable .orbite-ligne-rangee { cursor: pointer; }
.orbite-ligne--cliquable .orbite-ligne-rangee:hover, .orbite-ligne--depliable .orbite-ligne-rangee:hover { background: var(--orbite-survol); color: inherit; }
.orbite-ligne-rangee:focus-visible { outline: 2px solid var(--orbite-focus); outline-offset: -2px; }
.orbite-ligne-vignette { flex: none; display: inline-flex; }
.orbite-ligne-icone { flex: none; color: var(--orbite-accent-texte); }
.orbite-ligne-titre { flex: 0 0 auto; max-width: 45%; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbite-ligne-titre .orbite-ico { vertical-align: -2px; }
.orbite-ligne-sous-titre { flex: 1 1 0; min-width: 40px; color: var(--orbite-texte-secondaire); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbite-ligne-meta { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--orbite-texte-secondaire); white-space: nowrap; }
.orbite-ligne-meta .orbite-carte-date { font-weight: 500; }
.orbite-ligne-actions { flex: none; }
.orbite-ligne-chevron { flex: none; width: 6px; height: 6px; margin: 0 4px 0 2px; border-right: 2px solid var(--orbite-texte-attenue); border-bottom: 2px solid var(--orbite-texte-attenue); transform: translateY(-2px) rotate(45deg); transition: transform .12s ease-out; }
.orbite-ligne--ouverte .orbite-ligne-chevron { transform: translateY(2px) rotate(225deg); }
.orbite-ligne-corps { padding: 8px 12px 10px 12px; border-top: 1px solid var(--orbite-bordure-discrete); overflow-wrap: anywhere; }
.orbite-ligne-corps .orbite-carte-texte { white-space: pre-wrap; }

/* Une ligne étroite (moins de 600 px : téléphone, liste à côté d'un arbre, rail du dossier à 1 024 px) :
   le titre, les actions et le chevron sur la première rangée, le sous-titre sur la sienne, la droite (états,
   date) répartie sur une troisième. */
@container (max-width: 599px) {
    .orbite-ligne-titre { flex: 1 1 60%; }
    .orbite-ligne-sous-titre { flex-basis: 100%; order: 2; }
    /* Une ligne sans sous-titre (les dossiers actifs dans le côté des Nouvelles) garde sa droite sur la rangée du titre. */
    .orbite-ligne-sous-titre ~ .orbite-ligne-meta { margin-left: 0; order: 3; flex-basis: 100%; justify-content: space-between; }
    .orbite-ligne-actions { margin-left: auto; }
}

/* ---------- Fiche d'édition (FicheDialogue) ---------- */

.orbite-fiche .dxbl-popup-body { padding-top: 12px; }
.orbite-fiche-avertissement { margin-bottom: 12px; }

/* ====================================================================================================
   Page Thème (Pages/ReglagesTheme.razor, Docs/Design-Orbite3.md § 10) : aperçu clair et sombre côte à
   côte (les jetons de l'essai sont posés sur chaque aperçu par la page), tableau des jetons.
   ==================================================================================================== */

.theme-page { max-width: 1400px; }
.theme-apercus { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.theme-apercu {
    background: var(--orbite-fond-page);
    color: var(--orbite-texte);
    border: 1px solid var(--orbite-bordure);
    border-radius: var(--orbite-rayon-carte);
    padding: 12px;
    min-width: 0;
}
.theme-apercu-titre { font-weight: 600; margin-bottom: 8px; color: var(--orbite-texte-secondaire); text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.theme-apercu-cartes { display: flex; flex-direction: column; gap: 8px; }
.theme-apercu-ligne { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.theme-apercu-pastilles { margin: 10px 0; }
.theme-apercu-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.theme-apercu-nav { display: flex; gap: 4px; margin-top: 10px; padding: 6px; border-radius: var(--orbite-rayon); background: var(--orbite-nav-fond); color: var(--orbite-nav-texte); }
.theme-apercu-nav-item { padding: 4px 10px; border-radius: 4px; border-left: 3px solid transparent; }
.theme-apercu-nav-item.actif { background: var(--orbite-nav-actif-fond); border-left-color: var(--orbite-accent); color: var(--orbite-sur-bleu); }
.theme-apercu-tuiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.theme-apercu-tuile { display: inline-flex; align-items: flex-end; width: 84px; height: 56px; padding: 6px; box-sizing: border-box; color: var(--orbite-sur-bleu); font-size: 12px; }

.theme-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.theme-table th { text-align: left; color: var(--orbite-texte-secondaire); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--orbite-bordure); }
.theme-table td { padding: 4px 8px; border-bottom: 1px solid var(--orbite-bordure-discrete); vertical-align: middle; }
.theme-table tr.modifie td { background: var(--orbite-bleu-pale); }
.theme-nom { white-space: nowrap; }
.theme-role { color: var(--orbite-texte-secondaire); }
.theme-valeur { white-space: nowrap; }
.theme-valeur input[type=color] { width: 36px; height: 24px; padding: 0; border: 1px solid var(--orbite-bordure); border-radius: 4px; background: transparent; vertical-align: middle; margin-right: 6px; cursor: pointer; }
.theme-valeur input[type=text] { width: 190px; font: inherit; font-size: 12px; border: 1px solid var(--orbite-bordure); border-radius: 4px; padding: 2px 6px; background: var(--orbite-fond-surface); color: var(--orbite-texte); }
.theme-retablir { width: 32px; }

@media (max-width: 899px) {
    .theme-table thead { display: none; }
    .theme-table tr { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--orbite-bordure-discrete); }
    .theme-table td { border: 0; padding: 0; }
    .theme-nom { grid-column: 1 / 3; }
    .theme-role { grid-column: 1 / 4; }
}

/* Médication : fiche d'une médication et d'une distribution (gestion des doses, 28 octobre 2026, Docs/Medication-Doses.md).
   Globales : les fenêtres DxPopup sont rendues hors de la page (le CSS isolé ne les atteint pas). */
.medication-moments { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.medication-doses-titre { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--orbite-accent-texte); border-top: 1px solid var(--orbite-bordure-discrete); padding-top: 10px; }
.medication-stock { font-size: 18px; font-weight: 600; line-height: 32px; font-variant-numeric: tabular-nums; }
.medication-stock--negatif { color: var(--orbite-danger); }
.medication-lignes { width: 100%; border-collapse: collapse; font-size: 13px; }
.medication-lignes th { text-align: left; font-weight: 600; font-size: 12px; color: var(--orbite-texte-secondaire); padding: 2px 6px; border-bottom: 1px solid var(--orbite-bordure-discrete); }
.medication-lignes td { padding: 4px 6px; vertical-align: middle; border-bottom: 1px solid var(--orbite-bordure-discrete); }
.medication-lignes .medication-lignes-nombre { text-align: right; font-variant-numeric: tabular-nums; width: 70px; }

/* Un choix en segments (lot 27, 29 octobre 2026) : la bascule « Ligne du temps / Liste » de l'occupation actuelle et du
   traitement des demandes, les raccourcis de période ; la tenue des raccourcis de Séjours et sorties. Actif = bleu pâle. */
.orbite-segments { display: inline-flex; flex-wrap: nowrap; border: 1px solid var(--orbite-bordure); border-radius: 6px; overflow: hidden; background: var(--orbite-fond-surface); vertical-align: middle; }
.orbite-segments button { border: 0; background: transparent; color: var(--orbite-texte-secondaire); font: inherit; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.orbite-segments button + button { border-left: 1px solid var(--orbite-bordure); }
.orbite-segments button:hover { background: var(--orbite-survol); }
.orbite-segments button.actif { background: var(--orbite-bleu-pale); color: var(--orbite-accent-texte); font-weight: 600; }
.orbite-segments button:focus-visible { outline: 2px solid var(--orbite-focus); outline-offset: -2px; }
@media (max-width: 700px) { .orbite-segments button { padding: 4px 8px; } }