.cocoen {
    position: relative; width: 100%; max-width: 900px;
    margin: 40px auto; overflow: hidden; cursor: ew-resize;
    user-select: none; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    height: 500px; /* Optionnel : fixe une hauteur si tu veux de l'uniformité */
  }
  .cocoen img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  }
  .cocoen-before {
    position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 2;
  }
  .cocoen-drag {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
    background: #fff; margin-left: -2px; display: flex;
    align-items: center; justify-content: center; z-index: 3;
  }
  .cocoen-drag::after {
    content: '↔'; position: absolute; width: 40px; height: 40px;
    border-radius: 50%; background: #fff; color: #333;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }