/* ===========================================================================
   Vue HEURES -- saisie mobile (phase 5, etape 7)

   FEUILLE A PART, comme le module JS : `style.css` frole les 1600 lignes et ne
   porte que les surfaces des TACHES. Les heures sont un autre MODULE de JIMAYA.

   TOUTES LES CIBLES A 44 px DE HAUT AU DOIGT, et toutes les polices de saisie a
   16 px : en dessous, Safari iOS ZOOME a la mise au point et n'en revient pas.
   Le defaut a ete paye QUATRE fois dans ce projet (carte d'edition, `.kadd`,
   menu de date, page Configuration) -- il ne sera pas paye une cinquieme.

   Les jetons viennent de `charte.css` : aucun bleu, aucun gris en dur ici.
   =========================================================================== */

.heures { max-width: 720px; margin: 0 auto; padding: .5rem .6rem 2rem; }

/* --- barre de jour ------------------------------------------------------- */
.h-jour {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .3rem 0 .6rem;
}
/* LES FLECHES DE JOUR SONT DE LA NAVIGATION PRINCIPALE, pas un raccourci
   d'appoint : c'est par elles qu'on rattrape un oubli de la veille. `.btn-mini`
   les posait a 34 px -- sous la cible tenable au doigt. Mesure du banc. */
.h-jour .btn-mini {
  font-size: 1.2rem; line-height: 1; padding: .3rem .8rem; min-height: 44px;
  min-width: 44px;
}
.h-jour-lib {
  font: 1.05rem var(--mono); color: var(--encre); min-width: 5.5em; text-align: center;
}
/* Le calendrier natif reste ATTEIGNABLE mais discret : les fleches couvrent le
   cas courant (hier, avant-hier), le calendrier sert au rattrapage lointain. */
.h-date {
  font: .8rem var(--sans); padding: .25rem .35rem; border: 1px solid var(--bord);
  border-radius: 4px; background: var(--carte); color: var(--encre-2);
}
.h-total {
  margin-left: auto; font: 600 1.05rem var(--mono); color: var(--sapin);
}

/* --- carte de saisie ----------------------------------------------------- */
/* Une CARTE UNIQUE, un seul envoi -- design repris du module JIMMA. */
.h-carte {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 6px;
  padding: .6rem; box-shadow: var(--ombre);
}
.h-mandat {
  font: 16px var(--sans); padding: .55rem .5rem; width: 100%; min-height: 44px;
  border: 1px solid var(--bord-fort); border-radius: 4px; background: #fff;
  color: var(--encre);
}

/* --- pastilles : ce qui est frequent se touche UNE fois ------------------- */
/* `flex-wrap` et non un defilement horizontal : une pastille hors de l'ecran
   n'est pas un raccourci, c'est une devinette. Deux rangs valent mieux qu'un
   rang tronque. */
.h-past-rang { display: flex; flex-wrap: wrap; gap: .3rem; align-items: stretch; }
.h-past {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: .35rem .6rem; cursor: pointer;
  font: .85rem var(--sans); color: var(--encre);
  background: var(--papier-2); border: 1px solid var(--bord); border-radius: 20px;
  user-select: none;
}
/* Radio VISUELLEMENT MASQUE, l'etat est porte par la pastille -- meme
   mecanisme que `.kprio` du formulaire d'ajout de tache. */
.h-past input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none;
}
.h-past:has(input:checked) {
  background: var(--sapin); border-color: var(--sapin); color: #fff; font-weight: 600;
}
.h-duree { min-width: 3.2em; font-family: var(--mono); }

/* Le selecteur « autre… » et le champ de duree libre partagent l'allure des
   pastilles : ils sont du MEME rang, ils ne doivent pas paraitre d'un autre
   etage. `.actif` les marque quand ils portent la valeur retenue. */
.h-autre {
  min-height: 40px; padding: .35rem .5rem; font: 16px var(--sans);
  background: var(--papier-2); border: 1px solid var(--bord); border-radius: 20px;
  color: var(--encre-2); max-width: 10em;
}
.h-autre.actif { border-color: var(--sapin); color: var(--sapin); font-weight: 600; }
.h-libre { max-width: 5.5em; text-align: center; font-family: var(--mono); }

