/* subtap.app landing — follows the v3 App Store screenshots: deep violet aurora,
   heavy white headlines, near-white subtitles, tilted devices with real UI cut-outs. */
:root{
  --bg-0:#1f0f5c;--bg-1:#25106e;--bg-2:#3d22a8;--bg-3:#4a2bc4;--bg-4:#6a4be6;--night:#0c0622;
  --ink:#fff;--sub:#f4f0ff;--body:rgba(244,240,255,.78);--mute:rgba(244,240,255,.58);
  --line:rgba(255,255,255,.14);--glass:rgba(255,255,255,.07);--glass-2:rgba(255,255,255,.12);
  --lilac:#c9b8ff;--pink:#ff7ad9;--cyan:#6fd6ff;--green:#5be3a1;
  --display:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1200px;--gutter:clamp(20px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;overflow-x:clip;color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 14%,var(--bg-3) 30%,var(--bg-2) 48%,var(--bg-0) 64%,#170a48 78%,var(--night) 100%)}
/* aurora glows, fixed so the page always sits in light */
body::before{content:"";position:fixed;inset:-10vh -10vw;z-index:-1;pointer-events:none;
  background:radial-gradient(60vw 50vh at 78% 8%,rgba(160,120,255,.38),transparent 70%),
    radial-gradient(50vw 45vh at 8% 40%,rgba(255,122,217,.16),transparent 70%),
    radial-gradient(55vw 50vh at 92% 70%,rgba(111,214,255,.12),transparent 70%)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:6px}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0;color:var(--ink);text-wrap:balance}
/* Headlines scale with their own column, not the window, so the longest single word in any
   language ("renouvellement.", "suscripciones.") still fits; vw sizes are the fallback. */
.copy,.section-head,.closing .wrap{container-type:inline-size}
h1{font-size:clamp(46px,7vw,96px);font-size:clamp(40px,13.5cqi,96px)}
h2{font-size:clamp(40px,5.4vw,76px);font-size:clamp(36px,14cqi,76px)}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.sub{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,24px);line-height:1.35;color:var(--sub);margin:18px 0 0;max-width:30ch;text-shadow:0 2px 18px rgba(20,8,60,.45)}
.lede{color:var(--body);margin:18px 0 0;max-width:46ch}
.points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px;max-width:48ch}
.points li{position:relative;padding-left:32px;color:var(--body)}
.points li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center/11px no-repeat}
.points strong{color:var(--ink);font-weight:600}
.tag{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 8px;border-radius:999px;font:700 10.5px/1.5 var(--text);letter-spacing:.08em;text-transform:uppercase;color:#2a1580;background:linear-gradient(90deg,#e9e1ff,#ffd8f4)}
.tag.free{color:#0f5a3a;background:#c8f5de}

/* nav */
.nav{position:sticky;top:12px;z-index:50;padding-inline:12px;margin-top:12px}
.nav-row{display:flex;align-items:center;gap:8px;max-width:1180px;margin:0 auto;height:58px;padding:0 8px 0 16px;border-radius:999px;
  background:rgba(28,14,84,.55);border:1px solid var(--line);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 14px 40px -18px rgba(5,0,30,.8)}
.brand{display:flex;align-items:center;gap:10px;font:700 17px/1 var(--display);letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.brand img{width:28px;height:28px;border-radius:8px}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:9px 14px;border-radius:999px;text-decoration:none;font-size:14.5px;color:var(--body)}
.nav-links a:hover{color:var(--ink);background:var(--glass-2)}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--sub)}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{background:var(--glass-2)}
.lang summary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;list-style:none;margin:0;padding:6px;border-radius:16px;
  background:rgba(30,16,88,.96);border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.lang li a{display:flex;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:15px;color:var(--body)}
