/* =============================================================================
   L'ÉCRAN DES RÉGLAGES — `V3-y` tenu, et c'est lui qui commande cette feuille.

   ⚠️  LE BUDGET DE HAUTEUR, ET IL N'EST PAS NÉGOCIABLE.
       768 px d'écran − 40 px de bandeau ≈ **725 px** pour tout le reste. Les
       réglages du salon, les postes, les prestations et les produits ne
       tiennent pas les uns sous les autres : c'est pourquoi l'écran a des
       ONGLETS. Un seul panneau est visible, et il tient dans son cadre.

   ⚠️  LA PAGE NE DÉFILE PAS ; LE PANNEAU, SI — exception nommée le 23/08.
       `overflow: hidden` sur la page, le bandeau et les onglets : ils tiennent
       l'écran. **Le contenu sous eux défile**, parce qu'un catalogue n'est pas
       un contenu qu'on peut « réduire » : douze prestations à cinq champs font
       768 px. Avant cette exception, le bas de la liste était coupé **et
       inatteignable** — vu à l'écran par David. Détail au bloc `.panneau`.
       Partout ailleurs la règle tient : si un contenu se choisit, on le réduit.

   ⚠️  60 px DE HAUT, partout où l'on touche. Une rangée entière fait la cible :
       c'est ce qui rend l'écran utilisable au doigt sur le ThinkPad tactile.
   ============================================================================= */

/* La page ne défile pas : elle occupe l'écran, bandeau déduit. */
html, body { overflow: hidden; }

