
.corps-realisation{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
    background-color: #fff;
}
.compare-container {
      position: relative;
      width: 800px;
      max-width: 95vw;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.5);
      

    }

    .compare-container img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      user-select: none;
      pointer-events: none;
    }

    /* Image "après" au-dessus, masquée partiellement */
    .after-img {
      clip-path: inset(0 50% 0 0); /* 50% visible au début */
      transition: clip-path 0.05s linear;
    }

    /* Barre de séparation */
    .slider-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #fuchsia;
      left: 50%;
      transform: translateX(-50%);
      cursor: ew-resize;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .slider-circle {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid #fff;
      background: #ff00ff;
      box-shadow: 0 0 12px rgba(255, 0, 255, 0.7);
    }

    /* Labels avant / après */
    .label {
      position: absolute;
      top: 12px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: rgba(0,0,0,0.6);
      color: #fff;
      backdrop-filter: blur(6px);
    }

    .label-before {
      left: 12px;
    }

    .label-after {
      right: 12px;
    }
    h3{
        text-align: center;
        margin: 20px 0 0 0;
        font-size: x-large;
    }
    .retour{
        padding: 20px 50px;
        border: none;
        border-radius: 50px;
        font-size: x-large;
        background-color: #ff00ff;
        box-shadow: 0 0 12px rgba(255, 0, 255, 0.7);
        margin:30px 0;
    }
    .retour:hover{
        background-color: #39ff14;
        box-shadow: 0 0 12px #39ff14;
    }
    .buttonRetour{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .gallery {
    display: flex;
    gap: 10px; /* espace entre les images */
  }

  .gallery img {
    width: 100%;
    height: 250px; /* hauteur fixe */
    object-fit: cover; /* évite la déformation */
    border-radius: 8px; /* optionnel */
    flex: 1;
  }

  .gallery div {
     /* chaque image prend la même largeur */
  }