.lang li a:hover{background:var(--glass-2);color:var(--ink)}
.lang li a[aria-current]{color:var(--ink);font-weight:600}
.lang li a span{color:var(--mute);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;text-decoration:none;border-radius:999px;font-weight:600;letter-spacing:-.01em;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s}
.btn-sm{height:40px;padding:0 18px;font-size:14.5px;background:#fff;color:#2a1580}
.btn-sm:hover{background:#efeaff}
.btn-store{height:58px;padding:0 26px;font-size:17px;background:#fff;color:#1c0d5a;box-shadow:0 18px 40px -16px rgba(10,0,40,.7)}
.btn-store:hover{transform:translateY(-2px);box-shadow:0 24px 50px -16px rgba(10,0,40,.8)}
.btn-store svg{width:20px;height:20px;flex:none}
.store-note{margin:14px 0 0;font-size:14px;color:var(--mute)}

/* hero */
.hero{padding-block:clamp(48px,8vw,96px) clamp(40px,6vw,72px)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero .cta{margin-top:34px}

/* story sections: text | art, alternating */
.band{position:relative}
.band-line{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.band-line path{fill:none;stroke:url(#line-grad);stroke-width:2.5;vector-effect:non-scaling-stroke}
.band-line .glow{stroke-width:10;opacity:.35;filter:blur(6px)}
.story{position:relative;z-index:1;padding-block:clamp(56px,9vw,120px)}
.story .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.story.flip .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.story.flip .copy{order:2}
.story.dark{background:linear-gradient(180deg,transparent,rgba(8,3,26,.7) 30%,rgba(8,3,26,.7) 70%,transparent)}

/* art: every piece is placed in % of a fixed-ratio box, so it scales as one image */
.art{position:relative;width:100%;max-width:620px;margin-inline:auto}
.art::before{content:"";display:block;padding-top:var(--ratio,110%)}
.art > *{position:absolute}
.phone{width:var(--w);left:var(--x);top:var(--y);rotate:var(--r,0deg);filter:drop-shadow(0 40px 50px rgba(8,2,36,.6))}
.piece{width:var(--w);left:var(--x);top:var(--y);rotate:var(--r,0deg)}
.tile{width:var(--w);left:var(--x);top:var(--y);rotate:var(--r,0deg);filter:drop-shadow(0 16px 24px rgba(8,2,36,.35))}
.tile.far{filter:blur(3px) drop-shadow(0 10px 14px rgba(8,2,36,.3));opacity:.85}
.pill{left:var(--x);top:var(--y);rotate:var(--r,0deg);padding:12px 20px;border-radius:999px;background:#fff;color:#e0213b;
  font:800 clamp(15px,1.7vw,22px)/1 var(--display);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 20px 40px -16px rgba(8,2,36,.6)}
.wheel-glow{filter:drop-shadow(0 0 60px rgba(201,184,255,.55))}
@media(prefers-reduced-motion:no-preference){
  .bob{animation:bob 7s ease-in-out infinite}
  .bob.b2{animation-duration:8.5s;animation-delay:-2s}
  .bob.b3{animation-duration:6.2s;animation-delay:-4s}
  @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
}

/* features */
.section-head{max-width:780px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .sub{margin-inline:auto}
.features{padding-block:clamp(72px,10vw,140px)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.feature{padding:24px;border-radius:24px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px)}
.feature .icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid var(--line)}
.feature .icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature p{margin:8px 0 0;color:var(--body);font-size:15.5px}

/* numbers */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-block:24px}
.number{text-align:center;padding:28px 12px;border-radius:24px;background:var(--glass);border:1px solid var(--line)}
.number b{display:block;font:800 clamp(40px,5vw,64px)/1 var(--display);letter-spacing:-.04em}
.number span{display:block;margin-top:10px;color:var(--mute);font-size:14px}

/* privacy */
.privacy{padding-block:clamp(72px,10vw,140px)}
.privacy .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.privacy .facts{display:grid;gap:12px}
.fact{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:20px;background:var(--glass);border:1px solid var(--line)}
.fact svg{flex:none;width:24px;height:24px;stroke:var(--lilac);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.fact p{margin:4px 0 0;color:var(--body);font-size:15.5px}
.text-link{color:var(--lilac);font-weight:600;text-underline-offset:3px}

/* pricing */
.pricing{padding-block:clamp(72px,10vw,140px)}
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:48px;max-width:980px;margin-inline:auto}
.plan{padding:32px;border-radius:28px;background:var(--glass);border:1px solid var(--line)}
.plan.pro{background:linear-gradient(160deg,rgba(150,110,255,.35),rgba(255,122,217,.14));border-color:rgba(255,255,255,.3);box-shadow:0 30px 70px -30px rgba(160,120,255,.6)}
.plan h3{font-size:24px}
.plan .price{margin:14px 0 0;font:800 clamp(30px,3.4vw,40px)/1.05 var(--display);letter-spacing:-.03em}
.plan .price small{display:block;margin-top:8px;font:500 15px/1.4 var(--text);letter-spacing:0;color:var(--body)}
.plan .points{margin-top:24px}
.fine{max-width:760px;margin:24px auto 0;text-align:center;color:var(--mute);font-size:13.5px}

/* faq */
.faq{padding-block:clamp(72px,10vw,140px)}
.faq-list{max-width:820px;margin:40px auto 0;display:grid;gap:10px}
.faq-list details{border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 22px;font:600 17.5px/1.35 var(--display);letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:24px;font-weight:400;color:var(--lilac);transition:rotate .2s}
.faq-list details[open] summary::after{rotate:45deg}
.faq-list details p{margin:0;padding:0 22px 20px;color:var(--body)}

/* closing cta + footer */
.closing{padding-block:clamp(80px,12vw,160px) 40px;text-align:center}
.closing .sub{margin-inline:auto}
.closing h2{font-size:clamp(34px,12.5cqi,76px)}
.closing .cta{margin-top:34px;display:flex;flex-direction:column;align-items:center}
.footer{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--mute);font-size:14px}
.footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink)}

/* reveal (only when JS runs, so content is never hidden without it) */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;translate:none;transition:none}}

/* narrow screens: one column, text first, art scaled underneath */
@media(max-width:900px){
  .nav-links{display:none}
  .band-line{display:none}
  .hero .grid,.story .grid,.story.flip .grid,.privacy .grid{grid-template-columns:minmax(0,1fr)}
  .story.flip .copy{order:0}
  .art{max-width:520px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  body{font-size:16px}
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .btn-store{width:100%}
  .nav-row{padding-left:12px}
  .brand span{display:none}
}
/* smallest phones: the longest label ("Télécharger dans l'App Store") still fits on one line */
@media(max-width:380px){.btn-store{padding:0 16px;gap:8px;font-size:15.5px}}