/* =============================================================================
   L'ÉCRAN DES ABONNEMENTS — lot `A-5`.

   `V3-y` : 1366 × 768 au doigt, ~725 px de budget de hauteur, cibles de 60 px,
   aucune barre de défilement. Deux ou trois cartes tiennent côte à côte ; la
   fiche s'ouvre en dessous et ne pousse rien hors du cadre.
   ============================================================================= */

.grille-abonnements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.carte.abonnement {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 16px;
}

.carte.abonnement .tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.carte.abonnement .tete strong { font-size: 1.08rem; }

/* Le chiffre est ce qu'on vient chercher : il se lit de loin. */
.carte.abonnement .reste {
  font-size: 1.9rem; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.carte.abonnement .reste strong { color: var(--or); }
.carte.abonnement .reste .illimite { font-size: 1.1rem; color: var(--vert); }
.carte.abonnement .reste .vide,
.carte.abonnement .reste .q { font-size: 1rem; }

/* ⚠️  L'ALERTE SE VOIT SANS ÊTRE LUE. Orange, pas rouge : il ne reste plus
       beaucoup, rien n'est cassé. Même teinte que le bandeau des paiements en
       suspens — une seule façon de dire « regarde ça » dans tout le logiciel. */
.carte.abonnement.alerte { border-color: #c98a2e; }
.carte.abonnement .bandeau-alerte {
  padding: 7px 10px; border-radius: 8px;
  background: #4a3410; border: 1px solid #c98a2e; color: #f2c777;
  font-weight: 700;
}

/* Rangé : il reste lisible, il ne se met plus en avant. */
.carte.abonnement.range { opacity: 0.5; }

.carte.abonnement .note-abonnement {
  font-size: 0.86rem; opacity: 0.75; line-height: 1.35;
}

.carte.abonnement .liens { margin-top: auto; display: flex; gap: 8px; align-items: center; }
/* `V3-y` ② : on tape dessus au doigt. */
.carte.abonnement .liens .bouton { min-height: 60px; display: flex; align-items: center; }

/* LA FICHE — TROIS colonnes, et les champs longs prennent toute la largeur.
   ⚠️  MESURÉ, PAS SUPPOSÉ : en deux colonnes elle demandait **869 px** pour un
       budget de 725 (`V3-y` ③). Quatre rangées de champs courts devenaient
       trois, et l'en-tête de la page s'efface pendant qu'elle est ouverte —
       « si un contenu ne tient pas, on réduit le contenu ». */
.grille-fiche {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px;
  margin: 10px 0;
}
.grille-fiche label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.88rem; font-weight: 700; color: var(--or);
}
.grille-fiche label.large { grid-column: 1 / -1; }
.grille-fiche input, .grille-fiche select {
  min-height: 60px; box-sizing: border-box; font-size: 1rem;
  font-weight: 400;
}
/* ⚠️  DÉFAUT TROUVÉ À L'ÉCRAN (`B000-D190`), ET C'EST LE MÊME QU'`A-3` A
       TROUVÉ SUR LES RÉGLAGES : un `select` sans couleur explicite sort en
       BLANC SUR BLANC — le texte est là, on ne le lit pas. `color: inherit` ne
       suffit pas : c'est le FOND que le navigateur impose. */
.grille-fiche select {
  background: var(--bleu-fonce, #0f1a2b); color: #e8eefc;
  border: 1px solid var(--bleu-clair); border-radius: 8px; padding: 0 10px;
}
.grille-fiche select option { background: #0f1a2b; color: #e8eefc; }

/* ⚠️  UN ÉCRAN, UNE QUESTION — et `V3-y` ① : aucun défilement.
       La fiche s'ouvrait SOUS la liste et poussait la page hors du cadre. Elle
       prend maintenant sa place : quand on modifie un service, on ne regarde
       pas les autres. Même règle que l'encaissement de la caisse. */
.page.reglages.en-fiche #liste,
.page.reglages.en-fiche > p.note,
.page.reglages.en-fiche > .liens { display: none; }