/* ============================================================================
   ÉCRAN — EXERCICES & PÉRIODES (CPT-02)

   Feuille d'ÉCRAN. Préfixe .exp-, et non le .ep- de la maquette : .ep- est le
   préfixe d'EasyPaie (easypaie.css, 186 règles) et .ep-corps y est DÉJÀ défini.
   Reprendre le préfixe de la maquette aurait fait hériter la grille de la paie
   à un écran de comptabilité — sans erreur, sans avertissement, et sans que
   rien à la lecture du Razor ne le montre.

   CE QUI N'EST PAS ICI : la bande d'indicateurs (.exp-faits / .exp-fait,
   feuille de module css/easycompta-vignette.css), le cadre de liste (.tbl-*,
   easytime-shell.css), les fenêtres (ModalCadre) et l'ossature d'écran
   (EcranCompta). Cette feuille ne pose que le calendrier des périodes et la
   colonne éditoriale du tableau des exercices.
   ========================================================================== */

/* ============================================================================
   LA LISTE ET SON PANNEAU DE CONTEXTE (2026-09-07)

   Deux colonnes : la liste prend ce qui reste, le panneau garde 300 px. La piste de
   la liste est en minmax(0, 1fr) et non en 1fr — sans le minimum à zéro, une piste de
   grille ne descend pas sous le contenu de son tableau, et la table ancrée (Tableau,
   Ancree="true") pousserait la colonne du panneau hors de l'écran au lieu de défiler
   dans la sienne.

   Le calendrier des périodes reste SOUS les deux colonnes, sur toute la largeur : ses
   douze cases sont faites pour se voir d'un coup (choix de la maquette), et douze cases
   dans une colonne amputée de 300 px ne se voient plus d'un coup.
   ========================================================================== */
.appgrid .exp-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
}
.appgrid .exp-colonne-liste { min-width: 0; }

.appgrid .exp-volet {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
}

/* L'ÉTAT VIDE EST UNE PHRASE, PAS UN BLANC : un panneau vide sans un mot se lit comme
   un panneau en panne. Il dit ce qu'il faut faire pour le remplir. */
.appgrid .exp-volet-vide {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 8px;
  color: var(--et-muted); font-size: 12px; line-height: 1.5; text-align: center;
}
.appgrid .exp-volet-vide i { font-size: 20px; color: var(--et-inerte); }

.appgrid .exp-volet-tete {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--et-hairline);
}
.appgrid .exp-volet-mil {
  margin-right: auto;
  font-family: var(--et-font-mono); font-size: 20px; font-weight: 700; color: var(--et-ink);
}

/* L'IDENTITÉ EN LISTE DE DÉFINITIONS, et non en grille de formulaire : le libellé de la
   charte est une colonne de 120 px alignée à droite, ce qui ne laisserait que 160 px à la
   valeur dans un panneau de 300. Ici l'intitulé est AU-DESSUS, en petites capitales. */
