/* ==========================================================================
   Variables
   ========================================================================== */
:root{
  --bg:#0D0D2B;
  --primary:#6A0DAD; --hover:#3A0CA3; --magenta:#E94097;
  --text:#FFFFFF; --text-dim:#D9D9D9; --text-dark:#111111;

  --page-w:1280px; --page-h:1024px; --ui-zoom:1.0;

  --btn-min-w:10.5rem; --btn-h:3rem; --btn-radius:12px;

  --surface:rgba(255,255,255,.04); --surface-strong:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.10);

  /* HAUT (hero) – base 270px réduite d’≈ 1/3 => 180px */
  --hero-base:270px;
  --hero-scale:0.67; /* Ajuste (0.60 ~ plus petit / 0.75 ~ plus grand) */
}

/* ==========================================================================
   Bases
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  line-height:1.45; overflow:auto;
}
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only-focusable:focus{position:static!important; width:auto; height:auto; margin:0; clip:auto;}
.visually-section{ position:absolute; left:-9999px; }

/* ==========================================================================
   Layout (zoom optionnel)
   ========================================================================== */
#scaleWrap{ position:relative; padding:clamp(12px, 3vw, 28px); display:grid; place-items:start center; min-height:100vh; }
.page-zoom-wrap{ width:calc(var(--page-w) * var(--ui-zoom)); height:calc(var(--page-h) * var(--ui-zoom)); position:relative; }
.page{
  position:absolute; inset:auto auto auto 50%;
  width:var(--page-w); height:var(--page-h);
  transform-origin:top center; transform:translateX(-50%) scale(var(--ui-zoom));
  display:flex; flex-direction:column; gap:12px;
}

/* ==========================================================================
   En-tête
   ========================================================================== */
.header{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:10px 14px; background:var(--surface); border:1px solid var(--stroke); border-radius:16px;
}
.logo-wrap{ width:2.2rem; height:2.2rem; border-radius:999px; background:var(--surface-strong); display:grid; place-items:center; overflow:hidden; }
.logo-wrap img{width:80%; height:80%; object-fit:contain}
.brand{display:flex; align-items:center; gap:16px}
.brand .name{font-weight:800; letter-spacing:.3px}
.brand .user{ color:var(--text-dim); font-size:12px; padding:2px 8px; border:1px solid rgba(255,255,255,.18); border-radius:999px; }
.nav{display:flex; gap:10px; flex-wrap:wrap}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-grid; place-items:center; min-width:var(--btn-min-w);
  height:var(--btn-h); padding:0 16px; border-radius:var(--btn-radius);
  background:var(--primary); color:var(--text); text-decoration:none; font-weight:800;
  font-size:clamp(14px, 0.8rem + 0.25vw, 18px); letter-spacing:.2px; white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(0,0,0,.15), 0 10px 24px rgba(0,0,0,.18);
  transition:transform .14s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px) scale(1.03); background:var(--hover); box-shadow:0 2px 0 rgba(0,0,0,.18), 0 14px 34px rgba(0,0,0,.25); }
.btn:focus-visible{ outline:3px solid var(--magenta); outline-offset:2px; }
.btn.red{ background:#D7263D; }
.btn.yellow{ background:#E5C34A; color:var(--text-dark); text-shadow:none; }
.btn.blue{ background:#2463EB; }
.btn-cta{ height:calc(var(--btn-h) + 6px); padding-inline:22px; }
.btn-outline{ background:transparent; border:2px solid rgba(255,255,255,.75); backdrop-filter:saturate(140%) blur(4px); }
.hidden{ display:none!important }

/* ==========================================================================
   Cartes & zones
   ========================================================================== */
.card{ background:var(--surface); border:1px solid var(--stroke); border-radius:18px; padding:12px; }
.main{ flex:1; display:grid; grid-template-rows:auto 1fr; gap:12px }

/* ==========================================================================
   HAUT (hero) — réduit d’≈1/3
   ========================================================================== */
.index-hero{ position:relative; overflow:hidden; min-height:calc(var(--hero-base) * var(--hero-scale)); }
.index-cta{ display:grid; place-items:center; text-align:center; gap:8px; padding:12px 10px; }
.hero-title{ margin:6px 0 2px; font-weight:900; font-size:clamp(28px, 2rem + 0.3vw, 42px); }
.hint{ max-width:70%; opacity:.95; }
.cta-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }

/* >>> Vidéos décoratives autour du CTA (remplacent les GIFs) */
.cta-video{
  width:112px; /* même logique que les anciens GIFs */
  aspect-ratio:1/1;          /* carreau régulier */
  object-fit:cover;          /* recadre élégamment */
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:block;
}
@media (max-width:900px){
  .cta-video{ width:88px; }
}

/* ==========================================================================
   BAS — vidéo en arrière-plan + étapes au-dessus (overlay)
   ========================================================================== */
.steps-with-video{ position:relative; overflow:hidden; }
.steps-with-video .video-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.steps-with-video .bg-video{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.9) contrast(1.05);
  opacity:.30; /* “gris léger” */
}
.steps-with-video::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}
.steps-with-video > *:not(.video-bg){ position:relative; z-index:1; }

.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.step{ display:grid; justify-items:center; gap:6px; text-align:center; }
.step img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:12px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.circle{ width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:var(--magenta); font-size:12px; font-weight:800; }
.small{ font-size:12px; color:var(--text-dim) }

/* ==========================================================================
   Réduction animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce){ .btn{ transition:none } .btn:hover{ transform:none } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  :root{ --ui-zoom:1; }
  #scaleWrap{ padding:16px; }
  .page-zoom-wrap{ width:100%; height:auto; }
  .page{ position:static; width:100%; height:auto; transform:none; }

  .main{ grid-template-rows:auto auto }
  .hint{ max-width:90% }
  .nav{ gap:8px }
  .btn{ width:100%; min-width:0; }

  .index-hero{ min-height:160px; } /* compact sur mobile */
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 901px) and (max-width: 1180px){
  .steps{ grid-template-columns:repeat(3,1fr) }
}