/* ferme/graphismes.css — habillage visuel de la Ferme des Nombres (23/10/2026).
   Uniquement de l'apparence : aucune règle du jeu ici. Chargé APRÈS le <style>
   de index.html, il le surcharge. Effets animés coupés si l'élève a demandé
   moins d'animations (prefers-reduced-motion). */

/* ── Ciel et campagne ─────────────────────────────────────────────── */
body{
  background:linear-gradient(180deg,#72bbe8 0%,#ade0f4 22%,#e2f4ea 40%,#d3eab0 41%,#bfdc93 100%);
}
.skylayer{height:56vh; min-height:300px}
.sun{animation:fe-soleil 7s ease-in-out infinite}
.sun::before{
  content:""; position:absolute; inset:-70px; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,238,170,.30) 0 5deg, transparent 5deg 16deg);
  -webkit-mask:radial-gradient(circle, #000 30%, transparent 68%);
          mask:radial-gradient(circle, #000 30%, transparent 68%);
  animation:fe-rayons 80s linear infinite;
}
@keyframes fe-soleil{50%{box-shadow:0 0 74px 28px rgba(255,220,120,.62)}}
@keyframes fe-rayons{to{transform:rotate(360deg)}}

.cloud{animation:fe-nuage 150s linear infinite}
.cloud.c2{animation-duration:200s; animation-delay:-70s}
.cloud.c3{animation-duration:240s; animation-delay:-150s}
@keyframes fe-nuage{from{transform:translateX(-40vw)}to{transform:translateX(115vw)}}

.fe-decor{position:absolute; left:0; right:0; bottom:0; width:100%; height:62%; pointer-events:none}
.fe-pales{transform-box:fill-box; transform-origin:center; animation:fe-moulin 9s linear infinite}
@keyframes fe-moulin{to{transform:rotate(360deg)}}
.fe-oiseau{animation:fe-vol 38s linear infinite}
.fe-oiseau.o2{animation-duration:52s; animation-delay:-20s}
@keyframes fe-vol{from{transform:translate(-10%,0)}50%{transform:translate(55%,-6%)}to{transform:translate(115%,2%)}}
.fe-aile{transform-box:fill-box; transform-origin:center bottom; animation:fe-battement .5s ease-in-out infinite alternate}
@keyframes fe-battement{to{transform:scaleY(.4)}}

/* ── Enseigne en planches ─────────────────────────────────────────── */
header{
  background:
    radial-gradient(circle at 14px 14px, #5b3a1c 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #5b3a1c 0 3px, transparent 3.5px),
    radial-gradient(circle at 14px calc(100% - 14px), #5b3a1c 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #5b3a1c 0 3px, transparent 3.5px),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 21px, rgba(60,32,12,.35) 21px 23px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, rgba(0,0,0,.03) 3px 7px),
    linear-gradient(160deg,#c98a52,#9e5f35);
  border-color:#6b4022;
}
.pill.coin{background:linear-gradient(180deg,#fff7d6,#ffe9a3); border-color:#e2b84a}
.pill.water{background:linear-gradient(180deg,#eefaff,#cdeefc); border-color:#8ccbe6}
.pill.fe-tilt{animation:fe-tilt .5s ease}
@keyframes fe-tilt{25%{transform:rotate(-4deg) scale(1.08)}75%{transform:rotate(3deg) scale(1.05)}}

/* ── Champ clôturé ───────────────────────────────────────────────── */
.grid{
  border:0; padding:14px; border-radius:16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 1.5px, transparent 2.5px) 0 0/22px 22px,
    radial-gradient(circle at 70% 65%, rgba(50,100,25,.28) 0 1.5px, transparent 2.5px) 0 0/17px 17px,
    linear-gradient(160deg,#a6d27a,#7fb556);
  box-shadow:
    0 0 0 5px #b07a48, 0 0 0 7px #7d532e, 0 0 0 10px #b07a48, 0 0 0 12px #6b4426,
    0 14px 28px rgba(60,40,10,.35), inset 0 0 22px rgba(40,70,20,.35);
}
.plot{border-radius:12px}

/* Terre labourée : sillons + relief */
.plot.empty, .plot.crop{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(60,30,10,.25), transparent 60%),
    repeating-radial-gradient(ellipse 140% 40% at 50% -10%, #d9b585 0 7px, #c79d6b 7px 9px, #d9b585 9px 15px),
    #d4ad7c;
  box-shadow:inset 0 0 0 2px rgba(110,70,30,.35), inset 0 -6px 10px rgba(80,45,15,.18), inset 0 3px 5px rgba(255,240,210,.35);
}

/* Prairie à vendre */
.plot.locked{
  background:
    radial-gradient(circle at 25% 30%, #ffffff 0 1.6px, transparent 2.2px) 0 0/27px 27px,
    radial-gradient(circle at 62% 72%, #f6d34a 0 1.7px, transparent 2.3px) 0 0/31px 31px,
    radial-gradient(circle at 82% 18%, #ea7396 0 1.5px, transparent 2.1px) 0 0/35px 35px,
    repeating-linear-gradient(100deg, rgba(50,100,25,.20) 0 2px, transparent 2px 6px),
    linear-gradient(160deg,#94c46e,#6fa64c);
  filter:saturate(.7) brightness(.93);
  box-shadow:inset 0 0 0 2px rgba(40,80,20,.25);
}
.plot.locked.afford{filter:none}
.plot.locked.afford:hover{box-shadow:0 0 0 3px #f2c94c, 0 10px 16px rgba(40,30,10,.3)}
.fe-panneau{position:absolute; left:50%; top:46%; width:70%; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.plot.locked:not(.afford) .fe-panneau{opacity:.8}
.plot.locked .price{background:rgba(255,248,226,.92); color:#6b4a14; font-size:.66em}
.plot.locked.afford .price{background:#ffe9a3; color:#5c3d00; box-shadow:0 0 0 1px #e2b84a}

/* Enclos : paille + palissade */
.plot.pencell{
  background:
    repeating-linear-gradient(35deg, rgba(150,110,30,.28) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-30deg, rgba(255,240,190,.35) 0 1px, transparent 1px 9px),
    linear-gradient(160deg,#efd89d,#d4b06a);
  box-shadow:inset 0 0 0 4px #9c6c40, inset 0 0 0 6px #c99a62, inset 0 0 0 7px #7d532e;
}

/* ── Vie : vent, bêtes, maturité ─────────────────────────────────── */
.cropart svg{transform-origin:50% 84%; animation:fe-vent 3.4s ease-in-out infinite; animation-delay:var(--fe-d,0s)}
@keyframes fe-vent{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.8deg)}}
.plot.pencell .animalspot svg{animation:fe-bete 2.8s ease-in-out infinite; animation-delay:var(--fe-d,0s)}
.plot.pencell .animalspot:nth-child(2n) svg{animation-duration:3.3s}
.plot.pencell .animalspot:nth-child(3n) svg{animation-duration:2.4s}
@keyframes fe-bete{0%,100%{transform:translateY(0)}30%{transform:translateY(-2px)}60%{transform:translate(1px,0) scaleX(1.03)}}

.plot.mature{animation:fe-mur 2.2s ease-in-out infinite}
@keyframes fe-mur{50%{box-shadow:inset 0 0 0 3px #f2c94c, 0 0 18px 4px rgba(242,201,76,.85)}}
.plot.mature::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 22% 30%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 24%, #fff7c2 0 2px, transparent 3px),
    radial-gradient(circle at 60% 62%, #fff 0 1.2px, transparent 2.2px);
  animation:fe-scintille 1.8s ease-in-out infinite;
}
@keyframes fe-scintille{0%,100%{opacity:.15}50%{opacity:1}}
.plot .harvest{background:linear-gradient(180deg,#ffe58a,#f2c94c); animation:fe-saute 1.6s ease-in-out infinite}
@keyframes fe-saute{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ── Bâtiments ───────────────────────────────────────────────────── */
.scenerow.fe-scene{gap:4px; align-items:flex-end}
.scenerow.fe-scene svg{filter:drop-shadow(0 5px 3px rgba(50,70,30,.22))}
.fe-fumee{animation:fe-fumee 4s ease-in-out infinite}
@keyframes fe-fumee{0%{transform:translate(0,4px);opacity:.2}50%{opacity:1}100%{transform:translate(4px,-8px);opacity:0}}
.fe-poule-deco{width:40px; margin-left:-4px; animation:fe-bete 2.6s ease-in-out infinite}
.fe-poule-deco svg{width:100%; display:block}
.plot.pencell .fe-batiment{position:absolute; left:3px; top:3px; width:38%; z-index:0; pointer-events:none}
.plot.pencell .fe-batiment-seul{left:50%; top:50%; width:72%; transform:translate(-50%,-56%)}
.plot.pencell .fe-batiment svg{width:100%; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.plot.pencell .penicon{z-index:1}

/* ── Effets de jeu (créés par graphismes.js) ─────────────────────── */
.fe-gain{
  position:fixed; z-index:70; pointer-events:none; font-weight:900; font-size:1.25em;
  color:#fff6c8; text-shadow:0 2px 0 #9a6a10, 0 0 10px rgba(255,200,60,.9);
  animation:fe-monte 1.3s ease-out forwards;
}
.fe-gain.perte{color:#ffe1d8; text-shadow:0 2px 0 #9a3a20, 0 0 8px rgba(255,120,80,.7); font-size:1em}
@keyframes fe-monte{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{transform:translate(-50%,-10px) scale(1.15);opacity:1}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.fe-piece{
  position:fixed; z-index:69; width:18px; height:18px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #fff5c0, #f2c94c 55%, #b8860b);
  box-shadow:0 0 6px rgba(255,200,60,.8);
  transition:transform .75s cubic-bezier(.5,-.3,.6,1), opacity .2s .62s;
}
.fe-eclat{
  position:fixed; z-index:69; pointer-events:none; width:7px; height:7px; border-radius:50%;
  animation:fe-eclat .8s ease-out forwards;
}
@keyframes fe-eclat{to{transform:translate(var(--fe-x),var(--fe-y)) scale(.2); opacity:0}}
.plot.fe-pousse{animation:fe-pousse .55s ease}
@keyframes fe-pousse{40%{transform:scale(1.08)}}

.btn.fe-son{font-size:.85em}

@media (prefers-reduced-motion: reduce){
  .sun, .sun::before, .cloud, .fe-pales, .fe-fumee, .fe-poule-deco, .fe-oiseau, .fe-aile,
  .cropart svg, .plot.pencell .animalspot svg, .plot.mature, .plot.mature::after, .plot .harvest,
  .plot.fe-pousse, .pill.fe-tilt{animation:none}
}