/* ============================================================
   LA CHÂTAIGNERAIE — styles du jeu
   S'appuie sur /style.css (couleurs, polices, variables du site)
   ============================================================ */

body.j {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232, 196, 138, .22), transparent 60%),
    var(--color-neutral);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}
body.j-modal-ouverte { overflow: hidden; }

.j h1, .j h2, .j h3 { font-family: var(--font-title); font-weight: 600; color: var(--color-text); line-height: 1.15; }
.j h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.j h2 { font-size: 1.3rem; }
.j h3 { font-size: 1.1rem; }
.j p { margin: 0; }
.j b { font-weight: 600; }

.ic {
  width: 1.05em; height: 1.05em;
  flex: none;
  vertical-align: -.15em;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Petites étiquettes en IM Fell, comme sur le site */
.j-sur {
  display: block;
  font-family: var(--font-label);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--color-chestnut);
}

/* ---------- Barre du haut ---------- */

.j-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(59, 31, 14, .14);
  background: rgba(242, 233, 227, .9);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
.j-barre__site { display: flex; align-items: center; gap: .6rem; font-family: var(--font-label); font-size: .78rem; letter-spacing: .06em; line-height: 1.2; color: var(--color-text); }
.j-barre__site img { width: 46px; height: auto; }
.j-barre__titre { font-family: var(--font-title); font-style: italic; font-size: 1.25rem; color: var(--color-text); }
.j-barre__retour { justify-self: end; font-family: var(--font-label); font-size: .85rem; letter-spacing: .1em; color: var(--color-chestnut); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.j-barre__retour:hover { color: var(--color-text); }

/* ---------- Page ---------- */

.j-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 4rem;
}

/* ---------- En-tête du jeu ---------- */

.j-tete__haut {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(59, 31, 14, .14);
}
.j-tete__nom h1 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .15rem 0 .35rem; }
.j-nom { cursor: default; user-select: none; -webkit-user-select: none; }
.j-tete__infos { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: 1.05rem; color: var(--color-chestnut); }
.j-tete__infos > span { display: inline-flex; align-items: center; gap: .35rem; }
.j-tete__infos b { color: var(--color-text); font-weight: 600; }
.j-meteo { cursor: pointer; user-select: none; -webkit-user-select: none; }
.j-meteo:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.j-tete__compte { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; min-width: 220px; }
.j-niveau { width: 100%; max-width: 260px; }
.j-niveau .j-sur { margin-bottom: .3rem; text-align: right; }
.j-niveau .j-sur b { color: var(--color-text); font-family: var(--font-title); font-size: 1rem; letter-spacing: 0; }
.j-tete__btns { display: flex; align-items: center; gap: .3rem .9rem; flex-wrap: wrap; justify-content: flex-end; }
.j-pseudo { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-label); font-size: .88rem; letter-spacing: .06em; color: var(--color-leaf); }

.j-icone-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--color-chestnut);
  border: 1px solid rgba(149, 69, 53, .3);
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.j-icone-btn:hover { background: var(--color-chestnut); color: var(--color-neutral); }
.j-icone-btn .ic { width: 17px; height: 17px; }
.j h1 .j-icone-btn { width: 30px; height: 30px; border-color: transparent; }
.j h1 .j-icone-btn:hover { border-color: var(--color-chestnut); }

.j-lien {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-label); font-size: .9rem; letter-spacing: .08em;
  color: var(--color-chestnut);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding: .2rem 0;
}
.j-lien:hover { border-bottom-color: currentColor; }

