:root { --brand: #a879ee; --bg: #e6d5ff; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); margin: 0; display: flex; justify-content: center; padding: 20px; }
.app-container { background: white; padding: 25px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 800px; text-align: center; }

/* Upload & Bouton */
.custom-btn { background: var(--brand); color: white; padding: 15px 25px; border-radius: 50px; cursor: pointer; display: inline-block; font-weight: bold; margin-bottom: 20px; transition: 0.3s; }
.custom-btn:hover { transform: scale(1.05); }

/* Layout Flexible */
.editor-wrapper { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; margin-top: 20px; }
@media (max-width: 768px) { .editor-wrapper { flex-direction: column; align-items: center; } }

.control-panel { background: #fdfdfd; padding: 20px; border-radius: 15px; border: 1px solid #eee; min-width: 200px; width: 100%; }
input[type=range] { width: 100%; accent-color: var(--brand); cursor: pointer; }

/* Zone Image */
.viewer { position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); line-height: 0; width: 100%; }
canvas { width: 100% !important; height: auto !important; cursor: crosshair; background: #f0f0f0; }

/* Marqueur */
.marker { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 100; }
.ring { width: 40px; height: 40px; border: 4px solid white; border-radius: 50%; box-shadow: 0 0 15px rgba(0,0,0,0.4); animation: pulse 1.5s infinite; }
.info-bubble { background: white; padding: 12px; border-radius: 12px; margin-top: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); min-width: 140px; line-height: 1.4; }
.info-bubble strong { color: var(--brand); display: block; }

@keyframes pulse { 
    0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } 
}
/* --- Styles du Slider Avant/Après --- */
a{
    text-decoration: none;
    color: #e6d5ff;
    position: left;
}
.comparison-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5;
    overflow: hidden;
    user-select: none;
}

.before-image {
    position: absolute;
    top: 0; left: 0;
    width: 50%; /* Largeur initiale */
    height: 100%;
    overflow: hidden;
    z-index: 2;
    border-right: 2px solid white;
}

.after-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.slider-handle {
    position: absolute;
    top: 0; left: 50%;
    width: 4px; height: 100%;
    background: white;
    z-index: 3;
    transform: translateX(-50%);
    cursor: ew-resize;
}

.handle-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: var(--brand);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.label-tag {
    position: absolute;
    bottom: 10px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 10px;
    border-radius: 4px;
    z-index: 4;
}
.before { left: 10px; }
.after { right: 10px; }