/* =====================================================================
   Écran de caisse tactile — feuille de style

   CONÇUE POUR 1024×768, LE PLANCHER
     C'est la résolution des écrans de caisse 15 pouces les plus répandus. Tout
     est dimensionné pour tenir là ; sur un écran plus grand, la grille d'articles
     s'élargit d'elle-même par `auto-fill`.

   LA VRAIE CONTRAINTE EST LE DOIGT, NON LA RÉSOLUTION
     Dix millimètres au minimum, soit environ 34 px à 85 ppp. Les valeurs
     ci-dessous partent de là :

       bouton d'article    72 px de haut   confortable
       touche du pavé      64 px           frappe rapide
       bouton d'action     56 px
       ENCAISSER           80 px           le geste le plus fréquent

     Tout est en variables : si les boutons se révèlent trop petits sur ton
     matériel, une seule valeur à changer.

   AUCUN :hover
     Pas de souris. Un état de survol laisse une trace visuelle après un appui
     tactile, ce qui trouble la lecture. On utilise :active, qui correspond au
     doigt posé.

   AUCUNE ANIMATION DE TRANSITION SUR LES BOUTONS
     Sur un écran de caisse, le retour doit être instantané. Une transition de
     150 ms donne l'impression d'un poste lent.
   ===================================================================== */

.caisse-plein-ecran {
    --cai-article-h: 72px;
    --cai-touche-h: 64px;
    --cai-action-h: 56px;
    --cai-encaisser-h: 80px;
    --cai-panier-l: 340px;

    --cai-fond: #101418;
    --cai-surface: #1b2229;
    --cai-surface-2: #232c35;
    --cai-bord: #2f3a45;
    --cai-texte: #eef2f6;
    --cai-texte-faible: #93a1b0;
    --cai-accent: #2d7ff9;
    --cai-valider: #1f9d55;
    --cai-danger: #d64545;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--cai-fond);
    color: var(--cai-texte);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Un double appui rapide ne doit pas zoomer : sur une caisse, c'est le geste
       naturel du caissier pressé. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

/* ==================== BANDEAU ==================== */

.caisse-bandeau {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--cai-surface);
    border-bottom: 1px solid var(--cai-bord);
    min-height: 52px;
}

.caisse-titre { font-size: 1.25rem; font-weight: 600; }

.caisse-horloge {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--cai-texte-faible);
}

/* ==================== ALERTES ====================
   Elles se ferment au doigt : sur une caisse, chercher une petite croix fait
   perdre du temps. Toute la bande est cliquable. */

.caisse-alerte {
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    cursor: pointer;
}

.caisse-alerte-erreur { background: var(--cai-danger); color: #fff; }
.caisse-alerte-info { background: var(--cai-accent); color: #fff; }

/* ==================== CORPS ==================== */

.caisse-corps {
    flex: 1;
    display: flex;
    min-height: 0;   /* sans lui, les enfants en overflow débordent du conteneur */
}

/* ==================== CATALOGUE ==================== */

.caisse-catalogue {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0.75rem;
    gap: 0.75rem;
}

/* Le champ de scan : visible, et large. Le caissier doit voir ce que le scanner
   a lu, sans quoi une erreur de lecture est incompréhensible. */
.caisse-scan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    background: var(--cai-surface);
    border: 2px solid var(--cai-accent);
    border-radius: 8px;
    min-height: var(--cai-action-h);
}

.caisse-scan i { font-size: 1.4rem; color: var(--cai-accent); }

.caisse-scan-champ {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cai-texte);
    font-size: 1.2rem;
    padding: 0.5rem 0;
    -webkit-user-select: text;
    user-select: text;
}

.caisse-scan-champ::placeholder { color: var(--cai-texte-faible); }

.caisse-scan-vider {
    background: none;
    border: none;
    color: var(--cai-texte-faible);
    font-size: 1.3rem;
    padding: 0 0.5rem;
    min-width: 44px;
    min-height: 44px;
}

/* Familles : une ligne qui défile horizontalement. Sur 1024 px, six à huit
   familles tiennent ; au-delà, le défilement au doigt prend le relais. */
