/* ===========================================================================
   ÉCRAN — CONVENTIONS COLLECTIVES  (/app/conventions)
   Passation « design_handoff_conventions » (Design 27).

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css : la passation demandait
   une concaténation, mais c'est exactement ce que la charte a cessé de faire —
   chaque branche ajoutant un écran entrait en conflit avec toutes les autres sur
   la dernière ligne du gabarit et sur sa clé de cache, jamais sur la substance.
   Une feuille par écran, un <link> dans App.razor après modele-erp.css.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de easytech-theme.css.
   Les valeurs de la maquette y correspondent une à une (#BB0000 = --et-danger,
   #0854A0 = --et-form-blue-d, #FEF7F1 = --et-avertissement-bg, …) ; les écrire à
   la main aurait figé l'écran hors de la bascule de charte.

   Ce qui vit ici sert CET écran seul. Une classe qu'un deuxième écran reprendrait
   monte dans le gabarit (modele-erp.css §11) — jamais l'inverse, ou un écran finit
   par dépendre de la feuille d'un autre pour s'afficher.
   =========================================================================== */

/* --- Utilitaire local ----------------------------------------------------
   Les chiffres de cet écran se lisent EN COLONNE d'une ligne à l'autre : seuils,
   taux, bornes de validité. Le chasse-fixe n'est pas décoratif, il aligne. */
.cv-mono { font-family: var(--et-font-mono); }

/* --- LA MODALE DE LA FICHE ------------------------------------------------
   860 px, et c'est le plus large des trois gabarits de modale du module (620 pour
   la période, 700 pour la nature d'heures) : la fiche porte la grille des
   plafonds — cinq colonnes de nombres avec leur taux —, le tableau du régime
   obtenu et la grille de classification. Aucun des trois ne se lit sur une
   colonne étroite, et ils sont la moitié de l'écran.

   Le reste vient du gabarit (.mx-voile / .mx-modale-*, modele-erp.css §6) depuis
   le portage du 2026-09-08 : la fiche passait par ModalCadre et le modèle hérité
   .fx-modale. */

/* La mention du pied dit ce que l'enregistrement fera. L'emplacement est celui du
   gabarit (.mx-modale-mention) ; seuls ses deux états sont propres à cette fiche,
   qui refuse d'enregistrer des seuils incohérents et le dit là. */
/* LA LARGEUR EST CELLE DU CRAN LARGE (2026-09-10) — .est-large, posée dans la
   page : la fiche porte trois grilles de nombres, dont aucune ne se lit sur une
   colonne étroite. Les 860 px qu'elle écrivait ici étaient l'une des
   dix-huit largeurs du back-office. */
.cv-modale .mx-modale-mention.cv-mention-erreur { color: var(--et-danger-ink); }
.cv-modale .mx-modale-mention.cv-mention-attention { color: var(--et-avertissement-ink); }

/* --- Libellés de la fiche ------------------------------------------------- */
.cv-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--et-form-text); margin-bottom: 5px; }
.cv-lbl .req { color: var(--et-form-danger); }

.cv-seg { display: inline-flex; border: 1px solid var(--et-filet-fort); overflow: hidden; }
.cv-seg > button {
    height: 34px;
    padding: 0 14px;
    background: var(--et-surface);
    border: none;
    border-right: 1px solid var(--et-filet-fort);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--et-muted);
    cursor: pointer;
}
.cv-seg > button:last-child { border-right: none; }
.cv-seg > button:hover { background: var(--et-surface-2); }
.cv-seg > button.est-actif { background: var(--et-form-blue); color: var(--et-sur-aplat); font-weight: 600; }

/* --- Champ à suffixe ------------------------------------------------------
   Le composant vit dans le gabarit (.mx-input-suffixe, modele-erp.css § 11).
   Ne restent ici que la largeur et la réserve : les suffixes de cet écran sont
   courts (« h », « % »), d'où 26 px là où les terminaux en demandent 42. */
.cv-suffixe { --mx-suffixe-reserve: 26px; max-width: 132px; }

/* --- LE RECOUVREMENT DE VALIDITÉ EST PASSÉ AU BANDEAU DU GABARIT (2026-09-08)
   .cv-recouvrement disait exactement ce que dit .mx-blocage.est-erreur — fond
   pâle, filet, encre de danger — plus un bouton, qui est maintenant un .mx-btn
   .mx-btn-danger posé dans le bandeau. Il ne bloque toujours pas
   l'enregistrement : refuser la seconde convention empêcherait de préparer un
   avenant avant sa prise d'effet, qui est le cas normal, et le geste qui résout
   (fermer la précédente la veille) reste dans le bandeau.

   .cv-erreur et .cv-avert sont parties de même : deux bandeaux de plus qui
   redisaient les tons du gabarit. */

