/* =========================
   VARIABLES - FARMING SIMULATOR 25
   ========================= */
:root{
  --bg1:#070a07;
  --bg2:#0c150e;

  --border: rgba(255,255,255,.16);

  --text:#eafbea;
  --muted: rgba(234,251,234,.72);

  --accent:#81c332;
  --accent2:#026d63;
  --accent3:#f8c887;

  --radius: 18px;
}

*{ box-sizing:border-box }
html{ height:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 0%, rgba(129,195,50,.16), transparent 55%),
    radial-gradient(900px 700px at 85% 15%, rgba(2,109,99,.16), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}


/* =========================
   TOPBAR
   ========================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  letter-spacing:1.4px;
  font-size:16px;
  text-transform:uppercase;
}

.brand-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(129,195,50,.18);
  border:1px solid rgba(129,195,50,.35);
}

.topbar-left{
  display:flex;
  align-items:center;
  gap:16px;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:16px;
  border-left:1px solid var(--border);
}

.lang-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:22px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border);
  opacity:.55;
  cursor:pointer;
  transition: opacity .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lang-flag svg{ display:block; width:100%; height:100%; }
.lang-flag:hover{ opacity:.85; transform: translateY(-1px); }
.lang-flag.is-active{
  opacity:1;
  border-color: rgba(129,195,50,.55);
  box-shadow: 0 0 0 2px rgba(129,195,50,.25);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
}

/* =========================
   CLOCHE DE NOTIFICATIONS (topbar, toutes les pages connectées)
   ========================= */
.notif-wrap{ position:relative; }

.notif-trigger{
  position:relative;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.notif-trigger svg{ width:19px; height:19px; }

.notif-trigger:hover{
  border-color: var(--accent);
  background: rgba(129,195,50,.14);
  color:var(--text);
}

.notif-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#ff5a6e;
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  border:2px solid var(--bg2);
}

.notif-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:340px;
  max-width:calc(100vw - 32px);
  background: linear-gradient(180deg, rgba(20,26,20,.98), rgba(10,14,10,.98));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  padding:16px;
  z-index:60;
}

.notif-dropdown.is-open{ display:block; }

.notif-dropdown-title{
  margin:0 0 10px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
}

.notif-empty{
  margin:0;
  padding:14px 4px;
  font-size:13.5px;
  color:var(--muted);
  text-align:center;
}

.notif-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:340px;
  overflow-y:auto;
}

.notif-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 8px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  transition: background .15s ease;
}

.notif-item:hover{ background: rgba(255,255,255,.06); }

.notif-item-icon{
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(248,200,135,.16);
  border:1px solid rgba(248,200,135,.4);
  color:var(--accent3);
}

.notif-item-icon svg{ width:15px; height:15px; }

.notif-item-text{
  font-size:13px;
  line-height:1.4;
}

/* Annonce du site (voir /admin/options) : affichée sous la topbar sur
   toutes les pages tant qu'un texte est renseigné. */
.site-announcement{
  padding:10px 32px;
  background: rgba(129,195,50,.12);
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-size:14px;
  text-align:center;
}

.avatar-trigger{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}

.avatar-trigger:hover{
  border-color: var(--accent);
  background: rgba(129,195,50,.14);
}

.avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.avatar-default{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

.avatar-modal-preview{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.avatar-img-large,
.avatar-default-large{
  width:84px;
  height:84px;
}

.avatar-modal-preview .avatar-img-large{
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
}

.avatar-modal-preview .avatar-default-large{
  border-radius:50%;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
}

/* =========================
   PIED DE PAGE
   ========================= */
.site-footer{
  flex-shrink:0;
  padding:18px 32px;
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.04);
  text-align:center;
}

.site-footer p{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
}

.footer-links{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
}

.footer-links a{
  color:var(--muted);
  text-decoration:none;
}
.footer-links a:hover{
  color:var(--text);
  text-decoration:underline;
}
.footer-links span{
  color:var(--border);
}

/* =========================
   LAYOUT GENERAL
   ========================= */
.wrap{
  flex:1 0 auto;
  max-width:1100px;
  margin:0 auto;
  width:100%;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:36px;
}

/* Variante presque sans marges gauche/droite, largeur max retirée (page
   Communauté : laisse le tableau des sujets + l'encart "joueurs connectés"
   utiliser la largeur de l'écran, avec juste une légère respiration). */
.wrap-flush{
  max-width:none;
  gap:6px;
  padding-left:16px;
  padding-right:16px;
}

/* Variante avec un espacement vertical resserré entre les sections (page
   d'un sujet Communauté : le gros espace entre le message et le bloc des
   réponses n'a pas lieu d'être). */
.wrap-compact{
  max-width:none;
  gap:16px;
  padding-left:16px;
  padding-right:16px;
}

.block h2{
  margin:0 0 16px;
  font-size:20px;
  font-weight:600;
}

.muted{ color:var(--muted); }
.small{ font-size:13px; }

/* =========================
   GRID / CARTES (listes : fermes, joueurs, stats)
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:16px;
  margin-bottom:20px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.card h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:600;
}

.tag{
  display:inline-block;
  margin:0 0 10px;
  font-size:13px;
  color:var(--accent3);
}

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background: rgba(129,195,50,.18);
  color:var(--accent);
  border:1px solid rgba(129,195,50,.35);
}

.player-card{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Cartes de la page Équipe : plus riches que .player-card (avatar réel,
   rôle en badge coloré, date d'adhésion). Classe séparée pour ne pas
   affecter la page Joueurs, qui garde son format compact. */
.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding:26px 20px;
}

