/* ============================================================
   KreomnisCraft - Le site des enfants
   Design « Minecraft joyeux » : ciel bleu, blocs biseautés,
   boutons pierre/bois, couleurs vives, gros éléments cliquables.
   ============================================================ */

:root {
  --ciel-haut: #7ec8f5;
  --ciel-bas: #bfe8ff;
  --herbe: #6cc24a;
  --herbe-fonce: #4e9a35;
  --terre: #8a5a33;
  --terre-fonce: #6b4426;
  --terre-claire: #a8703f;
  --pierre: #9d9d9d;
  --pierre-claire: #c6c6c6;
  --pierre-fonce: #6f6f6f;
  --bois: #b8894f;
  --bois-fonce: #8a6234;
  --encre: #2b2418;
  --creme: #fff6e3;
  --or: #ffcc33;
  --diamant: #4fd6d6;
  --panneau: #d7c9a8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Nunito", "Segoe UI", "Comic Sans MS", sans-serif;
  font-size: 17px;
  color: var(--encre);
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 60%, #e8f7ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, .pixel {
  font-family: "Press Start 2P", "Courier New", monospace;
  line-height: 1.5;
}

img { max-width: 100%; }

/* ---------- Nuages flottants ---------- */
.nuages { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.nuage {
  position: absolute;
  width: 140px; height: 44px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 24px -16px 0 6px #fff, 60px -6px 0 10px #fff, 90px -14px 0 2px #fff;
  opacity: .85;
  animation: derive linear infinite;
}
.nuage:nth-child(1) { top: 8%;  animation-duration: 70s; }
.nuage:nth-child(2) { top: 22%; animation-duration: 95s;  animation-delay: -30s; transform: scale(.7); }
.nuage:nth-child(3) { top: 40%; animation-duration: 120s; animation-delay: -60s; transform: scale(1.2); opacity: .6; }
.nuage:nth-child(4) { top: 62%; animation-duration: 150s; animation-delay: -20s; transform: scale(.5); opacity: .5; }
@keyframes derive {
  from { left: -260px; }
  to   { left: 110vw; }
}

/* Soleil pixel */
.soleil {
  position: fixed; top: 26px; right: 40px;
  width: 74px; height: 74px;
  background: var(--or);
  box-shadow: 0 0 0 8px rgba(255, 214, 82, .55), 0 0 60px 20px rgba(255, 214, 82, .5);
  z-index: 0;
  animation: tourne-doux 24s linear infinite;
}
@keyframes tourne-doux { to { transform: rotate(360deg); } }

/* ---------- Structure ---------- */
.contenu { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 18px 80px; }

/* ---------- Bordure "bloc" biseautée (façon bouton Minecraft) ---------- */
.mc-bloc {
  border: 4px solid;
  border-color: #ffffffaa #00000055 #00000055 #ffffffaa;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
  border-radius: 4px;
}

/* ---------- En-tête : panneau de bois à frange d'herbe ---------- */
header.banniere {
  margin: 26px 0 30px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)),
    repeating-linear-gradient(90deg, #b8894f 0 90px, #ad7d45 90px 180px);
  border: 5px solid #5f4222;
  border-radius: 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.28), inset 0 0 0 3px #d9b077;
  padding: 52px 22px 30px;
  text-align: center;
  color: var(--creme);
}
/* frange d'herbe : bandeau vert + festons arrondis */
header.banniere::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background: linear-gradient(180deg, #9be070, #5aa93e);
}
header.banniere::after {
  content: ""; position: absolute; top: 26px; left: 0; right: 0; height: 14px;
  background: radial-gradient(circle at 50% 0, #5aa93e 7px, transparent 8px) 0 0/24px 14px repeat-x;
}
header.banniere h1 {
  margin: 8px 0 12px;
  font-size: clamp(18px, 4vw, 36px);
  color: #fff;
  text-shadow: 3px 3px 0 #3f2c17, 6px 6px 0 rgba(0,0,0,.18);
}
header.banniere .splash {
  display: inline-block;
  font-size: clamp(9px, 1.4vw, 13px);
  color: #ffe94d;
  text-shadow: 2px 2px 0 #3f2c17;
  transform: rotate(-8deg);
  animation: pulse-splash 1.6s ease-in-out infinite;
  margin-left: 10px;
  vertical-align: middle;
}
@keyframes pulse-splash { 50% { transform: rotate(-8deg) scale(1.14); } }
header.banniere .sous-titre {
  margin: 0 auto;
  max-width: 640px;
  font-weight: 800;
  font-size: 18px;
  text-shadow: 1px 1px 0 #3f2c17;
}
.badges-banniere {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 16px;
}
.badges-banniere span {
  background: rgba(0, 0, 0, .28);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 20px;
  padding: 5px 13px;
  font-weight: 900;
  font-size: 14px;
}
.rejoindre { margin-top: 16px; }
.btn-discord {
  display: inline-block;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg, #7b8ff0, #5865f2 55%, #414ec7);
  border: 4px solid;
  border-color: #c3ccff #2c3487 #2c3487 #c3ccff;
  border-radius: 8px;
  padding: 15px 22px;
  box-shadow: 0 6px 0 #232a6e;
  transition: transform .1s;
}
.btn-discord:hover { transform: scale(1.06) rotate(-1deg); }
.btn-discord:active { transform: translateY(3px); box-shadow: 0 2px 0 #232a6e; }
.lien-discord { color: #c3ccff; font-weight: 900; }

.decor-banniere {
  position: absolute; bottom: 12px;
  width: 88px;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.25));
  animation: bob 3.2s ease-in-out infinite;
  pointer-events: none;
}
.decor-banniere.gauche { left: 30px; }
.decor-banniere.droite { right: 30px; animation-delay: .8s; }
@keyframes bob { 50% { transform: translateY(-9px); } }
.mascotte {
  width: 120px;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.3));
  cursor: pointer;
  transition: transform .15s;
}
.mascotte:hover { transform: scale(1.08) rotate(-3deg); }
.mascotte.saute { animation: saute .5s; }
@keyframes saute {
  30% { transform: translateY(-24px) rotate(6deg) scale(1.1); }
  60% { transform: translateY(0) scale(.95); }
}

