/* ============================================================================
NATURES D'HEURES — le référentiel de calcul : tableau groupé par famille,
vue par plage d'identifiants, analyse, et la fiche avec sa formule.
Passation « design_handoff_natures » (Projet EasyTime, Design 28).
SA PROPRE FEUILLE, ET SON PROPRE DANS App.razor. La passation demandait
de concaténer à modele-erp.css ; c'est précisément ce que la découpe d'App.razor
a défait : chaque écran ajouté en queue du gabarit entrait en conflit avec tous
les autres sur la dernière ligne du fichier et sur une clé de cache commune,
jamais sur la substance.
PRÉFIXE .nat-. Trois familles de la passation ont été renommées, pour ne pas
poser un nom de GABARIT dans une feuille d'ÉCRAN — le deuxième écran qui en
aurait besoin devrait alors charger celle du premier :
.cv-lbl / .cv-avert / .cv-erreur → .nat-lbl / .nat-avert / .nat-erreur
(les deux derniers retirés le 2026-09-08 :
le bandeau d'état du gabarit .mx-blocage
les dit tous les deux, et mieux)
.mx-switch → .nat-switch, puis de nouveau .mx-switch
.mx-input-suffixe → .nat-suffixe, puis de nouveau .mx-input-suffixe
.tbl-legende → .tbl-methode (déjà dans easytime-shell.css,
même rôle : la note sous la table)
Les deux derniers ont fait l'aller-retour annoncé : « le jour où un deuxième écran
emploie l'interrupteur ou le suffixe d'unité, ils remontent dans modele-erp.css sous
leur nom .mx- ». Les paramètres généraux les employaient déjà ; ils sont remontés en
section 11 du gabarit, et cette feuille ne garde que la réserve de padding du suffixe.
AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de easytech-theme.css,
sans quoi la bascule sombre et la prochaine bascule de charte laisseraient cet
écran en arrière.
============================================================================ */
/* ---------------------------------------------------------------------------
1. TABLEAU GROUPÉ PAR FAMILLE
Le bandeau de famille remplace un sélecteur de groupe : il dit où l'on est,
et la facette « Famille » du panneau filtre déjà.
--------------------------------------------------------------------------- */
.nat-cadre { background: var(--et-surface); overflow-x: auto; }
.nat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nat-table thead th {
padding: 9px 16px;
background: var(--et-table-head);
border-bottom: 1px solid var(--et-table-head-fonce);
font-family: var(--et-font-mono);
font-size: 12px; font-weight: 500;
text-transform: uppercase; letter-spacing: .14em;
color: var(--et-sur-ardoise);
white-space: nowrap; text-align: left;
cursor: pointer; user-select: none;
}
.nat-table thead th.droite { text-align: right; }
.nat-table thead th.centre { text-align: center; }
.nat-table thead th .fleche { margin-left: 4px; color: var(--et-form-blue-l); }
.nat-table tbody td {
padding: 8px 16px;
border-bottom: 1px solid var(--et-rang);
white-space: nowrap;
color: var(--et-ink);
}
.nat-table tbody td.droite { text-align: right; }
.nat-table tbody td.centre { text-align: center; }
.nat-table tbody td.id { font-size: 12px; color: var(--et-faint); }
.nat-table tbody tr:not(.nat-bandeau) { cursor: pointer; }
.nat-table tbody tr:not(.nat-bandeau):hover { background: var(--et-rang); }
/* Une nature société se distingue au fond, sans qu'il faille lire la colonne Type. */
.nat-table tbody tr.est-societe { background: var(--et-surface-3); }
.nat-bandeau td {
padding: 8px 16px !important;
background: var(--et-tint);
border-top: 1px solid var(--et-filet-fort);
border-bottom: 1px solid var(--et-filet-fort) !important;
}
.nat-bandeau .filet { display: inline-block; width: 3px; height: 13px; vertical-align: -2px; margin-right: 10px; }
.nat-bandeau .libelle { font-size: 13px; font-weight: 700; color: var(--et-table-head-encre); }
.nat-bandeau .compte { margin-left: 10px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.nat-code {
display: inline-flex; align-items: center;
padding: 2px 8px;
background: var(--et-neutre-bg);
font-family: var(--et-font-mono);
font-size: 12px; font-weight: 500;
color: var(--et-table-head-encre);
}
.nat-table .cellule-nom { white-space: normal; border-right: 1px solid var(--et-rang); }
.nat-table .cellule-nom .nom { font-weight: 600; color: var(--et-ink); }
.nat-table .cellule-nom .nom.est-inactive { color: var(--et-faint); font-weight: 500; }
/* ---------------------------------------------------------------------------
2. LES TROIS MARQUEURS QUE LE RÉFÉRENTIEL NE PORTAIT PAS
Chacun désigne une information qui décide du résultat d'un calcul, et qu'aucune
colonne de la table ne porte.
--------------------------------------------------------------------------- */
/* « Σ total » : la nature est une SOMME. L'employer dans une formule à côté de
l'une de ses composantes la compterait deux fois. */
.nat-total {
display: inline-flex; align-items: center;
margin-left: 7px; padding: 1px 7px;
background: var(--et-neutre-bg);
border: 1px solid var(--et-filet-fort);
font-family: var(--et-font-mono);
font-size: 12px; font-weight: 500;
text-transform: uppercase; letter-spacing: .1em;
color: var(--et-table-head-encre);
cursor: help;
}
/* « rang n » : l'ordre d'évaluation. Une nature calculée passe après ses variables. */
.nat-rang {
display: inline-flex; align-items: center;
margin-left: 7px; padding: 1px 7px;
background: var(--et-tint);
font-family: var(--et-font-mono);
font-size: 12px; font-weight: 500;
color: var(--et-form-blue-d);
}
/* Un cycle n'a pas de rang : aucune des natures en cause ne peut être évaluée. */
.nat-rang.est-cycle { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
/* « ↗ n » : nombre de formules qui l'emploient. La désactiver ne les arrête pas. */
.nat-emploi {
margin-left: 7px;
font-family: var(--et-font-mono);
font-size: 12px;
color: var(--et-faint);
cursor: help;
}
.nat-type {
display: inline-flex; align-items: center;
padding: 2px 9px; font-size: 12px; font-weight: 600;
}
.nat-type.est-systeme { background: var(--et-neutre-bg); color: var(--et-muted); }
.nat-type.est-societe { background: var(--et-tint); color: var(--et-form-blue-d); }
/* Un tiret gris signifie « aucune majoration », non « 0 % » : nul n'est pas zéro. */
.nat-table .est-vide, .nat-plage .est-vide { color: var(--et-inerte); }
/* .mono reste PORTÉE par les familles de l'écran, jamais globale : un nom aussi court posé
sur la racine serait revendiqué par le premier écran qui l'écrirait pour autre chose. */
.nat-table .mono, .nat-plage .mono, .nat-analyse .mono,
.nat-socle .mono { font-family: var(--et-font-mono); }
/* ---------------------------------------------------------------------------
3. INTERRUPTEUR D'ÉTAT ET CRAYON
Bleu et non orange : l'orange reste au seul bouton d'engagement de l'écran.
--------------------------------------------------------------------------- */
.nat-bascule {
display: block; width: 34px; height: 18px; padding: 0;
border: none; border-radius: var(--et-r-pill);
background: var(--et-filet-fort);
position: relative; cursor: pointer;
transition: background .12s ease;
}
.nat-bascule.est-actif { background: var(--et-form-blue); }
.nat-bascule:disabled { cursor: not-allowed; opacity: .6; }
.nat-bascule:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.nat-bascule .pastille {
position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--et-surface);
box-shadow: var(--et-ombre-pose);
transition: left .12s ease;
}
.nat-bascule.est-actif .pastille { left: 18px; }
.nat-crayon {
width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
border: 1px solid var(--et-filet-fort);
background: var(--et-surface);
color: var(--et-form-blue-encre);
cursor: pointer;
}
.nat-crayon:hover { border-color: var(--et-form-blue); background: var(--et-tint); }
/* ---------------------------------------------------------------------------
4. VUE « PAR PLAGE »
Les plages sont le CONTRAT du référentiel : 1–99 appartiennent au produit,
100+ à la société. Une plage vide n'est pas un manque, c'est une réservation —
et elle le dit, sans quoi on la comblerait.
--------------------------------------------------------------------------- */
.nat-plages { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.nat-plage { background: var(--et-surface); border: 1px solid var(--et-hairline); overflow: hidden; }
.nat-plage .tete {
display: flex; align-items: baseline; gap: 10px; row-gap: 6px; flex-wrap: wrap;
padding: 11px 18px;
background: var(--et-surface-2);
border-bottom: 1px solid var(--et-hairline);
}
.nat-plage .tete.est-reservee { background: var(--et-surface-3); }
.nat-plage .tete .borne { flex: none; font-size: 12px; font-weight: 500; color: var(--et-table-head-encre); }
.nat-plage .tete .libelle { flex: 1 1 200px; min-width: 140px; font-size: 14px; font-weight: 700; color: var(--et-table-head-encre); }
.nat-plage .tete .compte { font-size: 12px; color: var(--et-muted); }
.nat-plage .note { padding: 14px 18px; font-size: 13px; line-height: 1.55; color: var(--et-faint); }
.nat-plage .corps { padding: 4px 18px 12px; }
.nat-plage .ligne {
display: flex; align-items: center; gap: 12px; row-gap: 4px; flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid var(--et-rang);
cursor: pointer;
}
.nat-plage .ligne:last-child { border-bottom: none; }
.nat-plage .ligne:hover { background: var(--et-surface-3); }
.nat-plage .id { flex: none; width: 34px; font-size: 12px; color: var(--et-faint); }
.nat-plage .code { flex: none; width: 84px; font-size: 12px; font-weight: 500; color: var(--et-table-head-encre); }
.nat-plage .nom {
flex: 1 1 220px; min-width: 160px;
font-size: 13px; font-weight: 600; color: var(--et-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nat-plage .nom.est-inactive { color: var(--et-faint); font-weight: 500; }
.nat-plage .majo { flex: none; width: 92px; text-align: right; font-size: 12px; color: var(--et-ink); }
.nat-plage .unite { flex: none; width: 60px; text-align: right; font-size: 12px; color: var(--et-muted); }
/* ---------------------------------------------------------------------------
5. VUE « ANALYSE »
--------------------------------------------------------------------------- */
.nat-analyse { padding: 16px 18px 18px; }
.nat-analyse .cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.nat-analyse .carte { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 14px 16px; }
.nat-analyse .carte.est-teinte { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-bord); }
.nat-analyse .carte .tete { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--et-muted); }
.nat-analyse .carte .puce { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.nat-analyse .carte .corps { margin-top: 7px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.nat-analyse .carte .valeur { font-size: 19px; font-weight: 500; color: var(--et-ink); }
/* Base non nulle : le détail se replie sur sa propre ligne au lieu de se comprimer. */
.nat-analyse .carte .detail { flex: 1 1 120px; font-size: 12px; color: var(--et-faint); }
/* « À revoir » : ce que le référentiel porte de douteux, nommé plutôt que compté.
Un compteur à zéro est une bonne nouvelle ; un compteur à trois n'apprend rien
tant qu'il ne dit pas lesquelles. */
.nat-revoir { margin-top: 16px; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.nat-revoir .tete {
padding: 10px 16px; background: var(--et-surface-2); border-bottom: 1px solid var(--et-hairline);
font-family: var(--et-font-mono); font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .14em; color: var(--et-table-head-encre);
}
.nat-revoir .point { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--et-rang); }
.nat-revoir .point:last-child { border-bottom: none; }
.nat-revoir .puce { flex: none; margin-top: 5px; width: 6px; height: 6px; }
.nat-revoir .puce.est-grave { background: var(--et-danger); }
.nat-revoir .puce.est-tiede { background: var(--et-avertissement); }
.nat-revoir .txt { flex: 1; min-width: 0; }
.nat-revoir .titre { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.nat-revoir .detail { margin-top: 3px; font-size: 12px; line-height: 1.55; color: var(--et-faint); }
.nat-revoir .compte { flex: none; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.nat-revoir .vide { padding: 18px 16px; font-size: 13px; color: var(--et-faint); }
/* ---------------------------------------------------------------------------
6. FICHE — CE QU'IL RESTE À DIRE APRÈS LE PORTAGE AU GABARIT (2026-09-08)
ELLE EMPLOIE MAINTENANT LA GRILLE DENSE. Ce bloc décrivait l'inverse : une
grille propre (.nat-identite, .nat-trio, .nat-large, .nat-cases) posée pour
lire famille, unité et majoration côte à côte, au motif qu'une colonne
d'étiquettes de 158 px en aurait fait trois lignes dans une modale de 620 px.
L'écart était réel, sa raison ne l'était pas : la modale passe à 700 px comme
les fiches des paramètres d'organisation, et trois rangées de la grille dense
se lisent mieux que trois colonnes de 140 px dont deux portent un