/*
 * Troisieme interface — disposition autonome inspiree de la maquette fournie.
 * Le double scope garantit qu'aucune regle ne modifie Interface d'origine ou
 * Cockpit. Cette interface ne depend ni du rail ni des variables du Cockpit.
 */

html[data-ui-theme="epure"][data-ui="epure"] {
    --accent: var(--epure-accent);
    --accent-2: var(--epure-accent-hover);
    --accent-soft: var(--epure-selected);
    --accent-halo: var(--epure-focus);
    --focus-ring: var(--epure-focus);
    --bg-app: var(--epure-window);
    --bg-card: var(--epure-surface);
    --bg-card-hover: var(--epure-surface-secondary);
    --bg-elevated: var(--epure-surface);
    --bg-sidebar: var(--epure-sidebar);
    --glass-bg-1: var(--epure-surface);
    --glass-bg-2: var(--epure-surface-secondary);
    --glass-bg-active: var(--epure-selected);
    --glass-border: var(--epure-separator);
    --glass-border-hi: var(--epure-separator-strong);
    --glass-shadow: var(--epure-shadow);
    --glass-shadow-sm: var(--epure-shadow);
    --glass-shadow-hover: var(--epure-shadow-raised);
    --border-soft: var(--epure-separator);
    --border-strong: var(--epure-separator-strong);
    --text-strong: var(--epure-text);
    --text-muted: var(--epure-text-secondary);
    --text-faint: var(--epure-text-tertiary);
    --bs-body-bg: var(--epure-window);
    --bs-body-color: var(--epure-text);
    --bs-secondary-color: var(--epure-text-secondary);
    --bs-emphasis-color: var(--epure-text);
    --bs-border-color: var(--epure-separator);
    /* Largeur calee sur le PLUS LONG intitule de rubrique, sigle metier compris
       (« Support communication » + « 16C »). A 212 px il manquait une trentaine
       de pixels : le nom se tronquait, et le sigle — le seul repere qui distingue
       les trois supports — se retrouvait coupe. Le libelle etant passe de 11 a
       12 px, ce plus long intitule mesure ~187 px au lieu de 171 : la largeur
       suit le meme cran, sinon on retrouvait la troncature qu'on venait de
       corriger. Elle depasse desormais de 16 px celle du menu d'origine
       (248 px, dans app.css) : c'est le prix du libelle lisible, et la zone de
       travail garde 1 176 px sur un ecran de 1 440. */
    --epure-sidebar-width: 264px;
    --epure-topbar-height: 78px;

    /* Les composants historiques lisent --success / --danger / --warn... : on
       reroute ces variables vers les jetons de l'interface pour que pastilles,
       jauges, montants et graphiques partagent une seule palette. */
    --success: var(--epure-success);
    --success-soft: var(--epure-success-soft);
    --warn: var(--epure-warn);
    --warn-soft: var(--epure-warn-soft);
    --danger: var(--epure-danger);
    --danger-soft: var(--epure-danger-soft);
    --info: var(--epure-info);
    --info-soft: var(--epure-info-soft);
    --bs-primary: var(--epure-accent);
    --bs-link-color: var(--epure-accent);
    --bs-link-hover-color: var(--epure-accent-hover);

    /* Rythme de la fiche client (grille + gouttieres). */
    --epure-gap: 16px;
    --epure-radius: 11px;
    --epure-radius-sm: 7px;

    /* Echelle typographique : UN seul endroit ou regler la taille du texte.
       Chaque niveau est un multiple de --epure-fs-scale, donc « un cran plus
       gros partout » = une ligne a changer, pas cent declarations a reprendre.
       Les nombres en vedette (valeurs de KPI, anneaux) et les grandes icones
       restent en pixels : ce sont des reperes graphiques dimensionnes par leur
       carte, pas du texte qu'on lit.
         1  compteurs de pastille          7  boutons, champs, texte des fils
         2  capitales, sigles, entetes     8  icones de lien, intitules forts
         3  legendes                       9  sous-titres de carte (h5)
         4  pastilles, meta                10 texte courant (body)
         5  tableaux, libelles de champ    11 intitules de bloc (h4)
         6  liens du menu, encarts                                          */
    --epure-fs-scale: 1;
    --epure-fs-1: calc(9.5px * var(--epure-fs-scale));
    --epure-fs-2: calc(10px * var(--epure-fs-scale));
    --epure-fs-3: calc(10.5px * var(--epure-fs-scale));
    --epure-fs-4: calc(11px * var(--epure-fs-scale));
    --epure-fs-5: calc(11.5px * var(--epure-fs-scale));
    --epure-fs-6: calc(12px * var(--epure-fs-scale));
    --epure-fs-7: calc(12.5px * var(--epure-fs-scale));
    --epure-fs-8: calc(13px * var(--epure-fs-scale));
    --epure-fs-9: calc(13.5px * var(--epure-fs-scale));
    --epure-fs-10: calc(14px * var(--epure-fs-scale));
    --epure-fs-11: calc(15px * var(--epure-fs-scale));
}

html[data-ui-theme="epure"][data-ui="epure"] body {
    display: block;
    min-height: 100vh;
    background: var(--epure-window) !important;
    color: var(--epure-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--epure-fs-10);
    -webkit-font-smoothing: antialiased;
}

/* Les coquilles d'authentification ont leur propre layout centre. Leur classe
   doit l'emporter sur le shell applicatif, y compris apres selection du theme. */
html[data-ui-theme="epure"][data-ui="epure"] body.auth-body {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
}

html[data-ui-theme="epure"][data-ui="epure"] body::before,
html[data-ui-theme="epure"][data-ui="epure"] body::after { content: none !important; }

/* La structure Cockpit existe toujours dans le DOM, mais n'appartient pas a
   cette interface et reste donc completement inactive. */
html[data-ui-theme="epure"][data-ui="epure"] :is(.app-rail, .app-subnav, .app-topbar) {
    display: none !important;
}

/* Menu lateral complet, fin et continu comme sur la reference. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1032;
    display: flex !important;
    width: var(--epure-sidebar-width) !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 14px 12px 12px !important;
    border: 0 !important;
    border-right: 1px solid var(--epure-separator) !important;
    border-radius: 0 !important;
    background: var(--epure-sidebar) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--epure-text);
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar::before,
html[data-ui-theme="epure"][data-ui="epure"] .sidebar::after { content: none !important; }

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-brand {
    min-height: 36px;
    margin: 0 5px 12px;
    padding: 3px 1px;
    color: var(--epure-text);
    font-size: var(--epure-fs-11);
    font-weight: 700;
    letter-spacing: -.02em;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-brand .brand-mark {
    width: 26px;
    height: 26px;
    margin-right: 7px;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-brand .brand-mark img {
    width: 26px;
    height: 26px;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-search { display: none !important; }

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-scroll {
    min-height: 0;
    padding: 0 2px 8px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--epure-separator-strong) transparent;
}

/* Les intertitres de domaine paient une partie du texte agrandi : leur air se
   resserre (11/3 px a 9/2 px) alors que les LIGNES, elles, respirent davantage.
   C'est le bon arbitrage : le blanc entre deux domaines se lit encore grace au
   filet, tandis qu'un libelle a l'etroit ne se rattrape par rien. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-group-title {
    display: flex;
    margin: 9px 8px 2px;
    padding: 0;
    align-items: center;
    gap: 7px;
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-2);
    font-weight: 600;
    letter-spacing: .055em;
    line-height: 1.4;
    text-transform: uppercase;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-group-title::after {
    content: "";
    min-width: 12px;
    height: 1px;
    flex: 1;
    background: var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section {
    margin: 0 0 2px;
    padding: 0;
    border: 0;
}

/* Meme gabarit de cible que le menu complet : le libellé est au cran des liens,
   sans interlettrage. Amaigri avec du letter-spacing, il se lisait comme une
   legende alors que c'est le bouton de la rubrique. La graisse baisse d'un cran
   en meme temps que la taille monte : 620 a 12 px empatait le mot, alors que le
   meme poids a 11 px servait justement a le faire exister. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title {
    display: flex !important;
    min-height: 27px;
    margin: 1px 0;
    padding: 5px 9px 4px;
    align-items: center;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-6);
    font-weight: 580;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

/* L'icone reprise du premier lien (posee par app.js) aligne les rubriques
   repliees sur les liens : une meme colonne d'icones du haut en bas du menu.
   Cette colonne suit la taille du glyphe (13 px) : laissee a 13 px de large, les
   icones les plus pleines (engrenage, graphique) touchaient le libelle. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-icon {
    width: 15px;
    flex: 0 0 15px;
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-8);
    opacity: 1;
}

/* L'icone mange la largeur du libelle et faisait passer « Propositions &
   signatures » ou « Sources & rapprochement » sur deux lignes. On resserre
   l'ecart et on tronque proprement plutot que de replier la ligne. Filet de
   securite conserve apres l'elargissement du menu : un futur intitule plus long
   doit degrader en points de suspension, jamais en ligne cassee. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title.is-collapsible {
    gap: 5px;
    white-space: nowrap;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title .sidebar-section-label,
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ordre de sacrifice si un intitule deborde malgre tout : c'est le SIGLE qui se
   faisait couper le premier, or c'est lui qui distingue les entites (trois
   « Support ... » cote a cote). On tronque l'intitule, jamais la pastille. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title .sidebar-section-label { min-width: 0; }

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-name {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-label .metier-tag { flex: 0 0 auto; }

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section:not(.collapsed) > .sidebar-section-title .sidebar-section-icon,
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section.is-current > .sidebar-section-title .sidebar-section-icon {
    color: var(--epure-accent);
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title.is-collapsible:hover {
    background: var(--epure-hover);
    color: var(--epure-text);
}

/* Chevron : on garde les proportions du menu complet (6 px, trait de 1,5 px).
   Aminci a 5 px / 1 px il devenait un accent typographique plus qu'un
   indicateur d'etat, et son margin-bottom de 2 px, non reproportionne,
   representait 40 % de sa hauteur au lieu de 33 %. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section-title.is-collapsible::after {
    opacity: .5;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section:not(.collapsed) > .sidebar-section-title {
    color: var(--epure-text);
}

/* Meme mecanique de repli que le menu complet : la rubrique OUVERTE se
   materialise en bloc (fond leger + liseré interieur), sinon deplier ne
   produit qu'une liste de liens flottants et on ne voit plus ou l'on est.
   Le domaine de la page courante prend l'accent, comme dans le menu complet. */
