/* ═══════════════════════════════════════════════════
   Video Slider Pro v1.4 — vsp-slider.css
   Violet #443189 | Orange #f18532
   ═══════════════════════════════════════════════════ */
:root {
  --vsp-violet : #443189;
  --vsp-orange : #f18532;
  --vsp-height : 650px;
  --vsp-offset : 0px;        /* décalage interne de la vidéo vers le bas */
  --vsp-ease   : cubic-bezier(.4,0,.2,1);
  --vsp-dur    : .7s;
}

/* ── Wrapper & Track ───────────────────────────────── */
.vsp-wrapper {
  position : relative;
  width    : 100%;
  height   : var(--vsp-height);
  overflow : hidden;
  background: #0a0a0a;
}
.vsp-track {
  position : relative;
  width    : 100%;
  height   : 100%;
}

/* ── Slides ────────────────────────────────────────── */
.vsp-slide {
  position   : absolute;
  inset      : 0;
  opacity    : 0;
  transform  : scale(1.04) translateY(var(--vsp-offset));
  transition : opacity var(--vsp-dur) var(--vsp-ease), transform var(--vsp-dur) var(--vsp-ease);
  pointer-events: none;
}
.vsp-slide.is-active  { opacity:1; transform:scale(1) translateY(var(--vsp-offset)); pointer-events:auto; z-index:2; }
.vsp-slide.is-leaving { opacity:0; transform:scale(.96) translateY(var(--vsp-offset)); z-index:1; }

/* ── Fond vidéo / image ────────────────────────────── */
.vsp-video-wrap { position:absolute; inset:0; overflow:hidden; }
.vsp-video {
  position : absolute;
  top:50%; left:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform: translate(-50%,-50%);
  object-fit: cover;
}
.vsp-frame {
  position : absolute;
  top:50%; left:50%;
  width:177.78vh; height:100%;
  min-width:100%; min-height:56.25vw;
  transform: translate(-50%,-50%);
  border:none; pointer-events:none;
}
.vsp-img-bg {
  position : absolute; inset:0;
  background-size:cover; background-position:center;
  transform: scale(1.06); transition: transform 8s ease;
}
.vsp-slide.is-active .vsp-img-bg { transform: scale(1); }

/* ── Overlay ───────────────────────────────────────── */
.vsp-overlay { position:absolute; inset:0; z-index:3; }

/* ── Zone contenu (position:absolute sur toute la slide)
   pointer-events:none sur le conteneur = la vidéo reste
   cliquable/interactive derrière ; seuls les enfants
   (boutons, liens) repassent en pointer-events:auto     */
.vsp-content {
  position       : absolute;
  inset          : 0;
  z-index        : 4;
  display        : flex;
  flex-direction : column;
  padding        : clamp(1.5rem, 5vw, 5rem);
  gap            : 1rem;
  pointer-events : none;    /* transparent aux clics */
}

/* ── Alignement horizontal ─────────────────────────── */
.vsp-align-center { align-items:center; text-align:center; }
.vsp-align-left   { align-items:flex-start; text-align:left; }
.vsp-align-right  { align-items:flex-end; text-align:right; }

/* ── Position verticale ────────────────────────────── */
.vsp-valign-top    { justify-content:flex-start; }
.vsp-valign-center { justify-content:center; }
.vsp-valign-bottom { justify-content:flex-end; padding-bottom:clamp(3rem,6vw,5rem); }

/* ── Animations d'entrée ───────────────────────────── */
.vsp-page-title--visible,
.vsp-title,
.vsp-subtitle,
.vsp-buttons {
  opacity   : 0;
  transform : translateY(24px);
  transition: opacity .55s var(--vsp-ease), transform .55s var(--vsp-ease);
}
.vsp-slide.is-active .vsp-page-title--visible { opacity:1; transform:translateY(0); transition-delay:.10s; }
.vsp-slide.is-active .vsp-title               { opacity:1; transform:translateY(0); transition-delay:.22s; }
.vsp-slide.is-active .vsp-subtitle            { opacity:1; transform:translateY(0); transition-delay:.34s; }
.vsp-slide.is-active .vsp-buttons             { opacity:1; transform:translateY(0); transition-delay:.46s; }