.j-evenement {
  margin-top: .9rem;
  padding: .6rem 1rem;
  font-size: 1.05rem;
  border-left: 3px solid var(--color-leaf);
  background: rgba(42, 79, 33, .07);
}
.j-evenement.alerte { border-left-color: var(--color-chestnut); background: rgba(149, 69, 53, .08); }
.j-evenement.doree { border-left-color: #b88a2e; background: rgba(232, 196, 138, .28); }

/* Ressources */
.j-ressources {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 1.1rem 0 0;
  border-top: 1px solid rgba(59, 31, 14, .14);
  border-bottom: 1px solid rgba(59, 31, 14, .14);
}
.j-res { padding: .7rem .5rem; text-align: center; border-left: 1px solid rgba(59, 31, 14, .1); }
.j-res:first-child { border-left: 0; }
.j-res__val { display: block; font-family: var(--font-title); font-size: 1.45rem; font-weight: 600; color: var(--color-text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.j-res.argent .j-res__val { color: var(--color-chestnut); }
.j-res__nom { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-label); font-size: .78rem; letter-spacing: .1em; color: var(--color-light); }

/* ---------- Onglets ---------- */

.j-onglets {
  display: flex; gap: .2rem;
  margin: 1.2rem 0 1.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(59, 31, 14, .14);
}
.j-onglets::-webkit-scrollbar { display: none; }
.j-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem .9rem;
  font-family: var(--font-label); font-size: .95rem; letter-spacing: .06em;
  color: var(--color-light);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.j-tab:hover { color: var(--color-text); }
.j-tab.actif { color: var(--color-text); border-bottom-color: var(--color-chestnut); }

/* ---------- Cartes ---------- */

.j-carte {
  position: relative;
  background: rgba(255, 252, 248, .7);
  border: 1px solid rgba(59, 31, 14, .14);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.2rem;
}
.j-carte__tete { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.j-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; align-items: start; }

.j-etiquette {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-label); font-size: .82rem; letter-spacing: .08em;
  color: var(--color-leaf);
  padding: .15rem .55rem;
  border: 1px solid rgba(42, 79, 33, .3);
}
.j-etiquette.doree { color: #8a6418; border-color: rgba(184, 138, 46, .5); background: rgba(232, 196, 138, .25); }

.j-note { font-size: 1rem; color: rgba(59, 31, 14, .78); margin-top: .7rem !important; }
.j-note.doree { color: #7a5a14; }
.j-texte { font-size: 1.2rem; line-height: 1.55; margin: .6rem 0 1rem !important; }
.j-mini { font-family: var(--font-label); font-size: .8rem; letter-spacing: .06em; color: var(--color-light); margin-top: .7rem; }
.j-minuscule { font-size: .55rem; color: rgba(59, 31, 14, .45); letter-spacing: .05em; }
.j-flash { margin: .7rem 0 0 !important; font-style: italic; color: var(--color-leaf); font-size: 1.05rem; }
.j-gros { font-family: var(--font-title); font-size: 2.6rem; font-weight: 600; color: var(--color-chestnut); text-align: center; margin: .8rem 0 !important; }
.j-gros small { font-size: 1rem; font-family: var(--font-label); letter-spacing: .1em; color: var(--color-light); }

/* Mesures */
.j-mesures { display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem 1rem; margin: 0 0 .9rem; }
.j-mesures--3 { grid-template-columns: repeat(3, 1fr); }
.j-mesures--4 { grid-template-columns: repeat(4, 1fr); }
.j-mesures > div { padding: .45rem 0; border-bottom: 1px solid rgba(59, 31, 14, .08); }
.j-mesures dt { display: flex; align-items: center; gap: .3rem; font-family: var(--font-label); font-size: .78rem; letter-spacing: .08em; color: var(--color-light); }
.j-mesures dd { font-family: var(--font-title); font-size: 1.2rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Barres */
.j-barre-p { height: 6px; background: rgba(59, 31, 14, .1); overflow: hidden; }
.j-barre-p > span { display: block; height: 100%; width: 0; background: var(--color-leaf); transition: width .35s ease; }
.j-barre-p > .eau { background: #4f7f9f; }
.j-barre-p > .moyen { background: #c79a3e; }
.j-barre-p > .bas { background: var(--color-chestnut); }
.j-barre-p > .pousse { background: var(--color-leaf); }
.j-barre-p > .xp { background: linear-gradient(90deg, #c79a3e, var(--color-accent)); }

.j-statut { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; margin-top: .3rem; font-size: 1.05rem; border-left: 3px solid var(--color-leaf); background: rgba(42, 79, 33, .07); }
.j-statut.alerte { border-left-color: var(--color-chestnut); background: rgba(149, 69, 53, .08); color: var(--color-chestnut); }

/* ---------- Boutons ---------- */

.j-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-label); font-size: .92rem; letter-spacing: .08em;
  color: var(--color-chestnut);
  background: transparent;
  border: 1.5px solid var(--color-chestnut);
  padding: .7rem 1.2rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast), transform var(--ease-fast), opacity var(--ease-fast);
}
.j-btn:hover { background: var(--color-chestnut); color: var(--color-neutral); }
.j-btn:active { transform: translateY(1px); }
.j-btn.principal { background: var(--color-chestnut); color: var(--color-neutral); }
.j-btn.principal:hover { background: var(--color-text); border-color: var(--color-text); }
.j-btn.vert { color: var(--color-leaf); border-color: var(--color-leaf); }
.j-btn.vert:hover { background: var(--color-leaf); color: var(--color-neutral); }
.j-btn.petit { padding: .45rem .8rem; font-size: .82rem; white-space: nowrap; }
.j-btn:disabled, .j-btn:disabled:hover {
  opacity: .38; cursor: not-allowed;
  background: transparent; color: var(--color-text); border-color: rgba(59, 31, 14, .35);
  transform: none;
}
.j-btn .ic { width: 16px; height: 16px; }
.j-btn:focus-visible, .j-tab:focus-visible, .j-lien:focus-visible, .j-icone-btn:focus-visible, .j-arbre:focus-visible, .j-coup:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

.j-actions { display: grid; gap: .55rem; margin-top: 1rem; }
.j-actions--ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; }
.j-actions--ligne .j-note { margin: 0 !important; }
.j-actions--grille { grid-template-columns: repeat(2, 1fr); }
.j-actions--grille .j-btn.principal { grid-column: 1 / -1; }
.j-btns { display: flex; gap: .4rem; flex: none; }

.j-depli {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  margin-top: 1.1rem; padding: .7rem 0 .4rem;
  font-family: var(--font-label); font-size: .92rem; letter-spacing: .08em;
  color: var(--color-leaf);
  border-top: 1px solid rgba(59, 31, 14, .12);
  cursor: pointer;
}
.j-depli .ic { transition: transform var(--ease-fast); transform: rotate(90deg); }
.j-depli.ouvert .ic { transform: rotate(180deg); }

/* Listes */
.j-liste { margin: .3rem 0 0; }
.j-liste > li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(59, 31, 14, .1);
}
.j-liste > li:last-child { border-bottom: 0; }
.j-liste > li > div { min-width: 0; flex: 1; }
.j-liste b { display: flex; align-items: center; gap: .4rem; font-family: var(--font-title); font-size: 1.05rem; font-weight: 600; }
.j-liste > li > div > span { display: block; font-size: 1rem; color: rgba(59, 31, 14, .75); }
.j-liste > li > div > span span { display: inline; }
.j-liste .j-barre-p { margin-top: .45rem; }
.j-liste .fait b { color: var(--color-leaf); }
.j-liste--quetes .fait { opacity: .55; }
.j-liste--quetes b .ic { color: var(--color-light); }
.j-liste--quetes .fait b .ic { color: var(--color-leaf); }
.j-liste li.cliquable { cursor: pointer; }
.j-recompense { text-align: right; font-family: var(--font-label); font-size: .78rem; letter-spacing: .06em; color: var(--color-chestnut); flex: none; }

.j-case { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; cursor: pointer; }
.j-case input { width: 18px; height: 18px; accent-color: var(--color-chestnut); }

/* ---------- Scène de la châtaigneraie ---------- */

.j-scene {
  position: relative;
  border: 1px solid rgba(59, 31, 14, .14);
  background: linear-gradient(180deg, #f6efe6 0%, #efe4d4 55%, #e5d7c2 100%);
  margin-bottom: 1.2rem;
  overflow: hidden;
  min-height: 300px;
}
.j-scene__monts { position: absolute; left: 0; right: 0; bottom: 64px; width: 100%; height: 150px; }
.j-scene__sol {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background:
    linear-gradient(180deg, #6f8f45 0, #5b7a37 6px, #8a6a45 7px, #7a5a3a 40%, #684a2f 100%);
  pointer-events: none;
}
.j-scene__pastilles { position: absolute; top: .8rem; left: .9rem; right: .9rem; display: flex; justify-content: space-between; gap: .5rem; z-index: 3; pointer-events: none; }
.j-pastille {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-label); font-size: .8rem; letter-spacing: .08em;
  color: var(--color-text);
  background: rgba(255, 252, 248, .85);
  border: 1px solid rgba(59, 31, 14, .15);
  padding: .2rem .6rem;
}

.j-arbres {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: .3rem 1rem;
  padding: 3rem 1rem 0;
  min-height: 300px;
}
.j-arbre {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: calc(128px + var(--niv, 0) * 8px);
  padding: .3rem .3rem 1.6rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color var(--ease-fast), background var(--ease-fast), transform var(--ease-fast);
}
.j-arbre:hover { transform: translateY(-2px); }
.j-arbre.actif { border-color: rgba(149, 69, 53, .55); background: rgba(255, 252, 248, .35); }
.j-arbre.actif::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px;
  background: var(--color-chestnut); transform: translateX(-50%) rotate(45deg);
}
.j-arbre__dessin { position: relative; display: block; width: 100%; }
.j-arbre__svg { display: block; width: 100%; height: auto; overflow: visible; }
.j-arbre.legende .j-arbre__svg { filter: drop-shadow(0 0 8px rgba(232, 196, 138, .7)); }
.j-arbre__barres { display: grid; gap: 3px; width: 80%; margin-top: .25rem; }
.j-arbre__barres .j-barre-p { height: 4px; background: rgba(255, 255, 255, .45); }
.j-arbre__age { position: absolute; bottom: .25rem; left: 0; right: 0; text-align: center; font-family: var(--font-label); font-size: .78rem; letter-spacing: .06em; color: var(--color-neutral); }
.j-arbre__niv {
  position: absolute; top: .2rem; right: .2rem; z-index: 2;
  display: grid; place-items: center; width: 22px; height: 22px;
  font-family: var(--font-title); font-size: .8rem; font-weight: 600;
  color: var(--color-neutral); background: var(--color-leaf);
  border-radius: 50%;
}
.j-arbre__19 {
  position: absolute; top: .2rem; left: .2rem; z-index: 2;
  font-family: var(--font-label); font-size: .8rem; color: var(--color-chestnut);
  border: 1px solid currentColor; padding: 0 .3rem;
  animation: j-pulse 1.6s ease-in-out infinite;
}

/* animations : arrosage, récolte */
.j-pluie { position: absolute; inset: 0 15% 30%; pointer-events: none; }
.j-pluie i {
  position: absolute; top: 0; width: 3px; height: 9px; border-radius: 0 0 3px 3px;
  background: #5f8fb0; opacity: 0;
  animation: j-goutte 1.1s ease-in infinite;
}
.j-pluie i:nth-child(1) { left: 15%; animation-delay: 0s; }
.j-pluie i:nth-child(2) { left: 35%; animation-delay: .25s; }
.j-pluie i:nth-child(3) { left: 55%; animation-delay: .1s; }
.j-pluie i:nth-child(4) { left: 72%; animation-delay: .35s; }
.j-pluie i:nth-child(5) { left: 88%; animation-delay: .5s; }
@keyframes j-goutte { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(80px); opacity: 0; } }

.j-chute { position: absolute; inset: 20% 20% 0; pointer-events: none; }
.j-chute i {
  position: absolute; top: 0; width: 11px; height: 11px;
  background: #a3ae45; border: 2px dotted #d6c25c; border-radius: 50%;
  animation: j-tombe 1.2s cubic-bezier(.5, 0, .9, .6) infinite;
}
.j-chute i:nth-child(1) { left: 20%; }
.j-chute i:nth-child(2) { left: 55%; animation-delay: .35s; }
.j-chute i:nth-child(3) { left: 80%; animation-delay: .7s; }
@keyframes j-tombe { 0% { transform: translateY(0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(90px) rotate(200deg); opacity: 0; } }

.j-gain {
  position: absolute; left: 50%; top: 25%;
  font-family: var(--font-title); font-weight: 700; font-size: 1.6rem;
  color: var(--color-chestnut);
  text-shadow: 0 1px 0 #fff;
  transform: translateX(-50%);
  animation: j-monte 1.6s ease-out forwards;
}
@keyframes j-monte { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
@keyframes j-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Élevage ---------- */

.j-vache { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto .4rem; overflow: visible; }
.j-vaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 1.2rem; }
.j-carte-vache h3 { font-size: 1.2rem; }
.j-carte-vache .j-note { margin-top: 0 !important; margin-bottom: .6rem !important; }
.j-vide { text-align: center; }
.j-vide .j-vache { max-width: 200px; opacity: .55; }
.j-vide p { font-size: 1.1rem; font-style: italic; color: rgba(59, 31, 14, .7); }
.j-carte--mystere { border-color: rgba(149, 69, 53, .4); background: rgba(149, 69, 53, .05); }

/* ---------- Bilan ---------- */

.j-carte--score { text-align: center; }
.j-score { font-family: var(--font-title); font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--color-chestnut); line-height: 1.1; margin: .2rem 0 .6rem !important; font-variant-numeric: tabular-nums; }
.j-carte--score .j-btn { margin-top: .6rem; }

.j-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.j-stats > div { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid rgba(59, 31, 14, .08); }
.j-stats dt { font-size: 1rem; color: rgba(59, 31, 14, .75); }
.j-stats dd { font-family: var(--font-title); font-weight: 600; font-variant-numeric: tabular-nums; }

.j-distinctions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; }
.j-distinctions li { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: rgba(59, 31, 14, .45); padding: .3rem 0; }
.j-distinctions li.fait { color: var(--color-text); }
.j-distinctions li.fait .ic { color: #b88a2e; }

/* ---------- Fenêtres ---------- */

.j-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.j-modal[hidden] { display: none; }
.j-modal__fond { position: absolute; inset: 0; background: rgba(13, 9, 6, .58); animation: j-fondu .25s ease; }
.j-modal__boite {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--color-neutral);
  padding: 2rem 1.8rem 1.6rem;
  box-shadow: var(--shadow-lg);
  animation: j-entre .3s cubic-bezier(.16, 1, .3, 1);
}
.j-modal__boite::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(232, 196, 138, .9);
  pointer-events: none;
}
.j-modal__boite.moyen { width: min(620px, 100%); }
.j-modal__boite.large { width: min(760px, 100%); }
.j-modal__titre { font-size: 1.7rem !important; margin: .2rem 0 .3rem; padding-right: 2rem; }
.j-modal__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-chestnut); cursor: pointer; z-index: 2; }
.j-modal__x .ic { width: 20px; height: 20px; }
.j-modal__x:hover { color: var(--color-text); }
.j-modal__pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-top: 1.3rem; }
.j-modal__pied--col { flex-direction: column; justify-content: center; }
.j-modal__pied--col .j-btn { width: 100%; }
@keyframes j-fondu { from { opacity: 0; } }
@keyframes j-entre { from { opacity: 0; transform: translateY(14px); } }

