/* SHIFT × SAM K : « Pub Slider » (accueil, univers). Hauteur réglable avec --ps-h. */
@keyframes psKen { from { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes psUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes psBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ps { --ps-dur: 6s; position: relative; width: 100%; max-width: 1440px; margin: 0 auto; height: var(--ps-h, min(70vh, 620px)); min-height: 420px; overflow: hidden; background: var(--ink); border-radius: 20px; }
.ps-slide { position: absolute; inset: 0; overflow: hidden; z-index: 0; visibility: hidden; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
.ps-slide.is-prev { z-index: 1; visibility: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.ps-slide.is-on { z-index: 2; visibility: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.ps-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-slide.is-on .ps-img { animation: psKen 8s ease-out both; }
.ps-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 10, .92) 0%, rgba(12, 11, 10, .55) 45%, rgba(12, 11, 10, .1) 100%); }
.ps-text { position: absolute; left: clamp(24px, 5vw, 80px); top: 50%; transform: translateY(-50%); max-width: min(640px, 80%); display: none; flex-direction: column; gap: 16px; color: var(--light); }
.ps-slide.is-on .ps-text { display: flex; }
.ps-kicker { font-size: 11px; letter-spacing: .4em; color: var(--gold); animation: psUp .8s .25s both; }
.ps-title { font-size: clamp(38px, 5.4vw, 92px); font-weight: 600; line-height: .95; letter-spacing: -.02em; text-wrap: balance; animation: psUp .9s .35s cubic-bezier(.2, .9, .2, 1) both; }
.ps-sub { font-size: clamp(14px, 1.2vw, 17px); font-weight: 300; line-height: 1.5; color: rgba(244, 241, 236, .8); animation: psUp .9s .5s both; }
.ps-cta { align-self: flex-start; margin-top: 8px; height: 50px; padding: 0 28px; border-radius: 25px; background: var(--gold); color: #141312; display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; animation: psUp .9s .65s both; transition: all .3s; }
.ps-cta:hover { background: var(--light); color: #141312; gap: 22px; }
.ps-bars { position: absolute; left: clamp(24px, 5vw, 80px); right: clamp(24px, 5vw, 80px); top: 14px; display: flex; gap: 6px; z-index: 5; }
.ps-bar { position: relative; flex: 1; height: 21px; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
.ps-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.ps-fill { position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.ps-bar.is-done .ps-fill { transform: scaleX(1); }
.ps-fill.is-run { animation: psBar var(--ps-dur) linear both; }
.ps.is-paused .ps-fill.is-run { animation-play-state: paused; }
.ps-nav { position: absolute; right: clamp(24px, 5vw, 80px); bottom: 28px; display: flex; align-items: center; gap: 14px; z-index: 5; color: var(--light); }
.ps-count { font-size: 12px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.ps-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(12, 11, 10, .3); color: #fff; font-size: 16px; transition: all .3s; }
.ps-nav button:hover { background: var(--gold); border-color: var(--gold); color: #141312; }

@media (max-width: 900px) {
  .ps { height: min(66vh, 520px); border-radius: 16px; }
  .ps-title { font-size: clamp(32px, 9vw, 60px); }
  .ps-nav { bottom: 18px; }
  .ps-nav button { width: 42px; height: 42px; }
}