:root {
  --color-bg: #f8f9fa;
  --color-card: #272727;
  --color-primary: #0056b3;
  --color-sec: #6c757d;
  --color-text: #212529;
  --color-success: #28a745;
  --color-border: #dee2e6;
  --color-font: #e2630e;
  --color-result: #383838;
  --color-numpad: #575757;
  --font: 'Roboto', sans-serif;
}

* { box-sizing: border-box; margin:0; padding:0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: 400;
  line-height:1.4;
}

.container {
  width:360px; max-width:100%; margin:2rem auto; padding:1rem;
}

h1 {
  text-align:center; color:var(--color-primary);
  font-weight:900; font-size:2rem; margin-bottom:1rem;
}

.card {
  background: var(--color-card);
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:.5rem; margin-bottom:.5rem;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

/* 1) On réinitialise le border-radius & l’ombre pour toutes les cartes du groupe */
.card-group .card {
  border-radius: 0;
  box-shadow: none;
  margin: 0;              /* on colle les cartes */
  border-bottom: 1px solid var(--color-border);
}

/* 2) On supprime la bordure du bas de la dernière carte */
.card-group .card:last-child {
  border-bottom: none;
}

/* 3) On réactive le border-radius uniquement sur la première */
.card-group .card:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* 4) Et sur la dernière */
.card-group .card:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 5) On rétablit l’ombre sur le groupe (optionnel) */
/* si tu veux une box-shadow autour du groupe entier : */
.card-group {
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;  /* découpe les coins */
}

.input {
  display:flex; gap:0.5rem; align-items:center; margin-bottom:1rem; width: 100%;
  color: var(--color-font);
font-size: 1.4rem; font-weight: 900;
text-align: right;
  border:none; background:none;
}
.spanm {
    display:flex; gap:0.5rem; align-items:center; margin-bottom:1rem;
  font-size: 1.4rem; font-weight: 500;
  color: var(--color-border);
}


.row {
  display:flex; gap:1rem; justify-content:space-between;
  align-items:center; margin-bottom:1rem;
}
.col {
  flex:1; display:flex; flex-direction:column;
}
.card h2 {
  color: var(--color-primary);
  font-size:1.25rem; font-weight:900;
  margin-bottom:1rem;
}

.select-row {
  display:flex; gap:0.5rem; align-items:center; margin-bottom:1rem;
}
.select-row select {
  flex:1; height:48px; padding:0 .75rem;
  border:none; background: none;
   appearance:none;
   font-size: 0.9rem; font-weight: 500;
  color: var(--color-border);
}

.btn-icon {
  width:15px; height:15px;
  font-size:0.9rem; color:var(--color-border);
  border:none; background:none;
  cursor:pointer;
}

.btn-primary {
  width:100%; height:48px;
  background:var(--color-primary); color:#fff;
  border:none; border-radius:8px;
  font-size:1rem; font-weight:900;
  cursor:pointer;
}

.btn-secondary {
  width:100%; height:48px;
  background:var(--color-sec); color:#fff;
  border:none; border-radius:8px;
  font-size:1rem; font-weight:900;
  cursor:pointer;
}

.label { display:block; margin-bottom:.25rem; font-size:.875rem; color:var(--color-sec); }

.dim-row {
  display:flex; gap:1rem; justify-content:space-between;
}
.dim-col { flex:1; }
.dim-col input {
  width:100%; height:48px; text-align:center;
  font-size:1.5rem; border:1px solid var(--color-border);
  border-radius:8px; background:var(--color-card);
}

.num-pad {
  display:grid; grid-template-columns:repeat(3,1fr);
   max-width:360px; margin:0 auto 1rem;
}
.num-pad button {
  height:60px; font-size:1.4rem; font-weight:900;
  border:1px solid var(--color-card);
  background:var(--color-numpad); cursor:pointer;
  transition:background .1s;
}
.num-pad button:active {
  background:var(--color-sec); color:#fff;
}

.result { background:var(--color-result); }
.result p {
  display:flex; justify-content:space-between;
  margin:.5rem 0; font-size:1rem;
}
.result .value {
  font-size:1rem; font-weight:900;
  color:var(--color-font); min-width:50px; text-align:right;
}

.result .resultlabel {
  color: var(--color-border);
}

.result .resultlabelO {
  color: var(--color-font);
}

.product-list { display:none; } /* on ne l’utilise plus */
.modal {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5); display:flex;
  align-items:center; justify-content:center; z-index:10;
}
.modal.hidden { display:none; }
.modal-content {
  background:#fff; padding:2rem; border-radius:12px;
  width:90%; max-width:320px;
}
.modal-content input { width:100%; margin-bottom:1rem; height:48px; padding:0 .75rem; border:1px solid var(--color-border); border-radius:8px; }

.modal-actions { display:flex; gap:1rem; }