/* STARFLEX 2.0 — homepage.
   Brief: a 12-year-old, a teacher, a farmer or a minister must understand the
   platform in under 10 seconds. Big type, icons over paragraphs, one sentence
   per card. Colour budget: ~70% white, ~20% blue, ~10% orange. */

/* ── Language switcher (shared by every page) ─────────────────────────── */
.lang-switch{display:inline-flex;background:#eef2f7;border-radius:999px;padding:3px;gap:2px;flex:0 0 auto}
.lang-switch button{
  border:0;background:none;font-family:var(--font-body);font-size:12.5px;font-weight:800;
  color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer;transition:.15s;letter-spacing:.4px;
}
.lang-switch button:hover{color:var(--blue)}
.lang-switch button.on{background:#fff;color:var(--blue-ink);box-shadow:0 1px 3px rgba(16,24,40,.14)}

/* Icon navigation */
.nav-links a .ni{margin-right:6px;font-size:15px}
@media(max-width:900px){
  .nav .lang-switch{margin-left:auto;margin-right:10px}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.h2-hero{
  background:
    radial-gradient(760px 460px at 88% 6%, rgba(232,150,58,.16), transparent 62%),
    radial-gradient(700px 420px at 4% 96%, rgba(28,111,176,.13), transparent 60%),
    #fff;
  padding:56px 0 64px;overflow:hidden;
}
.h2-hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
@media(max-width:940px){.h2-hero .wrap{grid-template-columns:1fr;gap:26px}.h2-hero{padding:36px 0 46px}}

.h2-badge{
  display:inline-flex;align-items:center;gap:8px;background:#eef4fa;color:var(--blue-dark);
  border-radius:999px;padding:9px 18px;font-size:15px;font-weight:800;margin-bottom:20px;
}
.h2-hero h1{
  font-family:var(--font-head);font-weight:800;font-size:60px;line-height:1.02;letter-spacing:-2px;
  color:var(--blue-ink);margin-bottom:18px;
}
.h2-hero h1 span{display:block}
.h2-hero h1 .o{color:var(--orange)}
@media(max-width:940px){.h2-hero h1{font-size:36px;letter-spacing:-1px}}

.h2-words{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.h2-words b{
  font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--blue-ink);
  background:#f2f6fb;border-radius:999px;padding:8px 16px;
}
.h2-words b:nth-child(4){background:var(--orange);color:#fff}

.h2-hero p.one{font-size:18px;color:var(--muted);max-width:46ch;margin-bottom:26px;line-height:1.55}
.h2-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn-xl{padding:16px 30px;font-size:17px;border-radius:14px;font-weight:800}
.btn-outline-blue{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn-outline-blue:hover{background:#eef4fa}

/* Hero illustration */
.h2-illus{position:relative}
.h2-illus svg{width:100%;height:auto;display:block}
.h2-float{animation:h2float 5s ease-in-out infinite}
.h2-float.d1{animation-delay:.6s}
.h2-float.d2{animation-delay:1.2s}
@keyframes h2float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── Section shells ───────────────────────────────────────────────────── */
.h2-sec{padding:64px 0}
.h2-sec.tint{background:var(--bg)}
.h2-head{text-align:center;max-width:760px;margin:0 auto 40px}
.h2-head h2{
  font-family:var(--font-head);font-weight:800;font-size:42px;line-height:1.1;letter-spacing:-1px;
  color:var(--blue-ink);margin-bottom:12px;
}
@media(max-width:940px){.h2-head h2{font-size:30px}.h2-sec{padding:44px 0}}
.h2-head p{font-size:18px;color:var(--muted)}

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .h2-float{animation:none}
}

/* ── "Comment ça marche" — four huge steps ────────────────────────────── */
.h2-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media(max-width:940px){.h2-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.h2-steps{grid-template-columns:1fr}}
.h2-step{
  background:#fff;border:2px solid var(--line);border-radius:22px;padding:30px 24px;text-align:center;
  position:relative;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.h2-step:hover{transform:translateY(-6px);box-shadow:0 18px 40px -24px rgba(13,58,92,.55);border-color:#bfd8ec}
.h2-step .n{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;
}
.h2-step:nth-child(even) .n{background:var(--orange)}
.h2-step .em{font-size:52px;line-height:1;margin:12px 0 16px;display:block}
.h2-step:hover .em{animation:h2bounce .6s}
@keyframes h2bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}60%{transform:translateY(-3px)}}
.h2-step h3{font-family:var(--font-head);font-size:21px;font-weight:800;color:var(--blue-ink);margin-bottom:8px}
.h2-step p{font-size:15.5px;color:var(--muted);line-height:1.5}

/* ── "Pourquoi" — six colourful cards ─────────────────────────────────── */
.h2-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.h2-why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.h2-why{grid-template-columns:1fr}}
.h2-card{
  background:#fff;border-radius:20px;padding:28px 24px;border:1px solid var(--line);
  transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;
}
.h2-card::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--c,var(--blue))}
.h2-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px -22px rgba(13,58,92,.5)}
.h2-card .em{font-size:40px;display:block;margin-bottom:14px}
.h2-card h3{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--blue-ink);margin-bottom:7px}
.h2-card p{font-size:15.5px;color:var(--muted);line-height:1.5}