.team-card-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-card-avatar .avatar-default{
  color:var(--muted);
}

.team-card h3{
  margin:4px 0 0;
  display:flex;
  align-items:center;
  gap:8px;
}

.team-card-since{
  margin:0;
}

.team-card-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:4px;
}

.badge-role-owner{
  background: rgba(129,195,50,.16);
  color:var(--accent);
  border-color: rgba(129,195,50,.35);
}

.badge-role-manager{
  background: rgba(2,109,99,.24);
  color:#3fd9c7;
  border-color: rgba(63,217,199,.4);
}

.badge-role-foreman{
  background: rgba(248,200,135,.18);
  color:var(--accent3);
  border-color: rgba(248,200,135,.4);
}

.badge-role-worker{
  background: rgba(255,255,255,.05);
  color:var(--muted);
  border-color: var(--border);
}

.avatar{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-weight:600;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#07130a;
}

.stat-card{ text-align:center; }

.stat-card h3{
  font-size:28px;
  margin-bottom:6px;
}

/* =========================
   FORMULAIRES
   ========================= */
.forms-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.mini-form{
  flex:1 1 280px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.mini-form h4{
  margin:0 0 14px;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.field label{
  font-size:12.5px;
  color:var(--muted);
}

input, select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
  font-family:inherit;
}

input:focus, select:focus{
  outline:none;
  border-color: rgba(129,195,50,.6);
  box-shadow:0 0 0 3px rgba(129,195,50,.15);
}

/* =========================
   OUTILS (/outils) : onglets + calculateurs
   ========================= */
.tool-tabs{
  margin-bottom:22px;
}

.calc-layout{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

.calc-form{
  flex:0 0 300px;
}

.calc-results{
  flex:1 1 auto;
  min-width:0;
}

.calc-result-value{
  margin:4px 0 0;
  font-size:24px;
  font-weight:700;
}

.calc-result-value--highlight{
  color:var(--accent);
}

.calc-result-value--bad{
  color:#ff5a6e;
}

.calc-hint{
  margin:16px 0 0;
  font-size:12.5px;
  color:var(--muted);
}

@media (max-width: 760px){
  .calc-layout{ flex-direction:column; }
  .calc-form{ flex:1 1 auto; width:100%; }
}

/* =========================
   BOUTONS
   ========================= */
.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  font-family:inherit;
}

.btn-primary{
  color:white;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.btn-secondary{
  color:var(--text);
  background: rgba(255,255,255,.1);
  border:1px solid var(--border);
}

.btn-ghost{
  color:var(--muted);
  background:none;
  border:1px solid var(--border);
}

.btn-small{
  padding:7px 12px;
  font-size:13px;
}

/* =========================
   ALERTES
   ========================= */
.alert{
  padding:12px 16px;
  border-radius:14px;
  background: rgba(255,77,109,.14);
}

.alert.ok{
  background: rgba(129,195,50,.16);
}

/* =========================
   ACCUEIL (dashboard) : marché du jour, tuiles
   ========================= */
.dash-section{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.dash-section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.dash-section-title{
  margin:0;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
}

/* Encart "Astuce Farming Simulator 25" : un conseil de jeu qui change
   chaque jour (voir DashboardController::tips()). Style "carte" neutre,
   distinct des tuiles de navigation. */
.dash-tip{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 24px;
}

.dash-tip-icon{
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(248,200,135,.16);
  border:1px solid rgba(248,200,135,.4);
  color:var(--accent3);
}

.dash-tip-icon svg{ width:20px; height:20px; }

.dash-tip-label{
  margin:0 0 4px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--accent3);
}

.dash-tip-text{
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  max-width:70ch;
}

/* =========================
   TUILES DE NAVIGATION (bas du dashboard)
   ========================= */
.tiles{
  width:100%;
  display:grid;
  /* 4 tuiles (Ma ferme, Fermes existantes, Communauté, Outils) : grille 2x2. */
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(170px, 210px);
  gap:20px;
}

@media (max-width: 640px){
  .tiles{ grid-template-columns: 1fr; grid-auto-rows: minmax(140px, 160px); }
}

.tile{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:clamp(18px, 2.4vw, 28px);
  border-radius:20px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,
    border-color .4s ease;
}

/* Couche photo (zoomee au survol) */
.tile::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image: var(--tile-bg, none);
  background-size:cover;
  background-position:center;
  filter: saturate(.9) brightness(.9);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  z-index:0;
}

/* Voile sombre pour la lisibilite du texte (s'eclaircit au survol) */
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(200deg, rgba(4,7,4,.40) 0%, rgba(4,7,4,.68) 55%, rgba(4,7,4,.92) 100%);
  transition: background .45s ease;
  z-index:0;
}

