/* Accueil v2 — « Punks Not Dead » avec la structure d'une page de présentation de produit :
   grandes scènes plein écran, très grande typographie, beaucoup d'air, un téléphone par scène.
   Polices : Oswald (titres, déjà chargée) + police système (texte). Aucun élément d'Apple n'est copié. */
main.page-index.page-v2 { max-width:none; width:100%; margin:0; padding:0; }
.page-v2 { --bg:#0a0510; --bg2:#150a24; --ink:#f7f2ff; --muted:#bdb0d6; --accent:#f5c542; --hot:#ff2e9a; --cyan:#19d1c3;
  max-width:none; padding:0; }
.page-v2 .lang-bar { position:absolute; top:4.6rem; right:1rem; z-index:5; }
.v2 { color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:clip; }
.v2 h1, .v2 h2, .v2 .num b { font-family:Oswald,"Arial Narrow",Impact,sans-serif; text-transform:uppercase; letter-spacing:-.01em; }

/* ---------- Héros ---------- */
.v2-hero { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14vh 6vw 10vh; isolation:isolate; overflow:hidden; }
.v2-hero::before { content:""; position:absolute; inset:0; z-index:-3; background:url(img/wall.jpg) center/460px repeat; opacity:.28; filter:saturate(1.3); }
.v2-hero::after { content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(55% 45% at 50% 30%, rgba(255,46,154,.30), transparent 70%),
             radial-gradient(40% 35% at 85% 70%, rgba(25,209,195,.18), transparent 70%),
             linear-gradient(180deg, rgba(10,5,16,.25) 0%, var(--bg) 100%); }
