/* ══════════════════════════════════════════════════════════
   YT Downloader — page vitrine
   Palette mauve, dérivée du logo de l'application
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:      #0B0818;
  --bg-2:    #100C22;
  --surface: #171233;
  --surface-2: #1E1840;

  --violet-1: #C7B5FF;
  --violet-2: #A78BFA;
  --violet-3: #7C5CFF;
  --violet-4: #5B2FE0;
  --grad: linear-gradient(135deg, var(--violet-1) 0%, var(--violet-2) 35%, var(--violet-3) 70%, var(--violet-4) 100%);

  --text:  #F1EEFF;
  --text-2:#B9B2D9;
  --muted: #8A82B0;

  --line:      rgba(167,139,250,.20);
  --line-soft: rgba(255,255,255,.07);

  --font: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --shell: 1140px;
  --pad: clamp(20px, 5vw, 44px);
  --sec: clamp(76px, 10vw, 140px);
  --ease: cubic-bezier(.22,.68,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:clamp(15.5px,.5vw + 14.4px,17px);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-weight:500; line-height:1.1; letter-spacing:-.022em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }

::selection{ background:rgba(124,92,255,.4); color:#fff; }
:focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; border-radius:4px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--violet-3); color:#fff; padding:12px 20px; }
.skip:focus{ left:12px; top:12px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.shell-narrow{ max-width:800px; }
.section{ padding-block:var(--sec); position:relative; }
.band{
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(124,92,255,.08), transparent 65%),
    var(--bg-2);
  border-block:1px solid var(--line-soft);
}

/* ── Barre du haut ────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(11,8,24,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{ display:flex; align-items:center; gap:2rem; height:66px; }
.brand{ display:flex; align-items:center; gap:.65rem; font-weight:600; letter-spacing:-.01em; margin-right:auto; }
.brand img{ border-radius:8px; }
.topnav{ display:flex; gap:1.9rem; }
.topnav a{ font-size:.92rem; color:var(--text-2); transition:color .3s var(--ease); }
.topnav a:hover{ color:var(--violet-1); }

/* ══════════════════════════════════════════════════════
   HÉRO
   ══════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(64px,9vw,110px) clamp(72px,10vw,128px);
  text-align:center;
}
.orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.orb-1{ width:min(620px,90vw); aspect-ratio:1; top:-16%; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(124,92,255,.42),transparent 68%); }
.orb-2{ width:min(460px,80vw); aspect-ratio:1; top:32%; right:-12%; background:radial-gradient(circle,rgba(91,47,224,.30),transparent 68%); }
.orb-3{ width:min(560px,90vw); aspect-ratio:1; top:-40%; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(124,92,255,.30),transparent 68%); }

.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 35%, #000 10%, transparent 76%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%, #000 10%, transparent 76%);
}

.hero-inner{ position:relative; z-index:2; }

.badge{
  display:inline-flex; align-items:center; gap:.6em;
  margin:0 0 1.5rem;
  padding:.5em 1.1em .5em .9em;
  font-size:.84rem; font-weight:500; letter-spacing:.01em;
  color:var(--violet-1);
  border:1px solid var(--line); border-radius:99px;
  background:rgba(167,139,250,.08);
}
.badge-dot{
  width:7px; height:7px; border-radius:50%;
  background:#5BE49B; flex:none;
  box-shadow:0 0 0 3px rgba(91,228,155,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(91,228,155,.18); }
  50%    { box-shadow:0 0 0 6px rgba(91,228,155,.07); }
}
.hero-logo{
  width:clamp(88px,11vw,124px); height:auto;
  margin:0 auto clamp(24px,3vw,34px);
  border-radius:24px;
  filter:drop-shadow(0 22px 52px rgba(124,92,255,.55));
}
.hero h1{
  font-size:clamp(2.3rem,6.4vw,4.3rem);
  font-weight:600; letter-spacing:-.035em;
  margin-bottom:1.3rem;
}
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.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;
}

/* ── Le mot qui tourne ────────────────────────────────────
   La largeur est pilotee en JS (mesure du mot suivant), sinon
   le titre sauterait a chaque changement : « X » et
   « Instagram » n'ont pas du tout la meme longueur.
   ───────────────────────────────────────────────────── */
.rot{
  display:inline-block; position:relative;
  vertical-align:baseline; text-align:left;
  transition:width .42s var(--ease);
  will-change:width;
}
.rot-w{
  display:inline-block; white-space:nowrap;
  color:var(--violet-2);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             color .3s var(--ease);
}
.rot-w.sortie{ opacity:0; transform:translateY(-.34em); }
.rot-w.entree{ opacity:0; transform:translateY(.34em); }
.hero-lede{
  max-width:56ch; margin:0 auto;
  color:var(--text-2); font-size:clamp(1rem,.9vw + .82rem,1.15rem);
}

/* ── LE bouton ────────────────────────────────────────── */
.dl{
  display:inline-flex; align-items:center; gap:1.1rem;
  margin-top:clamp(32px,4vw,46px);
  padding:1.15rem 2.4rem 1.15rem 2rem;
  border-radius:18px;
  background:var(--grad);
  color:#140A2E;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 18px 40px -14px rgba(124,92,255,.85),
    0 0 0 0 rgba(167,139,250,.45);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
}
.dl::after{
  content:''; position:absolute; inset:-3px; border-radius:21px;
  border:1px solid rgba(199,181,255,.35); opacity:0;
  transition:opacity .35s var(--ease);
}
.dl:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 26px 54px -14px rgba(124,92,255,.95),
    0 0 0 6px rgba(167,139,250,.14);
}
.dl:hover::after{ opacity:1; }
.dl:active{ transform:translateY(-1px); }

