/* =========================
   PAGE WRAPPER
   (.page/.page__card/.page__header/.page__title/.page__back
   vivent dans main.css — ici juste la largeur specifique)
========================= */
.page{ --page-w: 1180px; }

.page__header{ padding: 18px 18px 14px; }

/* gardé même si retiré du HTML */
.page__hint{
  color: rgba(219,219,219,.70);
  font-size: 12px;
  letter-spacing: .10em;
  line-height: 1.35;
  border: 1px solid rgba(219,219,219,.10);
  background: rgba(12,15,16,.35);
  padding: 10px 12px;
  border-radius: 14px;
}

/* =========================
   BARRE DE DEDUCTION (preuves, comme le journal en jeu)
========================= */
.ghosts{
  padding: 18px;
}

.evidenceBar{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px;
  margin-bottom: 4px;
  border-radius: 18px;
  border: 1px solid rgba(219,219,219,.12);
  background: rgba(12,15,16,.44);
  box-shadow: 0 16px 44px rgba(0,0,0,.30);
}

.evidenceBar__list{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.evidenceBtn{
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 78px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(219,219,219,.14);
  background: rgba(12,15,16,.50);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.evidenceBtn:hover{ border-color: rgba(61,206,97,.35); }

.evidenceBtn__img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.evidenceBtn__label{
  font-size: 9px;
  letter-spacing: .06em;
  text-align: center;
  color: rgba(219,219,219,.75);
  line-height: 1.2;
}

/* preuve confirmee : presente sur l'entite recherchee */
.evidenceBtn[data-state="confirmed"]{
  border-color: rgba(61,206,97,.65);
  background: rgba(61,206,97,.12);
  box-shadow: 0 0 0 1px rgba(61,206,97,.20);
}
.evidenceBtn[data-state="confirmed"] .evidenceBtn__label{ color: var(--green); }

/* preuve exclue : certain qu'elle n'y est pas */
.evidenceBtn[data-state="excluded"]{
  border-color: rgba(255,90,90,.55);
  background: rgba(255,90,90,.08);
  opacity: .55;
}
.evidenceBtn[data-state="excluded"] .evidenceBtn__img{ filter: grayscale(1); }
.evidenceBtn[data-state="excluded"] .evidenceBtn__label{ color: rgba(255,140,140,.85); }

.evidenceBar__reset{
  flex: none;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(12,15,16,.55);
  color: rgba(219,219,219,.85);
  font-size: 11px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.evidenceBar__reset:hover{ border-color: rgba(61,206,97,.40); color: var(--green); }

.evidenceBar__help{
  margin: 10px 2px 18px;
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1.4;
  color: rgba(219,219,219,.45);
}

/* exclusion manuelle (double-clic sur une carte) : reste affichee et
   cliquable (pour pouvoir l'annuler), juste grisee.
   specificite renforcee (.is-in.is-manual-excluded) car .ghost.is-in{opacity:1}
   est defini plus bas dans ce fichier et doit etre supplante */
.ghost.is-manual-excluded,
.ghost.is-in.is-manual-excluded{
  opacity: .30;
  filter: grayscale(.85);
}
.ghost.is-manual-excluded:hover,
.ghost.is-in.is-manual-excluded:hover{
  opacity: .45;
}

/* elimination par le filtre de preuves : la carte s'efface puis sort
   completement de la grille (voir [hidden] plus bas), pour que les cartes
   restantes se reorganisent a sa place */
.ghost.is-filtered-out,
.ghost.is-in.is-filtered-out{
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
/* .ghost{ display:grid } a la meme specificite que le [hidden] natif du
   navigateur et le supplante silencieusement sans cette regle explicite */
.ghost[hidden]{ display: none; }

.ghosts__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  align-items: start;
}

/* =========================
   GHOST TILE
========================= */
.ghost{
  text-decoration: none;
  color: rgba(219,219,219,.95);

  display: grid;
  justify-items: center;
  gap: 12px;

  /* plus d'espace car les preuves dépassent vers le bas */
  padding: 10px 6px 44px;

  border-radius: 18px;
  background: rgba(12,15,16,.18);
  border: 1px solid rgba(219,219,219,.06);

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .35s ease,
    transform .35s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.ghost.is-in{
  opacity: 1;
  transform: translateY(0);
}

.ghost:hover{
  border-color: rgba(61,206,97,.22);
  box-shadow: 0 0 0 1px rgba(61,206,97,.10), 0 16px 40px rgba(0,0,0,.30);
  filter: saturate(1.06);
}

/* =========================
   BADGE CIRCULAIRE (agrandi)
========================= */
.ghost__badge{
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  padding: 12px;
  display: grid;
  place-items: center;

  background:
    radial-gradient(circle at 50% 50%, rgba(12,15,16,.62), rgba(12,15,16,.35));
  border: 1px solid rgba(219,219,219,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.42);
  overflow: visible; /* important pour que les preuves puissent dépasser */
}

.ghost__badge::after{
  content:"";
  position:absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(82,56,119,.60);
  box-shadow:
    0 0 0 1px rgba(82,56,119,.22),
    0 0 20px rgba(82,56,119,.16);
  pointer-events:none;
}

.ghost__img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(219,219,219,.10);
  background: rgba(12,15,16,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* =========================
   PROOFS LOSANGE (à cheval / extérieur vers le bas)
========================= */
.ghost__proofs{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 38%); /* à cheval vers l'extérieur */
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* carré preuve */
.proof{
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid var(--green);
  background: rgba(12,15,16,.58);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
  display: grid;
  place-items: center;

  pointer-events: auto; /* hover ok */
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* === PREUVE OBLIGATOIRE (CONTOUR ROUGE) === */
.proof[data-required="true"]{
  border-color: rgba(255, 62, 62, .85);
  box-shadow:
    0 0 0 1px rgba(255, 62, 62, .20),
    0 14px 30px rgba(0,0,0,.42);
}
.ghost:hover .proof[data-required="true"]{
  border-color: rgba(255, 62, 62, .92);
  box-shadow:
    0 0 0 1px rgba(255, 62, 62, .24),
    0 14px 34px rgba(0,0,0,.48);
}

/* hover global: ne doit PAS écraser le rouge */
.ghost:hover .proof:not([data-required="true"]){
  border-color: var(--violet);
}

/* hover sur une preuve */
.proof:hover{
  border-color: rgba(61,206,97,.35);
  box-shadow: 0 0 0 1px rgba(61,206,97,.14), 0 14px 34px rgba(0,0,0,.50);
  filter: saturate(1.06);
}
/* si c'est obligatoire, on garde rouge même au hover */
.proof[data-required="true"]:hover{
  border-color: rgba(255, 62, 62, .95);
  box-shadow:
    0 0 0 1px rgba(255, 62, 62, .28),
    0 14px 34px rgba(0,0,0,.52);
  filter: saturate(1.06);
}

.proof__img{
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(61,206,97,.10));
}

/* ---- POSITIONS LOSANGE (TES VALEURS) ---- */
.proof--top{
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.proof--left{
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 64px), -50%);
}

.proof--right{
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 64px), -50%);
}

/* 4e preuve Mimic (sous la top) */
.proof--bottom{
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .ghosts__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ghost__badge{ width: 212px; height: 212px; }
  .proof{ width: 54px; height: 54px; border-radius: 15px; }
  .proof__img{ width: 48px; height: 48px; }

  .proof--left{ transform: translate(calc(-50% - 58px), -50%); }
  .proof--right{ transform: translate(calc(-50% + 58px), -50%); }

}

@media (max-width: 560px){
  .ghosts{ padding: 14px; }
  .ghosts__grid{ grid-template-columns: 1fr; }

  .ghost__badge{ width: 230px; height: 230px; }
  .ghost{ padding-bottom: 48px; }

  .evidenceBar{ padding: 10px; gap: 10px; }
  .evidenceBtn{ width: 66px; padding: 6px 4px; }
  .evidenceBtn__img{ width: 24px; height: 24px; }
  .evidenceBar__reset{ width: 100%; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .ghost{ transition: opacity .01s linear, transform .01s linear; }
  .ghost.is-filtered-out{ transition: opacity .01s linear; }
  .proof{ transition: none; }
}