/* ══════════════════════════════════════════════════════════════════════════════════════════
   ecrans.css — MISE EN PAGE DES ÉCRANS AJOUTÉS LE 09/09/2026 (points G, H, K).
   Fichier NEUF : app.css n'est pas touché, pas d'une ligne.

   RÈGLE TENUE À LA LETTRE : pas une couleur, pas une police, pas un rayon, pas une ombre,
   pas une opacité, pas un flou en dur. Chaque valeur visuelle est un jeton d'app.css
   (--fond-*, --bord*, --encre-*, --signal*, --rouge, --jaune, --vert, --rayon*, --police*,
   --transition). Ce qui est écrit ici en pixels, ce sont des GÉOMÉTRIES : largeurs de colonne,
   hauteurs de barre, gouttières — pas des décisions d'apparence.

   Et tout ce qui est large défile DANS SA BOÎTE. La page ne glisse jamais latéralement (point D).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── LE DIAGRAMME DE GANTT ─────────────────────────────────────────────────────────────── */

.gantt {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-1);
  overflow-x: auto;              /* la piste défile ici, jamais la page */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Une rangée : libellé (fixe) · piste (élastique) · terme (fixe). En dessous de 640 px, le
   libellé passe au-dessus de sa piste — sinon il ne reste rien pour dessiner la barre. */
.gantt-rangee,
.gantt-echelle {
  display: grid;
  grid-template-columns: 190px minmax(320px, 1fr) 120px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  min-width: 640px;              /* le minimum lisible ; en dessous, la boîte défile */
}

.gantt-echelle {
  display: grid;
  grid-template-columns: 190px minmax(320px, 1fr) 120px;
  border-bottom: 1px solid var(--bord);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--encre-4);
  font-family: var(--mono);
}
/* Les repères de mois vivent dans la colonne du milieu, sur leur propre grille. */
.gantt-echelle > span { grid-row: 1; }

.gantt-rangee {
  border-bottom: 1px solid var(--bord);
  min-height: 44px;              /* la cible tactile de la ligne */
  transition: background var(--transition);
}
.gantt-rangee:last-child { border-bottom: none; }
.gantt-rangee:hover { background: var(--fond-survol); }

.gantt-lib {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 0;
}
.gantt-titre {
  font-size: 12.5px;
  color: var(--encre-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.gantt-qui { font-size: 11px; color: var(--encre-4); white-space: nowrap; }

.gantt-piste {
  display: grid;
  align-items: center;
  position: relative;
  height: 26px;
  background: var(--fond-2);
  border-radius: var(--rayon);
}

/* Le trait d'aujourd'hui : un repère, pas une donnée. */
.gantt-aujourdhui {
  grid-row: 1;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: var(--encre-4);
}

.gantt-barre {
  grid-row: 1;
  height: 14px;
  border-radius: var(--rayon);
  background: var(--signal-doux);
  border: 1px solid var(--signal-bord);
  position: relative;
  overflow: hidden;
  min-width: 4px;
}
/* Une tâche a un début ET une fin réels : barre pleine.
   Un marché n'a qu'une date (la clôture) : la barre est hachurée, pour dire qu'elle
   représente le temps qui reste et NON une durée de travail estimée. */
.gantt-barre[data-b="jusqu_a_echeance"] {
  background: repeating-linear-gradient(115deg, var(--signal-doux) 0 6px, transparent 6px 12px);
}
.gantt-barre[data-r="oui"] { border-color: var(--rouge); background: var(--fond-3); }
/* L'avancement, quand la base le porte. Jamais dessiné quand il n'est pas mesuré. */
.gantt-barre > u {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--signal);
  border-radius: var(--rayon);
}

.gantt-fin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11.5px;
  color: var(--encre-3);
  white-space: nowrap;
}

/* ── LES DEUX COLONNES DES TÂCHES (point K) ────────────────────────────────────────────── */

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
/* ── LA COLONNE NE SE LAISSE PLUS ÉLARGIR PAR SON CONTENU (23/09/2026, ordre Cheick) ───────────
   MESURÉ À 390 px SUR L'ÉCRAN TÂCHES : la règle de repli ci-dessous passe bien la grille à UNE
   colonne sous 900 px — et pourtant `grid-template-columns` calculé valait `831.156px`, pas 360.
   Onze éléments sortaient de l'écran : l'en-tête « CE QUI T'ATTEND », les filtres, la liste
   entière, chaque ligne, chaque titre. Coupés net, sans barre de défilement (le `body` est en
   `overflow-x: hidden`) : la moitié droite de la page n'existait pas pour Cheick.

   POURQUOI : un enfant de grille vaut `min-width: auto` par défaut, c'est-à-dire « jamais plus
   étroit que mon contenu ». Une piste `1fr` ne peut donc pas descendre sous la largeur minimale de
   ce qu'elle contient — ici un titre de tâche en `white-space: nowrap`. La piste grossit, la grille
   grossit, l'écran est dépassé. Le `1fr` n'y peut rien : ce n'est pas lui qui décide.

   `min-width: 0` rend à la piste le droit d'être plus étroite que son contenu ; le titre reprend
   alors ses points de suspension (`text-overflow: ellipsis`, déjà posé dans app.css) et les filtres
   se replient (`flex-wrap: wrap`, déjà posé plus bas). Aucune donnée n'est masquée — ce qui était
   HORS de l'écran y rentre. Posé sans media query : une colonne ne doit jamais élargir sa grille,
   quelle que soit la largeur de l'écran. */
