/* Le voyage des outre-mers : scène fixe 1280 x 720, mise à l'échelle par voyage.js */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #123a56; overflow: hidden; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#cadre { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#scene { position: relative; width: 1280px; height: 720px; flex: none; overflow: hidden; transform-origin: center center; background: #7fd0ff; border-radius: 6px; }
#ciel { position: absolute; inset: 0; background: linear-gradient(#58bff5 0%, #9fe0ff 55%, #fff1c9 78%); }
.nuage { position: absolute; width: 190px; height: 56px; background: #fff; border-radius: 40px; opacity: .92; animation: derive 40s linear infinite; }
.nuage::before, .nuage::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.nuage::before { width: 80px; height: 80px; left: 28px; top: -38px; } .nuage::after { width: 60px; height: 60px; left: 94px; top: -26px; }
.n1 { top: 70px; left: -200px; animation-duration: 46s; } .n2 { top: 160px; left: -200px; animation-duration: 62s; animation-delay: -20s; transform: scale(.7); } .n3 { top: 40px; left: -200px; animation-duration: 54s; animation-delay: -35s; transform: scale(.5); }
@keyframes derive { to { left: 1300px; } }
#mer { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(#1aa7c9, #0b6f9a); }
.vague { position: absolute; left: -20px; right: -20px; height: 40px; background: repeating-radial-gradient(circle at 20px 40px, transparent 0 14px, rgba(255,255,255,.55) 14px 17px, transparent 17px 40px); animation: houle 3.2s ease-in-out infinite alternate; }
.v1 { top: 6px; } .v2 { top: 62px; animation-delay: -1.2s; opacity: .6; }
@keyframes houle { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.ile { position: absolute; width: 190px; text-align: center; transform: translateX(-50%); }
.ile .terre { width: 150px; height: 50px; margin: 0 auto; background: #f4d98a; border-radius: 65px 65px 0 0; position: relative; box-shadow: inset 0 -10px 0 #e2bd62; }
.ile .terre::before { content: "🌴"; position: absolute; top: -34px; left: 40px; font-size: 36px; }
.ile .nom { margin-top: 4px; font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ile img { width: 30px; height: 20px; object-fit: contain; background: #fff; border-radius: 2px; border: 1px solid rgba(0,0,0,.4); vertical-align: middle; margin-right: 5px; }
.ile.actuelle .terre { animation: rebond calc(var(--beat, .6s)) ease-in-out infinite alternate; }
@keyframes rebond { to { transform: translateY(-8px); } }
#avion { position: absolute; left: 0; top: 0; width: 190px; height: 95px; z-index: 3; will-change: transform; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
#helice { transform-box: fill-box; transform-origin: center; animation: tourne .18s linear infinite; }
@keyframes tourne { 50% { transform: scaleY(.25); } }
#titre-vol { position: absolute; top: 24px; left: 0; right: 0; text-align: center; z-index: 2; font-size: 38px; font-weight: 900; color: #fff; text-shadow: 0 3px 8px rgba(0,0,0,.45); opacity: 0; transition: opacity .4s; }
#titre-vol.visible { opacity: 1; }

/* la page du pays : s'ouvre à l'arrivée */
#carte-page { position: absolute; z-index: 4; left: 150px; top: 38px; width: 980px; height: 620px; border-radius: 22px; padding: 26px; box-shadow: 0 18px 50px rgba(0,0,0,.45); transform: scale(.05) rotateY(80deg); transform-origin: 50% 85%; opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.2,1.3,.4,1), opacity .35s; }
#carte-page.ouverte { transform: none; opacity: 1; pointer-events: auto; }
#feuille { position: relative; width: 100%; height: 100%; background: #fffdf6; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
#entete-page { display: flex; align-items: center; gap: 16px; padding: 14px 26px 6px; }
#drapeau { height: 54px; width: 80px; object-fit: contain; background: #fff; border: 2px solid #1f1a1a; border-radius: 4px; }
#titre-page { margin: 0; font-size: 40px; font-weight: 900; color: #1f1a1a; }
#vedettes { position: relative; flex: 1; }
.vedette { position: absolute; bottom: 66px; display: flex; flex-direction: column; align-items: center; transition: opacity .3s; }
.vedette .cadre { position: relative; }
.vedette img { display: block; height: 100%; width: auto; }
.vedette .trait { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.vedette .nom { margin-top: 6px; font-size: 18px; font-weight: 800; color: #1f1a1a; width: 160px; text-align: center; line-height: 1.15; }
.vedette .cadre { margin: 0 auto; }
.dessin-fini .vedette .trait, #carte-page.fini .trait { opacity: 1; }
#carte-page.fini .couleur { opacity: 0; transition: opacity 1.2s; }
.bouge-a { animation: saute calc(var(--beat, .6s) * 2) ease-in-out infinite; transform-origin: 50% 100%; }
.bouge-b { animation: balance calc(var(--beat, .6s) * 4) ease-in-out infinite alternate; transform-origin: 50% 100%; }
.bouge-c { animation: bat calc(var(--beat, .6s) * 2) ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes saute { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-34px) scale(.96, 1.05); } 55% { transform: translateY(-34px); } 85% { transform: translateY(0) scale(1.05, .94); } }
@keyframes balance { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes bat { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(1.08, .93) rotate(2deg); } }
#invite { position: absolute; left: 0; right: 0; bottom: 0; height: 66px; display: flex; align-items: center; justify-content: center; gap: 22px; background: rgba(255,253,246,.92); opacity: 0; transition: opacity .6s; font-size: 28px; font-weight: 900; color: #1f1a1a; }
#carte-page.fini #invite { opacity: 1; }
#invite a { font-size: 20px; padding: 8px 20px; border-radius: 999px; background: #1f1a1a; color: #fff; text-decoration: none; }

/* motifs d'artisanat sur le bord de la page (évocations, à faire valider) */
.motif-madras { background: repeating-linear-gradient(90deg, rgba(196,32,44,.75) 0 12px, transparent 12px 46px), repeating-linear-gradient(0deg, rgba(28,58,140,.7) 0 12px, transparent 12px 52px), repeating-linear-gradient(90deg, rgba(28,118,62,.6) 0 5px, transparent 5px 90px), #f8c428; }
.motif-reunion { background: repeating-radial-gradient(circle at 18px 18px, #fff 0 3px, #d9cfb8 3px 5px, #f3ecde 5px 18px), #f3ecde; border: 3px solid #d9cfb8; }
.motif-guadeloupe { background: repeating-linear-gradient(90deg, rgba(34,120,60,.7) 0 14px, transparent 14px 54px), repeating-linear-gradient(0deg, rgba(200,40,50,.7) 0 14px, transparent 14px 60px), #ecc828; }
.motif-guyane { background: repeating-linear-gradient(45deg, #1f1a1a 0 8px, #c82828 8px 24px, #f5cd28 24px 40px, #288236 40px 56px); }
.motif-mayotte { background: repeating-linear-gradient(90deg, #1e96be 0 18px, #fff 18px 22px, #dc3c32 22px 40px, #fac828 40px 44px), #1e96be; }
.motif-nouvelle-caledonie { background: repeating-linear-gradient(135deg, #1f1a1a 0 10px, #c83232 10px 22px, #f5cd28 22px 32px, #288250 32px 44px); }

/* notes de musique qui montent */
#notes { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.note { position: absolute; bottom: -40px; font-size: 38px; opacity: 0; animation: monte 3.4s ease-out forwards; }
@keyframes monte { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-640px) rotate(14deg); opacity: 0; } }

#commandes { position: fixed; right: 12px; bottom: 12px; z-index: 20; display: flex; gap: 8px; align-items: center; }
#commandes button, #commandes a { height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: rgba(255,255,255,.92); font: 700 16px/44px Inter, sans-serif; color: #1f1a1a; text-decoration: none; cursor: pointer; text-align: center; }
#commandes button[aria-pressed="false"] { opacity: .55; }
#depart { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: linear-gradient(rgba(18,58,86,.72), rgba(18,58,86,.9)); color: #fff; }
#depart h1 { margin: 0; font-size: 44px; } #depart p { max-width: 640px; margin: 0; font-size: 20px; line-height: 1.4; }
#depart button { margin-top: 10px; font: 900 26px Inter, sans-serif; padding: 14px 34px; border-radius: 999px; border: 0; background: #f8c428; color: #1f1a1a; cursor: pointer; }
#depart .retour-depart { font-size: 16px; margin-top: 6px; } #depart .retour-depart a { color: #fff; text-underline-offset: 3px; opacity: .85; }
#depart[hidden], #depart.cache { display: none; }
body.enregistrement #commandes, body.enregistrement #depart { display: none; }
@media (prefers-reduced-motion: reduce) { .nuage, .vague, #helice, .bouge-a, .bouge-b, .bouge-c, .ile.actuelle .terre { animation: none; } }

/* scène de maloya : musiciens qui battent la mesure, danseuses qui tournent doucement */
.jeu-g { animation: pulse calc(var(--beat, .6s) * 2) ease-in-out infinite; transform-origin: 50% 100%; }
.jeu-d { animation: tourne-danse calc(var(--beat, .6s) * 4) ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tourne-danse { from { transform: translateY(0) rotate(-1.4deg); } to { transform: translateY(-9px) rotate(1.4deg); } }
@media (prefers-reduced-motion: reduce) { .jeu-g, .jeu-d { animation: none; } }