@import '_content/Wiip.Platform.Web/Wiip.Platform.Web.il65hsx3c6.bundle.scp.css';

/* /Components/Designer/EquipmentsList.razor.rz.scp.css */
/* Champ de recherche : l'icône et le champ sont soudés visuellement (bordure interne supprimée). */
.equipment-search .input-group-text[b-3ubpd1unn8] {
    background-color: #fff;
    border-right: 0;
    color: var(--brand-gray);
}

.equipment-search .form-control[b-3ubpd1unn8] {
    border-left: 0;
}

/* Le bouton d'effacement fait partie du même cadre : sa bordure grise foncée
   d'origine (btn-outline-secondary) tranchait avec celle du champ. */
.equipment-search .btn[b-3ubpd1unn8] {
    border-color: #ddd;
    border-left: 0;
    color: var(--brand-gray);
}

.equipment-search .form-control:focus[b-3ubpd1unn8] {
    box-shadow: none;
}

/* Seul le champ réagit au focus dans Bootstrap : l'icône et le bouton
   garderaient leur bordure au repos, d'où deux gris différents sur le même
   cadre. On applique la couleur de focus (celle de .form-control:focus dans
   app.css) à l'ensemble du groupe. */
.equipment-search:focus-within .input-group-text[b-3ubpd1unn8],
.equipment-search:focus-within .form-control[b-3ubpd1unn8],
.equipment-search:focus-within .btn[b-3ubpd1unn8] {
    border-color: rgba(90, 90, 90, 0.4);
}

/* Les navigateurs WebKit/Blink ajoutent leur propre croix d'effacement dans un
   champ de type "search" : elle ferait doublon avec le bouton d'effacement du
   groupe, qui est le seul stylé selon la charte. */
.equipment-search .form-control[b-3ubpd1unn8]::-webkit-search-cancel-button {
    display: none;
}

/* Grille de vignettes : autant de colonnes que la largeur du panneau latéral en
   autorise, avec une largeur de carte plancher pour que la vignette reste lisible.
   Hauteur bornée pour que le panneau de propriétés de l'objet sélectionné reste
   atteignable sans faire défiler tout le catalogue. */
.equipment-grid[b-3ubpd1unn8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
    max-height: 45vh;
    overflow-y: auto;
}

/* Chaque carte se glisse dans la scène 3D pour y déposer l'équipement ;
   le curseur « main » l'indique et la sélection de texte est désactivée
   pour ne pas interférer avec le glissement. */
.equipment-item[b-3ubpd1unn8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    text-align: center;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--brand-radius);
    transition: border-color var(--brand-transition), box-shadow var(--brand-transition);
    cursor: grab;
    user-select: none;
}

.equipment-item:hover[b-3ubpd1unn8] {
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow);
}

.equipment-item:active[b-3ubpd1unn8] {
    cursor: grabbing;
}

/* Accès à la fiche, en superposition dans le coin de la carte : la grille est trop
   étroite pour lui donner sa propre ligne. Masqué au repos pour ne pas encombrer la
   vignette, il reste atteignable au clavier grâce à :focus-within. */
.equipment-details[b-3ubpd1unn8] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-primary);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--brand-transition);
    cursor: pointer;
}

.equipment-item:hover .equipment-details[b-3ubpd1unn8],
.equipment-item:focus-within .equipment-details[b-3ubpd1unn8] {
    opacity: 1;
}

.equipment-thumbnail[b-3ubpd1unn8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    overflow: hidden;
}

.equipment-thumbnail img[b-3ubpd1unn8] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.equipment-thumbnail i[b-3ubpd1unn8] {
    font-size: 1.75rem;
    color: var(--brand-gray);
}

/* min-width: 0 est nécessaire pour que les enfants puissent être tronqués :
   sans cela, un élément flex refuse de se réduire sous la largeur de son contenu. */
.equipment-info[b-3ubpd1unn8] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.125rem;
}

/* Les noms d'équipements sont longs : on les limite à deux lignes pour garder
   des hauteurs de carte homogènes dans la grille. Ils forment souvent un seul mot
   insécable (« QF_Charvet_PRO800_Annexes_… ») : sans overflow-wrap, ce mot déborde
   de la carte au lieu d'être coupé, et l'ellipsis du line-clamp ne s'affiche pas. */
