/* /static/css/index.css */

/* Base */
body {
  font-family: 'Orbitron', sans-serif;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(34,211,238,.06), transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.neon-glow { text-shadow: 0 0 3px #00f6ff, 0 0 6px #00f6ff; }
.hover-neon:hover { box-shadow: 0 0 15px #00f6ff, 0 0 30px #00f6ff; transform: translateY(-2px); }

@keyframes pulse { 
  0%{opacity:1} 
  50%{opacity:.7} 
  100%{opacity:1} 
}
.animate-pulse-slow { animation:pulse 3s ease-in-out infinite; }

/* ==== Promo ribbon ==== */
.promo-ribbon {
  display:flex; align-items:center; gap:.9rem;
  width:100%; max-width:860px;
  padding:.75rem .9rem;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.35)),
    radial-gradient(120% 120% at -10% -40%, rgba(245,158,11,.15), transparent 40%),
    radial-gradient(120% 120% at 110% -40%, rgba(239,68,68,.14), transparent 40%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation:promo-in .35s ease-out both;
}
@keyframes promo-in { 
  from{opacity:0; transform:translateY(-6px)} 
  to{opacity:1; transform:none} 
}

.promo-chip{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(245,158,11,.35), rgba(239,68,68,.35));
  border:1px solid rgba(245,158,11,.5);
  box-shadow:0 2px 8px rgba(245,158,11,.25);
  font-size:18px; line-height:1;
}
.promo-copy{ text-align:left; flex:1 1 auto; min-width:0 }
.promo-eyebrow{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#ffd7a6; font-weight:900; margin-bottom:2px; }
.promo-line{ color:#f9e7e1; font-size:.9rem; line-height:1.35; text-wrap:balance; }

.btn-cta {
  padding:.55rem .9rem;
  background:#22d3ee; color:#0b1320;
  border-radius:.6rem; font-weight:700;
  transition: transform .05s ease, background-color .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(34,211,238,.25);
}
.btn-cta:hover{ background:#38e4ff; transform:translateY(-1px); }
.promo-cta{ margin-left:auto; white-space:nowrap }

/* ==== Timeline ==== */
.timeline::before { 
  content:''; 
  position:absolute; 
  left:50%; 
  top:0; 
  bottom:0; 
  width:4px; 
  background:#00f6ff; 
  transform:translateX(-50%); 
}
.timeline-item { position:relative; width:50%; padding:20px; }
.timeline-item::before { content:''; position:absolute; width:20px; height:20px; background:#00f6ff; border-radius:50%; top:20px; }
.timeline-item:nth-child(odd){ left:0; text-align:right; }
.timeline-item:nth-child(odd)::before{ right:-10px; }
.timeline-item:nth-child(even){ left:50%; text-align:left; }
.timeline-item:nth-child(even)::before{ left:-10px; }

/* ==== Getting started ==== */
#getting-started {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
  scroll-margin-top: 0px;  /* ajuste selon hauteur header sticky/promo */
}

/* ==== Trailer (full screen + ciné sans bandes) ==== */
#trailer { scroll-margin-top: 0px; position: relative; }

/* Vignette douce autour du player */
.cinematic-inner{ position:relative; }
.cinematic .vignette{
  position:absolute; inset:-4rem 0 -4rem 0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  opacity:0; transition:opacity .8s ease .15s; z-index:0;
}
.cinematic.is-visible .vignette{ opacity:1; }

/* Entrée titres/lead */
.title, .lead, .video-cinema{ position:relative; z-index:1; }
.title{
  opacity:0; transform:translateY(14px);
  filter:blur(6px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
}
.lead{
  opacity:0; transform:translateY(12px);
  filter:blur(6px);
  transition:opacity .7s ease .08s, transform .7s ease .08s, filter .7s ease .08s;
}
.cinematic.is-visible .title,
.cinematic.is-visible .lead{
  opacity:1; transform:none; filter:none;
}

/* Player zoom-in doux */
.video-cinema{
  opacity:0; transform:scale(.965);
  transition:opacity .7s ease .12s, transform .9s cubic-bezier(.16,1,.3,1) .12s, filter .7s ease .12s;
  filter:saturate(.9) contrast(.98);
}
.cinematic.is-visible .video-cinema{
  opacity:1; transform:scale(1);
  filter:none;
}

/* Bouton Unmute */
.unmute-btn{
  position:absolute; right:12px; bottom:12px; z-index:2;
  padding:.45rem .7rem; font-weight:700;
  border-radius:.6rem; border:1px solid rgba(34,211,238,.35);
  background:rgba(2,6,23,.6); color:#c8fbff;
  backdrop-filter: blur(6px);
  transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:0 4px 12px rgba(34,211,238,.18);
}
.unmute-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(34,211,238,.28); }
.unmute-btn.hidden{ display:none; }

/* Player plein écran dans #trailer */
.video-full {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  margin: 0 auto;
}
.video-full video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  background: #000;
  box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 8px 24px rgba(0,0,0,.25);
  border-radius: 16px;
}

/* ==== Wrapper vidéo générique (tuto, etc.) ==== */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16/9 */
}
.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 8px 24px rgba(0,0,0,.25);
}

/* ==== About ==== */
#about {
  margin-top: -20px;
  padding-top: 24px;
  padding-bottom: 4rem;
  position: relative;
  border-top: 1px solid rgba(148,163,184,.15);
}

/* ==== Stats ==== */
.stat-emoji { font-size:2rem; line-height:1; }

/* ==== Marquee (testimonials) ==== */
.marquee {
  position:relative; 
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.marquee-track { display:flex; gap:16px; width:max-content; animation:marquee-scroll 28s linear infinite; }
@keyframes marquee-scroll { 
  from { transform:translateX(0) } 
  to   { transform:translateX(-50%) } 
}

/* ==== Testimonial card ==== */
.testimonial-card {
  width:320px; min-height:160px;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(34,211,238,.18);
  border-radius:18px; 
  padding:16px 18px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:grid; 
  grid-template-columns:56px 1fr;
  grid-template-areas:"avatar quote" "avatar author";
  column-gap:12px;
}
.testimonial-card .avatar { 
  grid-area:avatar; width:56px; height:56px; border-radius:9999px; 
  border:2px solid rgba(34,211,238,.35); object-fit:cover; align-self:start; 
}
.testimonial-card .quote { 
  grid-area:quote; color:#d5f6ff; font-size:.95rem; line-height:1.5; 
  margin:2px 0 8px; position:relative; 
}
.testimonial-card .quote::before,
.testimonial-card .quote::after { content:'“'; color:#67e8f9; font-weight:800; margin-right:4px; }
.testimonial-card .quote::after { content:'”'; margin-left:4px; }
.testimonial-card .author { grid-area:author; color:#94eaff; font-size:.9rem; opacity:.9; }

/* ==== Motion safe ==== */
@media (prefers-reduced-motion: reduce){
  .cinematic .vignette,
  .title, .lead, .video-cinema{
    transition:none;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
}

/* ==== Responsive ==== */
@media (max-width:1024px){
  .timeline::before{ left:12px; transform:none; }
  .timeline-item{ width:100%; padding-left:36px; }
  .timeline-item:nth-child(even){ left:0; text-align:left; }
  .timeline-item:nth-child(odd){ text-align:left; }
  .timeline-item::before{ left:0; right:auto; }
}
@media (max-width:640px){
  .marquee-track{ animation-duration:36s; }
  .testimonial-card{ width:280px; }
  .promo-ribbon{ flex-direction:column; align-items:flex-start; }
  .promo-cta{ margin-left:0 }
  .video-full { max-width: 100%; }
}