/* Version 5 : la hauteur suit automatiquement l'image active */
:root{
--slider-width:1000px;
--slider-min-height:220px;
--slider-max-height:900px;
--arrow-size:52px;
--arrow-gap:24px;
--dot-size:10px;
--dots-space:38px;
--background:#000;
}
*{box-sizing:border-box}
.slider-wrapper{
width:min(100%,calc(var(--slider-width) + (2*(var(--arrow-size) + var(--arrow-gap)))));
margin:5px auto 0;
display:flex;
align-items:center;
justify-content:center;
gap:var(--arrow-gap);
}
.slider{width:100%;max-width:var(--slider-width);position:relative;padding-bottom:var(--dots-space)}
.track{
position:relative;
background:var(--background);
overflow:hidden;
min-height:var(--slider-min-height);
max-height:var(--slider-max-height);
transition:height .45s ease;
}
.track img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:contain;
background:var(--background);
opacity:0;
transition:opacity .8s ease;
}
.track img.active{opacity:1}
.prev,.next{
width:var(--arrow-size);height:var(--arrow-size);
flex:0 0 var(--arrow-size);
border:none;border-radius:50%;cursor:pointer;
background:#fff;font-size:26px;
}
.dots{position:absolute;left:0;bottom:8px;width:100%;text-align:center}
.dot{display:inline-block;width:var(--dot-size);height:var(--dot-size);border-radius:50%;margin:0 4px;background:#999;cursor:pointer}
.dot.active{background:#222}
@media(max-width:768px){
:root{--arrow-size:42px;--arrow-gap:10px;--dot-size:8px;}
}