/* --- bas de carte -------------------------------------------------------- */
.h-bas { display: flex; gap: .4rem; align-items: center; }
.h-rem {
  flex: 1 1 auto; min-width: 0;      /* INDISPENSABLE : un item flex ne passe
                                        pas sous sa taille de contenu sans lui */
  font: 16px var(--sans); padding: .5rem; min-height: 44px;
  border: 1px solid var(--bord); border-radius: 4px; background: #fff;
}
.h-envoi {
  flex: none; font: 600 .95rem var(--sans-fort); cursor: pointer; white-space: nowrap;
  background: var(--sapin); color: #fff; border: none; border-radius: 4px;
  padding: .6rem 1rem; min-height: 44px;
}

/* --- lignes du jour ------------------------------------------------------ */
.h-liste { margin-top: .8rem; display: flex; flex-direction: column; gap: .3rem; }
.h-ligne {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .55rem; background: var(--carte);
  border: 1px solid var(--bord); border-radius: 5px;
}
/* La DUREE en tete et en chiffres : c'est la colonne qu'on parcourt du regard
   pour verifier un total, pas le nom du mandat. */
.h-h {
  flex: none; min-width: 2.8em; text-align: right;
  font: 600 1.05rem var(--mono); color: var(--sapin);
}
/* `.h-txt` EST UN BOUTON depuis qu'il ouvre la correction : il faut donc lui
   retirer tout ce qu'un bouton apporte par defaut (fond, bordure, police du
   systeme, texte centre) avant de lui redonner l'allure qu'il avait en div.
   `text-align: left` n'est pas cosmetique -- sans lui, un nom de mandat court
   se retrouve au MILIEU de la ligne et l'oeil ne suit plus la colonne. */
