/* MHH Slider : affichage public. Tout est préfixé .mhh-slider pour ne pas heurter le thème. */
.mhh-slider{--mhh-accent:#ff4d00;position:relative;isolation:isolate;width:100%;max-width:1400px;min-height:320px;margin:0 auto 1.5rem;aspect-ratio:var(--mhh-ratio,16/8);border-radius:22px;overflow:hidden;background:#0b0b0d;color:#fff;font-family:var(--mhh-font,"Archivo Narrow",Oswald,Impact,system-ui,sans-serif);touch-action:pan-y;-webkit-user-select:none;user-select:none;box-sizing:border-box}
.mhh-slider *,.mhh-slider *::before,.mhh-slider *::after{box-sizing:border-box}
.mhh-slider:focus-visible{outline:3px solid var(--mhh-accent);outline-offset:-3px}
.mhh-slider .mhh-track{position:absolute;inset:0}
.mhh-slider .mhh-slide{position:absolute;inset:0;margin:0;padding:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.mhh-slider .mhh-slide.is-active{opacity:1;visibility:visible;z-index:2}
.mhh-slider .mhh-img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;transform:scale(1.08);transition:transform 7s cubic-bezier(.2,.6,.2,1);will-change:transform;pointer-events:none;-webkit-user-drag:none}
.mhh-slider .mhh-slide.is-active .mhh-img{transform:scale(1)}
.mhh-slider .mhh-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%),linear-gradient(90deg,rgba(0,0,0,.5),transparent 60%)}
.mhh-slider .mhh-cap{position:absolute;z-index:3;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);bottom:clamp(64px,9vw,96px);max-width:760px;pointer-events:none}
.mhh-slider .mhh-tag{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:999px;background:var(--mhh-accent);color:#000;font-size:clamp(11px,1.2vw,13px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.mhh-slider .mhh-title{margin:0 0 14px;padding:0;color:#fff;font-size:clamp(26px,5.2vw,68px);font-weight:900;line-height:.98;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.mhh-slider .mhh-meta{font-size:clamp(13px,1.4vw,16px);letter-spacing:.04em;opacity:.8}
.mhh-slider .mhh-cap>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.mhh-slider .mhh-slide.is-active .mhh-cap>*{opacity:1;transform:none}
.mhh-slider .mhh-slide.is-active .mhh-cap>:nth-child(2){transition-delay:.12s}
.mhh-slider .mhh-slide.is-active .mhh-cap>:nth-child(3){transition-delay:.24s}
.mhh-slider .mhh-link{position:absolute;inset:0;z-index:4;display:block;color:inherit;text-decoration:none;box-shadow:none}
.mhh-slider .mhh-link:focus-visible{outline:3px solid var(--mhh-accent);outline-offset:-6px}

/* Flèches */
.mhh-slider .mhh-btn{position:absolute;top:50%;z-index:6;width:52px;height:52px;margin:-26px 0 0;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(20,20,22,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:inherit;font-size:20px;line-height:1;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.mhh-slider .mhh-btn:hover{background:var(--mhh-accent);color:#000;transform:scale(1.08)}
.mhh-slider .mhh-btn:focus-visible{outline:3px solid var(--mhh-accent);outline-offset:2px}
.mhh-slider .mhh-prev{left:16px}
.mhh-slider .mhh-next{right:16px}

/* Progression (segments cliquables) */
.mhh-slider .mhh-bar{position:absolute;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);bottom:22px;z-index:6;display:flex;align-items:center;gap:8px}
.mhh-slider .mhh-seg{flex:1;height:4px;margin:0;padding:0;border:0;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.25);cursor:pointer}
.mhh-slider .mhh-seg:focus-visible{outline:2px solid var(--mhh-accent);outline-offset:3px}
.mhh-slider .mhh-seg i{display:block;width:0;height:100%;background:var(--mhh-accent)}
.mhh-slider .mhh-seg.done i{width:100%}
.mhh-slider .mhh-seg.run i{animation:mhh-fill var(--mhh-d,6s) linear forwards}
.mhh-slider.is-paused .mhh-seg.run i{animation-play-state:paused}
.mhh-slider .mhh-count{margin-left:10px;font-size:14px;font-weight:800;letter-spacing:.1em;white-space:nowrap}
@keyframes mhh-fill{to{width:100%}}

/* Effet « glissement doux » */
.mhh-slider[data-fx="glide"] .mhh-slide.is-active{animation:mhh-in-next .9s cubic-bezier(.2,.7,.2,1) both}
.mhh-slider[data-fx="glide"][data-dir="prev"] .mhh-slide.is-active{animation-name:mhh-in-prev}
@keyframes mhh-in-next{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}
@keyframes mhh-in-prev{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}

/* Dans l'éditeur de blocs, le clic sélectionne le bloc au lieu d'ouvrir l'article */
.wp-block-mhh-slider .mhh-link{pointer-events:none}

.mhh-slider.is-single .mhh-btn,.mhh-slider.is-single .mhh-bar{display:none}
.mhh-slider-empty{padding:14px 18px;border:1px dashed #999;border-radius:10px;font-size:14px}

@media (max-width:640px){
	.mhh-slider{aspect-ratio:var(--mhh-ratio-m,4/5);min-height:0;border-radius:16px}
	.mhh-slider .mhh-btn{display:none}
}
@media (prefers-reduced-motion:reduce){
	.mhh-slider .mhh-slide,.mhh-slider .mhh-img,.mhh-slider .mhh-cap>*{transition:none!important}
	.mhh-slider .mhh-seg.run i{animation:none;width:100%}
	.mhh-slider[data-fx="glide"] .mhh-slide.is-active{animation:none}
}

/* Miniatures cliquables (ordinateur) */
.mhh-slider .mhh-thumbs{position:absolute;right:20px;top:50%;z-index:6;display:flex;flex-direction:column;gap:10px;max-height:calc(100% - 150px);overflow-y:auto;transform:translateY(-50%);scrollbar-width:none}
.mhh-slider .mhh-thumbs::-webkit-scrollbar{display:none}
.mhh-slider .mhh-thumb{flex:none;width:96px;height:64px;margin:0;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#222;cursor:pointer;opacity:.6;transition:opacity .25s,border-color .25s,transform .25s}
.mhh-slider .mhh-thumb:hover{opacity:1;transform:scale(1.04)}
.mhh-slider .mhh-thumb.is-current{opacity:1;border-color:var(--mhh-accent)}
.mhh-slider .mhh-thumb:focus-visible{outline:3px solid var(--mhh-accent);outline-offset:2px}
.mhh-slider .mhh-thumb__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.mhh-slider.has-thumbs .mhh-next{right:132px}
@media (max-width:900px){
	.mhh-slider .mhh-thumbs{display:none}
	.mhh-slider.has-thumbs .mhh-next{right:16px}
}