.tile-top, .tile-bottom{
  position:relative;
  z-index:1;
}

.tile-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.tile-icon{
  width:44px;
  height:44px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  color: var(--muted);
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}

.tile-icon svg{ width:22px; height:22px; }

.tile-arrow{
  color:var(--muted);
  font-size:22px;
  opacity:.65;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease, color .4s ease;
}

/* Titre en haut a gauche, en grand */
.tile-title{
  margin:0;
  text-align:right;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.1;
  transition: color .4s ease;
}

.tile-bottom{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.tile-info{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tile-info .muted{ font-size:14px; }

/* Le descriptif complet reste dans le markup (utile aux lecteurs d'ecran)
   mais masqué visuellement : les tuiles sont maintenant compactes (elles ne
   remplissent plus l'écran), l'icône + le titre + la ligne de chiffres
   suffisent à identifier chaque section. */
.tile-desc{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* --- Effet "wow" au survol : zoom photo + lumiere + halo vert + titre qui s'illumine --- */
.tile:hover{
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(129,195,50,.65);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(129,195,50,.55),
    0 0 55px rgba(129,195,50,.30);
}

.tile:hover::before{
  transform: scale(1.15);
  filter: saturate(1.25) brightness(1.1);
}

.tile:hover::after{
  background: linear-gradient(200deg, rgba(4,7,4,.16) 0%, rgba(4,7,4,.40) 55%, rgba(4,7,4,.80) 100%);
}

.tile:hover .tile-title{
  color: var(--accent3);
}

.tile:hover .tile-arrow{
  transform: translateX(6px);
  opacity:1;
  color:var(--accent);
}

.tile:hover .tile-icon{
  background: rgba(129,195,50,.2);
  border-color: rgba(129,195,50,.45);
  color: var(--accent);
}

.tile--ferme{ --tile-bg: url('/images/tile-ferme.jpg'); }
.tile--serveurs{ --tile-bg: url('/images/tile-fermes.jpg'); }

/* Pas de photo pour ces tuiles (rien de pertinent à montrer) : un motif
   abstrait dans les couleurs du site à la place, sur le même dégradé sombre
   que le reste de la page. */
.tile--communaute{
  --tile-bg: url('/images/tile-communaute.svg');
  background: linear-gradient(160deg, rgba(2,109,99,.35), rgba(7,10,7,.9));
}
.tile--communaute::before{ background-size:120% 120%; }

.tile--outils{
  --tile-bg: url('/images/tile-outils.svg');
  background: linear-gradient(160deg, rgba(129,195,50,.22), rgba(7,10,7,.9));
}
.tile--outils::before{ background-size:120% 120%; }

/* =========================
   ANIMATION D'OUVERTURE DE PAGE
   ========================= */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.topbar{
  animation: fadeInUp .5s cubic-bezier(.2,.8,.2,1) both;
}

.site-footer{
  animation: fadeInUp .5s cubic-bezier(.2,.8,.2,1) .05s both;
}

.block{
  animation: fadeInUp .55s cubic-bezier(.2,.8,.2,1) .08s both;
}

.tile,
.card,
.mini-form{
  animation: fadeInUp .55s cubic-bezier(.2,.8,.2,1) both;
}

.tiles .tile:nth-child(1){ animation-delay:.10s; }
.tiles .tile:nth-child(2){ animation-delay:.18s; }
.tiles .tile:nth-child(3){ animation-delay:.26s; }
.tiles .tile:nth-child(4){ animation-delay:.34s; }

.grid > *:nth-child(1){ animation-delay:.10s; }
.grid > *:nth-child(2){ animation-delay:.15s; }
.grid > *:nth-child(3){ animation-delay:.20s; }
.grid > *:nth-child(4){ animation-delay:.25s; }
.grid > *:nth-child(5){ animation-delay:.30s; }
.grid > *:nth-child(6){ animation-delay:.35s; }
.grid > *:nth-child(n+7){ animation-delay:.38s; }

.forms-row .mini-form:nth-child(1){ animation-delay:.15s; }
.forms-row .mini-form:nth-child(2){ animation-delay:.22s; }

@media (prefers-reduced-motion: reduce){
  .topbar, .site-footer, .block, .tile, .card, .mini-form{
    animation:none;
  }
}

/* =========================
   FERME - LAYOUT AVEC SIDEBAR
   ========================= */
body.page-farm{
  height:100vh;
  overflow:hidden;
}

.farm-layout{
  flex:1 0 auto;
  min-height:0;
  display:flex;
  width:100%;
  overflow:hidden;
}

.farm-sidebar{
  width:260px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  padding:28px 20px;
  border-right:1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.farm-sidebar-header{
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
}

.farm-sidebar-name{
  margin:0 0 6px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}

.farm-sidebar-role{
  margin:0;
  font-size:12.5px;
  color:var(--accent3);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.farm-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}

.farm-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
  font-size:14.5px;
  font-weight:500;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  border:1px solid transparent;
}

.farm-nav a svg{
  width:19px;
  height:19px;
  flex-shrink:0;
}

.farm-nav a:hover{
  background: rgba(255,255,255,.06);
  color:var(--text);
}

.farm-nav a.active{
  background: rgba(129,195,50,.16);
  color:var(--accent);
  border-color: rgba(129,195,50,.3);
}

/* Pastille d'alerte à droite d'un lien du menu (ex : factures en attente de
   paiement) — attire l'oeil sans être une couleur d'erreur. */
.farm-nav-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent3);
  color:#241a08;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.farm-sidebar-exit{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  transition: color .25s ease;
}

.farm-sidebar-exit:hover{ color:var(--text); }

.farm-content{
  flex:1;
  min-width:0;
  padding:32px;
  overflow-y:auto;
}

.farm-empty{
  height:100%;
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
}

.farm-empty-icon{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--muted);
}