.j-form { display: grid; gap: .9rem; margin-top: 1rem; }
.j-form label { display: grid; gap: .3rem; font-family: var(--font-label); font-size: .85rem; letter-spacing: .08em; color: var(--color-chestnut); }
.j-form label small { font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; color: rgba(59, 31, 14, .7); }
.j-form input {
  font-family: var(--font-body); font-size: 1.15rem; color: var(--color-text);
  background: rgba(255, 252, 248, .9);
  border: 1px solid rgba(59, 31, 14, .25);
  padding: .6rem .8rem;
  width: 100%;
  border-radius: 0;
}
.j-form input:focus { outline: none; border-color: var(--color-chestnut); box-shadow: 0 0 0 3px rgba(149, 69, 53, .12); }
.j-form .j-btn { margin-top: .3rem; }
.j-erreur { padding: .55rem .8rem; border-left: 3px solid var(--color-chestnut); background: rgba(149, 69, 53, .08); color: var(--color-chestnut); font-size: 1rem; }
.j-total { font-size: 1.1rem; }
.j-total b { font-family: var(--font-title); color: var(--color-chestnut); font-size: 1.3rem; }

.j-roue { display: grid; place-items: center; margin: .6rem 0 0; color: var(--color-chestnut); }
.j-roue .ic { width: 84px; height: 84px; stroke-width: 1.1; animation: j-tourne 6s linear infinite; }
@keyframes j-tourne { to { transform: rotate(360deg); } }

