/* Tahiti Clash — accueil v3 « le lagon ». Chargé seulement sur l'accueil, après site.css.
   Sans JavaScript : tout est visible dans son état final (les états de départ n'existent que sous html.fx,
   posé par v3.js). Les entrées du héros sont de simples animations CSS : elles se jouent aussi sans script.
   Réduire les animations : html.calm (fondus de 200 ms), aucun défilement piloté, aucune boucle.
   Seuls transform et opacity sont animés. */

@font-face { font-family: "Lilita One"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/lilita-one.woff2") format("woff2"); }

.page-v3 {
  --hdr: 56px;
  --ivory: #fff8e7;
  --tdeep: #08606d;
  --tdark: #053f48;
  --aqua-1: #c6f2f5;
  --aqua-2: #86dce6;
  --sand-1: #fdf0d6;
  --sand-2: #f6e0b6;
  --coral: #ff5a4f;
  --coral-d: #d0212a;
  --gold: #f6c23a;
  --e-glide: cubic-bezier(.16, 1, .3, 1);
  --e-pop: cubic-bezier(.34, 1.56, .64, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-fall: cubic-bezier(.55, 0, 1, .45);
  --e-sway: cubic-bezier(.45, 0, .55, 1);
  background: var(--sand-1);
  font-weight: 800;
  line-height: 1.4;
}
@supports (transition-timing-function: linear(0, 1)) {
  .page-v3 { --e-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1); }
}
@media (min-width: 1000px) { .page-v3 { --hdr: 76px; } }
.page-v3 main { position: relative; overflow-x: clip; }
.page-v3 img { user-select: none; -webkit-user-drag: none; }

/* ---------- En-tête : transparent sur le héros, verre dès qu'on descend ---------- */
.page-v3 .site-header { top: 0; padding: env(safe-area-inset-top, 0px) 0 0; }
.page-v3 .site-header .bar { max-width: none; height: var(--hdr); border-radius: 0; padding: 0 12px 0 16px; border-color: transparent; }
.page-v3 .site-header .bar { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
/* verre de lagon (comme les panneaux du jeu), pas une barre blanche */
.page-v3 .site-header.is-solid .bar, .page-v3.nav-open .site-header .bar, .nav-open .page-v3 .site-header .bar {
  background: linear-gradient(180deg, rgba(226, 250, 252, .84), rgba(176, 234, 241, .74));
  border-color: transparent transparent rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px) saturate(1.45); backdrop-filter: blur(14px) saturate(1.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(8, 96, 109, .12), 0 10px 26px -18px rgba(5, 63, 72, .6);
}
.page-v3 .brand img { width: 112px; }
.page-v3 .site-header:not(.is-solid) .brand img { opacity: 0; transform: translateY(-6px); }
.page-v3 .site-header:not(.is-solid) .brand { pointer-events: none; }
/* avec v3.js : la barre et son logo n'arrivent qu'une fois le logo du héros sorti de l'écran (jamais deux logos empilés) */
.v3h:not(.hero-gone):not(.nav-open) .page-v3 .site-header .bar { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.v3h:not(.hero-gone):not(.nav-open) .page-v3 .site-header .brand img { opacity: 0; transform: translateY(-6px) scale(.9); }
.v3h:not(.hero-gone) .page-v3 .site-header .brand { pointer-events: none; }
.v3h.hero-gone .page-v3 .site-header .brand img { transition: opacity .3s ease, transform .42s var(--e-pop); }
.page-v3 .site-header .brand:focus-visible img { opacity: 1 !important; transform: none !important; }
.page-v3 .menu-btn { width: 44px; height: 44px; }
.page-v3 .mobile-nav { margin: 8px 12px 0; }
@media (min-width: 1000px) {
  .page-v3 .site-header { padding: 10px var(--gutter) 0; }
  .page-v3 .site-header .bar { max-width: 1180px; height: 60px; border-radius: 999px; }
  .page-v3 .site-header:not(.is-solid) .nav a, .v3h:not(.hero-gone) .page-v3 .site-header .nav a { color: var(--ivory); text-shadow: 0 2px 6px rgba(8, 60, 80, .55); }
  .page-v3 .site-header:not(.is-solid) .nav a:hover, .v3h:not(.hero-gone) .page-v3 .site-header .nav a:hover { color: var(--tdeep); text-shadow: none; }
  .page-v3 .brand img { width: 124px; }
}

/* ---------- Typographie « autocollant » (Lilita One, comme dans le jeu) ---------- */
.st {
  font-family: "Lilita One", "Nunito", ui-rounded, system-ui, sans-serif; font-weight: 400;
  color: var(--ivory); letter-spacing: .005em; line-height: 1;
  -webkit-text-stroke: .11em var(--tdeep); paint-order: stroke fill;
  text-shadow: 0 .075em 0 var(--tdeep), 0 .18em .4em rgba(11, 52, 69, .32);
  text-wrap: balance;
}
.st .w { display: inline-block; }
.st .k { color: var(--coral); }
.h2 { font-size: clamp(34px, 10.2vw, 40px); margin: 0 0 14px; }
.h3 { font-size: clamp(24px, 7vw, 28px); margin: 0 0 8px; }
@media (min-width: 960px) { .h2 { font-size: 56px; } .h3 { font-size: 34px; } }
.wrap { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.lead { font-size: 17px; line-height: 1.45; font-weight: 800; color: var(--ink-2); }
.lead b { color: var(--ink); font-weight: 900; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 900; color: var(--tdeep); text-decoration: none; position: relative; }
.tlink svg { width: 18px; height: 18px; transition: transform .22s var(--e-glide); }
.tlink::after { content: ""; position: absolute; left: 0; right: 24px; bottom: 8px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s var(--e-glide); }
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }
.tlink:hover svg { transform: translateX(3px); }

/* ---------- Bouton magasin (l'action corail de la page) ---------- */
.store {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 7px 22px 7px 7px;
  border: 0; border-radius: 22px; cursor: pointer; font: inherit; color: var(--ivory); text-align: left;
  background: linear-gradient(180deg, #ff7a67 0%, #f23c35 55%, var(--coral-d) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(120, 0, 8, .28), 0 5px 0 #9c1320, 0 16px 26px -10px rgba(150, 20, 30, .7);
  overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .26s var(--e-pop);
}
.store::before { content: ""; position: absolute; left: 12px; right: 12px; top: 4px; height: 40%; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.store::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg); animation: store-shine 5s var(--e-sway) 2.2s infinite;
}
@keyframes store-shine { 0% { transform: translateX(-160%) skewX(-18deg); } 14%, 100% { transform: translateX(420%) skewX(-18deg); } }
.store:active, .store.press { transform: scale(.95); transition-duration: .09s; transition-timing-function: ease-out; }
.store:focus-visible { outline: 3px solid var(--tdeep); outline-offset: 4px; }
.store-ic { flex: none; width: 50px; height: 50px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2.5px var(--ivory), 0 4px 10px rgba(100, 0, 10, .35); }
.store-ic picture, .store-ic img { width: 100%; height: 100%; }
.store-t { display: grid; line-height: 1; gap: 5px; }
.store-t b { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 25px; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(120, 0, 8, .45); }
.store-t small { justify-self: start; padding: 3px 9px; border-radius: 999px; background: rgba(255, 248, 231, .95); color: var(--coral-d); font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.burst { position: absolute; left: 0; top: 0; width: 34px; height: 34px; max-width: none; pointer-events: none; z-index: 9; }
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 80; margin: 0; padding: 12px 20px; border-radius: 999px;
  background: rgba(11, 52, 69, .94); color: var(--ivory); font-weight: 900; font-size: 16px; white-space: nowrap;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .32s var(--e-pop), opacity .2s ease;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }

/* =====================================================================================
   C0 · HÉROS — scène collante de 100svh dans une piste de 160svh
   ===================================================================================== */
.c0 { position: relative; background: #55b6ea; --hz: 47%; }
.fx .c0 { height: 160vh; height: 160svh; }
.c0-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.c0-art { position: absolute; inset: 0; }
.c0-art .ly { position: absolute; }
.c0-art picture, .c0-art img { display: block; width: 100%; }
.ly-sky { inset: -3% 0 0 0; transform-origin: 70% 0; }
.ly-sky picture, .ly-sky img { height: 100%; }
.ly-sky img { object-fit: cover; object-position: 50% 0; }
.sun { position: absolute; right: -18%; top: -12%; width: 78vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 226, .95) 0%, rgba(255, 244, 196, .45) 26%, rgba(255, 240, 190, 0) 62%); animation: sun 6s var(--e-sway) infinite alternate; }
@keyframes sun { from { opacity: .82; } to { opacity: 1; } }
.ly-isl { left: -25%; width: 150%; bottom: calc(100% - var(--hz) - 1px); transform-origin: 50% 100%; }
.ly-water { left: 0; right: 0; top: calc(var(--hz) - 1px); bottom: -10%; overflow: hidden; transform-origin: 50% 0; }
.ly-water picture, .ly-water img { height: 100%; }
.ly-water img { object-fit: cover; object-position: 50% 0; }
.caus { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.caus::before, .caus::after { content: ""; position: absolute; inset: -30%; background: url("v3/caustics-512.webp") 0 0 / 300px 300px repeat; opacity: .26; animation: caus 22s linear infinite alternate; }
/* « alternate » décalé d'une période = l'ancien « alternate-reverse » (même mouvement) : Safari peut alors l'animer hors du fil principal */
.caus::after { background-size: 420px 420px; opacity: .16; animation-duration: 29s; animation-delay: -29s; }
@keyframes caus { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12%, -6%, 0); } }
.glints { position: absolute; inset: 0; }
.glints b { position: absolute; width: 22px; height: 22px; transform: scale(0); animation: twinkle 2.4s var(--e-sway) infinite;
  background: radial-gradient(circle, #fff 0 2px, rgba(255, 255, 255, 0) 4px), linear-gradient(90deg, rgba(255,255,255,0) 44%, #fff 50%, rgba(255,255,255,0) 56%), linear-gradient(0deg, rgba(255,255,255,0) 44%, #fff 50%, rgba(255,255,255,0) 56%); border-radius: 50%; }
.glints b:nth-child(1) { left: 22%; top: 6%; animation-delay: .2s; }
.glints b:nth-child(2) { left: 47%; top: 3%; animation-delay: 1.1s; width: 16px; height: 16px; }
.glints b:nth-child(3) { left: 62%; top: 12%; animation-delay: 1.8s; }
.glints b:nth-child(4) { left: 36%; top: 18%; animation-delay: .7s; width: 14px; height: 14px; }
.glints b:nth-child(5) { left: 78%; top: 5%; animation-delay: 2.1s; width: 18px; height: 18px; }
.glints b:nth-child(6) { left: 12%; top: 26%; animation-delay: 1.4s; width: 16px; height: 16px; }
@keyframes twinkle { 0%, 55%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 70% { transform: scale(1) rotate(45deg); opacity: 1; } 85% { transform: scale(.2) rotate(90deg); opacity: .6; } }

.ly-tama { right: -58px; bottom: clamp(-64px, calc(100svh - 906px), 30px); width: min(330px, 78vw, 40svh); z-index: 2; transform-origin: 50% 100%; }
.tama-in { position: relative; transform-origin: 50% 100%; animation: tama-in .8s var(--e-spring) .9s both, breathe 3.4s var(--e-sway) 1.8s infinite alternate; }
/* entrées sur translate/rotate/scale (même matrice : échelles uniformes), boucles sur transform : deux propriétés différentes,
   que Chrome et Safari savent animer ensemble hors du fil principal (même propriété = recalcul du style à chaque image) */
@keyframes tama-in { from { translate: 0 45%; rotate: 4deg; scale: .86; opacity: 0; } 25% { opacity: 1; } to { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; } }
@keyframes breathe { from { transform: none; } to { transform: scaleY(1.012); } }
.glint-card { position: absolute; left: 12%; top: 3%; width: 38px; height: 38px; color: #fff; transform: scale(0); animation: glint 6s var(--e-glide) 1.55s infinite; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
@keyframes glint { 0% { transform: scale(0) rotate(0deg); } 4% { transform: scale(1.3) rotate(45deg); } 8.5%, 100% { transform: scale(0) rotate(90deg); } }
.ly-palm { left: -42px; bottom: 26px; width: 170px; z-index: 3; transform-origin: 0 100%; }
.palm-in { transform-origin: 10% 100%; animation: palm-in .8s var(--e-spring) .15s both, palm-sway 7s var(--e-sway) 1s infinite; }
@keyframes palm-in { from { translate: -70px 0; rotate: -8deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes palm-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.4deg); } 75% { transform: rotate(-1.4deg); } }
.ly-foli { right: -26px; top: -10px; width: 140px; z-index: 3; transform-origin: 100% 0; }
.foli-in { transform-origin: 100% 0; animation: foli-in .8s var(--e-spring) .25s both, foli-sway 8.5s var(--e-sway) 1.1s infinite; }
@keyframes foli-in { from { translate: 70px 0; rotate: 8deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes foli-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
.ly-flow { left: 0; right: 0; bottom: -2px; z-index: 4; }
.ly-isl picture { animation: isl-in .9s var(--e-glide) both, drift 9s var(--e-sway) .9s infinite alternate; }
@keyframes isl-in { from { translate: 0 40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes drift { from { transform: none; } to { transform: translate3d(-6px, 2px, 0); } }
.ly-water picture { animation: drift 9s var(--e-sway) -12s infinite alternate; } /* = -3s alternate-reverse, décalé d'une période */
.ly-flow picture { animation: drift 7.5s var(--e-sway) -1s infinite alternate; }

.c0-text { position: absolute; z-index: 5; left: 16px; top: calc(var(--hdr) + 6px); width: min(268px, calc(100% - 32px)); }
.c0-logo { position: relative; width: 220px; margin: 0 0 10px -6px; }
.c0-logo img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(8, 60, 80, .35)); animation: logo-in .7s both .35s; }
@keyframes logo-in {
  0% { transform: translateY(-140px) scale(1.25); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  55% { transform: translateY(0) scale(1.08, .9); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  78% { transform: translateY(-6px) scale(.97, 1.04); }
  100% { transform: none; opacity: 1; }
}
.c0-logo .shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url("img/logo-640.webp") center / 100% 100% no-repeat; mask: url("img/logo-640.webp") center / 100% 100% no-repeat; }
.c0-logo .shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); transform: translateX(-150%) skewX(-18deg); animation: lshine 6s var(--e-sway) .95s infinite; }
@keyframes lshine { 0% { transform: translateX(-150%) skewX(-18deg); } 12%, 100% { transform: translateX(330%) skewX(-18deg); } }
.c0 h1 { margin: 0; --h1: clamp(33px, 10.2vw, 42px); }
.h1a { display: block; font-size: var(--h1); line-height: .98; }
.h1b { display: block; font-size: calc(var(--h1) * .64); line-height: 1.02; margin-top: .3em; }
.c0-sub { display: inline-block; margin-top: 12px; padding: 7px 13px; border-radius: 16px; color: var(--tdark); font-size: 16px; line-height: 1.3; font-weight: 900; animation: fade-up .5s var(--e-glide) 1.05s both;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(214, 246, 249, .82)); border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 -2px 0 rgba(8, 96, 109, .1), 0 10px 22px -12px rgba(5, 63, 72, .65); }
.c0-cta { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }
.c0-cta .store { animation: pop-in .5s var(--e-pop) 1.2s both; }
.c0-age { display: inline-flex; align-items: center; gap: 7px; padding: 4px 5px 4px 11px; border-radius: 999px; font-weight: 900; font-size: 15px; line-height: 1; color: var(--ivory);
  background: rgba(5, 63, 72, .78); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), 0 8px 18px -10px rgba(5, 40, 50, .7); animation: fade-up .4s ease 1.5s both; }
.c0-age b { padding: 4px 8px; border-radius: 999px; background: var(--ivory); color: var(--tdark); font-weight: 900; }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-up { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.c0 h1 .w { animation: word-in .48s var(--e-pop) both; animation-delay: calc(.6s + var(--wi, 0) * 55ms); }
.c0 h1 .h1b .w { animation-delay: calc(.85s + var(--wi, 0) * 55ms); }
.c0 h1 .k { animation: word-in .48s var(--e-pop) 1.2s both, stamp .18s var(--e-pop) 1.62s; }
.cue { position: absolute; z-index: 6; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; display: grid; place-items: center; color: var(--tdeep); background: rgba(255, 255, 255, .9); box-shadow: 0 8px 18px -8px rgba(11, 52, 69, .6); animation: fade-up .4s ease 1.8s both; transition: opacity .3s ease; }
.cue svg { width: 24px; height: 24px; animation: bob 1.6s var(--e-sway) 2.2s infinite alternate; }
@keyframes bob { from { transform: none; } to { transform: translateY(6px); } }
.scrolled .cue { animation: none; opacity: 0; pointer-events: none; }

/* mots des titres : rang dans le titre (le HTML n'a pas de style="") */
.st .w:nth-child(2) { --wi: 1; } .st .w:nth-child(3) { --wi: 2; } .st .w:nth-child(4) { --wi: 3; } .st .w:nth-child(5) { --wi: 4; }
.st .w:nth-child(6) { --wi: 5; } .st .w:nth-child(7) { --wi: 6; } .st .w:nth-child(8) { --wi: 7; } .st .w:nth-child(9) { --wi: 8; }
@keyframes word-in { from { transform: translateY(.55em) rotate(-4deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stamp { 0% { transform: scale(1.12); } 100% { transform: none; } }

/* Petits écrans en hauteur (iPhone SE) : tout se resserre */
@media (max-height: 700px) and (max-width: 959px) {
  .c0-logo { width: 176px; margin-bottom: 6px; }
  .c0 h1 { --h1: 31px; }
  .c0-sub { font-size: 15px; margin-top: 8px; padding: 5px 10px; }
  .c0-cta { margin-top: 10px; }
  .store { min-height: 56px; padding: 5px 18px 5px 5px; gap: 10px; }
  .store-ic { width: 44px; height: 44px; }
  .store-t b { font-size: 22px; }
  .ly-tama { width: 236px; right: -46px; bottom: -40px; }
  .ly-palm { width: 136px; }
  .ly-foli { width: 116px; }
  .cue { display: none; }
}
@media (min-width: 420px) and (max-width: 959px) { .c0-text { width: 290px; } }

/* Ordinateur : texte à gauche, Tamatoa à droite */
@media (min-width: 960px) {
  .c0 { --hz: 56%; }
  .ly-isl { left: -5%; width: 110%; }
  .ly-tama { right: 9%; bottom: -80px; width: min(34vw, 520px); }
  .ly-palm { left: -60px; bottom: 30px; width: 20vw; max-width: 330px; }
  .ly-foli { right: -30px; width: 16vw; max-width: 280px; }
  .ly-flow { height: clamp(140px, 24vh, 260px); }
  .ly-flow picture, .ly-flow img { height: 100%; }
  .ly-flow img { object-fit: cover; object-position: 50% 100%; }
  .c0-text { left: max(15vw, 220px); top: calc(var(--hdr) + 3vh); width: 540px; }
  .c0-logo { width: 360px; }
  .c0 h1 { --h1: 68px; }
  .c0-sub { font-size: 19px; }
  .sun { width: 50vw; right: -8%; top: -30%; }
}

/* =====================================================================================
   Chapitres
   ===================================================================================== */
.chap { position: relative; padding: 56px 0 64px; }
@media (min-width: 960px) { .chap { padding: 96px 0 104px; } }
.caus-soft { position: absolute; inset: 0; z-index: 0; }
.caus-soft::before { opacity: .2; }
.caus-soft::after { opacity: .12; }
.chap > .wrap { z-index: 1; }

/* ---------- C1 · Trois règles (la plongée) ---------- */
.c1 { background: linear-gradient(180deg, #9fe3ec 0%, var(--aqua-1) 30%, var(--aqua-2) 100%); padding-top: 40px; padding-bottom: 22px; z-index: 2; }
.dive { position: absolute; left: 0; right: 0; bottom: calc(100% - 120px); height: auto; z-index: 1; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, 0) 100%); mask: linear-gradient(180deg, #000 56%, rgba(0, 0, 0, 0) 100%); }
.dive picture, .dive img { display: block; width: 100%; }
.dive img { animation: foam 2s var(--e-sway) infinite alternate; }
@keyframes foam { from { transform: none; } to { transform: translateY(3px); } }
/* ordinateur : l'écume garde toute sa largeur mais moins d'eau vide sous la vague */
@media (min-width: 960px) { .dive picture, .dive img { height: clamp(170px, 17vw, 250px); } .dive img { object-fit: cover; object-position: 50% 0; } }
.c1 .h2 { max-width: 12em; }
.rules3 { list-style: none; display: grid; gap: 14px; margin: 18px 0 8px; }
.rules3 li { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 12px; min-height: 132px; padding: 10px 16px 10px 8px; border-radius: 24px; background: rgba(255, 255, 255, .62); box-shadow: 0 1px 0 #fff inset, 0 14px 30px -22px rgba(8, 60, 80, .6); }
.rules3 p { font-size: 18px; line-height: 1.35; font-weight: 800; color: var(--ink-2); }
.rules3 p b { display: block; color: var(--ink); font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 23px; line-height: 1.05; margin-bottom: 2px; }
.r-vis { position: relative; display: grid; place-items: center; height: 124px; }
.deal { display: block; width: 84px; transform: rotate(-6deg); filter: drop-shadow(0 8px 10px rgba(8, 50, 60, .35)); }
.deal img { border-radius: 8px; }
.r2 .deal { transform: rotate(5deg) translateX(-8px); }
.chk { position: absolute; left: 50%; top: 50%; padding: 5px 10px; border-radius: 10px; background: linear-gradient(180deg, #ff7a67, var(--coral-d)); color: #fff; font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 21px; letter-spacing: .04em; box-shadow: 0 0 0 3px var(--ivory), 0 6px 14px -4px rgba(120, 0, 8, .6); transform: translate(-44%, 8px) rotate(-8deg); }
.fan3 { position: relative; width: 100px; height: 110px; }
.fan3 .bk { position: absolute; left: 22px; top: 12px; width: 58px; transform-origin: 50% 120%; }
.fan3 .bk img { border-radius: 6px; box-shadow: 0 6px 12px -4px rgba(8, 50, 60, .5); }
.fan3 .bk:nth-child(1) { transform: rotate(-14deg); }
.fan3 .bk:nth-child(3) { transform: rotate(14deg); }
.win-star { position: absolute; right: 2px; top: 2px; width: 38px; height: 38px; color: var(--gold); filter: drop-shadow(0 2px 0 #b07800) drop-shadow(0 4px 8px rgba(160, 110, 0, .45)); }
.c1 .tlink { margin-top: 6px; }
@media (min-width: 960px) {
  .rules3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .rules3 li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 18px; }
  .r-vis { height: 150px; }
  .deal { width: 100px; }
}

/* ---------- C2 · 4 façons de jouer ---------- */
.c2 { background: linear-gradient(180deg, var(--aqua-2) 0%, #5fcad8 45%, #2aa9b9 100%); padding-top: 18px; padding-bottom: 40px; }
@media (min-width: 960px) { .c1 { padding-bottom: 48px; } .c2 { padding-top: 40px; } }
.c2-head .h2 { margin-bottom: 6px; }
/* sans script : quatre blocs simples, chacun avec sa capture et sa carte de mode */
.c2-stage { display: none; }
.modes { display: grid; gap: 34px; padding: 10px 16px 0; max-width: 1080px; margin: 0 auto; }
.mode-intro { font-size: 18px; color: var(--ink-2); }
.mode-intro b { color: var(--ink); }
.mode { display: grid; grid-template-columns: 96px 1fr; gap: 10px 14px; align-items: center; }
.mode .mode-txt { font-size: 17px; line-height: 1.4; color: var(--ink); }
.mode .mode-txt b { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 22px; display: block; color: var(--tdark); }
.mode .shot { grid-column: 1 / -1; justify-self: center; width: min(260px, 70vw); margin: 4px 0 0; border-radius: 34px; overflow: hidden; border: 9px solid #0d3f48; box-shadow: 0 26px 50px -24px rgba(4, 40, 50, .7); background: #0d3f48; }
.mode .shot img { width: 100%; height: auto; }
.mcard {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; width: 96px; height: 134px; padding: 8px 6px;
  border-radius: 14px; background: linear-gradient(180deg, #fffdf6, var(--ivory)); border: 3px solid var(--tdeep);
  box-shadow: 0 4px 0 var(--tdeep), 0 14px 22px -12px rgba(4, 40, 50, .6);
}
.mcard::before { content: ""; position: absolute; inset: 4px; border-radius: 9px; border: 1.5px solid rgba(8, 96, 109, .25); pointer-events: none; }
.mc-ic { display: block; width: 58px; }
.mc-ic img { width: 100%; height: auto; }
.mcard b { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 15px; line-height: 1.05; color: var(--tdeep); text-align: center; }
@media (min-width: 960px) {
  .modes { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
  .mode-intro { grid-column: 1 / -1; }
}

/* avec script : le téléphone 3D collant, la bande de texte, la main de cartes */
.fx .c2-track { height: 240vh; height: 240svh; margin-top: calc(-1 * var(--hdr)); }
/* le téléphone est déjà en partie à l'écran quand le titre arrive ; la légende attend le titre */
.fx .c2 .band { transition: opacity .3s ease .12s, transform .42s var(--e-glide) .12s; }
.fx .c2:not(.hd) .band { opacity: 0; transform: translateY(14px); transition: none; }
.fx .modes { display: none; }
.fx .c2-stage { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  --top: calc(var(--hdr) + 90px); --hand: 142px;
  --ph: clamp(300px, calc(100svh - var(--top) - var(--hand)), 632px); --pw: calc(var(--ph) * .4614); }
.band { position: absolute; z-index: 4; left: 16px; right: 16px; top: calc(var(--hdr) + 10px); height: 72px; border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 #fff inset, 0 14px 28px -18px rgba(4, 40, 50, .7); overflow: hidden; }
.band p { position: absolute; inset: 0; display: flex; align-items: center; margin: 0; padding: 0 16px; text-wrap: pretty; font-size: 16px; line-height: 1.3; font-weight: 800; color: var(--ink-2); opacity: 0; }
.band p b { color: var(--ink); font-weight: 900; }
.band p.on { opacity: 1; animation: band-in .32s var(--e-pop) both; }
.band p.on.late { animation-delay: .19s; }
.band p.off { animation: band-out .2s ease both; }
@keyframes band-in { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes band-out { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.c2-3d { position: absolute; left: 0; right: 0; top: var(--top); height: var(--ph); perspective: 1100px; perspective-origin: 50% 40%; }
.phone { position: relative; width: var(--pw); height: var(--ph); margin: 0 auto; padding: 10px; border-radius: calc(var(--pw) * .15); transform-origin: 50% 55%;
  background: linear-gradient(145deg, #3d8b94 0%, #0e4a54 22%, #0a3a43 60%, #2b6d76 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), inset 0 0 0 4px rgba(0, 20, 26, .5), 0 34px 60px -26px rgba(2, 30, 40, .75); }
.scr { position: relative; height: 100%; border-radius: calc(var(--pw) * .15 - 9px); overflow: hidden; background: #0b3c45; }
.scr .shot { position: absolute; inset: 0; margin: 0; opacity: 0; }
.scr .shot picture, .scr .shot img { width: 100%; height: 100%; }
.scr .shot img { object-fit: cover; object-position: 50% 0; }
.scr .shot.on { opacity: 1; z-index: 1; }
.scr .shot.in { animation: depth-in .46s var(--e-glide) both; }
.scr .shot.out { opacity: 1; z-index: 0; animation: depth-out .38s var(--e-glide) both; }
@keyframes depth-in { from { transform: scale(1.07); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes depth-out { from { transform: none; opacity: 1; } to { transform: scale(.92); opacity: 0; } }
.glare { position: absolute; z-index: 3; inset: -10% -60%; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .2) 47%, rgba(255, 255, 255, .06) 53%, rgba(255, 255, 255, 0) 60%); }
.island { position: absolute; z-index: 4; left: 50%; top: 18px; width: 30%; height: 20px; margin-left: -15%; border-radius: 12px; background: #031a1f; }
.status { position: absolute; z-index: 4; left: 26px; right: 24px; top: 17px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 13px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.st-ic { display: flex; gap: 4px; align-items: center; }
.st-ic svg { height: 10px; width: 16px; }
.st-ic .bat { width: 22px; }
.tap { position: absolute; z-index: 5; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, .25); opacity: 0; pointer-events: none; }
.tap.go { animation: tap .42s ease-out both; }
@keyframes tap { from { transform: scale(.4); opacity: .95; } to { transform: scale(1.4); opacity: 0; } }
.hand { position: absolute; z-index: 5; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 0; height: 122px; transform-origin: 0 100%; }
.hand .mcard { position: absolute; left: -46px; bottom: 0; width: 92px; height: 124px; padding: 6px 4px; opacity: 0; }
.hand .mcard b { font-size: 12.5px; white-space: nowrap; }
.hand .mc-ic { width: 52px; }
.hand .mcard.dealt { opacity: 1; }
.hand.shuffle .mcard { animation: shuffle .24s var(--e-pop) both; }
.hand.shuffle .mcard:nth-child(2) { animation-delay: 40ms; } .hand.shuffle .mcard:nth-child(3) { animation-delay: 80ms; } .hand.shuffle .mcard:nth-child(4) { animation-delay: 120ms; }
@keyframes shuffle { 50% { translate: 0 -10px; } }
@media (max-height: 700px) and (max-width: 959px) {
  .fx .c2-stage { --top: calc(var(--hdr) + 78px); --hand: 118px; }
  .band { height: 62px; }
  .band p { font-size: 15px; }
  .hand { height: 100px; bottom: 8px; }
  .hand .mcard { width: 76px; height: 104px; left: -38px; padding: 6px 4px; }
  .hand .mc-ic { width: 42px; }
  .hand .mcard b { font-size: 10.5px; }
}
@media (min-width: 960px) {
  .fx .c2-stage { --top: calc(var(--hdr) + 40px); --hand: 60px; --ph: clamp(420px, calc(100svh - var(--top) - var(--hand)), 680px); }
  .band { left: auto; right: calc(50% + 200px); top: 50%; width: 330px; height: auto; min-height: 150px; margin-top: -75px; }
  .band p { padding: 22px 26px; font-size: 20px; line-height: 1.4; align-items: center; }
  .band p b { display: block; }
  .hand { left: calc(50% + 420px); bottom: auto; top: 50%; height: 170px; margin-top: -40px; transform-origin: 50% 100%; }
  .hand .mcard { width: 112px; height: 156px; left: -56px; }
  .hand .mc-ic { width: 70px; }
  .hand .mcard b { font-size: 16px; }
}

/* ---------- C3 · Quatre rivaux + mises ---------- */
.c3 { background: linear-gradient(180deg, var(--sand-1) 0%, var(--sand-2) 100%); padding-top: 128px; overflow: hidden; }
@media (min-width: 960px) { .c3 { padding-top: 190px; } }
.c3-flowers { position: absolute; left: 0; right: 0; top: -1px; transform: scaleY(-1); pointer-events: none; opacity: .95; }
.c3-flowers picture, .c3-flowers img { display: block; width: 100%; }
@media (min-width: 960px) { .c3-flowers { height: 170px; } .c3-flowers picture, .c3-flowers img { height: 100%; } .c3-flowers img { object-fit: cover; object-position: 50% 100%; } }
.c3 .lead { max-width: 30em; }
/* titres sur le sable : remplissage lagon profond, contour ivoire (un autocollant lisible sans compter sur son ombre) */
.c3 .h2.st, .c6 .h2.st { color: var(--tdeep); -webkit-text-stroke-color: #fffdf6; text-shadow: 0 .07em 0 #d6b680, 0 .16em .34em rgba(90, 60, 20, .3); }
.c3 .h2.st .k, .c6 .h2.st .k { color: var(--coral-d); }
.lineup { list-style: none; position: relative; height: 386px; margin-bottom: 26px !important; max-width: 520px; margin: 14px auto 0; }
.lu { position: absolute; bottom: 0; }
.lu-art { display: block; }
.lu-art img { width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(90, 60, 20, .28)); }
.lu-moana { left: -14px; bottom: 26px; width: 152px; z-index: 1; }
.lu-tama { right: -26px; bottom: 22px; width: 162px; z-index: 1; }
.lu-tane { left: 50%; margin-left: -98px; width: 196px; z-index: 3; }
.lu-hina { left: 8px; top: 0; bottom: auto; width: 100px; z-index: 2; }
/* Hina : un portrait posé comme une carte à jouer (cadre ivoire, filet lagon), incliné comme les autres rivaux */
.medal { width: 100px; height: 134px; border-radius: 14px; overflow: hidden; border: 5px solid #fffdf6; transform: rotate(-7deg);
  box-shadow: 0 0 0 3px var(--tdeep), 0 5px 0 1px var(--tdeep), 0 18px 26px -12px rgba(90, 60, 20, .55); background: #bde9ee; }
.medal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: none; }
.tag { position: absolute; z-index: 4; display: grid; justify-items: center; margin: 0; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px 6px; border-radius: 14px; background: var(--ivory); border: 2.5px solid var(--tdeep); box-shadow: 0 3px 0 var(--tdeep), 0 10px 16px -10px rgba(8, 60, 80, .7); color: var(--ink-2); font-size: 14px; font-weight: 900; line-height: 1.1; white-space: nowrap; transform: rotate(-4deg); }
.tag b { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 19px; color: var(--tdeep); text-transform: none; letter-spacing: .01em; }
.lu-moana .tag { left: 16px; bottom: -22px; }
.lu-tama .tag { right: 30px; bottom: -20px; transform: rotate(4deg); }
.lu-tane .tag { left: 50%; bottom: -8px; margin-left: -44px; transform: rotate(-3deg); }
.lu-hina .tag { left: 96px; top: 26px; transform: rotate(3deg); }
.tag { font-size: 13px; }
.lu-tane .lu-art { transform-origin: 50% 100%; }
@media (min-width: 960px) {
  .lineup { height: 440px; max-width: 900px; }
  .lu-moana { left: 8%; width: 230px; } .lu-tama { right: 8%; width: 250px; } .lu-tane { width: 280px; margin-left: -140px; } .lu-hina { top: 10px; left: 4%; width: 120px; }
  .lu-hina .medal { width: 120px; height: 160px; } .lu-hina .tag { left: 116px; top: 34px; }
  .lu-tane .tag { margin-left: -50px; } .tag { font-size: 14px; }
}
.stakes-zone { position: relative; margin-top: 30px; }
.table-stage { position: relative; margin: 8px -16px 0; }
.table-art { position: relative; max-width: 760px; margin: 0 auto; }
.table-art img { width: 100%; height: auto; filter: drop-shadow(0 18px 20px rgba(90, 60, 20, .3)); }
.chips { list-style: none; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 600px; margin: -64px auto 0; padding: 0 12px; }
.chips li { position: relative; display: grid; justify-items: center; gap: 1px; padding: 12px 6px 10px; border-radius: 18px; text-align: center; background: rgba(255, 252, 244, .93); box-shadow: 0 1px 0 #fff inset, 0 0 0 2px rgba(255, 255, 255, .8), 0 16px 24px -16px rgba(90, 60, 20, .7); font-size: 15px; font-weight: 800; color: var(--ink-2); line-height: 1.25; }
.chips li > b { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 21px; color: var(--tdeep); }
.chips li > span:last-child .num { display: block; font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; font-size: 22px; }
.num.gold, .num.gold .cl { color: #8a5a00; text-decoration: underline 3px #f2b92c; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.chips li.pulse { animation: chip-pulse .36s var(--e-pop); }
@keyframes chip-pulse { 50% { transform: scale(1.04); } }
.stack { position: absolute; left: 50%; top: -58px; width: 0; height: 0; }
.stack img { position: absolute; left: -21px; top: 0; width: 42px; height: 42px; max-width: none; filter: drop-shadow(0 3px 3px rgba(80, 50, 0, .35)); }
.stack img:nth-child(1) { translate: -16px 6px; rotate: -8deg; --r0: 220deg; }
.stack img:nth-child(2) { translate: 14px 4px; rotate: 10deg; --r0: -160deg; }
.stack img:nth-child(3) { translate: -2px -6px; rotate: -4deg; --r0: 300deg; }
.stack img:nth-child(4) { translate: 4px -18px; rotate: 6deg; --r0: -250deg; }
.cap { margin-top: 12px; text-align: center; font-weight: 800; color: var(--ink-3); font-size: 15px; }
.note { margin: 8px auto 0; width: fit-content; padding: 8px 14px; border-radius: 999px; background: rgba(8, 96, 109, .1); color: var(--tdeep); font-weight: 900; font-size: 16px; text-align: center; }
.stakes-zone .h3 { text-align: center; color: var(--ivory); }

/* ---------- C4 · Entre amis ---------- */
.c4 { background: linear-gradient(180deg, #d9f6f8 0%, var(--aqua-1) 60%, #a9e7ee 100%); overflow: hidden; }
.code-pill { display: grid; justify-items: center; gap: 10px; margin: 8px auto 10px; padding: 14px 12px 16px; max-width: 380px; border-radius: 24px; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 0 #fff inset, 0 18px 30px -22px rgba(8, 60, 80, .7); }
.code-pill .url { font-weight: 900; font-size: 18px; color: var(--tdeep); letter-spacing: .01em; }
.flap { display: flex; gap: 7px; perspective: 500px; }
.flap i { display: grid; place-items: center; width: 42px; height: 54px; border-radius: 10px; font-style: normal; font-family: "Lilita One", sans-serif; font-size: 32px; color: var(--tdeep);
  background: linear-gradient(180deg, #fffdf6 0 49%, #f2ead6 51% 100%); box-shadow: inset 0 0 0 2.5px var(--tdeep), 0 4px 0 var(--tdeep); transform-origin: 50% 50%; }
.seats { position: relative; width: 260px; height: 250px; margin: 6px auto 4px; }
.felt { position: absolute; left: 50%; top: 50%; width: 176px; height: 176px; margin: -98px 0 0 -88px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #1fb1a9 0%, #0e8a86 55%, #0b6c6a 100%); box-shadow: 0 0 0 9px #9a5a2c, 0 0 0 12px #d9a441, 0 18px 30px -14px rgba(8, 60, 80, .7); }
.seat { position: absolute; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tdeep); box-shadow: 0 0 0 4px #fff, 0 8px 14px -6px rgba(8, 60, 80, .7); }
.seat picture, .seat img { width: 100%; height: 100%; }
.seat i { font-style: normal; font-family: "Lilita One", sans-serif; font-size: 20px; color: var(--ivory); }
.s-me { left: 97px; bottom: 26px; background: linear-gradient(180deg, #14a0b1, var(--tdeep)); }
.s-f1 { left: 6px; top: 64px; }
.s-f2 { left: 97px; top: -8px; }
.s-ia { right: 6px; top: 64px; background: linear-gradient(180deg, #3a4f5a, #1c2c34); }
.share { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(180deg, #14a0b1, var(--tdeep)); color: #fff; font-weight: 900; font-size: 14px; letter-spacing: .06em; box-shadow: 0 3px 0 var(--tdark); white-space: nowrap; }
.share svg { width: 16px; height: 16px; }
.c4 .lead { text-align: center; max-width: 30em; margin: 12px auto 0; }

/* ---------- C5 · Entraînement ---------- */
.c5 { background: linear-gradient(180deg, #0e8a9a 0%, var(--tdeep) 70%, #075561 100%); color: var(--ivory); overflow: hidden; }
.c5 .st { -webkit-text-stroke-color: var(--tdark); text-shadow: 0 .075em 0 var(--tdark), 0 .18em .4em rgba(0, 20, 26, .45); }
.c5-grid { display: grid; grid-template-columns: 1fr 168px; gap: 8px 12px; align-items: center; }
.c5-grid .h2 { grid-column: 1 / -1; }
.big32 { position: relative; display: grid; justify-items: start; }
.big32 .num { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 128px; line-height: .9; color: var(--ivory); -webkit-text-stroke: .07em var(--tdark); paint-order: stroke fill; text-shadow: 0 .05em 0 var(--tdark), 0 .12em .3em rgba(0, 20, 26, .5); }
.b32-l { font-family: "Lilita One", sans-serif; font-size: 28px; color: var(--ivory); margin-top: 4px; }
.uline { display: block; width: 140px; height: 7px; margin-top: 8px; border-radius: 6px; background: linear-gradient(90deg, #ffd766, var(--gold), #e0a012); transform-origin: 0 50%; }
.mini { position: relative; justify-self: center; width: 150px; }
.mini-ph { position: relative; width: 150px; aspect-ratio: 414 / 897; padding: 6px; border-radius: 26px; transform: rotate(-4deg); background: linear-gradient(145deg, #3d8b94, #0a3a43 40%, #2b6d76); box-shadow: 0 24px 40px -18px rgba(0, 20, 26, .8), inset 0 0 0 2px rgba(255, 255, 255, .2); }
.mini-ph .shot { position: absolute; inset: 6px; margin: 0; border-radius: 20px; overflow: hidden; background: #0b3c45; }
.mini-ph .shot picture, .mini-ph .shot img { width: 100%; height: 100%; }
.mini-ph .shot img { object-fit: cover; object-position: 50% 0; }
.stars3 { position: absolute; left: 0; right: 0; top: 18%; display: flex; justify-content: center; gap: 2px; z-index: 3; }
.sx { position: relative; width: 42px; height: 42px; }
.sx:nth-child(2) { top: -12px; width: 50px; height: 50px; }
.sx svg { width: 100%; height: 100%; color: var(--gold); filter: drop-shadow(0 2px 0 #9a6400) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.sx i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--ivory); opacity: 0; }
.c5-txt { grid-column: 1 / -1; display: grid; gap: 12px; margin-top: 8px; }
.c5 .lead { color: #cfeff2; }
.c5 .lead b { color: var(--ivory); }
.donne { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); font-size: 16px; line-height: 1.35; color: #d9f3f5; }
.donne b { color: var(--ivory); }
.donne-ic { flex: none; width: 46px; }
.donne-ic img { width: 100%; height: auto; }
@media (min-width: 960px) {
  .c5-grid { grid-template-columns: 1fr 1fr 260px; }
  .c5-grid .h2 { grid-column: 1 / -1; }
  .mini, .mini-ph { width: 240px; }
  .mini { grid-row: 2 / span 2; grid-column: 3; }
  .c5-txt { grid-column: 2; grid-row: 2; }
}

/* ---------- C6 · L'échelle des suites ---------- */
.c6 { background: radial-gradient(120% 70% at 50% 0%, #fffaf0 0%, var(--sand-1) 60%, #f7e6c4 100%); }
.c6 .h2 { text-align: center; }
.ladder-panel { position: relative; max-width: 460px; margin: 6px auto 14px; padding: 16px 12px 16px 44px; border-radius: 28px; background: linear-gradient(180deg, #0f7f7c, #0b6765); box-shadow: 0 0 0 5px #d9a441, 0 0 0 9px #8a4f24, 0 26px 40px -22px rgba(80, 50, 10, .8); }
.lad-arrow { position: absolute; left: 12px; top: 22px; bottom: 22px; width: 20px; display: grid; place-items: center; }
.lad-arrow::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--gold), rgba(255, 248, 231, .25)); }
.lad-arrow::after { content: ""; position: absolute; left: 2px; top: 0; border: 8px solid transparent; border-bottom: 12px solid var(--gold); border-top: 0; }
.lad-arrow span { position: relative; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; background: #0d7572; color: var(--ivory); font-size: 14px; font-weight: 900; letter-spacing: .06em; }
.lad { list-style: none; display: grid; gap: 10px; }
.lrow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lrow .cards { position: relative; display: flex; }
.lrow .cards picture { display: block; width: 50px; flex: none; }
.lrow .cards picture + picture { margin-left: -16px; }
.lrow .cards img { width: 100%; height: auto; border-radius: 5px; box-shadow: -2px 2px 6px rgba(0, 30, 30, .35); }
.lbl { flex: none; padding: 4px 9px; border-radius: 10px; font-size: 14px; font-weight: 900; line-height: 1.1; text-align: center; max-width: 76px; }
.top .lbl { background: var(--gold); color: #5a3a00; box-shadow: 0 2px 0 #a86f00; }
.low .lbl { background: rgba(255, 248, 231, .22); color: var(--ivory); }
.top .cards { padding: 4px; margin: -4px; border-radius: 10px; box-shadow: 0 0 0 2.5px var(--gold), 0 0 22px rgba(255, 210, 90, .75); }
.crown { position: absolute; left: -6px; top: -16px; width: 32px; height: 24px; transform: rotate(-14deg); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.sheen { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; }
.sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 250, 220, .75), rgba(255, 255, 255, 0)); transform: translateX(-150%) skewX(-18deg); }
.dots span { display: flex; gap: 8px; padding: 2px 0 2px 60px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 248, 231, .7); }
@media (min-width: 430px) { .lrow .cards picture { width: 56px; } .lrow .cards picture + picture { margin-left: -17px; } }
@media (min-width: 960px) { .ladder-panel { max-width: 560px; padding: 24px 22px 24px 60px; } .lrow .cards picture { width: 72px; } .lrow .cards picture + picture { margin-left: -20px; } .lbl { max-width: none; font-size: 15px; } .lad-arrow { left: 20px; } }

/* ---------- C7 · Collection ---------- */
.c7 { background: linear-gradient(180deg, #7fd8e3 0%, #3db8c8 55%, #1f9fb0 100%); overflow: hidden; padding-bottom: 36px; }
.c7 .h2 { text-align: center; }
.ring-stage { position: relative; z-index: 1; height: 290px; perspective: 900px; perspective-origin: 50% 30%; margin-top: 4px; }
.ring-tilt { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-10deg); }
.ring { position: absolute; transform-style: preserve-3d; animation: ring 24s linear infinite; }
/* même rotation linéaire, en quarts de tour : Safari peut l'animer hors du fil principal (0 et -360deg donnent la même matrice) */
@keyframes ring { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(-90deg); } 50% { transform: rotateY(-180deg); } 75% { transform: rotateY(-270deg); } 100% { transform: rotateY(-360deg); } }
.rc { position: absolute; left: -48px; top: -72px; width: 96px; height: 145px; transform-style: preserve-3d; cursor: pointer; }
.ring { --z: 176px; }
.rc:nth-child(1) { transform: rotateY(0deg) translateZ(var(--z)); } .rc:nth-child(2) { transform: rotateY(45deg) translateZ(var(--z)); }
.rc:nth-child(3) { transform: rotateY(90deg) translateZ(var(--z)); } .rc:nth-child(4) { transform: rotateY(135deg) translateZ(var(--z)); }
.rc:nth-child(5) { transform: rotateY(180deg) translateZ(var(--z)); } .rc:nth-child(6) { transform: rotateY(225deg) translateZ(var(--z)); }
.rc:nth-child(7) { transform: rotateY(270deg) translateZ(var(--z)); } .rc:nth-child(8) { transform: rotateY(315deg) translateZ(var(--z)); }
.rc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s var(--e-glide); }
.rc.flip .rc-in { transform: rotateY(180deg); }
.rc-in > img, .rc-in .face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 9px; box-shadow: 0 10px 18px -8px rgba(4, 40, 50, .6); }
.rc-in .face { display: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rc.flip .rc-in .face { display: block; }
.rc.flip .rc-in > img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rc-in .face { transform: rotateY(180deg); }
.rc-in .face picture, .rc-in .face img { width: 100%; height: 100%; border-radius: 9px; }
.c7 .lead { color: var(--ink); margin-top: 4px; }
.c7 .lead .num { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.5em; color: var(--ivory); -webkit-text-stroke: .1em var(--tdeep); paint-order: stroke fill; }
.marquee { position: relative; z-index: 1; margin-top: 18px; overflow: hidden; }
.marquee ul { list-style: none; display: flex; gap: 14px; width: max-content; animation: marq 30s linear infinite; }
.marquee li { flex: none; width: 150px; }
.marquee img { width: 100%; height: auto; filter: drop-shadow(0 10px 10px rgba(4, 40, 50, .35)); }
@keyframes marq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 7px), 0, 0); } }
@media (min-width: 960px) { .ring-stage { height: 460px; } .rc { width: 130px; height: 196px; left: -65px; top: -98px; } .ring { --z: 250px; } .marquee li { width: 210px; } }

/* ---------- C8 · Ligues (marae au crépuscule) ---------- */
/* le lagon (collection) s'assombrit en ciel du soir : la toile du marae arrive en fondu, sans ligne droite */
.c8 { color: var(--ivory); overflow: hidden; min-height: 100svh; padding-bottom: calc(28vw + 34px);
  background: linear-gradient(180deg, #1f9fb0 0, #2a80bd 110px, #3664c8 240px, #3f5ed0 360px); }
@media (min-width: 600px) { .c8 { padding-bottom: calc(14vw + 40px); } }
@media (min-width: 960px) { .c8 { padding-bottom: calc(9.4vw + 60px); } }
.c8-bg { position: absolute; inset: -4% 0 -10% 0; z-index: 0;
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, .45) 130px, #000 300px); mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, .45) 130px, #000 300px); }
.c8-bg picture, .c8-bg img { display: block; width: 100%; height: 100%; }
.c8-bg img { object-fit: cover; object-position: 50% 60%; }
.c8-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 30, 90, .55) 0%, rgba(20, 30, 90, .1) 34%, rgba(20, 30, 60, 0) 60%, rgba(10, 30, 20, .45) 100%); }
.c8 .wrap { z-index: 1; }
.c8 .h2 { text-align: center; }
.c8 .st { -webkit-text-stroke-color: #2b2f7a; text-shadow: 0 .075em 0 #2b2f7a, 0 .18em .4em rgba(10, 10, 50, .45); }
.c8 .lead { color: #eef0ff; text-align: center; text-shadow: 0 1px 8px rgba(10, 20, 60, .7); max-width: 26em; margin: 0 auto; }
.c8 .lead b { color: #fff; }
.climb { position: relative; padding-top: 470px; max-width: 420px; margin: 10px auto 0; }
.rays { position: absolute; left: 50%; top: 58px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: .45; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 248, 231, .7) 0deg 10deg, rgba(255, 248, 231, 0) 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, 0) 68%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, 0) 68%);
  animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.emb { list-style: none; position: absolute; left: 0; right: 0; top: 0; height: 470px; }
.emb li { position: absolute; display: grid; justify-items: center; }
.emb img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(10, 10, 40, .45)); }
.emb span { margin-top: -4px; padding: 2px 9px; border-radius: 999px; background: rgba(12, 20, 60, .72); color: var(--ivory); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; }
.flash { position: absolute; left: 50%; top: 40%; width: 110%; aspect-ratio: 1; margin-left: -55%; margin-top: -55%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 230, .95), rgba(255, 250, 230, 0) 65%); opacity: 0; pointer-events: none; }
.e1 { left: 4%; bottom: 0; width: 74px; }
.e2 { right: 6%; bottom: 62px; width: 80px; }
.e3 { left: 8%; bottom: 140px; width: 88px; }
.e4 { right: 4%; bottom: 200px; width: 96px; }
.e5 { left: 6%; bottom: 272px; width: 104px; }
.e6 { left: 50%; top: 0; width: 124px; margin-left: -62px; }
.e6 img { filter: drop-shadow(0 0 18px rgba(255, 230, 150, .8)) drop-shadow(0 8px 10px rgba(10, 10, 40, .45)); }
.pill-gold { position: relative; display: table; transform: rotate(-3deg); margin: 22px auto 0; padding: 8px 16px; border-radius: 999px; white-space: nowrap; background: linear-gradient(180deg, #ffe07a, var(--gold) 55%, #e0a012); color: #4a2f00; font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 #a86f00, 0 12px 20px -10px rgba(40, 20, 0, .7); }
@media (min-width: 960px) { .climb { max-width: 640px; } .rays { width: 700px; height: 700px; margin: -350px 0 0 -350px; } }

/* ---------- C9 · Finale au coucher du soleil ---------- */
/* la finale passe devant le marae : un lei de fleurs cousu à cheval sur la jonction ; le bas se ferme sur une guirlande et du sable */
.c9 { z-index: 2; min-height: 100vh; min-height: 100svh; padding: calc(28vw + 12px) 0 0; overflow: visible; clip-path: inset(-60vw 0 0 0); background: #f09451; display: flex; flex-direction: column; }
@media (min-width: 600px) { .c9 { padding-top: calc(14vw + 18px); } }
@media (min-width: 960px) { .c9 { padding-top: calc(9.4vw + 44px); } }
.lei { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; transform: translateY(-50%); pointer-events: none; }
.lei picture { flex: 1 1 0; min-width: 0; }
.lei picture, .lei img, .c9-flow picture, .c9-flow img { display: block; width: 100%; height: auto; }
.lei picture + picture { display: none; }
.c9-flow { position: absolute; z-index: 4; left: 0; right: 0; bottom: -1px; display: flex; pointer-events: none; }
.c9-flow picture { flex: 1 1 0; min-width: 0; }
.c9-flow picture + picture { display: none; }
@media (min-width: 600px) { .lei picture:nth-child(2), .c9-flow picture:nth-child(2) { display: block; } }
@media (min-width: 960px) { .lei picture:nth-child(3) { display: block; } }
.c9-bg { position: absolute; inset: 0; z-index: 0; }
.c9-bg picture, .c9-bg img { display: block; width: 100%; height: 100%; }
.c9-bg img { object-fit: cover; object-position: 50% 50%; }
.c9-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(90, 50, 140, .35) 0%, rgba(90, 50, 140, 0) 40%); }
.c9 > .c9-text { z-index: 5; }
.c9-text { position: relative; z-index: 5; display: grid; justify-items: center; gap: 14px; text-align: center; }
.c9 .h2 { font-size: clamp(40px, 12.4vw, 50px); margin: 0; }
.c9 .st { -webkit-text-stroke-color: #7a2d3a; text-shadow: 0 .075em 0 #7a2d3a, 0 .18em .4em rgba(80, 20, 30, .4); }
.c9 .st .k { color: #fff1a8; }
.c9-line { padding: 8px 16px; border-radius: 999px; color: #6b2433; font-size: 18px; line-height: 1.25;
  background: linear-gradient(180deg, rgba(255, 251, 242, .93), rgba(255, 234, 212, .86)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 10px 22px -12px rgba(80, 20, 30, .6); }
.c9-line b { color: #6b2433; }
.c9-stage { position: relative; z-index: 1; flex: 1; min-height: 400px; margin-top: 4px; }
.c9-stage .rays { top: 55%; opacity: .5; width: 640px; height: 640px; margin: -320px 0 0 -320px; animation-duration: 40s; }
.c9-tama { position: absolute; z-index: 2; left: 50%; bottom: -24px; width: min(300px, 76vw); margin-left: calc(min(300px, 76vw) / -2); }
.c9-tama img { width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(80, 20, 30, .35)); }
.confetti { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 1; }
.cf { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; max-width: none; pointer-events: none; will-change: transform; }
.cf.p { width: 7px; height: 13px; border-radius: 2px; }
.cf.c1 { background: var(--coral); } .cf.c2 { background: #19b3c4; } .cf.c3 { background: var(--gold); } .cf.c4 { background: var(--ivory); }
.cf.f, .cf.t { width: 30px; height: 30px; left: -15px; top: -15px; }
@media (min-width: 960px) { .c9-tama { width: 420px; margin-left: -210px; } .c9 .h2 { font-size: 72px; } }

/* ---------- Après la finale : infos, règles, pied de page ---------- */
.after { position: relative; padding: 18px 0 70px; background: linear-gradient(180deg, #fde5bc 0%, #fdeccc 90px, var(--sand-1) 100%); }
.after .final-card { max-width: 720px; margin: 0 auto; padding: 22px 20px; text-align: center; border-radius: 24px; background: rgba(255, 255, 255, .7); box-shadow: 0 16px 30px -24px rgba(90, 60, 20, .8); }
.after .legal-line { font-size: 16px; line-height: 1.5; color: var(--ink-2); font-weight: 800; }
.after .contact-line { margin: 14px 0 8px; font-weight: 800; color: var(--ink-2); }
.after .rules { max-width: 1000px; margin: 18px auto 0; text-align: left; }
.foot-wave { position: relative; z-index: 1; margin-top: -84px; pointer-events: none; }
.foot-wave picture, .foot-wave img { display: block; width: 100%; }
@media (min-width: 960px) { .foot-wave { margin-top: -110px; } .foot-wave picture, .foot-wave img { height: 230px; } .foot-wave img { object-fit: fill; } }
.page-v3 .site-footer { background: linear-gradient(180deg, #005881 0%, #0a4a66 90px, var(--ink) 340px); margin-top: -2px; }

/* =====================================================================================
   Entrées déclenchées (html.fx seulement) — [data-go] reçoit .go quand il entre à l'écran
   ===================================================================================== */
.fx [data-go] .w, .fx .st[data-go] .w { opacity: 0; }
.fx .go .w, .fx .st.go .w { animation: word-in .48s var(--e-pop) both; animation-delay: calc(var(--wi, 0) * 55ms); }
.fx .go .w.k, .fx .st.go .w.k { animation: word-in .48s var(--e-pop) both, stamp .18s var(--e-pop); animation-delay: calc(var(--wi, 0) * 55ms + 120ms), calc(var(--wi, 0) * 55ms + 600ms); }
.fx .go .slam .w, .fx .go .slam .w.k { animation: slam .36s var(--e-pop) both; animation-delay: calc(.1s + var(--wi, 0) * 80ms); }
@keyframes slam { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fx .c9-text.go .slam { animation: shake .15s linear .45s 2; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* Texte courant (data-go="c") : il n'arrive qu'après le titre de son chapitre (enchaînement posé par v3.js) */
.fx [data-go="c"]:not(.go) { opacity: 0; }
.fx [data-go="c"].go { animation: copy-in .42s var(--e-glide) both; }
.fx [data-go="c"]:focus-within { opacity: 1; animation: none; }
@keyframes copy-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.fx .code-pill:not(.go), .fx .donne:not(.go) { opacity: 0; transform: translateY(16px) scale(.96); }
.fx .code-pill.go, .fx .donne.go { animation: card-in .46s var(--e-pop) both; }
@keyframes card-in { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* C1 : la donne */
.fx .rules3 li p, .fx .rules3 .deal, .fx .rules3 .fan3, .fx .rules3 .chk, .fx .rules3 .win-star { opacity: 0; }
.fx .rules3.go .deal { animation: deal .62s var(--e-glide) both; }
.fx .rules3.go .r1 .deal { animation-delay: .04s; } .fx .rules3.go .r2 .deal { animation-delay: .16s; }
@keyframes deal { from { transform: translate(260px, -320px) rotate(540deg) scale(.6); opacity: 0; } 20% { opacity: 1; } 82% { transform: rotate(-6deg) scale(1.06); opacity: 1; } to { transform: rotate(-6deg); opacity: 1; } }
.fx .rules3.go .r2 .deal { animation-name: deal2; }
@keyframes deal2 { from { transform: translate(260px, -320px) rotate(540deg) scale(.6); opacity: 0; } 20% { opacity: 1; } 82% { transform: rotate(5deg) translateX(-8px) scale(1.06); opacity: 1; } to { transform: rotate(5deg) translateX(-8px); opacity: 1; } }
.fx .rules3.go li p { animation: txt-in .38s var(--e-glide) both; }
.fx .rules3.go .r1 p { animation-delay: .46s; } .fx .rules3.go .r2 p { animation-delay: .58s; } .fx .rules3.go .r3 p { animation-delay: .7s; }
@keyframes txt-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.fx .rules3.go .chk { animation: chk .36s var(--e-pop) .66s both; }
@keyframes chk { from { transform: translate(-44%, 8px) scale(1.5) rotate(-10deg); opacity: 0; } to { transform: translate(-44%, 8px) rotate(-8deg); opacity: 1; } }
.fx .rules3.go .fan3 { animation: deal-plain .62s var(--e-glide) .28s both; }
@keyframes deal-plain { from { transform: translate(260px, -320px) rotate(300deg) scale(.6); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
.fx .rules3.go .fan3 .bk { animation: fan-open .3s var(--e-pop) .82s both, fly-off .42s var(--e-fall) both; }
.fx .rules3.go .fan3 .bk:nth-child(1) { --fa: -14deg; --fx: -34px; animation-delay: .82s, 1.3s; }
.fx .rules3.go .fan3 .bk:nth-child(2) { --fa: 0deg; --fx: -8px; animation-delay: .82s, 1.39s; }
.fx .rules3.go .fan3 .bk:nth-child(3) { --fa: 14deg; --fx: 18px; animation-delay: .82s, 1.48s; }
@keyframes fan-open { from { transform: rotate(0deg); } to { transform: rotate(var(--fa)); } }
/* la main se vide vers le haut, dans la colonne de l'image : jamais par-dessus le texte */
@keyframes fly-off { from { transform: rotate(var(--fa)); opacity: 1; } to { transform: translate(var(--fx, 0px), -150px) rotate(calc(var(--fa) * 2.4)) scale(.7); opacity: 0; } }
.fx .rules3.go .win-star { animation: star-pop .5s var(--e-spring) 1.72s both; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } to { transform: none; opacity: 1; } }
.fx .rules3.go .r3 .win-star { right: 30px; top: 34px; width: 46px; height: 46px; }

/* C2 : cartes de mode qui jaillissent (WAAPI, voir v3.js) */

/* C3 : rivaux, autocollants, jetons */
.fx .lineup .lu-art, .fx .lineup .tag { opacity: 0; }
.fx .lineup.go .lu-art { animation: rise-pop .7s var(--e-spring) both; }
.fx .lineup.go .tag { animation: tag-in .38s var(--e-pop) both; }
.fx .lineup.go .lu-tane .lu-art { animation-delay: 0s; } .fx .lineup.go .lu-tane .tag { animation-delay: .2s; }
.fx .lineup.go .lu-moana .lu-art { animation-delay: .14s; } .fx .lineup.go .lu-moana .tag { animation-delay: .34s; }
.fx .lineup.go .lu-hina .lu-art { animation-delay: .28s; } .fx .lineup.go .lu-hina .tag { animation-delay: .48s; }
.fx .lineup.go .lu-tama .lu-art { animation-delay: .42s; } .fx .lineup.go .lu-tama .tag { animation-delay: .62s; }
@keyframes rise-pop { from { translate: 0 70px; scale: .8; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes tag-in { from { scale: 0; rotate: -14deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
.fx .lineup.go .lu-moana .lu-art { animation: rise-pop .7s var(--e-spring) .14s both, bob 3.4s var(--e-sway) 1s infinite alternate; }
.fx .lineup.go .lu-tama .lu-art { animation: rise-pop .7s var(--e-spring) .42s both, bob 4.2s var(--e-sway) 1.2s infinite alternate; }
.fx .lineup.go .lu-hina .lu-art { animation: rise-pop .7s var(--e-spring) .28s both, bob-r 3.8s var(--e-sway) 1.1s infinite alternate; }
/* bob-r en alternate = bob en alternate-reverse (courbe --e-sway symétrique) */
@keyframes bob-r { from { transform: translateY(6px); } to { transform: none; } }
/* la carte de Hina reste droite pendant toute sa présence, comme quand l'entrée portait sur transform */
.fx .lineup.go .lu-art.medal { transform: none; }
.fx .lineup.go .lu-tane .lu-art { animation: rise-pop .7s var(--e-spring) 0s both, flick 7s var(--e-sway) 2s infinite; }
@keyframes flick { 0%, 90%, 100% { transform: none; } 94% { transform: rotate(-2deg) translateY(-4px); } 97% { transform: rotate(1.4deg); } }
.fx .table-stage .stack img { opacity: 0; }
.fx .table-stage.go .stack img { animation: tfall .88s both; }
.fx .table-stage.go li:nth-child(1) .stack img:nth-child(1) { animation-delay: .1s; } .fx .table-stage.go li:nth-child(2) .stack img:nth-child(1) { animation-delay: .145s; } .fx .table-stage.go li:nth-child(3) .stack img:nth-child(1) { animation-delay: .19s; }
.fx .table-stage.go li:nth-child(1) .stack img:nth-child(2) { animation-delay: .235s; } .fx .table-stage.go li:nth-child(2) .stack img:nth-child(2) { animation-delay: .28s; } .fx .table-stage.go li:nth-child(3) .stack img:nth-child(2) { animation-delay: .325s; }
.fx .table-stage.go li:nth-child(1) .stack img:nth-child(3) { animation-delay: .37s; } .fx .table-stage.go li:nth-child(2) .stack img:nth-child(3) { animation-delay: .415s; } .fx .table-stage.go li:nth-child(3) .stack img:nth-child(3) { animation-delay: .46s; }
.fx .table-stage.go li:nth-child(1) .stack img:nth-child(4) { animation-delay: .505s; } .fx .table-stage.go li:nth-child(2) .stack img:nth-child(4) { animation-delay: .55s; } .fx .table-stage.go li:nth-child(3) .stack img:nth-child(4) { animation-delay: .595s; }
@keyframes tfall {
  0% { transform: translateY(-260px) rotate(var(--r0)) scaleX(1); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  8% { opacity: 1; }
  20% { transform: translateY(-190px) rotate(calc(var(--r0) * .7)) scaleX(.25); }
  36% { transform: translateY(-110px) rotate(calc(var(--r0) * .45)) scaleX(1); }
  48% { transform: translateY(-50px) rotate(calc(var(--r0) * .2)) scaleX(.3); }
  59% { transform: translateY(0) rotate(0deg) scale(1.1, .82); opacity: 1; animation-timing-function: ease-out; }
  70% { transform: translateY(-12px) scale(1); animation-timing-function: ease-in; }
  80% { transform: translateY(0); animation-timing-function: ease-out; }
  90% { transform: translateY(-5px); animation-timing-function: ease-in; }
  100% { transform: none; opacity: 1; }
}
.fx .stakes-zone .note { opacity: 0; }
.fx .stakes-zone .table-stage.go ~ .note { animation: fade-up .4s ease 1.5s both; }

/* C4 : volets du code, places qui se remplissent, avion en papier */
.fx .code-pill .flap i { opacity: 0; }
.fx .code-pill.go .flap i { animation: flap .3s var(--e-pop) both; }
.fx .code-pill.go .flap i:nth-child(1) { animation-delay: .15s; } .fx .code-pill.go .flap i:nth-child(2) { animation-delay: .22s; } .fx .code-pill.go .flap i:nth-child(3) { animation-delay: .29s; }
.fx .code-pill.go .flap i:nth-child(4) { animation-delay: .36s; } .fx .code-pill.go .flap i:nth-child(5) { animation-delay: .43s; } .fx .code-pill.go .flap i:nth-child(6) { animation-delay: .5s; }
@keyframes flap { 0% { transform: rotateX(-90deg); opacity: 0; } 20% { opacity: 1; } 80% { transform: rotateX(8deg) translateY(2px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.fx .seats .seat, .fx .seats .share { opacity: 0; }
.fx .seats.go .seat { animation: seat-pop .42s var(--e-pop) both; }
.fx .seats.go .s-me { animation-delay: .1s; } .fx .seats.go .s-f1 { animation-delay: .35s; } .fx .seats.go .s-f2 { animation-delay: .55s; }
.fx .seats.go .s-ia { animation: seat-blink .9s linear .75s both; }
.fx .seats.go .s-ia i { animation: pop-in .38s var(--e-pop) 1.6s both; }
.fx .seats.go .share { animation: fade-up .4s var(--e-glide) 1.9s both; }
.fx .seats.go .share svg { animation: plane .9s var(--e-glide) 2.4s both; }
@keyframes seat-pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seat-blink { 0% { opacity: 0; transform: scale(.9); } 15%, 35% { opacity: .9; transform: none; } 25%, 45% { opacity: .15; } 60%, 100% { opacity: 1; transform: none; } }
@keyframes plane { 0% { transform: none; opacity: 1; } 40% { transform: translate(10px, -10px); opacity: 0; } 41% { transform: translate(-10px, 10px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* C5 : 32, soulignement d'or, deux écrans, trois étoiles */
.fx .big32 .uline { transform: scaleX(0); }
.fx .big32.go .uline { animation: uline .6s var(--e-glide) 1s both; }
@keyframes uline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fx .big32 .b32-l { opacity: 0; }
.fx .big32.go .b32-l { animation: fade-up .4s var(--e-glide) .5s both; }
.fx .mini .mini-ph { opacity: 0; }
.fx .mini.go .mini-ph { animation: mini-in .7s var(--e-spring) both; }
@keyframes mini-in { from { transform: translateY(60px) rotate(6deg) scale(.9); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }
.fx .mini .shot:nth-child(2) { opacity: 0; }
.fx .mini.go .shot:nth-child(1) { animation: depth-out .38s var(--e-glide) 1.4s both; }
.fx .mini.go .shot:nth-child(2) { animation: depth-in .46s var(--e-glide) 1.46s both; }
.fx .mini .sx svg { opacity: 0; }
.fx .mini.go .sx svg { animation: star-pop .42s var(--e-spring) both; }
.fx .mini.go .sx:nth-child(1) svg { animation-delay: 1.7s; } .fx .mini.go .sx:nth-child(2) svg { animation-delay: 1.92s; } .fx .mini.go .sx:nth-child(3) svg { animation-delay: 2.14s; }
.fx .mini.go .sx i { animation: sparkle .48s ease-out both; }
.fx .mini.go .sx:nth-child(1) i { animation-delay: 1.98s; } .fx .mini.go .sx:nth-child(2) i { animation-delay: 2.2s; } .fx .mini.go .sx:nth-child(3) i { animation-delay: 2.42s; }
.sx i:nth-of-type(2) { --a: 45deg; } .sx i:nth-of-type(3) { --a: 90deg; } .sx i:nth-of-type(4) { --a: 135deg; } .sx i:nth-of-type(5) { --a: 180deg; } .sx i:nth-of-type(6) { --a: 225deg; } .sx i:nth-of-type(7) { --a: 270deg; } .sx i:nth-of-type(8) { --a: 315deg; }
@keyframes sparkle { from { transform: rotate(var(--a, 0deg)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a, 0deg)) translateX(30px) scale(.4); opacity: 0; } }
.fx .donne .donne-ic { opacity: 0; }
.fx .donne.go .donne-ic { animation: pop-in .38s var(--e-pop) .3s both; }

/* C6 : l'échelle se monte de la plus faible à la plus forte */
.fx .ladder-panel .cards picture, .fx .ladder-panel .lbl, .fx .ladder-panel .crown, .fx .ladder-panel .dots i { opacity: 0; }
.fx .ladder-panel.go .cards picture { animation: slide-card .42s var(--e-glide) both; animation-delay: calc(var(--rd) + var(--ci) * 60ms); }
.fx .ladder-panel.go .lbl { animation: pop-in .38s var(--e-pop) both; animation-delay: calc(var(--rd) + 360ms); }
.fx .ladder-panel.go .dots i { animation: pop-in .3s var(--e-pop) both; animation-delay: calc(var(--rd) + var(--ci) * 90ms); }
.lrow.low { --rd: 0ms; } .lrow.dots { --rd: 440ms; } .lrow:nth-child(3) { --rd: 620ms; } .lrow:nth-child(2) { --rd: 1000ms; } .lrow.top { --rd: 1380ms; }
.lrow .cards picture, .dots i { --ci: 0; }
.lrow .cards picture:nth-of-type(2), .dots i:nth-child(2) { --ci: 1; } .lrow .cards picture:nth-of-type(3), .dots i:nth-child(3) { --ci: 2; }
.lrow .cards picture:nth-of-type(4) { --ci: 3; } .lrow .cards picture:nth-of-type(5) { --ci: 4; }
@keyframes slide-card { from { transform: translateX(120px) rotate(12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fx .ladder-panel.go .top .cards { animation: glow-in .5s ease 1.9s both; }
@keyframes glow-in { from { box-shadow: 0 0 0 2.5px rgba(242, 185, 44, 0), 0 0 22px rgba(255, 210, 90, 0); } to { box-shadow: 0 0 0 2.5px var(--gold), 0 0 22px rgba(255, 210, 90, .75); } }
.fx .ladder-panel.go .sheen::before { animation: sheen .7s var(--e-sway) 1.95s both; }
@keyframes sheen { from { transform: translateX(-150%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
.fx .ladder-panel.go .crown { animation: crown .38s var(--e-pop) 2.3s both; }
@keyframes crown { from { transform: rotate(-14deg) scale(0); opacity: 0; } to { transform: rotate(-14deg); opacity: 1; } }

/* C7 : compteurs, anneau (boucle CSS + défilement dans v3.js) */

/* C8 : emblèmes qui montent avec un éclair */
/* chaque emblème se pose quand il arrive à l'écran (v3.js échelonne ceux qui arrivent ensemble, du bas vers le haut) */
.fx .emb li img, .fx .emb li span, .fx .climb .pill-gold { opacity: 0; }
.fx .emb li.go img { animation: emb-in .62s var(--e-spring) var(--d, 0ms) both; }
.fx .emb li.go span { animation: fade-up .3s ease calc(var(--d, 0ms) + 260ms) both; }
.fx .emb li.go .flash { animation: flash .42s ease-out var(--d, 0ms) both; }
.fx .emb .e6.go img { animation: emb-in .7s var(--e-spring) var(--d, 0ms) both, float 4s var(--e-sway) calc(var(--d, 0ms) + .8s) infinite alternate; }
@keyframes emb-in { from { translate: 0 90px; scale: .6; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes flash { from { transform: scale(0); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@keyframes float { from { transform: none; } to { transform: translateY(-4px); } }
.fx .climb.go .rays { animation: spin 60s linear infinite, rays-up .8s ease 1.2s 2 alternate; }
@keyframes rays-up { to { opacity: .72; } }
.fx .climb .pill-gold.go { animation: pill-stamp .42s var(--e-pop) .25s both; }
@keyframes pill-stamp { from { transform: rotate(-10deg) scale(1.5); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }

/* C9 : rayons, Tamatoa, bouton */
.fx .c9-stage .rays, .fx .c9-tama { opacity: 0; }
/* Les rayons de la finale restent fixes après leur entrée, comme depuis toujours : l'ancien « spin 40s » ne tournait pas
   (entrée et boucle sur transform avec des listes différentes = interpolation de matrices identiques), ni dans Chrome ni dans Safari.
   Il ne coûtait qu'un recalcul du style à chaque image. Pour les faire tourner (changement visible) : ajouter « , spin 40s linear .9s infinite ». */
.fx .c9-stage.go .rays { animation: rays-in .9s var(--e-glide) both; }
@keyframes rays-in { from { rotate: -30deg; scale: .4; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: .5; } }
.fx .c9-stage.go .c9-tama { animation: tama-jump .8s var(--e-spring) .1s both; }
@keyframes tama-jump { from { transform: translateY(55%) scale(.85); opacity: 0; } 25% { opacity: 1; } to { transform: none; opacity: 1; } }
.fx .c9-text .store, .fx .c9-text .c9-line { opacity: 0; }
.fx .c9-text.go .store { animation: pop-in .48s var(--e-pop) .5s both; }
.fx .c9-text.go .c9-line { animation: fade-up .36s ease .72s both; }
.fx .c9-text .store:focus-visible { opacity: 1; animation: none; }

/* Couches promues seulement pendant que leur scène est pilotée par le défilement (.live posé par v3.js) */
.fx .c0.live .ly, .fx .c0.live .c0-text, .fx .c2-track.live .phone, .fx .c8.live .c8-bg { will-change: transform; }

/* Compteurs (v3.js) : le fantôme garde la largeur finale et la lecture d'écran, le chiffre visible monte de 0 */
.num[data-count] { position: relative; }
.num .cg { opacity: 0; }
.num .cl { position: absolute; left: 0; right: 0; top: 0; text-align: center; white-space: nowrap; }

/* Ombres portées (filter: drop-shadow), Safari seulement (moteur WebKit, iPhone compris) : chaque élément a son propre calque,
   l'ombre est calculée une fois au lieu d'être refaite dans chaque tuile repeinte au défilement ou au redimensionnement.
   Chrome ne repeint pas ces tuiles (rien à gagner) et fige la résolution d'un calque will-change : il n'est pas concerné.
   La photo de Hina n'a pas d'ombre : pas de calque.
   Les rayons de la finale (fixes après leur entrée) gardent aussi leur calque : sinon Safari les repeint (dégradé conique + masque)
   dans le calque de toute la section à chaque confetti qui apparaît ou disparaît. */
@supports (font: -apple-system-body) {
  .c0-logo img, .glint-card, .deal, .win-star, .lu-art:not(.medal) img, .table-art img, .stack img, .sx svg, .crown,
  .marquee img, .emb img, .c9-tama img, .brand img, .final-card .logo, .fx .c9-stage .rays { will-change: transform; }
}

/* Téléphone 3D : le reflet glisse en calque (pas de repeinte à chaque image du défilement),
   et hors de sa scène (toujours hors de l'écran, .live arrive une demi-hauteur d'écran avant) le téléphone n'est plus dessiné. */
.fx .c2-track.live .glare { will-change: transform; }
.fx .c2-track:not(.live) .c2-3d { opacity: 0; }

/* Boucles en pause hors de l'écran (html.fx : chaque chapitre reçoit .vis quand il est proche).
   Seules les boucles sont visées (pas « * ») : poser ou retirer .vis ne recalcule plus le style de tout le chapitre. */
.fx .chap:not(.vis) .caus::before, .fx .chap:not(.vis) .caus::after, .fx .chap:not(.vis) .dive img,
.fx .chap:not(.vis) .lu-art, .fx .chap:not(.vis) .ring, .fx .chap:not(.vis) .marquee ul, .fx .chap:not(.vis) .rays,
.fx .chap:not(.vis) .emb img, .fx .chap:not(.vis) .store::after,
.fx .c0:not(.vis) .sun, .fx .c0:not(.vis) .caus::before, .fx .c0:not(.vis) .caus::after, .fx .c0:not(.vis) .glints b,
.fx .c0:not(.vis) .tama-in, .fx .c0:not(.vis) .glint-card, .fx .c0:not(.vis) .palm-in, .fx .c0:not(.vis) .foli-in,
.fx .c0:not(.vis) .ly-isl picture, .fx .c0:not(.vis) .ly-water picture, .fx .c0:not(.vis) .ly-flow picture,
.fx .c0:not(.vis) .shine::before, .fx .c0:not(.vis) .store::after, .fx .c0:not(.vis) .cue svg { animation-play-state: paused !important; }

/* =====================================================================================
   Réduire les animations : page calme et complète
   ===================================================================================== */
.calm [data-go] { transition: opacity .2s ease; }
.calm [data-go]:not(.go) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .page-v3 *, .page-v3 *::before, .page-v3 *::after { animation: none !important; transition-duration: .01ms !important; }
  .c0 { height: auto; }
  .c0-stage { position: relative; height: 100vh; height: 100svh; }
  .calm [data-go] { transition: opacity .2s ease !important; }
  .scrolled .cue { opacity: 1; }
}