@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap");

:root{
  --bg:#07070b;
  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --hot:#ff2f92;
  --hot2:#7c3aed;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 700px at 10% 10%, rgba(255,47,146,.20), transparent 55%),
    radial-gradient(800px 600px at 90% 20%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(900px 700px at 40% 90%, rgba(255,255,255,.06), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

.muted{color:var(--muted)}
.tiny{font-size:.88rem}
.container{width:min(1100px,92%);margin:0 auto;padding:72px 0 120px}
.section{padding: 28px 0 10px}
.section-head{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.section-head h2{font-size:2rem;letter-spacing:-.6px}
.section-head p{max-width:560px}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:18px;
  padding:18px;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: -56px; /* remonte sur le hero = effet premium */
}

.list{padding-left:18px;margin-top:12px;color:rgba(255,255,255,.78)}
.list li{margin:8px 0}

.note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
}

/* NAV */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 5%;
  background: rgba(7,7,11,.38);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  z-index:50;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(135deg, var(--hot), var(--hot2));
}
.brand-text{font-weight:800;letter-spacing:2px}
.brand-tag{
  font-size:.75rem;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.8);
}

.nav-links{
  display:flex;
  gap:14px;
  align-items:center;
}
.nav-links a{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: transform .2s ease, background .2s ease;
}
.nav-links a:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}

.nav-cta{
  padding:10px 16px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(255,47,146,.95), rgba(124,58,237,.85));
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
}

/* HERO */
.hero{
  min-height: 100vh;
  padding-top: 70px;
  display:grid;
  place-items:center;
  position:relative;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(7,7,11,.25), rgba(7,7,11,.92)),
    url("https://images.unsplash.com/photo-1520975958225-ec5f4f54f3b2?auto=format&fit=crop&w=2000&q=70") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
.hero-inner{
  position:relative;
  width:min(1100px,92%);
  text-align:center;
  padding: 42px 0 18px;
}

.pill{
  display:inline-block;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
}

.hero h1{
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -1px;
  font-weight: 800;
  text-shadow: 0 16px 60px rgba(0,0,0,.55);
}

.hero-sub{
  margin: 16px auto 28px;
  width:min(700px, 95%);
  color: rgba(255,255,255,.78);
  font-size: 1.07rem;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(255,47,146,.98), rgba(124,58,237,.88));
  border: 1px solid rgba(255,255,255,.16);
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.08)}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
}

.full{width:100%}
.small{padding:10px 14px}

.hero-cards{
  margin: 34px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width:min(760px, 95%);
}
.mini-card{
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.mini-title{font-weight:800}
.mini-sub{color:rgba(255,255,255,.70);font-size:.9rem;margin-top:2px}

/* LINKS */
.links{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.link-card{
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:18px;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: transform .2s ease, border-color .2s ease;
}
.link-card:hover{transform:translateY(-2px);border-color:rgba(255,47,146,.45)}
.link-left{display:flex;gap:12px;align-items:center}
.ico{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.link-title{font-weight:800}
.link-sub{color:rgba(255,255,255,.65);font-size:.9rem}
.arrow{opacity:.75;font-size:1.2rem}

/* GALLERY */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.shot{
  height: 250px;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform .25s ease, border-color .25s ease;
}
.shot:hover{transform: translateY(-3px) scale(1.01);border-color:rgba(124,58,237,.45)}
.shot img{transition: transform .5s ease}
.shot:hover img{transform: scale(1.06)}

/* FORM */
.form{display:grid;gap:12px}
label span{display:block;margin-bottom:6px;color:rgba(255,255,255,.75);font-size:.9rem}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus{border-color: rgba(255,47,146,.55)}

/* STICKY CTA */
.sticky{
  position: fixed;
  inset: auto 0 14px 0;
  display:flex;
  justify-content:center;
  z-index: 60;
  padding: 0 12px;
}
.sticky-inner{
  width: min(920px, 96%);
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sticky-title{font-weight:900;letter-spacing:-.2px}

/* FOOTER */
.footer{
  text-align:center;
  padding: 26px 0 90px;
  color: rgba(255,255,255,.55);
  font-size: .95rem;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .grid2{grid-template-columns:1fr;margin-top:-42px}
  .links{grid-template-columns:1fr}
  .gallery{grid-template-columns: 1fr 1fr}
  .hero-cards{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width: 540px){
  .gallery{grid-template-columns:1fr}
  .shot{height: 230px}
}

/* VIDEO PORTRAIT: show full video (no crop) */
.shot.video.portrait{
  height: auto !important;         /* override fixed height */
  aspect-ratio: 9 / 16;            /* phone format */
  background: rgba(0,0,0,.35);     /* nice letterbox background */
  display: grid;
  place-items: center;
}

.shot.video.portrait video{
  width: 100%;
  height: 100%;
  object-fit: contain;             /* IMPORTANT: no cropping */
  border-radius: 18px;
  background: #000;                /* black bars clean */
}
@media (min-width: 900px){
  .shot.video.portrait{
    grid-column: span 2;
    max-height: 520px; /* limite si tu veux */
  }
}