/* ==========================================================
   VistaCMS — Hero Slider (front-office)
   Variables : --vhs-h (hauteur), --vhs-dur (durée transition),
   --vhs-ov (opacité du voile), --vhs-x/y/t/m (position du texte
   par appareil), --vhs-ta (alignement), --vhs-color.
   Surchargeable librement dans la feuille du site.
   ========================================================== */

.vhs {
    position: relative;
    width: 100%;
    height: var(--vhs-h, 80vh);
    overflow: hidden;
    touch-action: pan-y;
}
.vhs-track { height: 100%; }

/* ---------- Slides ---------- */
.vhs-slide { position: relative; height: 100%; }
.vhs-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.vhs-ov {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, var(--vhs-ov, .3));
    pointer-events: none;
}

/* Effet fondu (défaut) */
.vhs[data-effect="fade"] .vhs-track { position: relative; }
.vhs[data-effect="fade"] .vhs-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--vhs-dur, 800ms) ease, visibility 0s linear var(--vhs-dur, 800ms);
}
.vhs[data-effect="fade"] .vhs-slide.is-on {
    opacity: 1; visibility: visible;
    transition: opacity var(--vhs-dur, 800ms) ease;
}

/* Effet défilement */
.vhs[data-effect="slide"] .vhs-track {
    display: flex;
    transition: transform var(--vhs-dur, 800ms) ease;
}
.vhs[data-effect="slide"] .vhs-slide { flex: 0 0 100%; }

/* ---------- Éléments positionnés ---------- */
/* Calque plein cadre : chaque élément (avant-titre, titre, sous-titre,
   bouton 1, bouton 2) porte sa propre position via --vhs-<el>-x/y
   (-xt/yt tablette, -xm/ym mobile). */
