/* ==========================================================================
   Thème Ekrili — proposition A « Nuit Ekrili »
   Feuille enregistrée via FilamentAsset (aucun build Node requis).
   Palette : teal #02b6bc · nuit #0e2430 / #0c2029 · ambre #f0a63c
   ========================================================================== */

/* ==========================================================================
   SOCLE — règles communes à tous les écrans (lot 1 de la passe UI)
   Elles ne changent pas la marque, elles changent la vitesse de lecture.
   Placées en tête du fichier : les blocs spécifiques qui suivent doivent
   pouvoir les affiner sans avoir à monter en spécificité.
   ========================================================================== */

:root {
    /* Une seule grammaire de carte : ces trois valeurs sont la définition. */
    --ekrili-carte-rayon: 0.75rem;
    --ekrili-carte-ombre: 0 8px 24px -14px rgba(12, 32, 41, .35);
    --ekrili-tete-fond: #0e2430;
    --ekrili-tete-texte: #ffffff;
    --ekrili-tete-sous: #93a9ae;

    /* Couleur du liseré d'état, redéfinie ligne par ligne. */
    --ekrili-etat: transparent;

    /* Champ qui n'accepte pas de saisie (facture validée, notamment). */
    --ekrili-fige-fond: #f2f6f6;
    --ekrili-fige-bord: rgba(12, 32, 41, .22);
}

.dark {
    /* Sur fond sombre, l'en-tête doit descendre sous la carte pour rester
       lisible : le même nuit s'y confondrait. */
    --ekrili-tete-fond: #0a1a21;
    --ekrili-carte-ombre: 0 8px 24px -14px rgba(0, 0, 0, .6);
    --ekrili-fige-fond: #17272b;
    --ekrili-fige-bord: rgba(255, 255, 255, .16);
}

/* ---------- 1. Chiffres tabulaires ---------- */

/* Partout où des nombres s'empilent, ils doivent s'aligner : les colonnes
   se comparent alors sans être lues. `fi-align-end` est la classe que
   Filament pose sur les colonnes alignées à droite. */
.fi-ta-cell.fi-align-end,
.fi-ta-header-cell.fi-align-end,
.fi-in-entry.fi-align-end,
.fi-wi-stats-overview-stat-value,
.fi-badge-label,
.fi-ta-pagination,
input[type="number"],
.ekrili-nombre {
    font-variant-numeric: tabular-nums;
}

/* ---------- 2. Densité métier ---------- */

/* Filament est réglé pour des applications grand public. Sur un poste de
   gestion consulté toute la journée, on gagne quatre lignes visibles.

   Attention : la cellule `fi-ta-cell` n'a aucun rembourrage propre, c'est
   `fi-ta-text` qui le porte. Et pas `fi-ta-text-item` : quand la colonne a
   une description, l'item devient un enfant du bloc et les deux
   rembourrages s'additionneraient. */
.fi-ta-text { padding-block: 0.65rem; }

.fi-ta-cell .fi-ta-actions { padding-block: 0.35rem; }

.fi-ta-header-cell { padding-block: 0.5rem; }

/* La colonne des cases à cocher fixe à elle seule la hauteur de l'en-tête. */
.fi-ta-selection-cell { padding-block: 0.5rem; }

/* Filament rend les descriptions de colonne en `nowrap`. Depuis que les
   listes portent leurs informations secondaires en seconde ligne, un seul
   libellé long imposait sa largeur à la colonne et faisait déborder tout le
   tableau.

   `normal` rend la colonne compressible ; le rognage à une ligne garde des
   lignes de hauteur égale, ce qui est tout l'intérêt d'une liste qu'on
   parcourt du regard. Le texte complet reste sur la fiche. */