.appgrid .exp-volet-champs { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.appgrid .exp-volet-champs dt {
  font-size: 12px; font-weight: 600; color: var(--et-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.appgrid .exp-volet-champs dd {
  margin: 2px 0 0; font-size: 13px; color: var(--et-ink); line-height: 1.4;
  overflow-wrap: anywhere;
}
.appgrid .exp-volet-champs dd.mono { font-family: var(--et-font-mono); font-size: 12px; }

.appgrid .exp-volet-bloc {
  padding-top: 10px;
  border-top: 1px solid var(--et-hairline);
}
.appgrid .exp-volet-eti {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--et-ink);
}
.appgrid .exp-volet-eti .mono {
  font-family: var(--et-font-mono); font-size: 14px; font-variant-numeric: tabular-nums;
}
/* Un brouillon en attente n'est pas une faute : c'est une échéance. L'ambre, et en rang
   -ink puisque c'est de l'encre — --et-avertissement ne passe AA sur aucun fond clair. */
.appgrid .exp-volet-eti .mono.est-attente { color: var(--et-avertissement-ink); }
.appgrid .exp-volet-note {
  margin-top: 4px; font-size: 12px; color: var(--et-muted); line-height: 1.45;
}

/* LA JAUGE D'AVANCEMENT. Le remplissage est une MARQUE — à ce titre une couleur d'état y
   est admise (seuil graphique 3:1), là où la même couleur en encre ne le serait pas. */
.appgrid .exp-jauge {
  margin-top: 6px; height: 6px; background: var(--et-neutre-bg); overflow: hidden;
}
.appgrid .exp-jauge > span { display: block; height: 100%; background: var(--et-succes); }

/* LE DÉTAIL DES TROIS ÉTATS. Mêmes encres que les cases du calendrier plus bas — c'est le
   même vocabulaire d'état sur le même écran, il ne se dit pas de deux façons. */
.appgrid .exp-volet-etats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.appgrid .exp-volet-etat {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 8px;
  background: var(--et-neutre-bg);
  border-top: 3px solid var(--et-inerte);
}
.appgrid .exp-volet-etat .v {
  font-family: var(--et-font-mono); font-size: 16px; font-weight: 700; color: var(--et-ink);
}
.appgrid .exp-volet-etat .n { font-size: 12px; color: var(--et-muted); }
.appgrid .exp-volet-etat[data-etat="ouverte"] { border-top-color: var(--et-succes); }
.appgrid .exp-volet-etat[data-etat="arretee"] { border-top-color: var(--et-avertissement-mark); }
.appgrid .exp-volet-etat[data-etat="fermee"]  { border-top-color: var(--et-inerte); }
.appgrid .exp-volet-etat[data-etat="ouverte"] .n { color: var(--et-succes-ink); }
.appgrid .exp-volet-etat[data-etat="arretee"] .n { color: var(--et-avertissement-ink); }

/* Sous 1100 px le panneau passe SOUS la liste plutôt que de lui prendre 300 px : à cette
   largeur la table ancrée défile déjà, et lui retirer un quart de la place la ferait
   défiler sur toutes ses colonnes. Palier de l'échelle retenue
   (docs/conventions-responsive.md) ; géométrie seulement. */
@media (max-width: 1100px) {
  .appgrid .exp-colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* LE CALENDRIER DES PÉRIODES — pourquoi une grille et non un tableau.
   Douze périodes en tableau, c'est douze lignes qu'on lit une par une pour
   répondre à « où en est l'exercice ? ». En grille de mois, l'état de l'année
   se voit d'un coup : c'est la question que l'écran sert, et le tableau ne la
   servait pas. Six colonnes = deux semestres par ligne. */
.appgrid .exp-mois { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }

/* La case est un <button> et non un <div> : elle se coche, donc elle se tabule
   et se déclenche au clavier. Le bord haut de 3 px porte l'état — c'est la
   seule couleur de la case, et elle vient toujours d'un jeton d'état. */
.appgrid .exp-case {
  padding: 9px 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-form-border);
  border-top: 3px solid var(--et-inerte);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.appgrid .exp-case:hover { border-color: var(--et-form-blue); }
.appgrid .exp-case.est-choisi { background: var(--et-tint); border-color: var(--et-form-blue); }

.appgrid .exp-case-tete { display: flex; align-items: baseline; gap: 7px; }
.appgrid .exp-case-num { font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .exp-case-nom { font-size: 12px; color: var(--et-ink); }
.appgrid .exp-case-coche { margin-left: auto; font-size: 12px; color: var(--et-form-blue); }
.appgrid .exp-case-etat { margin-top: 5px; font-size: 12px; font-weight: 600; }

/* LES TROIS ÉTATS D'UNE PÉRIODE (db/1454), portés par data-etat et non par un
   style en ligne.

   *** POURQUOI CE BLOC EXISTE, ET CE QU'IL CORRIGE ***
   L'écran écrivait « style="color:@teinte" » avec teinte = var(--et-succes).
   C'est une couleur d'état posée en ENCRE, ce que la charte interdit — et le
   balayage de la révision de valeurs ne pouvait pas la voir : le nom du jeton
   n'est pas sur la même ligne que le « color: », il vient d'une variable Razor.
   Un contrôle ne vaut que sur la forme qu'il sait lire ; la sortie est de ne
   plus écrire de couleur dans la page du tout.

   DEUX RANGS PAR ÉTAT, et ce n'est pas une redondance : le liseré est une
   MARQUE, l'état est une ENCRE. Pour l'ambre les deux diffèrent vraiment —
   --et-avertissement ne passe le seuil graphique de 3:1 sur aucun des fonds
   qu'il rencontre (2,15:1), d'où --et-avertissement-mark pour le trait ; et
   --et-avertissement-ink, plus sombre encore, pour le texte. */
.appgrid .exp-case[data-etat="ouverte"] { border-top-color: var(--et-succes); }
.appgrid .exp-case[data-etat="arretee"] { border-top-color: var(--et-avertissement-mark); }
.appgrid .exp-case[data-etat="fermee"]  { border-top-color: var(--et-inerte); }

.appgrid .exp-case[data-etat="ouverte"] .exp-case-etat { color: var(--et-succes-ink); }
.appgrid .exp-case[data-etat="arretee"] .exp-case-etat { color: var(--et-avertissement-ink); }
.appgrid .exp-case[data-etat="fermee"]  .exp-case-etat { color: var(--et-muted); }
.appgrid .exp-case-nb { margin-top: 3px; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.appgrid .exp-case-alerte { margin-top: 4px; font-size: 12px; color: var(--et-danger-ink); line-height: 1.3; }

/* LA NOTE DE CONSÉQUENCE, sous le calendrier. Elle dit ce qu'une fermeture
   produit ailleurs (SAI-02, SAI-04) : c'est la moitié de l'écran que la
   maquette ajoute, et elle ne se devine pas depuis un bouton « Fermer ». */
.appgrid .exp-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--et-neutre-bg);
  font-size: 12px;
  color: var(--et-ink);
  line-height: 1.5;
}

/* CE QUE L'ÉCRAN AJOUTE À LA RANGÉE DU GABARIT.
   .exp-rang et .exp-autorise ont été retirés le 2026-09-07 : la liste des exercices est
   passée au gabarit (Tableau), qui apporte la rangée et son curseur, et « ce que l'état
   autorise » est devenue une colonne déclarée — le gabarit gère son rendu et son export.
   Le CALENDRIER DES PÉRIODES plus bas n'a pas bougé : ce n'est pas une table, c'est le
   choix de la maquette (« douze cases se voient d'un coup »). */

/* La rangée dont l'exercice est affiché au calendrier. Sélecteur plus spécifique plutôt
   qu'un !important : elle doit primer sur les fonds du gabarit sans les interdire. */
.appgrid .tbl tbody tr.exp-ligne-choisie > td { background: var(--et-tint); }
.appgrid .tbl tbody tr.exp-ligne-choisie > td:first-child { box-shadow: inset 3px 0 0 var(--et-form-blue); }

/* LES CELLULES PROPRES AUX EXERCICES */
.appgrid .exp-mil {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--et-font-mono); font-size: 13px; font-weight: 600;
}
/* Le millésime porte sa marque de PREMIER EXERCICE — celui qui n'attend aucun à-nouveau
   en entrée. C'est une propriété du dossier, pas un état : teinte neutre, jamais une
   couleur d'état. */
.appgrid .exp-premier {
  padding: 0 5px;
  background: var(--et-neutre-bg); color: var(--et-neutre);
  font-family: var(--et-font); font-size: 12px; font-weight: 600;
}
.appgrid .exp-bornes { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }
/* Un exercice clôturé n'est pas en défaut : il est hors d'atteinte. D'où le neutre, et
   non l'ambre — l'ink posé sur son propre aplat, comme partout ailleurs. */
.appgrid .exp-cloture {
  display: inline-block; padding: 1px 6px; white-space: nowrap;
  background: var(--et-neutre-bg); color: var(--et-neutre);
  font-size: 12px; font-weight: 600;
}
/* Sous 1024 px, trois colonnes : six cases de 12 sur une ligne restent
   lisibles sur une tablette, six ne le sont plus. Géométrie seulement — la
   règle des paliers est docs/conventions-responsive.md. */
@media (max-width: 1024px) {
  .appgrid .exp-mois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .appgrid .exp-mois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}