/* Classement */
.j-classement { margin: .4rem 0 0; counter-reset: none; }
.j-classement li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .8rem; padding: .65rem .4rem; border-bottom: 1px solid rgba(59, 31, 14, .1); }
.j-classement li.moi { background: rgba(232, 196, 138, .3); }
.j-rang { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; color: var(--color-light); text-align: center; }
.j-classement li.podium .j-rang { color: var(--color-chestnut); }
.j-classement li:nth-child(1) .j-rang { font-size: 1.5rem; }
.j-classement__nom b { display: block; font-family: var(--font-title); font-weight: 600; overflow-wrap: anywhere; }
.j-classement__nom small, .j-classement__score small { display: block; font-family: var(--font-label); font-size: .74rem; letter-spacing: .08em; color: var(--color-light); }
.j-classement__score { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Combat ---------- */

.j-arene {
  position: relative;
  height: 210px;
  margin: 1rem 0;
  border: 1px solid rgba(59, 31, 14, .14);
  background:
    linear-gradient(180deg, #f3ebe0 0%, #e7dac6 58%, #7f9a52 58%, #6b8644 70%, #8a6a45 70%, #75573a 100%);
  overflow: hidden;
}
.j-arene::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 70px;
  background: linear-gradient(170deg, transparent 40%, rgba(185, 176, 143, .8) 41%, rgba(185, 176, 143, .8) 60%, transparent 61%),
              linear-gradient(190deg, transparent 45%, rgba(201, 191, 174, .9) 46%);
  opacity: .6;
}
.j-arene__cote { position: absolute; bottom: 18px; width: 42%; max-width: 230px; transition: transform .5s cubic-bezier(.3, .7, .3, 1.2); }
.j-arene__cote .j-vache { max-width: none; margin: 0; }
.j-arene__cote.gauche { left: 2%; transform: translateX(10%); }
.j-arene__cote.droite { right: 2%; transform: translateX(-10%); }
.j-arene__cote.droite .j-vache { transform: scaleX(-1); }
.j-arene__cote.gauche.pose-attack  { transform: translateX(42%); }
.j-arene__cote.gauche.pose-charge  { transform: translateX(58%) rotate(-4deg); }
.j-arene__cote.gauche.pose-defend  { transform: translateX(-4%) scale(.94); }
.j-arene__cote.gauche.pose-counter { transform: translateX(18%); }
.j-arene__cote.droite.pose-attack  { transform: translateX(-42%); }
.j-arene__cote.droite.pose-charge  { transform: translateX(-58%) rotate(4deg); }
.j-arene__cote.droite.pose-defend  { transform: translateX(4%) scale(.94); }
.j-arene__cote.droite.pose-counter { transform: translateX(-18%); }
.j-arene__cote.pose-charge .j-vache { animation: j-secoue .25s ease-in-out 3; }
@keyframes j-secoue { 50% { translate: 0 -4px; } }
.j-bulle {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-label); font-size: .8rem; letter-spacing: .1em;
  color: var(--color-neutral); background: var(--color-text);
  padding: .15rem .55rem; white-space: nowrap;
}
.j-choc {
  position: absolute; left: 50%; top: 42%; width: 60px; height: 60px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 196, 138, .95) 0, rgba(232, 196, 138, .5) 35%, transparent 70%);
  border-radius: 50%;
  animation: j-choc .6s ease-out forwards .35s;
  opacity: 0;
}
@keyframes j-choc { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }

