/* =========================================================
🧾 PAGE DE VENTE - DESIGN FIN ET ÉPURÉ
========================================================= */
html, body {
margin: 0;
padding: 0;
background: #121212;
color: #eee;
font-family: 'Segoe UI', sans-serif;
height: 100%;
box-sizing: border-box;
}
/* STRUCTURE PRINCIPALE */
.vente-page {
display: flex;
gap: 15px;
padding: 15px;
}
/* SECTION PANIER / FACTURE */
.panier-section {
flex: 1.5;
background: #1f1f1f;
border-radius: 12px;
padding: 15px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(255, 85, 85, 0.2);
overflow-y: auto;
}
.panier-section h2 {
color: #ff5555;
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
text-shadow: 0 1px 3px rgba(255,85,85,0.4);
}
/* INPUT + BOUTON */
.input-section {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.input-section input {
flex: 1;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #333;
background: #2a2a2a;
color: #fff;
font-size: 14px;
transition: 0.2s;
}
.input-section input:focus {
outline: none;
border-color: #ff5555;
box-shadow: 0 0 4px rgba(255, 85, 85, 0.4);
}
.input-section button {
padding: 8px 14px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg,#ff5555,#991919);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.input-section button:hover {
transform: translateY(-1px);
background: #b32424;
}
/* TABLE FACTURE */
.facture-table {
width: 100%;
border-collapse: collapse;
background: #2a2a2a;
font-size: 12px;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}
.facture-table th, .facture-table td {
padding: 4px 6px;
text-align: center;
border: none;
}
.facture-table th {
background: linear-gradient(135deg,#ff5555,#991919);
color: #fff;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.facture-table tr:nth-child(even) { background: #242424; }
.facture-table tr:nth-child(odd) { background: #2a2a2a; }
.facture-table tr:hover { background: #3a1a1a; }
.editable-qty {
width: 50px;
font-size: 13px;
text-align: center;
cursor: text;
}
/* TOTAL + BOUTONS */
.total {
font-size: 16px;
margin-bottom: 8px;
text-align: right;
font-weight: bold;
color: #fff;
}
.footer-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.btn-facture {
padding: 8px 14px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
color: #fff;
border: none;
}
/* Boutons colorés */
.btn-vert { background: #21703c; }
.btn-vert:hover { background: #2e8b4f; transform: translateY(-1px); }
.btn-rouge { background: #8b1f1f; }
.btn-rouge:hover { background: #a32b2b; transform: translateY(-1px); }
.btn-bleu { background: #1a3b5c; }
.btn-bleu:hover { background: #295b8f; transform: translateY(-1px); }
/* SECTION DROITE : PRODUITS / CLAVIER */
.clavier-section {
flex: 0.9;
background: #1f1f1f;
border-radius: 12px;
padding: 15px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(255, 85, 85, 0.15);
overflow-y: auto;
}
/* TABLE STOCK DESIGNÉE */
.stock-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
background: #2a2a2a;
border-radius: 8px;
overflow: hidden;
}
.stock-table th, .stock-table td {
padding: 6px 8px;
text-align: center;
border-bottom: 1px solid #444;
color: #fff;
}
.stock-table th {
background: linear-gradient(135deg,#ff5555,#991919);
font-weight: 700;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* Couleur stock uniquement dans la colonne */
.[Link] { background: #8b1f1f; color: #fff; font-weight: bold; }
.[Link] { background: #f8e404; color: #000; font-weight: bold; }
.[Link] { background: #21703c; color: #fff; font-weight: bold; }
.stock-table tr:hover td { background: #3a3a3a; }
/* Arrondi coins */
.stock-table th:first-child { border-top-left-radius: 8px; }
.stock-table th:last-child { border-top-right-radius: 8px; }
.stock-table td:first-child { text-align: left; }
/* =============================
CLAVIER POPUP TACTILE AZERTY
============================= */
.keyboard-popup {
position: fixed;
bottom: 0;
left: 60%;
transform: translateX(-50%);
width: 75%;
background: #333;
padding: 20px;
border-radius: 12px 12px 0 0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
z-index: 10000;
display: none;
flex-direction: column;
}
.keyboard-row {
display: flex;
justify-content: center;
gap: 6px;
margin: 4px 0;
}
.keyboard-row button {
flex: 1;
min-width: 30px;
padding: 10px 0;
font-size: 15px;
font-weight: 700;
border-radius: 8px;
border: none;
background: #f2f2f2;
color: #000;
cursor: pointer;
transition: 0.2s;
}
.keyboard-row button:hover {
background: #ff5555;
color: #fff;
transform: translateY(-2px);
}
.keyboard-row .clear {
background: #8b1f1f;
color: #fff;
}
.keyboard-row .wide {
flex: 4;
}
/* Bouton toggle clavier */
.btn-toggle-keyboard {
margin-bottom: 6px;
padding: 6px 12px;
cursor: pointer;
border-radius: 6px;
border: none;
background-color: #ff5555;
color: #fff;
font-weight: bold;
font-size: 13px;
transition: 0.2s;
}
.btn-toggle-keyboard:hover { background: #b32424; }
/* CARTES ACTIONS */
.action-cards {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 12px;
}
.card-btn {
font-size: 32px;
padding: 16px;
border-radius: 14px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.card-red { background: #8b1f1f; }
.card-green { background: #21703c; }
.card-blue { background: #1a3b5c; }
.card-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}
/* Responsive */
@media(max-width: 1024px) {
.vente-page { flex-direction: column; }
.clavier-section { flex: 1; margin-top: 10px; }
.panier-section { flex: 1; }
}
/* =============================
💳 POPUP DE PAIEMENT
============================= /
/ 🌑 POPUP DE PAIEMENT MODERNE */
.popup-paiement {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
backdrop-filter: blur(5px);
}
.popup-content {
background: #1e1e1e;
color: #fff;
padding: 25px 35px;
border-radius: 16px;
width: 380px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
text-align: center;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.popup-content h3 {
margin-bottom: 15px;
font-size: 1.3em;
color: #faf1f0;
font-weight: 600;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.paiement-options {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
.paiement-btn {
background: #2a2a2a;
color: #fff;
border: 1px solid #444;
border-radius: 8px;
padding: 10px 12px;
width: 100px;
cursor: pointer;
transition: 0.2s;
font-size: 0.9em;
}
.paiement-btn:hover {
background: #d40000;
color: #fff;
transform: scale(1.05);
}
/* Champs dynamiques */
.paiement-details {
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.paiement-details label {
font-size: 1em;
color: #ddd;
}
.paiement-details input {
background: #2b2b2b;
border: 1px solid #555;
color: #fff;
border-radius: 8px;
padding: 10px 15px;
width: 90%;
font-size: 1em;
outline: none;
transition: border 0.2s, background 0.2s;
}
.paiement-details input:focus {
border: 1px solid #d40000;
background: #222;
}
/* Boutons du bas */
.paiement-actions {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.btn-annuler, .btn-confirmer {
border: none;
border-radius: 10px;
padding: 10px 18px;
font-size: 1em;
cursor: pointer;
transition: 0.3s;
width: 45%;
}
.btn-annuler {
background: #444;
color: #ddd;
}
.btn-annuler:hover {
background: #666;
}
.btn-confirmer {
background: #00d40b;
color: #fff;
font-weight: 600;
}
.btn-confirmer:hover {
background: #67cb76;
transform: scale(1.05);
} ajoute