.cv-sous-titre { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.cv-sous-titre .lbl {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--et-muted);
}
.cv-sous-titre .note { font-size: 12px; color: var(--et-faint); }

.cv-seuils-grille {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px 12px;
    align-items: start;
}

/* L'UNITÉ EST BLEUE ET VIVE, et c'est le seul détail de cet écran qui ne se
   négocie pas : c'est elle qui change de sens quand la fenêtre change. Un suffixe
   figé « h / semaine » mentirait dans deux modes sur trois, et 40 saisi sous une
   fenêtre journalière ne produirait plus jamais d'heure supplémentaire. */
.cv-seuils-grille .unite {
    margin-top: 4px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-form-blue-d);
}
.cv-seuils-grille .unite.est-inutilise { color: var(--et-inerte); }
.cv-seuils-grille .mx-input.est-inutilise { color: var(--et-faint); }

.cv-seuils-grille .taux { position: relative; margin-top: 7px; }
.cv-seuils-grille .taux .mx-input { height: 34px; padding-right: 26px; font-size: 13px; }
.cv-seuils-grille .taux .mx-input:disabled { background: var(--et-surface-3); color: var(--et-inerte); }
/* Un champ vide dont le repère gris montre le taux HÉRITÉ du catalogue société :
   la valeur s'appliquera, mais personne dans cette convention ne l'a décidée. */
.cv-seuils-grille .taux .mx-input.est-herite::placeholder { color: var(--et-inerte); font-style: normal; }
/* Un palier utilisé sans majoration effective : bordure ambre, pas rouge — ce
   n'est pas une erreur, un forfait peut le vouloir. */
.cv-seuils-grille .taux .mx-input.est-manque { border-color: var(--et-avertissement-bord); }
.cv-seuils-grille .taux .pc {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: var(--et-faint);
}

/* --- Régime obtenu -------------------------------------------------------
   Quatre nombres nus ne disent pas dans quel régime tombe une heure donnée. Les
   tranches le disent, avec leur amplitude ET leur taux : « 40 → 48 · 8 h · +15 % »
   se vérifie contre un bulletin. La dernière ligne — « au-delà du palier N, sans
   plafond » — est celle qu'on croit deviner et qu'on devine faux. */
.cv-regime { margin-top: 14px; border: 1px solid var(--et-hairline); }

.cv-regime .tete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 13px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.cv-regime .tete .lbl {
    flex: 1;
    min-width: 0;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--et-table-head-encre);
}
.cv-regime .tete .echelle { font-size: 12px; color: var(--et-faint); }
.cv-regime .tete .col-taux {
    flex: none;
    width: 78px;
    text-align: right;
    font-family: var(--et-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--et-muted);
}

.cv-regime .ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--et-rang);
}
.cv-regime .filet { flex: none; width: 3px; height: 15px; }
.cv-regime .nature { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--et-form-text); }
.cv-regime .plage {
    flex: none;
    font-family: var(--et-font-mono);
    font-size: 13px;
    color: var(--et-muted);
}
.cv-regime .plage.est-vide { color: var(--et-danger-ink); }
.cv-regime .amplitude {
    flex: none;
    width: 88px;
    text-align: right;
    font-family: var(--et-font-mono);
    font-size: 13px;
    color: var(--et-form-text);
}
.cv-regime .taux {
    flex: none;
    width: 78px;
    text-align: right;
    font-family: var(--et-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--et-form-text);
}
/* Sans majoration : ambre — le seuil découpe le cumul sans rien changer à la paie.
   Hérité : gris — la valeur s'appliquera, mais elle vient du catalogue société. */
.cv-regime .taux.est-sans { color: var(--et-avertissement-ink); }
.cv-regime .taux.est-herite { color: var(--et-faint); font-weight: 400; }

.cv-regime .methode {
    padding: 9px 13px;
    background: var(--et-surface-3);
    border-top: 1px solid var(--et-hairline);
    font-size: 12px;
    line-height: 1.55;
    color: var(--et-faint);
}

/* --- Périodes périmées ---------------------------------------------------
   « Les périodes déjà générées gardent leurs règles » est exact et insuffisant :
   ce bloc nomme LESQUELLES la prochaine génération recalculera. */
.cv-perimees {
    margin-top: 18px;
    padding: 11px 13px;
    background: var(--et-avertissement-bg);
    border: 1px solid var(--et-avertissement-bord);
}
.cv-perimees .titre { font-size: 13px; font-weight: 600; color: var(--et-avertissement-ink); }
.cv-perimees .ligne { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.cv-perimees .puce {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--et-avertissement);
    margin-top: 6px;
}
.cv-perimees .ligne > span:last-child {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--et-avertissement-ink);
}

