/* ═══════════════════════════════════════════════════════════════════
   COMPOSANTS COMMUNS — bouton, carte, liste, champ, pastille, modale.
   Cinq formes, pas une de plus. Tout écran se construit avec celles-ci :
   c'est ce qui fait qu'un module nouveau ressemble aux autres sans
   que personne n'ait à recopier du style.
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box }
/* `min-height`, pas `height` : avec une hauteur fixe le corps s'arrêtait à un écran,
   et le bandeau collant (dont le bloc porteur est le corps) quittait l'écran dès
   qu'on avait défilé plus d'une hauteur — plus de Postes, de Rechercher ni de Guide. */
html{ height:100% }
body{ min-height:100% }
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:15px/1.5 var(--sans);
  -webkit-text-size-adjust:100%;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; text-wrap:balance; letter-spacing:.01em }
h1{ font-size:30px; line-height:1.15 }
h2{ font-size:23px }
h3{ font-size:19px }
a{ color:var(--action); text-decoration:none }
img{ max-width:100% }
[hidden]{ display:none !important }
:focus-visible{ outline:2px solid var(--action); outline-offset:2px }

/* ── Mise en page ───────────────────────────────────────────────── */
.ecran{ max-width:1180px; margin:0 auto; padding-block:18px; padding-inline:16px }
.pile{ display:flex; flex-direction:column; gap:var(--gap) }
.rang{ display:flex; gap:var(--gap); flex-wrap:wrap; align-items:center }
.grille{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.pousse{ flex:1 }
.sur-tel-cache{ }
@media (max-width:720px){ .sur-tel-cache{ display:none !important } }

/* ── Bandeau ────────────────────────────────────────────────────── */
.bandeau{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--encre); color:var(--fond);
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--bordure-fort);
}
.bandeau h1{ font-size:19px; color:inherit }
.bandeau .poste{ font-size:11px; text-transform:uppercase; letter-spacing:.18em; opacity:.72 }

/* Écran plein (plan de salle, cuisine) : le bandeau se réduit à une ligne. L'écran
   accueilli porte déjà son titre, sa date, ses gestes et sa croix — tout ce que le
   bandeau répétait ici était de la place prise aux tables (Bertrand, 10 octobre). */
body.ecran-plein .bandeau{ padding:3px 10px; gap:6px }
body.ecran-plein .bandeau h1{ font-size:15px }
body.ecran-plein .bandeau .poste{ display:none }
body.ecran-plein .bandeau .btn{ min-height:34px; padding:0 9px }
body.ecran-plein .cadre-ancien{ margin-top:0 !important; border-top:0 !important }

/* ── Boutons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--touche); padding:0 16px;
  font:600 14px/1 var(--sans); color:var(--encre);
  background:var(--carte); border:1px solid var(--bordure-fort);
  border-radius:var(--rayon); cursor:pointer; text-align:center;
  transition:background .15s, border-color .15s;
}
.btn:hover{ border-color:var(--encre-faible) }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-action{ background:var(--action); border-color:var(--action); color:#fff }
.btn-encaisser{ background:var(--encaisser); border-color:var(--encaisser); color:#fff }
.btn-discret{ background:transparent; border-color:transparent; color:var(--encre-douce) }
.btn-geste{ min-height:var(--touche-geste); font-size:17px; width:100% }
.btn-large{ min-height:var(--touche-large); font-size:15px }

/* ── Cartes ─────────────────────────────────────────────────────── */
.carte{
  background:var(--carte); border:1px solid var(--bordure);
  border-radius:var(--rayon); padding:14px;
}
.carte-titre{ font-family:var(--serif); font-size:19px; margin:0 0 8px }
.carte-sobre{ border:0; background:transparent; padding:0 }
/* Un filet de couleur ne se pose que lorsqu'il dit un état. */
.carte[data-etat="encours"]{ border-left:3px solid var(--encours) }
.carte[data-etat="encaisser"]{ border-left:3px solid var(--encaisser) }
.carte[data-etat="fait"]{ border-left:3px solid var(--fait) }

/* ── Listes ─────────────────────────────────────────────────────── */
.liste{ display:flex; flex-direction:column; border:1px solid var(--bordure); border-radius:var(--rayon); overflow:hidden; background:var(--carte) }
.ligne{
  display:flex; align-items:center; gap:12px;
  min-height:var(--touche); padding:10px 14px;
  border-bottom:1px solid var(--bordure); background:none; border-left:0; border-right:0; border-top:0;
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
}
.ligne:last-child{ border-bottom:0 }
.ligne:hover{ background:var(--fond) }
.ligne-titre{ font-weight:600 }
.ligne-detail{ font-size:12px; color:var(--encre-douce) }

