:root{
    --bg:#f2f2f2;
    --text:#111;
    --line:#111;
    --border:#888;
    --compare-bg:#f2f2f2;
}


body.dark{
    --bg:#111;
    --text:#eee;
    --line:#eee;
    --border:#777;
    --compare-bg:#111;
}


*{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{
    margin:0;
    padding:20px;
    background:var(--bg);
    color:var(--text);
    transition:.3s;
}



header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    border-bottom:1px solid var(--border);

    padding-bottom:15px;
    margin-bottom:25px;
}



h1{
    font-size:28px;
    margin:0;
}



main{
    max-width:900px;
    margin:auto;

    display:flex;
    flex-direction:column;
    gap:20px;
}



.box{
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
}



h2{
    margin-top:0;
}



input,
select,
button{

    width:100%;

    padding:12px;

    margin-top:10px;

    font-size:16px;

    background:transparent;

    color:inherit;

    border:1px solid var(--border);

    border-radius:8px;

}



button{
    cursor:pointer;
    transition:.2s;
}



button:hover{
    background:#ddd;
}


body.dark button:hover{
    background:#333;
}



img{

    max-width:100%;

}



#originalPreview,
#resultPreview{

    width:100%;

    max-height:500px;

    object-fit:contain;

    margin-top:15px;

}





progress{

    width:100%;

    height:25px;

}





#status{

    text-align:center;

}





.console{

    background:#000;

    color:white;

    font-family:"Courier New",monospace;

    padding:15px;

    margin-top:15px;

    height:220px;

    overflow-y:auto;

    border-radius:10px;

}



body.dark .console{

    background:white;

    color:black;

}





/* ==========================
   COMPARATEUR
========================== */


#compareBox{

    position:relative;

    width:100%;

    max-width:800px;

    margin:auto;

    overflow:hidden;

    background:var(--compare-bg);

    border:2px solid var(--border);

    border-radius:12px;

}



#compareBefore,
#compareAfter{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

}



#compareBefore{

    position:relative;

}



#afterContainer{

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:50%;

    overflow:hidden;

}



#compareAfter{

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:100%;

    max-width:none;

    object-fit:contain;

}



#compareLine{

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:3px;

    background:var(--line);

    z-index:5;

}



#compareSlider{

    margin-top:15px;

}



#compareSlider::-webkit-slider-thumb{

    cursor:pointer;

}





@media(min-width:700px){

main{

    display:grid;

    grid-template-columns:repeat(2,1fr);

}


.box:last-child{

    grid-column:span 2;

}

}




@media(max-width:600px){

body{

    padding:10px;

}


h1{

    font-size:22px;

}

}