.farm-empty-icon svg{ width:30px; height:30px; }

.farm-empty h2{ margin:0; font-size:20px; }

@media (max-width: 780px){
  .farm-layout{ flex-direction:column; overflow:visible; }
  body.page-farm{ height:auto; overflow:visible; }
  .farm-sidebar{
    width:100%;
    flex-direction:row;
    align-items:center;
    padding:14px 20px;
    overflow-x:auto;
  }
  .farm-sidebar-header{ display:none; }
  .farm-nav{ flex-direction:row; }
  .farm-sidebar-exit{ display:none; }
}

/* Anime aussi la sidebar et le contenu de la page ferme */
.farm-sidebar{ animation: fadeInUp .5s cubic-bezier(.2,.8,.2,1) .05s both; }
.farm-content{ animation: fadeInUp .55s cubic-bezier(.2,.8,.2,1) .1s both; }

@media (prefers-reduced-motion: reduce){
  .farm-sidebar, .farm-content{ animation:none; }
}

/* Logo/titre cliquable (retour au dashboard) */
a.brand{
  text-decoration:none;
  color:inherit;
}

a.brand:hover .brand-icon{
  background: rgba(129,195,50,.28);
  border-color: rgba(129,195,50,.5);
}

/* Suppression de la ferme (propriétaire uniquement), en bas de la sidebar */
.farm-sidebar-delete-form{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.farm-sidebar-delete{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:13px;
  color: rgba(255,90,110,.8);
  cursor:pointer;
  text-align:left;
  transition: color .25s ease;
}

.farm-sidebar-delete svg{
  width:15px;
  height:15px;
  flex-shrink:0;
}

.farm-sidebar-delete:hover{
  color:#ff5a6e;
}

/* =========================
   FINANCES : en-tete, tableau, badges, modal
   ========================= */
.finance-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.finance-header h2{ margin:0; }

.badge-income{
  background: rgba(129,195,50,.16);
  color:var(--accent);
  border-color: rgba(129,195,50,.35);
}

/* Catégories du forum "Communauté" (voir ForumTopic::categories()) */
.badge-category-general{
  background: rgba(255,255,255,.09);
  color:var(--muted);
  border-color: var(--border);
}

.badge-category-technique{
  background: rgba(255,90,110,.14);
  color:#ff5a6e;
  border-color: rgba(255,90,110,.35);
}

.badge-category-idee{
  background: rgba(2,109,99,.24);
  color:#3fd9c7;
  border-color: rgba(63,217,199,.4);
}

.badge-expense{
  background: rgba(255,90,110,.14);
  color:#ff5a6e;
  border-color: rgba(255,90,110,.35);
}

/* =========================
   COMMUNAUTE : mise en page (tableau des sujets + encart "joueurs
   connectés"), style des titres de sujets
   ========================= */
.community-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
}

.community-topics{
  flex:1 1 auto;
  min-width:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

/* Colonne principale de la page d'un sujet (message + réponses empilés),
   à côté de l'encart "Ajouter un commentaire" (voir .community-online). */
.community-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.community-online{
  flex:0 0 260px;
  width:260px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.online-players-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.online-players-list li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--text);
}

.online-dot{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--accent);
  box-shadow: 0 0 6px rgba(129,195,50,.75);
}

.topic-title-cell{
  position:relative;
}

.topic-title-cell::before{
  content:'';
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:16px;
  border-radius:2px;
  background:var(--accent);
}

.topic-title-link{
  color:var(--text);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  transition: color .15s ease;
}

.topic-title-link:hover{
  color:var(--accent);
  text-decoration:underline;
}

@media (max-width: 900px){
  .community-layout{
    flex-direction:column;
  }

  .community-online{
    width:100%;
    flex:1 1 auto;
  }

  .community-online.reply-form-aside{
    width:100%;
    flex:1 1 auto;
  }
}

/* Encart "Ajouter un commentaire" (page d'un sujet) : plus large que
   l'encart "joueurs connectés" de la page d'accueil, d'où la classe à part
   plutôt qu'une modification de .community-online. */
.community-online.reply-form-aside{
  flex:0 0 340px;
  width:340px;
}

/* =========================
   COMMUNAUTE : page d'un sujet (community/show.blade.php)
   ========================= */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  transition: color .15s ease;
}

.back-link:hover{
  color:var(--text);
}

.topic-post-title{
  margin:0;
  font-size:19px;
  font-weight:700;
  line-height:1.3;
}

