/* Vies sauvages — V3 : thèmes « jungle » (tigre) et « banquise » (pingouin empereur), panorama d'accueil,
   cartes Asie / Afrique / Antarctique, animations des nouveaux décors. Chargé après style.css et v2.css. */

/* ---------- Thème jungle ---------- */
body[data-espece="jungle"] { --fond: #f3efe2; --fond2: #e6e4cf; --carte: #fbf9f0; --texte: #1f2a1f; --doux: #5d6650; --bord: #d9d6bb;
  --accent: #c8641a; --accent-fort: #8a420e; --accent-doux: #f1dfc2; --or: #d9952b; }
/* ---------- Thème banquise ---------- */
body[data-espece="banquise"] { --fond: #eef5fa; --fond2: #dceaf3; --carte: #fbfdff; --texte: #13202e; --doux: #52657a; --bord: #c9dbe8;
  --accent: #2f6f9e; --accent-fort: #1b4a70; --accent-doux: #d6e8f5; --or: #f2b134; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-espece="jungle"] { --fond: #0f1612; --fond2: #16201a; --carte: #18231c; --texte: #ecefe2; --doux: #a3ad96; --bord: #2b3a2f;
    --accent: #e8913f; --accent-fort: #f5b77a; --accent-doux: #2f2a17; --or: #e7b04d; }
  :root:not([data-theme="light"]) body[data-espece="banquise"] { --fond: #0b1626; --fond2: #122239; --carte: #142740; --texte: #eaf2f9; --doux: #9db1c6; --bord: #24395a;
    --accent: #6fb6e6; --accent-fort: #a8d4f2; --accent-doux: #1c3150; --or: #f2b134; }
}
:root[data-theme="dark"] body[data-espece="jungle"] { --fond: #0f1612; --fond2: #16201a; --carte: #18231c; --texte: #ecefe2; --doux: #a3ad96; --bord: #2b3a2f;
  --accent: #e8913f; --accent-fort: #f5b77a; --accent-doux: #2f2a17; --or: #e7b04d; }
:root[data-theme="dark"] body[data-espece="banquise"] { --fond: #0b1626; --fond2: #122239; --carte: #142740; --texte: #eaf2f9; --doux: #9db1c6; --bord: #24395a;
  --accent: #6fb6e6; --accent-fort: #a8d4f2; --accent-doux: #1c3150; --or: #f2b134; }

/* ---------- Thème forêt (loup gris) : pins, ardoise et ambre ---------- */
body[data-espece="foret"] { --fond: #eef0ea; --fond2: #dfe4d9; --carte: #f9faf6; --texte: #1b2420; --doux: #56625a; --bord: #cfd6cb;
  --accent: #3f6a7a; --accent-fort: #24485a; --accent-doux: #d8e6ea; --or: #c0883a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-espece="foret"] { --fond: #0d1214; --fond2: #141c1e; --carte: #172124; --texte: #e8eeec; --doux: #9fb0aa; --bord: #263438;
    --accent: #7fb0c0; --accent-fort: #b4d6e0; --accent-doux: #1c2c32; --or: #e0a850; }
}
:root[data-theme="dark"] body[data-espece="foret"] { --fond: #0d1214; --fond2: #141c1e; --carte: #172124; --texte: #e8eeec; --doux: #9fb0aa; --bord: #263438;
  --accent: #7fb0c0; --accent-fort: #b4d6e0; --accent-doux: #1c2c32; --or: #e0a850; }
body[data-espece="foret"] .jauge .rempli { background: linear-gradient(90deg, #4f7a5a, var(--or)); }
body[data-espece="foret"] .jauge.bas .rempli { background: var(--danger); }
body[data-espece="foret"] .scene { background: #1a2420; }
body[data-espece="foret"] .svg-carte .terre { fill: #c9c6a4; stroke: #9a9570; }
/* Carte des Grands Lacs (gorille) : frontières et volcans */
.svg-carte .frontiere { fill: none; stroke: #8a7a5a; stroke-width: .8; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; opacity: .8; }
.svg-carte .volcan { fill: #6a5a4a; }

/* Jauges : dégradé propre à chaque thème (la quatrième jauge du tigre est « territoire ») */
body[data-espece="jungle"] .jauge .rempli { background: linear-gradient(90deg, #3f7a45, var(--accent)); }
body[data-espece="banquise"] .jauge .rempli { background: linear-gradient(90deg, #6fb6e6, #f2b134); }
body[data-espece="jungle"] .jauge.bas .rempli, body[data-espece="banquise"] .jauge.bas .rempli { background: var(--danger); }
body[data-espece="jungle"] .scene { background: #1d2b2a; }
body[data-espece="banquise"] .scene { background: #1c3150; }

/* ---------- Accueil : panorama des cinq mondes ---------- */
.hero-illu:has(.panorama) { background: linear-gradient(90deg, #3b1d46 0 30%, #23392f 30% 54%, #0f5a7a 54% 76%, #0b1626 76%); }
.svg-accueil.panorama .aurore-voile { animation: aurore 14s ease-in-out infinite alternate; transform-origin: 700px 100px; }
.svg-accueil.panorama .liane { transform-box: fill-box; transform-origin: 50% 0; animation: liane 7s ease-in-out infinite alternate; }

/* ---------- Cartes du tirage ---------- */
.svg-carte .lac { fill: #3f86ad; stroke: none; }
.svg-carte .fleuve { fill: none; stroke: #4b93bd; stroke-width: .5; stroke-linecap: round; opacity: .9; }
.svg-carte .montagnes { fill: none; stroke: #f4f1ea; stroke-width: 1.4; stroke-dasharray: 1.6 1.2; stroke-linecap: round; opacity: .75; }
/* Encyclopédie : cartes à hauteur naturelle, cases verrouillées compactes */
.cartes-faits { align-items: start; }
.cartes-verrou { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 8px; }
.case-verrou { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--bord); border-radius: 10px; font-size: .85rem; opacity: .55; background: var(--carte); }

/* Points et noms à taille constante quel que soit le zoom : --k = 2 / zoom (posé par ui.js), 2 par défaut (carte non zoomée) */
.svg-carte .pin { transform: scale(calc(var(--k, 2) * 1.35)); transition: transform 1.8s cubic-bezier(.5, 0, .2, 1); }
.svg-carte .terre, .svg-carte .lac, .svg-carte .barriere { vector-effect: non-scaling-stroke; }
.svg-carte .fleuve { vector-effect: non-scaling-stroke; stroke-width: 1.1px; }
.svg-carte .montagnes { vector-effect: non-scaling-stroke; stroke-width: 2px; }
.svg-carte .etiquettes text { font: 700 6.6px/1 'Inter', system-ui, sans-serif; font-size: calc(6.6px * var(--k, 2)); fill: #2e2414; text-anchor: middle; letter-spacing: .02em;
  paint-order: stroke; stroke: rgba(255, 250, 236, .85); stroke-width: calc(1.6px * var(--k, 2)); stroke-linejoin: round;
  transition: font-size 1.8s cubic-bezier(.5, 0, .2, 1), stroke-width 1.8s cubic-bezier(.5, 0, .2, 1); }
.phase-acte .tirage-carte { max-width: 520px; }
body[data-espece="jungle"] .svg-carte .terre { fill: #c7c48a; stroke: #9a9560; }
.svg-carte.carte-antarctique .mer, .svg-carte.carte-arctique .mer { fill: #0e3a5c; }
.svg-carte.carte-antarctique .terre, .svg-carte.carte-arctique .terre { fill: #9a8a6a; stroke: #6e6048; }
.svg-carte.carte-antarctique .terre.glace, .svg-carte.carte-arctique .terre.glace { fill: #eef6fb; stroke: #b9d3e6; stroke-width: .8; }
.svg-carte.carte-antarctique .barriere { fill: #d6e8f5; stroke: #b9d3e6; stroke-width: .5; }
.svg-carte.carte-antarctique .graticule circle, .svg-carte.carte-antarctique .graticule line,
.svg-carte.carte-arctique .graticule circle, .svg-carte.carte-arctique .graticule line { stroke: rgba(255, 255, 255, .12); stroke-width: .6; }
.svg-carte.carte-antarctique .etiquettes text, .svg-carte.carte-arctique .etiquettes text { font: 600 7px/1 'Inter', system-ui, sans-serif; font-size: calc(6px * var(--k, 2)); fill: #9cc7e6; text-anchor: middle; letter-spacing: .04em; stroke: none; }
.svg-carte.carte-antarctique .point circle, .svg-carte.carte-arctique .point circle { stroke: #13202e; }
.svg-carte.carte-arctique .terre { fill: #8f8a72; }
.svg-carte.carte-arctique .mer { fill: #081a2c; }
.svg-carte.carte-arctique .disque { fill: #0e3a5c; stroke: #2a5a80; stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-carte.carte-arctique .banquise { fill: #eef6fb; opacity: .2; }

/* ---------- Animaux dessinés ---------- */
.perso.tigre { animation: none; }
.perso.tigre.lent .patte { animation-duration: 1.5s !important; }
.perso.tigre.couche .souffle { animation-duration: 2.2s; }
.perso.elephant .trompe { transform-box: fill-box; transform-origin: 10% 0; animation: trompe 5s ease-in-out infinite; }
.perso.elephant .oreille { transform-box: fill-box; transform-origin: 90% 30%; animation: oreille 4.2s ease-in-out infinite; }
.perso.elephant.marche .patte { animation-duration: 1.4s; }
.perso.pingouin.dandine { transform-box: fill-box; transform-origin: 50% 100%; animation: dandine .9s ease-in-out infinite alternate; }
.perso.pingouin .aileron { transform-box: fill-box; transform-origin: 50% 0; animation: aileron 4s ease-in-out infinite; }
.perso.pingouin .tete { transform-box: fill-box; transform-origin: 30% 90%; animation: tete-p 7s ease-in-out infinite; }
/* V5-V6 : la queue de la baleine bat lentement */
.perso.baleine .caudale { transform-box: fill-box; transform-origin: 100% 50%; animation: queue-baleine 4.5s ease-in-out infinite; }
@keyframes queue-baleine { 50% { transform: rotate(7deg); } }
.nageur { animation: nager 5s ease-in-out infinite; }
@keyframes trompe { 50% { transform: rotate(5deg); } }
@keyframes oreille { 0%, 70%, 100% { transform: none; } 80% { transform: scaleX(.9) rotate(-4deg); } 90% { transform: none; } }
@keyframes dandine { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes aileron { 50% { transform: rotate(8deg); } }
@keyframes tete-p { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-6deg); } }

/* ---------- Décors ---------- */
.aurore-voile { animation: aurore 12s ease-in-out infinite alternate; }
@keyframes aurore { 0% { opacity: .55; transform: translateX(0) skewX(0); } 50% { opacity: 1; } 100% { opacity: .7; transform: translateX(-14px) skewX(-4deg); } }
.bambous path { transform-box: fill-box; transform-origin: 50% 100%; animation: onduler 6s ease-in-out infinite alternate; }
@keyframes liane { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.eolienne { animation: tourne 6s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.essaim { animation: essaim 1.6s ease-in-out infinite alternate; }
@keyframes essaim { to { transform: translate(6px, -4px); } }
svg .flash { animation: flash 3.2s ease-out infinite; }
@keyframes flash { 0%, 80%, 100% { opacity: 0; } 84% { opacity: .9; } }
.ruisselle { stroke-dasharray: 4 6; animation: ruisselle 1.2s linear infinite; }
@keyframes ruisselle { to { stroke-dashoffset: -20; } }
.roule { transform-box: fill-box; transform-origin: center; animation: roule 3s ease-in-out infinite alternate; }
@keyframes roule { to { transform: translateX(4px) rotate(30deg); } }
.chaleur-tremble { animation: miroite 1.8s ease-in-out infinite; }
.notes { animation: monte-notes 4s ease-in-out infinite; }
@keyframes monte-notes { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
.houle { animation: houle-p 6s ease-in-out infinite alternate; }
@keyframes houle-p { to { transform: translate(-12px, 6px); } }
.calmar { animation: luciole 5s ease-in-out infinite; }
.plane { animation: plane 9s ease-in-out infinite alternate; }
@keyframes plane { to { transform: translate(-30px, 8px); } }
.yeux { animation: scintille 3s ease-in-out infinite; }
.eclabousse { animation: flotter 1.4s ease-in-out infinite; }
.voie-lactee { animation: miroite 9s ease-in-out infinite; }

/* ---------- Particules V3 ---------- */
.particules.mousson line { stroke: rgba(228, 238, 242, .7); stroke-width: 1; animation-name: mousson; animation-timing-function: linear; }
.particules.neige line { stroke: rgba(255, 255, 255, .85); animation-name: neige; animation-timing-function: linear; }
.particules.flocons circle { fill: #fff; animation-name: flocon; animation-timing-function: linear; }
.particules.feuilles ellipse { animation-name: feuille; animation-timing-function: ease-in-out; }
.particules.brume ellipse { fill: #fff; animation-name: brume; animation-timing-function: ease-in-out; animation-direction: alternate; }
.particules.aurore circle { animation-name: scintille; }
.particules.krill circle { fill: #ff9a8a; animation-name: luciole; }
.particules ellipse { animation-iteration-count: infinite; }
@keyframes mousson { from { transform: translate(0, -60px); } to { transform: translate(-14px, 220px); } }
@keyframes neige { from { transform: translateX(-60px); opacity: 0; } 15% { opacity: 1; } to { transform: translate(420px, 20px); opacity: .2; } }
@keyframes flocon { from { transform: translate(0, -30px); } 50% { transform: translate(8px, 90px); } to { transform: translate(-4px, 210px); } }
@keyframes feuille { from { transform: translate(0, -20px) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(30px, 200px) rotate(320deg); opacity: .2; } }
@keyframes brume { from { transform: translateX(-20px); } to { transform: translateX(30px); } }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .svg-carte .etiquettes text { font-size: calc(8px * var(--k, 2)); }
  .svg-carte.carte-antarctique .etiquettes text, .svg-carte.carte-arctique .etiquettes text { font-size: calc(7.5px * var(--k, 2)); }
}

/* ---------- Mouvement réduit : tout est figé (style.css coupe déjà les animations) ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurore-voile, .particules, .nageur, .perso, .eolienne, .flash { animation: none !important; }
  .particules.neige, .particules.mousson, .particules.flocons, .particules.feuilles { opacity: .55; }
  svg .flash { opacity: .2; }
}

/* ---------- Version gratuite : espèces verrouillées ---------- */
.segment .esp-verrou { all: unset; display: block; box-sizing: border-box; height: 100%; cursor: pointer; }
.segment .esp-verrou span { border-style: dashed; opacity: .62; }
.segment .esp-verrou:hover span { opacity: .85; transform: translateY(-2px); }
.segment .esp-verrou:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }