/* =============================================================================
   LA LISTE D'ATTENTE — lot `ATT-1`, 28/08/2026.

   ⚠️  ELLE N'INVENTE AUCUNE COULEUR. Les six variables viennent de `hub.css`
       (`--vert`, `--rouge`, `--or`, `--gris`, `--bleu-clair`, `--texte`). Une
       teinte écrite en dur ici serait la seule du logiciel à ne pas suivre le
       jour où la palette change.

   ⚠️  LE DÉFILEMENT VIT DANS LES LISTES, JAMAIS DANS LA PAGE (`V3-y` ①). C'est
       le défaut trouvé sur l'écran Journal le 28/08 : la page entière glissait
       sous le bandeau. Ici chaque bloc a son propre cadre et sa propre barre.
   ============================================================================= */

/* ⚠️  LA HAUTEUR SE CALCULE PAR LE NAVIGATEUR, PAS PAR MOI — corrigé le 28/08,
       à l'écran. La première version portait `max-height: calc(var(--utile) −
       330px)` : **98 px de vide sous les deux colonnes**, mesurés. Le nombre
       330 était une estimation du bandeau de tête, et une estimation est fausse
       dès que le texte change de nombre de lignes — ou que l'écran change de
       largeur.

       `.page.reglages` est DÉJÀ `display: flex`, hauteur pleine et
       `overflow: hidden` (mesuré). Il suffit donc de laisser `#listes` prendre
       ce qui reste. Plus aucun nombre magique, et la page ne défile toujours
       pas : `pageDefile = 0`, mesuré. */
#listes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;   /* sans lui, un enfant qui déborde pousse le parent flex */
}

/* Sur un écran étroit — le X230 en portrait, une tablette — les deux blocs se
   remettent l'un sous l'autre plutôt que de se serrer jusqu'à l'illisible. */
@media (max-width: 900px) {
  #listes { grid-template-columns: 1fr; }
}

.bloc-attente {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bloc-attente > h2 {
  flex: 0 0 auto;
  margin: 0 0 8px;
  font-size: 1rem;
  letter-spacing: .02em;
}

.bloc-attente .compte {
  color: var(--gris);
  font-weight: 400;
}

/* Le cadre qui défile. Il prend ce qui reste dans son bloc, et la barre de
   défilement vit ICI — jamais dans la page (`V3-y` ①). C'est le défaut trouvé
   sur l'écran Journal le 28/08 : la page entière glissait sous le bandeau. */
#liste-attente,
#liste-passe {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* -----------------------------------------------------------------------------
   UNE PERSONNE
   -------------------------------------------------------------------------- */
.carte.attente {
  margin-bottom: 10px;
  padding: 10px 12px;
}

/* ⚠️  `center`, PAS `baseline` : le numéro porte une cible tactile de 60 px
       (§1), et une boîte de 60 px alignée sur sa ligne de base pousse le nom
       vers le haut de la carte. Deux règles justes qui se contredisent à
       l'écran — c'est l'alignement qui cède, pas la cible. */
.carte.attente .tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.carte.attente .tete strong { font-size: 1.0625rem; }

.carte.attente .tel {
  color: var(--or);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  /* §1 — la plus petite cible tactile du logiciel. Un numéro qu'on rappelle au
     comptoir se tape avec un pouce, pas avec une souris. */
  min-height: var(--cible);
  display: inline-flex;
  align-items: center;
}

.carte.attente .q {
  color: var(--gris);
  font-size: .8125rem;
}

/* Celui qui vient d'être prévenu se distingue : c'est lui qu'on rappelle si le
   téléphone sonne. Un liseré, pas un fond — la carte reste lisible. */
.carte.attente.prevenu { border-left: 3px solid var(--or); }

/* -----------------------------------------------------------------------------
   LES JOURS COCHÉS
   -------------------------------------------------------------------------- */
.plages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.plage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--bleu-clair);
  border-radius: 6px;
  font-size: .8125rem;
  white-space: nowrap;
}

.plage em {
  font-style: normal;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

/* ⚠️  UN JOUR PASSÉ RESTE AFFICHÉ. Rien ne se supprime, et David doit pouvoir
       lire ce que la personne avait demandé — même si c'est révolu. Il est
       grisé, pas retiré. */
.plage.passee {
  opacity: .45;
  text-decoration: line-through;
}

.plage.choisi { border-color: var(--or); }

.plage .oter {
  background: none;
  border: 0;
  color: var(--gris);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.plage .oter:hover { color: var(--rouge); }

/* -----------------------------------------------------------------------------
   L'ÉTAT
   -------------------------------------------------------------------------- */
.carte.attente .etat {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.statut {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}

.statut.waiting   { background: var(--bleu-clair); color: var(--texte); }
.statut.notified  { background: var(--or);         color: #1B2A41; }
.statut.booked    { background: var(--vert);       color: #fff; }
.statut.cancelled { background: var(--bleu-clair); color: var(--gris); }
.statut.expired   { background: var(--bleu-clair); color: var(--gris); }

/* ⛔ C'EST UNE INFORMATION, PAS UNE BARRIÈRE (`B000-D260`). Elle dit que plus
      aucun SMS ne partira pour cette personne ; les deux boutons restent
      actifs juste en dessous. */
.carte.attente .bandeau-alerte {
  margin: 6px 0;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(196, 69, 58, .16);
  color: var(--texte);
  font-size: .8125rem;
}

.carte.attente.sans-avenir { opacity: .8; }

/* -----------------------------------------------------------------------------
   LA FICHE D'AJOUT
   -------------------------------------------------------------------------- */
.titre-jours {
  margin: 14px 0 6px;
  font-size: .9375rem;
}

.ajout-jour {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ajout-jour label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .8125rem;
  color: var(--gris);
}

.ajout-jour input {
  min-height: var(--cible);
  font-size: 1rem;
}