/* --- Liste : pastille de fenêtre ----------------------------------------- */
.cv-fenetre {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}
.cv-fenetre.est-jour  { background: var(--et-surface-2); color: var(--et-table-head-encre); }
.cv-fenetre.est-hebdo { background: var(--et-tint); color: var(--et-form-blue-d); }
.cv-fenetre.est-mois  { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

/* La convention par défaut, discrètement teintée : c'est elle qui s'applique au
   salarié qui n'en porte aucune, donc la ligne qu'on cherche en premier. */
.cv-ligne-defaut > td { background: var(--et-surface-3); }

/* --- Liste : les taux, surchargés ou hérités ----------------------------- */
.cv-taux-liste { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cv-taux-liste > span { font-family: var(--et-font-mono); font-size: 12px; }
.cv-taux-liste .est-surcharge { color: var(--et-form-text); font-weight: 600; }
.cv-taux-liste .est-herite { color: var(--et-faint); }
.cv-taux-liste .est-sans { color: var(--et-avertissement-ink); }

/* --- Vue « Seuils comparés » ---------------------------------------------
   Ramener tous les modes à la semaine est la seule façon de voir qu'une
   convention journalière à 8 h et une hebdomadaire à 40 h décrivent le même
   régime — ou pas. La barre montre les TRANCHES, non un total. */
.cv-seuils {
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid var(--et-hairline);
}

.cv-echelle .tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cv-echelle .nom {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--et-form-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-echelle .nom.est-echue { color: var(--et-faint); }
.cv-echelle .detail {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}

.cv-echelle .barre {
    margin-top: 6px;
    position: relative;
    height: 20px;
    background: var(--et-piste);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.cv-echelle .seg {
    flex: none;
    border-right: 1px solid var(--et-surface);
    display: grid;
    place-items: center;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--et-sur-aplat);
    overflow: hidden;
    white-space: nowrap;
}

.cv-seuils .methode { font-size: 12px; line-height: 1.55; color: var(--et-faint); }

/* --- Étroit --------------------------------------------------------------
   La grille des seuils passe de cinq colonnes à deux : cinq champs de 60 px
   côte à côte sur un téléphone ne se saisissent pas.

   1100 ET NON 860 : le palier ne mesure pas la fenêtre mais ce dont la grille
   dispose, et le rail passe de 256 à 52 px à 1024 px — la colonne de contenu
   tombe donc de 956 à 753 px juste au-dessus. À 860 px de fenêtre elle vaut
   808 px, mais la bande 1025-1085 px la laissait entre 753 et 808 px SANS
   replier, c'est-à-dire plus serrée que le seuil qui replie. 1100 px la donne à
   828 px et couvre la falaise. Voir docs/conventions-responsive.md §2. */
@media (max-width: 1100px) {
    /* La grille dense du gabarit porte son propre repli (modele-erp.css) depuis
       que la fiche l'emploie : ne reste ici que la grille des plafonds, qui est
       un atelier et non des rangées de champs. */
    .cv-seuils-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Pied de la fiche ----------------------------------------------------
   Les deux règles qui portaient la couleur de la mention sont remontées en tête
   de ce fichier (2026-09-08), sur .mx-modale-mention : le pied de la fiche est
   celui du gabarit, .fx-modale-pied n'existe plus ici. La mention change de
   couleur avec ce qu'elle annonce — ambre quand une modification attend d'être
   enregistrée, rouge quand un seuil l'empêche. */

/* --- Classification (db/1216) --------------------------------------------
   La grille catégorie/échelon → salaire minimum, l'autre moitié de la
   convention. Elle s'édite comme un tableau parce qu'elle SE LIT comme un
   tableau : ses lignes se comparent entre elles, ce qu'une pile de blocs de
   formulaire empêche. */
.cv-grille { margin-top: 8px; border: 1px solid var(--et-hairline); }

.cv-grille .tete,
.cv-grille .ligne {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px 140px 34px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
}
.cv-grille .tete {
    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: .12em;
    color: var(--et-muted);
}
.cv-grille .tete .num { text-align: right; }
.cv-grille .ligne + .ligne { border-top: 1px solid var(--et-rang); }
.cv-grille .mx-input { height: 32px; font-size: 13px; }
.cv-grille .mx-input.num { text-align: right; }

.cv-retirer {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent;
    border: none;
    color: var(--et-inerte);
    cursor: pointer;
}
.cv-retirer:hover { color: var(--et-danger-ink); background: var(--et-danger-badge-bg); }

/* Le bouton d'ajout vit dans l'en-tête de groupe : il agit sur CE groupe, et
   nulle part ailleurs. */
.cv-ajout {
    margin-left: auto;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--et-filet-fort);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-form-blue-d);
    cursor: pointer;
}
.cv-ajout:hover { background: var(--et-tint); }