.fi-ta-text-description {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fi-header-heading { font-size: 1.35rem; }

.fi-section-content { padding: 1.15rem 1.35rem; }

/* ---------- 3. Grammaire de carte unique ---------- */

/* La carte à en-tête nuit de l'écran Paramètres devient la règle : même
   rayon, même ombre, même en-tête partout. On remplace l'anneau Filament
   par une ombre douce plutôt que de faire cohabiter les deux styles. */
.fi-section {
    border-radius: var(--ekrili-carte-rayon);
    box-shadow: var(--ekrili-carte-ombre);
    --tw-ring-color: transparent;
}

/* L'en-tête arrondit ses propres coins. Surtout pas `overflow: hidden` sur
   la section : le panneau de recherche produit déborde volontairement de sa
   cellule et serait rogné. */
.fi-section-header {
    background: var(--ekrili-tete-fond);
    padding: 0.7rem 1.35rem;
    border-bottom: 0;
    border-start-start-radius: var(--ekrili-carte-rayon);
    border-start-end-radius: var(--ekrili-carte-rayon);
}

.fi-section-header-heading {
    color: var(--ekrili-tete-texte);
    font-size: 0.875rem;
    font-weight: 600;
}

.fi-section-header-description {
    color: var(--ekrili-tete-sous);
    font-size: 0.78rem;
}

/* Chevron de repli et actions d'en-tête, sur fond nuit. */
.fi-section-header .fi-icon-btn,
.fi-section-header .fi-link {
    color: #7d979e;
}

.fi-section-header .fi-icon-btn:hover {
    color: #ffffff;
}

/* ---------- 4. Statuts en pastilles ---------- */

/* Un badge plein signale une exception. Sur vingt-cinq lignes qui en
   portent toutes un, il ne signale plus rien : dans les tableaux, il
   devient un point de couleur suivi du libellé, en encre neutre. */
.fi-ta-cell .fi-badge:not(.fi-color-danger) {
    background-color: transparent !important;
    /* Filament dessine le contour de ses pastilles par une ombre interne, et
       non par une bordure. Effacer le fond ne suffit donc pas : le liseré
       subsistait, collé aux caractères puisque le rembourrage latéral est
       retiré juste en dessous. C'est le petit cadre que l'on voyait autour
       des états et des compteurs dans toutes les listes. */
    box-shadow: none !important;
    padding-inline: 0;
    padding-block: 0;
    gap: 0.4rem;
    /* Le badge redevient une ligne de texte ordinaire : sans cadre, il doit
       s'aligner sur les autres cellules, pas flotter au-dessus. */
    line-height: 1.35;
    font-weight: 600;
}

/* Le libellé revient à l'encre neutre : sur vingt-cinq lignes, du texte
   teinté fatigue autant qu'un fond teinté. La couleur ne subsiste que
   dans le point. */
.fi-ta-cell .fi-badge:not(.fi-color-danger) {
    color: #16292d;
}

.dark .fi-ta-cell .fi-badge:not(.fi-color-danger) {
    color: #dbe7e9;
}

.fi-ta-cell .fi-badge:not(.fi-color-danger)::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 9999px;
    /* Même palette que les bandes d'état : la pastille et le liseré d'une
       même ligne ne peuvent pas se contredire. Variable distincte, car une
       colonne peut porter un badge sans rapport avec l'état de la ligne. */
    background: var(--ekrili-point, #b6c6ca);
}

.fi-ta-cell .fi-badge.fi-color-gray::before    { --ekrili-point: #b6c6ca; }
.fi-ta-cell .fi-badge.fi-color-info::before    { --ekrili-point: #02b6bc; }
.fi-ta-cell .fi-badge.fi-color-primary::before { --ekrili-point: #02b6bc; }
.fi-ta-cell .fi-badge.fi-color-success::before { --ekrili-point: #3ec98f; }
.fi-ta-cell .fi-badge.fi-color-warning::before { --ekrili-point: #f0a63c; }

/* La couleur pleine reste réservée à ce qui demande une action. Elle garde
   son cadre — c'est ce qui la fait remarquer — mais respire un peu plus. */
.fi-ta-cell .fi-badge.fi-color-danger {
    font-weight: 600;
    padding-inline: 0.5rem;
    padding-block: 0.15rem;
}

/* Même traitement dans les fiches en lecture seule : un badge y est aussi
   une donnée parmi d'autres, pas une alerte. */
.fi-in-entry .fi-badge:not(.fi-color-danger) {
    background-color: transparent !important;
    box-shadow: none !important;
    padding-inline: 0;
}

/* ---------- 5. Bandes d'état ---------- */

/* Un liseré en tête de ligne : l'état se voit avant d'être lu. La classe
   est posée par `recordClasses()` depuis la couleur sémantique déjà
   déclarée sur chaque modèle. */
.fi-ta-row.ekrili-etat-gray    { --ekrili-etat: #b6c6ca; }
.fi-ta-row.ekrili-etat-info    { --ekrili-etat: #02b6bc; }
.fi-ta-row.ekrili-etat-primary { --ekrili-etat: #02b6bc; }
.fi-ta-row.ekrili-etat-success { --ekrili-etat: #3ec98f; }
.fi-ta-row.ekrili-etat-warning { --ekrili-etat: #f0a63c; }
.fi-ta-row.ekrili-etat-danger  { --ekrili-etat: #d8574d; }

.fi-ta-row[class*="ekrili-etat-"] > .fi-ta-cell:first-child {
    box-shadow: inset 3px 0 0 0 var(--ekrili-etat);
}

/* ==========================================================================
   ATELIER — le contenu flotte sur un fond teinté
   Direction C des propositions du 26/07/2026. Volontairement regroupée ici :
   c'est une couche d'habillage, retirable en supprimant ce bloc sans toucher
   au socle ni aux listes.
   ========================================================================== */

:root {
    --ekrili-fond-page: #e9f0f0;
    --ekrili-carte-fond: #ffffff;
    --ekrili-carte-ombre-flottante:
        0 10px 26px -18px rgba(12, 32, 41, .45),
        0 1px 2px rgba(12, 32, 41, .06);
}

.dark {
    --ekrili-fond-page: #0a1518;
    --ekrili-carte-fond: #152225;
    --ekrili-carte-ombre-flottante:
        0 10px 26px -16px rgba(0, 0, 0, .8),
        0 1px 2px rgba(0, 0, 0, .3);
}

/* Le fond teinté couvre toute la zone de contenu, pas seulement la colonne
   centrée : sinon deux blancs différents se touchent sur les grands écrans. */
.fi-main-ctn {
    background: var(--ekrili-fond-page);
}

/* Le tableau devient une carte posée dessus, comme les sections. */
.fi-ta-ctn {
    background: var(--ekrili-carte-fond);
    border-radius: var(--ekrili-carte-rayon);
    box-shadow: var(--ekrili-carte-ombre-flottante);
    --tw-ring-color: transparent;
}

/* Tout ce qui est posé sur le fond teinté flotte de la même façon : sections,
   tableaux et indicateurs d'accueil. Une seule ombre pour toute l'application. */
.fi-section,
.fi-wi-stats-overview-stat {
    box-shadow: var(--ekrili-carte-ombre-flottante);
}

/* Le titre de l'écran descend dans la carte : le bandeau supérieur ne le
   répète plus (voir `fi-ta-header-heading` ci-dessous). */
.ekrili-topbar-titre {
    display: none;
}

.fi-topbar {
    background: var(--ekrili-fond-page);
    border-bottom: 0;
}

.dark .fi-topbar {
    background: var(--ekrili-fond-page);
}

/* La pilule de recherche est traitée plus bas, avec le reste du bandeau :
   la régler ici serait écrasé, cette section-là venant après. */

/* Quand la carte porte son propre titre — et désormais son bouton de
   création —, l'en-tête de page n'a plus rien à dire : il ne laissait qu'un
   « Devis » en double et un fil d'ariane redondant, en repoussant le bouton
   loin de la liste qu'il alimente. Il ne disparaît que s'il est réellement
   vide d'action, pour ne pas escamoter un bouton ajouté plus tard. */
.fi-page:has(.fi-ta-header-heading) .fi-header:not(:has(.fi-btn)) {
    display: none;
}

/* En-tête de carte : titre et résumé à gauche, action à droite. */
.fi-ta-header-ctn .fi-ta-header {
    align-items: center;
}

/* En-tête de carte : le nom de l'écran, et sous lui le chiffre qui situe. */
.fi-ta-header-heading {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.fi-ta-header-description {
    font-size: 0.78rem;
    color: #6a7f84;
}

.dark .fi-ta-header-description {
    color: #93a9ae;
}

/* Les onglets flottent aussi, au-dessus de la carte du tableau. */
.fi-tabs {
    background: transparent;
    box-shadow: none;
    --tw-ring-color: transparent;
}

/* ---------- Tuiles du tableau de bord ---------- */

/* Quatre indicateurs de même forme se confondent. On les distingue par une
   pastille d'icône, une couleur par domaine — l'identité. La couleur d'alerte
   reste réservée au cadre et au chiffre : si les quatre tuiles sont teintées
   en permanence, plus rien ne ressort quand quelque chose cloche. */
.ekrili-tuile {
    position: relative;
    display: block;
    padding: 1.1rem 1.2rem;
    border-radius: var(--ekrili-carte-rayon);
    background: var(--ekrili-carte-fond);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.ekrili-tuile .fi-wi-stats-overview-stat-label-ctn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

/* La pastille : c'est elle qui porte la couleur du domaine. */
.ekrili-tuile .fi-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    border-radius: 0.6rem;
    background: var(--ekrili-tuile-fond);
    color: var(--ekrili-tuile-teinte);
}

.ekrili-tuile .fi-wi-stats-overview-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #55696e;
}

.ekrili-tuile .fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: #0c2029;
}

.ekrili-tuile .fi-wi-stats-overview-stat-description {
    margin-top: 0.2rem;
    font-size: 0.75rem;
}

.dark .ekrili-tuile .fi-wi-stats-overview-stat-label { color: #93a9ae; }
.dark .ekrili-tuile .fi-wi-stats-overview-stat-value { color: #eef6f7; }

/* Une couleur par domaine : teal l'entrée, ambre la proposition, vert le
   terrain, nuit l'argent. Aucune n'est nouvelle, toutes viennent de la marque. */
.ekrili-tuile-demandes   { --ekrili-tuile-teinte: #04797d; --ekrili-tuile-fond: rgba(2, 182, 188, .14); }
.ekrili-tuile-devis      { --ekrili-tuile-teinte: #b8770f; --ekrili-tuile-fond: rgba(240, 166, 60, .18); }
.ekrili-tuile-livraisons { --ekrili-tuile-teinte: #1d8f60; --ekrili-tuile-fond: rgba(62, 201, 143, .18); }
.ekrili-tuile-factures   { --ekrili-tuile-teinte: #0e2430; --ekrili-tuile-fond: rgba(14, 36, 48, .10); }
.ekrili-tuile-materiel   { --ekrili-tuile-teinte: #6b5bd2; --ekrili-tuile-fond: rgba(107, 91, 210, .14); }
.ekrili-tuile-reglements { --ekrili-tuile-teinte: #1d8f60; --ekrili-tuile-fond: rgba(62, 201, 143, .18); }
.ekrili-tuile-echeancier { --ekrili-tuile-teinte: #04797d; --ekrili-tuile-fond: rgba(2, 182, 188, .14); }
/* L achat reprend le violet du matériel : c est la même matière, vue
   avant qu elle entre au parc. */
.ekrili-tuile-achats     { --ekrili-tuile-teinte: #6b5bd2; --ekrili-tuile-fond: rgba(107, 91, 210, .14); }

.dark .ekrili-tuile-demandes   { --ekrili-tuile-teinte: #5fcfd3; }
.dark .ekrili-tuile-devis      { --ekrili-tuile-teinte: #f0a63c; }
.dark .ekrili-tuile-livraisons { --ekrili-tuile-teinte: #3ec98f; }
.dark .ekrili-tuile-factures   { --ekrili-tuile-teinte: #b9cdd2; --ekrili-tuile-fond: rgba(255, 255, 255, .10); }
.dark .ekrili-tuile-materiel   { --ekrili-tuile-teinte: #a094ef; }
.dark .ekrili-tuile-reglements { --ekrili-tuile-teinte: #3ec98f; }
.dark .ekrili-tuile-echeancier { --ekrili-tuile-teinte: #5fcfd3; }
.dark .ekrili-tuile-achats     { --ekrili-tuile-teinte: #a094ef; }

/* La tuile mène quelque part : la flèche le dit, et le survol le confirme. */
a.ekrili-tuile::after {
    content: "→";
    position: absolute;
    top: 1.1rem;
    inset-inline-end: 1.2rem;
    font-size: 0.9rem;
    color: #c2d0d3;
    transition: color 150ms ease, transform 150ms ease;
}

a.ekrili-tuile:hover {
    box-shadow: 0 14px 30px -18px rgba(12, 32, 41, .5), 0 1px 2px rgba(12, 32, 41, .08);
    transform: translateY(-1px);
}

a.ekrili-tuile:hover::after {
    color: var(--ekrili-tuile-teinte);
    transform: translateX(2px);
}

/* Ce qui appelle une action : liseré et chiffre en rouge. */
.ekrili-tuile.est-en-alerte {
    box-shadow: inset 0 0 0 1px rgba(216, 87, 77, .45), var(--ekrili-carte-ombre-flottante);
}

.ekrili-tuile.est-en-alerte .fi-wi-stats-overview-stat-value {
    color: #b8433a;
}

.dark .ekrili-tuile.est-en-alerte .fi-wi-stats-overview-stat-value {
    color: #ffb3ad;
}

@media (prefers-reduced-motion: reduce) {
    .ekrili-tuile,
    a.ekrili-tuile::after {
        transition: none;
    }

    a.ekrili-tuile:hover {
        transform: none;
    }
}

/* ---------- 6. Documents verrouillés ---------- */

/* Le bandeau EST la carte : pas de cadre blanc autour d'un bloc nuit. */
.ekrili-carte-verrou {
    background: transparent;
    box-shadow: none;
}

.ekrili-carte-verrou .fi-section-content {
    padding: 0;
}

.ekrili-verrou {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--ekrili-tete-fond);
    color: #dbe9ea;
    border-radius: var(--ekrili-carte-rayon);
    padding: 0.7rem 0.95rem;
    font-size: 0.8rem;
    line-height: 1.45;
}

.ekrili-verrou b {
    color: #ffffff;
    font-weight: 600;
}

.ekrili-verrou-cle {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 0.45rem;
    background: rgba(240, 166, 60, .18);
    color: #f0a63c;
}

.ekrili-verrou-cle svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ekrili-verrou-texte {
    flex: 1;
}

/* L'empreinte prouve que le contenu n'a pas bougé : elle se lit comme une
   donnée technique, pas comme une phrase. */
.ekrili-verrou-empreinte {
    flex: none;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: #7d979e;
    white-space: nowrap;
}

.ekrili-verrou-empreinte.est-rompue {
    color: #ffb3ad;
    font-weight: 600;
}

@media (max-width: 760px) {
    .ekrili-verrou {
        flex-wrap: wrap;
    }

    .ekrili-verrou-empreinte {
        margin-inline-start: 2.3rem;
    }
}

/* Un champ qui n'accepte pas de saisie doit se voir avant qu'on clique
   dedans : fond retiré du blanc et liseré pointillé. Le fond gris très clair
   de Filament ne suffisait pas à distinguer « figé » de « vide ». */
/* Le clair et le sombre passent par des variables redéfinies sur `.dark`,
   comme le reste du thème, plutôt que par deux règles concurrentes : une
   seule déclaration à lire, et les deux valeurs côte à côte en tête de
   fichier. */
.fi-input-wrp.fi-disabled,
.fi-fo-select .fi-select-input-btn.fi-disabled {
    background: var(--ekrili-fige-fond);
    border: 1px dashed var(--ekrili-fige-bord);
    box-shadow: none;
    --tw-ring-color: transparent;
}

/* ---------- Écran de connexion : fond nuit + halos ---------- */
.fi-simple-layout {
    background:
        radial-gradient(560px 360px at 16% 68%, rgba(2, 182, 188, .34), transparent 70%),
        radial-gradient(480px 320px at 84% 34%, rgba(240, 166, 60, .20), transparent 70%),
        radial-gradient(420px 300px at 55% 92%, rgba(62, 201, 143, .15), transparent 70%),
        #0c2029;
}

/* Carte centrée, liseré dégradé en tête */
.fi-simple-main {
    position: relative;
    overflow: hidden;
    border-radius: 0.9rem;
}

.fi-simple-main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, #02b6bc, #3ec98f 55%, #f0a63c);
}

/* En mode clair, la carte reste blanche sur le fond nuit (maquette A) */
html:not(.dark) .fi-simple-main {
    background: #ffffff;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
    --tw-ring-color: transparent;
}

.dark .fi-simple-main {
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75);
}

/* ---------- Marque « ekrili » (barre latérale + connexion) ---------- */
.ekrili-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* « OS GESTION » est plus long que l'ancien mot-symbole : la taille baisse
   et l'interlettrage s'ouvre légèrement, pour que le bloc tienne dans la
   barre latérale repliée sans se casser en deux lignes. */
.ekrili-brand-mark {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #0c2029;
}

.ekrili-brand-mark em {
    font-style: normal;
    color: #02b6bc;
}

.ekrili-brand-entity {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6a7f84;
}

.fi-sidebar .ekrili-brand-mark,
.dark .ekrili-brand-mark {
    color: #ffffff;
}

.fi-sidebar .ekrili-brand-entity {
    color: #6f8b93;
}

.fi-simple-layout .ekrili-brand {
    align-items: center;
    text-align: center;
    gap: 0.2rem;
}

.fi-simple-layout .ekrili-brand-mark {
    font-size: 1.7rem;
}

html:not(.dark) .fi-simple-layout .ekrili-brand-mark {
    color: #0c2029;
}

/* Deux blocs distincts : la marque, puis « Connexion » collé à son
   sous-titre (retour maquette) */
.fi-simple-main .fi-simple-header-heading {
    margin-top: 1.4rem;
    font-size: 1.25rem;
}

.ekrili-login-sub {
    text-align: center;
    font-size: 0.8rem;
    color: #6a7f84;
    margin: -1.15rem 0 0.6rem;
}

/* Bouton de connexion : dégradé teal de la maquette */
.fi-simple-main button[type="submit"].fi-btn {
    background-image: linear-gradient(90deg, #02b6bc, #0ac2a8);
    box-shadow: 0 8px 18px -8px rgba(2, 182, 188, .7);
    border-radius: 0.55rem;
}

/* Pied de connexion : entité juridique + éditeur */
.ekrili-login-foot {
    text-align: center;
    font-size: 0.72rem;
    color: #93a5a8;
    margin-top: 1rem;
}

.ekrili-login-foot b {
    color: #04797d;
}

.ekrili-login-foot .ora {
    display: block;
    margin-top: 0.4rem;
    letter-spacing: 0.04em;
}

.ekrili-login-foot .ora a {
    color: #6a7f84;
    font-weight: 600;
    text-decoration: none;
}

.ekrili-login-foot .ora a:hover,
.ekrili-login-foot .ora a:focus-visible {
    color: #04797d;
    text-decoration: underline;
}

/* ---------- Bandeau supérieur : titre d'écran + recherche en pilule ---------- */

/* La marque vit dans la barre latérale (maquette A), pas dans le bandeau */
.fi-topbar .fi-logo {
    display: none;
}

.ekrili-topbar-titre {
    font-weight: 700;
    font-size: 0.95rem;
    color: #16292d;
}

.dark .ekrili-topbar-titre {
    color: #e6efef;
}

/* Sur le fond teinté d'Atelier, un gris très clair disparaîtrait : la pilule
   prend le blanc des cartes pour continuer à se lire comme un champ. */
.fi-global-search .fi-input-wrp {
    border-radius: 9999px;
    background: var(--ekrili-carte-fond);
    box-shadow: 0 1px 2px rgba(12, 32, 41, .07);
    --tw-ring-color: transparent;
    padding-inline: 0.5rem;
}

.dark .fi-global-search .fi-input-wrp {
    background: #1b2c30;
    box-shadow: none;
}

/* L'en-tête de page (gros titre) est redondant avec le bandeau ;
   masqué quand il ne porte ni action ni fil d'ariane */
.fi-header:not(:has(.fi-btn, a)) {
    display: none;
}

/* ---------- Barre latérale nuit, détachée du contenu ---------- */
.fi-sidebar,
.fi-sidebar-header {
    background: #0e2430 !important;
}

/* Marque en tête de colonne */
.ekrili-sidebar-brand {
    display: block;
    padding: 0.9rem 0.5rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.fi-sidebar {
    box-shadow: 6px 0 22px -8px rgba(8, 24, 32, .5);
}

.fi-sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: none !important;
    --tw-ring-color: transparent;
}

.fi-sidebar-nav {
    padding-top: 0.5rem;
}

.fi-sidebar-group-label {
    color: #5d7880;
}

.fi-sidebar-item-label {
    color: #b9cdd2;
}

.fi-sidebar-item-icon {
    color: #7d979e;
}

.fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, .06);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgba(2, 182, 188, .16);
    border-inline-start: 3px solid #02b6bc;
    border-radius: 0 0.5rem 0.5rem 0;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #ffffff;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #02b6bc;
}

/* Boutons repli/notifications de l'en-tête latérale */
.fi-sidebar-header .fi-icon-btn {
    color: #7d979e;
}

/* ---------- Bloc utilisateur sous la marque (comme Prosol) ---------- */
.ekrili-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.5rem 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ekrili-user-avatar {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #02b6bc, #3ec98f);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    display: grid;
    place-items: center;
}

.ekrili-user-nom {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #eef6f7;
    line-height: 1.2;
}

.ekrili-user-role {
    font-size: 0.68rem;
    color: #7d979e;
}

/* ---------- Carte à en-tête nuit (écran Paramètres) ---------- */

/* Cette carte n'est plus une exception : elle applique les mêmes trois
   variables que toutes les sections de l'application (voir le socle). */
.ekrili-card {
    border-radius: var(--ekrili-carte-rayon);
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--ekrili-carte-ombre);
}

.dark .ekrili-card {
    background: #152225;
}

.ekrili-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--ekrili-tete-fond);
    color: var(--ekrili-tete-texte);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.7rem 1.35rem;
}

.ekrili-card-head svg {
    width: 1rem;
    height: 1rem;
    color: #7fd6d9;
}

/* Les onglets épousent la carte, sans double cadre */
.ekrili-card .fi-sc-tabs {
    border-radius: 0;
    box-shadow: none;
    --tw-ring-color: transparent;
}

/* Bouton Enregistrer intégré au bas de la carte (maquette A) */
.ekrili-card-foot {
    padding: 0.25rem 1.5rem 1.4rem;
}

/* ---------- Confort des tableaux larges ---------- */

/* Largeur bornée : le plein écran fatigue la lecture sur grand moniteur,
   mais 1280 px bridait inutilement les tableaux denses. */
.fi-main {
    max-width: 1720px;
    margin-inline: auto;
}

/* Le cadre du tableau porte les ombres de débordement. */
.fi-ta-main {
    position: relative;
}

.fi-ta-main::before,
.fi-ta-main::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 2.25rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 2;
}

.fi-ta-main::before {
    inset-inline-start: 0;
    background: linear-gradient(to right, rgba(12, 32, 41, .13), transparent);
}

.fi-ta-main::after {
    inset-inline-end: 0;
    background: linear-gradient(to left, rgba(12, 32, 41, .13), transparent);
}

.fi-ta-main.ekrili-ombre-debut::before,
.fi-ta-main.ekrili-ombre-fin::after {
    opacity: 1;
}

.dark .fi-ta-main::before {
    background: linear-gradient(to right, rgba(0, 0, 0, .45), transparent);
}

.dark .fi-ta-main::after {
    background: linear-gradient(to left, rgba(0, 0, 0, .45), transparent);
}

/* Barre de défilement native du tableau, rendue franchement visible. */
.fi-ta-content-ctn {
    scrollbar-width: thin;
    scrollbar-color: #9fb6bb transparent;
}

.fi-ta-content-ctn::-webkit-scrollbar {
    height: 10px;
}

.fi-ta-content-ctn::-webkit-scrollbar-thumb {
    background: #9fb6bb;
    border-radius: 9999px;
}

.fi-ta-content-ctn::-webkit-scrollbar-thumb:hover {
    background: #02b6bc;
}

/* Barre flottante, collée au bas de l'écran tant que la barre native
   du tableau reste hors de vue. */
.ekrili-defilement-flottant {
    position: fixed;
    bottom: 0;
    z-index: 25;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    display: none;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(12, 32, 41, .1);
    box-shadow: 0 -6px 16px -10px rgba(12, 32, 41, .5);
    scrollbar-width: thin;
    scrollbar-color: #02b6bc transparent;
}

.ekrili-defilement-flottant.est-visible {
    display: block;
}

.ekrili-defilement-flottant > div {
    height: 1px;
}

.ekrili-defilement-flottant::-webkit-scrollbar {
    height: 12px;
}

.ekrili-defilement-flottant::-webkit-scrollbar-thumb {
    background: #02b6bc;
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.dark .ekrili-defilement-flottant {
    background: rgba(21, 34, 37, .94);
    border-top-color: rgba(255, 255, 255, .12);
}

/* ---------- Lignes d'un document commercial (devis, facture) ---------- */

/* Le tableau des prestations est le cœur de l'écran : il occupe toute la
   largeur et répartit ses colonnes selon leur besoin réel, au lieu de les
   laisser se tasser à parts égales. */
.ekrili-lignes-document table {
    table-layout: fixed;
    width: 100%;
}

.ekrili-lignes-document th,
.ekrili-lignes-document td {
    padding-inline: 0.35rem;
}

/* Libellés d'en-tête : compacts, sans coupure mot à mot. */
.ekrili-lignes-document thead th {
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Saisie légèrement plus dense que le reste de l'application : on lit une
   ligne d'un coup d'œil, sans que les champs ne débordent. */
.ekrili-lignes-document .fi-input,
.ekrili-lignes-document .fi-fo-select-btn,
.ekrili-lignes-document .fi-fo-placeholder {
    font-size: 0.82rem;
}

.ekrili-lignes-document .fi-input {
    padding-inline: 0.5rem;
}

/* Répartition des colonnes.

   LE NOMBRE DE COLONNES N'EST PAS CONSTANT. Le répéteur ajoute deux colonnes
   absentes du schéma PHP, et chacune peut manquer :

     - la poignée de réordonnancement, en TÊTE, disparaît s'il n'y a qu'une
       seule ligne (réordonner un élément unique n'a pas de sens) ;
     - la colonne d'actions, en FIN, disparaît quand le répéteur est désactivé
       — c'est le cas de toute facture validée.

   D'où trois dispositions réelles : 10 colonnes (éditable, plusieurs lignes),
   9 (éditable, une seule ligne) et 8 (document verrouillé). Numéroter depuis
   la gauche OU depuis la droite se trompe donc dans deux cas sur trois.

   L'ancrage retenu : seules les deux colonnes techniques portent la classe
   `fi-fo-table-repeater-empty-header-cell`. On les règle par cette classe, et
   comme seule celle de tête décale les colonnes métier, il suffit de deux
   jeux de largeurs — selon qu'elle est là ou non. */

.ekrili-lignes-document th.fi-fo-table-repeater-empty-header-cell {
    width: 4%;
}

/* Largeurs des colonnes de lignes de document.
   Deux jeux : la facture en a neuf, le devis dix depuis la coche d'achat
   du lot 4. Chacun se décline selon la présence de la poignée de
   réordonnancement, qui disparaît sur un document à une seule ligne.
   Invariant figé par ColonnesLignesDocumentTest. */

/* Facture — neuf colonnes métier — total 91 %,
   le reste revenant aux colonnes techniques. */
/* Sans poignée. */
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(1) { width: 14%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(2) { width: 20%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(3) { width: 5%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(4) { width: 7%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(5) { width: 10%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(6) { width: 5%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(7) { width: 9%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(8) { width: 8%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(9) { width: 13%; }
/* Avec poignée. */
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(2) { width: 14%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(3) { width: 20%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(4) { width: 5%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(5) { width: 7%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(6) { width: 10%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(7) { width: 5%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(8) { width: 9%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(9) { width: 8%; }
.ekrili-lignes-document:not(.ekrili-lignes-materiel):not(.ekrili-lignes-devis):has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(10) { width: 13%; }

/* Devis — dix, la coche d'achat en plus — total 91 %,
   le reste revenant aux colonnes techniques. */
/* Sans poignée. */
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(1) { width: 14%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(2) { width: 18%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(3) { width: 5%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(4) { width: 7%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(5) { width: 10%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(6) { width: 5%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(7) { width: 9%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(8) { width: 8%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(9) { width: 4%; }
.ekrili-lignes-document.ekrili-lignes-devis:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(10) { width: 11%; }
/* Avec poignée. */
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(2) { width: 14%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(3) { width: 18%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(4) { width: 5%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(5) { width: 7%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(6) { width: 10%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(7) { width: 5%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(8) { width: 9%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(9) { width: 8%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(10) { width: 4%; }
.ekrili-lignes-document.ekrili-lignes-devis:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(11) { width: 11%; }

/* La poignée n'a besoin que de la place de ses deux flèches. */
.ekrili-lignes-document th.fi-fo-table-repeater-empty-header-cell {
    padding-inline: 0.15rem;
    text-align: center;
}

.ekrili-lignes-document:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) td:first-child {
    padding-inline: 0.15rem;
    text-align: center;
}

/* Filet de sécurité : quelle que soit la largeur, un libellé ne se casse pas
   au milieu d'un mot. Mieux vaut un texte qui déborde d'un cheveu qu'une
   colonne de lettres empilées à la verticale. */
.ekrili-lignes-document .fi-fo-select-btn,
.ekrili-lignes-document .fi-select-input-btn,
.ekrili-lignes-document .fi-fo-select-btn-label {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Le total de ligne se lit comme un montant, pas comme un champ : aligné à
   droite et sur une seule ligne, quelle que soit l'étroitesse de la colonne.
   Le Placeholder de Filament est rendu avec les classes d'infolist — et c'est
   le seul de la ligne, d'où un ancrage sur la classe plutôt que sur une
   position, qui varie (voir la répartition des colonnes plus haut). */
.ekrili-lignes-document .fi-in-entry-content-col,
.ekrili-lignes-document .fi-in-entry-content-ctn,
.ekrili-lignes-document .fi-in-entry-content,
.ekrili-lignes-document .fi-in-text-item {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
    justify-content: flex-end;
}

/* Tous les nombres saisis sont alignés à droite : on compare des ordres de
   grandeur d'un coup d'œil, comme sur une facture. */
.ekrili-lignes-document input.ekrili-nombre {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* La liste de recherche produit ne doit pas hériter de la largeur de sa
   colonne : dans un tableau, elle deviendrait une colonne de lettres. */
.ekrili-lignes-document .fi-dropdown-panel {
    min-width: 24rem;
    max-width: min(30rem, 90vw);
}

.ekrili-lignes-document .fi-dropdown-panel .fi-dropdown-list-item-label,
.ekrili-lignes-document .fi-dropdown-panel .fi-select-input-option-label {
    white-space: normal;
    line-height: 1.35;
}

/* La cellule ne doit pas rogner le panneau qui en déborde. */
.ekrili-lignes-document td {
    overflow: visible;
}

/* Les aides de saisie sous les champs feraient exploser la hauteur des
   lignes : elles restent disponibles au survol, via l'attribut title. */
.ekrili-lignes-document .fi-fo-field-wrp-hint,
.ekrili-lignes-document .fi-fo-field-wrp-helper-text {
    font-size: 0.68rem;
    line-height: 1.2;
}

/* Sur petit écran, le tableau redevient défilant plutôt qu'illisible. */
@media (max-width: 1100px) {
    .ekrili-lignes-document table {
        table-layout: auto;
        min-width: 62rem;
    }
}

/* ── Textes d'aide sous les champs ────────────────────────────────────
   Ils sont utiles et restent affichés, mais ils ne doivent pas peser
   autant que la donnée qu'ils expliquent. Réduits et adoucis, ils se
   lisent quand on les cherche et s'effacent quand on parcourt l'écran.
   Le tableau des lignes garde sa propre règle, encore plus serrée. */

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.82;
}

/* Les descriptions de section suivent le même principe : elles cadrent
   la section, elles ne la concurrencent pas. */
.fi-section-header-description {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ── Situation financière d'un client ─────────────────────────────────
   Quatre tuiles de même grammaire que le tableau de bord. La première
   change de ton selon la situation : c'est elle qui décide d'un appel,
   les trois autres l'expliquent. */

.ekrili-situation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.ekrili-situation-tuile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    background: rgb(148 163 184 / 0.08);
}

.ekrili-situation-libelle {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ekrili-pale, #94a3b8);
}

.ekrili-situation-valeur {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.ekrili-situation-valeur em {
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.65;
}

.ekrili-situation-detail {
    font-size: 0.75rem;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-situation-tuile.est-alerte {
    background: rgb(192 72 62 / 0.1);
}

.ekrili-situation-tuile.est-alerte .ekrili-situation-valeur,
.ekrili-situation-tuile.est-alerte .ekrili-situation-libelle {
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-situation-tuile.est-du .ekrili-situation-valeur {
    color: var(--ekrili-ambre-sombre, #b8770f);
}

.ekrili-situation-note {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ekrili-doux, #64748b);
}

/* ── Imputation d'un règlement ────────────────────────────────────────
   Le solde de la répartition se lit avant de valider : reste à affecter,
   ou dépassement. Trois tons, le rouge réservé au cas qui empêche
   l'enregistrement. */

.ekrili-imputation-ok,
.ekrili-imputation-reste,
.ekrili-imputation-alerte {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
}

.ekrili-imputation-ok {
    background: rgb(62 201 143 / 0.12);
    color: var(--ekrili-vert-sombre, #1d8f60);
}

.ekrili-imputation-reste {
    background: rgb(2 182 188 / 0.1);
    color: var(--ekrili-teal-sombre, #04797d);
}

.ekrili-imputation-alerte {
    background: rgb(192 72 62 / 0.12);
    color: var(--ekrili-rouge, #c0483e);
}

/* Deux colonnes seulement dans le tableau d'imputation : la facture prend
   la place, le montant reste étroit et aligné à droite. */
.ekrili-lignes-imputation :is(th, td):nth-child(1) { width: 70%; }
.ekrili-lignes-imputation :is(th, td):nth-child(2) { width: 22%; }

/* ── Suivi des relances ───────────────────────────────────────────────
   Une frise verticale : le rang à gauche, l'état à droite. Le retard se
   lit à la couleur, pas à un pictogramme d'alerte — un devis en retard de
   relance est une situation banale, pas un incident. */

.ekrili-relances {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ekrili-relances li {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.55rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.ekrili-relances li + li {
    border-top: 1px solid rgb(148 163 184 / 0.18);
}

.ekrili-relance-rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgb(148 163 184 / 0.18);
    color: var(--ekrili-doux, #64748b);
}

.ekrili-relances .est-faite .ekrili-relance-rang {
    background: rgb(62 201 143 / 0.18);
    color: var(--ekrili-vert-sombre, #1d8f60);
}

.ekrili-relances .est-en-retard .ekrili-relance-rang {
    background: rgb(192 72 62 / 0.15);
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-relances .est-en-retard .ekrili-relance-corps {
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-relances .est-a-venir .ekrili-relance-corps {
    color: var(--ekrili-pale, #94a3b8);
}

.ekrili-relance-reponse {
    display: block;
    margin-top: 0.2rem;
    font-style: italic;
    color: var(--ekrili-doux, #64748b);
}

/* ── Guide utilisateur ────────────────────────────────────────────────
   Une colonne de lecture étroite : au-delà d'une soixantaine de signes,
   l'œil perd sa ligne en revenant à la marge. Le sommaire reste visible
   pendant le défilement, sur les écrans qui en ont la place. */

.ekrili-guide {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.ekrili-guide-sommaire {
    position: sticky;
    top: 1rem;
    font-size: 0.875rem;
}

.ekrili-guide-sommaire-titre {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ekrili-doux, #64748b);
    margin-bottom: 0.6rem;
}

.ekrili-guide-sommaire ol {
    list-style: none;
    counter-reset: guide;
    margin: 0;
    padding: 0;
    border-inline-start: 1px solid rgb(148 163 184 / 0.28);
}

.ekrili-guide-sommaire li {
    counter-increment: guide;
}

.ekrili-guide-sommaire a {
    display: block;
    padding: 0.4rem 0 0.4rem 0.85rem;
    margin-inline-start: -1px;
    border-inline-start: 2px solid transparent;
    color: var(--ekrili-doux, #64748b);
    text-decoration: none;
    line-height: 1.35;
}

.ekrili-guide-sommaire a::before {
    content: counter(guide) '. ';
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}

.ekrili-guide-sommaire a:hover,
.ekrili-guide-sommaire a:focus-visible {
    color: var(--ekrili-teal-sombre, #04797d);
    border-inline-start-color: var(--ekrili-teal, #02b6bc);
}

.ekrili-guide-note {
    margin-top: 1.5rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ekrili-pale, #94a3b8);
}

.ekrili-guide-contenu {
    max-width: 46rem;
}

/* La marge haute compense la barre supérieure fixe : sans elle, un saut
   d'ancre place le titre sous la barre, hors de vue. */
.ekrili-guide-section {
    scroll-margin-top: 5rem;
}

.ekrili-guide-section + .ekrili-guide-section {
    margin-top: 3.25rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgb(148 163 184 / 0.22);
}

.ekrili-guide-section > header {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.ekrili-guide-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgb(2 182 188 / 0.12);
    color: var(--ekrili-teal-sombre, #04797d);
}

.ekrili-guide-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ekrili-guide-resume {
    margin-top: 0.2rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-guide-bloc + .ekrili-guide-bloc {
    margin-top: 1.35rem;
}

.ekrili-guide-bloc h3 {
    font-size: 0.98rem;
    font-weight: 650;
    margin-bottom: 0.3rem;
}

.ekrili-guide-bloc p {
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--ekrili-doux, #64748b);
}

/* ---------- Schémas d'enchaînement ----------

   Du texte mis en file, pas une image : le guide se fouille au Ctrl+F, et un
   mot enfermé dans une capture ou dans un SVG n'est plus trouvable. La chaîne
   se replie en colonne sous 640 px — l'application se consulte au dépôt, sur
   téléphone, et un schéma qui déborde latéralement ne se lit pas du tout. */
.ekrili-guide-schema {
    margin: 0 0 1.6rem;
    padding: 1.05rem 1.15rem 1.15rem;
    border-radius: 0.6rem;
    background: rgb(2 182 188 / 0.06);
    border: 1px solid rgb(2 182 188 / 0.16);
}

.ekrili-guide-schema figcaption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0e7f83;
    margin-bottom: 0.75rem;
}

.dark .ekrili-guide-schema figcaption {
    color: #4fd3d8;
}

.ekrili-guide-schema-origine {
    font-size: 0.9rem;
    font-weight: 650;
    margin-bottom: 0.6rem;
}

.ekrili-guide-schema-origine::after {
    content: ' ↓';
    opacity: 0.55;
}

.ekrili-guide-schema-etapes {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ekrili-guide-schema-etapes > li {
    flex: 1 1 9.5rem;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid rgb(12 32 41 / 0.1);
    position: relative;
}

.dark .ekrili-guide-schema-etapes > li {
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.12);
}

/* La flèche relie deux étapes qui SE SUIVENT. Sur une liste d'issues, elles
   sont concurrentes et non successives : une flèche entre elles serait un
   contresens, d'où son absence. */
.ekrili-guide-schema--chaine .ekrili-guide-schema-etapes > li + li::before {
    content: '→';
    position: absolute;
    inset-inline-start: -0.52rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.5;
}

.ekrili-guide-schema-libelle {
    display: block;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.3;
}

.ekrili-guide-schema-detail {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-guide-schema-note {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ekrili-doux, #64748b);
}

@media (max-width: 640px) {
    .ekrili-guide-schema-etapes {
        flex-direction: column;
        gap: 0.9rem;
    }

    /* En colonne, la flèche passe au-dessus : une flèche horizontale
       désignerait la marge de gauche, c'est-à-dire rien. */
    .ekrili-guide-schema--chaine .ekrili-guide-schema-etapes > li + li::before {
        content: '↓';
        inset-inline-start: 0.75rem;
        top: -0.68rem;
        transform: none;
    }
}

/* Les pièges ne sont pas une alerte : c'est du savoir d'usage. Le ton
   visuel reste calme, sinon la page finit par crier partout. */
.ekrili-guide-pieges {
    margin-top: 1.75rem;
    padding: 0.95rem 1.15rem;
    border-radius: 0.6rem;
    background: rgb(240 166 60 / 0.09);
}

.ekrili-guide-pieges-titre {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ekrili-ambre-sombre, #b8770f);
    margin-bottom: 0.45rem;
}

.ekrili-guide-pieges ul {
    margin: 0;
    padding-inline-start: 1.05rem;
}

.ekrili-guide-pieges li {
    font-size: 0.9rem;
    line-height: 1.55;
}

.ekrili-guide-pieges li + li {
    margin-top: 0.4rem;
}

@media (max-width: 1024px) {
    .ekrili-guide {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
    }

    .ekrili-guide-sommaire {
        position: static;
    }
}

/* ---------- Avancement du chargement / du retour ---------- */

/* Combien de pièces restent à pointer, sans additionner les lignes de tête. */
.ekrili-avancement {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.6rem;
    background: #f2f7f7;
    border: 1px solid rgba(12, 32, 41, .08);
}

.dark .ekrili-avancement {
    background: #16262a;
    border-color: rgba(255, 255, 255, .09);
}

.ekrili-avancement-libelle {
    flex: none;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #04797d;
}

.dark .ekrili-avancement-libelle {
    color: #5fcfd3;
}

.ekrili-avancement-chiffres {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
    color: #16292d;
}

.ekrili-avancement-chiffres i {
    font-style: normal;
    font-weight: 400;
    color: #93a9ae;
    margin-inline: 0.1rem;
}

.dark .ekrili-avancement-chiffres {
    color: #eef6f7;
}

.ekrili-avancement-jauge {
    flex: 1;
    height: 6px;
    min-width: 3rem;
    border-radius: 999px;
    background: rgba(12, 32, 41, .1);
    overflow: hidden;
}

.dark .ekrili-avancement-jauge {
    background: rgba(255, 255, 255, .12);
}

.ekrili-avancement-jauge i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #02b6bc;
    transition: width 200ms ease;
}

.ekrili-avancement.est-complet .ekrili-avancement-jauge i {
    background: #3ec98f;
}

.ekrili-avancement-pourcent {
    flex: none;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: #6a7f84;
}

@media (prefers-reduced-motion: reduce) {
    .ekrili-avancement-jauge i {
        transition: none;
    }
}

/* ---------- Bon de livraison : saisie sur le lieu de l'événement ---------- */

/* Le bon porte les deux classes mais n'a pas les mêmes colonnes que les
   documents commerciaux : ses largeurs doivent donc écraser les précédentes,
   d'où le doublement de classe. Ordre réel : poignée, article, prévu, livré,
   retourné, état, observations, actions. */
/* Même règle du jeu que pour les documents commerciaux : deux jeux selon la
   présence de la poignée. Ordre métier : article, prévu, livré, retourné,
   état au retour, observations. */

/* Jeu 1 — SANS poignée. */
.ekrili-lignes-materiel:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(1) { width: 29%; }
.ekrili-lignes-materiel:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(2) { width: 9%; }
.ekrili-lignes-materiel:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(3) { width: 10%; }
.ekrili-lignes-materiel:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(4) { width: 10%; }
.ekrili-lignes-materiel:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(5) { width: 15%; }
.ekrili-lignes-materiel:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(6) { width: 18%; }

/* Jeu 2 — AVEC poignée. */
.ekrili-lignes-materiel:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(2) { width: 29%; }
.ekrili-lignes-materiel:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(3) { width: 9%; }
.ekrili-lignes-materiel:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(4) { width: 10%; }
.ekrili-lignes-materiel:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(5) { width: 10%; }
.ekrili-lignes-materiel:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(6) { width: 15%; }
.ekrili-lignes-materiel:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(7) { width: 18%; }

/* Le bon se remplit sur un téléphone, debout, dans un camion (§11). Le
   tableau devient alors une pile de cartes : plus de défilement latéral,
   des champs atteignables au pouce. */
@media (max-width: 900px) {
    .ekrili-lignes-materiel table,
    .ekrili-lignes-materiel thead,
    .ekrili-lignes-materiel tbody,
    .ekrili-lignes-materiel tr,
    .ekrili-lignes-materiel td {
        display: block;
        width: auto;
        min-width: 0;
    }

    /* Les en-têtes disparaissent : chaque champ porte déjà son libellé. */
    .ekrili-lignes-materiel thead {
        display: none;
    }

    .ekrili-lignes-materiel tbody tr {
        border: 1px solid rgba(12, 32, 41, .12);
        border-radius: 0.6rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: #fbfdfd;
    }

    .dark .ekrili-lignes-materiel tbody tr {
        background: #16262a;
        border-color: rgba(255, 255, 255, .12);
    }

    .ekrili-lignes-materiel td {
        padding: 0.3rem 0;
    }

    /* Les libellés réapparaissent au-dessus de chaque champ. */
    .ekrili-lignes-materiel .fi-fo-field-label {
        display: block;
        font-size: 0.72rem;
        color: #6a7f84;
        padding-bottom: 0.15rem;
    }

    /* Cible tactile confortable : 44 px, la taille d'un pouce. En dessous,
       on rate le champ une fois sur trois debout dans un camion. */
    .ekrili-lignes-materiel input,
    .ekrili-lignes-materiel .fi-fo-select-btn {
        font-size: 1rem;
        min-height: 2.75rem;
        padding-block: 0.55rem;
    }

    /* Le libellé de l'article porte la ligne : il se lit avant les chiffres. */
    .ekrili-lignes-materiel td:first-child input {
        font-weight: 600;
    }

    /* La colonne « Prévu » ne se saisit pas au retour : elle rappelle. */
    .ekrili-lignes-materiel .fi-fo-field-wrp-helper-text {
        font-size: 0.75rem;
    }
}

/* ---------- Compteurs − / + des quantités ---------- */

/* Ajoutés par `ekrili-terrain.js` sous 900 px seulement : au bureau, ils
   élargiraient les colonnes sans rien apporter. */
.ekrili-pas {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.ekrili-pas input {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.ekrili-pas-btn {
    flex: none;
    width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(2, 182, 188, .35);
    background: #f0f7f7;
    color: #04797d;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    /* Empêche le zoom et la sélection sur appui répété. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.ekrili-pas-btn:active {
    background: #02b6bc;
    border-color: #02b6bc;
    color: #ffffff;
}

.ekrili-pas-btn:focus-visible {
    outline: 2px solid #02b6bc;
    outline-offset: 2px;
}

.dark .ekrili-pas-btn {
    background: #17272b;
    border-color: rgba(2, 182, 188, .4);
    color: #5fcfd3;
}

/* ---------- Récapitulatif des totaux d'un document ---------- */

.ekrili-totaux {
    max-width: 26rem;
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
}

.ekrili-totaux > div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid rgba(12, 32, 41, .07);
}

.ekrili-totaux > div:last-child {
    border-bottom: none;
}

.ekrili-totaux dt {
    font-size: 0.85rem;
    color: #55696e;
}

/* La précision d'un rang — « à la facturation », « hors net à payer » —
   passe sous son libellé plutôt qu'à sa suite entre parenthèses : la
   colonne est étroite, et une parenthèse qui repasse à la ligne donnait à
   un montant secondaire la hauteur du total. */
.ekrili-totaux dt em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    line-height: 1.2;
    color: #8ea0a5;
}

.ekrili-totaux dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #16292d;
}

/* Le total TTC est le chiffre que l'on cherche du regard. */
.ekrili-totaux .est-fort {
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-top: 2px solid rgba(2, 182, 188, .5);
    border-bottom: none;
}

.ekrili-totaux .est-fort dt {
    font-weight: 700;
    color: #04797d;
    font-size: 0.95rem;
}

.ekrili-totaux .est-fort dd {
    font-size: 1.15rem;
    font-weight: 800;
    color: #04797d;
}

.dark .ekrili-totaux > div {
    border-bottom-color: rgba(255, 255, 255, .09);
}

.dark .ekrili-totaux dt {
    color: #93a9ae;
}

.dark .ekrili-totaux dd {
    color: #eef6f7;
}

.dark .ekrili-totaux .est-fort dt,
.dark .ekrili-totaux .est-fort dd {
    color: #5fcfd3;
}

/* ---------- Demandes de devis : lecture des données du site ---------- */

.ekrili-tableau-lecture table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ekrili-tableau-lecture thead th {
    text-align: start;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a7f84;
    font-weight: 600;
    padding: 0 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(12, 32, 41, .1);
}

.ekrili-tableau-lecture td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(12, 32, 41, .06);
    color: #16292d;
}

.ekrili-tableau-lecture .nombre {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ekrili-tableau-lecture tfoot td {
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid rgba(12, 32, 41, .12);
}

.dark .ekrili-tableau-lecture td {
    color: #dbe7e9;
    border-bottom-color: rgba(255, 255, 255, .08);
}

.dark .ekrili-tableau-lecture thead th {
    border-bottom-color: rgba(255, 255, 255, .12);
    color: #8ba3a9;
}

.dark .ekrili-tableau-lecture tfoot td {
    border-top-color: rgba(255, 255, 255, .16);
}

.ekrili-note,
.ekrili-capture-intro {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6a7f84;
}

.ekrili-vide {
    font-size: 0.85rem;
    color: #6a7f84;
    font-style: italic;
}

/* Reprise lisible de ce que le client a saisi sur le site */
.ekrili-capture-intro {
    margin: 0 0 1.25rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 3px solid #02b6bc;
}

.ekrili-capture section + section {
    margin-top: 1.4rem;
}

.ekrili-capture h4 {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #04797d;
    margin-bottom: 0.6rem;
}

.dark .ekrili-capture h4 {
    color: #5fcfd3;
}

.ekrili-capture dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.15rem 1.5rem;
}

.ekrili-capture dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(12, 32, 41, .06);
}

.dark .ekrili-capture dl > div {
    border-bottom-color: rgba(255, 255, 255, .08);
}

.ekrili-capture dt {
    font-size: 0.82rem;
    color: #6a7f84;
    flex: none;
}

.ekrili-capture dd {
    font-size: 0.86rem;
    font-weight: 600;
    color: #16292d;
    text-align: end;
    margin: 0;
    overflow-wrap: anywhere;
}

.dark .ekrili-capture dd {
    color: #eef6f7;
}

/* ── Échéancier des encaissements ─────────────────────────────────────
   Agenda daté, une section par mois. La colonne des dates est fixe et
   tabulaire : c'est elle qu'on balaie du regard, tout doit s'aligner.
   Sous 640 px, la ligne se replie en deux niveaux plutôt que de
   comprimer les montants. */

.ekrili-echeancier {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ekrili-echeancier-mois {
    border: 1px solid rgba(12, 32, 41, .08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
}

.dark .ekrili-echeancier-mois {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}

.ekrili-echeancier-mois > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: rgb(148 163 184 / 0.08);
}

.ekrili-echeancier-mois.est-alerte > header {
    background: rgb(192 72 62 / 0.1);
}

.ekrili-echeancier-mois > header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.ekrili-echeancier-mois.est-alerte > header h2 {
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-echeancier-note {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ekrili-doux, #64748b);
    max-width: 52ch;
}

.ekrili-echeancier-totaux {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-inline-start: auto;
}

.ekrili-echeancier-total {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ekrili-echeancier-cumul {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-echeancier-lignes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ekrili-echeancier-lignes > li + li {
    border-top: 1px solid rgba(12, 32, 41, .06);
}

.dark .ekrili-echeancier-lignes > li + li {
    border-top-color: rgba(255, 255, 255, .07);
}

.ekrili-echeancier-ligne {
    display: grid;
    grid-template-columns: 6rem 5rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: inherit;
}

.ekrili-echeancier-ligne:hover {
    background: rgb(148 163 184 / 0.08);
}

.ekrili-echeancier-date {
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-echeancier-nature {
    justify-self: start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
}

.ekrili-echeancier-nature.est-effet {
    background: rgb(2 182 188 / 0.14);
    color: #067a80;
}

.ekrili-echeancier-nature.est-facture {
    background: rgb(148 163 184 / 0.18);
    color: #55676c;
}

.dark .ekrili-echeancier-nature.est-effet {
    color: #5fd6da;
}

.dark .ekrili-echeancier-nature.est-facture {
    color: #a8bcc2;
}

.ekrili-echeancier-objet {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ekrili-echeancier-objet b {
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ekrili-echeancier-objet em {
    font-style: normal;
    font-size: 0.74rem;
    color: var(--ekrili-doux, #64748b);
    overflow-wrap: anywhere;
}

.ekrili-echeancier-montant {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ekrili-echeancier-vide {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ekrili-doux, #64748b);
}

@media (max-width: 640px) {
    .ekrili-echeancier-ligne {
        grid-template-columns: 1fr auto;
        row-gap: 0.2rem;
    }

    .ekrili-echeancier-date {
        grid-column: 1;
    }

    .ekrili-echeancier-nature {
        grid-column: 2;
        justify-self: end;
    }

    .ekrili-echeancier-objet {
        grid-column: 1;
    }

    .ekrili-echeancier-montant {
        grid-column: 2;
    }
}

/* ── Carte des totaux d'un document ───────────────────────────────────
   Deux corrections d'un même défaut : la carte s'étirait à la hauteur
   des conditions commerciales — d'où un grand vide sous les chiffres —
   et disparaissait dès qu'on faisait défiler la saisie. Elle s'aligne
   maintenant en haut de sa colonne et y reste accrochée. */

.ekrili-carte-totaux {
    align-self: start;
}

@media (min-width: 1024px) {
    .ekrili-carte-totaux {
        position: sticky;
        /* Sous la barre du haut, qui est elle-même fixe. */
        top: 5rem;
    }
}

/* ── Alertes du bandeau supérieur ─────────────────────────────────────
   L'espace entre le titre et la recherche était vide sur tous les
   écrans. Il porte maintenant ce qui réclame une action, chaque puce
   ouvrant sa liste déjà filtrée. Rien ne s'affiche quand tout va bien :
   c'est le silence qui informe. */

.ekrili-alertes {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
    /* Le point d'accroche du thème place le bloc en tête du bandeau, donc
       AVANT la flèche de retour. On le remet à sa suite par l'ordre de la
       boîte flexible plutôt qu'en déplaçant le point d'accroche : la flèche
       reste le premier élément, et l'espace libre revient aux puces. */
    order: 1;
    margin-inline-start: 1rem;
    margin-inline-end: auto;
}

.fi-topbar > .fi-topbar-end {
    order: 2;
}

.ekrili-alerte {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    background: rgb(148 163 184 / 0.12);
    color: #44585d;
    transition: background-color .12s ease;
}

.ekrili-alerte:hover {
    background: rgb(148 163 184 / 0.22);
}

.dark .ekrili-alerte {
    color: #c3d2d6;
    background: rgb(255 255 255 / 0.07);
}

.ekrili-alerte-nombre {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ekrili-alerte.est-alerte {
    background: rgb(192 72 62 / 0.12);
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-alerte.est-alerte:hover {
    background: rgb(192 72 62 / 0.2);
}

.ekrili-alerte.est-attente {
    background: rgb(240 166 60 / 0.16);
    color: var(--ekrili-ambre-sombre, #b8770f);
}

.ekrili-alerte.est-attente:hover {
    background: rgb(240 166 60 / 0.26);
}

/* Sous 900 px, le libellé s'efface : le nombre et sa couleur suffisent à
   savoir qu'il y a quelque chose, et la barre reste tenable. */
@media (max-width: 900px) {
    .ekrili-alerte-libelle {
        display: none;
    }
}

/* ── Pied de la barre latérale ────────────────────────────────────────
   Ancré en bas sur un écran haut, simplement à la suite sur un écran
   court : `margin-top: auto` fait les deux sans média-requête. */

.ekrili-sidebar-pied {
    margin-top: auto;
    padding: 0.85rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.ekrili-sidebar-etat {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    line-height: 1.3;
    text-decoration: none;
    color: #8ea7ad;
}

.ekrili-sidebar-etat:hover {
    color: #cfe0e3;
}

.ekrili-sidebar-etat em {
    display: block;
    font-style: normal;
    opacity: .75;
}

.ekrili-sidebar-etat-point {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 9999px;
    background: var(--ekrili-vert, #3ec98f);
}

.ekrili-sidebar-etat.est-alerte {
    color: #e79a92;
}

.ekrili-sidebar-etat.est-alerte .ekrili-sidebar-etat-point {
    background: var(--ekrili-rouge, #c0483e);
}

/* ── Profil des prochains mois (échéancier) ───────────────────────────
   Six colonnes, hauteur relative au mois le plus chargé. Les mois vides
   gardent leur place : c'est le creux qui informe. Rendu en CSS pur, sans
   bibliothèque de graphiques — six barres n'en valent pas le poids. */

.ekrili-profil {
    border: 1px solid rgba(12, 32, 41, .08);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.9rem 1rem 0.75rem;
}

.dark .ekrili-profil {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}

.ekrili-profil > header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}

.ekrili-profil > header h2 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

.ekrili-profil > header p {
    margin: 0;
    font-size: 0.74rem;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-profil ol {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ekrili-profil li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.ekrili-profil-barre {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 3.25rem;
    border-radius: 0.35rem;
    background: rgb(148 163 184 / 0.12);
    overflow: hidden;
}

.ekrili-profil-barre > span {
    display: block;
    width: 100%;
    border-radius: 0.35rem 0.35rem 0 0;
    background: linear-gradient(180deg, var(--ekrili-turquoise, #02b6bc), #017f84);
}

.ekrili-profil-mois {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-profil-montant {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: #44585d;
    overflow-wrap: anywhere;
    text-align: center;
}

.dark .ekrili-profil-montant {
    color: #b9cbd0;
}

@media (max-width: 640px) {
    .ekrili-profil ol {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0.85rem;
    }
}

/* ── Créations rapides du bandeau supérieur ───────────────────────────
   Le raccourci vivait en pied de barre latérale : sur un écran court, il
   fallait faire défiler le menu pour l'atteindre, soit l'inverse d'un
   raccourci. Une action principale visible, les autres derrière un menu —
   aligner quatre boutons de même poids aurait rendu le plus utile aussi
   discret que les trois autres. */

.ekrili-raccourcis {
    display: flex;
    align-items: center;
    order: 1;
    margin-inline-start: 0.5rem;
    flex: none;
}

.ekrili-raccourci-principal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-start-start-radius: 0.5rem;
    border-end-start-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: #052b2d;
    background: var(--ekrili-turquoise, #02b6bc);
    transition: filter .12s ease;
}

.ekrili-raccourci-menu {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.4rem;
    border-start-end-radius: 0.5rem;
    border-end-end-radius: 0.5rem;
    /* Le trait qui sépare l'action de son menu, sans casser le bloc. */
    border-inline-start: 1px solid rgba(5, 43, 45, .18);
    color: #052b2d;
    background: var(--ekrili-turquoise, #02b6bc);
    transition: filter .12s ease;
}

.ekrili-raccourci-principal:hover,
.ekrili-raccourci-menu:hover {
    filter: brightness(1.08);
}

/* Sans l'action principale — un rôle qui ne crée pas de devis — le menu
   seul reprend les deux coins. */
.ekrili-raccourcis > .ekrili-raccourci-menu:only-child,
.ekrili-raccourcis > *:first-child .ekrili-raccourci-menu {
    border-radius: 0.5rem;
    border-inline-start: none;
}

/* Sous 1100 px, le libellé cède la place : l'icône et le menu suffisent,
   et la recherche garde sa largeur. */
@media (max-width: 1100px) {
    .ekrili-raccourci-principal span {
        display: none;
    }

    .ekrili-raccourci-principal {
        padding-inline: 0.55rem;
    }
}

/* ── Avertissement de doublon (fiche client) ──────────────────────────
   Sous le champ d'adresse, en ambre : c'est un doute à lever, pas une
   erreur de saisie. Le rouge est réservé à ce qui empêche d'enregistrer. */

.ekrili-doublon {
    display: block;
    color: var(--ekrili-ambre-sombre, #b8770f);
    font-weight: 600;
    line-height: 1.4;
}

/* ══ À approvisionner (§9.3) ══════════════════════════════════════════
   Même grammaire que l'échéancier : des sections empilées, une ligne par
   besoin. La différence tient à la case à cocher en tête de ligne — cet
   écran n'est pas une lecture, c'est une sélection avant un geste. */

.ekrili-approvisionnement {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ekrili-appro-groupe {
    border: 1px solid rgba(12, 32, 41, .08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
}

.dark .ekrili-appro-groupe {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}

.ekrili-appro-groupe > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: rgb(148 163 184 / 0.08);
}

.ekrili-appro-groupe.est-alerte > header {
    background: rgb(192 72 62 / 0.1);
}

/* Les lignes sans fournisseur ne sont pas une erreur, mais elles ne
   partiront pas : l'ambre le dit sans dramatiser. */
.ekrili-appro-groupe.est-orphelin > header {
    background: rgb(217 138 26 / 0.12);
}

.ekrili-appro-groupe > header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.ekrili-appro-groupe.est-alerte > header h2 {
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-appro-note {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ekrili-doux, #64748b);
    max-width: 60ch;
}

.ekrili-appro-totaux {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-inline-start: auto;
}

.ekrili-appro-total {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ekrili-appro-tout {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    color: var(--ekrili-doux, #64748b);
    cursor: pointer;
    user-select: none;
}

.ekrili-appro-lignes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ekrili-appro-lignes > li + li {
    border-top: 1px solid rgba(12, 32, 41, .06);
}

.dark .ekrili-appro-lignes > li + li {
    border-top-color: rgba(255, 255, 255, .07);
}

.ekrili-appro-ligne {
    display: grid;
    grid-template-columns: 1.25rem 8.5rem 1fr 5.5rem 9rem 6rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.ekrili-appro-ligne.est-inerte {
    cursor: default;
}

.ekrili-appro-ligne:hover {
    background: rgb(148 163 184 / 0.08);
}

.ekrili-appro-lignes > li.est-urgent {
    box-shadow: inset 3px 0 0 var(--ekrili-rouge, #c0483e);
}

/* Le motif dit POURQUOI la ligne est là, et c'est ce qui décide de la
   quantité : un article à commander l'est en entier, un manque de parc
   seulement à hauteur du manque. */
.ekrili-appro-motif {
    justify-self: start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    white-space: nowrap;
}

.ekrili-appro-motif.est-toujours {
    background: rgb(2 182 188 / 0.14);
    color: #067a80;
}

.ekrili-appro-motif.est-stock {
    background: rgb(217 138 26 / 0.16);
    color: #a8650c;
}

.ekrili-appro-motif.est-manuel {
    background: rgb(148 163 184 / 0.18);
    color: #55676c;
}

.dark .ekrili-appro-motif.est-toujours { color: #5fd6da; }
.dark .ekrili-appro-motif.est-stock { color: #e8ac4e; }
.dark .ekrili-appro-motif.est-manuel { color: #a8bcc2; }

.ekrili-appro-objet {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ekrili-appro-objet b {
    font-size: 0.88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ekrili-appro-objet em {
    font-style: normal;
    font-size: 0.74rem;
    color: var(--ekrili-doux, #64748b);
    overflow-wrap: anywhere;
}

.ekrili-appro-quantite {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ekrili-appro-quantite em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-appro-limite {
    font-size: 0.74rem;
    text-align: end;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-appro-limite b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ekrili-appro-limite b.est-depasse {
    color: var(--ekrili-rouge, #c0483e);
}

.ekrili-appro-cout {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ekrili-appro-vide {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--ekrili-doux, #64748b);
}

/* Sur téléphone, six colonnes deviennent illisibles : la ligne se replie
   en deux rangs, la case et le motif restant en tête. */
@media (max-width: 820px) {
    .ekrili-appro-ligne {
        grid-template-columns: 1.25rem 1fr auto;
        row-gap: 0.25rem;
    }

    .ekrili-appro-motif { grid-column: 2; justify-self: start; }
    .ekrili-appro-quantite { grid-column: 3; }
    .ekrili-appro-objet { grid-column: 2 / -1; }
    .ekrili-appro-limite { grid-column: 2; text-align: start; }
    .ekrili-appro-cout { grid-column: 3; }
}

/* ══ Lignes d'une commande fournisseur (§9.3) ═════════════════════
   Sept colonnes métier : Article · Désignation · Qté · Unité · Coût
   unitaire · Reçu · Total. Mêmes deux jeux que les documents de vente,
   selon que la poignée de réordonnancement est là ou non — ici elle ne
   l'est jamais (le répéteur n'est pas réordonnable), mais la colonne
   d'actions, elle, disparaît sur une commande engagée. */
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(1) { width: 18%; }
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(2) { width: 27%; }
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(3) { width: 8%; }
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(4) { width: 8%; }
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(5) { width: 13%; }
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(6) { width: 8%; }
.ekrili-lignes-achat:not(:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell)) :is(th, td):nth-child(7) { width: 13%; }

.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(2) { width: 18%; }
.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(3) { width: 27%; }
.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(4) { width: 8%; }
.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(5) { width: 8%; }
.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(6) { width: 13%; }
.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(7) { width: 8%; }
.ekrili-lignes-achat:has(thead th:first-child.fi-fo-table-repeater-empty-header-cell) :is(th, td):nth-child(8) { width: 13%; }

/* ══ Note de bas de section, après une rangée de tuiles ═══════════════
   La grille des tuiles n'a pas de marge basse : une note collée juste
   dessous se touchait presque. Elle prend ici son air et descend d'un
   demi-cran en taille — c'est un avertissement de lecture, pas un
   chiffre : il n'a pas à peser autant que ce qu'il commente. */

.ekrili-situation + .ekrili-imputation-reste,
.ekrili-situation + .ekrili-situation-note,
.ekrili-situation-note + .ekrili-imputation-reste,
.ekrili-situation-note + .ekrili-situation-note {
    margin-top: 0.85rem;
}

.ekrili-situation ~ .ekrili-imputation-reste {
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ==========================================================================
   ÉCRAN DE PILOTAGE (§9.4, lot 5)

   Pas de canvas : les séries en jeu tiennent en douze points et
   l'application porte déjà une grammaire de barres — celle du profil de
   trésorerie. La réutiliser garde les chiffres sélectionnables, trouvables
   au Ctrl+F et lisibles sur téléphone, ce qu'un graphique dessiné en JS
   n'aurait permis pour aucun.
   ========================================================================== */

.ekrili-pilotage {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------- Cadrage ---------- */

.ekrili-pilotage-cadrage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ekrili-pilotage-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ekrili-pilotage-onglets button {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(12, 32, 41, .12);
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ekrili-doux, #64748b);
    cursor: pointer;
    /* 2,25 rem de haut au doigt : même règle que les compteurs du lot 2. */
    min-height: 2.25rem;
}

.dark .ekrili-pilotage-onglets button {
    border-color: rgba(255, 255, 255, .14);
}

.ekrili-pilotage-onglets button:hover {
    border-color: var(--ekrili-turquoise, #02b6bc);
}

.ekrili-pilotage-onglets button.est-actif {
    background: var(--ekrili-turquoise, #02b6bc);
    border-color: var(--ekrili-turquoise, #02b6bc);
    color: #fff;
}

.ekrili-pilotage-libelle {
    margin: 0;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--ekrili-doux, #64748b);
}

/* ---------- Blocs ---------- */

.ekrili-pilotage-bloc {
    border: 1px solid rgba(12, 32, 41, .08);
    border-radius: var(--ekrili-carte-rayon, 0.75rem);
    background: #fff;
    padding: 1.1rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dark .ekrili-pilotage-bloc {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}

.ekrili-pilotage-bloc > header h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.ekrili-pilotage-bloc > header p {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-pilotage-bloc h3 {
    font-size: 0.88rem;
    font-weight: 650;
    margin: 0 0 0.55rem;
}

.ekrili-pilotage-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.4rem;
}

.ekrili-pilotage-vide {
    font-size: 0.85rem;
    color: var(--ekrili-doux, #64748b);
}

/* ---------- Le sort des devis ---------- */

.ekrili-pilotage-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--ekrili-doux, #64748b);
}

.ekrili-pilotage-sort b {
    font-variant-numeric: tabular-nums;
    color: inherit;
}

/* ---------- Ventilations ---------- */

.ekrili-pilotage-repartition {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ekrili-pilotage-repartition-tete {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.ekrili-pilotage-repartition-tete > span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ekrili-pilotage-repartition-barre {
    display: block;
    height: 0.4rem;
    margin: 0.2rem 0 0.15rem;
    border-radius: 999px;
    background: rgb(148 163 184 / 0.16);
    overflow: hidden;
}

.ekrili-pilotage-repartition-barre > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ekrili-turquoise, #02b6bc), #017f84);
}

.ekrili-pilotage-repartition-part {
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--ekrili-doux, #64748b);
}

/* ---------- Tableaux ---------- */

.ekrili-pilotage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ekrili-pilotage-table th {
    text-align: start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ekrili-doux, #64748b);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(12, 32, 41, .1);
}

.dark .ekrili-pilotage-table th {
    border-bottom-color: rgba(255, 255, 255, .12);
}

.ekrili-pilotage-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(12, 32, 41, .05);
    vertical-align: top;
}

.dark .ekrili-pilotage-table td {
    border-bottom-color: rgba(255, 255, 255, .06);
}

.ekrili-pilotage-table td.fi-align-end,
.ekrili-pilotage-table th.fi-align-end {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ekrili-pilotage-table .ekrili-situation-detail {
    display: block;
    font-size: 0.74rem;
}

/* ---------- Profil sur douze mois ----------

   Le profil de l'échéancier est figé à six colonnes : il montre six mois à
   venir. Ici la série va jusqu'à douze, d'où la variante pilotée par une
   variable plutôt qu'une seconde grammaire de barres. */

.ekrili-profil--large ol {
    grid-template-columns: repeat(var(--ekrili-colonnes, 6), minmax(0, 1fr));
}

@media (max-width: 900px) {
    /* Douze colonnes sur un téléphone donnent des barres d'un millimètre.
       Deux rangées de six restent comparables entre elles. */
    .ekrili-profil--large ol {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ekrili-profil--large ol {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}