.j-combattants { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.j-combattant { padding: .8rem 1rem; border: 1px solid rgba(59, 31, 14, .14); background: rgba(255, 252, 248, .6); }
.j-combattant b { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; }
.j-combattant > small { display: block; font-size: .9rem; color: rgba(59, 31, 14, .7); }
.j-combattant .j-barre-p { margin: .3rem 0 .45rem; height: 8px; }
.j-combattant.adverse { text-align: right; }
.j-pv { font-family: var(--font-title); font-weight: 600; font-size: 1.9rem; line-height: 1.1; margin-top: .2rem !important; }
.j-pv small { font-family: var(--font-label); font-size: .8rem; letter-spacing: .1em; color: var(--color-light); }

.j-journal {
  max-height: 130px; overflow-y: auto;
  margin: 1rem 0;
  padding: .6rem .9rem;
  border-left: 2px solid rgba(149, 69, 53, .35);
  background: rgba(255, 252, 248, .5);
  font-size: 1rem;
}
.j-journal p { padding: .1rem 0; color: rgba(59, 31, 14, .72); }
.j-journal p:last-child { color: var(--color-text); font-weight: 500; }

.j-coups { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.j-coup {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .8rem .4rem;
  border: 1.5px solid var(--color-chestnut);
  color: var(--color-chestnut);
  cursor: pointer;
  text-align: center;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.j-coup:hover { background: var(--color-chestnut); color: var(--color-neutral); }
.j-coup .ic { width: 24px; height: 24px; }
.j-coup b { font-family: var(--font-label); font-weight: 400; font-size: .95rem; letter-spacing: .08em; }
.j-coup small { font-size: .82rem; opacity: .8; line-height: 1.2; }
.j-attente { text-align: center; font-style: italic; animation: j-pulse 1.2s ease-in-out infinite; }
.j-resultat { text-align: center; padding: 1rem; border: 1px solid rgba(42, 79, 33, .3); background: rgba(42, 79, 33, .07); }
.j-resultat.alerte { border-color: rgba(149, 69, 53, .35); background: rgba(149, 69, 53, .07); }
.j-resultat h3 { font-size: 1.8rem !important; }
.j-resultat p { font-size: 1.1rem; margin-top: .3rem !important; }

/* ---------- Messages ---------- */

.j-toasts { position: fixed; bottom: 16px; right: 16px; z-index: 200; display: grid; gap: .5rem; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.j-toast {
  padding: .7rem .95rem;
  background: rgba(255, 252, 248, .97);
  border: 1px solid rgba(59, 31, 14, .12);
  border-left: 3px solid var(--color-light);
  box-shadow: var(--shadow-md);
  font-size: 1.02rem; line-height: 1.35;
  animation: j-glisse .3s cubic-bezier(.16, 1, .3, 1);
  transition: opacity .35s ease, transform .35s ease;
}
.j-toast.ok { border-left-color: var(--color-leaf); }
.j-toast.alerte { border-left-color: var(--color-chestnut); }
.j-toast.sort { opacity: 0; transform: translateX(20px); }
@keyframes j-glisse { from { opacity: 0; transform: translateX(24px); } }

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 900px) {
  .j-grille-2 { grid-template-columns: 1fr; }
  .j-ressources { grid-template-columns: repeat(3, 1fr); }
  .j-res:nth-child(4) { border-left: 0; }
  .j-res:nth-child(n+4) { border-top: 1px solid rgba(59, 31, 14, .1); }
}

@media (max-width: 640px) {
  .j-barre { grid-template-columns: auto 1fr; }
  .j-barre__site span { display: none; }
  .j-barre__titre { font-size: 1.1rem; }
  .j-barre__retour { font-size: .78rem; }
  .j-barre__titre { justify-self: start; }
  .j-barre__retour { grid-column: 2; grid-row: 1; }
  .j-barre__titre { display: none; }
  .j-tete__compte { align-items: flex-start; width: 100%; }
  .j-niveau { max-width: none; }
  .j-niveau .j-sur { text-align: left; }
  .j-tete__btns { justify-content: flex-start; }
  .j-res__val { font-size: 1.2rem; }
  .j-carte { padding: 1.1rem 1rem; }
  .j-mesures, .j-mesures--4 { grid-template-columns: repeat(2, 1fr); }
  .j-arbres { gap: .2rem .4rem; padding: 2.8rem .4rem 0; }
  .j-arbre { width: calc(88px + var(--niv, 0) * 6px); }
  .j-liste > li { flex-wrap: wrap; }
  .j-liste > li > .j-btn, .j-liste > li > .j-btns { margin-left: auto; }
  .j-stats, .j-distinctions { grid-template-columns: 1fr; }
  .j-coups { grid-template-columns: repeat(2, 1fr); }
  .j-arene { height: 170px; }
  .j-combattant { padding: .6rem .7rem; }
  .j-pv { font-size: 1.5rem; }
  .j-modal { padding: .5rem; }
  .j-modal__boite { padding: 1.7rem 1.2rem 1.3rem; max-height: calc(100vh - 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   RÉCOLTE AU SOL ET ARROSAGE DIRECT
   ============================================================ */

/* Bouton d'arrosage sur chaque arbre */
.j-arbre__eau {
  position: absolute; left: .15rem; top: 42%; z-index: 3;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: #4f7f9f;
  background: rgba(255, 252, 248, .92);
  border: 1px solid rgba(79, 127, 159, .45);
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), transform var(--ease-fast);
}
.j-arbre__eau .ic { width: 16px; height: 16px; }
.j-arbre__eau:hover { background: #4f7f9f; color: #fff; transform: scale(1.08); }
.j-arbre__eau.soif { background: #4f7f9f; color: #fff; border-color: #4f7f9f; animation: j-soif 1.4s ease-in-out infinite; }
.j-arbre__eau:disabled { opacity: .45; cursor: default; animation: none; transform: none; }
@keyframes j-soif { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 127, 159, .55); } 50% { box-shadow: 0 0 0 6px rgba(79, 127, 159, 0); } }

/* Châtaignes tombées */
.j-sol { position: absolute; left: 0; right: 0; bottom: 2.35rem; height: 0; z-index: 4; }
.j-tombee {
  position: absolute; bottom: 0;
  width: 26px; height: 26px;
  margin-left: -13px;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 2px 1px rgba(40, 20, 8, .35));
  transition: transform .15s ease;
}
.j-tombee svg { display: block; width: 100%; height: 100%; }
.j-tombee:hover { transform: scale(1.2) rotate(-8deg); }
.j-tombee b {
  position: absolute; right: -8px; top: -8px;
  font-family: var(--font-title); font-size: .7rem; font-weight: 700;
  color: var(--color-neutral); background: var(--color-chestnut);
  padding: 0 .25rem; line-height: 1.35;
}
.j-tombee.tombe { animation: j-tombee .7s cubic-bezier(.45, 0, .7, 1) both; }
@keyframes j-tombee {
  0%   { transform: translateY(-120px) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  70%  { transform: translateY(0) rotate(160deg); }
  85%  { transform: translateY(-7px) rotate(190deg); }
  100% { transform: translateY(0) rotate(200deg); }
}
.j-tombee.fane { animation: j-fane 1s ease-in-out infinite; }
@keyframes j-fane { 50% { opacity: .35; } }
.j-tombee:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Écureuil voleur */
.j-ecureuil {
  position: absolute; bottom: -6px;
  width: 58px; height: 46px; margin-left: -29px;
  z-index: 5; pointer-events: none;
  transition: left 1.3s linear;
}
.j-ecureuil svg { display: block; width: 100%; height: 100%; animation: j-bond .26s ease-in-out infinite; }
.j-ecureuil.gauche svg { transform: scaleX(-1); }
.j-ecureuil.pause svg { animation: none; }
.j-ecureuil__butin { opacity: 0; }
.j-ecureuil.porte .j-ecureuil__butin { opacity: 1; }
@keyframes j-bond { 50% { translate: 0 -7px; } }
@media (prefers-reduced-motion: reduce) { .j-ecureuil svg { animation: none; } }

.j-plus {
  position: absolute; margin-left: -10px;
  font-family: var(--font-title); font-weight: 700; font-size: 1.1rem;
  color: var(--color-chestnut);
  text-shadow: 0 1px 0 #fff, 0 0 4px rgba(255, 255, 255, .8);
  pointer-events: none;
  animation: j-plus .9s ease-out forwards;
}
@keyframes j-plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-36px); } }

.j-pastille--sol { color: var(--color-chestnut); border-color: rgba(149, 69, 53, .35); }
.j-scene__pastilles { justify-content: flex-start; flex-wrap: wrap; }
.j-scene__pastilles .j-pastille:last-child { margin-left: auto; }

.j-btn.discret { border-color: rgba(59, 31, 14, .25); color: rgba(59, 31, 14, .7); font-size: .82rem; padding: .5rem 1rem; }
.j-btn.discret:hover { background: rgba(59, 31, 14, .08); color: var(--color-text); }
p.j-statut { margin-top: 0 !important; }

@media (max-width: 640px) {
  .j-tombee { width: 30px; height: 30px; margin-left: -15px; }
  .j-arbre__eau { width: 28px; height: 28px; }
}

/* ============================================================
   COMBAT DE REINES (poussée en temps réel)
   ============================================================ */

.j-duel__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.j-chrono { font-family: var(--font-title); font-weight: 600; font-size: 1.5rem; color: var(--color-chestnut); font-variant-numeric: tabular-nums; padding-top: .2rem; }

.j-ring {
  position: relative;
  height: 190px;
  margin: .8rem 0 .5rem;
  border: 1px solid rgba(59, 31, 14, .14);
  background: linear-gradient(180deg, #f3ebe0 0%, #e7dac6 55%, #8f7a5a 55%, #7d6748 72%, #6b563b 100%);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.j-ring::before {
  content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 70px;
  background: linear-gradient(170deg, transparent 40%, rgba(185, 176, 143, .8) 41%, rgba(185, 176, 143, .8) 60%, transparent 61%),
              linear-gradient(190deg, transparent 45%, rgba(201, 191, 174, .9) 46%);
  opacity: .55;
}
.j-ring::after { content: ""; position: absolute; left: 50%; top: 55%; bottom: 0; border-left: 1px dashed rgba(255, 255, 255, .35); }
.j-ring__duo { position: absolute; inset: 0; transition: transform .12s linear; }
.j-ring__duo.tremble .j-ring__vache { animation: j-tremble .18s linear infinite; }
@keyframes j-tremble { 50% { translate: 0 -2px; } }
.j-ring__vache { position: absolute; bottom: 14px; width: 44%; max-width: 250px; }
.j-ring .j-ring__vache .j-vache { width: 100%; max-width: none; margin: 0; }
.j-ring__vache.gauche { right: 47%; }
.j-ring__vache.droite { left: 47%; }
.j-ring__vache.droite .j-vache { transform: scaleX(-1); }
.j-ring__vache .j-bulle { top: -4px; }
.j-bulle.danger { background: var(--color-chestnut); animation: j-pulse .5s ease-in-out infinite; }
.j-ring__flanc {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-label); letter-spacing: .1em; font-size: .9rem;
  color: #fff; background: #b88a2e; padding: .2rem .7rem;
  animation: j-pulse .35s ease-in-out infinite;
}
.j-ring__flanc[hidden] { display: none; }

.j-terrain { position: relative; height: 26px; margin: 0 0 .9rem; border-bottom: 2px solid rgba(59, 31, 14, .25); }
.j-terrain__repere { position: absolute; left: 50%; bottom: -6px; height: 12px; border-left: 2px solid rgba(59, 31, 14, .35); }
.j-terrain__curseur { position: absolute; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--color-chestnut); transform: rotate(45deg); transition: left .12s linear; }
.j-terrain small { position: absolute; top: 0; font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em; color: var(--color-light); }
.j-terrain .g { left: 0; } .j-terrain .d { right: 0; }

.j-combattants--jauges .j-combattant { padding: .6rem .9rem; }
.j-combattants--jauges .j-barre-p { height: 9px; }
.j-combattants--jauges .j-barre-p > span { transition: width .12s linear; }
.j-jauge { display: block; font-family: var(--font-label); font-size: .74rem; letter-spacing: .08em; color: var(--color-light); margin-top: .3rem; }
.j-combattant > small + small { margin-top: .1rem; }

.j-commandes { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: .6rem; margin-top: 1rem; }
.j-tenir {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: 1rem .4rem;
  border: 1.5px solid var(--color-chestnut); color: var(--color-chestnut);
  cursor: pointer; text-align: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: background var(--ease-fast), color var(--ease-fast), transform .08s;
}
.j-tenir .ic { width: 26px; height: 26px; pointer-events: none; }
.j-tenir b { font-family: var(--font-label); font-weight: 400; font-size: 1.05rem; letter-spacing: .1em; pointer-events: none; }
.j-tenir small { font-size: .8rem; opacity: .8; pointer-events: none; }
.j-tenir.principal { background: rgba(149, 69, 53, .08); }
.j-tenir.appuye { background: var(--color-chestnut); color: var(--color-neutral); transform: scale(.97); }
.j-tenir.flanc { border-color: rgba(184, 138, 46, .6); color: #8a6418; }
.j-tenir.flanc.pret { background: #b88a2e; color: #fff; border-color: #b88a2e; animation: j-pulse .35s ease-in-out infinite; }

.j-journal--court { max-height: none; min-height: 4.6rem; margin: .9rem 0 0; }
.j-journal p.ok { color: var(--color-leaf); }
.j-journal p.alerte { color: var(--color-chestnut); }

.j-regles { margin: 1rem 0 0; display: grid; gap: .35rem; }
.j-regles li { font-size: 1rem; padding-left: .9rem; border-left: 2px solid rgba(149, 69, 53, .3); }
.j-regles b { font-family: var(--font-label); font-weight: 400; letter-spacing: .06em; color: var(--color-chestnut); }
.j-combattants .j-combattant > small { margin-top: .1rem; }

/* ---------- Élevage ---------- */

.j-rouge { color: var(--color-chestnut); }
.j-gris { color: var(--color-light); font-size: .9rem; font-weight: 400; }
.j-liste--serree > li { padding: .5rem 0; }
.j-liste--serree b { font-size: .98rem; }
.j-liste--serree > li > div > span { font-size: .9rem; }
.j-carte-vache .j-liste { margin-top: .6rem; border-top: 1px solid rgba(59, 31, 14, .1); }
.j-lien--petit { font-size: .8rem; margin-top: .6rem; color: var(--color-light); }
.j-foire { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.j-foire__bete { padding: 1rem; border: 1px solid rgba(59, 31, 14, .12); background: rgba(255, 252, 248, .5); }
.j-foire__bete .j-note { margin: 0 0 .4rem !important; }
.j-foire__bete .j-btn { width: 100%; }
.j-foire__bete .j-carte__tete { margin-bottom: .3rem; }

/* ---------- Marché ---------- */

.j-grille-marche { grid-template-columns: 1.35fr 1fr; }
.j-filtres { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.j-filtre {
  font-family: var(--font-label); font-size: .82rem; letter-spacing: .06em;
  padding: .3rem .75rem; cursor: pointer;
  color: var(--color-light); border: 1px solid rgba(59, 31, 14, .18);
}
.j-filtre:hover { color: var(--color-text); }
.j-filtre.actif { color: var(--color-neutral); background: var(--color-chestnut); border-color: var(--color-chestnut); }
.j-grosse-ic { width: 54px; height: 54px; color: var(--color-chestnut); margin: .4rem auto .6rem; display: block; stroke-width: 1.2; }
.j-vide .j-btn { margin-top: 1rem; }
.j-form select {
  font-family: var(--font-body); font-size: 1.05rem; color: var(--color-text);
  background: rgba(255, 252, 248, .9); border: 1px solid rgba(59, 31, 14, .25);
  padding: .6rem .8rem; width: 100%; border-radius: 0;
}
.j-form label[hidden] { display: none; }
.j-modal .j-vache { max-width: 200px; }
.j-statut .j-btn { margin-left: auto; }

@media (max-width: 900px) {
  .j-grille-marche { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .j-ring { height: 150px; }
  .j-commandes { gap: .4rem; }
  .j-tenir { padding: .9rem .2rem; }
  .j-tenir small { font-size: .7rem; }
  .j-chrono { font-size: 1.2rem; }
}

/* ============================================================
   Discussion
   ============================================================ */
.j-tab { position: relative; }
.j-pastille-nb {
  display: inline-grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
  font-family: var(--font-title); font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: 0;
  color: #fff; background: var(--color-chestnut); border-radius: 999px;
}
.j-chat { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 0 1.2rem; align-items: start; }
.j-chat__canaux { margin: 0 0 .8rem; }
.j-chat__canaux li { border-bottom: 1px solid rgba(59, 31, 14, .1); }
.j-chat__canaux li:last-child { border-bottom: 0; }
.j-chat__canaux button {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .6rem 2.2rem .6rem .5rem; color: var(--color-text);
}
.j-chat__canaux button:hover { background: rgba(149, 69, 53, .06); }
.j-chat__canaux li.actif button { background: rgba(149, 69, 53, .1); box-shadow: inset 2px 0 0 var(--color-chestnut); }
.j-chat__canaux b { display: flex; align-items: center; gap: .4rem; font-family: var(--font-title); font-size: 1rem; font-weight: 600; }
.j-chat__canaux b .ic { width: 16px; height: 16px; color: var(--color-chestnut); }
.j-chat__canaux span { display: block; font-size: .95rem; color: rgba(59, 31, 14, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-chat__canaux .j-pastille-nb { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }
.j-chat__nouveau { display: grid; gap: .3rem; font-family: var(--font-label); font-size: .85rem; letter-spacing: .08em; color: var(--color-chestnut); }
.j-chat__nouveau select {
  font-family: var(--font-body); font-size: 1.05rem; color: var(--color-text);
  background: rgba(255, 252, 248, .9); border: 1px solid rgba(59, 31, 14, .25); padding: .5rem .6rem; width: 100%;
}
.j-chat__fil {
  height: min(52vh, 460px); overflow-y: auto;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .8rem; background: rgba(239, 228, 212, .45); border: 1px solid rgba(59, 31, 14, .1);
}
.j-chat__fil > .j-note { margin: auto !important; text-align: center; font-style: italic; }
.j-msg { max-width: 82%; align-self: flex-start; background: #fffcf8; border: 1px solid rgba(59, 31, 14, .12); padding: .45rem .7rem .5rem; }
.j-msg.moi { align-self: flex-end; background: rgba(232, 196, 138, .35); border-color: rgba(184, 138, 46, .35); }
.j-msg.efface p { font-style: italic; color: rgba(59, 31, 14, .5); }
.j-msg__tete { display: flex; align-items: baseline; gap: .5rem; font-size: .85rem; color: var(--color-light); }
.j-msg__tete b, .j-msg__nom { font-family: var(--font-title); font-size: .92rem; font-weight: 600; color: var(--color-chestnut); }
.j-msg__nom { cursor: pointer; padding: 0; }
.j-msg__nom:hover { text-decoration: underline; }
.j-msg__x { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; color: rgba(59, 31, 14, .4); }
.j-msg__x:hover { color: var(--color-chestnut); }
.j-msg__x .ic { width: 12px; height: 12px; }
.j-msg p { font-size: 1.08rem; line-height: 1.4; margin: .1rem 0 0 !important; overflow-wrap: anywhere; }
.j-chat__saisie { grid-template-columns: 1fr auto; align-items: center; gap: .6rem; margin-top: .8rem; }
.j-chat__saisie .j-btn { margin-top: 0; }
@media (max-width: 760px) {
  .j-chat { grid-template-columns: 1fr; }
  .j-chat__principal { order: -1; }
  .j-msg { max-width: 92%; }
}

/* Onglets : sur grand écran tout tient sur deux lignes ; sur téléphone, les principaux + « Plus » */
.j-onglets { flex-wrap: wrap; overflow-x: visible; }
.j-tab--plus { display: none; }
@media (max-width: 760px) {
  .j-onglets { flex-wrap: wrap; }
  .j-tab { padding: .6rem .55rem; font-size: .88rem; }
  .j-tab--plus { display: inline-flex; margin-left: auto; }
  .j-onglets:not(.ouvert) .j-tab.secondaire:not(.actif) { display: none; }
  .j-onglets.ouvert .j-tab.secondaire { order: 2; }
  .j-onglets.ouvert .j-tab--plus { order: 1; }
}

/* Vergers, montagne, arène */
.j-verrou { opacity: .8; }
.j-verrou .j-etiquette { color: var(--color-light); border-color: rgba(59, 31, 14, .2); }
.j-carte__tete h2 .ic { width: 20px; height: 20px; color: var(--color-chestnut); vertical-align: -3px; }
.j-sous-titre { font-family: var(--font-label); font-size: .85rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-chestnut); margin: 1.2rem 0 .4rem; }

/* ============================================================
   Salle de jeux
   ============================================================ */
.j-choix-jeu { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.j-choix-jeu .j-case b { font-family: var(--font-title); font-weight: 600; }

/* Course aux châtaignes */
.j-course__scores { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-label); letter-spacing: .06em; margin: .4rem 0 .6rem; }
.j-course__scores b { font-family: var(--font-title); font-size: 1.8rem; margin-left: .3rem; }
.j-course__scores .moi b { color: var(--color-leaf); }
.j-course__scores .lui b { color: var(--color-chestnut); }
.j-course {
  position: relative; height: min(52vh, 380px); overflow: hidden;
  border: 1px solid rgba(59, 31, 14, .14);
  background: linear-gradient(180deg, #f6efe6 0%, #efe4d4 60%, #8a6a45 60.5%, #7a5a3a 100%);
  touch-action: manipulation;
}
.j-course__arbre { position: absolute; left: 50%; bottom: 36%; width: 48%; max-width: 260px; transform: translateX(-50%); opacity: .55; pointer-events: none; }
.j-course .j-tombee { top: 0; bottom: auto; width: 38px; height: 38px; margin: -19px 0 0 -19px; animation: j-pop .18s ease-out; }
.j-course .j-tombee.double { filter: drop-shadow(0 0 6px rgba(232, 196, 138, .95)); }
@keyframes j-pop { from { transform: scale(.3); opacity: 0; } }
.j-course__compte { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-title); font-size: 5rem; font-weight: 700; color: var(--color-chestnut); pointer-events: none; text-shadow: 0 2px 0 #fff; }

/* Puissance 4 */
.j-p4__legende { display: flex; gap: 1.2rem; justify-content: center; font-family: var(--font-label); letter-spacing: .05em; margin: .3rem 0 .6rem; }
.j-p4__legende span { display: inline-flex; align-items: center; gap: .4rem; }
.j-p4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px; background: #5a3c25; border-radius: 4px; max-width: 460px; margin: 0 auto; }
.j-p4__col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 4px; padding: 0; cursor: pointer; border-radius: 3px; }
.j-p4__col:disabled { cursor: default; }
.j-p4.a-moi .j-p4__col:not(:disabled):hover { background: rgba(232, 196, 138, .25); }
.j-p4__case { aspect-ratio: 1; border-radius: 50%; background: #efe4d4; display: grid; place-items: center; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.j-p4__jeton { display: block; width: 86%; height: 86%; border-radius: 50%; }
.j-p4__jeton.j1 { background: radial-gradient(circle at 35% 30%, #b0603f, #6e2e1c); }
.j-p4__jeton.j2 { background: radial-gradient(circle at 35% 30%, #f1d08d, #c48a2c); }
.j-p4__legende .j-p4__jeton { width: 18px; height: 18px; }
.j-p4__jeton.dernier { box-shadow: 0 0 0 2px #fff; }
.j-p4__jeton.gagne { box-shadow: 0 0 0 3px var(--color-leaf), 0 0 10px rgba(42, 79, 33, .7); }

/* Puissance 4 : pions en châtaignes (les miens) et en raisins (l'adversaire) */
.j-p4__pion { display: block; width: 84%; height: 84%; animation: j-pion .22s ease-out; }
.j-p4__pion svg { display: block; width: 100%; height: 100%; }
.j-p4__legende .j-p4__pion { width: 22px; height: 22px; animation: none; }
.j-p4__case.dernier { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25), 0 0 0 2px #fff; }
.j-p4__case.gagne { background: #d9e6c6; box-shadow: inset 0 0 0 3px var(--color-leaf), 0 0 10px rgba(42, 79, 33, .6); }
@keyframes j-pion { from { transform: translateY(-60%); opacity: .3; } }

/* Mémoire */
.j-memoire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: .6rem auto; }
.j-carte-mem {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #7a5638 0 6px, #6b4a30 6px 12px); border: 2px solid #5a3c25;
  transition: transform .15s ease;
}
.j-memoire.a-moi .j-carte-mem:not(:disabled):hover { transform: translateY(-2px); }
.j-carte-mem:disabled { cursor: default; }
.j-carte-mem.visible { background: #fffcf8; border-color: rgba(59, 31, 14, .25); animation: j-retourne .25s ease; }
.j-carte-mem .ic { width: 52%; height: 52%; color: var(--color-chestnut); stroke-width: 1.6; }
.j-carte-mem.a-moi { border-color: var(--color-leaf); background: #e3ecd6; }
.j-carte-mem.a-lui { border-color: var(--color-chestnut); background: #f1ddd5; opacity: .85; }
@keyframes j-retourne { from { transform: rotateY(90deg); } }

/* Enchères, quiz : le lot ou la question */
.j-lot { text-align: center; padding: .9rem 1rem; margin: .6rem 0; border: 1px solid rgba(184, 138, 46, .45); background: rgba(232, 196, 138, .18); }
.j-lot h3 { font-size: 1.45rem !important; margin: .2rem 0 0; }
.j-lot__valeur { font-family: var(--font-title); font-size: 1.3rem; color: var(--color-chestnut); margin: .2rem 0 0 !important; }
.j-quiz { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .6rem 0; }
.j-quiz__rep { justify-content: center; text-align: center; white-space: normal; min-height: 3.2rem; }
.j-quiz__rep.choisie { border-width: 2px; }
.j-quiz__rep.bonne, .j-quiz__rep.bonne:disabled { background: var(--color-leaf); border-color: var(--color-leaf); color: #fff; opacity: 1; }
.j-quiz__rep.fausse, .j-quiz__rep.fausse:disabled { background: var(--color-chestnut); border-color: var(--color-chestnut); color: #fff; opacity: 1; }
@media (max-width: 520px) { .j-quiz { grid-template-columns: 1fr; } }

/* Bataille */
.j-bataille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.j-bataille__grille { display: grid; gap: 3px; padding: 4px; background: #8a6a45; border-radius: 3px; }
.j-bat-case { aspect-ratio: 1; display: grid; place-items: center; background: #b9c98f; border-radius: 2px; cursor: pointer; }
button.j-bat-case:not(:disabled):hover { background: #d4dfae; }
.j-bat-case:disabled, span.j-bat-case { cursor: default; }
.j-bat-case .ic { width: 70%; height: 70%; color: var(--color-leaf); }
.j-bat-case.arbre { background: #9db574; }
.j-bat-case.touche { background: #e8c48a; }
.j-bat-case.touche .ic { color: var(--color-chestnut); transform: rotate(80deg); }
.j-bat-case.tombe { background: #d9a86a; }
.j-bat-case.rate i { width: 22%; height: 22%; border-radius: 50%; background: rgba(59, 31, 14, .45); }
@media (max-width: 600px) { .j-bataille { grid-template-columns: 1fr; } }

/* Tir à la corde */
.j-corde { position: relative; height: 150px; margin: .6rem 0; border: 1px solid rgba(59, 31, 14, .14); background: linear-gradient(180deg, #f6efe6 0 55%, #8a6a45 55.5% 100%); overflow: hidden; }
.j-corde__ligne { position: absolute; left: 4%; right: 4%; top: 52%; height: 4px; background: #a8875a; border-radius: 2px; }
.j-corde__milieu { position: absolute; left: 50%; top: 30%; bottom: 30%; width: 2px; background: rgba(59, 31, 14, .35); }
.j-corde__char { position: absolute; top: 30%; width: 54px; height: 54px; margin-left: -27px; display: grid; place-items: center; border-radius: 50%; background: #fffcf8; border: 2px solid #5e3a6e; transition: left .15s linear; }
.j-corde__char .ic { width: 34px; height: 34px; color: #5e3a6e; }
.j-corde__but { position: absolute; top: .5rem; font-family: var(--font-label); font-size: .8rem; letter-spacing: .06em; }
.j-corde__but.moi { left: .7rem; color: var(--color-leaf); }
.j-corde__but.lui { right: .7rem; color: var(--color-chestnut); }
.j-corde__tirer { width: 100%; justify-content: center; font-size: 1.3rem; padding: 1.1rem; touch-action: manipulation; user-select: none; }

/* Jeu du moulin */
.j-moulin { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: .6rem auto; background: #e9dcc5; border: 1px solid rgba(59, 31, 14, .2); border-radius: 4px; }
.j-moulin__lignes { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-moulin__lignes rect, .j-moulin__lignes path { fill: none; stroke: #6b4a30; stroke-width: 1.1; }
.j-moulin__point {
  position: absolute; width: 11%; height: 11%; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
}
.j-moulin__point:not(.occupe)::before { content: ''; width: 34%; height: 34%; border-radius: 50%; background: #6b4a30; }
.j-moulin__point:disabled { cursor: default; }
.j-moulin.a-moi .j-moulin__point:not(:disabled):hover { background: rgba(232, 196, 138, .55); }
.j-moulin__point .j-p4__pion { width: 92%; height: 92%; }
.j-moulin__point.cible { background: rgba(42, 79, 33, .25); box-shadow: 0 0 0 2px var(--color-leaf); }
.j-moulin__point.choisi { background: rgba(232, 196, 138, .8); box-shadow: 0 0 0 2px #c48a2c; }
.j-moulin__point.prenable { box-shadow: 0 0 0 3px var(--color-chestnut); animation: j-pulse 1s ease-in-out infinite; }
.j-moulin__point.moulin { box-shadow: 0 0 0 2px #c9952c; }
.j-moulin__point.dernier { background: rgba(255, 255, 255, .6); }

/* ============================================================
   Navigation en familles : Domaine, Bêtes, Gestion, Entre joueurs, Bilan
   ============================================================ */
.j-onglets { display: block; overflow: visible; border-bottom: 0; margin: 1.2rem 0 1.2rem; }
.j-groupes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.j-groupe {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .75rem .5rem; cursor: pointer;
  font-family: var(--font-label); font-size: .95rem; letter-spacing: .06em; color: var(--color-light);
  background: rgba(255, 252, 248, .6); border: 1px solid rgba(59, 31, 14, .14);
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.j-groupe .ic { width: 18px; height: 18px; }
.j-groupe:hover { color: var(--color-text); border-color: rgba(149, 69, 53, .4); }
.j-groupe.actif { color: var(--color-neutral); background: var(--color-chestnut); border-color: var(--color-chestnut); }
.j-groupe.actif .j-pastille-nb { background: var(--color-neutral); color: var(--color-chestnut); }
.j-groupe .j-pastille-nb { position: absolute; top: -7px; right: -5px; }
.j-sous-onglets { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .5rem; border-bottom: 1px solid rgba(59, 31, 14, .14); }
.j-onglet-aide { margin: .55rem 0 0 !important; font-size: 1rem; font-style: italic; color: rgba(59, 31, 14, .65); }
@media (max-width: 760px) {
  .j-groupes { gap: .25rem; }
  .j-groupe { flex-direction: column; gap: .2rem; padding: .55rem .2rem; font-size: .7rem; letter-spacing: .03em; text-align: center; line-height: 1.15; }
  .j-groupe .ic { width: 20px; height: 20px; }
  .j-sous-onglets { flex-wrap: wrap; }   /* tout reste visible, sur deux lignes s'il le faut */
  .j-sous-onglets .j-tab { padding: .6rem .6rem; font-size: .88rem; }
  .j-onglets .j-tab.secondaire { display: inline-flex !important; }
}

/* Mises de la salle de jeux */
.j-mise { border: 1px solid rgba(59, 31, 14, .15); padding: .6rem .7rem .7rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.j-mise legend { font-family: var(--font-label); font-size: .85rem; letter-spacing: .08em; color: var(--color-chestnut); padding: 0 .3rem; }
.j-mise select, .j-mise input { font-family: var(--font-body); font-size: 1.05rem; color: var(--color-text); background: rgba(255, 252, 248, .9); border: 1px solid rgba(59, 31, 14, .25); padding: .5rem .6rem; min-width: 0; }
.j-mise input { width: 8rem; }
.j-mise select[id$="-vache"] { grid-column: 1 / -1; }
.j-mise [hidden] { display: none; }

/* ---------- Fête de la Châtaigne, chancre, album, coopérative ---------- */

.j-evenement.fete { border-left-color: var(--color-chestnut); background: rgba(232, 196, 138, .22); }
.j-carte--fete { border-top: 3px solid var(--color-chestnut); }

.j-arbre__chancre {
  position: absolute; bottom: 2.1rem; left: 50%; z-index: 2; transform: translateX(-50%);
  font-family: var(--font-label); font-size: .72rem; letter-spacing: .06em; white-space: nowrap;
  color: var(--color-neutral); background: #a8471f; padding: 0 .35rem;
  animation: j-pulse 1.6s ease-in-out infinite;
}

.j-album li span { display: grid; line-height: 1.25; }
.j-album li small { font-family: var(--font-label); font-size: .72rem; letter-spacing: .06em; color: var(--color-light); }
.j-album li.fait small { color: #b88a2e; }

.j-liste li.moi { background: rgba(232, 196, 138, .22); }