:root{
  --bg:#ffffff;
  --frame:#e2ded2;
  --accent:#3d5a4c;
  --frame-w:0px;
  --radius:10px;
  --dur:500ms;
  --fit:cover;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:transparent;}
img{-webkit-user-drag:none;user-select:none;}

.carousel{
  position:relative; max-width:900px; margin:0 auto; overflow:hidden;
  aspect-ratio:16 / 9; background:var(--bg); border:var(--frame-w) solid var(--frame); border-radius:var(--radius);
  touch-action:pan-y;
}
.carousel .slide img{ width:100%; height:100%; object-fit:var(--fit); display:block; }

.carousel .track{ display:flex; width:100%; height:100%; transition:transform var(--dur) ease; }
.carousel .slide{ flex:none; width:100%; height:100%; }


.carousel .slide img, .grid-carousel .cell img{ transition: transform var(--dur) ease; }
.carousel .slide:hover img, .grid-carousel .cell:hover img{ transform: scale(1.06); }


.carousel .arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid var(--frame); cursor:pointer; z-index:5;
  transition:background var(--dur) ease, opacity .35s ease;
  opacity:0; pointer-events:none;
}
.carousel:hover .arrow{ opacity:1; pointer-events:auto; }
.carousel .arrow:hover{ background:#fff; }
.carousel .arrow::before{
  content:""; position:absolute; top:14px; width:12px; height:12px; border:2px solid var(--accent);
  border-right:none; border-bottom:none;
}
.carousel .arrow.prev{ left:14px; } .carousel .arrow.prev::before{ left:15px; transform:rotate(-45deg); }
.carousel .arrow.next{ right:14px; } .carousel .arrow.next::before{ right:15px; transform:rotate(135deg); }

/* Bouton lecture / pause, discret, en bas a droite */
.carousel .playpause{
  position:absolute; bottom:12px; right:12px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.6); border:1px solid var(--frame); cursor:pointer; z-index:6;
  color:var(--accent); font-size:9px; line-height:1; display:flex; align-items:center; justify-content:center;
  opacity:.45; transition:opacity .3s ease, background var(--dur) ease;
  padding:0;
}
.carousel .playpause:hover{ opacity:1; background:#fff; }


.carousel .dots{
  position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:5;
}
.carousel .dot{
  width:8px; height:8px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.55);
  cursor:pointer; transition:background var(--dur) ease, transform var(--dur) ease;
}
.carousel .dot.active{ background:var(--accent); transform:scale(1.25); }