/* ══════════════════════════════════════════════
   CARROUSEL DE STATIONS — cartes « events »
   ══════════════════════════════════════════════
   Toutes les cartes portent leur photographie.
   Fond quasi noir, coins généreux, titre sur
   l'image — proches du modèle Tony Robbins,
   dans la palette LA TRINITÉ.
   ══════════════════════════════════════════════ */

.carrousel{
  background:#0a0908;
  color:var(--calcaire);
  padding:clamp(64px, 9vh, 116px) 0 clamp(56px, 8vh, 96px);
  overflow:hidden;
}

/* ── Barre de titre ───────────────────────────── */
.carrousel-tete{
  display:flex; align-items:center; gap:1.2em 1.6em; flex-wrap:wrap;
  padding-inline:var(--pad-x, clamp(20px, 5vw, 72px));
  margin-bottom:clamp(28px, 4vh, 46px);
}
.carrousel-tete h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem, 3.4vw, 2.3rem); line-height:1.1;
  letter-spacing:-.01em; margin:0;
  color:#f5f0e8;
}
.carrousel-lien{
  font-size:.9rem; letter-spacing:.02em; color:var(--ocre-clair);
  border-bottom:1px solid transparent; padding-bottom:.15em;
  transition:border-color .25s, opacity .25s; white-space:nowrap;
}
.carrousel-lien:hover{ border-bottom-color:var(--ocre-clair); }
.carrousel-lien .fleche{ display:inline-block; transition:transform .25s; }
.carrousel-lien:hover .fleche{ transform:translateX(4px); }

.carrousel-nav{ margin-left:auto; display:flex; gap:.6em; }
.carrousel-nav button{
  width:46px; height:46px; border-radius:50%;
  background:color-mix(in srgb, #fff 8%, transparent);
  cursor:pointer;
  border:1px solid color-mix(in srgb, #fff 22%, transparent);
  color:#f5f0e8;
  display:grid; place-items:center;
  transition:background-color .25s, border-color .25s, color .25s, opacity .25s;
}
.carrousel-nav button:hover:not(:disabled){
  background:#f5f0e8; border-color:#f5f0e8; color:#0a0908;
}
.carrousel-nav button:disabled{ opacity:.28; cursor:default; }
.carrousel-nav svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }

/* ── La piste — cartes plus larges ────────────── */
.carrousel-piste{
  display:flex; gap:clamp(18px, 2vw, 28px);
  list-style:none; margin:0;
  padding:0 var(--pad-x, clamp(20px, 5vw, 72px)) 8px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carrousel-piste::-webkit-scrollbar{ display:none; }
.carrousel-piste > li{
  flex:0 0 clamp(300px, 32vw, 400px);
  scroll-snap-align:start;
}

/* ── La carte ─────────────────────────────────── */
.carrousel .carte-station,
.carrousel .carte-station:hover{
  display:block; color:#f5f0e8; border-bottom:none;
  outline-offset:4px;
}

.carte-visuel{
  display:block;
  position:relative; aspect-ratio:3/4.15; overflow:hidden;
  border-radius:22px;
  border:none;
  background:#14110e;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
/* Photo toujours visible */
/* Image TOUJOURS visible — jamais opacity:0.
   Au repos : un peu assombrie. Au survol / focus : elle s'ouvre. */
.carte-visuel img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:1 !important;          /* ne jamais cacher la photo */
  visibility:visible !important;
  transform:scale(1.03);
  filter:brightness(.82) saturate(.95);
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
/* Voile plus fort en bas pour porter nom + énergie */
.carte-visuel::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.05) 35%,
    rgba(0,0,0,.45) 62%,
    rgba(0,0,0,.92) 100%);
  transition:opacity .4s ease;
}

/* Au survol / carte au centre : plus claire, plus « vue » */
.carte-station:hover .carte-visuel img,
.carte-station:focus-visible .carte-visuel img,
.est-active .carte-visuel img{
  transform:scale(1);
  filter:brightness(1.05) saturate(1.05);
}
.carte-station:hover .carte-visuel::after,
.carte-station:focus-visible .carte-visuel::after,
.est-active .carte-visuel::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.12) 0%,
    transparent 42%,
    rgba(0,0,0,.28) 68%,
    rgba(0,0,0,.82) 100%);
}
.carte-station:hover .carte-visuel,
.est-active .carte-visuel{
  box-shadow:0 22px 48px rgba(0,0,0,.55);
}
.carte-station:hover .carte-visuel{ transform:translateY(-8px); }

/* ── Texte sur la photo : nom + énergie ───────── */
.carte-titre{
  position:absolute; inset:auto 0 0; z-index:2;
  padding:1.5em 1.15em clamp(1.5em, 3vh, 2.1em);
  text-align:center;
}
.carte-rang{ display:none; }
.carte-nom{
  display:block; font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.05rem, 1.8vw, 1.25rem); line-height:1.1;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,240,232,.82);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.carte-verbe{
  display:block; margin-top:.55em; padding-inline:0;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.45rem, 2.8vw, 1.95rem); line-height:1.15;
  color:#fff;
  text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  transition:color .3s ease;
}
.carte-station:hover .carte-verbe,
.est-active .carte-verbe{
  color:var(--ocre-clair, #D89B62);
}

/* ── Points ───────────────────────────────────── */
.carrousel-points{
  display:flex; justify-content:center; gap:.55em;
  margin-top:clamp(28px, 4vh, 44px);
}
.carrousel-points button{
  width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:rgba(245,240,232,.28);
  cursor:pointer; transition:background-color .3s, transform .3s;
}
.carrousel-points button:hover{ background:rgba(245,240,232,.55); }
.carrousel-points button[aria-current="true"]{
  background:#f5f0e8; transform:scale(1.25);
}

.no-js .carrousel-nav, .no-js .carrousel-points{ display:none; }

@media (max-width:640px){
  .carrousel-piste > li{ flex-basis:min(82vw, 340px); }
  .carrousel-nav{ display:none; }
  .carrousel-tete h2{ font-size:clamp(1.35rem, 6vw, 1.8rem); }
  .carte-visuel{ border-radius:18px; }
}

@media (prefers-reduced-motion: reduce){
  .carte-visuel, .carte-visuel img, .carte-verbe,
  .carrousel-nav button, .carrousel-points button{
    transition-duration:.01ms !important;
  }
  .carte-visuel img{ transform:none !important; }
  .carte-station:hover .carte-visuel{ transform:none; }
  .carrousel-piste{ scroll-behavior:auto; }
}