/* =====================================================================
   ChevalWorld - Theme visuel "centre equestre en bois"
   Inspire de l'ambiance des jeux d'elevage de chevaux en navigateur :
   ciel + prairie en fond, panneaux en planches de bois, boutons "signe
   en bois" avec relief, liseres dores. Recree entierement en CSS
   (degrades/formes), sans aucune image ou police proprietaire copiee.
   ===================================================================== */

:root {
  /* Bois */
  --wood-pale:   #e6c894;
  --wood-light:  #caa06c;
  --wood:        #8a5a35;
  --wood-mid:    #6b4423;
  --wood-dark:   #46290f;
  --wood-shadow: #2c1a09;

  /* Panneaux (parchemin/tan) */
  --panel-top:   #f1dcae;
  --panel-bot:   #d8b47c;
  --panel-line:  #b98f52;

  /* Accents */
  --gold:        #ffd23f;
  --gold-dark:   #c98f1e;
  --green:       #5c9c3e;
  --green-dark:  #3c7226;
  --sky:         #8fd1f3;
  --sky-light:   #d6f0fb;
  --grass:       #8fc25c;
  --red:         #b5402f;
  --red-dark:    #7f2f22;
  --blue:        #3d7ab8;
  --pink:        #c93dab;
  --teal:        #3daab8;

  --ink:         #3a2a1a;
  --cream:       #fff8ea;

  --radius-sm:  .5rem;
  --radius:     .75rem;
  --radius-lg:  1rem;
  --transition: .18s ease;

  --shadow-plank: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.28), 0 3px 7px rgba(0,0,0,.32);
  --shadow-panel: 0 5px 16px rgba(43, 26, 9, .28), inset 0 0 0 3px rgba(70, 41, 15, .35);
}

/* ---------- Typographie ---------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700&display=swap');

body {
  font-family: "Nunito", "Segoe UI", Verdana, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    linear-gradient(180deg, var(--sky) 0%, var(--sky-light) 26%, #d9edb8 46%, var(--grass) 58%, #6ea943 100%) fixed;
  background-attachment: fixed;
}

/* petits nuages + brins d'herbe discrets, en degrades radiaux (pas d'images) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(38px 22px at 12% 9%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(50px 26px at 26% 6%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(34px 20px at 80% 12%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(46px 24px at 92% 18%, rgba(255,255,255,.5), transparent 70%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--wood-dark);
}

a { color: var(--green-dark); text-decoration: none; font-weight: 600; }
a:hover { color: var(--gold-dark); }

main.container { animation: cw-fade-in .35s ease; }
@keyframes cw-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

::selection { background: var(--gold); color: var(--ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--panel-bot); }
::-webkit-scrollbar-thumb { background: var(--wood); border-radius: 8px; border: 2px solid var(--panel-bot); }
::-webkit-scrollbar-thumb:hover { background: var(--wood-mid); }

/* =====================================================================
   STRUCTURE GENERALE : bandeau du haut + menu lateral + contenu
   (remplace l'ancienne barre de navigation Bootstrap classique par une
   mise en page a deux zones, comme un centre equestre : une "enseigne"
   en haut et un panneau d'affichage des activites sur le cote.)
   ===================================================================== */
.cw-shell { display: flex; flex-direction: column; }

/* ---------- Bandeau du haut : poutre en bois avec clous dores ---------- */
.cw-topbar {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, var(--wood) 0%, var(--wood-mid) 55%, var(--wood-dark) 100%);
  box-shadow: var(--shadow-plank), 0 4px 12px rgba(0,0,0,.35);
  border-bottom: 4px solid var(--wood-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.cw-topbar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 6px;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px);
  background-size: 46px 100%;
  background-position: 18px 0;
  opacity: .8;
}
.cw-topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.25rem;
  max-width: 1440px;
  margin: 0 auto;
}
.cw-menu-toggle {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border: 2px solid var(--wood-shadow);
  border-radius: var(--radius-sm);
  color: var(--wood-dark);
  font-size: 1.1rem;
  line-height: 1;
  padding: .35rem .6rem;
  box-shadow: var(--shadow-plank);
}
.cw-brand {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  color: var(--wood-dark) !important;
  border: 2px solid var(--wood-shadow);
  border-radius: var(--radius);
  padding: .3rem .8rem;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: var(--shadow-plank);
  white-space: nowrap;
}
.cw-topbar-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

