/* ===========================================================================
   FEUILLE D'ÉCRAN — Affectations de rotation
   Écran : Components/Pages/App/AffectationsRotation.razor — /app/affectations

   POURQUOI CE FICHIER EXISTE, ET PAS UN BLOC DE PLUS DANS modele-erp.css
   Les styles d'écran s'y empilaient tous en fin de fichier. Trois branches
   ouvertes le même jour y ont ajouté leur bloc, et les trois se sont
   télescopées — non sur le fond, qui ne se recouvre jamais, mais sur la
   dernière ligne du fichier et sur la clé de cache que chacune bumpait.
   Une feuille par écran donne à chacun sa fin de fichier et sa clé.

   CE QUI RESTE DANS LE GABARIT : tout ce qui sert à DEUX écrans ou plus.
   Une classe promue là-bas ne redescend pas ici — sinon un écran finit par
   dépendre de la feuille d'un autre pour s'afficher.

   Chargée APRÈS modele-erp.css : ses règles peuvent affiner le gabarit à
   spécificité égale, l'inverse n'est pas vrai.
   =========================================================================== */

/* ===========================================================================
   AFFECTATIONS DE ROTATION — panneau d'impact de la fiche.
   Passation « design_handoff_affectations » (2026-08-17).

   Le reste de l'écran (barre, table, pied, modale, formulaire dense) réutilise
   les classes existantes : rien n'est redéfini ici — .text-inerte notamment
   vient du bloc Cycles ci-dessus. Les couleurs de la passation sont reportées
   sur les jetons --et-*, une teinte écrite en dur échappant à la bascule de
   charte.
   =========================================================================== */

.aff-impact-attente {
    margin-top: 14px;
    padding: 14px;
    background: var(--et-surface-3);
    border: 1px solid var(--et-hairline);
    font-size: 13px;
    color: var(--et-muted);
}

.aff-impact {
    margin-top: 14px;
    border: 1px solid var(--et-hairline);
}

.aff-impact-tete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 12px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.aff-impact-tete .tit { font-size: 13px; font-weight: 700; color: var(--et-table-head-encre); }
.aff-impact-tete .cpt {
    flex: 1;
    min-width: 160px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}

/* La liste défile : une cible « Société » porte des centaines de lignes, et la
   modale ne doit pas s'allonger indéfiniment. Le bouton « voir plus » complète,
   il ne remplace pas le défilement. */
.aff-impact-corps {
    /* Plus haut qu'avant : en colonne latérale, le panneau a la hauteur du formulaire
       à côté de lui, et s'arrêter à 300 px laisserait un vide sous lui. */
    max-height: 460px;
    overflow-y: auto;
}

/* LA RANGÉE EST EMPILÉE, PAS EN COLONNES. Elle vivait sur cinq colonnes tant que le
   panneau tenait toute la largeur ; en colonne latérale, le motif est une PHRASE et
   n'entre pas dans un cinquième de 300 px. Trois lignes — identité, service, motif —
   avec l'action tenue à droite sur toute la hauteur. */
.aff-membre {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 62px;
    grid-template-areas:
        "mat nom   act"
        "svc svc   act"
        "mot mot   mot";
    align-items: center;
    gap: 2px 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--et-rang);
    font-size: 13px;
}
/* L'action est tenue par un bouton OU par une pastille inerte : le sélecteur vise la
   place, pas l'élément, sinon l'emplacement se décalerait pour un non-excluable. */
.aff-membre > .mx-puce { grid-area: act; justify-self: end; align-self: center; }
.aff-membre:last-child { border-bottom: none; }

/* Un conflit se signale par une teinte de FOND, pas par une couleur de texte :
   le motif est déjà une phrase, la colorer la rendrait moins lisible. */
.aff-membre.a-conflit { background: var(--et-avertissement-bg); }

/* Un exclu est neutralisé, pas alerté : il a été traité. Fond gris, texte
   atténué, et son nom barré — la décision est visible d'un coup d'œil sur la
   liste entière. */
.aff-membre.est-exclu { background: var(--et-surface-2); }
.aff-membre.est-exclu .nom { text-decoration: line-through; color: var(--et-faint); }
.aff-membre.est-exclu .motif { color: var(--et-faint); }

/* Une déclaration par place : le gabarit d'abord (grid-area), l'apparence ensuite,
   dans la MÊME règle — deux règles pour un même sélecteur finissent par diverger. */
