/* =====================================================================
   Offre du moment (clients)
   ===================================================================== */

.odm-liste { display: flex; flex-direction: column; gap: 1rem; }

.odm-offre {
  border: 0.0625rem solid var(--wsh-border);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.odm-offre.is-ouverte { border-color: var(--wsh-primary-light); box-shadow: 0 0.25rem 1.25rem rgba(74, 32, 80, 0.08); }

/* --- En-tête repliable --- */
.odm-offre-tete {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: linear-gradient(135deg, #fbf6fa 0%, #fff 70%);
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.odm-offre-tete:hover { background: linear-gradient(135deg, #f7eef5 0%, #fff 70%); }
.odm-offre-tete:focus-visible { outline: 0.125rem solid var(--wsh-primary-light); outline-offset: -0.125rem; }

.odm-offre-titres { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.odm-offre-titre { font-size: 1.125rem; font-weight: 700; color: var(--wsh-primary); letter-spacing: -0.01em; }
.odm-offre-desc { font-size: 0.8125rem; color: #6b5f6b; }
.odm-offre-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: 0.75rem; color: #8a7e88; margin-top: 0.125rem; }

.odm-date-fin {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font-weight: 600; color: var(--wsh-primary); background: var(--wsh-bg-soft);
  padding: 0.1875rem 0.625rem; border-radius: 62rem;
}
.odm-date-fin svg { width: 0.8125rem; height: 0.8125rem; flex-shrink: 0; }
.odm-date-fin.is-urgent { color: var(--wsh-red); background: var(--wsh-red-bg); }
.odm-reste { font-weight: 700; color: var(--wsh-primary-light); }
.odm-reste.is-urgent { color: var(--wsh-red); }
.odm-deja {
  background: var(--wsh-green-bg); color: var(--wsh-green);
  font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 62rem;
}

.odm-offre-montants { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; white-space: nowrap; }
.odm-eco { background: var(--wsh-red); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.1875rem 0.5625rem; border-radius: 62rem; }
.odm-offre-total { font-size: 1.25rem; font-weight: 800; color: var(--wsh-primary); }
.odm-offre-total-barre { font-size: 0.75rem; color: #a898a5; text-decoration: line-through; }

.odm-chevron { width: 1.25rem; height: 1.25rem; color: var(--wsh-primary-light); transition: transform .2s ease; }
.odm-offre.is-ouverte .odm-chevron { transform: rotate(180deg); }

/* --- Corps --- */
.odm-offre-corps { border-top: 0.0625rem solid var(--wsh-border-soft); }
.odm-offre-corps[hidden] { display: none; }
.odm-lignes { display: flex; flex-direction: column; }

.odm-ligne {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1.25rem;
  border-bottom: 0.0625rem solid var(--wsh-border-soft);
}
.odm-ligne:last-child { border-bottom: none; }
.odm-ligne.is-avant { background: #fffbef; box-shadow: inset 0.25rem 0 0 #e0a100; }

.odm-photo {
  width: 5.5rem; height: 5.5rem; border-radius: 0.75rem; overflow: hidden;
  background: var(--wsh-bg-soft); display: flex; align-items: center; justify-content: center;
}
.odm-photo img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.odm-photo-vide { font-size: 0.6875rem; color: #a898a5; }

.odm-ligne-main { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.odm-ligne-nom { font-size: 0.9375rem; font-weight: 600; color: #2a2a2a; }
.odm-variante {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 62rem;
  background: #fde4ec; color: #b8325f; border: 0.0625rem solid #f6c4d5;
}

.odm-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.odm-pastille {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 62rem;
  background: var(--wsh-bg-soft); color: var(--wsh-primary);
}
.odm-pastille svg { width: 0.6875rem; height: 0.6875rem; }
.odm-pastille-avant { background: #fff1c4; color: #8a5d00; }

.odm-champs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.odm-champs label { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.625rem; color: #a898a5; text-transform: uppercase; letter-spacing: 0.04em; }
.odm-champs input {
  border: 0.0625rem solid var(--wsh-border-soft); border-radius: 0.5rem; padding: 0.3125rem 0.5rem;
  font: inherit; font-size: 0.8125rem; color: #2a2a2a; background: #fff; text-transform: none; letter-spacing: 0;
}
.odm-champs input[data-champ="code"] { width: 5rem; }
.odm-champs input[data-champ="ean"] { width: 8.5rem; }
.odm-champs input[data-champ="pv"] { width: 5rem; }
.odm-champs input:focus { outline: none; border-color: var(--wsh-primary-light); }

.odm-ligne-prix { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; white-space: nowrap; }
.odm-qte { font-size: 0.9375rem; font-weight: 700; color: var(--wsh-primary); background: var(--wsh-bg-soft); padding: 0.1875rem 0.625rem; border-radius: 0.5rem; }
.odm-prix-unit { display: flex; align-items: baseline; gap: 0.375rem; font-size: 0.8125rem; color: #5a4a5c; }
.odm-prix-barre { text-decoration: line-through; color: #a898a5; font-size: 0.75rem; }
.odm-prix-promo { color: var(--wsh-red); }
.odm-remise-ligne { font-size: 0.6875rem; font-weight: 700; color: var(--wsh-red); }

/* --- Pied : total + validation --- */
.odm-pied {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem; background: var(--wsh-bg-soft);
  position: sticky; bottom: 0;
}
.odm-pied-info { margin: 0; font-size: 0.75rem; color: #6b5f6b; flex: 1 1 auto; min-width: 0; }
@media (min-width: 900px) { .odm-pied { flex-wrap: nowrap; } .odm-pied-info { white-space: nowrap; } }
.odm-pied-action { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.odm-pied-total { font-size: 0.9375rem; color: #5a4a5c; }
.odm-pied-total strong { font-size: 1.125rem; color: var(--wsh-primary); }

.odm-vide { text-align: center; padding: 2.5rem 1rem; color: #6b5f6b; }
.odm-vide p { margin: 0 0 0.5rem; }
.odm-vide .wsh-btn-submit { display: inline-block; margin-top: 0.75rem; text-decoration: none; }

.odm-modal-recap { margin: 0 0 0.75rem; font-size: 0.875rem; color: #5a4a5c; font-weight: 600; }

/* --- Mobile --- */
@media (max-width: 640px) {
  .odm-offre-tete { grid-template-columns: 1fr 1.5rem; padding: 0.875rem; }
  .odm-offre-montants { grid-column: 1 / 2; flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .odm-chevron { grid-row: 1; grid-column: 2; }
  .odm-ligne { grid-template-columns: 4rem 1fr; gap: 0.75rem; padding: 0.75rem; }
  .odm-photo { width: 4rem; height: 4rem; }
  .odm-ligne-prix {
    grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
    padding-top: 0.25rem;
  }
  .odm-pied { padding: 0.75rem; }
  .odm-pied-action { width: 100%; justify-content: space-between; }
  .odm-pied-info { display: none; }
}