.cw-chip {
  display: inline-flex; align-items: center; gap: .3em;
  font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: .82rem;
  padding: .35em .75em; border-radius: 2rem; border: 2px solid var(--wood-shadow);
  box-shadow: var(--shadow-plank);
}
.cw-chip-vip { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: var(--wood-dark); }
.cw-chip-pause { background: linear-gradient(180deg, #b9c4cc, #8b98a1); color: var(--wood-dark); text-decoration: none; }

.cw-guest-link { color: var(--gold) !important; font-weight: 700; font-family: "Baloo 2", sans-serif; }
.cw-guest-link:hover { color: #fff !important; }

.cw-account-toggle {
  display: flex; align-items: center; gap: .5rem;
  color: var(--gold) !important; font-weight: 700; font-family: "Baloo 2", sans-serif;
  padding: .3rem .6rem; border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.cw-account-toggle:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.cw-account-toggle::after { border-top-color: currentColor; }

.dropdown-menu {
  border: 3px solid var(--wood-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: .4rem;
  margin-top: .5rem;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  font-weight: 700;
  color: var(--ink);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--gold);
  color: var(--wood-dark);
}

/* ---------- Corps : menu lateral + contenu ---------- */
.cw-layout { display: flex; flex-direction: column; flex: 1; }

.cw-sidenav {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 3px, transparent 3px 26px),
    linear-gradient(180deg, var(--wood-light), var(--wood));
  border-bottom: 4px solid var(--wood-shadow);
}
.cw-sidenav-list {
  list-style: none; margin: 0; padding: .75rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.cw-sidenav-list a {
  display: block;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border: 2px solid var(--wood-shadow);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 700;
  padding: .55rem .8rem;
  box-shadow: var(--shadow-plank);
  transition: transform var(--transition), background var(--transition);
}
.cw-sidenav-list a:hover { transform: translateX(3px); background: linear-gradient(180deg, var(--gold), var(--panel-bot)); }
.cw-sidenav-list a.active {
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  color: #fff;
  border-color: #2c5419;
}
.cw-sidenav-list a.cw-sidenav-vip { color: var(--gold-dark); }
.cw-sidenav-list a.cw-sidenav-vip.active { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); color: var(--wood-dark); }
.cw-sidenav-list a.cw-sidenav-admin { color: var(--red-dark); }
.cw-sidenav-list a.cw-sidenav-admin.active { background: linear-gradient(180deg, var(--red), var(--red-dark)); color: #fff; border-color: var(--wood-shadow); }

.cw-main { flex: 1 1 auto; min-width: 0; padding: 1.25rem 1.25rem 2rem; }

@media (min-width: 992px) {
  .cw-layout { flex-direction: row; align-items: flex-start; max-width: 1440px; margin: 0 auto; width: 100%; }
  .cw-sidenav {
    width: 230px; flex-shrink: 0;
    position: sticky; top: 58px;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    border-bottom: none;
    border-right: 4px solid var(--wood-shadow);
    box-shadow: 3px 0 10px rgba(0,0,0,.15);
  }
  .cw-main { padding: 1.75rem 2rem 2.5rem; }
}

/* ---------- Boutons "plaque en bois" ---------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: "Baloo 2", sans-serif;
  letter-spacing: .2px;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.btn:active { transform: translateY(2px); box-shadow: none !important; }

.btn-cw-primary, .btn-cw-primary:visited {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  border: 2px solid #2c5419;
  color: #fefbe9;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  box-shadow: var(--shadow-plank);
}
.btn-cw-primary:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff; }

.btn-primary {
  background: linear-gradient(180deg, var(--blue), #2b5c8f);
  border: 2px solid #1f4267; color: #fff; box-shadow: var(--shadow-plank);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }

.btn-outline-secondary, .btn-outline-danger, .btn-outline-primary {
  border-width: 2px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
}
.btn-outline-secondary:hover, .btn-outline-danger:hover, .btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-plank);
}

.btn-warning { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); border: 2px solid #8f6414; color: var(--wood-dark); box-shadow: var(--shadow-plank); }

/* ---------- Badges & avatars ---------- */
.cw-badge-money {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: var(--wood-dark);
  font-weight: 800;
  font-family: "Baloo 2", sans-serif;
  padding: .4em .8em .4em 1.7em;
  border-radius: 2rem;
  border: 2px solid #8f6414;
  box-shadow: var(--shadow-plank);
  position: relative;
}
.cw-badge-money::before {
  content: "🪙";
  position: absolute;
  left: .35em; top: 50%; transform: translateY(-50%);
  font-size: 1em;
}

.cw-avatar-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 0 0 2px var(--wood-shadow); }
.cw-avatar-lg { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold); box-shadow: 0 0 0 3px var(--wood-shadow), var(--shadow-panel); }

/* ---------- Panneaux / cartes en bois ---------- */
.card-cw {
  background: linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  border: 3px solid var(--wood-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}

/* Titre en tete de panneau = plaque en bois sombre incrustee */
.card-cw > h2:first-child, .card-cw > h3:first-child,
.card-cw > h4:first-child, .card-cw > h5:first-child {
  display: block;
  background: linear-gradient(180deg, var(--wood-mid), var(--wood-dark));
  color: var(--gold);
  font-family: "Baloo 2", sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 1.05rem;
  padding: .55rem 1rem;
  margin: -.4rem -.4rem 1rem -.4rem;
  border-radius: var(--radius-sm);
  border-bottom: 3px solid var(--gold-dark);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.horse-card { transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; }
.horse-card:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--shadow-panel); }
.horse-card img.horse-thumb {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
  background: linear-gradient(135deg, var(--panel-top), var(--wood-light));
}

.badge-rarity {
  display: inline-block; color: #fff; font-size: .72rem; font-weight: 800;
  font-family: "Baloo 2", sans-serif;
  padding: .28em .75em; border-radius: 1rem; text-shadow: 0 1px 1px rgba(0,0,0,.35);
  box-shadow: 0 1px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  letter-spacing: .3px;
}

/* ---------- Barres de stats (planche graduee) ---------- */
.stat-bar { height: 12px; border-radius: 6px; background: #6b4d2c; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.15); }
.stat-bar > div { height: 100%; border-radius: 6px; transition: width .3s ease; }
.stat-bar.life > div { background: linear-gradient(90deg, var(--red-dark), var(--red)); }
.stat-bar.energy > div { background: linear-gradient(90deg, #2b5c8f, var(--blue)); }
.stat-bar.hunger > div { background: linear-gradient(90deg, var(--gold-dark), #e0ab3d); }
.stat-bar.thirst > div { background: linear-gradient(90deg, #257884, var(--teal)); }
.stat-bar.happiness > div { background: linear-gradient(90deg, #8f2d7c, var(--pink)); }
.stat-bar.skill > div { background: linear-gradient(90deg, var(--green-dark), var(--green)); }

/* ---------- Boxes de l'ecurie (stalles en bois) ---------- */
.box-slot {
  border: 3px dashed var(--wood);
  border-radius: var(--radius);
  min-height: 180px;
  background: repeating-linear-gradient(180deg, rgba(139,90,53,.05) 0 10px, transparent 10px 20px);
  transition: border-color var(--transition), background var(--transition);
}
.box-slot.filled {
  border-style: solid;
  background: linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  box-shadow: var(--shadow-panel);
}
.box-slot.empty { display: flex; align-items: center; justify-content: center; color: var(--wood); font-weight: 700; }
.box-slot.empty:hover { border-color: var(--gold-dark); background: rgba(255, 210, 63, .12); }

/* ---------- Pied de page : poutre basse ---------- */
.cw-footer {
  background:
    radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px) top / 46px 100%,
    linear-gradient(180deg, var(--wood-mid), var(--wood-shadow));
  color: var(--panel-top);
  margin-top: 3rem;
  border-top: 4px solid var(--wood-shadow);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.06);
}

/* ---------- Mini-jeux (enseignes suspendues) ---------- */
.minigame-tile {
  background: linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  text-align: center;
  border: 3px solid var(--wood-mid);
  box-shadow: var(--shadow-panel);
  transition: transform var(--transition), box-shadow var(--transition);
}
.minigame-tile:hover { box-shadow: 0 10px 22px rgba(43,26,9,.35); transform: translateY(-4px) rotate(-.4deg); }

.medal-icon { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }

/* ---------- Formulaires ---------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 2px solid var(--panel-line);
  background-color: #fffdf6;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 .2rem rgba(255, 210, 63, .35);
}
.form-label { font-weight: 800; font-family: "Baloo 2", sans-serif; color: var(--wood-dark); }

/* ---------- Tableaux (planche a rayures) ---------- */
.table.card-cw {
  overflow: hidden;
  border-radius: var(--radius);
  border: 3px solid var(--wood-mid);
}
.table.card-cw thead {
  background: linear-gradient(180deg, var(--wood), var(--wood-dark));
  color: var(--gold);
}
.table.card-cw thead th { border: none; font-weight: 700; font-family: "Baloo 2", sans-serif; text-transform: uppercase; font-size: .82rem; letter-spacing: .3px; }
.table.card-cw tbody { background: var(--panel-top); }
.table.card-cw tbody tr:hover { background: rgba(255, 210, 63, .25); }

/* ---------- Alertes (petits panneaux) ---------- */
.alert {
  border: 2px solid transparent;
  border-left: 6px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-plank);
  font-weight: 600;
}
.alert-success { border-left-color: var(--green-dark); background: #e9f4dd; }
.alert-danger  { border-left-color: var(--red-dark); background: #f7e2de; }
.alert-warning { border-left-color: var(--gold-dark); background: #fdf1d6; }
.alert-info    { border-left-color: var(--blue); background: #e1eefa; }

/* ---------- Listes de navigation (barre laterale admin, etc.) ---------- */
.list-group-item.list-group-item-action {
  border: 2px solid var(--panel-line);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border-radius: var(--radius-sm) !important;
  margin-bottom: .35rem;
  font-weight: 700;
  color: var(--ink);
  transition: background var(--transition), transform var(--transition);
}
.list-group-item.list-group-item-action:hover {
  background: var(--gold);
  transform: translateX(3px);
}
.list-group-item.list-group-item-action.active {
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  border-color: #2c5419;
  color: #fff;
}