.topic-post-frame{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.topic-post-frame-header{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 12px;
  margin-bottom:12px;
}

.topic-post-frame-header .topic-post-title{
  flex:1 1 auto;
  min-width:0;
}

.topic-post-author{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.topic-post-author-name{
  text-align:right;
}

.topic-post-body{
  white-space:pre-line;
  line-height:1.6;
  margin:0;
}

/* Réponses : espacement volontairement resserré pour rester lisible même
   quand un sujet en compte beaucoup. */
.reply-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-left:20px;
}

.reply-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 0;
  border-top:1px solid var(--border);
}

.reply-list .reply-card:first-child{
  padding-top:0;
  border-top:none;
}

.reply-card-author{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
}

.reply-card-author-name{
  text-align:right;
  white-space:nowrap;
}

.reply-card-body{
  white-space:pre-line;
  line-height:1.5;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  max-width:640px;
}

/* Réponse postée par un administrateur du site (voir users.is_admin). */
.reply-card-body--admin{
  color:var(--accent);
  font-weight:600;
}

.reply-form{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

/* Dans l'encart "Ajouter un commentaire" (page d'un sujet), le formulaire
   est seul dans sa boîte : pas besoin du séparateur du haut. */
.community-online .reply-form{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

.avatar-sm{
  width:28px;
  height:28px;
  min-width:28px;
  font-size:12px;
}

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
}

/* Rectangle du forum (page Communauté) : hauteur plafonnée, une scrollbar
   apparaît dans le tableau si la liste de sujets dépasse — les filtres
   au-dessus restent toujours visibles. */
.community-topics .table-wrap{
  height:460px;
  overflow-y:auto;
}

.community-topics .table-wrap thead th{
  position:sticky;
  top:0;
  z-index:1;
}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.table th{
  text-align:left;
  padding:12px 16px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  background: rgba(255,255,255,.04);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  white-space:nowrap;
}

.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background: rgba(255,255,255,.03); }

.amount-income{ color:var(--accent); font-weight:600; }
.amount-expense{ color:#ff5a6e; font-weight:600; }

.table form{ margin:0; }

/* Modal (ajout de mouvement) */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(4,7,4,.72);
  backdrop-filter: blur(4px);
  align-items:flex-start;
  justify-content:center;
  z-index:50;
  padding:40px 20px;
  overflow-y:auto;
}

.modal-overlay.is-open{ display:flex; }

.modal{
  width:100%;
  max-width:460px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  padding:24px;
  animation: fadeInUp .35s cubic-bezier(.2,.8,.2,1) both;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.modal-header h3{ margin:0; font-size:18px; }

.modal-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition: color .2s ease;
}

.modal-close:hover{ color:var(--text); }

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
}

@media (prefers-reduced-motion: reduce){
  .modal{ animation:none; }
}

@media (max-width: 640px){
  .finance-header{ flex-direction:column; align-items:flex-start; }
}

/* Filtres au-dessus du tableau des mouvements */
.table-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:16px;
  margin-bottom:16px;
}

.table-filters .field{
  margin:0;
  min-width:200px;
}

/* Solde actuel affiche directement dans l'en-tete de la page Finances */
.finance-balance{
  margin:6px 0 0;
  font-size:14.5px;
  color:var(--muted);
}

.finance-balance strong{
  color:var(--text);
  font-size:21px;
  font-weight:700;
}

/* Barre d'outils du tableau (recherche a droite) + filtre de type integre a l'en-tete */
.table-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.filter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.filter-pill{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.filter-pill:hover{
  background: rgba(255,255,255,.08);
  color:var(--text);
}

.filter-pill.is-active{
  background: rgba(129,195,50,.18);
  border-color: rgba(129,195,50,.5);
  color:var(--accent);
}

.table-search{
  width:100%;
  max-width:260px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
}

.table-search:focus{
  outline:none;
  border-color: rgba(129,195,50,.6);
  box-shadow:0 0 0 3px rgba(129,195,50,.15);
}

/* Barre de recherche dynamique "Recruter un joueur" (modal Équipe) */
.recruit-search{
  width:100%;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
  margin-bottom:10px;
}

.recruit-search:focus{
  outline:none;
  border-color: rgba(129,195,50,.6);
  box-shadow:0 0 0 3px rgba(129,195,50,.15);
}

.recruit-results{
  max-height:220px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;
  flex-direction:column;
}

.recruit-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:10px 12px;
  background:none;
  border:none;
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  text-align:left;
  cursor:pointer;
  transition: background .15s ease;
}

.recruit-result:last-child{
  border-bottom:none;
}

.recruit-result:hover{
  background: rgba(255,255,255,.06);
}

.recruit-result.is-selected{
  background: rgba(129,195,50,.14);
}

.recruit-result-name{
  font-weight:600;
}

.th-filter{
  display:flex;
  align-items:center;
  gap:6px;
}

.th-filter-select{
  padding:2px 5px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color:var(--text);
  font-family:inherit;
  font-size:11px;
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
}

@media (max-width: 640px){
  .table-toolbar{ justify-content:stretch; }
  .table-search{ max-width:none; }
}