.vhs-content {
    position: absolute; inset: 0;
    text-align: var(--vhs-ta, center);
    color: var(--vhs-color, #fff);
    font-family: var(--vhs-ff, inherit);
    z-index: 2;
    pointer-events: none;
}
.vhs-item {
    position: absolute;
    left: var(--vhs-ix, 50%);
    top: var(--vhs-iy, 50%);
    /* Ancrage selon l'alignement : à gauche x% = bord gauche de
       l'élément, à droite x% = bord droit, centré = centre. La
       position ne dépend plus de la largeur du texte. */
    transform: translate(var(--vhs-ax, -50%), -50%);
    max-width: min(720px, 88%);
    margin: 0;
    pointer-events: auto;
}
.vhs-content[style*="--vhs-ta:left"]  .vhs-item { --vhs-ax: 0; }
.vhs-content[style*="--vhs-ta:right"] .vhs-item { --vhs-ax: -100%; }
.vhs-item-pre   { --vhs-ix: var(--vhs-pre-x, 50%);   --vhs-iy: var(--vhs-pre-y, 50%); }
.vhs-item-title { --vhs-ix: var(--vhs-title-x, 50%); --vhs-iy: var(--vhs-title-y, 50%); }
.vhs-item-sub   { --vhs-ix: var(--vhs-sub-x, 50%);   --vhs-iy: var(--vhs-sub-y, 50%); }
.vhs-item-btns  { --vhs-ix: var(--vhs-btns-x, 50%);  --vhs-iy: var(--vhs-btns-y, 50%); }
/* Groupe de boutons : ligne flex — les deux boutons ne peuvent pas se
   chevaucher (retour à la ligne automatique sur petit écran). */
.vhs-btns {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
}
.vhs-content[style*="--vhs-ta:left"] .vhs-btns { justify-content: flex-start; }
.vhs-content[style*="--vhs-ta:right"] .vhs-btns { justify-content: flex-end; }
.vhs-pre {
    color: var(--vhs-pc, inherit);
    font-family: var(--vhs-pf, inherit);
    /* Réduction uniforme : tous les éléments suivent le même facteur
       --vhs-fz aux paliers, les proportions ne bougent pas. */
    font-size: calc(var(--vhs-ps, 16px) * var(--vhs-fz, 1));
    font-weight: var(--vhs-pw, 500);
    letter-spacing: var(--vhs-pls, 0);
    line-height: 1.3;
}
.vhs-title {
    margin: 0;
    color: var(--vhs-tc, inherit);
    font-family: var(--vhs-tf, inherit);
    font-size: calc(var(--vhs-ts, 48px) * var(--vhs-fz, 1));
    font-weight: var(--vhs-tw, 600);
    letter-spacing: var(--vhs-tls, 0);
    line-height: 1.15;
}
.vhs-sub {
    color: var(--vhs-sc, inherit);
    font-family: var(--vhs-sf, inherit);
    font-size: calc(var(--vhs-ss, 20px) * var(--vhs-fz, 1));
    font-weight: var(--vhs-sw, 400);
    letter-spacing: var(--vhs-sls, 0);
    line-height: 1.5;
    opacity: .92;
}
/* Les retours à la ligne de l'éditeur riche créent des <div>/<p> :
   pas de marges parasites à l'intérieur du titre/sous-titre. */
.vhs-title p, .vhs-title div, .vhs-sub p, .vhs-sub div { margin: 0; }

/* ---------- Boutons — chaque bouton porte ses variables --b-* ----------
   (--b-bg fond, --b-c texte, --b-br bordure, --b-rad arrondi,
    --b-fs taille, --b-fw graisse, --b-ls espacement, --b-ff police,
    --b-hbg/--b-hc/--b-hbr survol, --b-hf filtre survol) */
.vhs-btn {
    display: inline-block;
    padding: calc(13px * var(--vhs-fz, 1)) calc(30px * var(--vhs-fz, 1));
    border-radius: var(--b-rad, 999px);
    border: var(--b-bw, 2px) solid var(--b-br, transparent);
    background: var(--b-bg, #fff); color: var(--b-c, #1a1a1a);
    font-family: var(--b-ff, inherit);
    font-size: calc(var(--b-fs, 14px) * var(--vhs-fz, 1));
    font-weight: var(--b-fw, 600);
    letter-spacing: var(--b-ls, .02em);
    text-decoration: none;
    transition: box-shadow .18s ease,
                background-color .18s ease, color .18s ease,
                border-color .18s ease;
}
.vhs-btn:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    background: var(--b-hbg, var(--b-bg, #fff));
    color: var(--b-hc, var(--b-c, #1a1a1a));
    border-color: var(--b-hbr, var(--b-br, transparent));
    filter: var(--b-hf, none);
}
/* Variantes « fantômes » : survol = léger voile au lieu du filtre. */
.vhs-bs-outline:hover,
.vhs-bs-outline-pill:hover,
.vhs-bs-outline-square:hover {
    background: var(--b-hbg, rgba(255,255,255,.16));
    color: var(--b-hc, var(--b-c, inherit));
    box-shadow: none; filter: none;
}
.vhs-bs-underline {
    border-width: 0 0 var(--b-bw, 2px) 0;
    border-color: var(--b-br, currentColor);
    padding: 4px 2px;
}
.vhs-bs-text {
    border: 0; padding: 4px 6px;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.vhs-bs-underline:hover,
.vhs-bs-text:hover {
    box-shadow: none; filter: none; background: var(--b-hbg, transparent);
    color: var(--b-hc, var(--b-c, inherit));
    border-color: var(--b-hbr, var(--b-br, currentColor));
}

/* ---------- Flèches ---------- */
.vhs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 0; cursor: pointer;
    background: rgba(0, 0, 0, .35); color: #fff;
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
    z-index: 3;
}
.vhs-arrow:hover { background: rgba(0, 0, 0, .6); }
.vhs-prev { left: 18px; }
.vhs-next { right: 18px; }
/* En mode sans boucle, la flèche inactive en bout de course. */
.vhs-arrow.is-off {
    opacity: .25; pointer-events: none;
}

/* ---------- Pastilles ---------- */
.vhs-dots {
    position: absolute; left: 0; right: 0; bottom: 16px;
    display: flex; gap: 8px; justify-content: center;
    z-index: 3;
}
.vhs-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 0; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, .45);
    transition: background .2s, transform .2s;
}
.vhs-dot.is-on { background: #fff; transform: scale(1.25); }

/* ---------- Animations d'entrée — une par élément ----------
   Portées par le titre, le sous-titre et chaque bouton.
   Rejouées à chaque retour sur la slide (le JS force le reflow).
   Fill « backwards » : l'état final rend la main aux transitions
   (hover des boutons…). */
/* --vhs-ad : délai d'apparition réglable par élément (ms). */
.vhs-slide.is-on .vhs-anim-fade  { animation: vhs-in-fade  .8s ease var(--vhs-ad, 0s) backwards; }
.vhs-slide.is-on .vhs-anim-left  { animation: vhs-in-left  .8s cubic-bezier(.22,.8,.3,1) var(--vhs-ad, 0s) backwards; }
.vhs-slide.is-on .vhs-anim-right { animation: vhs-in-right .8s cubic-bezier(.22,.8,.3,1) var(--vhs-ad, 0s) backwards; }
.vhs-slide.is-on .vhs-anim-up    { animation: vhs-in-up    .8s cubic-bezier(.22,.8,.3,1) var(--vhs-ad, 0s) backwards; }
.vhs-slide.is-on .vhs-anim-zoom  { animation: vhs-in-zoom  .8s cubic-bezier(.22,.8,.3,1) var(--vhs-ad, 0s) backwards; }
/* Items positionnés (transform translate(-50%,-50%) de centrage) :
   variantes « -c » qui conservent le centrage pendant l'animation.
   Les enfants non positionnés (boutons dans .vhs-btns) gardent les
   keyframes simples. */
.vhs-slide.is-on .vhs-item.vhs-anim-left  { animation-name: vhs-in-left-c; }
.vhs-slide.is-on .vhs-item.vhs-anim-right { animation-name: vhs-in-right-c; }
.vhs-slide.is-on .vhs-item.vhs-anim-up    { animation-name: vhs-in-up-c; }
.vhs-slide.is-on .vhs-item.vhs-anim-zoom  { animation-name: vhs-in-zoom-c; }

@keyframes vhs-in-fade {
    from { opacity: 0; }
}
@keyframes vhs-in-left {
    from { opacity: 0; transform: translateX(-48px); }
}
@keyframes vhs-in-right {
    from { opacity: 0; transform: translateX(48px); }
}
@keyframes vhs-in-up {
    from { opacity: 0; transform: translateY(48px); }
}
@keyframes vhs-in-zoom {
    from { opacity: 0; transform: scale(.9); }
}
@keyframes vhs-in-left-c {
    from { opacity: 0; transform: translate(calc(var(--vhs-ax, -50%) - 48px), -50%); }
}
@keyframes vhs-in-right-c {
    from { opacity: 0; transform: translate(calc(var(--vhs-ax, -50%) + 48px), -50%); }
}
@keyframes vhs-in-up-c {
    from { opacity: 0; transform: translate(var(--vhs-ax, -50%), calc(-50% + 48px)); }
}
@keyframes vhs-in-zoom-c {
    from { opacity: 0; transform: translate(var(--vhs-ax, -50%), -50%) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
    .vhs-slide.is-on [class*="vhs-anim-"] { animation: none; }
}

/* ---------- Position des éléments par appareil ----------
   --vhs-fz : réduction UNIFORME de tous les textes aux paliers —
   le titre, l'avant-titre, le sous-titre et les boutons gardent
   leurs proportions relatives quelle que soit la largeur. */
@media (max-width: 1024px) {
    .vhs-content { --vhs-fz: .8; }
    .vhs-item-pre   { --vhs-ix: var(--vhs-pre-xt, var(--vhs-pre-x, 50%));   --vhs-iy: var(--vhs-pre-yt, var(--vhs-pre-y, 50%)); }
    .vhs-item-title { --vhs-ix: var(--vhs-title-xt, var(--vhs-title-x, 50%)); --vhs-iy: var(--vhs-title-yt, var(--vhs-title-y, 50%)); }
    .vhs-item-sub   { --vhs-ix: var(--vhs-sub-xt, var(--vhs-sub-x, 50%));   --vhs-iy: var(--vhs-sub-yt, var(--vhs-sub-y, 50%)); }
    .vhs-item-btns  { --vhs-ix: var(--vhs-btns-xt, var(--vhs-btns-x, 50%)); --vhs-iy: var(--vhs-btns-yt, var(--vhs-btns-y, 50%)); }
}
@media (max-width: 640px) {
    .vhs-content { --vhs-fz: .6; }
    .vhs-item       { max-width: 92%; }
    .vhs-item-pre   { --vhs-ix: var(--vhs-pre-xm, var(--vhs-pre-xt, var(--vhs-pre-x, 50%)));   --vhs-iy: var(--vhs-pre-ym, var(--vhs-pre-yt, var(--vhs-pre-y, 50%))); }
    .vhs-item-title { --vhs-ix: var(--vhs-title-xm, var(--vhs-title-xt, var(--vhs-title-x, 50%))); --vhs-iy: var(--vhs-title-ym, var(--vhs-title-yt, var(--vhs-title-y, 50%))); }
    .vhs-item-sub   { --vhs-ix: var(--vhs-sub-xm, var(--vhs-sub-xt, var(--vhs-sub-x, 50%)));   --vhs-iy: var(--vhs-sub-ym, var(--vhs-sub-yt, var(--vhs-sub-y, 50%))); }
    .vhs-item-btns  { --vhs-ix: var(--vhs-btns-xm, var(--vhs-btns-xt, var(--vhs-btns-x, 50%))); --vhs-iy: var(--vhs-btns-ym, var(--vhs-btns-yt, var(--vhs-btns-y, 50%))); }
    .vhs-arrow { width: 38px; height: 38px; }
    .vhs-prev { left: 10px; }
    .vhs-next { right: 10px; }
}