.equipment-name[b-3ubpd1unn8] {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand-text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.equipment-reference[b-3ubpd1unn8] {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--brand-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Rooms/RoomEditor.razor.rz.scp.css */
.room-editor-canvas[b-oxb5jaugqi] {
    overflow: auto;
    background-color: #ffffff;
    width: fit-content;
    max-width: 100%;
}

.room-editor-svg[b-oxb5jaugqi] {
    display: block;
    touch-action: none;
    user-select: none;
    outline: none;
}

.room-editor-number[b-oxb5jaugqi] {
    width: 8rem;
}

.room-editor-length-group[b-oxb5jaugqi] {
    width: 14rem;
}

.room-editor-grid-line[b-oxb5jaugqi] {
    stroke: #eef0f2;
    stroke-width: 1;
}

.room-editor-room[b-oxb5jaugqi] {
    fill: #f4f6f8;
    stroke: #495057;
    stroke-width: 2;
}

.room-editor-room-dimmed[b-oxb5jaugqi] {
    opacity: 0.35;
}

.room-editor-edge-selected[b-oxb5jaugqi] {
    stroke: #fd7e14;
    stroke-width: 4;
    stroke-linecap: round;
}

.room-editor-vertex[b-oxb5jaugqi] {
    fill: #ffffff;
    stroke: #495057;
    stroke-width: 2;
}

.room-editor-vertex-selected[b-oxb5jaugqi] {
    fill: #fd7e14;
    stroke: #fd7e14;
}

/* Les cotes sont émises en MarkupString (balise <text> réservée par Razor) : elles ne portent
   pas l'attribut du CSS isolé, d'où le sélecteur ::deep ancré sur le svg parent. */
.room-editor-svg[b-oxb5jaugqi]  .room-editor-dimension {
    font-size: 12px;
    fill: #6c757d;
}

.room-editor-svg[b-oxb5jaugqi]  .room-editor-dimension-selected {
    fill: #fd7e14;
    font-weight: 600;
}

.room-editor-island[b-oxb5jaugqi] {
    fill: var(--brand-primary, #0d6efd);
    fill-opacity: 0.12;
    stroke: var(--brand-primary, #0d6efd);
    stroke-opacity: 0.4;
    stroke-width: 1;
}

.room-editor-island-selected[b-oxb5jaugqi] {
    fill-opacity: 0.22;
    stroke-opacity: 0.9;
    stroke-width: 2;
}

.room-editor-island-line[b-oxb5jaugqi] {
    fill: none;
    stroke: var(--brand-primary, #0d6efd);
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

.room-editor-island-line-selected[b-oxb5jaugqi] {
    stroke-width: 3;
}

.room-editor-island-dimension-line[b-oxb5jaugqi] {
    stroke: #6c757d;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.room-editor-island-dimension-line-selected[b-oxb5jaugqi] {
    stroke: #fd7e14;
    stroke-width: 2;
}

.room-editor-draft[b-oxb5jaugqi] {
    fill: none;
    stroke: #198754;
    stroke-width: 2;
}

.room-editor-draft-start[b-oxb5jaugqi] {
    fill: #ffffff;
    stroke: #198754;
    stroke-width: 2;
}

.room-editor-draft-preview[b-oxb5jaugqi] {
    stroke: #198754;
    stroke-width: 2;
    stroke-dasharray: 4 4;
}
/* /Components/Search/GlobalSearch.razor.rz.scp.css */
/* Recherche globale de la barre du haut (maquette 2a) : mêmes encre, sable et filets que
   le reste de la coquille, la palette empruntant l'ombre portée des surfaces flottantes. */

/* ── Déclencheur ──────────────────────────────────────────────────────── */

.search-trigger[b-i583372c1j] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    min-width: 210px;
    padding: 0 8px 0 10px;
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    color: var(--brand-gray);
    font: 400 12px/1 var(--brand-font);
    cursor: pointer;
    transition: border-color var(--brand-transition), background var(--brand-transition);
}

.search-trigger:hover[b-i583372c1j] {
    background: white;
    border-color: var(--brand-gray);
}

.search-trigger-text[b-i583372c1j] {
    flex: 1;
    text-align: left;
}

.search-trigger kbd[b-i583372c1j],
.search-field kbd[b-i583372c1j] {
    background: white;
    border: 1px solid var(--brand-border-light);
    border-radius: 3px;
    padding: 2px 5px;
    color: var(--brand-gray);
    font: 500 10px/1 var(--brand-font-mono);
}

/* ── Palette ──────────────────────────────────────────────────────────── */

.search-backdrop[b-i583372c1j] {
    position: fixed;
    inset: 0;
    background: rgba(22, 19, 15, 0.32);
    z-index: 1000;
}

.search-panel[b-i583372c1j] {
    position: fixed;
    /* Posée dans le tiers haut : le regard y est déjà, et la liste s'allonge vers le bas
       sans jamais déborder de la fenêtre. */
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 32px));
    background: white;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-large);
    box-shadow: 0 24px 48px -16px rgba(22, 19, 15, 0.32);
    z-index: 1001;
    overflow: hidden;
}

.search-field[b-i583372c1j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 52px;
    border-bottom: 1px solid var(--brand-hairline);
    color: var(--brand-gray);
}

.search-field input[b-i583372c1j] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--brand-black);
    font: 400 15px/1.2 var(--brand-font);
}