.aff-membre .mat {
    grid-area: mat;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-table-head-encre);
}
.aff-membre .nom { grid-area: nom; font-weight: 600; color: var(--et-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aff-membre .svc { grid-area: svc; font-size: 12px; color: var(--et-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aff-membre .motif { grid-area: mot; margin-top: 2px; font-size: 12px; color: var(--et-muted); line-height: 1.4; }

.aff-impact-plus {
    display: block;
    width: 100%;
    padding: 9px;
    background: var(--et-surface-3);
    border: none;
    border-top: 1px solid var(--et-rang);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--et-form-blue-encre);
    cursor: pointer;
}
.aff-impact-plus:hover { background: var(--et-rang); }

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

/* --------------------------------------------------------------------------- */
/* LA PASTILLE D'ACTION INLINE EST DEVENUE .mx-puce DU GABARIT (modele-erp.css
   §11.x) le 2026-09-08, et ce bloc ne garde que ce qui est propre à cet écran.

   CE QU'IL FAUT SAVOIR DE CE QUI A ÉTÉ RETIRÉ : la définition qui vivait ici
   n'était pas préfixée — elle s'appelait « .fx-puce » tout court, dans une
   feuille d'ÉCRAN. Elle habillait donc la puce de TOUS les écrans qui
   employaient cette classe du modèle de fiche hérité : la longueur d'un cycle,
   le retour au calcul d'une absence, la cadence d'une période. Trois écrans
   dépendaient de la feuille d'un quatrième pour peindre leur état « actif » —
   exactement ce que la règle du dépôt interdit, et la raison pour laquelle une
   classe partagée monte au gabarit.

   Ne reste ici que l'EMPLACEMENT dans la rangée de membre et la taille de champ
   des décalages, plus bas : deux réglages qui ne valent que dans cet écran. */

/* Emplacement TENU pour un non-excluable : la colonne ne se décale pas, et
   l'infobulle dit pourquoi il n'y a pas de bouton — un trou muet se lirait
   comme un oubli d'affichage. Le gabarit rend la puce inerte grise ; ici elle
   perd en plus son cadre, pour que la rangée ne montre pas un bouton vide. */
.mx-puce.est-inerte { background: transparent; border-color: transparent; }

/* ---------------------------------------------------------------------------
   DEUX COLONNES DANS LA FICHE (maquette « Affectation Fiche edit »).

   Le panneau d'impact n'est pas une conclusion qu'on lit après avoir rempli :
   c'est la réponse qui change à chaque champ touché. Posé SOUS le formulaire,
   il sortait du champ de vision dès la deuxième section, et l'on validait sans
   l'avoir revu.

   La colonne fait 300 px et non les 250 px de la maquette : celle-ci dessine
   des rangées à deux informations (matricule, nom), alors que le panneau réel
   porte aussi le motif — une phrase — et le bouton d'exclusion, arrivés avec
   le mécanisme d'exclusion que la maquette précède.
   --------------------------------------------------------------------------- */
.aff-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0 24px;
    align-items: start;
}
.aff-fiche-saisie { min-width: 0; }

/* Ce qui concerne la fiche ENTIÈRE — le refus du serveur à l'enregistrement — tient
   les deux colonnes : il doit tomber sous les yeux de qui vient de cliquer, pas à
   côté d'une liste de salariés. */
.aff-fiche-pleine { grid-column: 1 / -1; margin-top: 12px; }

/* Pas de position: sticky ici. Elle serait sans effet — la piste de grille est
   dimensionnée par son contenu (align-items: start), l'élément n'a donc aucune
   marge de manœuvre pour coller. La faire marcher demande d'étirer la piste PUIS
   de coller l'enfant, ce qui ne se règle qu'en la voyant à l'écran. */
.aff-fiche-cote { min-width: 0; }
/* En tête de colonne, le panneau n'a rien au-dessus de lui à quoi se décoller. */
.aff-fiche-cote .aff-impact,
.aff-fiche-cote .aff-impact-attente { margin-top: 0; }

/* Emplacement TENU sans cible : une colonne vide se lirait comme un chargement
   qui n'aboutit pas. */
.aff-impact-vide .aff-impact-pied { border-top: none; }

/* SOUS 1100 px la fiche repasse en UNE colonne — c'est le même seuil que le
   rail d'onglets du gabarit, pour que la modale ne change pas de forme deux
   fois en réduisant la fenêtre. La rangée empilée, elle, ne change pas : elle
   se lit aussi bien large. */
@media (max-width: 1100px) {
    .aff-fiche { grid-template-columns: minmax(0, 1fr); }
    .aff-fiche-cote .aff-impact,
    .aff-fiche-cote .aff-impact-attente { margin-top: 14px; }
}

/* --------------------------------------------------------------------------- */
/* Décalage : quatre valeurs, pas un champ libre. Plus hautes que la pastille
   d'action ordinaire — ce sont des CHAMPS de formulaire, alignés sur la hauteur
   des autres contrôles de la fiche (34 px), et non des actions de rangée. */
.aff-decalages { display: flex; flex-wrap: wrap; gap: 7px; }
.aff-decalages .mx-puce {
    height: 34px;
    min-width: 54px;
    font-family: var(--et-font-mono);
    font-size: 13px;
}