.kicker-punk { font:600 .95rem/1 Oswald,sans-serif; letter-spacing:.42em; color:var(--accent); margin:0 0 1.4rem; }
.v2-hero h1 { font-size:clamp(3rem,6.4vw,6.6rem); line-height:.92; margin:0; font-weight:700; text-wrap:balance; }
@media (max-width:820px){ .v2-hero h1 { font-size:clamp(3rem,13vw,5rem); } }
.v2-hero h1 .accent { background:linear-gradient(90deg,var(--accent),var(--hot) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.v2-hero .lead { max-width:40ch; font-size:clamp(1.1rem,2vw,1.6rem); color:var(--muted); margin:1.6rem auto 0; line-height:1.4; }
.v2-hero .hero-note { max-width:52ch; font-size:.95rem; color:var(--muted); margin:1.2rem auto 0; opacity:.9; }
.v2-hero .hero-face { height:auto; position:absolute; z-index:-1; width:min(34vw,360px); right:-2vw; bottom:-6vh; opacity:.5; filter:drop-shadow(0 0 60px rgba(255,46,154,.45)); pointer-events:none; }
@media (max-width:820px){ .v2-hero .hero-face { width:62vw; right:-14vw; opacity:.3; } }

/* Boutons de téléchargement (bloc existant : deux cartes QR) */
.v2 .get-row { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin:2.2rem auto 0; max-width:760px; }
.v2 .get { display:flex; gap:1rem; align-items:center; text-align:start; padding:1rem 1.2rem; border-radius:22px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.v2 .get .qr { background:none; padding:0; border:0; box-shadow:none; width:auto; height:auto; flex:none; }
.v2 .get .qr img { width:96px; height:96px; border-radius:12px; background:#fff; padding:6px; display:block; box-shadow:none; }
.v2 .get .kicker { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0; }
.v2 .get .title { font:600 1.15rem/1.2 system-ui,sans-serif; text-transform:none; letter-spacing:0; color:var(--ink); text-shadow:none; margin:.15rem 0; }
.v2 .get p { margin:0; font-size:.85rem; color:var(--muted); }

/* ---------- Bande de chiffres ---------- */
.nums { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; max-width:1200px; margin:0 auto; padding:6vh 6vw 10vh; text-align:center;
  container-type:inline-size; }
/* La taille des chiffres suit la largeur de la bande (unités cqw) : « 50 000+ » tient toujours dans sa colonne.
   inline-block : le dégradé (background-clip:text) couvre exactement le texte, rien n'est coupé. */
.num { min-width:0; }
.num b { display:inline-block; white-space:nowrap; font-size:clamp(1.6rem,5.6cqw,4rem); line-height:1.05; padding:0 .06em;
  background:linear-gradient(180deg,#fff,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.num span { display:block; margin-top:.4rem; font-size:clamp(.75rem,1.6cqw,1.05rem); color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
@media (max-width:640px){ .nums { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; } .num b { font-size:clamp(1.6rem,11cqw,3.2rem); } .num span { font-size:.8rem; } }

/* ---------- Scènes ---------- */
.scene { display:grid; grid-template-columns:1.05fr .95fr; gap:6vw; align-items:center; min-height:100svh; max-width:1240px; margin:0 auto; padding:8vh 6vw; }
.scene:nth-of-type(even) .scene-text { order:2; }
.scene-text h2 { text-shadow:none; font-size:clamp(2.4rem,6.4vw,5.6rem); line-height:.95; margin:0 0 1.4rem; font-weight:700;
  background:linear-gradient(90deg,#fff 40%,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.scene-text p { font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1.45; color:var(--muted); max-width:34ch; margin:0; }
/* Les visuels sont les captures marketing de l'App Store : le téléphone est déjà dans l'image. */
.phone { width:min(360px,80vw); aspect-ratio:600/1304; margin-inline:auto; position:relative; border-radius:34px;
  box-shadow:0 40px 90px rgba(255,46,154,.22), 0 0 120px rgba(25,209,195,.10); }
.phone img { width:100%; height:100%; display:block; object-fit:cover; border-radius:34px; }
@media (max-width:820px){
  .scene { grid-template-columns:1fr; min-height:auto; gap:3rem; padding:9vh 7vw; text-align:center; }
  .scene:nth-of-type(even) .scene-text { order:0; }
  .scene-text p { margin-inline:auto; }
}

/* ---------- Toutes les fonctions ---------- */
.v2-feats { max-width:1240px; margin:0 auto; padding:10vh 6vw; }
.v2-feats .sec-title { text-shadow:none; font-size:clamp(2.2rem,5.5vw,4.4rem); text-align:center; margin:0 0 3rem; }
.v2-feats .feat-group { margin-bottom:3rem; }
.v2-feats .feat-group h3 { font:600 1.1rem/1 Oswald,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 1.1rem; }
.v2-feats .feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.v2-feats .feat { padding:1.2rem 1.3rem; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }
.v2-feats .feat h4 { margin:0 0 .4rem; font-size:1.05rem; color:var(--ink); }
.v2-feats .feat p { margin:0; font-size:.92rem; line-height:1.45; color:var(--muted); }

/* ---------- Appel final ---------- */
.v2-cta { text-align:center; padding:10vh 6vw 12vh; }
.v2-cta h2 { text-shadow:none; font-size:clamp(2.4rem,7vw,6rem); line-height:.95; margin:0; background:linear-gradient(90deg,var(--accent),var(--hot)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Révélation au défilement (seulement si JavaScript) ---------- */
.js .reveal { opacity:0; transform:translateY(46px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
.js .phone.reveal { transition-delay:.12s; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1; transform:none; transition:none; } }

/* Focus visible */
.v2 a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:8px; }


/* =====================================================================================================
   ORDINATEUR (>= 1024 px) : héros en deux colonnes (texte à gauche, visage à droite), contenu centré dans une
   largeur confortable, scènes plus larges sur très grand écran. Téléphone et tablette gardent la mise en page
   centrée ci-dessus.
   ===================================================================================================== */
@media (min-width:1024px){
  .v2-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:4vw; align-content:center; justify-items:start;
    text-align:start; padding:14vh max(6vw, calc((100vw - 1360px) / 2)) 10vh; min-height:min(100svh,1000px); }
  .v2-hero > * { grid-column:1; }
  .v2-hero .lead, .v2-hero .hero-note { margin-inline:0; }
  .v2-hero .get-row { justify-content:flex-start; margin-inline:0; }
  .v2-hero .hero-face { position:relative; grid-column:2; grid-row:1 / span 6; align-self:center; justify-self:center; right:auto; bottom:auto;
    width:min(100%,440px); opacity:1; filter:drop-shadow(0 0 70px rgba(255,46,154,.45)); }
  /* max-width:none : sinon la marge intérieure s'ajoute à la limite de 1200 px et écrase la bande sur grand écran. */
  .nums { max-width:none; padding-inline:max(6vw, calc((100vw - 1200px) / 2)); }
}
@media (min-width:1600px){
  .scene { max-width:1440px; }
  .phone { width:min(400px,26vw); }
  .v2-feats { max-width:1440px; }
}
@media (min-width:2200px){
  .v2 { font-size:1.15em; }
}

/* Bouton sous le texte des scènes « Radio mondiale » et « TuneMap » : les mêmes outils sur le site. */
.scene-cta { display:inline-flex; align-items:center; min-height:46px; margin-top:1.6rem; padding:.7rem 1.4rem; border-radius:999px;
  font:700 1rem/1 system-ui,sans-serif; color:#1a0b22; background:linear-gradient(90deg,var(--accent),var(--hot));
  box-shadow:0 10px 30px rgba(255,46,154,.25); }
.scene-cta:hover { filter:brightness(1.08); text-decoration:none; }