/* ===== TM Size Comparator (lite) ===== */
.tm-sc{ margin:16px 0; }
.tm-sc-stage{
  position:relative;
  width:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  /* aspect-ratio désormais injecté en front via variables :
     .tm-sc-stage{aspect-ratio:var(--tm-sc-ar-pc)} + media queries */
}

.tm-sc-scene{
  position:absolute; inset:0;
  background:#f8f8f8 center/cover no-repeat;
  transform:translateZ(0);
}
.tm-sc-art{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  image-rendering:auto;
  border-radius:0;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  will-change: width, height, transform;
}

/* --- Contrôles tailles --- */
.tm-sc-controls{
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 colonnes fixes */
  gap: 8px;
  margin: 10px 0 0;
  justify-content: stretch;
}

.tm-sc-size{
  width: 100%;
  white-space: nowrap;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  font-weight: 700;
  font-size: clamp(12px, 2.8vw, 15px);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transition: transform .06s ease,
             box-shadow .12s ease,
             border-color .12s ease,
             background .12s ease,
             color .12s ease;
}

.tm-sc-size:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(217,94,61,.12);
}

.tm-sc-size.is-active{}

/* Bounce doux quand la taille change */
@keyframes tmScBounce {
  0%   { transform:translate(-50%,-50%) scale(0.98); }
  40%  { transform:translate(-50%,-50%) scale(1.03); }
  100% { transform:translate(-50%,-50%) scale(1); }
}
.tm-sc-art.is-bounce{ animation: tmScBounce .28s ease-out; }

/* --- Responsive ajustements --- */
@media (max-width: 480px){
  .tm-sc-controls{ gap: 6px; }
  .tm-sc-size{
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: clamp(11px, 3.4vw, 14px);
  }
}

@media (max-width: 360px){
  .tm-sc-size{
    height: 30px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: clamp(10px, 3.8vw, 13px);
  }
}