.search-field input[b-i583372c1j]::placeholder {
    color: var(--brand-gray);
}

.search-results[b-i583372c1j] {
    max-height: min(420px, calc(100vh - 200px));
    overflow-y: auto;
    padding: 6px 0 8px;
}

.search-group[b-i583372c1j] {
    padding: 10px 14px 4px;
    color: var(--brand-gray);
    font: 600 10px/1 var(--brand-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-result[b-i583372c1j] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 14px;
    color: var(--brand-black);
    text-decoration: none;
}

/* Une seule ligne active à la fois, que la souris et les flèches désignent de la même
   façon : le survol déplace la sélection plutôt que de peindre une seconde surbrillance. */
.search-result.selected[b-i583372c1j] {
    background: var(--brand-primary-tint);
    box-shadow: inset 2px 0 0 var(--brand-primary);
}

.search-result-label[b-i583372c1j] {
    font: 500 13px/1.3 var(--brand-font);
}

.search-result-detail[b-i583372c1j] {
    flex: 1;
    text-align: right;
    color: var(--brand-gray);
    font: 400 11px/1.3 var(--brand-font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-message[b-i583372c1j] {
    margin: 0;
    padding: 18px 14px;
    color: var(--brand-gray);
    font: 400 12px/1.4 var(--brand-font);
    text-align: center;
}

.search-error[b-i583372c1j] {
    color: var(--brand-primary-dark);
}
/* /Layout/IconRailShell.razor.rz.scp.css */
/* Coquille « rail d'icônes » (maquette 2a) : rail encre de 78 px à gauche, barre du haut
   blanche de 58 px, contenu sur toute la largeur restante. */

.page[b-wo4hltfqfe] {
    display: flex;
    min-height: 100vh;
}

/* ── Rail ─────────────────────────────────────────────────────────────── */

.rail[b-wo4hltfqfe] {
    width: 78px;
    flex: none;
    background: var(--brand-rail-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
}

.rail-collapsed .rail[b-wo4hltfqfe] {
    display: none;
}

.rail-logo[b-wo4hltfqfe] {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: var(--brand-primary);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    overflow: hidden;
}

.rail-logo img[b-wo4hltfqfe] {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}

.rail[b-wo4hltfqfe]  .rail-link {
    width: 62px;
    padding: 8px 2px;
    margin-bottom: 2px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--brand-rail-muted);
    text-decoration: none;
    transition: background var(--brand-transition), color var(--brand-transition);
}

.rail[b-wo4hltfqfe]  .rail-link:hover {
    background: var(--brand-rail-hover);
    color: var(--brand-rail-foreground);
    text-decoration: none;
}

.rail[b-wo4hltfqfe]  .rail-link.active {
    background: var(--brand-primary);
    color: white;
}

.rail[b-wo4hltfqfe]  .rail-label {
    font: 500 8.5px/1.15 var(--brand-font);
    text-align: center;
    letter-spacing: 0.01em;
}

/* ── Barre du haut ────────────────────────────────────────────────────── */

main[b-wo4hltfqfe] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* La maquette 2a pose tout le contenu sur blanc, bord à bord ; les pages pleine
       largeur s'y fondent sans couture. */
    background: white;
}

.topbar[b-wo4hltfqfe] {
    height: 58px;
    flex: none;
    background: white;
    border-bottom: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.identity[b-wo4hltfqfe] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar[b-wo4hltfqfe] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-black);
    color: var(--brand-rail-foreground);
    display: grid;
    place-items: center;
    font: 600 11px/1 var(--brand-font);
}

.identity-text[b-wo4hltfqfe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.identity-name[b-wo4hltfqfe] {
    font: 600 13px/1.2 var(--brand-font);
    color: var(--brand-black);
}

.identity-role[b-wo4hltfqfe] {
    font: 400 11px/1.2 var(--brand-font);
    color: var(--brand-gray);
}

.separator[b-wo4hltfqfe] {
    width: 1px;
    height: 26px;
    background: var(--brand-border-light);
}

.breadcrumb-trail[b-wo4hltfqfe] {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.breadcrumb-trail .crumb-page[b-wo4hltfqfe] {
    color: var(--brand-black);
}

.spacer[b-wo4hltfqfe] {
    flex: 1;
}

/* ── Contenu ──────────────────────────────────────────────────────────── */

/* Bord à bord : le padding du bas vient du wrapper pf-page de chaque page. */
.content[b-wo4hltfqfe] {
    flex: 1;
}
/* /Pages/Dossiers/Designer.razor.rz.scp.css */
.designer-container[b-ijl8ujx4wn] {
    display: flex;
    /* Sous la barre du haut de la coquille (58 px) ; la zone de contenu n'a plus de
       padding à compenser — la vue occupe le bord à bord nativement. */
    height: calc(100vh - 58px);
    overflow: hidden;
}

.designer-viewer[b-ijl8ujx4wn] {
    flex: 1;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}

#designer-canvas[b-ijl8ujx4wn] {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

.designer-toolbar[b-ijl8ujx4wn] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    gap: 0.5rem;
}

/* Indicateur discret de la sauvegarde automatique, opposé à la barre d'outils pour
   ne pas la recouvrir. Il n'apparaît qu'après la première modification de la scène. */
.designer-save-state[b-ijl8ujx4wn] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--brand-gray);
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
}