.deux-colonnes > * { min-width: 0; }
.colonne-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--police-titre);
  font-size: 13px;
  color: var(--encre-1);
}
.colonne-tete .compte {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--encre-3);
}

/* Les filtres d'une colonne : une rangée de puces, jamais un déversement (point K). */
.filtres {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.filtres button {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--encre-3);
  font-family: var(--police);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtres button:hover { background: var(--fond-survol); color: var(--encre-1); }
.filtres button[aria-pressed="true"] {
  border-color: var(--signal-bord);
  background: var(--signal-doux);
  color: var(--encre-1);
}

/* Une ligne qui vient d'être tranchée : elle change d'état AVANT le serveur (point K). */
.ligne[data-tranche] { border-left: 2px solid var(--bord-fort); }
.ligne[data-tranche="valide"] { border-left-color: var(--vert); }
.ligne[data-tranche="refuse"] { border-left-color: var(--rouge); }
.ligne[data-tranche="revenue"] { border-left-color: var(--jaune); }
.ligne[data-envoi="en_cours"] { opacity: .55; }

.geste-oui, .geste-non {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  cursor: pointer;
  font-size: 15px;
  transition: background var(--transition), border-color var(--transition);
}
.geste-oui:hover { border-color: var(--vert); background: var(--fond-survol); }
.geste-non:hover { border-color: var(--rouge); background: var(--fond-survol); }
.geste-oui[disabled], .geste-non[disabled] { cursor: default; }

/* Le message court avec « Annuler », le temps de se raviser. */
.annulable {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  margin-top: 8px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-2);
  font-size: 12.5px;
  color: var(--encre-2);
}
.annulable button {
  margin-left: auto;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--rayon);
  border: 1px solid var(--bord-fort);
  background: var(--fond-3);
  color: var(--encre-1);
  font-family: var(--police);
  font-size: 12px;
  cursor: pointer;
}
.annulable button:hover { background: var(--fond-survol); }

/* ── LES SOUS-ONGLETS DE CANAL (point G) ───────────────────────────────────────────────── */

.sous-onglets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.sous-onglets::-webkit-scrollbar { display: none; }
.sous-onglet {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--encre-3);
  font-family: var(--police);
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sous-onglet:hover { background: var(--fond-survol); color: var(--encre-1); }
.sous-onglet[aria-selected="true"] {
  border-color: var(--signal-bord);
  background: var(--signal-doux);
  color: var(--encre-1);
}
.sous-onglet .pt {
  width: 6px;
  height: 6px;
  border-radius: var(--rayon);
  flex: 0 0 auto;
}
.sous-onglet .n { font-family: var(--mono); font-size: 11px; color: var(--encre-3); }

/* ── AU DOIGT : sous 900 px, tout tient dans 390 (point D) ─────────────────────────────── */

@media (max-width: 900px) {
  /* Deux colonnes de tâches sur un téléphone : elles s'empilent, la colonne de Cheick d'abord. */
  .deux-colonnes { grid-template-columns: 1fr; gap: 22px; }

  /* Le Gantt : le libellé passe AU-DESSUS de sa piste. Sur 390 px, une colonne de 190 px pour
     le titre et 120 pour le terme ne laissaient que 60 px de piste — une barre invisible. */
  .gantt-rangee {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lib fin" "piste piste";
    min-width: 0;
    gap: 4px 10px;
    padding: 8px 10px;
  }
  .gantt-lib { grid-area: lib; }
  .gantt-fin { grid-area: fin; }
  .gantt-piste { grid-area: piste; }
  .gantt-echelle { display: none; }         /* l'échelle de mois n'est pas lisible sur 390 px */
  .gantt { overflow-x: hidden; }            /* plus rien ne dépasse : il n'y a plus de min-width */

  /* MESURÉ le 23/09/2026 au navigateur à 390 px, sur #taches : les quatre puces de filtre des
     validations (« tous 4541 », « email outbound 4412 », « ao st decision 75 », « tool action 53 »)
     faisaient 36 px de haut — sous le minimum de 44 px d'une cible tactile. Trois écrans portent
     cette classe (validations, ordre d'affichage AO, onglets du stock AO) : ils passent ensemble.
     Le padding suit, sinon le texte flotte en haut de la puce au lieu d'être centré. */
  .filtres button { min-height: 44px; padding: 8px 12px; }
  .colonne-tete { font-size: 14px; }
}