/* ── Journey timeline that draws itself ───────────────────────────────── */
.h2-time{max-width:720px;margin:0 auto;position:relative;padding-left:8px}
.h2-time::before{
  content:'';position:absolute;left:29px;top:14px;bottom:14px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--blue),var(--orange));
  transform:scaleY(0);transform-origin:top;transition:transform 1.5s ease;
}
.h2-time.in::before{transform:scaleY(1)}
.h2-tstep{display:flex;align-items:center;gap:20px;padding:13px 0;position:relative}
.h2-tstep .dot{
  width:60px;height:60px;border-radius:50%;background:#fff;border:4px solid var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:25px;flex:0 0 auto;z-index:1;
}
.h2-tstep:nth-child(even) .dot{border-color:var(--orange)}
.h2-tstep h3{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--blue-ink)}
@media(max-width:560px){
  .h2-time::before{left:25px}
  .h2-tstep .dot{width:52px;height:52px;font-size:21px}
  .h2-tstep h3{font-size:17px}
}

/* ── Benefits ─────────────────────────────────────────────────────────── */
.h2-bens{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:940px){.h2-bens{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.h2-bens{grid-template-columns:1fr}}
.h2-ben{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 18px;text-align:center;
  transition:transform .18s,box-shadow .18s;
}
.h2-ben:hover{transform:translateY(-5px);box-shadow:0 16px 34px -22px rgba(13,58,92,.5)}
.h2-ben .ring{
  width:66px;height:66px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-size:30px;background:var(--bgc,#eef4fa);
}
.h2-ben h3{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--blue-ink)}

/* ── Phone mockup ─────────────────────────────────────────────────────── */
.h2-phone-sec{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media(max-width:940px){.h2-phone-sec{grid-template-columns:1fr;gap:32px}}
.h2-phone-sec h2{
  font-family:var(--font-head);font-weight:800;font-size:40px;line-height:1.1;letter-spacing:-1px;
  color:var(--blue-ink);margin-bottom:14px;
}
@media(max-width:940px){.h2-phone-sec h2{font-size:29px}}
.h2-phone-sec p{font-size:18px;color:var(--muted);margin-bottom:24px}

.phone{
  width:290px;margin:0 auto;background:#0e2438;border-radius:42px;padding:11px;
  box-shadow:0 30px 60px -28px rgba(13,58,92,.75);
}
.phone-screen{background:var(--bg);border-radius:32px;overflow:hidden;padding:16px 14px 20px;position:relative}
.phone-notch{width:110px;height:22px;background:#0e2438;border-radius:0 0 14px 14px;margin:-16px auto 12px}
.pv-top{background:linear-gradient(135deg,var(--blue-ink),var(--blue));border-radius:18px;padding:16px;color:#fff;margin-bottom:12px}
.pv-top .hi{font-size:13px;opacity:.9}
.pv-top .pts{font-family:var(--font-head);font-size:34px;font-weight:800;line-height:1.1;margin:4px 0 2px}
.pv-top .lvl{display:inline-block;background:var(--orange);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:800}
.pv-row{background:#fff;border-radius:14px;padding:12px 13px;display:flex;align-items:center;gap:11px;margin-bottom:9px;
  border:1px solid var(--line)}
.pv-row .e{font-size:20px}
.pv-row .t{font-size:13.4px;font-weight:700;color:var(--blue-ink);flex:1 1 auto}
.pv-row .bar{height:6px;background:#eef1f6;border-radius:99px;margin-top:5px;overflow:hidden}
.pv-row .bar i{display:block;height:100%;width:62%;background:var(--orange);border-radius:99px}
.pv-cta{background:var(--orange);color:#fff;border-radius:14px;padding:12px;text-align:center;
  font-weight:800;font-size:13.6px;margin-top:4px}

/* ── Animated counters ────────────────────────────────────────────────── */
.h2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:940px){.h2-stats{grid-template-columns:repeat(2,1fr)}}
.h2-stat{text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 16px}
.h2-stat .em{font-size:32px;display:block;margin-bottom:10px}
.h2-stat b{
  display:block;font-family:var(--font-head);font-size:44px;font-weight:800;color:var(--blue);line-height:1;
}
.h2-stat:nth-child(even) b{color:var(--orange)}
.h2-stat span{display:block;font-size:15px;color:var(--muted);margin-top:8px;font-weight:600}
.h2-goalnote{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}

/* ── Video ────────────────────────────────────────────────────────────── */
.h2-video{
  max-width:820px;margin:0 auto;position:relative;border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,#0d3a5c,#1c6fb0 60%,#2f9bd8);aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;box-shadow:0 26px 56px -30px rgba(13,58,92,.8);
}
.h2-video::after{
  content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,150,58,.42),transparent 66%);top:-190px;right:-150px;
}
.h2-video .inner{position:relative;z-index:1;text-align:center;color:#fff;padding:20px}
.h2-video .play{
  width:88px;height:88px;border-radius:50%;background:#fff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:transform .2s;padding-left:6px;
}
.h2-video:hover .play{transform:scale(1.09)}
.h2-video .cap{font-family:var(--font-head);font-size:21px;font-weight:700}
.h2-video .len{
  position:absolute;bottom:14px;right:16px;background:rgba(0,0,0,.72);color:#fff;
  border-radius:6px;padding:4px 9px;font-size:13px;font-weight:700;z-index:1;
}

/* ── Partners marquee ─────────────────────────────────────────────────── */
.h2-marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.h2-track{display:flex;gap:16px;width:max-content;animation:h2scroll 26s linear infinite}
.h2-marquee:hover .h2-track{animation-play-state:paused}
@keyframes h2scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.h2-plogo{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 26px;
  display:flex;align-items:center;gap:11px;font-weight:700;color:var(--blue-ink);font-size:15.5px;white-space:nowrap;
}
.h2-plogo .em{font-size:22px}
@media(prefers-reduced-motion:reduce){.h2-track{animation:none}}

/* ── Final CTA ────────────────────────────────────────────────────────── */
.h2-final{
  background:linear-gradient(135deg,var(--blue-ink),var(--blue));color:#fff;border-radius:26px;
  padding:56px 40px;text-align:center;position:relative;overflow:hidden;
}
.h2-final::after{
  content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,150,58,.4),transparent 65%);bottom:-210px;left:-130px;
}
.h2-final > *{position:relative;z-index:1}
.h2-final h2{font-family:var(--font-head);font-size:38px;font-weight:800;line-height:1.12;margin-bottom:14px;letter-spacing:-1px}
@media(max-width:940px){.h2-final h2{font-size:27px}.h2-final{padding:40px 22px}}
.h2-final p{font-size:18px;opacity:.94;max-width:52ch;margin:0 auto 26px}

/* ── Video grid + lightbox ────────────────────────────────────────────── */
.h2-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:960px;margin:0 auto}
@media(max-width:860px){.h2-vgrid{grid-template-columns:1fr}}
.h2-vgrid .h2-video{max-width:none;margin:0}
.h2-video.pending{cursor:default}
.h2-video .v-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
}
.h2-video:not(.pending):hover .v-poster{opacity:.5}
.h2-video .inner{z-index:2}
.h2-video .cap{font-size:18px}

.v-modal{
  position:fixed;inset:0;background:rgba(8,26,42,.9);display:none;align-items:center;justify-content:center;
  padding:20px;z-index:300;
}
.v-modal.open{display:flex}
.v-box{width:100%;max-width:960px;position:relative}
.v-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.v-frame iframe,.v-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.v-close{
  position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;font-size:34px;line-height:1;
  cursor:pointer;padding:4px 10px;border-radius:8px;
}
.v-close:hover{background:rgba(255,255,255,.14)}

/* Big brand lockup in the hero — the header logo alone reads too small on a phone. */
.h2-herologo{height:86px;width:auto;margin-bottom:22px}
@media(max-width:940px){.h2-herologo{height:64px;margin-bottom:16px}}

/* Vertical clips (YouTube Shorts) need a portrait stage, not a letterboxed 16:9 one. */
.v-modal.portrait .v-box{max-width:420px}
.v-modal.portrait .v-frame{aspect-ratio:9/16}