.h-txt {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem;
  background: none; border: none; padding: .25rem 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  align-items: flex-start;
}
.h-txt b { font: .9rem var(--sans-fort); color: var(--encre);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-type { font: .75rem var(--mono); color: var(--encre-2); }
.h-note { font: .78rem var(--sans); color: var(--encre-2); font-style: italic; }
.h-sup {
  flex: none; background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: .4rem; min-height: 44px; min-width: 44px;
  color: var(--encre-2);
}
.h-sup:hover { color: var(--rouge); }
.h-vide { color: var(--encre-2); font-style: italic; padding: .6rem .2rem; }

/* --- semaine : ce qui manque doit SE VOIR --------------------------------- */
/* Un jour a zero est invisible dans une liste de lignes. Ici il porte un point
   et une bordure en pointille -- on ne le lit pas, on le REPERE. */
.h-semaine { margin-top: 1.2rem; }
.h-cases { display: flex; gap: .25rem; }
.h-case {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .4rem .1rem; min-height: 44px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 4px;
}
.h-case.vide { border-style: dashed; background: transparent; }
.h-case.actif { border-color: var(--sapin); border-width: 2px; }
.h-case-j { font: .65rem var(--mono); color: var(--encre-2); text-transform: uppercase; }
.h-case-h { font: 600 .8rem var(--mono); color: var(--encre); }
.h-case.vide .h-case-h { color: var(--encre-2); font-weight: 400; }
.h-sem-tot {
  display: block; text-align: right; margin-top: .35rem;
  font: .8rem var(--mono); color: var(--encre-2);
}

/* --- mobile -------------------------------------------------------------- */
/* Selecteurs REPETES EN ENTIER : une media query n'ajoute AUCUNE specificite,
   redeclarer une propriete d'un raccourci `font:` la perdrait (piege de s13). */
@media (max-width: 820px) {
  .heures { padding: .4rem .5rem 3rem; }
  .h-past { min-height: 44px; font: .9rem var(--sans); padding: .4rem .7rem; }
  .h-duree { min-height: 44px; font-family: var(--mono); min-width: 3.4em; }
  .h-autre { min-height: 44px; font: 16px var(--sans); }
  .h-libre { max-width: 5em; text-align: center; font-family: var(--mono); }
  /* La remarque passe SOUS le bouton : a 390 px, un champ et « Enregistrer »
     sur la meme ligne laissent au champ moins de 12 caracteres utiles. */
  /* Selecteur REPETE EN ENTIER (une media query n'ajoute aucune specificite) */
  .h-jour .btn-mini { font-size: 1.3rem; min-height: 44px; min-width: 48px; }
  .h-bas { flex-wrap: wrap; }
  .h-rem { flex: 1 1 100%; }
  .h-envoi { flex: 1 1 100%; }
}

/* ===========================================================================
   CORRECTION D'UNE LIGNE -- editeur PARTAGE par les deux surfaces d'essai
   (`⏱ Heures` et `▦ Table`). Il vit dans CETTE feuille et non dans
   `tableau.css` : il n'appartient a aucune des deux, il appartient au module.
   =========================================================================== */

/* PANNEAU FIXE ET NON CARTE FLOTTANTE ANCREE A LA LIGNE. Une fenetre ancree,
   comme celle des tuiles, tient parce qu'elle porte quatre boutons ; ici il y a
   six champs de saisie, et le clavier d'iOS mange la moitie basse de l'ecran --
   une carte ancree a la derniere ligne du jour se retrouverait DESSOUS.
   `position: fixed` + centrage la garde toujours visible.
   `overflow-y: auto` et `max-height` : sur un iPhone SE clavier ouvert, il
   reste ~300 px de haut, la carte doit pouvoir defiler dans elle-meme plutot
   que de pousser la page. */
.he-fond {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem .7rem;
  background: rgba(19, 76, 108, .35);
}
.he-carte {
  width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--carte); border: 1px solid var(--bord-fort); border-radius: 8px;
  padding: .8rem; box-shadow: var(--ombre);
}
.he-titre { display: flex; align-items: center; gap: .5rem; }
.he-titre b { font: 1rem var(--sans-fort); color: var(--encre); }
.he-x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--encre-2); min-height: 44px; min-width: 44px;
}
.he-x:hover { color: var(--rouge); }

/* Le libelle AU-DESSUS du champ, jamais a cote : a 375 px, deux colonnes
   laissent au champ moins de la moitie de la largeur, et c'est le champ qu'on
   remplit. */
.he-champ {
  display: flex; flex-direction: column; gap: .15rem;
  font: .75rem var(--mono); color: var(--encre-2); text-transform: uppercase;
}
.he-champ input, .he-champ select {
  font: 16px var(--sans); padding: .5rem; min-height: 44px; width: 100%;
  border: 1px solid var(--bord-fort); border-radius: 4px; background: #fff;
  color: var(--encre); text-transform: none;
}
.he-rang { display: flex; gap: .5rem; }
.he-court { flex: 1 1 0; min-width: 0; }
.he-court input { font-family: var(--mono); }

/* L'ORIGINE DE LA LIGNE, ET C'EST LA SEULE CHOSE QUI DISTINGUE DEUX GESTES
   IDENTIQUES A L'ECRAN : corriger une ligne deja liee a Access modifiera la
   COMPTABILITE au prochain passage de la synchro ; corriger une ligne nee dans
   JIMAYA, non. */
.he-origine {
  font: .72rem var(--sans); color: var(--encre-2); font-style: italic;
  margin: 0; line-height: 1.3;
}

.he-bas { display: flex; gap: .4rem; }
.he-ok {
  flex: 1 1 auto; font: 600 .95rem var(--sans-fort); cursor: pointer;
  background: var(--sapin); color: #fff; border: none; border-radius: 4px;
  padding: .6rem 1rem; min-height: 44px;
}
.he-annuler {
  flex: none; font: .9rem var(--sans); cursor: pointer;
  background: var(--papier-2); color: var(--encre-2);
  border: 1px solid var(--bord); border-radius: 4px;
  padding: .6rem .9rem; min-height: 44px;
}