/* =========================
   CHAMPS
   ========================= */
textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
  font-family:inherit;
  resize:vertical;
}

textarea:focus{
  outline:none;
  border-color: rgba(129,195,50,.6);
  box-shadow:0 0 0 3px rgba(129,195,50,.15);
}

.field-hint{
  margin:2px 0 0;
  font-size:12px;
  color:var(--muted);
}

.table-actions{
  display:flex;
  gap:8px;
}

.badge-status-empty{
  background: rgba(255,255,255,.08);
  color:var(--muted);
  border-color: rgba(255,255,255,.16);
}

.badge-status-seeded{
  background: rgba(248,200,135,.18);
  color:var(--accent2);
  border-color: rgba(248,200,135,.4);
}

.badge-status-ready{
  background: rgba(129,195,50,.18);
  color:var(--accent);
  border-color: rgba(129,195,50,.35);
}

.badge-status-harvested{
  background: rgba(2,109,99,.28);
  color:var(--accent3);
  border-color: rgba(2,109,99,.5);
}

.badge-status-neuf{
  background: rgba(129,195,50,.18);
  color:var(--accent);
  border-color: rgba(129,195,50,.35);
}

.badge-status-bon{
  background: rgba(2,109,99,.28);
  color:var(--accent3);
  border-color: rgba(2,109,99,.5);
}

.badge-status-use{
  background: rgba(248,200,135,.18);
  color:var(--accent2);
  border-color: rgba(248,200,135,.4);
}

.badge-status-en_panne{
  background: rgba(255,90,110,.14);
  color:#ff5a6e;
  border-color: rgba(255,90,110,.4);
}

.badge-type-vache{
  background: rgba(129,195,50,.18);
  color:var(--accent);
  border-color: rgba(129,195,50,.35);
}

.badge-type-cochon{
  background: rgba(248,200,135,.18);
  color:var(--accent3);
  border-color: rgba(248,200,135,.4);
}

.badge-type-poule{
  background: rgba(2,109,99,.28);
  color:var(--accent3);
  border-color: rgba(2,109,99,.5);
}

.badge-type-mouton{
  background: rgba(2,109,99,.24);
  color:#3fd9c7;
  border-color: rgba(63,217,199,.4);
}

.badge-type-cheval{
  background: rgba(255,255,255,.05);
  color:var(--muted);
  border-color: var(--border);
}

.badge-type-autre{
  background: rgba(255,90,110,.14);
  color:#ff5a6e;
  border-color: rgba(255,90,110,.4);
}

/* =========================
   ROTATION DES CULTURES
   ========================= */
.rotation-add-form{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}

.rotation-add-form input{
  flex:1;
}

.rotation-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rotation-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.rotation-item.is-current{
  border-color: rgba(129,195,50,.5);
  background: rgba(129,195,50,.1);
}

.rotation-item-crop{
  font-size:14px;
}

.rotation-item-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.rotation-item-actions form{ margin:0; }

.btn-icon-mini{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  font-size:13px;
  line-height:1;
}

.btn-icon-mini:hover{
  background: rgba(255,255,255,.1);
}

.btn-icon-mini:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.btn-icon-mini-danger{
  color:#ff5a6e;
  border-color: rgba(255,90,110,.35);
}

.btn-icon-mini-danger:hover{
  background: rgba(255,90,110,.14);
}

/* =========================
   NOTIFICATION FLOTTANTE (TOAST)
   ========================= */
.toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform: translateX(-50%);
  z-index:1000;
  max-width:360px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation: toastIn .3s cubic-bezier(.2,.8,.2,1) both;
}

.toast-hide{
  animation: toastOut .4s ease both;
}

@keyframes toastIn{
  from{ opacity:0; transform: translate(-50%, 14px); }
  to{ opacity:1; transform: translate(-50%, 0); }
}

@keyframes toastOut{
  from{ opacity:1; transform: translate(-50%, 0); }
  to{ opacity:0; transform: translate(-50%, 14px); }
}

@media (prefers-reduced-motion: reduce){
  .toast{ animation:none; }
  .toast-hide{ animation:none; }
}

/* Bouton d'action destructive dans un modal (ex: supprimer depuis "Modifier") */
.btn-danger{
  color:#ff5a6e;
  background:none;
  border:1px solid rgba(255,90,110,.4);
}

.btn-danger:hover{
  background: rgba(255,90,110,.14);
}

.modal-actions-split{
  justify-content:space-between;
}

.modal-actions-split .modal-actions-right{
  display:flex;
  gap:10px;
}

/* =========================
   MODAL DÉTAIL CHAMP (édition + rotation combinées)
   ========================= */
.modal-large{
  max-width:900px;
}

.modal-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}

.modal-col-rotation{
  border-left:1px solid var(--border);
  padding-left:32px;
}

@media (max-width: 760px){
  .modal-columns{
    grid-template-columns:1fr;
  }
  .modal-col-rotation{
    border-left:none;
    padding-left:0;
    border-top:1px solid var(--border);
    padding-top:20px;
    margin-top:8px;
  }
}

.table tbody tr.row-clickable{
  cursor:pointer;
}

