/* ==========================================================================
   accueil-refonte.css — refonte visuelle de la page d'accueil (Items Tracker)
   Même style que les pages de quêtes : noir chaud, crème et or.
   À charger APRÈS css/quetes-refonte.css (qui définit les couleurs --ft-*).

   Ne change PAS le fonctionnement des compteurs : l'ordre et le nombre des
   cases (.outer__box) restent exactement ceux du site, sinon la progression
   des visiteurs (enregistrée par position) serait décalée.

   Pour annuler : retirer les lignes accueil-refonte.css / accueil-refonte.js
   de index.php.
   ========================================================================== */

/* --- Légende et en-tête de page --- */
.page-head .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-top: 0.9rem; }
.page-head .legend .title_text,
.page-head .legend .chip {
  width: auto;
  margin: 0 !important;
  padding: 0.3rem 0.8rem;
  background: var(--ft-panel);
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  color: var(--ft-fg);
  font: 600 0.85rem/1.2 var(--ft-text);
}
.page-head .legend .chip { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ft-muted); font-weight: 500; }
.page-head .legend .chip::before {
  content: "";
  width: 0.8rem; height: 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--ft-line);
  background: var(--c, transparent);
}
.page-head .legend .chip-part { --c: #880015; }
.page-head .legend .chip-done { --c: var(--ft-accent); }
.page-head .legend .chip-over { --c: #2f9e5a; }
.page-head .legend .sep { flex-basis: 1px; align-self: stretch; background: var(--ft-line); margin: 0 0.25rem; }

/* L'ancienne légende (avant déplacement par le script) reste lisible si le script ne se charge pas */
.all_elements > .text-center.mb-3 .title_text { color: var(--ft-muted); }

/* --- Grille des vendeurs --- */
.play__ground {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem;
  padding: 0.7rem clamp(0.75rem, 2vw, 1.25rem) 1.25rem;
  align-items: start;
}
.play__ground > :nth-child(8) { grid-column: 1 / -1; }

.col__background {
  background: var(--ft-panel);
  border: 1px solid var(--ft-line);
  border-radius: 16px;
  padding: 0.85rem 0.65rem 0.9rem;
  min-width: 0;
}
.play__ground > :nth-child(8) { padding: 0.75rem; }
.col__background .accordion-body { min-width: 0; }

/* Portrait + nom du vendeur */
.col__background .title { margin-bottom: 0.75rem !important; }
.col__background .title_image { width: 52%; max-width: 150px; }
.col__background .accordion-button { background: transparent !important; border-radius: 10px; }

/* Anciennes barres décoratives : plus utiles avec les cartes arrondies */
.faka_jaiga, .lomba_faka_jaiga, .lomba_faka_jaiga_left { display: none !important; }

/* --- Cases d'objets --- */
.outer__box {
  background: var(--ft-panel-2);
  border: 1px solid var(--ft-line);
  border-radius: 0;
  padding: 6px;
  transition: border-color 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.outer__box:hover { border-color: var(--ft-accent); }
.outer__box:active { transform: scale(0.98); }
.outer__box:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.inner__box {
  background: rgba(0, 0, 0, 0.28);
  border: 0;
  border-radius: 0;
}
.outer__box img { max-width: 100%; pointer-events: none; }

/* Pastille du compteur */
.filler {
  top: 4px; left: 4px;
  z-index: 3;
  margin: 0;
  padding: 0.05rem 0.4rem;
  background: rgba(14, 16, 14, 0.88);
  border: 1px solid var(--ft-line);
  border-radius: 0;
  color: var(--ft-fg);
  font: 600 0.72rem/1.35 var(--ft-text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* --- États (posés par accueil-refonte.js ; actifs seulement quand tout est prêt) ---
   main.js écrit ses couleurs directement sur la case : on les remplace avec !important. */
html.ac-ready .outer__box {
  background-color: var(--ft-panel-2) !important;
  background-image: none !important;
  opacity: 1 !important;
}
html.ac-ready .outer__box[data-state="part"] {
  background-image: linear-gradient(to top, #880015 var(--fill, 0%), transparent var(--fill, 0%)) !important;
  border-color: #880015;
}
html.ac-ready .outer__box[data-state="done"] {
  background-color: rgba(221, 181, 82, 0.22) !important;
  border-color: var(--ft-accent);
  box-shadow: 0 0 0 1px var(--ft-accent) inset;
}
html.ac-ready .outer__box[data-state="over"] {
  background-color: rgba(47, 158, 90, 0.2) !important;
  border-color: #2f9e5a;
}
html.ac-ready .outer__box[data-state="over"] .inner__box { opacity: 0.45; }
html.ac-ready .outer__box[data-state="done"] .filler { background: var(--ft-accent); border-color: var(--ft-accent); color: var(--ft-accent-ink); }
html.ac-ready .outer__box[data-state="over"] .filler { background: #2f9e5a; border-color: #2f9e5a; color: #06180d; }

/* --- Kappa --- */
.kappa_main { background: transparent; }
.kappa_main .first_line { gap: 0.5rem; flex-wrap: wrap; }
.kappa_main .outer__box { margin: 0.2rem; }
.kappa_title_image { min-width: 5rem; }
.title_image_kappa_large { width: 4.5rem; min-width: 3.5rem; }

/* --- Téléphone --- */
@media (max-width: 768px) {
  .play__ground { grid-template-columns: 1fr; padding-inline: 0.75rem; }
  .col__background { border-radius: 14px; }
  .col__background .accordion-button { border: 1px solid var(--ft-line); margin-bottom: 0.5rem; }
  .col__background .accordion-button:not(.collapsed) { border-color: var(--ft-accent); }
}
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  .page-head .legend .chip, .page-head .legend .title_text { font-size: 0.78rem; }
}

/* --- Menu latéral : sur l'accueil le menu est DANS la barre du haut ; le flou (backdrop-filter) de la barre
   l'empêcherait de se fixer à gauche de l'écran. On retire le flou de la barre (fond déjà opaque). --- */
.nav--background { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 768px) { .page-head .legend .sep { display: none; } }

/* --- Grand écran : les 7 vendeurs côte à côte, une seule page sans défilement --- */
@media (min-width: 1400px) {
  .play__ground { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* --- Version compacte pour tout voir d'un coup d'oeil --- */
.page-head { padding-top: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.25rem; }
.page-head .eyebrow, .page-head > p { display: none; }
.page-head h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.page-head .legend { margin-top: 0; }
.page-head .legend .title_text, .page-head .legend .chip { padding: 0.2rem 0.65rem; font-size: 0.8rem; }
.col__background { padding: 0.55rem 0.4rem 0.6rem; border-radius: 14px; }
.col__background .title { margin-bottom: 0.4rem !important; }
.col__background .title_image { width: 46%; }
.outer__box { padding: 4px; border-radius: 0; }
.inner__box { border-radius: 0; }
.filler { top: 3px; left: 3px; padding: 0 0.32rem; font-size: 0.68rem; }
.col__background .mt-1 { margin-top: 0.15rem !important; }
.kappa_main .outer__box { margin: 0.1rem; }
@media (min-width: 1200px) { .page-head .legend { flex: 0 0 auto; flex-wrap: nowrap; } }
.filler { background: rgba(14, 16, 14, 0.78); }

/* Cases à angles droits : le compteur est un petit carré collé au coin */
.filler { top: 0; left: 0; border-radius: 0; border-width: 0 1px 1px 0; }

/* --- Photo de fond (même principe que Factory et Customs) ---
   Fichier à téléverser : public_html/img/accueil-bg.jpg
   Si le fichier est absent, la page garde son ancien fond (api.tarkovtracker.ca) très discret. */
body:has(.play__ground) {
  background:
    linear-gradient(rgba(18,19,15,0.30), rgba(18,19,15,0.80)),
    url("../img/accueil-bg.jpg") center top / cover no-repeat fixed,
    var(--ft-bg);
}
.col__background { background: #161616; }
.col__background { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.page-head .legend .title_text, .page-head .legend .chip { white-space: nowrap; }

/* ---- Nouveaux objets ajoutés (rangée en bas de chaque colonne) ---- */
.ac-new-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.35rem;margin-top:.5rem}
.ac-new-row .outer__box{aspect-ratio:1/1;min-width:0;display:block}
.ac-new-row .inner__box{display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box}
.ac-new-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.kappa_main .ac-kappa-img{display:block;width:auto;height:72px;max-width:130px;object-fit:contain}