.coffres-section {
  max-width: 1360px;
  overflow-x: auto;
  padding-bottom: 24px;
}

.coffres-map {
  position: relative;
  width: 100%;
  min-width: 1180px;
  aspect-ratio: 16 / 9;
  margin-top: 40px;
  border-radius: 34px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
}

.coffres-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.coffres-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.coffre {
  position: absolute;
  width: 8.6%;
  min-width: 86px;
  height: 6.4%;
  border: 2px solid rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, #ffffff, #eeeeee);
  color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(0.68rem, 0.78vw, 0.92rem);
  font-weight: 900;
  line-height: 1.05;
  border-radius: 9px;
  padding: 3px 6px;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18),
    0 0 18px rgb(255 0 255 / 38%);
}

.coffre-vide {
  background: linear-gradient(180deg, #2fe36e, #10963c);
  border-color: rgba(120, 255, 150, 0.95);
  color: #ffffff;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(47, 227, 110, 0.9);
}

.coffre span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.coffre input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-weight: 900;
  color: #050505;
  outline: none;
}

.coffre-vide span,
.coffre-vide input,
.coffre-vide input::placeholder {
  color: #ffffff;
  opacity: 1;
}

.coffre-2,
.coffre-4,
.coffre-5,
.coffre-8,
.coffre-9,
.coffre-10,
.coffre-13,
.coffre-14,
.coffre-25,
.coffre-26,
.coffre-29,
.coffre-30,
.coffre-31,
.coffre-34,
.coffre-35,
.coffre-36 {
  width: 4.2%;
  min-width: 48px;
  height: 14.8%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 6px 2px;
}

.coffre-1  { left: 6%; top: 5%; }
.coffre-2  { left: 3%; top: 10%; }
.coffre-3  { left: 22%; top: 12%; }

.coffre-4  { left: 10%; top: 30%; }

.coffre-5  { left: 19%; top: 30%; }
.coffre-6  { left: 22%; top: 25%; }
.coffre-7  { left: 22%; top: 43%; }
.coffre-8  { left: 30%; top: 30%; }

.coffre-9  { left: 10%; top: 59%; }

.coffre-10 { left: 19%; top: 59%; }
.coffre-11 { left: 22%; top: 55%; }
.coffre-12 { left: 22%; top: 71%; }
.coffre-13 { left: 30%; top: 59%; }

.coffre-14 { left: 3%; top: 76%; }
.coffre-15 { left: 6%; top: 89%; }
.coffre-16 { left: 22%; top: 86%; }

.coffre-17 { left: 37%; top: 40%; }
.coffre-18 { left: 47%; top: 40%; }
.coffre-19 { left: 58%; top: 40%; }

.coffre-20 { left: 37%; top: 51%; }
.coffre-21 { left: 47%; top: 51%; }
.coffre-22 { left: 58%; top: 51%; }

.coffre-23 { left: 74%; top: 12%; }
.coffre-24 { left: 85%; top: 5%; }
.coffre-25 { left: 93%; top: 10%; }

.coffre-26 { left: 71%; top: 30%; }
.coffre-27 { left: 74%; top: 25%; }
.coffre-28 { left: 74%; top: 42%; }
.coffre-29 { left: 82%; top: 30%; }

.coffre-30 { left: 89%; top: 30%; }

.coffre-31 { left: 71%; top: 59%; }
.coffre-32 { left: 74%; top: 55%; }
.coffre-33 { left: 74%; top: 72%; }
.coffre-34 { left: 82%; top: 59%; }

.coffre-35 { left: 89%; top: 59%; }

.coffre-36 { left: 93%; top: 76%; }
.coffre-37 { left: 74%; top: 83%; }
.coffre-38 { left: 85%; top: 89%; }

.save-message {
  margin-top: 20px;
  color: var(--purple-light);
  font-weight: 900;
}

.save-btn {
  margin-top: 28px;
}

.empty-coffres,
.admin-notice {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-weight: 800;
}

.admin-notice {
  color: var(--green);
  background: rgba(157, 255, 63, 0.08);
  border-color: rgba(157, 255, 63, 0.25);
}

@media (max-width: 850px) {
  .coffres-section {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .coffres-map {
    min-width: 1180px;
  }

  .coffre {
    font-size: 0.82rem;
  }
}