.table tbody tr.row-clickable:hover{
  background: rgba(129,195,50,.07);
}

.modal-divider{
  border:none;
  border-top:1px solid var(--border);
  margin:22px 0 18px;
}

.modal-subheading{
  margin:0 0 8px;
  font-size:15px;
}

.field-readonly-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 20px;
  margin-bottom:6px;
}

.field-readonly-grid p{
  margin:2px 0 0;
}

.field-readonly-grid span.muted{
  font-size:12.5px;
}

.field-name-wrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.field-plowed-icon{
  width:14px;
  height:14px;
  color:#8b6b4a;
  flex-shrink:0;
}

.field-checkbox{
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--text);
  cursor:pointer;
}

.checkbox-label input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--accent);
  cursor:pointer;
}

.field-needs-plow-icon{
  width:14px;
  height:14px;
  color:#f0a63f;
  flex-shrink:0;
}

.field-plow-status{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
}

.field-plow-status-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.field-plow-status-text label{
  font-size:12.5px;
  color:var(--muted);
}

.field-plow-status .field-hint{
  margin:0;
}

.text-warning{
  color:#f0a63f;
}

.badge-warning{
  background: rgba(240,166,63,.18);
  color:#f0a63f;
  border-color: rgba(240,166,63,.45);
  margin-left:2px;
}

.table tbody tr.row-needs-plow{
  background: rgba(240,166,63,.06);
}

.table tbody tr.row-needs-plow:hover{
  background: rgba(240,166,63,.13);
}

.alert-warning{
  padding:12px 16px;
  border-radius:14px;
  background: rgba(240,166,63,.16);
  border:1px solid rgba(240,166,63,.4);
  color:#f0a63f;
  font-weight:600;
  font-size:14px;
  margin-bottom:16px;
}

.field-notes-cell{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================
   STATISTIQUES : sections cote a cote (grille), plus empilees verticalement
   ========================= */
.stat-sections-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  align-items:start;
}

.stat-section{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}

.stat-section-title{
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
}