/* ── Titre de page H1 (visible) ────────────────────── */
.vsp-page-title--visible {
  margin         : 0;
  font-size      : clamp(1.8rem, 4.5vw, 3.8rem);
  font-weight    : 800;
  line-height    : 1.1;
  color          : #fff;
  letter-spacing : -.02em;
  text-shadow    : 0 2px 20px rgba(0,0,0,.35);
  max-width      : 900px;
  pointer-events : auto;
}

/* ── Titre H2 visuel ───────────────────────────────── */
.vsp-title {
  margin         : 0;
  font-size      : clamp(1.4rem, 3.5vw, 2.8rem);
  font-weight    : 700;
  line-height    : 1.2;
  color          : #fff;
  letter-spacing : -.01em;
  text-shadow    : 0 2px 16px rgba(0,0,0,.3);
  max-width      : 860px;
  pointer-events : auto;
}

/* ── Sous-titre ────────────────────────────────────── */
.vsp-subtitle {
  margin         : 0;
  font-size      : clamp(.95rem, 1.8vw, 1.25rem);
  color          : rgba(255,255,255,.88);
  line-height    : 1.6;
  max-width      : 680px;
  text-shadow    : 0 1px 8px rgba(0,0,0,.3);
  pointer-events : auto;
}

/* ── Boutons ───────────────────────────────────────── */
.vsp-buttons {
  display        : flex;
  flex-wrap      : wrap;
  gap            : .75rem;
  pointer-events : auto;
}
.vsp-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  padding        : .75em 2em;
  font-size      : clamp(.85rem, 1.4vw, 1rem);
  font-weight    : 600;
  letter-spacing : .03em;
  text-decoration: none;
  border-radius  : 50px;
  border         : 2px solid transparent;
  cursor         : pointer;
  transition     : background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s;
  white-space    : nowrap;
}
.vsp-btn--primary   { background:var(--vsp-violet); color:#fff; border-color:var(--vsp-violet); box-shadow:0 4px 18px rgba(68,49,137,.45); }
.vsp-btn--primary:hover   { background:#5740b0; border-color:#5740b0; box-shadow:0 6px 24px rgba(68,49,137,.6); transform:translateY(-2px); }
.vsp-btn--secondary { background:var(--vsp-orange); color:#fff; border-color:var(--vsp-orange); box-shadow:0 4px 18px rgba(241,133,50,.45); }
.vsp-btn--secondary:hover { background:#ff9d4a; border-color:#ff9d4a; box-shadow:0 6px 24px rgba(241,133,50,.6); transform:translateY(-2px); }
.vsp-btn--outline   { background:transparent; color:#fff; border-color:rgba(255,255,255,.8); }
.vsp-btn--outline:hover   { background:rgba(255,255,255,.15); border-color:#fff; transform:translateY(-2px); }
.vsp-btn--ghost     { background:rgba(255,255,255,.12); color:#fff; border-color:transparent; backdrop-filter:blur(8px); }
.vsp-btn--ghost:hover     { background:rgba(255,255,255,.22); transform:translateY(-2px); }

/* ── SEO only (sr-only) ────────────────────────────── */
.vsp-sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Flèches ───────────────────────────────────────── */
.vsp-arrow {
  position       : absolute;
  top:50%; transform:translateY(-50%);
  z-index        : 10;
  width:52px; height:52px;
  border-radius  : 50%;
  background     : rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border         : 1px solid rgba(255,255,255,.25);
  color          : #fff;
  cursor         : pointer;
  display        : flex; align-items:center; justify-content:center;
  transition     : background .2s, transform .2s, opacity .2s;
  opacity        : .7;
}
.vsp-arrow:hover { background:var(--vsp-violet); border-color:var(--vsp-violet); opacity:1; transform:translateY(-50%) scale(1.1); }
.vsp-arrow svg   { width:20px; height:20px; }
.vsp-arrow--prev { left:clamp(.75rem, 3vw, 2rem); }
.vsp-arrow--next { right:clamp(.75rem, 3vw, 2rem); }

/* ── Dots ──────────────────────────────────────────── */
.vsp-dots { position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:.55rem; align-items:center; }
.vsp-dot  { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); border:none; cursor:pointer; padding:0; transition:background .25s, width .25s, transform .25s; }
.vsp-dot.is-active { background:var(--vsp-orange); width:24px; border-radius:4px; transform:scale(1.1); }

/* ── Barre de progression ──────────────────────────── */
.vsp-progress       { position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(255,255,255,.2); z-index:10; }
.vsp-progress__fill { display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--vsp-violet), var(--vsp-orange)); }

/* ── Containers libres (boxes) ─────────────────────── */
.vsp-box {
  position   : absolute;
  z-index    : 5;
  box-sizing : border-box;
  opacity    : 0;
  transition : opacity .6s var(--vsp-ease) .3s;
}
.vsp-slide.is-active .vsp-box { opacity:1; }

/* Classes utilitaires pour le contenu des boxes */
.vsp-badge { display:inline-block; padding:.3em .9em; border-radius:50px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.vsp-badge--violet { background:var(--vsp-violet); color:#fff; }
.vsp-badge--orange { background:var(--vsp-orange); color:#fff; }
.vsp-badge--white  { background:#fff; color:var(--vsp-violet); }
.vsp-badge--glass  { background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(8px); }
.vsp-card          { background:rgba(255,255,255,.95); border-radius:12px; padding:1.25rem 1.5rem; box-shadow:0 8px 32px rgba(0,0,0,.18); color:#1a1a1a; }
.vsp-card--dark    { background:rgba(10,10,10,.82); color:#fff; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12); }
.vsp-card--violet  { background:rgba(68,49,137,.88); color:#fff; backdrop-filter:blur(8px); }
.vsp-card--orange  { background:rgba(241,133,50,.92); color:#fff; }
.vsp-box img       { display:block; max-width:100%; height:auto; }
.vsp-box-title     { margin:0 0 .3em; font-weight:700; font-size:1.1rem; line-height:1.2; }
.vsp-box-text      { margin:0; font-size:.9rem; line-height:1.5; opacity:.88; }
.vsp-box-sep       { display:block; width:36px; height:3px; border-radius:2px; background:var(--vsp-orange); margin:.5em 0 .75em; }
.vsp-stars         { color:#fbbf24; font-size:1rem; letter-spacing:.05em; }

/* ── Misc ──────────────────────────────────────────── */
.vsp-no-slides { padding:2rem; text-align:center; border:2px dashed var(--vsp-violet); color:var(--vsp-violet); border-radius:8px; font-weight:600; }

/* ── Responsive ────────────────────────────────────── */
@media(max-width:768px) {
  .vsp-wrapper     { --vsp-height: clamp(280px, 60vw, 500px); }
  .vsp-arrow       { width:40px; height:40px; }
  .vsp-arrow svg   { width:16px; height:16px; }
  .vsp-content     { padding:1.5rem; }
  .vsp-valign-bottom { padding-bottom:3rem; }
  .vsp-btn         { padding:.65em 1.4em; font-size:.85rem; }
  .vsp-box         { max-width:calc(100vw - 2rem) !important; }
}
@media(max-width:480px) {
  .vsp-arrow--prev { left:.5rem; }
  .vsp-arrow--next { right:.5rem; }
  .vsp-buttons     { flex-direction:column; align-items:stretch; }
  .vsp-btn         { text-align:center; }
}

/* ── Icônes dans les boutons ───────────────────────── */
.vsp-btn-icon {
  font-size   : 1em;
  line-height : 1;
  flex-shrink : 0;
}
/* Icône à gauche du texte */
.vsp-btn .vsp-btn-icon:first-child { margin-right: .45em; }
/* Icône à droite du texte */
.vsp-btn .vsp-btn-icon:last-child  { margin-left:  .45em; }
/* Bouton icône seule : carré */
.vsp-btn--icon-only {
  width       : 3em;
  height      : 3em;
  padding     : 0;
  border-radius: 50%;
  display     : inline-flex;
  align-items : center;
  justify-content: center;
}
.vsp-btn--icon-only .vsp-btn-icon { margin: 0; font-size: 1.1em; }