html[data-ui-theme="epure"][data-ui="epure"] #appSidebar .sidebar-scroll > .sidebar-section {
    margin-top: 2px;
    border-radius: 9px;
    transition: background 140ms ease, box-shadow 140ms ease;
}

html[data-ui-theme="epure"][data-ui="epure"] #appSidebar .sidebar-scroll > .sidebar-section:not(.collapsed) {
    background: color-mix(in srgb, var(--epure-text) 3.5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--epure-text) 7%, transparent);
}

html[data-ui-theme="epure"][data-ui="epure"] #appSidebar .sidebar-scroll > .sidebar-section.is-current > .sidebar-section-title {
    color: var(--epure-text);
}

html[data-ui-theme="epure"][data-ui="epure"] #appSidebar .sidebar-scroll > .sidebar-group-title.is-current {
    color: var(--epure-accent);
}

html[data-ui-theme="epure"][data-ui="epure"] #appSidebar .sidebar-scroll > .sidebar-group-title.is-current::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--epure-accent) 38%, transparent), transparent);
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link {
    min-height: 29px;
    margin: 1px 0;
    padding: 5px 9px;
    gap: 8px;
    border: 0 !important;
    border-radius: 7px;
    background: transparent;
    box-shadow: none !important;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-6);
    font-weight: 450;
    line-height: 1.35;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link i {
    width: 15px;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-8);
    opacity: 1;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link:hover {
    background: var(--epure-hover);
    color: var(--epure-text);
    transform: none;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link.active {
    background: var(--epure-selected) !important;
    color: var(--epure-accent) !important;
    font-weight: 550;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link.active i { color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link.active::before { display: none; }

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user {
    flex: 0 0 auto;
    margin: 7px 0 0 !important;
    padding: 7px !important;
    border: 1px solid var(--epure-separator) !important;
    border-radius: 9px;
    background: var(--epure-surface);
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user > .theme-toggle { display: none; }
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user-info { padding: 2px; }
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user-email { font-size: var(--epure-fs-5); }
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user-role { font-size: var(--epure-fs-2); color: var(--epure-text-tertiary); }

/* La cloche est remontee dans la barre du haut (avec son compteur) : l'entree du
   menu ferait doublon. La DECONNEXION, elle, reste ici — masquee, elle n'existait
   plus nulle part dans cette interface, et il fallait passer par « Mon profil »
   pour sortir de sa session. */
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-notif { display: none; }

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-logout {
    margin-top: 6px;
    padding: 5px 8px;
    gap: 6px;
    border: 1px solid var(--epure-separator) !important;
    border-radius: 7px;
    background: transparent;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-5);
    font-weight: 500;
}

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-logout:hover {
    border-color: color-mix(in srgb, var(--epure-danger) 45%, transparent) !important;
    background: var(--epure-danger-soft);
    color: var(--epure-danger-ink);
}

/* Barre superieure dediee : accueil a gauche, recherche au centre, actions.
   La colonne des actions se dimensionne sur SON CONTENU (auto), elle n'a pas de
   part fixe : alignee a droite avec min-width 0, une rangee plus large que sa
   colonne debordait vers la GAUCHE — la cloche venait se poser sur l'indice
   ⌘ K du champ de recherche. Le cas se declenchait des que la rangee gagnait
   quelques pixels (texte plus grand, menu plus large, un bouton de plus) : la
   colonne elastique reportait le trop-plein sur la recherche au lieu de le
   prendre. C'est deja la regle sous 1080 px ; elle vaut a toutes les largeurs.
   L'ordre de sacrifice quand la barre se resserre est donc explicite : les
   actions ne cedent RIEN (ce sont des commandes), la recherche descend jusqu'a
   220 px, et le bloc d'accueil — decoratif — encaisse le reste jusqu'a zero.
   Sans plancher a 0 sur cette premiere colonne, la somme des minimums finissait
   par depasser la barre vers 1 300 px et les actions sortaient par la droite. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar {
    position: fixed;
    inset: 0 0 auto var(--epure-sidebar-width);
    z-index: 1030;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 1.25fr) auto;
    align-items: center;
    gap: 22px;
    height: var(--epure-topbar-height);
    padding: 12px 28px 11px;
    border-bottom: 1px solid var(--epure-separator);
    background: var(--epure-sidebar);
    color: var(--epure-text);
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-welcome {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-welcome strong {
    overflow: hidden;
    color: var(--epure-text);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-welcome > span {
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-5);
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search {
    position: relative;
    display: flex;
    width: min(100%, 520px);
    height: 34px;
    align-items: center;
    justify-self: center;
    gap: 9px;
    padding: 0 9px 0 11px;
    border: 1px solid var(--epure-separator-strong);
    border-radius: 8px;
    background: var(--epure-surface);
    box-shadow: 0 2px 8px rgba(24, 39, 75, .035);
    color: var(--epure-text-tertiary);
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search:focus-within {
    border-color: var(--epure-accent);
    box-shadow: var(--epure-focus);
}

/* Le champ porte la classe du champ de menu (meme moteur de suggestions) : il
   en herite donc la boite — fond, bordure, rayon et surtout 1,85 rem de retrait
   pour une icone posee en absolu, qui n'existe pas ici. On la reprend a plat. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search input {
    width: auto;
    min-width: 0;
    height: 100%;
    flex: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--epure-text);
    font: inherit;
    /* Au cran des champs de saisie, pas des legendes : c'est la recherche
       globale, on y tape des noms de client et on relit ce qu'on a tape. */
    font-size: var(--epure-fs-7);
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search input:focus {
    background: transparent;
    box-shadow: none;
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search input::placeholder { color: var(--epure-text-tertiary); }
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search kbd {
    padding: 2px 5px;
    border: 1px solid var(--epure-separator);
    border-radius: 4px;
    background: var(--epure-surface-secondary);
    color: var(--epure-text-tertiary);
    font: inherit;
    font-size: var(--epure-fs-2);
    transition: opacity 120ms ease;
}

/* L'indice clavier s'efface des qu'on se sert du champ (meme geste que le menu). */
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search:focus-within kbd,
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search.has-text kbd { opacity: 0; }

/* Panneau de suggestions : il deborde de la barre, qui est fixee. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search .sidebar-search-panel {
    top: calc(100% + 6px);
    z-index: 1200;
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-icon-btn {
    position: relative;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--epure-text-secondary);
    font-size: 16px;
}

/* Compteur « a traiter » : c'est le seul signal d'alerte de cette barre, la
   pastille du menu etant masquee ici. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-icon-btn.has-notif { color: var(--epure-text); }

html[data-ui-theme="epure"][data-ui="epure"] .epure-icon-btn__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    padding: 0 4px;
    border: 1.5px solid var(--epure-sidebar);
    border-radius: 999px;
    background: var(--epure-danger);
    color: var(--epure-on-danger, #fff);
    font-size: var(--epure-fs-1);
    font-weight: 700;
    /* La pastille suit le chiffre : laissee a 15 px de haut, le « 12 » d'un
       compteur a deux chiffres touchait le bord haut et bas de l'anneau. */
    line-height: 16px;
    text-align: center;
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-icon-btn:hover {
    border-color: var(--epure-separator);
    background: var(--epure-surface);
    color: var(--epure-text);
}

/* La bascule d'apparence vient du menu lateral, ou elle est empilee : son
   margin-bottom heritee decalait tout le groupe d'actions vers le haut (sa
   boite marge fait 39,6 px, centree dans la barre, donc le controle visible
   remonte de ~5 px). Ici elle est sur une ligne : pas de marge. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-color-toggle {
    height: 31px;
    margin: 0;
    padding: 2px;
    align-self: center;
    border-color: var(--epure-separator);
    background: var(--epure-surface-secondary);
}

html[data-ui-theme="epure"][data-ui="epure"] .epure-color-toggle .theme-toggle__btn {
    width: 25px;
    min-width: 25px;
    height: 24px;
    padding: 0;
    font-size: var(--epure-fs-4);
}

/* Le bouton d'action de la barre garde sa taille propre : la densite generale
   des boutons est posee plus bas, avec une specificite egale — on qualifie donc
   celui-ci par sa barre pour qu'il reste maitre chez lui. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar .epure-new-btn {
    min-height: 31px;
    padding: 6px 11px;
    font-size: var(--epure-fs-5);
}

/* Menu des creations (bouton « Nouveau »). Le bouton n'ouvre plus une page mais
   une liste d'actions : elle doit se lire d'un coup d'oeil, donc des rubriques
   courtes, une icone de largeur fixe pour aligner les libelles, et la meme
   densite que le reste du chrome. */
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu {
    min-width: 226px;
    padding: 6px;
    border: 1px solid var(--epure-separator);
    border-radius: 12px;
    background: var(--epure-surface);
    box-shadow: var(--epure-shadow-raised);
}
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-header {
    padding: 6px 10px 4px;
    font-size: var(--epure-fs-2);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--epure-text-tertiary);
}
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: var(--epure-fs-6);
    color: var(--epure-text);
}
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-item i {
    width: 15px;
    text-align: center;
    font-size: var(--epure-fs-8);
    color: var(--epure-text-secondary);
}
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-item:hover,
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-item:focus {
    background: var(--epure-hover);
    color: var(--epure-text);
}
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-item:hover i,
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-item:focus i {
    color: var(--epure-accent);
}
html[data-ui-theme="epure"][data-ui="epure"] .epure-new-menu .dropdown-divider {
    margin: 5px 4px;
    border-top-color: var(--epure-separator);
    opacity: 1;
}

/* Zone de travail : dense, plate, claire et alignee a la grille de reference. */
html[data-ui-theme="epure"][data-ui="epure"] main.main {
    position: relative;
    z-index: 1;
    width: auto !important;
    min-width: 0;
    min-height: 100vh;
    margin: 0 0 0 var(--epure-sidebar-width) !important;
    padding: calc(var(--epure-topbar-height) + 15px) 26px 38px !important;
    background: var(--epure-window);
}

/* Echelle typographique : sans elle, chaque page garde les tailles Bootstrap
   (h4 a 1.5rem…) et l'interface repart dans tous les sens d'un ecran a l'autre. */
html[data-ui-theme="epure"][data-ui="epure"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--epure-text);
    font-weight: 650;
    letter-spacing: -.022em;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(h1, .h1) { font-size: 21px; }
html[data-ui-theme="epure"][data-ui="epure"] :is(h2, .h2) { font-size: 18px; }
html[data-ui-theme="epure"][data-ui="epure"] :is(h3, .h3) { font-size: 16px; }
html[data-ui-theme="epure"][data-ui="epure"] :is(h4, .h4) { font-size: var(--epure-fs-11); }
html[data-ui-theme="epure"][data-ui="epure"] :is(h5, .h5) { font-size: var(--epure-fs-9); }
html[data-ui-theme="epure"][data-ui="epure"] :is(h6, .h6) { font-size: var(--epure-fs-7); }

html[data-ui-theme="epure"][data-ui="epure"] .page-header {
    margin-bottom: 16px;
    padding: 0;
}

html[data-ui-theme="epure"][data-ui="epure"] .page-header h1 { font-size: 21px; }

/* Même rythme entre les blocs autonomes des modules historiques et du kit UI.
   Les grilles Bootstrap et les écrans denses gardent leurs propres gouttières. */
html[data-ui-theme="epure"][data-ui="epure"] main.main > :is(.card, .glass-card, .panel, .ui-card)
    + :is(.card, .glass-card, .panel, .ui-card) {
    margin-top: var(--epure-gap);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-hero, .hero) {
    margin-bottom: var(--epure-gap);
    padding: 18px 20px;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(
    .glass-card, .card, .panel, .glass-metric, .metric-card, .bento-feature,
    .glass-hero, .hero, .action-card, .empty-state, .drop-zone,
    .glass-details, .auth-card
) {
    border: 1px solid var(--epure-separator) !important;
    border-radius: 11px !important;
    background: var(--epure-surface) !important;
    box-shadow: var(--epure-shadow) !important;
    color: var(--epure-text);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(
    .glass-card, .card, .panel, .glass-metric, .metric-card, .bento-feature,
    .glass-hero, .hero, .action-card, .auth-card
)::before { content: none !important; }

/* Zone de depot : la regle de surface ci-dessus lui repose une bordure PLEINE
   (raccourci `border:` en !important). Or le pointille est le seul signal qui
   dit « on peut deposer un fichier ici » — on le rend. */
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone {
    border-style: dashed !important;
    border-color: var(--epure-separator-strong) !important;
    box-shadow: none !important;
    background: var(--epure-window) !important;
}
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone:hover,
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone.dragover {
    border-color: var(--epure-accent) !important;
    background: var(--epure-hover) !important;
}
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone.has-file {
    border-style: solid !important;
    border-color: var(--epure-accent) !important;
    background: var(--epure-surface) !important;
}
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone .dz-icon { color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone .dz-sub { color: var(--epure-text-secondary); }
html[data-ui-theme="epure"][data-ui="epure"] .drop-zone.has-file .dz-sub { color: var(--epure-text); }

html[data-ui-theme="epure"][data-ui="epure"] :is(.card, .glass-card, .panel):hover {
    transform: none;
    box-shadow: var(--epure-shadow) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .card-header {
    min-height: 44px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--epure-separator);
    background: transparent;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 6px;
}

html[data-ui-theme="epure"][data-ui="epure"] .card-header :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0; }
html[data-ui-theme="epure"][data-ui="epure"] .card-header > .d-flex { flex-wrap: wrap; }
html[data-ui-theme="epure"][data-ui="epure"] .card-header > :is(.d-flex, .btn, .glass-btn):last-child:not(:first-child) {
    margin-left: auto;
}
html[data-ui-theme="epure"][data-ui="epure"] .card-body { padding: 15px 16px; }

html[data-ui-theme="epure"][data-ui="epure"] :is(.btn, .glass-btn) {
    border-radius: 7px;
    box-shadow: none;
    font-weight: 550;
    letter-spacing: 0;
}

/* Boutons a la meme densite que les champs. Les champs ont ete redescendus a
   31 px / 11,5 px, pas les boutons : un .btn restait a la taille Bootstrap
   (38 px, texte 16 px). Consequence visible partout, en plus de l'echelle
   typographique cassee — dans une barre de filtres (« Filtrer » a cote de cinq
   listes deroulantes) la rangee se decalait d'un cran. */
html[data-ui-theme="epure"][data-ui="epure"] :is(.btn, .glass-btn) {
    min-height: 31px;
    padding: 6px 11px;
    font-size: var(--epure-fs-7);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.btn-sm, .glass-btn.btn-sm) {
    min-height: 28px;
    padding: 4px 9px;
    font-size: var(--epure-fs-6);
}

html[data-ui-theme="epure"][data-ui="epure"] .btn-lg {
    min-height: 38px;
    padding: 9px 16px;
    font-size: var(--epure-fs-10);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.btn-primary, .glass-btn.tone-primary) {
    border-color: var(--epure-accent);
    background: var(--epure-accent);
    color: var(--epure-on-accent, #fff);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.btn-primary, .glass-btn.tone-primary):hover {
    border-color: var(--epure-accent-hover);
    background: var(--epure-accent-hover);
    color: var(--epure-on-accent, #fff);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-warning, .btn-outline-danger, .btn-outline-info, .btn-soft,
    .glass-btn.tone-ghost
) {
    border-color: var(--epure-separator-strong);
    background: var(--epure-surface);
    color: var(--epure-text-secondary);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-warning, .btn-outline-danger, .btn-outline-info, .btn-soft,
    .glass-btn.tone-ghost
):hover { background: var(--epure-hover); color: var(--epure-text); }

html[data-ui-theme="epure"][data-ui="epure"] :is(
    .form-control, .form-select, .glass-input, .glass-select, .action-card__input,
    .input-group-text, .ts-wrapper .ts-control
) {
    /* Le fond du champ est celui de la carte : la bordure est le SEUL repere qui
       dit ou l'on ecrit. Le separateur decoratif n'en tient que 1,35:1 — WCAG
       1.4.11 en demande 3. D'ou un jeton a part, plus franc que les filets. */
    border: 1px solid var(--epure-field-border, var(--epure-separator-strong)) !important;
    border-radius: 7px;
    background: var(--epure-surface) !important;
    box-shadow: none !important;
    color: var(--epure-text) !important;
}

/* Champs a la meme densite que le reste : sans cela ils gardent la taille
   Bootstrap (16 px) et ecrasent les cartes ou ils sont poses.
   Les prefixes d'un groupe de champs (.input-group-text) en font partie :
   restes a 38 px, ils rehaussaient toute leur colonne et desalignaient la
   rangee de filtres (visible sur la liste des comptes clients). */
html[data-ui-theme="epure"][data-ui="epure"] :is(.form-control, .form-select, .glass-input, .glass-select, .input-group-text) {
    min-height: 31px;
    padding: 5px 9px;
    font-size: var(--epure-fs-7);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.form-control-sm, .form-select-sm) {
    min-height: 28px;
    padding: 4px 8px;
    font-size: var(--epure-fs-6);
}

/* Selects recherchables (Tom Select) : le socle leur impose 38 px et un
   remplissage en !important. Non repris ici, ils depassaient de 7 px les
   listes deroulantes natives posees sur la meme ligne — une rangee de filtres
   sur deux etait en marche d'escalier. */
html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper .ts-control {
    min-height: 31px !important;
    padding: 5px 9px !important;
    font-size: var(--epure-fs-7);
}

html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper .ts-control input,
html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper .ts-control > .item { font-size: var(--epure-fs-7); }

html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper.ts-sm .ts-control {
    min-height: 28px !important;
    padding: 4px 8px !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper.ts-sm .ts-control,
html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper.ts-sm .ts-control input { font-size: var(--epure-fs-6); }

html[data-ui-theme="epure"][data-ui="epure"] textarea.form-control { min-height: 0; line-height: 1.55; }
html[data-ui-theme="epure"][data-ui="epure"] .form-label { color: var(--epure-text-secondary); font-size: var(--epure-fs-5); font-weight: 550; }
html[data-ui-theme="epure"][data-ui="epure"] :is(.form-check-label, .form-text) { font-size: var(--epure-fs-5); }

html[data-ui-theme="epure"][data-ui="epure"] :is(.form-control, .form-select):focus,
html[data-ui-theme="epure"][data-ui="epure"] .ts-wrapper.focus .ts-control {
    border-color: var(--epure-accent) !important;
    box-shadow: var(--epure-focus) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.theme-toggle, .ui-toggle, .seg, .glass-segmented) {
    border: 1px solid var(--epure-separator);
    border-radius: 8px;
    background: var(--epure-surface-secondary);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.theme-toggle__btn, .ui-toggle__btn, .seg__btn).active {
    background: var(--epure-surface);
    box-shadow: 0 1px 3px rgba(24, 39, 75, .1);
    color: var(--epure-accent);
}

/* Pastilles : petits rectangles doux plutot que des gelules, comme sur la
   reference. Un seul gabarit sert les etats de tickets, les tons metier et les
   compteurs, pour qu'une colonne de statuts se lise en balayage vertical. */
html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill, .badge, .badge.tag-pill, .metier-tag) {
    padding: 2.5px 7px;
    border: 0 !important;
    border-radius: 6px;
    background: var(--epure-neutral-soft);
    background-image: none !important;
    box-shadow: none !important;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-4);
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.5;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill.tone-success, .tag-ok, .glass-pill.delta-up) {
    background: var(--epure-success-soft);
    color: var(--epure-success-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill.tone-warn, .glass-pill.tone-warning, .tag-warn) {
    background: var(--epure-warn-soft);
    color: var(--epure-warn-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill.tone-danger, .tag-danger, .glass-pill.delta-down) {
    background: var(--epure-danger-soft);
    color: var(--epure-danger-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill.tone-info, .tag-info) {
    background: var(--epure-info-soft);
    color: var(--epure-info-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill.tone-accent, .glass-pill.tone-primary, .badge.bg-primary) {
    background: var(--epure-selected);
    color: var(--epure-accent);
}

html[data-ui-theme="epure"][data-ui="epure"] .glass-pill.tone-magic {
    background: var(--epure-magic-soft);
    color: var(--epure-magic-ink);
}

/* Sigles metier : ils servent a reconnaitre l'entite d'un coup d'oeil dans le
   menu, ils ne doivent donc jamais retomber dans le gris neutre des pastilles. */
html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill, .metier-tag).metier-infogerance {
    background: var(--epure-metier-infogerance);
    color: var(--epure-metier-infogerance-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill, .metier-tag).metier-logiciel {
    background: var(--epure-metier-logiciel);
    color: var(--epure-metier-logiciel-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-pill, .metier-tag).metier-communication {
    background: var(--epure-metier-communication);
    color: var(--epure-metier-communication-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] .metier-tag {
    padding: 1.5px 6px;
    border-radius: 5px;
    font-size: var(--epure-fs-2);
    font-weight: 650;
    letter-spacing: .01em;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.tag-muted, .glass-pill.delta-flat) {
    background: var(--epure-neutral-soft);
    color: var(--epure-text-tertiary);
}

/* Pastilles peintes par un utilitaire Bootstrap (.bg-*). Bootstrap y impose le
   FOND en !important mais laisse l'encre en specificite normale : notre encre
   neutre passait donc par-dessus sa couleur de texte, et l'aplat sature se
   retrouvait ecrit en gris — pire, .bg-primary donnait du bleu sur du bleu,
   illisible (statuts du catalogue de modules ERP, entre autres). On redonne a
   chaque aplat une encre qui tient dessus. Les variantes .text-bg-* de Bootstrap
   posent deja la leur en !important : elles ne sont pas concernees. */
html[data-ui-theme="epure"][data-ui="epure"]
    .badge:is(.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-dark, .bg-black) { color: #fff; }

html[data-ui-theme="epure"][data-ui="epure"]
    .badge:is(.bg-warning, .bg-info, .bg-light, .bg-white) { color: #14203a; }

/* Tons de texte : ces classes n'existaient que dans l'interface d'origine, d'ou
   des montants et des icones sans couleur ici (impayes en gris, etc.).
   Les boutons et les pastilles portent les MEMES classes pour designer leur
   fond : les exclure, sinon un bouton primaire ecrit en bleu sur bleu. */
html[data-ui-theme="epure"][data-ui="epure"] :is(
    .tone-primary, .tone-success, .tone-warn, .tone-warning, .tone-danger, .tone-info, .tone-magic
):not(.glass-btn):not(.btn):not(.glass-pill):not(.badge):not(.metier-tag) {
    color: var(--epure-tone-ink) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .tone-primary { --epure-tone-ink: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .tone-success { --epure-tone-ink: var(--epure-success-ink); }
html[data-ui-theme="epure"][data-ui="epure"] :is(.tone-warn, .tone-warning) { --epure-tone-ink: var(--epure-warn-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .tone-danger { --epure-tone-ink: var(--epure-danger-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .tone-info { --epure-tone-ink: var(--epure-info-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .tone-magic { --epure-tone-ink: var(--epure-magic-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .text-success { color: var(--epure-success-ink) !important; }
html[data-ui-theme="epure"][data-ui="epure"] .text-danger { color: var(--epure-danger-ink) !important; }
html[data-ui-theme="epure"][data-ui="epure"] .text-warning { color: var(--epure-warn-ink) !important; }
html[data-ui-theme="epure"][data-ui="epure"] :is(.text-muted, .text-faint) { color: var(--epure-text-tertiary) !important; }

/* Utilitaires de fond clair de Bootstrap. Ils ne s'inversent PAS en mode sombre
   (--bs-light-rgb ne bouge pas d'un theme a l'autre) : les blocs qui les portent
   — encarts des fils de tickets, tableaux de la base documentaire, cartes du
   parc automobile — restaient blancs, avec par-dessus le texte clair du theme.
   On les rattache aux jetons plutot que de retoucher une vingtaine de gabarits.
   Les pastilles sont exclues : Bootstrap y peint aussi l'encre, elles se traitent
   ensemble un peu plus haut. */
html[data-ui-theme="epure"][data-ui="epure"]
    :is(.bg-light, .bg-white, .bg-body, .bg-body-tertiary, .bg-body-secondary):not(.badge):not(.glass-pill) {
    background-color: var(--epure-surface-secondary) !important;
    color: var(--epure-text);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.text-dark, .text-black):not(.badge):not(.glass-pill) {
    color: var(--epure-text) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .table-light {
    --bs-table-bg: var(--epure-surface-secondary);
    --bs-table-color: var(--epure-text);
    --bs-table-border-color: var(--epure-separator);
    --bs-table-striped-color: var(--epure-text);
    --bs-table-hover-color: var(--epure-text);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.table, .glass-table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--epure-text);
    color: var(--epure-text);
    font-size: var(--epure-fs-5);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.table, .glass-table) thead th {
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--epure-separator);
    background: var(--epure-surface-secondary);
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-2);
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
}

html[data-ui-theme="epure"][data-ui="epure"] .table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .table tbody tr:hover > * { background: var(--epure-hover); }

/* ============================================================================
   COFFRE : fiche d'un mot de passe

   Les valeurs d'un coffre sont souvent des chaines sans espaces (identifiants,
   URL, noms techniques). Sans regles locales, elles poussent les tableaux et se
   retrouvent collees aux bords de carte.
   ============================================================================ */

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-view {
    max-width: 1360px;
    margin: 0 auto;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-header > div:first-child {
    min-width: 0;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-header h1,
html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-header .subtitle {
    overflow-wrap: anywhere;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-card {
    overflow: hidden;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-card .card-header {
    font-weight: 650;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .table {
    table-layout: fixed;
    width: 100%;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .table :is(th, td) {
    padding: 11px 14px;
    vertical-align: top;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .table th {
    width: 34%;
    color: var(--epure-text-tertiary);
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .table td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-log-table {
    min-width: 560px;
    table-layout: auto;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-log-table th {
    width: auto;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page :is(.hudu-breakable, .hudu-long-link, code) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page code.hudu-breakable {
    display: inline;
    padding: 2px 4px;
    border-radius: 5px;
    background: var(--epure-surface-secondary);
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-field-value {
    min-width: 0;
    max-width: 100%;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-field-value .btn {
    flex: 0 0 auto;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .list-group-item {
    min-width: 0;
    padding-right: 14px;
    padding-left: 14px;
    background: transparent;
    border-color: var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .list-group-item > span {
    min-width: 0;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-relation-value,
html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-related-access {
    max-width: 72%;
    overflow-wrap: anywhere;
}

html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-relation-value a,
html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-related-access a {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-header {
        display: block;
    }

    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-actions {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

@media (max-width: 575.98px) {
    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .table {
        table-layout: auto;
    }

    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-kv-table tr,
    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-kv-table :is(th, td) {
        display: block;
        width: 100%;
    }

    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-kv-table th {
        padding-bottom: 3px;
    }

    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-kv-table td {
        padding-top: 3px;
    }

    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-relation-value,
    html[data-ui-theme="epure"][data-ui="epure"] .hudu-password-page .hudu-related-access {
        max-width: 100%;
    }
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.dropdown-menu, .sidebar-search-panel, .ts-dropdown, .seg-pop, .flash-toast) {
    border: 1px solid var(--epure-separator);
    border-radius: 10px;
    background: var(--epure-surface);
    box-shadow: var(--epure-shadow-raised);
    color: var(--epure-text);
}

/* LE NIVEAU DU MESSAGE, RENDU AU MESSAGE. La regle ci-dessus repeint tous les
   `.flash-toast` en surface neutre — refus, succes et avertissement sortaient donc
   du meme gris, et un « cette facture existe deja » se lisait comme une
   confirmation (08/09/2026, facturation du projet des Trois Collines). Le socle
   (app.css) les teinte bien, mais avec une specificite moindre.

   Le fond reste sobre (aplat pastel de la palette) : c'est l'ENCRE et le liseré de
   gauche qui portent le niveau, comme sur les encarts `.alert` du meme theme. */
html[data-ui-theme="epure"][data-ui="epure"] .flash-toast {
    border-left-width: 3px;
}
html[data-ui-theme="epure"][data-ui="epure"] .flash-toast.flash-error,
html[data-ui-theme="epure"][data-ui="epure"] .flash-toast.flash-danger {
    background: var(--epure-danger-soft);
    border-color: var(--epure-danger);
    color: var(--epure-danger-ink);
}
html[data-ui-theme="epure"][data-ui="epure"] .flash-toast.flash-success {
    background: var(--epure-success-soft);
    border-color: var(--epure-success);
    color: var(--epure-success-ink);
}
html[data-ui-theme="epure"][data-ui="epure"] .flash-toast.flash-warning {
    background: var(--epure-warn-soft);
    border-color: var(--epure-warn);
    color: var(--epure-warn-ink);
}
html[data-ui-theme="epure"][data-ui="epure"] .flash-toast.flash-info {
    background: var(--epure-info-soft);
    border-color: var(--epure-info);
    color: var(--epure-info-ink);
}

/* Encarts d'information (.alert). Le socle ne les habille que pour l'interface
   d'origine ([data-ui="classic"] dans app.css) : ici ils retombaient sur le rendu
   Bootstrap brut — pave d'1 rem et teintes pastel hors palette — alors qu'ils
   apparaissent sur la grande majorite des ecrans. Les bandeaux d'annonce
   (.app-announce) gardent leur aplat plein : c'est un signal de supervision. */
html[data-ui-theme="epure"][data-ui="epure"] .alert:not(.app-announce) {
    padding: 10px 12px;
    border: 1px solid var(--epure-separator);
    border-radius: var(--epure-radius);
    background: var(--epure-surface-secondary);
    color: var(--epure-text);
    font-size: var(--epure-fs-6);
}

html[data-ui-theme="epure"][data-ui="epure"] .alert:not(.app-announce) .alert-link { color: inherit; font-weight: 650; }

html[data-ui-theme="epure"][data-ui="epure"] .alert-success:not(.app-announce) {
    border-color: color-mix(in srgb, var(--epure-success) 30%, transparent);
    background: var(--epure-success-soft);
    color: var(--epure-success-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] .alert-warning:not(.app-announce) {
    border-color: color-mix(in srgb, var(--epure-warn) 30%, transparent);
    background: var(--epure-warn-soft);
    color: var(--epure-warn-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] .alert-danger:not(.app-announce) {
    border-color: color-mix(in srgb, var(--epure-danger) 30%, transparent);
    background: var(--epure-danger-soft);
    color: var(--epure-danger-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] .alert-info:not(.app-announce) {
    border-color: color-mix(in srgb, var(--epure-info) 30%, transparent);
    background: var(--epure-info-soft);
    color: var(--epure-info-ink);
}

html[data-ui-theme="epure"][data-ui="epure"] .modal-content {
    border: 1px solid var(--epure-separator);
    border-radius: 13px;
    background: var(--epure-surface);
    box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .48);
    color: var(--epure-text);
}

/* Le tableau de bord reprend la densite et les proportions de la capture.
   Le « Bonjour » est remonte dans la barre du haut : l'entete de page ne sert
   plus qu'a rattraper la barre d'outils quand la barre du haut est trop etroite
   pour la porter (cf. app.js) — ou si le JS n'a pas tourne. Vide, elle disparait. */
html[data-ui-theme="epure"][data-ui="epure"] .dash-head {
    display: flex;
    margin: 0 0 10px;
    justify-content: flex-end;
    gap: 8px;
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-head > :not(.dash-toolbar) { display: none; }
html[data-ui-theme="epure"][data-ui="epure"] .dash-head:not(:has(> .dash-toolbar)) { display: none; }

html[data-ui-theme="epure"][data-ui="epure"] .dash-toolbar--topbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0 2px;
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-toolbar--topbar .btn {
    min-height: 30px;
    padding: 5px 8px;
    font-size: var(--epure-fs-4);
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-edit-hint {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--epure-separator);
    border-radius: 8px;
    background: var(--epure-surface);
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--epure-gap);
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-card {
    min-height: 146px;
    margin: 0;
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-card.size-lg { grid-column: span 2; }
html[data-ui-theme="epure"][data-ui="epure"] .dash-card-title { font-size: var(--epure-fs-6); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-card-title i { color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-card-body { gap: 7px; font-size: var(--epure-fs-5); }

/* ==========================================================================
   Cartes de mesure (KPI)
   Le gabarit de la reference : intitule discret, nombre en vedette, variation
   sous le nombre, icone reduite au rang de reperage.
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] :is(.metric-card, .glass-metric) {
    display: flex;
    min-height: 92px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px !important;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.metric-card, .glass-metric) .metric-label {
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-5);
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.metric-card, .glass-metric) .metric-value {
    margin-top: 5px;
    color: var(--epure-text);
    font-size: 25px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.032em;
    line-height: 1.08;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.metric-card, .glass-metric) .metric-sub {
    margin-top: 4px;
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-4);
    line-height: 1.45;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.metric-card, .glass-metric) .metric-icon {
    display: grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: var(--epure-fs-10);
}

/* Meme pastille hors carte metrique (la regle ci-dessus est scopee aux cartes) :
   sans cela l'icone n'est ni centree ni arrondie. */
html[data-ui-theme="epure"][data-ui="epure"] .metric-icon {
    display: grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    font-size: var(--epure-fs-10);
}

html[data-ui-theme="epure"][data-ui="epure"] .metric-icon.accent  { background: var(--epure-selected);     color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .metric-icon.info    { background: var(--epure-info-soft);    color: var(--epure-info-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .metric-icon.success { background: var(--epure-success-soft); color: var(--epure-success-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .metric-icon.warning { background: var(--epure-warn-soft);    color: var(--epure-warn-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .metric-icon.danger  { background: var(--epure-danger-soft);  color: var(--epure-danger-ink); }

/* ==========================================================================
   Blocs du tableau de bord
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] .dash-kpi-num {
    font-size: 25px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.032em;
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-kpi-unit {
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-4);
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-list li a {
    padding: 5px 7px;
    gap: 8px;
    border-radius: 7px;
    color: var(--epure-text);
    font-size: var(--epure-fs-6);
}

html[data-ui-theme="epure"][data-ui="epure"] .dash-list li a:hover { background: var(--epure-hover); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-li-icon { color: var(--epure-text-tertiary); font-size: var(--epure-fs-8); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-more { color: var(--epure-accent); font-size: var(--epure-fs-5); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-more-warn { color: var(--epure-warn-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-empty { color: var(--epure-text-tertiary); font-size: var(--epure-fs-5); }
html[data-ui-theme="epure"][data-ui="epure"] .dash-empty i { color: var(--epure-success); }

html[data-ui-theme="epure"][data-ui="epure"] :is(.dash-progress, .progress) {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: var(--epure-neutral-soft);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.dash-progress span, .progress-bar) {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--epure-accent);
}

/* ==========================================================================
   Bandeau de compteurs a tendance (partials/_kpi_row.html.twig)
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] .kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 13px;
    border: 1px solid var(--epure-separator);
    border-radius: var(--epure-radius);
    background: var(--epure-surface);
    box-shadow: var(--epure-shadow);
    color: inherit;
    text-decoration: none;
}

html[data-ui-theme="epure"][data-ui="epure"] a.kpi-card:hover {
    border-color: var(--epure-separator-strong);
    box-shadow: var(--epure-shadow-raised);
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__head {
    display: flex;
    align-items: center;
    gap: 7px;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 6px;
    background: var(--epure-neutral-soft);
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-6);
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card--accent .kpi-card__icon { background: var(--epure-selected); color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-card--violet .kpi-card__icon { background: var(--epure-magic-soft); color: var(--epure-magic-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-card--success .kpi-card__icon { background: var(--epure-success-soft); color: var(--epure-success-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-card--warn .kpi-card__icon { background: var(--epure-warn-soft); color: var(--epure-warn-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-card--danger .kpi-card__icon { background: var(--epure-danger-soft); color: var(--epure-danger-ink); }

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__label {
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-6);
    font-weight: 550;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__figures { min-width: 0; }

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__value {
    color: var(--epure-text);
    font-size: 25px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.032em;
    line-height: 1.1;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__delta {
    margin-top: 4px;
    font-size: var(--epure-fs-6);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__delta.tone-up { color: var(--epure-success-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__delta.tone-down { color: var(--epure-danger-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__delta.tone-flat { color: var(--epure-text-tertiary); }

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__sub {
    margin-top: 2px;
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-4);
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__spark {
    width: 118px;
    min-width: 88px;
    flex: 0 1 118px;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark {
    display: block;
    width: 100%;
    height: 40px;
    overflow: visible;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark__line {
    fill: none;
    stroke: var(--epure-chart-1);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark__area {
    fill: color-mix(in srgb, var(--epure-chart-1) 14%, transparent);
    stroke: none;
}

html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--violet  .kpi-spark__line { stroke: var(--epure-chart-7); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--violet  .kpi-spark__area { fill: color-mix(in srgb, var(--epure-chart-7) 14%, transparent); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--success .kpi-spark__line { stroke: var(--epure-chart-3); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--success .kpi-spark__area { fill: color-mix(in srgb, var(--epure-chart-3) 14%, transparent); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--warn    .kpi-spark__line { stroke: var(--epure-chart-4); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--warn    .kpi-spark__area { fill: color-mix(in srgb, var(--epure-chart-4) 14%, transparent); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--danger  .kpi-spark__line { stroke: var(--epure-chart-5); }
html[data-ui-theme="epure"][data-ui="epure"] .kpi-spark--danger  .kpi-spark__area { fill: color-mix(in srgb, var(--epure-chart-5) 14%, transparent); }

@media (max-width: 767.98px) {
    html[data-ui-theme="epure"][data-ui="epure"] .kpi-card__spark { display: none; }
}

/* ==========================================================================
   Graphiques
   L'habillage (police, grille, infobulles, palette) est pose sur Chart.js par
   public/assets/charts-theme.js ; ici on ne tient que le cadre.
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] canvas {
    max-width: 100%;
}

html[data-ui-theme="epure"][data-ui="epure"] .card-body > canvas {
    display: block;
}

/* ==========================================================================
   Fiche client
   Toute la mise en page de la fiche etait ecrite pour l'interface d'origine :
   ici elle est refaite, pas repeinte (grille, en-tete, jauges, listes).
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] .crm-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 460px);
    gap: var(--epure-gap);
    align-items: start;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-grid--flat { grid-template-columns: minmax(0, 1fr); }
html[data-ui-theme="epure"][data-ui="epure"] .crm-account-main { grid-column: 1; min-width: 0; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-account-main--below { grid-column: 1 / -1; grid-row: 2; }

html[data-ui-theme="epure"][data-ui="epure"] .crm-side-rail {
    position: sticky;
    top: 14px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: start;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-side-rail__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* --- En-tete : fil d'Ariane, pastille d'identite, nom, etats, mentions --- */
html[data-ui-theme="epure"][data-ui="epure"] .crm-account-hero {
    padding: 13px 15px !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-hero__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "back    back     back"
        "avatar  identity legal";
    gap: 2px 13px;
    align-items: center;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-hero__back {
    grid-area: back;
    min-height: 0;
    margin-bottom: 6px;
    padding: 0 !important;
    justify-self: start;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--epure-text-tertiary) !important;
    font-size: var(--epure-fs-5);
    font-weight: 500;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-hero__back:hover {
    background: transparent !important;
    color: var(--epure-accent) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-avatar {
    display: grid;
    width: 46px;
    height: 46px;
    grid-area: avatar;
    place-items: center;
    border-radius: 13px;
    background: var(--epure-selected);
    color: var(--epure-accent);
    font-size: var(--epure-fs-11);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-identity {
    min-width: 0;
    grid-area: identity;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-identity h1 {
    margin-bottom: 2px !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-identity .d-flex {
    margin-top: 5px !important;
    gap: 5px !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-account-legal {
    min-width: max-content;
    grid-area: legal;
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-4) !important;
    line-height: 1.65;
}

/* --- Bandeau de compteurs --- */
html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card { min-height: 0; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card .card-body { padding: 10px 12px !important; }

html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card .text-faint.small:first-child {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--epure-text-secondary) !important;
    font-size: var(--epure-fs-4);
    font-weight: 550;
    line-height: 1.35;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card .text-faint.small:first-child i {
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-6);
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card .h4 {
    margin-top: 5px !important;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.032em;
    line-height: 1.1;
}

/* Un compteur bleu sur une carte blanche n'apprend rien : on ne garde la
   couleur que pour ce qui alerte (retard, impaye), le reste reste encre. */
html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card .h4:is(.tone-primary, .tone-info, .tone-success) { color: var(--epure-text) !important; }

html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-card .text-faint.small:last-child {
    margin-top: 3px;
    font-size: var(--epure-fs-3);
    line-height: 1.4;
}

/* --- Rangee du haut : sante, rendez-vous, activite --- */
html[data-ui-theme="epure"][data-ui="epure"] .crm-top-row {
    display: grid;
    grid-template-columns: minmax(215px, .78fr) minmax(240px, 1fr) minmax(320px, 1.42fr);
    gap: var(--epure-gap);
    align-items: stretch;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-top-row > .glass-card { min-width: 0; }

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-ring {
    --health-score: 0;
    position: relative;
    display: flex;
    width: 84px;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: conic-gradient(
        var(--epure-success) calc(var(--health-score) * 1%),
        var(--epure-neutral-soft) 0
    );
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: var(--epure-surface);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-health-ring span, .crm-health-ring small) {
    position: relative;
    z-index: 1;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-ring span {
    color: var(--epure-text);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-ring small {
    margin-top: 1px;
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-2);
    font-weight: 550;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-label { font-size: var(--epure-fs-8); font-weight: 650; }

html[data-ui-theme="epure"][data-ui="epure"] .crm-health-money {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-rdv-card .card-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-rdv-scroll, .crm-tl-scroll) {
    scrollbar-width: thin;
    scrollbar-color: var(--epure-separator-strong) transparent;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-rdv-scroll {
    max-height: 240px;
    overflow-y: auto;
    margin-right: -4px;
    padding-right: 4px;
}

/* --- Fil d'activite --- */
html[data-ui-theme="epure"][data-ui="epure"] .crm-top-activity .card-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-top-activity .crm-tl-scroll { max-height: 240px !important; }

/* Sans cette regle, les evenements masques par defaut (factures) s'affichent
   tous : le filtre du fil est purement CSS. */
html[data-ui-theme="epure"][data-ui="epure"] .crm-timeline .js-tl-item.tl-hidden { display: none !important; }

html[data-ui-theme="epure"][data-ui="epure"] .js-tl-item {
    padding: 7px 0 !important;
    border-color: var(--epure-separator) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .js-tl-list > .js-tl-item:first-child { border-top: 0 !important; }
html[data-ui-theme="epure"][data-ui="epure"] .js-tl-item .fw-semibold { font-size: var(--epure-fs-6); }
html[data-ui-theme="epure"][data-ui="epure"] .js-tl-item .small { font-size: var(--epure-fs-4); }
html[data-ui-theme="epure"][data-ui="epure"] .js-tl-item i { font-size: var(--epure-fs-7); }

html[data-ui-theme="epure"][data-ui="epure"] .js-tl-chip {
    padding: 3px 8px !important;
    min-height: 0 !important;
    font-size: var(--epure-fs-4);
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-activity-compose {
    padding-top: 10px;
    border-top: 1px solid var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-top-activity form.flex-grow-1 { min-width: min(240px, 100%) !important; }

/* --- Blocs relation / journal / pied de fiche --- */
html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-relation-row, .crm-journal-row, .crm-commerce-row, .crm-side-widgets .row) {
    --bs-gutter-x: var(--epure-gap);
    --bs-gutter-y: var(--epure-gap);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-relation-row, .crm-journal-row) > [class*="col-"] { display: flex; }
html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-relation-row, .crm-journal-row) .glass-card { width: 100%; }
html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-relation-row, .crm-journal-row) .card-body { overflow-wrap: anywhere; }

html[data-ui-theme="epure"][data-ui="epure"] :is(
    .crm-commerce-row details.mb-3, .crm-relation-row details.mb-3, .crm-journal-row form.mb-3
) {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-side-widgets .glass-card { min-height: 104px; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-side-widgets .card-header { min-height: 38px; padding: 9px 12px; font-size: var(--epure-fs-7); }
html[data-ui-theme="epure"][data-ui="epure"] .crm-side-widgets .card-body { padding: 11px 12px; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-side-widgets .glass-table { font-size: var(--epure-fs-5); }
html[data-ui-theme="epure"][data-ui="epure"] .crm-side-widgets .glass-table td { padding: 6px 7px; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-side-widgets details.glass-card:not([open]) { min-height: 0; }

/* Cartes repliables : le <summary> tient lieu d'en-tete. */
html[data-ui-theme="epure"][data-ui="epure"] details.glass-card > summary { list-style: none; cursor: pointer; }
html[data-ui-theme="epure"][data-ui="epure"] details.glass-card > summary::-webkit-details-marker { display: none; }
html[data-ui-theme="epure"][data-ui="epure"] details.glass-card > summary .crm-caret { transition: transform .18s ease; }
html[data-ui-theme="epure"][data-ui="epure"] details.glass-card[open] > summary .crm-caret { transform: rotate(180deg); }

/* --- Jauges et barres --- */
html[data-ui-theme="epure"][data-ui="epure"] .crm-mini-bar {
    min-width: 2px;
    height: 6px;
    border-radius: 999px;
    background: var(--epure-accent);
    box-shadow: none;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-entity-list { display: grid; gap: 8px; }

html[data-ui-theme="epure"][data-ui="epure"] .crm-entity-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(96px, .85fr);
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--epure-separator);
    border-radius: 9px;
    background: var(--epure-surface-secondary);
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-entity-main {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-entity-meter {
    display: grid;
    grid-template-columns: minmax(58px, 1fr) auto;
    gap: 7px;
    align-items: center;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-entity-bar {
    --entity-score: 100;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--epure-neutral-soft);
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-entity-bar span {
    display: block;
    width: calc(var(--entity-score) * 1%);
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--epure-accent);
}

/* --- Etats vides --- */
html[data-ui-theme="epure"][data-ui="epure"] .crm-empty-state {
    display: grid;
    min-height: 120px;
    align-content: center;
    place-items: center;
    gap: 4px;
    padding: 16px;
    border: 1px dashed var(--epure-separator-strong);
    border-radius: 10px;
    background: var(--epure-surface-secondary);
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-5);
    text-align: center;
}

html[data-ui-theme="epure"][data-ui="epure"] .crm-empty-state--large { min-height: 168px; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-empty-state i { color: var(--epure-text-tertiary); font-size: 24px; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-empty-state strong { color: var(--epure-text); font-size: var(--epure-fs-7); font-weight: 650; }
html[data-ui-theme="epure"][data-ui="epure"] .crm-empty-state span { max-width: 26rem; }

html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-card, .card) .card-body > .text-faint.small:only-child {
    display: grid;
    min-height: 78px;
    place-items: center;
    border: 1px dashed var(--epure-separator-strong);
    border-radius: 10px;
    background: var(--epure-surface-secondary);
    text-align: center;
}

/* ==========================================================================
   Onglets et pilules de navigation (files de tickets, sous-vues)
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] .nav-pills {
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--epure-separator);
    border-radius: 9px;
    background: var(--epure-surface-secondary);
    align-self: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
}

html[data-ui-theme="epure"][data-ui="epure"] .nav-pills .nav-link {
    padding: 5px 11px;
    border-radius: 7px;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-6);
    font-weight: 550;
}

html[data-ui-theme="epure"][data-ui="epure"] .nav-pills .nav-link:hover { color: var(--epure-text); }

html[data-ui-theme="epure"][data-ui="epure"] .nav-pills .nav-link.active {
    background: var(--epure-surface);
    box-shadow: 0 1px 3px rgba(24, 39, 75, .1);
    color: var(--epure-accent);
}

html[data-ui-theme="epure"][data-ui="epure"] .nav-tabs {
    gap: 16px;
    border-bottom: 1px solid var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .nav-tabs .nav-link {
    padding: 8px 1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-7);
    font-weight: 550;
}

html[data-ui-theme="epure"][data-ui="epure"] .nav-tabs .nav-link.active {
    border-bottom-color: var(--epure-accent);
    color: var(--epure-accent);
}

/* ==========================================================================
   Vue ticket (les quatre helpdesks partagent ce gabarit)
   Le detail d'un ticket embarque sa propre feuille de style, ecrite pour
   l'interface d'origine : couleurs en dur, bulles bombees, avatars degrades.
   On la reprend ici entierement.
   ========================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] .sav-ticket-head { padding: 13px 15px !important; }
html[data-ui-theme="epure"][data-ui="epure"] .sav-ticket-head__title h1 { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
html[data-ui-theme="epure"][data-ui="epure"] .sav-ticket-head .mono { font-size: var(--epure-fs-4); }

html[data-ui-theme="epure"][data-ui="epure"] .sav-meta {
    margin-top: 12px;
    padding-top: 10px;
    gap: 6px 18px;
    border-top: 1px solid var(--epure-separator) !important;
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-meta__item { gap: 6px; font-size: var(--epure-fs-5); color: var(--epure-text-secondary); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-meta__item i { color: var(--epure-text-tertiary); font-size: var(--epure-fs-6); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-meta__item b { color: var(--epure-text); font-weight: 600; }
html[data-ui-theme="epure"][data-ui="epure"] .sav-meta__lbl { color: var(--epure-text-tertiary); font-size: var(--epure-fs-2); letter-spacing: .05em; }

/* Fil de conversation : bulles plates, un seul rayon, fonds tonalises. */
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg { gap: 10px; margin-bottom: 14px; }

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--epure-neutral-soft);
    box-shadow: none;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-8);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--client .sav-msg__avatar { background: var(--epure-client-soft); color: var(--epure-client-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--nous .sav-msg__avatar { background: var(--epure-selected); color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--note .sav-msg__avatar { background: var(--epure-warn-soft); color: var(--epure-warn-ink); }

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__author { font-size: var(--epure-fs-7); font-weight: 650; color: var(--epure-text); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__time { font-size: var(--epure-fs-4); color: var(--epure-text-tertiary); }

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__role {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--epure-neutral-soft);
    color: var(--epure-text-tertiary);
    font-size: var(--epure-fs-1);
    font-weight: 600;
    letter-spacing: .04em;
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__role--client { background: var(--epure-client-soft); color: var(--epure-client-ink); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__role--nous { background: var(--epure-selected); color: var(--epure-accent); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__role--note { background: var(--epure-warn-soft); color: var(--epure-warn-ink); }

/* Accuse de lecture : meme gabarit que la pastille de role (taille, rayon), pour que
   la ligne de meta reste une seule rangee de petites etiquettes plates. */
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__lu {
    padding: 2px 6px;
    border: 0;
    border-radius: 5px;
    background: var(--epure-success-soft);
    color: var(--epure-success-ink);
    font-size: var(--epure-fs-1);
    font-weight: 600;
    letter-spacing: .04em;
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__lu--non {
    background: var(--epure-neutral-soft);
    color: var(--epure-text-tertiary);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__body {
    /* Une adresse longue (lien de connexion, partage OneDrive) n'a aucune espace ou
       se couper : sans cela elle pousse la bulle hors de la colonne. */
    overflow-wrap: anywhere;
    padding: 9px 12px;
    border: 1px solid var(--epure-separator);
    border-radius: 10px;
    border-top-left-radius: 4px;
    background: var(--epure-surface);
    color: var(--epure-text);
    font-size: var(--epure-fs-7);
    line-height: 1.6;
}

/* Trois voix, trois teintes : le client en sarcelle, le technicien sur l'accent,
   la note interne en ambre. Le client etait sur le gris de fond, donc muet. */
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--client .sav-msg__body {
    border-color: color-mix(in srgb, var(--epure-client) 26%, transparent);
    background: var(--epure-client-soft);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--nous .sav-msg__body {
    border-color: color-mix(in srgb, var(--epure-accent) 22%, transparent);
    background: var(--epure-selected);
}

/* Envoi automatique : le neutre, volontairement. Une machine qui accuse reception ne
   parle pas au nom du technicien, elle ne prend donc pas l'accent. */
html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--auto .sav-msg__body {
    border-color: var(--epure-separator-strong);
    background: var(--epure-neutral-soft);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg--note .sav-msg__body {
    border-color: color-mix(in srgb, var(--epure-warn) 32%, transparent);
    background: var(--epure-warn-soft);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-msg__notetag { color: var(--epure-warn-ink); font-size: var(--epure-fs-3); }

/* Le chronometre est une valeur qu'on lit d'un coup d'oeil : il echappe a
   l'echelle des titres. */
html[data-ui-theme="epure"][data-ui="epure"] .sav-chrono .h4 {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-ev-line { margin-bottom: 14px; font-size: var(--epure-fs-5); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-ev-line__dot { background: var(--epure-separator-strong); box-shadow: none; }
html[data-ui-theme="epure"][data-ui="epure"] .sav-ev-line__txt { color: var(--epure-text-secondary); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-ev-line__meta { color: var(--epure-text-tertiary); }

/* Bascule Repondre / Note interne : meme segmente que le reste de l'interface. */
html[data-ui-theme="epure"][data-ui="epure"] .sav-seg {
    margin: 12px 14px 0;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--epure-separator);
    border-radius: 9px;
    background: var(--epure-surface-secondary);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-seg__btn {
    padding: 5px 11px;
    border-radius: 7px;
    color: var(--epure-text-secondary);
    font-size: var(--epure-fs-6);
    font-weight: 550;
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-seg__btn.is-on {
    background: var(--epure-surface);
    box-shadow: 0 1px 3px rgba(24, 39, 75, .1);
    color: var(--epure-accent);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-composer[data-mode="note"] .sav-seg__btn[data-target="note"].is-on { color: var(--epure-warn-ink); }

html[data-ui-theme="epure"][data-ui="epure"] .sav-composer[data-mode="note"] .sav-pane--note textarea {
    border-color: color-mix(in srgb, var(--epure-warn) 45%, transparent) !important;
    background: var(--epure-warn-soft) !important;
}

/* Cartes repliables du rail (Historique, Escalade). */
html[data-ui-theme="epure"][data-ui="epure"] .sav-collapse > summary {
    padding: 11px 14px;
    color: var(--epure-text);
    font-size: var(--epure-fs-7);
    font-weight: 600;
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-collapse[open] > summary { border-bottom: 1px solid var(--epure-separator); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-collapse__chev { color: var(--epure-text-tertiary); }

html[data-ui-theme="epure"][data-ui="epure"] .sav-ev {
    padding: 0 0 12px 14px;
    border-left: 1.5px solid var(--epure-separator);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-ev::before {
    width: 8px;
    height: 8px;
    left: -4.5px;
    background: var(--epure-accent);
    box-shadow: 0 0 0 3px var(--epure-selected);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-escalate__ico {
    border-radius: 9px;
    background: var(--epure-danger-soft);
    color: var(--epure-danger);
}

html[data-ui-theme="epure"][data-ui="epure"] :is(.sav-merged-banner, .sav-transfert-banner) {
    padding: 10px 13px;
    font-size: var(--epure-fs-6);
    color: var(--epure-text);
}

html[data-ui-theme="epure"][data-ui="epure"] .sav-merged-banner { border-left: 3px solid var(--epure-accent) !important; }
html[data-ui-theme="epure"][data-ui="epure"] .sav-merged-banner i { color: var(--epure-accent); font-size: var(--epure-fs-11); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-transfert-banner { border-left: 3px solid var(--epure-warn) !important; }
html[data-ui-theme="epure"][data-ui="epure"] .sav-transfert-banner > i { color: var(--epure-warn); font-size: var(--epure-fs-11); }
html[data-ui-theme="epure"][data-ui="epure"] .sav-transfert-banner__conf { color: var(--epure-text-tertiary); font-size: var(--epure-fs-4); }

html[data-ui-theme="epure"][data-ui="epure"] .sav-pj-img img {
    max-height: 150px;
    border: 1px solid var(--epure-separator);
    border-radius: 9px;
}

@media (max-width: 1380px) {
    html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar {
        grid-template-columns: minmax(200px, .8fr) minmax(260px, 1.2fr) auto;
        gap: 14px;
        padding-inline: 20px;
    }
    html[data-ui-theme="epure"][data-ui="epure"] .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-side-rail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sous cette largeur, la rangee du haut de la fiche client compresse trop la
   colonne d'activite : sante + rendez-vous passent cote a cote, l'activite
   prend toute la largeur en dessous. */
@media (max-width: 1200px) {
    html[data-ui-theme="epure"][data-ui="epure"] .crm-account-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-side-rail {
        position: static;
        grid-column: 1;
        grid-row: auto;
    }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-top-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-top-activity {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1080px) {
    html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar {
        grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.2fr) auto;
    }
    /* Le menu garde ses intertitres a cette largeur (contrairement au menu
       historique reduit aux icones) : le repli doit donc rester effectif. */
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-section.collapsed .sidebar-link { display: none; }

    /* Le socle epingle la pastille de compteur dans le coin du lien sous 992 px,
       parce que le menu historique y devient un rail d'icones sans libelle. Ce
       menu-ci garde ses libelles a toutes les largeurs : la pastille doit rester
       en bout de ligne, sinon elle chevauche le texte. */
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link .sidebar-badge {
        position: static;
        display: inline-flex;
        margin-left: auto;
        min-width: 1.2rem;
        padding: .02rem .38rem;
    }
    html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-welcome > span,
    html[data-ui-theme="epure"][data-ui="epure"] .epure-color-toggle { display: none; }

    /* La bascule clair/sombre quitte la barre du haut faute de place : elle doit
       reparaitre dans le menu, sinon plus AUCUN moyen de changer d'apparence en
       dessous de cette largeur (le socle masque celle du menu dans cette interface,
       et la page Profil devenait le seul recours). */
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user > .theme-toggle {
        display: flex;
        width: 100%;
        margin: 0 0 6px;
        padding: 2px;
        /* Le socle l'empile en colonne sous 992 px parce qu'il n'a plus qu'un rail
           de 64 px ; ce menu-ci garde sa pleine largeur, la rangee tient. */
        flex-direction: row;
        justify-content: center;
    }
    html[data-ui-theme="epure"][data-ui="epure"] .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-side-rail__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Entre 768 et 992 px, le socle replie le menu historique en rail de 64 px et
   retire tout ce qui est texte : marque, sigles metier, identite du compte.
   Ce menu-ci garde sa largeur et ses libelles a toutes les largeurs — sans ces
   reprises il se disloquait sur cette plage : trois « Mes taches » devenus
   indiscernables (sigle 16S/16L/16C disparu), un compte sans nom ni acces au
   profil, une marque sans nom et des liens centres au lieu d'etre alignes. */
@media (max-width: 992px) {
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-brand span:not(.brand-mark) { display: inline; }
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link { justify-content: flex-start; }
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link .metier-tag { display: inline-flex; }
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user-meta { display: flex; }
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar-user-cog { display: inline; }
}

@media (max-width: 767.98px) {
    html[data-ui-theme="epure"][data-ui="epure"] { --epure-topbar-height: 62px; }
    html[data-ui-theme="epure"][data-ui="epure"] .nav-toggle {
        top: 9px;
        left: 9px;
        z-index: 1060;
        width: 42px;
        height: 42px;
        border: 1px solid var(--epure-separator-strong);
        border-radius: 9px;
        background: var(--epure-surface);
        box-shadow: var(--epure-shadow-raised);
        color: var(--epure-text);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html[data-ui-theme="epure"][data-ui="epure"] .nav-backdrop { z-index: 1040; }
    html[data-ui-theme="epure"][data-ui="epure"] .sidebar {
        z-index: 1050;
        width: min(88vw, 316px) !important;
        transform: translateX(-105%);
        transition: transform .2s ease;
    }
    html[data-ui-theme="epure"][data-ui="epure"] body.nav-open .sidebar { transform: translateX(0); }
    html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar {
        left: 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px 10px 9px 62px;
    }
    html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-welcome { display: none; }
    html[data-ui-theme="epure"][data-ui="epure"] .epure-topbar-search { width: 100%; }
    /* On lache le profil (le bloc compte du tiroir y mene deja) mais JAMAIS la
       cloche : le menu ne porte plus l'entree « Notif & taches » dans cette
       interface, la masquer ici rendait /notifications inatteignable sur mobile. */
    html[data-ui-theme="epure"][data-ui="epure"] .epure-icon-btn--profil { display: none; }
    html[data-ui-theme="epure"][data-ui="epure"] .epure-new-btn { font-size: 0; }
    html[data-ui-theme="epure"][data-ui="epure"] .epure-new-btn i { font-size: var(--epure-fs-10); }
    html[data-ui-theme="epure"][data-ui="epure"] body.auth-body { padding: 16px; }
    html[data-ui-theme="epure"][data-ui="epure"] body.auth-body .auth-card {
        max-width: 420px;
        padding: 24px;
        border-radius: 14px !important;
    }
    html[data-ui-theme="epure"][data-ui="epure"] main.main {
        margin-left: 0 !important;
        padding: calc(var(--epure-topbar-height) + 13px) 12px 28px !important;
    }
    html[data-ui-theme="epure"][data-ui="epure"] :is(.glass-hero, .hero) { padding: 16px; }
    html[data-ui-theme="epure"][data-ui="epure"] :is(.card-header, .card-body) { padding-inline: 12px; }
    html[data-ui-theme="epure"][data-ui="epure"] .dash-grid { grid-template-columns: 1fr; }
    html[data-ui-theme="epure"][data-ui="epure"] .dash-card.size-lg { grid-column: span 1; }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-top-row { grid-template-columns: minmax(0, 1fr); }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-account-hero__content {
        grid-template-areas:
            "back   back"
            "avatar identity"
            "legal  legal";
        grid-template-columns: auto minmax(0, 1fr);
    }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-account-legal {
        min-width: 0;
        margin-top: 9px;
        padding-top: 9px;
        border-top: 1px solid var(--epure-separator);
        text-align: left !important;
    }
    html[data-ui-theme="epure"][data-ui="epure"] :is(.crm-health-layout, .crm-entity-row) {
        grid-template-columns: minmax(0, 1fr);
    }
    html[data-ui-theme="epure"][data-ui="epure"] .crm-health-ring { width: 72px; }
}

/* ============================================================================
   ANNEAU DE FOCUS CLAVIER

   Epure ne declarait aucun `:focus-visible` : boutons et liens heritaient de
   l'anneau du socle, `rgba(10, 132, 255, .18)` — 1,24:1 sur nos fonds, soit
   rien du tout. Celui qui navigue au clavier ne savait pas ou il etait.
   Trait plein a l'accent (5,17:1 en clair, 5,19:1 en sombre), pose en `outline`
   pour qu'il epouse la forme sans pousser les voisins, double du halo du theme.
   Les champs de saisie ne sont pas repris ici : leur bordure passe deja a
   l'accent au focus, ce qui les identifie sans ajouter un second trait.
   ============================================================================ */
html[data-ui-theme="epure"][data-ui="epure"] :is(
    a, button, .btn, .glass-btn, .epure-icon-btn, summary,
    [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 2px solid var(--epure-accent);
    outline-offset: 2px;
    box-shadow: var(--epure-focus);
}

@media (prefers-reduced-motion: reduce) {
    html[data-ui-theme="epure"][data-ui="epure"] *,
    html[data-ui-theme="epure"][data-ui="epure"] *::before,
    html[data-ui-theme="epure"][data-ui="epure"] *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================================
   DEPLIANT « PLUS » D'UN ESPACE — metriques de la 3e interface.

   La forme et le comportement sont dans public/assets/app.css (bloc
   « NAVIGATION — LE DEPLIANT “PLUS” D'UN ESPACE »), qui sert les trois
   interfaces. Ne restent ici que les mesures : cette feuille cible
   `html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link`, plus specifique
   que `.sidebar-link.sidebar-sublink` — sans ces trois regles, le RETRAIT des
   sous-entrees ne s'applique pas et le depliant se lit comme une liste plate.
   ============================================================================ */

html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link.sidebar-sublink {
    padding-left: 28px;
    font-size: var(--epure-fs-5);
}
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-link.sidebar-sublink i { font-size: var(--epure-fs-7); }
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-subgroup { padding-left: 28px; }

/* Mesures du depliant dans la 3e interface. La carte de rubrique y est posee par
   un selecteur a deux attributs + un id : sans la meme specificite ici, « Plus »
   garderait sa carte pleine largeur alors qu'il est FERME (cf. le bloc
   « NAVIGATION — LE DEPLIANT “PLUS” » de app.css). Le reste aligne la commande
   sur la colonne d'icones des liens : 15 px d'icone, 8 px de gouttiere, un corps
   sous celui des liens. */
html[data-ui-theme="epure"][data-ui="epure"] #appSidebar .sidebar-scroll > .sidebar-section.sidebar-more-host {
    margin-top: 0;
    background: none;
    box-shadow: none;
}
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-more[open] {
    margin-top: 3px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--epure-text) 2.5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--epure-text) 5%, transparent);
}
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-more > summary {
    min-height: 25px;
    margin: 1px 0;
    padding: 4px 9px;
    gap: 8px;
    border-radius: 7px;
    font-size: var(--epure-fs-5);
    font-weight: 500;
    color: var(--epure-text-tertiary);
}
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-more > summary:hover,
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-more[open] > summary {
    color: var(--epure-text-secondary);
}
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-more > summary > i:first-child {
    width: 15px;
    flex: 0 0 15px;
    font-size: var(--epure-fs-7);
}
html[data-ui-theme="epure"][data-ui="epure"] .sidebar-more > summary::after { opacity: .5; }

/* =====================================================================
   BASE DOCUMENTAIRE : la colonne des categories, deuxieme bandeau
   ---------------------------------------------------------------------
   Elle se cale contre le menu global, tout a gauche du contenu, et se
   fige sous la barre du haut — qui est `fixed` en Epure : avec l'offset
   generique (16px) la colonne glissait DESSOUS des le premier defilement
   et ses premieres categories devenaient illisibles.
   ===================================================================== */
html[data-ui-theme="epure"][data-ui="epure"] .doc-catnav,
html[data-ui-theme="epure"][data-ui="epure"] .doc-rail {
    top: calc(var(--epure-topbar-height) + 12px);
    max-height: calc(100vh - var(--epure-topbar-height) - 28px);
}
/* Le rail (categories + outils du coffre) porte le collage a la place de ses
   blocs : sans cette remise a plat, l'offset ci-dessus s'appliquerait AUSSI a
   chaque bloc et le second glisserait sous le premier. */
html[data-ui-theme="epure"][data-ui="epure"] .doc-rail > .doc-catnav {
    top: auto; max-height: none;
}