.reverse-button {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
  }
  .shadow {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    will-change: transform;
    background: hsl(0deg 0% 0% / 0.25);
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }

  .shadow-green {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    will-change: transform;
    background: #44563072;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }

  .edge {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      #ce6f2bd9 0%,
      #a75a23 8%,
      #633413 92%,
      #4d2a10 100%
    );
  }
  .edge-green {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      #6f944e 0%,      /* vert plus foncé que #86AD5F */
      #86AD5F 25%,     /* couleur centrale - ton principal */
      #647d50 75%,     /* vert plus clair pour éclaircir la fin */
      #6f944e 100%     /* retour au foncé pour encadrer */
    );
  }
  
  .front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: white;
    background: #ce6f2b;
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  .front-green {
    display: block;
    position: relative;
    padding: 6px 22px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: white;
    background: #86ad5f;
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  
  .reverse-button:hover {
    filter: brightness(110%);
  }
  
  .reverse-button:hover .front, .reverse-button:hover .front-green {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
  }
  .reverse-button:active .front, .reverse-button:active .front-green {
    transform: translateY(-2px);
    transition: transform 34ms;
  }
  
  .reverse-button:hover .shadow, .reverse-button:hover .shadow-green {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
  }
  .reverse-button:active .shadow, .reverse-button:active .shadow-green {
    transform: translateY(0px);
    transition: transform 34ms;
  }
  
  .reverse-button:focus:not(:focus-visible) {
    outline: none;
  }
  
  .reverse-button:hover {
    background: transparent !important;
  }

  
  