.page.reglages {
  max-width: 1320px;
  height: calc(100vh - 40px);
  padding: 12px 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page.reglages h1 { font-size: 1.35rem; margin: 0 0 8px; }

/* -----------------------------------------------------------------------------
   LES ONGLETS — le couloir et ses portes, en haut de l'écran.
   -------------------------------------------------------------------------- */
.onglets {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.onglets .bouton { min-height: 60px; }

/* ⚠️  L'ONGLET CHOISI DOIT SE VOIR, PAS SE DEVINER (`B000-D190` : on regarde
       l'écran, pas seulement le code). Le bouton du bureau est doré par
       défaut : cinq onglets dorés, c'est cinq onglets qui ont l'air choisis.
       Ce sont donc les NON choisis qui changent d'aspect. */
.onglets .bouton[aria-selected="false"] {
  background: transparent;
  color: var(--gris);
  border: 1px solid var(--bleu-clair);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   LE PANNEAU — ce qui reste de la hauteur, et pas un pixel de plus.
   -------------------------------------------------------------------------- */
/* ⚠️  EXCEPTION NOMMÉE ET BORNÉE À `V3-y` ① — LE PANNEAU DÉFILE, ET LUI SEUL.
       Deuxième exception du projet, après le PANIER de la caisse (`V3-aj` D-8),
       et pour la même raison : **le contenu n'est pas à nous.** Douze
       prestations à cinq champs font 768 px pour un budget d'environ 595 —
       « réduire le contenu » voudrait dire retirer des prestations du
       catalogue. `overflow: hidden` les coupait **sans qu'on puisse les
       atteindre**, ce qui est pire que défiler : David l'a vu à l'écran, 23/08.

       **Ce qui ne défile toujours pas** : la page, le bandeau d'état, les
       onglets. Ils restent en haut, fixes ; c'est le contenu sous eux qui
       glisse. Et ceci vaut pour un écran de GESTION — la caisse, elle, ne
       défile pas, hors le panier. */
.panneau { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.panneau[data-vu="oui"] { display: block; }
/* La barre reste discrète : elle dit qu'il y a une suite, elle ne s'impose pas. */
.panneau::-webkit-scrollbar { width: 10px; }
.panneau::-webkit-scrollbar-thumb { background: var(--bleu-clair); border-radius: 5px; }

.panneau h2 { margin: 0 0 8px; font-size: 1rem; }
.panneau h2:not(:first-child) { margin-top: 14px; }

/* Des colonnes de rangées : c'est ce qui fait tenir les listes sans barre.
   Deux par défaut ; TROIS pour les réglages du salon, qui sont dix-sept et
   qui n'ont qu'un contrôle chacun ; UNE pour un produit, qui porte son type,
   sa marque et son prix sur la même ligne. */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.grille.serree { grid-template-columns: 1fr 1fr 1fr; }
.grille.large { grid-template-columns: 1fr; }

/* ⚠️  UNE PRESTATION PORTE CINQ CHAMPS — trois noms, un prix, une durée. À deux
       colonnes, chacun se serait retrouvé à trente pixels. Elle prend donc la
       largeur entière, une par rangée. `V3-y` ① tient : c'est la liste qui
       s'allonge, et les archives en sortent (David, 23/08). */
.grille.prestations { grid-template-columns: 1fr; }

/* L'en-tête d'un panneau : son titre, et le bouton qui mène ailleurs. */
.entete-panneau {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 4px;
}
.entete-panneau h2 { margin: 0; }

/* -----------------------------------------------------------------------------
   UNE RANGÉE — un réglage, une prestation, un poste, un produit.
   Toutes se ressemblent : `V3-ae` ④, une seule façon d'écrire la même chose.
   -------------------------------------------------------------------------- */
.rangee {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 10px;
  background: var(--bleu);
  border: 1px solid var(--bleu-clair);
  border-radius: 10px;
}

/* La rangée entière fait 64 px ; ce qu'on touche dedans en fait 56. La cible
   au doigt, c'est la rangée — jamais un champ perdu au milieu du vide. */
.rangee input, .rangee select, .rangee .bouton { min-height: 56px; }

.rangee.eteinte { opacity: 0.55; }

/* Le libellé garde sa part : sans base explicite, un champ texte à
   `width: 100%` mangeait la place et « Nom du salon sur le ticket » devenait
   « Nom du salon s… ». Vu à l'écran, pas dans le code. */
.rangee .libelle {
  flex: 1 1 45%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.rangee input, .rangee select { margin: 0; }
.rangee input[type="text"] { flex: 1 1 55%; min-width: 0; }
.rangee .montant { flex: 0 0 92px; width: 92px; }

/* -----------------------------------------------------------------------------
   LES DEUX CASES D'UNE PRESTATION — « au catalogue » et « réservable en ligne ».

   ⚠️  ELLES NE PRENNENT PAS DE LARGEUR AUX NOMS. `flex: 0 0 auto` : elles font
       exactement leur taille, et ce sont les trois champs de nom qui absorbent
       ce qui reste. Sans cela, « Coupe homme » devenait « Coupe h… » sur
       l'X230 — le défaut déjà vu sur le libellé d'un réglage.

   ⚠️  LA CIBLE AU DOIGT, C'EST L'ÉTIQUETTE ENTIÈRE, pas le carré de 20 px.
       Le `<label>` fait 56 px de haut comme tout le reste de la rangée
       (`V3-y` ②) : on coche en touchant le mot.
   -------------------------------------------------------------------------- */
.rangee .case {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 0 8px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.78rem;
  line-height: 1.15;
  user-select: none;
}
/* Cochée, la case se lit d'un coup d'œil sans qu'on ait à viser le carré. */
.rangee .case:has(input:checked) { background: var(--bleu-clair); }
.rangee .case input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  min-height: 20px;   /* la règle des 56 px vise les champs, pas le carré */
  margin: 0;
  accent-color: var(--or);
}

/* ⚠️  `STOCK-1`, 25/08 — LA FICHE PRODUIT PORTE MAINTENANT SEPT CHAMPS :
       nom · type · marque · contenance · prix de vente · prix d'achat ·
       code-barres. Sans base explicite, les trois champs TEXTE se partagent la
       rangée à `1 1 55%` chacun et se retrouvent à quelques dizaines de pixels
       — c'est exactement le défaut « Nom du salon s… » vu à l'écran le 23/08.
       Contenance et code-barres prennent donc une largeur fixe, et le nom
       garde ce qui reste.
   ⚠️  `input[type="text"]` a la même spécificité que `.rangee .contenance` :
       c'est `input.contenance` qui départage, et il doit rester APRÈS. */
.rangee input.contenance  { flex: 0 0 110px; width: 110px; }
.rangee input.code-barres { flex: 0 0 150px; width: 150px; }

/* `STOCK-2` : le stock sur la fiche produit. Une information, jamais un champ —
   il n'a pas de `data-champ` et ne part donc jamais en écriture. */
.rangee .stock-fiche {
  flex: 0 0 110px; width: 110px;
  color: var(--or); font-weight: 700; font-size: 0.86rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rangee .stock-fiche.epuise { color: var(--orange); }
/* La durée est plus étroite que le prix : deux chiffres suffisent. */
.rangee .duree { flex: 0 0 80px; width: 80px; }
/* Le nom hébreu s'écrit de droite à gauche — sinon la ponctuation saute. */
.rangee input[dir="rtl"] { text-align: right; }
.rangee select { flex: 0 0 150px; }
.rangee .unite { flex: 0 0 auto; color: var(--gris); font-size: 0.82rem; }

/* ⚠️  UNE LISTE DÉROULANTE NON HABILLÉE SORT EN BLANC — vu à l'écran. `V3-ae`
       ④ : deux endroits qui font la même chose de deux façons, c'est un défaut
       de finition. Elle prend donc l'habillage des champs de saisie. */
.rangee select {
  background: var(--fond);
  border: 1px solid var(--bleu-clair);
  color: var(--texte);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 1rem;
  font-family: inherit;
}

/* Les boutons d'une rangée : touchables, sans texte inutile. */
.rangee .bouton { flex: 0 0 auto; padding: 0 12px; font-size: 0.86rem; }

/* Le tour d'un réglage qui vient d'être écrit — il s'éteint tout seul. */
.rangee.ecrite { border-color: var(--or); }