/* Résultat de la génération du devis, centré en haut du viewer : il annonce une action
   qui vient d'aboutir et doit être vu sans masquer la barre d'outils ni l'indicateur
   de sauvegarde, placés aux deux coins. */
.designer-quote-result[b-ijl8ujx4wn] {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    box-shadow: var(--brand-shadow);
}

/* Panneau de figeage du devis, sous la barre d'outils dont il prolonge le bouton : il
   demande une décision commerciale irréversible et doit être lu avant d'être validé,
   d'où une carte pleine plutôt qu'un bandeau. */
.designer-issue-panel[b-ijl8ujx4wn] {
    position: absolute;
    top: 4rem;
    right: 1rem;
    z-index: 120;
    width: 22rem;
    max-width: calc(100% - 2rem);
}

.designer-sidebar[b-ijl8ujx4wn] {
    width: 320px;
    min-width: 320px;
    background-color: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    overflow-y: auto;
}

/* Les sections sont repliées par Blazor, pas par le JavaScript de Bootstrap : le
   composant ne pose que les classes finales (show / collapsed). Sans son script,
   Bootstrap ne joue aucune transition — le repli est immédiat, ce qui convient à un
   panneau qui suit la sélection dans la scène. */
.designer-sidebar[b-ijl8ujx4wn]  .accordion-button {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.designer-sidebar[b-ijl8ujx4wn]  .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.designer-sidebar[b-ijl8ujx4wn]  .accordion-body {
    padding: 1rem 1.25rem 1.25rem;
}

/* Le total porté par l'en-tête de la nomenclature ne se met pas en gras avec le titre. */
.designer-sidebar[b-ijl8ujx4wn]  .designer-section-summary {
    font-weight: 400;
}

.designer-sidebar[b-ijl8ujx4wn]  .material-list-line + .material-list-line {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Libellé à gauche, valeur à droite, sur une ligne : un dl par défaut les empile. */
.designer-sidebar[b-ijl8ujx4wn]  .material-list-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.125rem 0.75rem;
}

.designer-sidebar[b-ijl8ujx4wn]  .material-list-totals dt {
    font-weight: inherit;
}

.designer-sidebar[b-ijl8ujx4wn]  .material-list-totals dd {
    margin: 0;
    text-align: right;
}
/* /Pages/Equipements/FicheEquipement.razor.rz.scp.css */
/* Fiche produit (maquette 2a) : identité et caractéristiques côte à côte en rangées
   clé-valeur, aperçu et options dans une colonne fixe à droite — trois colonnes bord à
   bord séparées par des filets, sans cartes. */

.equipment-grid[b-bke2z5hg3k] {
    display: grid;
    grid-template-columns: 1fr 1fr 420px;
    align-items: stretch;
    border-bottom: 1px solid var(--brand-border);
}

.equipment-col[b-bke2z5hg3k] {
    border-right: 1px solid var(--brand-border-light);
}

@media (max-width: 1399px) {
    .equipment-grid[b-bke2z5hg3k] {
        grid-template-columns: 1fr 1fr;
    }

    .equipment-side[b-bke2z5hg3k] {
        grid-column: 1 / -1;
        border-top: 1px solid var(--brand-border-light);
    }
}

@media (max-width: 767px) {
    .equipment-grid[b-bke2z5hg3k] {
        grid-template-columns: 1fr;
    }

    .equipment-col[b-bke2z5hg3k] {
        border-right: none;
        border-bottom: 1px solid var(--brand-border-light);
    }
}

.summary-line[b-bke2z5hg3k] {
    font: 400 12px/1.3 var(--brand-font);
    color: var(--brand-gray);
}

.product-link[b-bke2z5hg3k] {
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* Zone d'aperçu : la vignette ou la visionneuse, bordée du filet des sections. */
.preview-body[b-bke2z5hg3k] {
    border-bottom: 1px solid var(--brand-border-light);
    background: var(--brand-gray-light);
}

/* Onglets Vignette / Modèle 3D, rendus comme les titres de section : petites capitales
   mono dans le bandeau sable, l'onglet actif en encre. */
.preview-tabs[b-bke2z5hg3k] {
    display: flex;
    gap: 16px;
}

.preview-tabs[b-bke2z5hg3k]  .nav-link,
.preview-tabs .nav-link[b-bke2z5hg3k] {
    border: none;
    background: transparent;
    padding: 0;
    font: 600 9px/1 var(--brand-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-gray);
    cursor: pointer;
}

.preview-tabs .nav-link.active[b-bke2z5hg3k] {
    color: var(--brand-black);
}

.preview-tabs .nav-link:hover[b-bke2z5hg3k] {
    color: var(--brand-black);
}
/* /Pages/Home.razor.rz.scp.css */
/* Bande d'indicateurs du tableau de bord (maquette 2a) : les compteurs par statut en
   cellules bordées, l'encours commercial en tuile encre à droite — le tout bord à bord,
   sans carte. */

.kpi-strip[b-yqc1g2p33g] {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--brand-border);
}

.kpi-cell[b-yqc1g2p33g] {
    flex: 1;
    min-width: 150px;
    padding: 14px 18px;
    border-right: 1px solid var(--brand-border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: background var(--brand-transition);
}

.kpi-cell:hover[b-yqc1g2p33g] {
    background: var(--brand-surface);
    text-decoration: none;
    color: inherit;
}

.kpi-value[b-yqc1g2p33g] {
    font: 700 30px/1 var(--brand-font);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--brand-black);
}

.kpi-value-none[b-yqc1g2p33g] {
    font: 500 20px/1 var(--brand-font);
    color: var(--brand-gray);
}

.kpi-text[b-yqc1g2p33g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-label[b-yqc1g2p33g] {
    font: 600 9.5px/1 var(--brand-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-gray);
}

.kpi-unit[b-yqc1g2p33g] {
    font: 400 11px/1 var(--brand-font);
    color: var(--brand-gray);
}

.kpi-pending[b-yqc1g2p33g] {
    width: 300px;
    flex: none;
    background: var(--brand-rail-background);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.kpi-pending-label[b-yqc1g2p33g] {
    font: 600 9.5px/1 var(--brand-font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-rail-muted);
}

.kpi-pending-value[b-yqc1g2p33g] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--brand-rail-foreground);
    margin-top: 5px;
}

.kpi-pending-unit[b-yqc1g2p33g] {
    font-size: 13px;
    color: var(--brand-accent);
}

.kpi-pending-detail[b-yqc1g2p33g] {
    font: 400 11px/1.3 var(--brand-font);
    color: var(--brand-rail-muted);
}

/* Sur un écran étroit, la tuile encre passe sous les compteurs et prend la largeur. */
@media (max-width: 991px) {
    .kpi-pending[b-yqc1g2p33g] {
        width: 100%;
    }
}

/* Titres des rangées de section. */
.section-title[b-yqc1g2p33g] {
    font-size: 12.5px;
    color: var(--brand-black);
}

/* La section des devis suit le tableau des dossiers : un filet plus marqué la sépare. */
.section-top[b-yqc1g2p33g] {
    border-top: 1px solid var(--brand-border);
}