/* ============================================================================
   GÉNÉRATION DES HEURES — /app/generation-heures
   Passation « design_handoff_generation » (Design 23).

   SA FEUILLE, ET RIEN QUE LA SIENNE. Le flux à quatre temps — contrôles préalables,
   génération, aperçu détaillé, clôture — n'existe que sur cet écran : rien ici n'est
   candidat au gabarit tant qu'un deuxième écran ne l'emploie pas. Ce qui habille le
   panneau de filtres (.flt-*) et le cadre d'écran (.ecran-*) est PARTAGÉ et vit dans le
   gabarit — l'y laisser est ce qui évite qu'un écran dépende de la feuille d'un autre
   pour s'afficher.

   Aucune couleur en dur : tout passe par les jetons --et-*, c'est par eux que le mode
   sombre existe.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. LE RAIL D'ÉTAPES

   Il n'est PAS décoratif, et il n'est pas non plus une barre de navigation : on ne
   clique pas dessus. Il dit où l'on est et ce qu'il reste à faire, et l'étape courante
   porte son propre décompte (« 3 blocages à lever »). Cliquer « Aperçu » sans avoir
   généré n'aurait aucun sens — il n'y aurait rien à voir —, et un rail cliquable
   promettrait justement l'inverse. */
.gen-rail {
    display: flex;
    align-items: stretch;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}

.gen-etape {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 18px;
    border-right: 1px solid var(--et-hairline);
    background: var(--et-surface);
}

.gen-etape:last-child { border-right: none; }
.gen-etape.est-actif { background: var(--et-tint); }

.gen-etape-num {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--et-rang);
    color: var(--et-faint);
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
}

.gen-etape.est-actif .gen-etape-num { background: var(--et-form-blue); color: var(--et-sur-aplat); }
.gen-etape.est-faite .gen-etape-num { background: var(--et-succes); color: var(--et-sur-aplat); }

.gen-etape-txt { flex: 1; min-width: 0; }

.gen-etape-titre { font-size: 13px; font-weight: 600; color: var(--et-faint); }
.gen-etape.est-actif .gen-etape-titre { color: var(--et-form-blue-d); font-weight: 700; }
.gen-etape.est-faite .gen-etape-titre { color: var(--et-ink); }

.gen-etape-detail { margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--et-faint); }

@media (max-width: 1100px) {
    .gen-rail { flex-wrap: wrap; }
    .gen-etape { flex: 1 1 50%; border-bottom: 1px solid var(--et-hairline); }
}

/* ---------------------------------------------------------------------------
   2. LE BANDEAU DE PÉRIMÈTRE

   Il rappelle sous quelles bornes le calcul a été — ou sera — fait, et c'est la dernière
   ligne lue avant de relancer. Sa place, juste sous le rail, tient à ce que changer la
   PÉRIODE invalide le résultat : l'écran repart alors des contrôles, parce qu'un résultat
   calculé sur d'autres bornes n'est pas un résultat périmé, c'est un résultat qui répond à
   une autre question. Le filtre du panneau, lui, ne fait que restreindre l'affichage — la
   génération porte sur la période entière — et le compteur de droite dit cet écart. */
.gen-bandeau {
    display: flex;
    align-items: center;
    gap: 8px;
    row-gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
}

.gen-bandeau-lbl {
    font-family: var(--et-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--et-muted);
}

.gen-bandeau-val { font-family: var(--et-font-mono); font-size: 13px; color: var(--et-ink); }
.gen-bandeau-portee { margin-left: auto; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   3. LE BLOC — cadre commun aux sections de l'écran (contrôles, traçabilité,
   écart, résultat). Filets et surfaces plates : aucun arrondi, aucune ombre. */
.gen-bloc { background: var(--et-surface); border: 1px solid var(--et-hairline); }

.gen-bloc-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}

.gen-bloc-titre { flex: 1 1 200px; min-width: 160px; font-size: 14px; font-weight: 700; color: var(--et-table-head-encre); }
.gen-bloc-meta { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }
.gen-bloc-meta.est-negatif  { color: var(--et-danger-ink); }
.gen-bloc-meta.est-critique { color: var(--et-avertissement-ink); }
.gen-bloc-meta.est-positif  { color: var(--et-succes-ink); }
.gen-bloc-meta.est-info     { color: var(--et-form-blue-d); font-size: 13px; font-weight: 500; }

