/* ============================================================================
   ÉCRAN — JOURS FÉRIÉS (/app/feries)

   Ce qui ne sert qu'à cet écran. Le reste vient des gabarits : la liste de
   easytime-shell.css (.tbl-*), le formulaire dense de modele-erp.css (.mx-*),
   la modale de fiche.css (.fx-*).

   Une classe qui servirait à un DEUXIÈME écran remonterait dans son gabarit —
   jamais l'inverse, sinon un écran finit par dépendre de la feuille d'un autre
   pour s'afficher. Voir la note d'App.razor.
   ========================================================================= */

/* --- Le choix d'exercice, dans l'en-tête ---------------------------------
   Il n'est PAS dans le panneau de filtres, et ce n'est pas une question de
   place : le panneau applique des prédicats sur les lignes déjà chargées,
   tandis que l'exercice change la REQUÊTE. L'y mettre aurait fait porter au
   navigateur toutes les années du référentiel pour n'en afficher qu'une —
   et, le temps qu'on s'en aperçoive, une liste vide sur un changement d'année.
   Sa place, à côté du titre, dit ce qu'il fait : il choisit ce qu'on charge. */
.fer-exercice {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin: 0;
}

.fer-exercice > span {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--et-muted);
    white-space: nowrap;
}

.fer-exercice-sel {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--et-ink);
    cursor: pointer;
}

.fer-exercice-sel:focus {
    outline: none;
    border-color: var(--et-form-blue);
}

.fer-exercice-sel:disabled {
    color: var(--et-faint);
    cursor: progress;
}

/* --- Le récapitulatif de l'assistant de reconduction ---------------------
   La partie utile de l'assistant n'est pas la saisie, c'est cette liste : elle
   dit ce qui va se produire SANS qu'on l'ait demandé. D'où la puce, qui aligne
   les entrées, et le gris sur celles qui annoncent une NON-reprise — elles se
   lisent comme un retrait, pas comme une action. */
.fer-recap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
}

.fer-recap-ligne {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fer-recap-pt {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 6px;
    background: var(--et-form-blue);
}

.fer-recap-titre {
    font-size: 13px;
    font-weight: 600;
    color: var(--et-ink);
}

.fer-recap-detail {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--et-muted);
}

/* ========================================================================
   LOT DU 2026-09-09 — LE CALENDRIER SE VOIT, LES ALERTES SE HIÉRARCHISENT

   Trois familles s'ajoutent, et une quatrième disparaît de l'écran sans
   disparaître d'ici : le pied de méthode reste au gabarit (.tbl-methode).

   CE QUE CE LOT CORRIGE, ET QUI N'ÉTAIT PAS UNE QUESTION DE GOÛT
   1. QUATRE BANDEAUX PLEINE LARGEUR, dont trois en rouge, s'empilaient
      au-dessus de la table : trous de calendrier, collisions, dimanches
      perdus, collision hors exercice. Trois rouges côte à côte ne disent
      plus lequel est le défaut — ils disent seulement que l'écran crie.
      Le seul qui décide de quelque chose (une journée comptée travaillée
      parce que personne n'a posé la date) garde le rouge et son bouton ;
      les autres passent en bande de faits, où ils se COMPTENT au lieu de
      s'énumérer.
   2. LA NATURE ÉTAIT PEINTE EN COULEURS D'ÉTAT — `bg-primary-subtle`,
      `bg-warning-subtle`, `bg-danger-subtle` pour « Légal », « Pont »,
      « non renseignée ». Une nature est une IDENTITÉ : elle prend les
      teintes catégorielles (--et-cat-1..4), jamais --et-succes /
      --et-avertissement / --et-danger, qui sont réservés à l'état. Un
      pont n'est pas un avertissement, et un férié sans nature n'est pas
      une erreur — c'est une ligne à compléter.
   3. UN ÉCRAN DE JOURS FÉRIÉS NE MONTRAIT PAS L'ANNÉE. On lisait quinze
      lignes triées par date pour savoir que mai en porte trois et août
      aucun. La frise le donne d'un regard, et c'est la seule chose que
      la liste ne saura jamais faire.
   ==================================================================== */

/* --- La frise de l'exercice ---------------------------------------------
   Douze mois, la plage de chaque férié développée sur les mois qu'elle
   touche. Elle ne remplace pas la liste : elle en donne la RÉPARTITION,
   qui est ce qu'on vient vérifier avant d'arrêter un calendrier.

   La teinte vient de la nature, par --fer-teinte que la page pose sur la
   ligne (même patron que --vig d'easycompta-vignette.css) : aucune
   couleur n'est écrite ici, et une cinquième nature n'ajoutera pas une
   règle de plus. */