.stat-rows{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.stat-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.stat-label{
  font-size:13px;
  color:var(--muted);
}

.stat-value{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

.stat-value-income{ color:var(--accent); }
.stat-value-expense{ color:#ff5a6e; }

/* Variante cliquable des cartes stat-section, utilisée sur l'aperçu de la
   ferme (farms.show) pour renvoyer directement vers chaque section. */
a.stat-section--link{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

a.stat-section--link:hover{
  transform: translateY(-3px);
  border-color: rgba(129,195,50,.5);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

.stat-cta{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--accent);
  font-weight:600;
}

/* Grille à nombre de colonnes fixé (plutôt que laissé à auto-fit), pour que
   des cartes stat-section remplissent délibérément toute la largeur
   disponible en rangées bien pleines plutôt que de se répartir de façon
   irrégulière. Utilisée sur farms.show (6 cartes) et farms.statistiques
   (6 cartes également, depuis l'ajout de "Factures"). */
.dashboard-stats-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px){
  .dashboard-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .dashboard-stats-grid{ grid-template-columns: 1fr; }
}

/* =========================
   PAGES LÉGALES (mentions légales, CGU, confidentialité)
   ========================= */
.legal-page{
  max-width:820px;
}

.legal-page h3{
  margin:28px 0 10px;
  font-size:16px;
  font-weight:600;
}
.legal-page h3:first-of-type{
  margin-top:20px;
}

.legal-page p{
  margin:0 0 12px;
  line-height:1.7;
  font-size:14.5px;
  color:rgba(234,251,234,.85);
}

.legal-page a{
  color:var(--accent);
}

.legal-placeholder{
  padding:12px 14px;
  border-radius:12px;
  background: rgba(248,200,135,.1);
  border:1px dashed rgba(248,200,135,.4);
}

.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 4px;
  font-size:13.5px;
}
.legal-table th,
.legal-table td{
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.legal-table th{
  color:var(--muted);
  font-weight:600;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

/* =========================
   SERVEURS : badge d'icône, sélecteurs couleur/icône, cartes
   ========================= */
.server-icon{
  --server-color: var(--accent);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background: var(--server-color-bg, rgba(129,195,50,.18));
  border:1px solid var(--server-color-border, rgba(129,195,50,.45));
  color: var(--server-color);
}

.server-icon--sm{ width:36px; height:36px; border-radius:11px; }
.server-icon--sm svg{ width:18px; height:18px; }

.server-icon--md{ width:48px; height:48px; }
.server-icon--md svg{ width:24px; height:24px; }

.server-icon--lg{ width:72px; height:72px; border-radius:20px; }
.server-icon--lg svg{ width:34px; height:34px; }

.swatch-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.swatch{
  --swatch-color: var(--accent);
  position:relative;
  width:34px;
  height:34px;
  border-radius:50%;
  background: var(--swatch-color);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}

.swatch input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
}

.swatch::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:50%;
  background:#07130a;
  opacity:0;
  transform:scale(.4);
  transition: opacity .15s ease, transform .15s ease;
}

.swatch:has(input:checked){
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 0 0 2px var(--bg2), 0 0 0 4px var(--swatch-color);
}

.swatch:has(input:checked)::after{
  opacity:1;
  transform:scale(1);
}

.icon-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.icon-choice{
  position:relative;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.icon-choice svg{ width:19px; height:19px; }

.icon-choice input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
}

.icon-choice:has(input:checked){
  background: rgba(129,195,50,.18);
  border-color: rgba(129,195,50,.5);
  color:var(--accent);
}

.server-card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.server-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  text-decoration:none;
  color:var(--text);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.server-card:hover{
  transform: translateY(-3px);
  border-color: rgba(129,195,50,.5);
  box-shadow: 0 16px 34px rgba(0,0,0,.3);
}

.server-card-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.server-card-title{
  flex:1 1 auto;
  min-width:0;
}

.server-card-name{
  margin:0 0 4px;
  font-size:16.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.server-card-owner{
  margin:0;
  font-size:12.5px;
  color:var(--muted);
}

.server-card-desc{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.server-card-stats{
  display:flex;
  gap:16px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.server-card-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.server-card-stat strong{
  font-size:15px;
}

.server-card-stat span{
  font-size:11.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}

.server-header{
  display:flex;
  align-items:center;
  gap:18px;
}

.server-header-desc{
  margin:6px 0 0;
  font-size:13.5px;
  color:var(--muted);
  max-width:60ch;
}

/* =========================
   SERVEURS : bannière, toolbar boutons, modals de création/adhésion
   ========================= */
.server-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.server-actions h2{ margin:0; }

.server-actions-buttons{
  display:flex;
  gap:10px;
}

.server-card{
  padding:0;
  overflow:hidden;
}

.server-card-banner{
  height:96px;
  background-size:cover;
  background-position:center;
  background-color: var(--server-color-bg, rgba(129,195,50,.18));
  position:relative;
}

.server-card-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(4,7,4,0) 40%, rgba(10,14,10,.9) 100%);
}

.server-card-body{
  padding:20px;
  padding-top:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.server-card .server-card-head{
  margin-top:-30px;
  position:relative;
  z-index:1;
}

.server-card-head .server-icon{
  border:3px solid var(--bg2);
}

.server-card-map{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:var(--muted);
}

.server-card-map svg{ width:13px; height:13px; }

.server-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  min-height:150px;
  background-size:cover;
  background-position:center;
  background-color: var(--server-color-bg, rgba(129,195,50,.18));
  display:flex;
  align-items:flex-end;
  padding:22px 24px;
}

.server-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(4,7,4,.15) 0%, rgba(4,7,4,.85) 100%);
}

.server-hero-content{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
}

.server-hero-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.file-field{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.file-field input[type="file"]{
  flex:1 1 200px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--text);
  font-family:inherit;
  font-size:12.5px;
}

.banner-preview{
  width:100%;
  height:70px;
  border-radius:10px;
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
  margin-bottom:10px;
}

/* =========================
   CARTES FERMES (page d'un serveur)
   ========================= */
.farm-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.farm-card-head{
  display:flex;
  align-items:center;
  gap:12px;
}

.farm-card-head h3{ margin:0 0 2px; }
.farm-card-head .tag{ margin:0; }

.farm-card-icon{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(129,195,50,.14);
  border:1px solid rgba(129,195,50,.35);
  color:var(--accent);
}

.farm-card-icon svg{ width:19px; height:19px; }

/* =========================
   PAGE D'UN SERVEUR : hero (pills), mise en page 2 colonnes, membres
   ========================= */
.server-hero-main{
  flex:1 1 auto;
  min-width:0;
}

.server-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.server-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(10,14,10,.45);
  border:1px solid var(--border);
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  backdrop-filter: blur(4px);
}

.server-pill svg{ width:14px; height:14px; flex-shrink:0; color:var(--muted); }

.server-pill--action{
  cursor:pointer;
  font-family:inherit;
  transition: background .15s ease, border-color .15s ease;
}

.server-pill--action:hover{
  background: rgba(129,195,50,.16);
  border-color: rgba(129,195,50,.4);
}

.server-pill--copied{
  background: rgba(129,195,50,.22);
  border-color: rgba(129,195,50,.5);
  color:var(--accent);
}

.server-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
}

.server-main{
  flex:1 1 auto;
  min-width:0;
}

.server-sidebar{
  flex:0 0 260px;
  width:260px;
}

@media (max-width: 900px){
  .server-layout{ flex-direction:column; }
  .server-sidebar{ width:100%; flex:1 1 auto; }
}

.member-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:520px;
  overflow-y:auto;
}

.member-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.member-avatar-wrap{
  position:relative;
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  overflow:visible;
}

.member-avatar-wrap .avatar-sm{
  width:28px;
  height:28px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.member-status-dot{
  position:absolute;
  bottom:-1px;
  right:-1px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--muted);
  border:2px solid var(--bg2);
}

.member-status-dot--online{
  background:var(--accent);
  box-shadow: 0 0 5px rgba(129,195,50,.7);
}

.member-name{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13.5px;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.member-owner-icon{
  width:12px;
  height:12px;
  flex-shrink:0;
  color:var(--accent3);
}

.member-you{
  flex-shrink:0;
  font-size:10.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}