/* Le carrousel de photos : page Édition 2026, et les photos de l'équipe. */

.carousel{position:relative;width:100%;max-width:min(460px,64vh);justify-self:center}
/* Emplacement photo : le titre s'affiche tant que la feuille ne donne pas
   de lien, et la photo vient le recouvrir ensuite. Le format reste le meme
   dans les deux cas pour que le carrousel ne saute pas. */
.carousel-ph{position:relative;aspect-ratio:3/2;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in oklab,var(--teal) 22%,var(--paper)),
    color-mix(in oklab,var(--lime) 26%,var(--paper)));
  color:var(--moss-deep);font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.6rem);letter-spacing:.04em;text-align:center;padding:1rem}
.carousel-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel-ph img[hidden]{display:none}
.carousel-viewport{
  overflow:hidden;border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow-lg);background:var(--paper);cursor:grab;
  border:1px solid var(--line);
}
.carousel-viewport.is-dragging{cursor:grabbing}
.carousel-track{display:flex;transition:transform .6s cubic-bezier(.22,1,.28,1);will-change:transform}
.carousel-slide{flex:0 0 100%;position:relative;margin:0}
.carousel-cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem .95rem;
  background:linear-gradient(to top,rgba(18,48,36,.92),rgba(18,48,36,.55) 45%,transparent);
  color:var(--paper);
}
.carousel-cap b{display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;color:var(--sand)}
.carousel-cap span{display:block;margin-top:.25rem;font-size:.84rem;line-height:1.45;opacity:.9}

.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--bark);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);font-size:1.3rem;line-height:1;
  transition:transform .25s var(--ease),background .25s;z-index:3
}
.carousel-btn:hover{background:var(--sand);transform:translateY(-50%) scale(1.08)}
.carousel-btn--prev{left:-14px}
.carousel-btn--next{right:-14px}

.carousel-dots{display:flex;gap:.45rem;justify-content:center;margin-top:.9rem}
.carousel-dots button{
  width:9px;height:9px;border-radius:999px;background:color-mix(in oklab,var(--moss) 28%,transparent);
  transition:.3s var(--ease)
}
.carousel-dots button.is-active{width:26px;background:var(--clay)}

.carousel-count{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  background:rgba(18,48,36,.72);color:var(--sand);border-radius:999px;
  padding:.25rem .7rem;font-size:.72rem;font-weight:700;letter-spacing:.08em
}

/* les flèches sont posées sur le cadre, jamais rognées */
.carousel-btn{top:calc(50% - 14px)}

@media (max-width:1024px){
  .carousel{max-width:min(100%,400px)}
}
@media (max-width:960px){
  .carousel-btn--prev{left:6px}
  .carousel-btn--next{right:6px}
}
@media (max-width:640px){
  .carousel-btn{width:36px;height:36px;font-size:1.1rem}
  .carousel-cap{padding:1.8rem .8rem .7rem}
  .carousel-cap b{font-size:.88rem}
  .carousel-cap span{font-size:.74rem}
}
@media (min-width:1400px){
  .carousel{max-width:min(1000px,96vh)}
}
@media (min-width:1700px){
  .carousel{max-width:min(1120px,98vh)}
}