/* ====== UPDY — Montage Vidéo (page dédiée) ====== */

/* HERO */
.mv-hero{
  background: linear-gradient(140deg,#ffb254 0%, #FF8C00 45%, #ffb254 100%);
  color:#fff;
  padding: 4rem 0 3rem;
  text-align:center;
}
.mv-hero__inner{ max-width:1100px; margin:0 auto; padding:0 1rem; }
.mv-badges{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.8rem; }
.mv-badge{
  background: rgba(255,255,255,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:.25rem .6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
}
.mv-hero h1{ font-size:2.2rem; margin:.25rem 0 .5rem; font-weight:700; }
.mv-hero-sub{ max-width:780px; margin:0 auto 1.1rem; opacity:.95; }

/* KPIs */
.mv-kpis{ display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; margin:1.2rem 0 1.1rem; }
.mv-kpi{
  background: rgba(255,255,255,.96);
  border-radius:12px;
  padding:1rem 1.4rem;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  min-width:180px;
  transition:transform .2s ease;
}
.mv-kpi:hover{ transform: translateY(-2px); }
.mv-kpi-number{
  display:block;
  font-size:1.7rem;
  font-weight:700;
  color:#FF8C00;
  line-height:1.1;
  margin-bottom:.3rem;
  font-variant-numeric: tabular-nums;
}
.mv-kpi-number .suffix{ font-size:1.05rem; margin-left:.1rem;}
.mv-kpi-label{ font-size:.95rem; color:#222; opacity:.96; }

/* RÉSULTATS / CARTES */
.mv-results{ padding:3rem 0 2.3rem; }
.mv-results .mv-lead{ text-align:center; color:#6b6b6b; margin:0 auto 1.5rem; max-width:780px; }
.mv-cards{
  max-width:1100px; margin:0 auto; padding:0 1rem;
  display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.mv-card{
  background:#fff; border-radius:14px; padding:1rem 1rem .95rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mv-card:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.mv-card-head{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.35rem; }
.mv-ic{
  width:28px; height:28px; min-width:28px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(255,140,0,.12); color:#FF8C00;
}
.mv-card h3{ font-size:1rem; margin:.2rem 0 .35rem; font-weight:700; color:#1f1f1f; }
.mv-card-body{ color:#505050; font-size:.95rem; line-height:1.45; }
.mv-note{ text-align:center; color:#7a7a7a; margin-top:.7rem; }

/* PROCESS / MENSUEL */
.mv-monthly{ padding:2.4rem 0 2.2rem; }
.mv-month-grid{
  max-width:1100px; margin:0 auto; padding:0 1rem;
  display:grid; gap:1.1rem; grid-template-columns:repeat(2,minmax(300px,1fr));
}
@media (max-width:920px){ .mv-month-grid{ grid-template-columns:1fr; } }
.mv-step{
  background:#fff; border-radius:14px; padding:1rem 1.1rem .9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; gap:.8rem;
}
.mv-step:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.mv-step-ic{
  width:28px; height:28px; min-width:28px; border-radius:8px;
  display:grid; place-items:center; background:rgba(255,140,0,.14); color:#FF8C00;
}
.mv-step-body h4{ margin:.1rem 0 .35rem; font-size:1.02rem; font-weight:800; color:#1c1c1c; }
.mv-step-body ul{ margin:.3rem 0 0 1.1rem; color:#505050; font-size:.95rem; line-height:1.45; }

/* CTA */
.mv-cta{ background:#fff; padding:2rem 0; }
.mv-cta__inner{
  max-width:960px; margin:0 auto; text-align:center;
  background:#fff; border:1px solid #ECECEC; border-radius:14px;
  padding:1.2rem 1rem; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.mv-cta h3{ margin:.1rem 0 .6rem; font-size:1.25rem; }
.mv-btn{ display:inline-block; font-weight:600; border-radius:10px; padding:.68rem 1.2rem; }
.mv-btn--primary{
  background:linear-gradient(90deg,#ff9500 0%,#ff7b00 100%); color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.mv-btn--primary:hover{ transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px rgba(0,0,0,.2); }

/* FOOTER alias (même style que le site) */
.mv-footer{ background:linear-gradient(135deg,#1a1a1a 0%,#2b2b2b 100%); color:#eee; margin-top:3rem; }
.mv-footer .footer-container{ max-width:1200px; margin:0 auto; padding:2.4rem 1rem; }
.mv-footer .footer-top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:1.6rem; }
.mv-footer .footer-brand{ flex:1 1 260px; }
.mv-footer .footer-logo{ height:70px; display:block; margin-bottom:.8rem; }
.mv-footer .footer-brand p{ color:#cfcfcf; max-width:320px; margin:0; }
.mv-footer .footer-links{ display:flex; gap:3rem; }
.mv-footer .footer-links h4, .mv-footer .footer-contact h4{ margin:.1rem 0 .6rem; color:#fff; font-size:1rem; }
.mv-footer .footer-links a{ color:#d2d2d2; }
.mv-footer .footer-links a:hover{ color:#FF8C00; }
.mv-footer .footer-contact p{ margin:.25rem 0; }
.mv-footer .footer-contact a{ color:#d2d2d2; }
.mv-footer .footer-contact a:hover{ color:#FF8C00; }
.mv-footer .footer-bottom{ text-align:center; color:#bdbdbd; padding:1rem 0 .4rem; }

/* ===== Portfolio vidéos (type "Shorts" comme l’index) ===== */
.mv-portfolio{ padding: 2.6rem 0 1.4rem; }
.mv-portfolio .section-title{ margin-bottom: 1.2rem; }

.mv-shorts-viewport{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3.25rem; /* place pour les flèches */
}
.mv-shorts-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.mv-shorts-track::-webkit-scrollbar{ display:none; }

.mv-short-card{
  position: relative;
  height: 430px;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.mv-short-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* bouton lecture */
.mv-play-btn{
  position: absolute;
  left: 18px; bottom: 18px;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: #FF8C00; color: #fff;
  font-weight: 800; font-size: 18px;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(255,140,0,.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.mv-play-btn:hover{ transform: scale(1.05); }

/* flèches */
.mv-shorts-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff; color: #111;
  font-size: 22px; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.mv-shorts-nav.prev{ left: 8px; }
.mv-shorts-nav.next{ right: 8px; }
.mv-shorts-nav:disabled{ opacity:.4; cursor: default; }

/* dots */
.mv-shorts-dots{
  display:flex; justify-content:center; gap:.5rem;
  margin: 1rem 0 0;
}
.mv-shorts-dots button{
  width:8px; height:8px; border-radius:50%;
  background:#cfd3d9; border:none; cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.mv-shorts-dots button[aria-current="true"]{
  background:#2B1C08; transform: scale(1.25);
}

/* responsive */
@media (max-width: 1200px){ .mv-short-card{ height: 400px; } }
@media (max-width: 992px) { .mv-short-card{ height: 360px; } }
@media (max-width: 768px) {
  .mv-shorts-viewport{ padding: 0 2.75rem; }
  .mv-short-card{ height: 340px; }
}
@media (max-width: 520px)  {
  .mv-shorts-viewport{ padding: 0 2.25rem; }
  .mv-short-card{ height: 320px; }
}
/* Fix clic/empilement pour le portfolio vidéos */
.mv-short-card { position: relative; }
.mv-short-card video { pointer-events: auto; }
.mv-play-btn { position: absolute; z-index: 2; } /* au-dessus de la vidéo */
/* Patches clics/overlay pour le carrousel vidéo (montage) */
#mv-portfolio .short-card { position: relative; }
#mv-portfolio .short-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: auto; }
#mv-portfolio .play-btn { position: absolute; left: 18px; bottom: 18px; z-index: 3; }

#mv-portfolio .shorts-viewport { position: relative; padding: 0 3.5rem; }
#mv-portfolio .shorts-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1.25rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
#mv-portfolio .short-card { height: 430px; background:#000; border-radius: 18px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 10px 30px rgba(0,0,0,.12); }

/* flèches */
#mv-portfolio .shorts-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%; border:1px solid rgba(0,0,0,.08);
  background:#fff;color:#111;font-size:22px; display:grid; place-items:center;
  cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.08); z-index:4;
}
#mv-portfolio .shorts-nav.prev{ left:8px; }
#mv-portfolio .shorts-nav.next{ right:8px; }
#mv-portfolio .shorts-nav:disabled{ opacity:.4; cursor:default; }

/* dots */
#mv-portfolio .shorts-dots{ display:flex; justify-content:center; gap:.5rem; margin:1rem 0 0; }
#mv-portfolio .shorts-dots button{ width:8px;height:8px;border-radius:50%; background:#cfd3d9; border:none; cursor:pointer; transition: transform .2s ease, background .2s ease; }
#mv-portfolio .shorts-dots button[aria-current="true"]{ background:#2B1C08; transform: scale(1.25); }

@media (max-width: 1200px){ #mv-portfolio .short-card{ height: 400px; } }
@media (max-width: 992px) { #mv-portfolio .short-card{ height: 360px; } }
@media (max-width: 768px) { #mv-portfolio .shorts-viewport{ padding: 0 2.75rem; } #mv-portfolio .short-card{ height: 340px; } }
@media (max-width: 520px)  { #mv-portfolio .shorts-viewport{ padding: 0 2.25rem; } #mv-portfolio .short-card{ height: 320px; } }

/* CTA — pas de soulignement (page Montage vidéo) */
.mv-btn,
.mv-btn--primary,
.mv-cta__inner a {
  text-decoration: none !important;
}
.mv-btn:hover,
.mv-btn--primary:hover,
.mv-cta__inner a:hover {
  text-decoration: none !important;
}