.btn-modern {
    border-radius: 0.5rem;
    color: #fff;
    border: none;
    transition: all 0.17s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  
  .btn-square {
    /* Largeur et hauteur réactives : minimum 32px, maximum 42px, sinon 7vw */
    width: clamp(32px, 7vw, 42px);
    height: clamp(32px, 7vw, 42px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  }
  
  .btn-minus, .btn-plus {
    box-shadow: none !important;
    background: transparent;
    border: 1.5px solid #444;
  }
  .btn-minus { color: #ff5252; }
  .btn-plus  { color: #69f0ae; }
  .btn-minus:hover, .btn-plus:hover {
    background-color: #232323;
    color: #fff;
    border-color: #ffe100;
    box-shadow: none;
    filter: brightness(1.08);
    transform: translateY(1px) scale(0.98);
  }
  .btn-modern:active {
    transform: scale(0.95);
    filter: brightness(0.9);
  }
  
  .btn-heart, .btn-trade {
    color: #fff;
    background: transparent;
    border: 1.5px solid #444;
    transition: all 0.13s;
    box-shadow: none;
  }
  .btn-heart:hover, .btn-trade:hover {
    background: #232323;
    border-color: #ffe100;
    color: #ffe100;
    box-shadow: none;
  }
  .btn-heart.active,
  .btn-heart[aria-pressed="true"] {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
    box-shadow: none;
  }
  .btn-heart.active i,
  .btn-heart[aria-pressed="true"] i {
    font-weight: bold;
  }
  .btn-trade.active,
  .btn-trade[aria-pressed="true"] {
    background: #ffd600;
    color: #222;
    border-color: #ffd600;
    box-shadow: none;
  }
  .btn-trade.active i,
  .btn-trade[aria-pressed="true"] i {
    font-weight: bold;
  }
  
  .quantity-badge {
    background-color: #263238;
    color: #eceff1;
    font-weight: bold;
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
    min-width: clamp(26px, 6vw, 34px);
    min-height: clamp(26px, 6vw, 34px);
    font-size: clamp(1.02rem, 2.4vw, 1.15rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  @media (max-width: 600px) {
    .btn-square {
      width: clamp(28px, 8vw, 34px);
      height: clamp(28px, 8vw, 34px);
      font-size: clamp(1rem, 4vw, 1.13rem);
    }
    .quantity-badge {
      min-width: clamp(22px, 7vw, 30px);
      min-height: clamp(22px, 7vw, 30px);
      font-size: clamp(0.95rem, 3vw, 1.04rem);
      padding: 0.2rem 0.35rem;
    }
  }
  
  @media (max-width: 400px) {
    .btn-square {
      width: clamp(22px, 11vw, 28px);
      height: clamp(22px, 11vw, 28px);
      font-size: clamp(0.97rem, 4.2vw, 1rem);
    }
    .quantity-badge {
      min-width: clamp(16px, 10vw, 22px);
      min-height: clamp(16px, 10vw, 22px);
      font-size: clamp(0.86rem, 2.7vw, 0.96rem);
      padding: 0.1rem 0.18rem;
    }
  }