.caisse-familles {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.caisse-familles::-webkit-scrollbar { display: none; }

.caisse-famille {
    flex: 0 0 auto;
    padding: 0.6rem 1.1rem;
    min-height: 48px;
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-bottom: 3px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
}

.caisse-famille.actif {
    background: var(--cai-surface-2);
    border-bottom-color: var(--cai-accent);
}

.caisse-famille:active { background: var(--cai-surface-2); }

/* Grille d'articles.
   auto-fill avec un minimum de 140 px : quatre colonnes sur 1024, six ou sept
   sur 1920. Aucune valeur de résolution en dur. */
.caisse-grille {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: var(--cai-article-h);
    gap: 0.5rem;
    overflow-y: auto;
    align-content: start;
}

.caisse-article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.caisse-article:active { filter: brightness(1.35); }

.caisse-article-nom {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.15;
    /* Deux lignes au plus : un libellé long ne doit pas faire grandir le bouton,
       sinon la grille se désaligne. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.caisse-article-prix {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.caisse-article-rupture {
    position: absolute;
    top: 0; right: 0;
    background: var(--cai-danger);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-bottom-left-radius: 6px;
}

/* ==================== PANIER ==================== */

.caisse-panier {
    flex: 0 0 var(--cai-panier-l);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--cai-surface);
    border-left: 1px solid var(--cai-bord);
}

.caisse-panier-lignes {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.caisse-ligne {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--cai-bord);
}

.caisse-ligne.selectionnee {
    background: var(--cai-surface-2);
    box-shadow: inset 4px 0 0 var(--cai-accent);
}

.caisse-ligne:active { background: var(--cai-surface-2); }

.caisse-ligne-haut {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
}

.caisse-ligne-nom {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caisse-ligne-total { font-weight: 700; font-variant-numeric: tabular-nums; }

.caisse-ligne-bas {
    font-size: 0.85rem;
    color: var(--cai-texte-faible);
    margin-top: 0.15rem;
}

.caisse-ligne-remise { color: #f0a020; margin-left: 0.5rem; }

/* Actions sur la ligne sélectionnée */
.caisse-ligne-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    padding: 0.5rem;
    background: var(--cai-surface-2);
    border-top: 1px solid var(--cai-bord);
}

.caisse-btn-action {
    min-height: var(--cai-action-h);
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
}

.caisse-btn-action:active { background: var(--cai-bord); }
.caisse-btn-action.danger { color: var(--cai-danger); }

/* Totaux */
.caisse-totaux {
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--cai-bord);
    background: var(--cai-surface-2);
}

.caisse-total-ligne {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--cai-texte-faible);
    padding: 0.1rem 0;
    font-variant-numeric: tabular-nums;
}

.caisse-total-ttc {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--cai-bord);
    font-variant-numeric: tabular-nums;
}

/* Boutons principaux */
.caisse-actions { padding: 0.5rem; }

.caisse-btn-encaisser {
    width: 100%;
    min-height: var(--cai-encaisser-h);
    background: var(--cai-valider);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.caisse-btn-encaisser:active { filter: brightness(1.2); }
.caisse-btn-encaisser:disabled { background: var(--cai-bord); color: var(--cai-texte-faible); }

.caisse-actions-secondaires { margin-top: 0.5rem; }

.caisse-btn-secondaire {
    width: 100%;
    min-height: var(--cai-action-h);
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1rem;
}

.caisse-btn-secondaire:active { background: var(--cai-bord); }
.caisse-btn-secondaire:disabled { color: var(--cai-texte-faible); }

/* ==================== ÉTAT VIDE ==================== */

.caisse-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 160px;
    color: var(--cai-texte-faible);
    font-size: 1.05rem;
    grid-column: 1 / -1;
}

/* ==================== MODALES ==================== */

.caisse-modale-fond {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.caisse-modale {
    width: 100%;
    max-width: 820px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 12px;
    overflow: hidden;
}

.caisse-modale.petite { max-width: 460px; }

.caisse-modale-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--cai-surface-2);
    border-bottom: 1px solid var(--cai-bord);
    font-size: 1.15rem;
    font-weight: 600;
}