/* ---------- Barre de navigation "hotbar" ---------- */
nav.hotbar {
  position: sticky; top: 10px; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: rgba(30, 30, 30, .82);
  padding: 10px;
  border: 3px solid #000;
  outline: 3px solid #8b8b8b;
  border-radius: 6px;
  margin-bottom: 40px;
}
nav.hotbar button {
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, #8f8f8f, #6f6f6f);
  border: 3px solid;
  border-color: #cfcfcf #3a3a3a #3a3a3a #cfcfcf;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .08s;
}
nav.hotbar button:hover { background: linear-gradient(180deg, #a5d97e, #6cc24a); transform: translateY(-2px); }
nav.hotbar button.actif {
  background: linear-gradient(180deg, #a5d97e, var(--herbe-fonce));
  border-color: #e7ffd2 #2f5e1f #2f5e1f #e7ffd2;
}
nav.hotbar button:active { transform: translateY(2px); }

/* ---------- Bouton musique ---------- */
.btn-musique {
  position: fixed; bottom: 20px; right: 20px; z-index: 30;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #ffd970, var(--or));
  border: 4px solid;
  border-color: #fff2c4 #8a6d12 #8a6d12 #fff2c4;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
}
.btn-musique:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }

/* ---------- Héros (accueil) ---------- */
.heros { text-align: center; }
.heros .panorama {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.heros .cadre-panorama {
  position: relative;
  overflow: hidden;
  margin-bottom: 26px;
}
.heros .cadre-panorama .legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff; font-weight: 900; font-size: 20px;
  text-shadow: 2px 2px 0 #000;
}
/* Bloc d'herbe à miner (easter egg) */
.coin-mine { margin: 26px auto 0; width: 150px; position: relative; }
.coin-mine img { width: 150px; cursor: pointer; transition: transform .08s; }
.coin-mine img:active { transform: scale(.9) rotate(3deg); }
.coin-mine .astuce { font-size: 13px; font-weight: 800; opacity: .75; }

/* ---------- Sections ---------- */
section.page { display: none; animation: apparait .35s; }
section.page.visible { display: block; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.titre-section {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 6px 0 8px;
  font-size: clamp(15px, 3vw, 22px);
  text-align: center;
  color: #234718;
  text-shadow: 2px 2px 0 #ffffffaa;
}
.intro-section {
  text-align: center; font-weight: 800; font-size: 18px;
  max-width: 700px; margin: 0 auto 28px;
}

/* ---------- Grilles de cartes ---------- */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}
.grille.large { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.carte {
  background: linear-gradient(180deg, #efe3c2, var(--panneau));
  border: 4px solid;
  border-color: #fffbe9 #7a6a45 #7a6a45 #fffbe9;
  border-radius: 6px;
  box-shadow: 0 6px 0 rgba(0,0,0,.22);
  padding: 14px 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s;
  position: relative;
}
.carte:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 12px 0 rgba(0,0,0,.18); }
.carte:active { transform: translateY(0); }
.carte .visuel {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.grille.large .carte .visuel { height: 150px; }
.carte .visuel img {
  max-height: 100%;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,.18));
  transition: transform .15s;
}
.carte:hover .visuel img { transform: scale(1.1); }
.carte .visuel .substitut {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.2));
}
.carte h3 { font-size: 11px; margin: 0 0 6px; color: #4a3413; }
.carte p { margin: 0; font-size: 14px; font-weight: 700; opacity: .85; }

/* Badges de stats mobs */
.stats-mob { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.badge {
  font-size: 12px; font-weight: 900;
  background: #fff; border: 2px solid rgba(0,0,0,.25);
  border-radius: 20px; padding: 3px 10px;
}
.badge.pv { color: #d33; }
.badge.deg { color: #7a4df0; }

/* Rareté minerais */
.rarete { font-family: "Press Start 2P", monospace; font-size: 10px; margin-top: 8px; }

/* ---------- Onglets du bestiaire ---------- */
.onglets-mobs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.onglets-mobs button {
  font-weight: 900; font-size: 14px;
  font-family: "Nunito", sans-serif;
  padding: 10px 14px;
  background: linear-gradient(180deg, #cbb489, var(--bois));
  border: 3px solid;
  border-color: #f1e0bd #6b4a24 #6b4a24 #f1e0bd;
  border-radius: 6px;
  cursor: pointer;
  color: #3d2a10;
}
.onglets-mobs button.actif { background: linear-gradient(180deg, #8ad964, var(--herbe-fonce)); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.onglets-mobs button:active { transform: translateY(2px); }

/* ---------- Fenêtre de détail (modale) ---------- */
.voile {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 24, 36, .6);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.voile.visible { display: flex; }
.fiche {
  background: linear-gradient(180deg, #efe3c2, var(--panneau));
  border: 5px solid;
  border-color: #fffbe9 #7a6a45 #7a6a45 #fffbe9;
  border-radius: 8px;
  box-shadow: 0 12px 0 rgba(0,0,0,.35);
  max-width: 430px; width: 100%;
  padding: 24px;
  text-align: center;
  animation: pop-fiche .25s;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes pop-fiche {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.fiche img { max-height: 240px; filter: drop-shadow(0 8px 0 rgba(0,0,0,.18)); }
.fiche .substitut { font-size: 120px; line-height: 1.2; }
.fiche h3 { font-size: 15px; color: #4a3413; margin: 14px 0 10px; }
.fiche p { font-size: 17px; font-weight: 800; }
.fiche .fermer {
  margin-top: 14px;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #ff8f8f, #d94f4f);
  color: #fff;
  border: 4px solid;
  border-color: #ffd2d2 #7a2323 #7a2323 #ffd2d2;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 5px 0 #5e1b1b;
}
.fiche .fermer:active { transform: translateY(3px); box-shadow: 0 2px 0 #5e1b1b; }

/* ---------- Particules (confettis / débris de minage) ---------- */
.particule {
  position: fixed; z-index: 50;
  width: 12px; height: 12px;
  pointer-events: none;
  animation: tombe 1.1s ease-in forwards;
}
@keyframes tombe {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to   { transform: translateY(46vh) rotate(540deg); opacity: 0; }
}

/* ---------- Pied de page : le sol et ses habitants ---------- */
footer {
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)),
    linear-gradient(180deg, var(--terre-claire), var(--terre) 45%, var(--terre-fonce));
  border: 5px solid #5f4222;
  border-radius: 14px;
  box-shadow: 0 8px 0 rgba(0,0,0,.25), inset 0 0 0 3px #d9b077;
  color: var(--creme);
  font-weight: 800;
  padding: 46px 20px 22px;
}
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: linear-gradient(180deg, #9be070, #5aa93e);
}
footer::after {
  content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 13px;
  background: radial-gradient(circle at 50% 0, #5aa93e 6px, transparent 7px) 0 0/22px 13px repeat-x;
}
footer .copains { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin: 4px 0 12px; }
footer .copains img {
  height: 64px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.25));
  animation: bob 3s ease-in-out infinite;
  transition: transform .15s;
}
footer .copains img:hover { transform: scale(1.18) rotate(-4deg); }
footer .copains img:nth-child(2) { animation-delay: .3s; }
footer .copains img:nth-child(3) { animation-delay: .6s; }
footer .copains img:nth-child(4) { animation-delay: .9s; }
footer .copains img:nth-child(5) { animation-delay: 1.2s; }
footer .coeur-footer { font-size: 17px; }
footer .pixel { font-size: 10px; color: #ffe94d; margin-top: 6px; }
footer .fleurs { font-size: 20px; letter-spacing: 10px; margin-top: 10px; }

/* ---------- Accueil : grille des catégories ---------- */
.lien-titre { color: inherit; text-decoration: none; }
.carte-categorie { display: block; text-decoration: none; color: inherit; }
.carte-categorie h3 { font-size: 12px; }

/* ---------- Page de catégorie ---------- */
.entete-page { text-align: center; margin-bottom: 22px; position: relative; }
.entete-page .icone-page img, .entete-page .icone-page .substitut {
  height: 110px; font-size: 80px;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.2));
}
.btn-retour {
  display: inline-block;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
  background: linear-gradient(180deg, #8ad964, var(--herbe-fonce));
  border: 4px solid;
  border-color: #d8ffbe #2f5e1f #2f5e1f #d8ffbe;
  border-radius: 6px;
  box-shadow: 0 5px 0 #234718;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.btn-retour:active { transform: translateY(3px); box-shadow: 0 2px 0 #234718; }

.bloc-texte {
  background: linear-gradient(180deg, #efe3c2, var(--panneau));
  border-color: #fffbe9 #7a6a45 #7a6a45 #fffbe9;
  border-radius: 6px;
  padding: 20px 26px;
  margin: 0 auto 22px;
  max-width: 850px;
  font-size: 17px;
  font-weight: 700;
}
.bloc-texte h3 {
  font-size: 14px;
  color: #4a3413;
  margin: 0 0 12px;
  text-align: center;
}
.bloc-texte ul { padding-left: 8px; list-style: none; }
.bloc-texte li { margin: 8px 0; }
.bloc-texte a { color: #2a7d3f; font-weight: 900; }
.bloc-texte code, .details-fiche code {
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  background: #2b2418;
  color: #8ad964;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
/* ---------- Page joueurs (données en direct) ---------- */
.barre-joueurs { text-align: center; margin-bottom: 18px; }
#cherche-joueur {
  font: inherit;
  font-weight: 800;
  color: var(--encre);
  padding: 12px 18px;
  width: min(420px, 100%);
  border: 4px solid;
  border-color: #fffbe9 #7a6a45 #7a6a45 #fffbe9;
  border-radius: 8px;
  background: #fff8e6;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
  outline: none;
}
#cherche-joueur:focus { border-color: #8ad964 #2f5e1f #2f5e1f #8ad964; }
.carte-joueur .avatar {
  width: 84px; height: 84px;
  border-radius: 10px;
  image-rendering: pixelated;
  border: 3px solid #7a6a45;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.avatar-fiche { image-rendering: pixelated; max-height: 160px; }

/* ---------- Tables de craft (recettes des baguettes) ---------- */
.grille-crafts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}
.table-craft {
  background: linear-gradient(180deg, #cfcfcf, #a8a8a8);
  border-color: #ececec #565656 #565656 #ececec;
  border-radius: 6px;
  padding: 16px 12px;
  text-align: center;
}
.table-craft h4 {
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  margin: 0 0 14px;
  color: #2b2b2b;
}
.craft-ligne { display: flex; align-items: center; justify-content: center; gap: 14px; }
.craft-grille {
  display: grid;
  grid-template-columns: repeat(3, 62px);
  grid-auto-rows: 62px;
  gap: 4px;
}
.craft-case {
  background: #8b8b8b;
  border: 3px solid;
  border-color: #373737 #ffffff #ffffff #373737;
  display: flex; align-items: center; justify-content: center;
}
.craft-case img { max-width: 50px; max-height: 50px; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.25)); }
.craft-fleche { font-size: 34px; color: #444; }
.craft-resultat {
  width: 88px; height: 88px; flex: none;
  background: #8b8b8b;
  border: 3px solid;
  border-color: #373737 #ffffff #ffffff #373737;
  display: flex; align-items: center; justify-content: center;
}
.craft-resultat img { max-width: 76px; max-height: 76px; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.3)); }
.craft-case .substitut, .craft-resultat .substitut { font-size: 26px; }
@media (max-width: 460px) {
  .craft-grille { grid-template-columns: repeat(3, 50px); grid-auto-rows: 50px; }
  .craft-case img { max-width: 40px; max-height: 40px; }
  .craft-resultat { width: 66px; height: 66px; }
}

/* Bloc « commandes utiles » */
.commandes {
  background: #2b2418;
  border-radius: 8px;
  border: 3px solid #4a3d28;
  padding: 14px 18px;
  color: #efe3c2;
}
.commandes h4 {
  margin: 0 0 10px;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  color: #8ad964;
}
.commandes ul { margin: 0; padding-left: 6px; list-style: none; }
.commandes li { margin: 7px 0; }
.commandes code { background: #171310; }

.titre-galerie {
  font-size: 15px;
  text-align: center;
  color: #234718;
  text-shadow: 2px 2px 0 #ffffffaa;
  margin: 34px 0 16px;
}

/* Capacités sur les cartes de mobs */
.carte .ligne-cap {
  font-size: 13px;
  font-weight: 800;
  background: #fff8e6;
  border: 2px dashed #c9b382;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 8px;
  text-align: left;
}

/* Détails dans les fiches modales */
.details-fiche {
  text-align: left;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
}
.ligne-fiche {
  background: #fff8e6;
  border: 2px solid #d8c69a;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
}
.ligne-fiche .etiquette { font-weight: 900; color: #7a5a1e; }
.ligne-fiche .sig { color: #d9a514; font-weight: 900; }
.ligne-fiche ul { margin: 6px 0 0; padding-left: 20px; }
.ligne-fiche li { margin: 5px 0; }
.fiche { max-width: 520px; }

@media (max-width: 780px) {
  .decor-banniere { display: none; }
}
@media (max-width: 640px) {
  .soleil { display: none; }
  .bloc-texte { padding: 16px; }
  footer .copains img { height: 46px; }
}