.dl-win{ width:34px; height:34px; fill:#140A2E; flex:none; }
.dl-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.dl-txt strong{ font-size:1.12rem; font-weight:600; letter-spacing:-.015em; }
.dl-txt small{ font-size:.82rem; font-weight:400; opacity:.72; }

.dl-sm{ padding:1rem 2rem 1rem 1.7rem; }
.dl-sm .dl-win{ width:29px; height:29px; }
.dl-sm .dl-txt strong{ font-size:1.02rem; }

.hero-note{
  margin:1.3rem 0 0; font-size:.88rem; color:var(--muted);
  letter-spacing:.02em;
}

.chips{
  display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
  margin-top:2.4rem;
}
.chips li{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; color:var(--text-2);
  border:1px solid var(--line); border-radius:99px;
  padding:.5em 1.05em .5em .9em; background:rgba(167,139,250,.06);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.chips li:hover{ color:var(--text); border-color:rgba(167,139,250,.4); }
.chips li i{
  width:8px; height:8px; border-radius:50%;
  background:var(--c); flex:none;
}
.chips-note{
  margin:1.1rem 0 0; font-size:.83rem; color:var(--muted);
}

/* ══════════════════════════════════════════════════════
   BANDEAU GRATUIT & ILLIMITÉ
   ══════════════════════════════════════════════════════ */
.free-strip{
  padding-block:clamp(48px,6vw,78px);
  border-block:1px solid var(--line-soft);
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(124,92,255,.10), transparent 70%),
    var(--bg-2);
}
.free-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(28px,4vw,56px);
}
.free-item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.free-big{
  font-size:clamp(2.6rem,5vw,3.6rem); font-weight:600; line-height:1;
  letter-spacing:-.03em; margin-bottom:.7rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.free-k{ font-size:1.06rem; font-weight:500; margin-bottom:.5rem; }
.free-v{ font-size:.92rem; color:var(--text-2); max-width:34ch; }

/* ══════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════ */
.head{ margin-bottom:clamp(44px,5.5vw,72px); max-width:640px; }
.label{
  font-size:.76rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--violet-2); margin-bottom:1rem;
}
.head h2{ font-size:clamp(1.9rem,4.4vw,3rem); font-weight:500; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.3rem; }
.card{
  padding:clamp(26px,2.9vw,36px);
  background:linear-gradient(165deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line-soft); border-radius:18px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.9);
}
.ico{
  width:46px; height:46px; margin-bottom:1.5rem;
  display:grid; place-items:center;
  border-radius:13px;
  background:linear-gradient(150deg, rgba(167,139,250,.22), rgba(124,92,255,.10));
  border:1px solid var(--line);
  color:var(--violet-1);
}
.ico svg{ width:23px; height:23px; }
.card h3{ font-size:1.22rem; font-weight:500; margin-bottom:.7rem; }
.card p{ color:var(--text-2); font-size:.945rem; }

/* ── Configuration ────────────────────────────────────── */
.req{ border-top:1px solid var(--line-soft); }
.req li{
  display:grid; grid-template-columns:170px 1fr; gap:1.4rem;
  padding:1.4rem 0; border-bottom:1px solid var(--line-soft);
}
.req-k{ font-weight:500; color:var(--violet-1); font-size:.95rem; }
.req-v{ color:var(--text-2); font-size:.95rem; }

/* ── FAQ ──────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.5rem 3rem 1.5rem 0;
  font-size:clamp(1.02rem,1.4vw,1.14rem); font-weight:400;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--violet-1); }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%;
  width:10px; height:10px; margin-top:-7px;
  border-right:1.5px solid var(--violet-2); border-bottom:1.5px solid var(--violet-2);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details p{ padding:0 3rem 1.6rem 0; margin:0; color:var(--muted); font-size:.95rem; }

/* ── Appel final ──────────────────────────────────────── */
.final{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(72px,9vw,120px);
  border-top:1px solid var(--line-soft);
  background:var(--bg-2);
}
.final-inner{ position:relative; z-index:2; }
.final h2{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:500; }

/* ── Pied ─────────────────────────────────────────────── */
.foot{ background:var(--bg); border-top:1px solid var(--line-soft); padding-block:2.8rem 2rem; }
.foot-inner{ text-align:center; }
.foot-brand{ font-size:.95rem; color:var(--text-2); }
.foot-brand a{ color:var(--violet-1); border-bottom:1px solid var(--line); }
.foot-tip{ margin:.9rem 0 0; }
.foot-tip a{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.85rem; color:var(--muted);
  border:1px solid var(--line-soft); border-radius:99px;
  padding:.45em 1.05em;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.foot-tip a:hover{
  color:var(--violet-1);
  border-color:var(--line);
  background:rgba(167,139,250,.06);
}
.foot-tip svg{ width:16px; height:16px; }

.foot-legal{
  max-width:62ch; margin:1.4rem auto 1.2rem; font-size:.82rem; line-height:1.6; color:var(--muted);
}
.foot-copy{ font-size:.8rem; color:#6B648C; margin:0; }

/* ── Révélation ───────────────────────────────────────── */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js [data-reveal].vu{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.08s; }
[data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; }
[data-delay="4"]{ transition-delay:.32s; }

/* ── Adaptatif ────────────────────────────────────────── */
@media (max-width:760px){
  .topnav{ display:none; }
  .req li{ grid-template-columns:1fr; gap:.3rem; }
  .dl{ width:100%; justify-content:center; padding-inline:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js [data-reveal]{ opacity:1; transform:none; }
}