.caisse-modale-total {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.caisse-modale-corps {
    padding: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.caisse-modale-pied {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--cai-bord);
}

.caisse-btn-valider {
    min-height: var(--cai-encaisser-h);
    background: var(--cai-valider);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.25rem;
    font-weight: 800;
}

.caisse-btn-valider:active { filter: brightness(1.2); }
.caisse-btn-valider:disabled { background: var(--cai-bord); color: var(--cai-texte-faible); }

/* Le reste à payer : l'information la plus regardée de l'encaissement. */
.caisse-reste {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    background: var(--cai-surface-2);
    border-radius: 10px;
    border-left: 5px solid var(--cai-accent);
    font-size: 1.1rem;
}

.caisse-reste strong {
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.caisse-reste.solde { border-left-color: var(--cai-valider); }

.caisse-paiements { margin-bottom: 0.85rem; }

.caisse-paiement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--cai-bord);
    font-variant-numeric: tabular-nums;
}

.caisse-paiement-retirer {
    background: none;
    border: none;
    color: var(--cai-danger);
    font-size: 1.2rem;
    min-width: 44px;
    min-height: 44px;
}

.caisse-modale-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Pavé numérique */
.caisse-pave { display: flex; flex-direction: column; gap: 0.5rem; }

.caisse-pave-affichage {
    padding: 0.6rem 0.85rem;
    background: var(--cai-fond);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.caisse-pave-touches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.caisse-pave-touche {
    min-height: var(--cai-touche-h);
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 600;
}

.caisse-pave-touche:active { background: var(--cai-bord); }
.caisse-pave-touche.large { grid-column: span 3; font-size: 1.1rem; }

/* Modes de paiement */
.caisse-modes { display: flex; flex-direction: column; gap: 0.4rem; }

.caisse-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: var(--cai-action-h);
    padding: 0.5rem 0.85rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
}

.caisse-mode:active { background: var(--cai-accent); }

.caisse-mode-ref {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--cai-texte-faible);
}

/* Champs de saisie */
.caisse-champ-libelle {
    display: block;
    font-size: 0.9rem;
    color: var(--cai-texte-faible);
    margin-bottom: 0.3rem;
}

.caisse-champ-obligatoire {
    color: var(--cai-danger);
    font-size: 0.75rem;
    margin-left: 0.4rem;
}

.caisse-champ {
    width: 100%;
    min-height: var(--cai-action-h);
    padding: 0.5rem 0.85rem;
    background: var(--cai-fond);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.1rem;
    -webkit-user-select: text;
    user-select: text;
}

.caisse-champ:focus { outline: 2px solid var(--cai-accent); outline-offset: -2px; }

.caisse-champ-aide {
    font-size: 0.8rem;
    color: var(--cai-texte-faible);
    margin-top: 0.35rem;
    line-height: 1.35;
}

.caisse-operateurs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.caisse-operateur {
    min-height: var(--cai-action-h);
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 2px solid var(--cai-bord);
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
}

.caisse-operateur.actif { border-color: var(--cai-accent); background: var(--cai-fond); }

/* Confirmation de vente */
.caisse-succes { font-size: 4rem; color: var(--cai-valider); }

.caisse-succes-numero {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.caisse-succes-total {
    font-size: 2.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.caisse-succes-rendu {
    margin-top: 0.75rem;
    padding: 0.6rem;
    background: var(--cai-surface-2);
    border-radius: 8px;
    font-size: 1.2rem;
}

.caisse-succes-rendu strong { font-size: 1.8rem; }

.caisse-succes-impression {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: rgba(214, 69, 69, 0.15);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #ffb0b0;
}

/* =====================================================================
   ÉCRANS PLUS PETITS QUE 1024 — une tablette en portrait, par exemple.
   Le panier passe alors sous le catalogue. Ce n'est pas la cible, mais
   l'écran ne doit pas devenir inutilisable.
   ===================================================================== */

@media (max-width: 900px) {
    .caisse-corps { flex-direction: column; }
    .caisse-panier { flex: 0 0 auto; max-height: 45%; border-left: none;
                     border-top: 1px solid var(--cai-bord); }
    .caisse-modale-colonnes { grid-template-columns: 1fr; }
}