/* Écran d'accueil animé : partagé par le site (index.html) et l'app (app/index.html).
   Aucune dépendance aux autres feuilles de style : variables et masquage définis ici. */
.ap-welcome { --ink:#fff; --shadow:#061222; --navy:#16345e; --foam:#c6ecff; --blue-pale:#6fb8ff; --font-display:'Luckiest Guy',sans-serif; }
.ap-welcome[hidden], .ap-welcome [hidden] { display:none !important; }
.ap-welcome *, .ap-welcome *::before, .ap-welcome *::after { box-sizing:border-box; }
/* écran d'accueil animé */
.ap-welcome { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center;
  background:radial-gradient(900px 700px at 50% 15%,#1c4f93 0%,#0e2a52 48%,#061224 100%); }
body.wl-open { overflow:hidden; }
:root:has(body.wl-open) { overflow:hidden; }
.wl-rays { position:absolute; inset:-30% -50% 25%; transform-origin:50% 0; animation:wlSway 9s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 25%,transparent 80%); mask-image:linear-gradient(to bottom,#000 0%,#000 25%,transparent 80%);
  background:conic-gradient(from 180deg at 50% -10%,transparent 0deg,rgba(255,255,255,.11) 12deg,transparent 24deg,rgba(255,255,255,.07) 40deg,transparent 52deg,rgba(255,255,255,.09) 70deg,transparent 84deg,rgba(255,255,255,.06) 100deg,transparent 112deg); }
@keyframes wlSway { from { transform:rotate(-5deg); } to { transform:rotate(5deg); } }
.wl-bubbles span { position:absolute; bottom:-60px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4);
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%,transparent); animation:wlRise linear infinite; }
.wl-bubbles span:nth-child(1) { left:8%;  width:14px; height:14px; animation-duration:9s;  animation-delay:0s; }
.wl-bubbles span:nth-child(2) { left:18%; width:26px; height:26px; animation-duration:12s; animation-delay:1.5s; }
.wl-bubbles span:nth-child(3) { left:30%; width:10px; height:10px; animation-duration:8s;  animation-delay:3s; }
.wl-bubbles span:nth-child(4) { left:42%; width:20px; height:20px; animation-duration:11s; animation-delay:.6s; }
.wl-bubbles span:nth-child(5) { left:55%; width:12px; height:12px; animation-duration:9.5s; animation-delay:2.2s; }
.wl-bubbles span:nth-child(6) { left:66%; width:30px; height:30px; animation-duration:13s; animation-delay:4s; }
.wl-bubbles span:nth-child(7) { left:76%; width:16px; height:16px; animation-duration:10s; animation-delay:1s; }
.wl-bubbles span:nth-child(8) { left:86%; width:22px; height:22px; animation-duration:12s; animation-delay:3.4s; }
.wl-bubbles span:nth-child(9) { left:93%; width:9px;  height:9px;  animation-duration:7.5s; animation-delay:.3s; }
.wl-bubbles span:nth-child(10) { left:48%; width:8px; height:8px;  animation-duration:8.5s; animation-delay:5s; }
@keyframes wlRise { 0% { transform:translate(0,0); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform:translate(18px,-115vh); opacity:0; } }
.wl-center { position:relative; z-index:2; width:100%; max-width:480px; padding:0 24px 40px; display:flex; flex-direction:column; align-items:center; }
.wl-shark { width:150px; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); animation:wlSwim 1.1s cubic-bezier(.2,.8,.2,1) both, wlBob 3.4s ease-in-out 1.1s infinite alternate; }
@keyframes wlSwim { from { transform:translateX(-120vw) rotate(-10deg); } to { transform:translateX(0) rotate(0); } }
@keyframes wlBob { from { transform:translateY(-8px) rotate(-3deg); } to { transform:translateY(8px) rotate(3deg); } }
.wl-title { font-family:var(--font-display); font-weight:400; font-size:clamp(38px,12vw,62px); line-height:1; margin:18px 0 12px; color:var(--ink); letter-spacing:.02em;
  text-shadow:0 4px 0 var(--shadow),0 7px 0 var(--navy),0 12px 22px rgba(0,0,0,.5); }
.wl-l { display:inline-block; animation:wlPop .55s cubic-bezier(.2,1.4,.4,1) both; }
.wl-l:nth-child(1) { animation-delay:.60s; } .wl-l:nth-child(2) { animation-delay:.65s; } .wl-l:nth-child(3) { animation-delay:.70s; }
.wl-l:nth-child(4) { animation-delay:.75s; } .wl-l:nth-child(5) { animation-delay:.80s; } .wl-l:nth-child(6) { animation-delay:.85s; }
.wl-l:nth-child(7) { animation-delay:.90s; } .wl-l:nth-child(8) { animation-delay:.95s; } .wl-l:nth-child(9) { animation-delay:1.00s; }
.wl-l:nth-child(10) { animation-delay:1.05s; } .wl-l:nth-child(11) { animation-delay:1.10s; } .wl-l:nth-child(12) { animation-delay:1.15s; }
.wl-l:nth-child(13) { animation-delay:1.20s; } .wl-l:nth-child(14) { animation-delay:1.25s; }
@keyframes wlPop { from { opacity:0; transform:translateY(24px) scale(.3); } to { opacity:1; transform:none; } }
.wl-tag { font-size:19px; font-weight:600; color:var(--foam); margin-bottom:16px; animation:wlUp .6s ease 1.4s both; }
.wl-chips { list-style:none; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 28px; padding:0; animation:wlUp .6s ease 1.65s both; }
.wl-chips li { padding:6px 12px; border:2px solid rgba(255,255,255,.5); border-radius:14px; background:rgba(255,255,255,.08); font-size:13px; font-weight:700; color:var(--foam); }
.wl-go { font-size:20px; padding:14px 36px; animation:wlUp .6s ease 1.9s both, wlPulse 1.8s ease-in-out 2.6s infinite; }
@keyframes wlUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes wlPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.wl-hint { margin-top:14px; font-size:12px; color:var(--blue-pale); animation:wlUp .6s ease 2.2s both; }
.wl-wave { position:absolute; left:0; bottom:0; width:200%; height:20vh; min-height:110px; z-index:1; pointer-events:none; }
.wl-wave path { fill:rgba(31,111,214,.55); }
.wl-wave-2 { bottom:-14px; z-index:3; }
.wl-wave-2 path { fill:rgba(6,18,36,.92); }
.wl-wave-1 { animation:wlWave 7s linear infinite; }
.wl-wave-2 { animation:wlWave 11s linear infinite reverse; }
@keyframes wlWave { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ap-welcome.leave { animation:wlLeave .34s ease forwards; }
@keyframes wlLeave { to { opacity:0; transform:scale(1.06); } }


@media (prefers-reduced-motion:reduce) {
  .ap-welcome *, .ap-welcome *::before, .ap-welcome *::after { animation:none !important; transition:none !important; }
}