/* ============================================================================= L'ÉCRAN DE VENTE — lot L1-b, sous la contrainte `V3-y`. ThinkPad X230 tactile, 1366 × 768, plein écran, utilisé au doigt. LE BUDGET, ET IL EST TENU PAR CONSTRUCTION : 728 px utiles (768 − 40 de bandeau) − 16 px de marge haute et basse = 712 px pour la page − 56 px d'en-tête = 656 px pour le cadre LA LARGEUR : 1366 px écran − 16 px marges latérales − 14 px gouttière − 370 px panier (la caisse v1 : 380 px, agenda.css l. 603) = 966 px pour la grille → 4 colonnes de 234 px ⚠️ `overflow: hidden` partout où la caisse vit. Si un contenu ne tient pas, on réduit le contenu — on n'ajoute jamais une barre de défilement. ============================================================================= */ /* ----------------------------------------------------------------------------- LA PAGE DE CAISSE — elle fait exactement la hauteur utile, jamais plus -------------------------------------------------------------------------- */ body.caisse { overflow: hidden; } .page.caisse { max-width: none; height: var(--utile); padding: 8px 8px 8px; margin: 0; overflow: hidden; display: flex; flex-direction: column; } .page.caisse > section { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* ⚠️ SANS CETTE LIGNE, `display: flex` ci-dessus écrase le `display: none` que l'attribut `hidden` porte par défaut : les DEUX étapes s'affichent, et chacune n'a plus que la moitié du budget de hauteur. Trouvé par la mesure de `V3-y`, pas par relecture. */ .page.caisse > section[hidden] { display: none; } .page.caisse h1 { font-size: 1.25rem; } .page.caisse h2 { font-size: 0.92rem; margin: 0 0 7px; } .entete-vente { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 56px; flex: 0 0 56px; overflow: hidden; } .entete-vente h1 { margin: 0; line-height: 1.15; } .entete-vente .sous-titre { margin: 0; font-size: 0.84rem; } /* Le cadre : la grille à gauche, le panier à droite. `V3-y` ③ */ .cadre { display: grid; grid-template-columns: minmax(0, 1fr) var(--panier); gap: 14px; flex: 1; min-height: 0; overflow: hidden; } .colonne-gauche, .colonne-droite { min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* ----------------------------------------------------------------------------- LES CASES — 4 colonnes, et chacune se touche au doigt -------------------------------------------------------------------------- */ .grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; overflow: hidden; } .grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } .case { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--bleu); color: var(--texte); border: 1px solid var(--bleu-clair); border-radius: 10px; padding: 8px 11px; text-align: left; cursor: pointer; font-family: inherit; font-size: 0.95rem; min-height: 74px; /* `V3-y` ② — au-dessus des 60 px exigés */ overflow: hidden; } .case:hover { border-color: var(--or); } .case .nom { font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .case .prix { color: var(--or); font-weight: 700; font-variant-numeric: tabular-nums; } .case .service, .case .heure { color: var(--gris); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case .heure { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texte); } .case.info { cursor: default; } .case.info:hover { border-color: var(--bleu-clair); } /* Le service du rendez-vous — §2a. Et la remise appliquée — `V3-z` ②. */ .case.du-rdv { border-color: var(--or); background: #22314a; } /* Une remise visible mais NON appliquée : elle reste lisible, elle ne crie pas. */ .case.eteinte { opacity: 0.42; } .repere { display: inline-block; background: var(--or); color: #1a1400; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 999px; position: absolute; top: 6px; right: 6px; } .repere.petit { position: static; font-size: 0.62rem; } .repere.petit.produit { background: var(--orange); color: #fff; } /* Les blocs de la colonne gauche : le premier prend la place, les autres non. */ .bloc-services { flex: 0 0 auto; } .bloc-promos { flex: 1; min-height: 0; overflow: hidden; margin-top: 10px; } .bloc-produit { flex: 0 0 auto; margin-top: 10px; } /* ----------------------------------------------------------------------------- LE PANIER — §2d. Il tient dans sa colonne, sans défiler. -------------------------------------------------------------------------- */ .panier { background: var(--bleu); border: 1px solid var(--bleu-clair); border-radius: 12px; padding: 12px 14px; height: 100%; overflow: hidden; display: flex; flex-direction: column; } #lignes-panier { flex: 1; min-height: 0; overflow: hidden; } .panier .ligne { display: grid; grid-template-columns: minmax(0, 1fr) 84px 56px; align-items: center; gap: 6px; min-height: var(--cible); /* `V3-y` ② */ border-bottom: 1px solid var(--bleu-clair); } .panier .ligne .libelle { font-size: 0.9rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .panier .ligne input.prix-ligne { text-align: right; padding: 0 8px; font-size: 0.95rem; min-height: 56px; } /* `V3-y` ② — « pas de croix minuscule ». La cible fait 56 px de côté, dans une ligne de 60. Elle ne peut pas faire 60 elle-même : il faut la place de la bordure qui sépare deux lignes. */ .panier .retirer { background: var(--bleu-clair); border: none; color: var(--gris); font-size: 1.6rem; line-height: 1; cursor: pointer; width: 56px; height: 56px; border-radius: 8px; } .panier .retirer:hover { color: #fff; background: var(--rouge); } /* `V3-z` ④ — la remise à la main. Cible tactile, comme le reste. */ .ligne-remise { display: grid; grid-template-columns: 1fr 96px 18px; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bleu-clair); flex: 0 0 auto; } .ligne-remise label { font-size: 0.92rem; font-weight: 700; color: var(--or); } .ligne-remise input { min-height: 56px; text-align: right; } .ligne-remise .unite { color: var(--gris); } .total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 10px; padding-top: 10px; border-top: 2px solid var(--bleu-clair); font-size: 1rem; flex: 0 0 auto; } .total strong { font-size: 1.7rem; color: var(--or); font-variant-numeric: tabular-nums; } .bouton.payer { width: 100%; min-height: 64px; font-size: 1.1rem; flex: 0 0 auto; } .panier .note { font-size: 0.76rem; margin: 8px 0 0; flex: 0 0 auto; } /* ----------------------------------------------------------------------------- VENTE DE PRODUIT — §2c · CRÉATION DE FICHE — §0 -------------------------------------------------------------------------- */ .ligne-produit, .ligne-creation { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ligne-produit input[type="text"], .ligne-creation input[type="text"] { flex: 1 1 130px; width: auto; } .ligne-produit input[type="number"] { flex: 0 0 96px; width: auto; } .ligne-creation .bouton, .ligne-produit .bouton { flex: 0 0 auto; } .page.caisse .carte { padding: 11px 13px; margin-bottom: 0; } .page.caisse .note { font-size: 0.78rem; margin: 0 0 7px; } .page.caisse .sous-titre { margin: 0 0 8px; font-size: 0.86rem; } /* ----------------------------------------------------------------------------- LE BOUTON DE CAISSE — §1 : toujours présent, en bas à droite -------------------------------------------------------------------------- */ .bouton-caisse { position: fixed; right: 20px; bottom: 20px; z-index: 9997; background: var(--or); color: #1a1400; border: none; border-radius: 999px; min-height: 64px; padding: 0 30px; font-size: 1.05rem; font-weight: 800; font-family: inherit; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,0.45); display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .bouton-caisse:hover { filter: brightness(1.07); }