/* Le corps de la carte de frise. Il ne prend PAS .mx-carte-corps du gabarit :
   celui-ci ne pose aucune gouttière latérale (14px 0), parce qu'il est fait pour
   une table qui court d'un bord à l'autre. La frise, elle, est une grille bordée
   et doit respirer aux deux bords. Une classe propre plutôt qu'une surcharge du
   gabarit depuis une feuille d'écran — l'inverse ferait dépendre le gabarit de
   qui le charge en dernier. */
.fer-frise-corps { padding: 12px 14px; }

.fer-frise {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    background: var(--et-hairline);
    border: 1px solid var(--et-hairline);
}

.fer-mois {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 7px 6px 9px;
    background: var(--et-surface);
}

/* Un mois SANS férié n'est pas une case ratée : c'est l'information. Il se
   distingue par son fond, pas par un texte — sinon douze « aucun » pèsent
   plus que les quatorze jours qu'on est venu lire. */
.fer-mois.est-vide { background: var(--et-surface-2); }

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

.fer-mois.est-vide .fer-mois-lbl { color: var(--et-inerte); }

.fer-mois-jours { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Le jour. Bouton : il ouvre la fiche, comme la rangée de la liste — un
   même objet s'ouvre du même geste partout. */
.fer-jour {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 3px 6px 4px 7px;
    border: 0;
    border-left: 3px solid var(--fer-teinte, var(--et-neutre));
    border-radius: var(--et-r-btn);
    background: var(--et-surface-2);
    text-align: left;
    cursor: pointer;
}

.fer-jour:hover { background: var(--et-rang); }
.fer-jour:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }

/* Désactivé pour l'exercice : le jour existe, il ne s'applique pas. Le
   filet devient pointillé et l'encre passe au rang inerte — la teinte de
   nature reste lisible, on doit pouvoir dire CE QU'on a désactivé. */
.fer-jour.est-inactif { border-left-style: dashed; }
.fer-jour.est-inactif .fer-jour-lbl { color: var(--et-inerte); }

.fer-jour-rang { display: flex; align-items: baseline; gap: 5px; min-width: 0; }

.fer-jour-n {
    flex: none;
    font-family: var(--et-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--et-ink);
}

/* Le jour de la semaine, en clair. C'est lui qu'on cherche : un férié qui
   tombe un dimanche ne rend rien de plus, et la liste ne le disait que
   dans une colonne masquée par défaut. */
.fer-jour-jsem { flex: none; font-size: 12px; color: var(--et-faint); }
.fer-jour-jsem.est-dimanche { color: var(--et-avertissement-ink); font-weight: 600; }

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

/* La collision : deux fériés actifs sur la même journée. Un glyphe, pas un
   aplat — l'aplat dirait « erreur », et une collision est parfois réelle
   (l'Aïd el-Fitr peut tomber le 1ᵉʳ mai). Encre du rang -ink : à 12 px on
   n'atteint pas le palier « grand texte ». */
.fer-jour-choc { margin-left: 4px; font-size: 12px; color: var(--et-danger-ink); }

/* --- Les paliers ---------------------------------------------------------
   Douze colonnes ne tiennent pas sous 1024 px. Six, puis trois : les mois
   restent dans l'ordre de lecture, et une saison reste sur une ligne.
   Géométrie seule — aucune couleur ici. Voir docs/conventions-responsive.md. */
@media (max-width: 1024px) {
    .fer-frise { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    /* Cible tactile : la même règle que lot02 pose sur la coquille et la
       liste. Un jour de la frise s'ouvre au doigt comme au curseur. */
    .fer-jour { min-height: 44px; padding-top: 6px; padding-bottom: 7px; }
}

@media (max-width: 640px) {
    .fer-frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- L'occurrence manquante, dans la liste ------------------------------
   Le seul endroit de l'écran où une encre d'état est justifiée : la cellule
   annonce une journée qui sera comptée travaillée. Rang -ink, et mesuré
   contre le fond le plus sombre que la rangée prend (--et-rang au survol),
   pas contre le blanc. */
.fer-manque { color: var(--et-danger-ink); font-weight: 600; }

/* --- La nature, dans la cellule -----------------------------------------
   La marque catégorielle et son libellé, du même dessin que la légende de la
   frise : c'est la MÊME information, et deux dessins pour une information en
   feraient deux. Pas une .mx-pastille — la pastille du gabarit trace déjà son
   propre point en `currentColor`, et la marque d'identité en aurait fait un
   second, de deux couleurs différentes. */
.fer-nature { display: inline-flex; align-items: center; gap: 6px; }

/* --- Le récapitulatif de l'assistant : deux rangs de puce ----------------
   La puce était bleue partout, y compris sur les lignes qui annoncent une
   NON-reprise. Une même marque pour « on crée » et « on ne crée pas » est
   la seule chose que ce récapitulatif ne doit pas faire. */
.fer-recap-pt.est-retire { background: var(--et-neutre); }
.fer-recap-titre.est-retire { color: var(--et-muted); }