/* La note : elle explique une RÈGLE, pas un champ. Distincte de l'aide d'un
   formulaire, qui vit sous son champ. */
.gen-note { padding: 12px 18px 4px; font-size: 13px; line-height: 1.55; color: var(--et-muted); }
.gen-methode { padding: 11px 18px; background: var(--et-surface-3); font-size: 12px; line-height: 1.6; color: var(--et-faint); }
.gen-bloc-corps { padding: 6px 18px 14px; }

/* ---------------------------------------------------------------------------
   4. UN CONTRÔLE PRÉALABLE

   TROIS COULEURS, TROIS SENS, et c'est le cœur de l'écran :
     rouge  — bloquant : le calcul serait faux, et il le sait ;
     ambre  — avertissement : le doute est connu, borné, et se reconnaît ;
     vert   — levé.
   La teinte est portée par la puce ET par la valeur, jamais par la ligne entière :
   un fond rouge pleine largeur ferait lire « erreur » là où il y a « travail à faire ». */
.gen-ctrl {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 8px;
    flex-wrap: wrap;
    padding: 11px 0;
    border-bottom: 1px solid var(--et-rang);
}

.gen-ctrl:last-of-type { border-bottom: none; }

.gen-ctrl-puce {
    flex: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
}

.gen-ctrl-txt { flex: 1 1 260px; min-width: 180px; }
.gen-ctrl-titre-rang { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gen-ctrl-titre { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.gen-ctrl.est-leve .gen-ctrl-titre { color: var(--et-faint); }
.gen-ctrl-detail { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }

.gen-ctrl-val {
    flex: none;
    font-family: var(--et-font-mono);
    font-size: 13px;
    font-weight: 500;
}

.gen-ctrl-actions { flex: none; display: flex; align-items: center; gap: 10px; }

/* Les trois gravités, appliquées à la puce, à la balise et à la valeur. */
.est-bloquant .gen-ctrl-puce, .gen-balise.est-bloquant { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.est-avert    .gen-ctrl-puce, .gen-balise.est-avert    { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.est-leve     .gen-ctrl-puce, .gen-balise.est-leve     { background: var(--et-succes-bg); color: var(--et-succes-ink); }

.est-bloquant .gen-ctrl-val { color: var(--et-danger-ink); }
.est-avert    .gen-ctrl-val { color: var(--et-avertissement-ink); }
.est-leve     .gen-ctrl-val { color: var(--et-succes-ink); }

/* La balise garde son arrondi : c'est une pastille de statut, la seule exception
   aux angles droits avec les boutons de barre d'outils. */
.gen-balise {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   5. LA RECONNAISSANCE DES AVERTISSEMENTS

   Ce n'est pas une case à cocher de confort : c'est une DÉCISION, et elle part dans la
   trace. Le fond passe à l'ambre tant qu'elle n'est pas prise — l'écran ne peut pas
   avancer, et il faut que cela se voie sans lire. */
.gen-reco {
    padding: 12px 18px;
    background: var(--et-surface-2);
    border-top: 1px solid var(--et-hairline);
}

.gen-reco.est-requise { background: var(--et-avertissement-bg); }
.gen-reco-aide { margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }

.gen-reco-btn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.gen-reco-btn:disabled { cursor: not-allowed; }

/* La case est .mx-case (modele-erp.css), à sa taille par défaut. Seul écart : le
   décalage d'un pixel qui l'aligne sur la première ligne du titre, l'option étant
   posée en flex-start pour laisser respirer sa note. */
.gen-reco-case { margin-top: 1px; }
.gen-reco-titre { display: block; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.gen-reco-btn:disabled .gen-reco-titre { color: var(--et-faint); }
.gen-reco-note { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   6. LES INDICATEURS DE L'APERÇU */
.gen-indics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.gen-indic { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 14px 16px; }
.gen-indic.est-critique { background: var(--et-avertissement-bg); }
.gen-indic-tete { display: flex; align-items: center; gap: 7px; }
.gen-indic-puce { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--et-form-blue); }
.gen-indic-puce.est-critique { background: var(--et-avertissement); }
.gen-indic-puce.est-negatif  { background: var(--et-danger); }
.gen-indic-puce.est-positif  { background: var(--et-succes); }

.gen-indic-lbl {
    flex: 1; min-width: 0;
    font-size: 12px; color: var(--et-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gen-indic-bas { margin-top: 7px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }

.gen-indic-val {
    font-family: var(--et-font-mono);
    font-size: 19px;
    font-weight: 500;
    color: var(--et-ink);
}

.gen-indic-val.est-info     { color: var(--et-form-blue-d); }
.gen-indic-val.est-critique { color: var(--et-avertissement-ink); }
.gen-indic-val.est-negatif  { color: var(--et-danger-ink); }
.gen-indic-val.est-positif  { color: var(--et-succes-ink); }
.gen-indic-detail { flex: 1; min-width: 0; font-size: 12px; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   7. LA TRAÇABILITÉ

   Une grille de champs séparés par le filet lui-même (gap 1 px sur fond de filet) :
   c'est ce qui donne le quadrillage sans dessiner de bordures. */
.gen-trace {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 1px;
    background: var(--et-hairline);
    border-bottom: 1px solid var(--et-hairline);
}

.gen-trace-champ { background: var(--et-surface); padding: 9px 14px; }

.gen-trace-lbl {
    font-size: 12px; color: var(--et-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gen-trace-val { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--et-ink); overflow-wrap: anywhere; }
.gen-trace-val.mono { font-family: var(--et-font-mono); }
.gen-trace-val.est-info     { color: var(--et-form-blue-d); }
.gen-trace-val.est-critique { color: var(--et-avertissement-ink); }
.gen-trace-val.est-absente  { color: var(--et-inerte); font-weight: 400; font-style: italic; }

/* ---------------------------------------------------------------------------
   8. L'ÉCART AVEC LA GÉNÉRATION PRÉCÉDENTE, ET LES VALEURS À VÉRIFIER

   Deux blocs de même forme et de teintes opposées : l'écart est une INFORMATION
   (bleu), les valeurs suspectes sont un TRAVAIL (ambre). */
.gen-bloc-tete.est-info  { background: var(--et-tint); border-bottom-color: var(--et-form-border); }
.gen-bloc.est-critique   { border-color: var(--et-avertissement-bord); }
.gen-bloc-tete.est-critique { background: var(--et-avertissement-bg); border-bottom-color: var(--et-avertissement-bord); }
/* L'encre ambre du bandeau : #E9730C ne passe pas AA sur son propre fond très clair.
   Le cran plus foncé de la passation, lui, vaut 6,2:1 — même famille, lisible. */
.gen-bloc-tete.est-critique .gen-bloc-titre,
.gen-bloc-tete.est-critique .gen-bloc-meta { color: var(--et-avertissement-ink); }

.gen-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    padding: 9px 0;
    border: none;
    border-bottom: 1px solid var(--et-rang);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.gen-ligne:hover { background: var(--et-rang); }
.gen-ligne-matr { flex: none; width: 54px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-table-head-encre); }
.gen-ligne-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--et-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-ligne-motif { flex: none; max-width: 42%; font-size: 12px; color: var(--et-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-ligne-val { flex: none; width: 100px; text-align: right; font-family: var(--et-font-mono); font-size: 13px; font-weight: 500; }
.gen-ligne-val.est-positif  { color: var(--et-succes-ink); }
.gen-ligne-val.est-negatif  { color: var(--et-danger-ink); }
.gen-ligne-val.est-critique { color: var(--et-avertissement-ink); }
.gen-ligne-bloc { flex: 1; min-width: 0; }
.gen-ligne-bloc .gen-ligne-nom { white-space: normal; }
.gen-ligne-sous { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   9. LE TABLEAU DU RÉSULTAT

   En-tête marine et non bleu : le marine est la couleur de chrome de la charte, et un
   en-tête de tableau n'est pas un élément interactif de la page. */
.gen-tbl-cadre { overflow-x: auto; }
.gen-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }

.gen-tbl thead th {
    padding: 9px 14px;
    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;
}

.gen-tbl thead th.num { text-align: right; }
.gen-tbl tbody tr { background: var(--et-surface); cursor: pointer; }
.gen-tbl tbody tr:hover { background: var(--et-rang); }
.gen-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--et-rang); white-space: nowrap; }
.gen-tbl td.mono { font-family: var(--et-font-mono); font-size: 13px; color: var(--et-table-head-encre); }
.gen-tbl td.nom { font-weight: 600; }
.gen-tbl td.doux { color: var(--et-muted); }
.gen-tbl td.num { text-align: right; font-family: var(--et-font-mono); font-size: 13px; }

/* Le tiret n'est PAS une donnée manquante : il dit « aucune heure de cette nature ».
   D'où la teinte inerte, qui le retire de la lecture sans le faire disparaître. */
.gen-tbl td.num.est-vide { color: var(--et-inerte); }
.gen-tbl td.num.est-info     { color: var(--et-form-blue-d); }
.gen-tbl td.num.est-critique { color: var(--et-avertissement-ink); }
.gen-tbl td.num.est-negatif  { color: var(--et-danger-ink); }
.gen-tbl td.num.est-positif  { color: var(--et-succes-ink); }

.gen-tbl tr.gen-tbl-total td {
    background: var(--et-surface-2);
    border-top: 2px solid var(--et-form-border);
    border-bottom: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--et-table-head-encre);
}

.gen-tbl tr.gen-tbl-total { cursor: default; }
.gen-tbl tr.gen-tbl-total:hover { background: transparent; }
.gen-tbl tr.gen-tbl-total td.num { font-weight: 500; }

/* Le détail par jour : mêmes règles, plus deux fonds de rangée qui disent la nature
   de la journée avant qu'on ait lu la colonne « Observation ». */
.gen-tbl tbody tr.est-repos { background: var(--et-surface-3); cursor: default; }
.gen-tbl tbody tr.est-ferie { background: var(--et-succes-bg); cursor: default; }
.gen-tbl tbody tr.est-repos td, .gen-tbl tbody tr.est-ferie td { color: inherit; }
.gen-tbl td.note { white-space: normal; font-size: 12px; color: var(--et-faint); }
.gen-tbl td.note.est-negatif  { color: var(--et-danger-ink); }
.gen-tbl td.note.est-critique { color: var(--et-avertissement-ink); }
.gen-tbl-tri { display: flex; border: 1px solid var(--et-form-border); }

.gen-tbl-tri button {
    height: 30px;
    padding: 0 11px;
    border: none;
    border-right: 1px solid var(--et-form-border);
    background: var(--et-surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--et-ink);
    cursor: pointer;
}

.gen-tbl-tri button:last-child { border-right: none; }
.gen-tbl-tri button:hover { background: var(--et-rang); }
.gen-tbl-tri button.est-actif { background: var(--et-table-head); color: var(--et-sur-ardoise-plein); font-weight: 600; }

/* ---------------------------------------------------------------------------
   10. LA CLÔTURE

   Bordure rouge, comme tout panneau d'action irréversible du produit. La clôture
   verrouille les pointages et transmet à la paie : c'est le seul geste de l'écran
   qu'on ne peut pas défaire depuis l'écran. */
.gen-danger { background: var(--et-surface); border: 1px solid var(--et-danger-bord); }

.gen-danger-tete {
    padding: 12px 18px;
    background: var(--et-danger-badge-bg);
    border-bottom: 1px solid var(--et-danger-bord);
    font-size: 14px;
    font-weight: 700;
    color: var(--et-danger-ink);
}

.gen-danger-corps { padding: 14px 18px; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.gen-danger-txt { flex: 1; min-width: 260px; font-size: 13px; line-height: 1.6; color: var(--et-ink); }
.gen-danger-actions { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   11. L'ÉTAT CLÔTURÉ */
.gen-close { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 22px 24px; }
.gen-close-rang { display: flex; align-items: flex-start; gap: 14px; }

.gen-close-ico {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--et-succes-bg);
    color: var(--et-succes-ink);
    font-size: 16px;
}

.gen-close-titre { font-size: 16px; font-weight: 700; color: var(--et-ink); }
.gen-close-sous { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--et-muted); }
.gen-close-recap { margin-top: 12px; border: 1px solid var(--et-hairline); }
.gen-close-recap .gen-trace-champ { background: var(--et-surface-2); }
.gen-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .gen-duo { grid-template-columns: minmax(0, 1fr); } }

.gen-puce-liste { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--et-rang); }
.gen-puce-liste:last-child { border-bottom: none; }
.gen-puce-liste > i { flex: none; margin-top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--et-table-head); }
.gen-puce-liste > i.est-info { background: var(--et-form-blue); }
.gen-puce-liste > span { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--et-ink); }

/* ---------------------------------------------------------------------------
   12. LA MODALE DE PROGRESSION

   La progression est RÉELLE : cinq paliers rendus par le moteur, pas une barre
   interpolée. Le moteur ne produit pas de progression par salarié, et des paliers
   honnêtes valent mieux qu'une animation qui avancerait sans rien mesurer. */
/* ---------------------------------------------------------------------------
   LES DEUX FENÊTRES DE CET ÉCRAN — et cette feuille n'écrit plus leur largeur.

   Le cadre, l'en-tête et le pied viennent du gabarit (.mx-voile / .mx-modale-*,
   modele-erp.css §6) depuis le 2026-09-08 : l'écran les dessinait à la main dans
   des attributs style, six déclarations de couleur comprises.

   DEPUIS LE 2026-09-10, LA LARGEUR AUSSI, sous forme de crans posés dans la
   page. La fenêtre de GÉNÉRATION prend .est-etroite (480 px) : elle ne porte
   qu'une barre d'avancement, cinq phases et un bilan, et à 660 la file de phases
   s'étirerait en lignes très courtes très espacées. Celle du DÉTAIL PAR JOUR
   prend .est-tres-large (1120) : elle porte une table de douze colonnes et prend
   toute la largeur utile, comme le faisait son « modal-xl » d'origine.

   Les 520 et 1140 px qu'écrivait cette feuille disaient exactement cela, à vingt
   pixels près — et ce « à vingt pixels près », tenu dix-huit fois sur cent
   vingt-quatre fenêtres, est ce que l'échelle retire.
   --------------------------------------------------------------------------- */

.gen-prog-barre { height: 8px; background: var(--et-piste); overflow: hidden; }
.gen-prog-jauge { height: 100%; background: var(--et-form-blue); transition: width .2s; }
.gen-prog-jauge.est-positif { background: var(--et-succes); }
.gen-prog-jauge.est-negatif { background: var(--et-danger); }
.gen-prog-pct { margin-top: 6px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.gen-phases { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.gen-phase { display: flex; align-items: center; gap: 10px; }

.gen-phase-puce {
    flex: none;
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--et-surface-2);
    color: var(--et-inerte);
    font-size: 12px;
}

.gen-phase.est-faite .gen-phase-puce { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.gen-phase-lbl { flex: 1; min-width: 0; font-size: 13px; color: var(--et-faint); }
.gen-phase.est-faite .gen-phase-lbl, .gen-phase.est-courante .gen-phase-lbl { color: var(--et-ink); }

/* Le « Meta » de la cinquième phase porte les natures calculées ÉCARTÉES pour formule
   illisible. Il s'affiche : une formule écartée ne fait pas échouer la génération, et
   c'est bien pour cela qu'elle passerait inaperçue. */
.gen-phase-meta { flex: none; max-width: 55%; font-size: 12px; color: var(--et-faint); text-align: right; }

.gen-bilan {
    margin-top: 14px;
    padding: 10px 13px;
    background: var(--et-succes-bg);
    border: 1px solid var(--et-succes-bord);
    font-size: 13px;
    line-height: 1.55;
    color: var(--et-succes-ink);
}

.gen-bilan.est-negatif { background: var(--et-danger-badge-bg); border-color: var(--et-danger-bord); color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   13. LA COLONNE DE L'ÉCRAN — les blocs s'empilent avec la même gouttière que la
   grille de l'écran, pour que rien ne flotte entre deux mesures. */
.gen-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gen-pile { display: flex; flex-direction: column; gap: 14px; min-width: 0; }