/* === LE VOYAGE : ANIMATIONS ET TEXTES DES CARTES DE LA MER ===
   Dessins communs (dessins-mer.js), carte des sagas (carte-mer.js, futur multijoueur) et carte des
   routes du solo (carte-routes.js, classes r-* dans style.css). */
.vg-carte-svg * { transform-box: fill-box; }
.m-vaguelette { fill: none; stroke: #d8f4ff; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: mVaguelette 5s ease-in-out infinite; transform-origin: center; }
@keyframes mVaguelette { 0%, 100% { opacity: 0; transform: translateX(-10px) scaleX(0.7); } 45% { opacity: 0.45; transform: translateX(6px) scaleX(1); } }
.m-eclat { fill: #fffbe0; opacity: 0; transform-origin: center; animation: mEclat 3.2s ease-in-out infinite; }
@keyframes mEclat { 0%, 70%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 82% { opacity: 0.95; transform: scale(1) rotate(45deg); } }
.m-ecume { transform-origin: center; animation: mEcume 4.5s ease-in-out infinite; }
@keyframes mEcume { 0%, 100% { transform: scale(0.97); opacity: 0.55; stroke-dashoffset: 0; } 50% { transform: scale(1.04); opacity: 0.95; stroke-dashoffset: 17; } }
.m-moulin { transform-origin: center; animation: mTourne 6s linear infinite; }
@keyframes mTourne { to { transform: rotate(360deg); } }
.m-flotte { animation: mFlotte 6s ease-in-out infinite; }
@keyframes mFlotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.m-tige { stroke-dasharray: 6 0; }
.m-brume { transform-origin: center; animation: mBrume 7s ease-in-out infinite; }
@keyframes mBrume { 0%, 100% { transform: translateX(-12px) scaleX(0.95); opacity: 0.55; } 50% { transform: translateX(12px) scaleX(1.05); opacity: 0.9; } }
.m-bulle { animation: mBulle 3.4s ease-in infinite; }
.m-bulle2 { animation-delay: -1.7s; }
@keyframes mBulle { 0% { transform: translateY(18px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
.m-cascade { stroke-dasharray: 8 6; animation: mCascade 0.6s linear infinite; }
@keyframes mCascade { to { stroke-dashoffset: 14; } }
.m-legende { font-family: 'Lilita One', sans-serif; font-size: 15px; fill: #ffe9c8; text-anchor: middle; paint-order: stroke; stroke: #3a0d06; stroke-width: 4px; letter-spacing: 0.04em; }

.m-route-halo { fill: none; stroke: rgba(4, 18, 42, 0.35); stroke-width: 9; stroke-linecap: round; }
.m-route-halo.ouverte { stroke: rgba(255, 224, 138, 0.28); stroke-width: 14; filter: blur(4px); animation: mHaloRoute 2.4s ease-in-out infinite; }
@keyframes mHaloRoute { 50% { stroke: rgba(255, 224, 138, 0.5); } }
.m-route { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.m-route.ouverte { stroke: #ffe08a; stroke-width: 4.5; stroke-dasharray: 10 9; animation: mPointilles 1.2s linear infinite; }
@keyframes mPointilles { to { stroke-dashoffset: -19; } }

.m-ile-dessin { transition: filter 0.6s; }
.m-ile.fermee .m-ile-dessin { filter: grayscale(0.55) brightness(0.7) saturate(0.8); opacity: 0.85; }
.m-ile-halo { opacity: 0.35; transform-origin: center; }
.m-ile.ici .m-ile-halo { animation: mHalo 3s ease-in-out infinite; }
@keyframes mHalo { 0%, 100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1.06); opacity: 1; } }
.m-grille path { stroke: #cfeaff; stroke-width: 1; opacity: 0.07; fill: none; }
.m-ile.ici .m-ile-dessin { animation: mIci 0.9s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes mIci { 40% { transform: scale(1.08); } }

.m-ruban { transform-box: view-box; }
.m-ruban-fond { fill: #f6e7c0; stroke: #8c5d16; stroke-width: 2; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35)); }
.m-ruban-bout { fill: #c99a3e; stroke: #8c5d16; stroke-width: 1.5; }
.m-ile-nom { font-family: 'Lilita One', sans-serif; font-size: 21px; fill: #4a2a0a; text-anchor: middle; }
.m-escale { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 15px; fill: #a3301f; text-anchor: middle; }
.m-nom-ferme { font-family: 'Lilita One', sans-serif; font-size: 17px; fill: rgba(255, 255, 255, 0.7); text-anchor: middle; paint-order: stroke; stroke: #071a38; stroke-width: 4px; }
.m-bientot { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 12px; fill: rgba(255, 233, 168, 0.65); text-anchor: middle; letter-spacing: 0.1em; paint-order: stroke; stroke: #071a38; stroke-width: 3px; }

.m-navire { transform-origin: 50% 90%; animation: mTangage 2.6s ease-in-out infinite; }
@keyframes mTangage { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-3px); } }
.m-pavillon { transform-origin: 0% 50%; animation: mPavillon 0.9s ease-in-out infinite alternate; }
@keyframes mPavillon { to { transform: scaleX(0.82) skewY(-6deg); } }
.m-sillage { opacity: 0.8; transform-origin: 100% 50%; animation: mSillage 1.6s ease-in-out infinite; }
@keyframes mSillage { 50% { transform: scaleX(1.15); opacity: 0.45; } }

.m-nuage { animation: mNuage linear infinite; transform-box: view-box; }
@keyframes mNuage { from { transform: translateX(calc(var(--x) - 200px)); } to { transform: translateX(1400px); } }
.m-mouette { animation: mMouette linear infinite; transform-box: view-box; }
@keyframes mMouette { from { transform: translate(-200px, 40px); } to { transform: translate(1400px, -60px); } }
.m-ailes { transform-origin: center; animation: mAiles 0.5s ease-in-out infinite alternate; }
@keyframes mAiles { to { transform: scaleY(-0.6); } }
.m-rose { opacity: 0.85; }
.m-rose > polygon, .m-rose > circle:nth-child(2) { transform-origin: 0 0; transform-box: view-box; }
.m-nord { font-family: 'Lilita One', sans-serif; font-size: 18px; fill: #ffe9a8; paint-order: stroke; stroke: #071a38; stroke-width: 4px; }

@media (prefers-reduced-motion: reduce) {
  .vg-carte-svg * { animation: none !important; }
}