/* ── Pastilles d'état ───────────────────────────────────────────── */
.pastille{
  display:inline-flex; align-items:center; gap:5px;
  font:600 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em;
  padding:5px 9px; border-radius:999px; white-space:nowrap;
}
.pastille[data-etat="encours"]{ background:var(--encours-clair); color:var(--encours-texte) }
.pastille[data-etat="encaisser"]{ background:var(--encaisser-clair); color:var(--encaisser) }
.pastille[data-etat="fait"]{ background:var(--fait-clair); color:var(--fait) }
.pastille[data-etat="neutre"]{ background:var(--fond); color:var(--encre-douce) }

/* ── Champs ─────────────────────────────────────────────────────── */
.champ{ display:flex; flex-direction:column; gap:4px }
.champ > span{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--encre-douce) }
input,select,textarea{
  min-height:var(--touche); padding:9px 12px; font:15px var(--sans); color:var(--encre);
  background:var(--carte); border:1px solid var(--bordure-fort); border-radius:var(--rayon); width:100%;
}
textarea{ min-height:76px; resize:vertical }
/* v2-537 (revue des écrans, 27/10) — une case à cocher n'a pas la taille d'un champ (la règle ci-dessus lui donnait toute la largeur
   et la hauteur d'un bouton : une case géante dans le Suivi commercial) ; une date ou une heure ne prend plus toute une ligne. */
input[type="checkbox"],input[type="radio"]{ width:18px; height:18px; min-height:0; padding:0; flex:none; accent-color:var(--action) }
input[type="date"]{ max-width:200px }
input[type="time"]{ max-width:140px }

/* ── Chiffres ───────────────────────────────────────────────────── */
.chiffre{ font-variant-numeric:tabular-nums }
.tuile{ background:var(--carte); border:1px solid var(--bordure); border-radius:var(--rayon); padding:13px 15px }
.tuile .valeur{ font-family:var(--serif); font-size:31px; line-height:1.05; font-variant-numeric:tabular-nums }
.tuile .etiquette{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--encre-douce) }

/* ── Modale ─────────────────────────────────────────────────────── */
.voile{ position:fixed; inset:0; background:rgba(20,25,22,.55); display:flex; align-items:flex-end; justify-content:center; z-index:60; padding:0 }
@media (min-width:721px){ .voile{ align-items:center; padding:24px } }
.modale{
  background:var(--carte); border-radius:var(--rayon) var(--rayon) 0 0;
  width:100%; max-width:560px; max-height:88vh; overflow:auto; padding:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
@media (min-width:721px){ .modale{ border-radius:var(--rayon) } }
/* La croix : collée en haut à droite de la fenêtre, y compris quand son contenu défile. */
.modale-fermer{
  position:sticky; top:0; float:right; z-index:2;
  width:44px; height:44px; margin:-10px -10px 2px 8px; padding:0;   /* 44 px : une cible pour le doigt */
  display:inline-flex; align-items:center; justify-content:center;
  font:600 15px/1 var(--sans); color:var(--encre-douce);
  background:var(--carte); border:1px solid var(--bordure); border-radius:50%; cursor:pointer;
}
.modale-fermer:hover{ color:var(--encre); border-color:var(--encre-faible) }
/* v2-544 — au téléphone la croix restait à 8 px du bord, rognée par l'arrondi de la fenêtre : elle rentre dans la fenêtre. */
@media (max-width:720px){ .modale-fermer{ margin:-6px -2px 2px 8px; width:40px; height:40px } }

/* ── Divers ─────────────────────────────────────────────────────── */
.vide{ text-align:center; padding:44px 18px; color:var(--encre-faible) }
.chargement{ text-align:center; padding:34px; color:var(--encre-douce) }
.erreur{ background:var(--encaisser-clair); color:var(--encaisser); border:1px solid var(--encaisser); border-radius:var(--rayon); padding:11px 13px; font-size:13px }
.tableau-large{ overflow-x:auto }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }

/* v2-528 — Bertrand, 27/10 : « enlève les icônes téléphone et Môh en bas, car ça se met sur les onglets ». Dans les applis
   de métier qui ont une barre d'onglets en bas (Chambres, Réception, Hôte, Brigade, Maintenance), ni le bouton ☎ ni la
   bulle Môh. Un appel entrant s'affiche toujours (sa fenêtre est plein écran). */
/* v2-563 (Bertrand, 28/10 : « pour Guillaume manque la partie téléphone pour accéder aux contacts ») — la bulle ☎ revient
   dans ces applis, posée AU-DESSUS de la barre d'onglets (règle v2-533, core/app-mobile.js) ; seule la bulle Môh reste cachée. */
body:has(.chb-nav) .moh-b, body:has(.rcp-nav) .moh-b, body:has(.hote-nav) .moh-b, body:has(.bg-nav) .moh-b, body:has(.mt-nav) .moh-b,
body:has(.chb-nav) .moh-f, body:has(.rcp-nav) .moh-f, body:has(.hote-nav) .moh-f, body:has(.bg-nav) .moh-f, body:has(.mt-nav) .moh-f { display:none !important }