/* ============================================================================
   minecraft.fr · Widget sidebar « État des services » — composant mcfr-mini
   Statique, AUCUN JavaScript. Survol/focus en CSS pur. Très léger.
   Autonome : embarque ses propres tokens d'état (clair + sombre) pour
   fonctionner sur n'importe quelle page, même sans statut.css.
   À charger après system.css (tokens de base --mc-*). Si system.css est absent,
   des valeurs de repli sont fournies dans .mcfr-mini.
   Préfixe .mcfr-mini- pour ne jamais entrer en collision.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens --- */
:root {
  --mcfr-ok:       #2FA85A;  --mcfr-ok-bg:   #E7F5EC;  --mcfr-ok-ink:   #155F31;
  --mcfr-degraded: #E0972A;  --mcfr-deg-bg:  #FBF0D8;  --mcfr-deg-ink:  #82540A;
  --mcfr-down:     #D8412A;  --mcfr-down-bg: #FBE4DE;  --mcfr-down-ink: #8E2414;
  --mcfr-unknown:  #AEB6B0;  --mcfr-unk-bg:  #ECEFEC;  --mcfr-unk-ink:  #5E6862;
  --mcfr-tip-bg:   #181F1D;  --mcfr-tip-ink: #EAF1EE;  --mcfr-tip-mut:  #9AA6A0;
}
[data-theme="dark"] {
  --mcfr-ok:       #43C277;  --mcfr-ok-bg:   #15311F;  --mcfr-ok-ink:   #7FE0A4;
  --mcfr-degraded: #F0BE61;  --mcfr-deg-bg:  #2F2611;  --mcfr-deg-ink:  #F6D79A;
  --mcfr-down:     #F0664A;  --mcfr-down-bg: #331813;  --mcfr-down-ink: #F7A28E;
  --mcfr-unknown:  #5A655F;  --mcfr-unk-bg:  #1E2724;  --mcfr-unk-ink:  #9AA6A0;
  --mcfr-tip-bg:   #0B0F0E;  --mcfr-tip-ink: #EAF1EE;  --mcfr-tip-mut:  #8A968F;
}

/* couleur résolue par état (s'applique au conteneur ET à chaque case) */
.mcfr-mini[data-state="operational"], .mcfr-mini__slot[data-state="operational"] { --mcfr-c: var(--mcfr-ok);       --mcfr-c-bg: var(--mcfr-ok-bg);   --mcfr-c-ink: var(--mcfr-ok-ink); }
.mcfr-mini[data-state="degraded"],    .mcfr-mini__slot[data-state="degraded"]    { --mcfr-c: var(--mcfr-degraded); --mcfr-c-bg: var(--mcfr-deg-bg);  --mcfr-c-ink: var(--mcfr-deg-ink); }
.mcfr-mini[data-state="down"],        .mcfr-mini__slot[data-state="down"]        { --mcfr-c: var(--mcfr-down);     --mcfr-c-bg: var(--mcfr-down-bg); --mcfr-c-ink: var(--mcfr-down-ink); }
.mcfr-mini[data-state="unknown"],     .mcfr-mini__slot[data-state="unknown"]     { --mcfr-c: var(--mcfr-unknown);  --mcfr-c-bg: var(--mcfr-unk-bg);  --mcfr-c-ink: var(--mcfr-unk-ink); }

/* ---------------------------------------------------------------- shell ---- */
.mcfr-mini {
  /* repli si system.css absent */
  --mc-edge: var(--mc-edge, #1E2422);
  font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
  color: var(--mc-ink, #1E2422);
  width: 100%; min-width: 0;        /* fluide 240 → 320 px dans la sidebar */
  background: var(--mc-surface, #fff);
  border: 2px solid var(--mc-edge);
  box-shadow: var(--mc-sh-sm, 3px 3px 0 #1E2422);
  padding: 13px 14px 14px;
  position: relative;
}
.mcfr-mini *, .mcfr-mini *::before, .mcfr-mini *::after { box-sizing: border-box; }

/* bandeau d'accent supérieur — couleur de l'état global (identité « panneau de jeu ») */
.mcfr-mini::before {
  content: ""; display: block; height: 4px;
  margin: -13px -14px 12px;
  background: var(--mcfr-c, var(--mcfr-unknown));
}

/* résumé lecteur d'écran */
.mcfr-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 1 ─ LABEL (petit, discret) */
.mcfr-mini__label {
  font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mc-muted, #6B756F);
  display: flex; align-items: center; gap: 8px; margin: 0 0 11px;
}
.mcfr-mini__label::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  background: var(--mc-tq, #1AA995); box-shadow: inset -3px -3px 0 rgba(0,0,0,.18);
}

/* 2 ─ LIGNE D'ÉTAT GLOBALE : gemme losange (émeraude) + texte */
.mcfr-mini__state { display: flex; align-items: center; gap: 13px; margin: 2px 0 13px; }
/* le losange (émeraude) : le span lui-même est tourné à 45° → carré devient gemme.
   Biseau pixel (ombre sombre bas-droite) + reflet (lumière haut-gauche). */
.mcfr-mini__gem {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 6px 2px 3px;
  transform: rotate(45deg);
  background: var(--mcfr-c, var(--mcfr-unknown));
  border: 2px solid var(--mc-edge);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.30), inset 3px 3px 0 rgba(255,255,255,.24);
}
.mcfr-mini__msg {
  font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700; font-size: 14.5px; line-height: 1.12; color: var(--mc-ink, #1E2422);
  min-width: 0; text-wrap: balance;
}
.mcfr-mini__msg b { color: var(--mcfr-c-ink, var(--mc-ink)); font-weight: 700; }

/* 3 ─ HOTBAR : 5 cases biseautées en creux, bloc coloré au centre */
.mcfr-mini__hotbar { display: flex; gap: 5px; margin: 0 0 13px; }
.mcfr-mini__slot {
  position: relative; flex: 1 1 0; aspect-ratio: 1 / 1; min-width: 0; min-height: 38px;
  display: grid; place-items: center;
  background: var(--mc-bone, #F4F1EA);
  border: 2px solid var(--mc-edge);
  /* creux : ombre interne sombre en haut-gauche, lumière en bas-droite */
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.16), inset -2px -2px 0 rgba(255,255,255,.55);
  cursor: default;
}
[data-theme="dark"] .mcfr-mini__slot { box-shadow: inset 3px 3px 0 rgba(0,0,0,.40), inset -2px -2px 0 rgba(255,255,255,.05); }
.mcfr-mini__slot:focus-visible { outline: 2px solid var(--mc-tq, #1AA995); outline-offset: 2px; z-index: 5; }

/* le bloc coloré (état du service) */
.mcfr-mini__chip {
  display: block; width: 54%; height: 54%;
  background: var(--mcfr-c, var(--mcfr-unknown));
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.26), inset 2px 2px 0 rgba(255,255,255,.18);
  transition: transform .1s ease, filter .1s ease;
}
.mcfr-mini__slot[data-state="unknown"] .mcfr-mini__chip {
  background: repeating-linear-gradient(135deg, var(--mcfr-unknown) 0 2px, transparent 2px 5px), var(--mcfr-unk-bg);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.18);
}
.mcfr-mini__slot:hover .mcfr-mini__chip,
.mcfr-mini__slot:focus-visible .mcfr-mini__chip { transform: scale(1.12); filter: brightness(1.08); }

/* infobulle CSS pure : « {service} · {état} » */
.mcfr-mini__tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 180px;
  font-family: var(--mc-sans, "IBM Plex Sans", system-ui, sans-serif);
  font-weight: 600; font-size: 11px; line-height: 1.3; text-align: left;
  color: var(--mcfr-tip-ink); background: var(--mcfr-tip-bg);
  border: 2px solid var(--mc-edge); box-shadow: 3px 3px 0 rgba(0,0,0,.45);
  padding: 7px 9px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease; z-index: 30;
}
.mcfr-mini__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--mcfr-tip-bg);
}
.mcfr-mini__slot:hover .mcfr-mini__tip,
.mcfr-mini__slot:focus-visible .mcfr-mini__tip,
.mcfr-mini__slot:focus .mcfr-mini__tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* repli des bulles près des bords (5 cases : repère les 2 premières / 2 dernières) */
.mcfr-mini__slot:first-child .mcfr-mini__tip,
.mcfr-mini__slot:nth-child(2) .mcfr-mini__tip { left: 0; transform: translateY(4px); }
.mcfr-mini__slot:first-child:hover .mcfr-mini__tip, .mcfr-mini__slot:first-child:focus-visible .mcfr-mini__tip, .mcfr-mini__slot:first-child:focus .mcfr-mini__tip,
.mcfr-mini__slot:nth-child(2):hover .mcfr-mini__tip, .mcfr-mini__slot:nth-child(2):focus-visible .mcfr-mini__tip, .mcfr-mini__slot:nth-child(2):focus .mcfr-mini__tip { transform: translateY(0); }
.mcfr-mini__slot:first-child .mcfr-mini__tip::after,
.mcfr-mini__slot:nth-child(2) .mcfr-mini__tip::after { left: 16px; transform: none; }
.mcfr-mini__slot:last-child .mcfr-mini__tip,
.mcfr-mini__slot:nth-last-child(2) .mcfr-mini__tip { left: auto; right: 0; transform: translateY(4px); }
.mcfr-mini__slot:last-child:hover .mcfr-mini__tip, .mcfr-mini__slot:last-child:focus-visible .mcfr-mini__tip, .mcfr-mini__slot:last-child:focus .mcfr-mini__tip,
.mcfr-mini__slot:nth-last-child(2):hover .mcfr-mini__tip, .mcfr-mini__slot:nth-last-child(2):focus-visible .mcfr-mini__tip, .mcfr-mini__slot:nth-last-child(2):focus .mcfr-mini__tip { transform: translateY(0); }
.mcfr-mini__slot:last-child .mcfr-mini__tip::after,
.mcfr-mini__slot:nth-last-child(2) .mcfr-mini__tip::after { left: auto; right: 16px; transform: none; }

/* 4 ─ LIGNE DE CONFIANCE */
.mcfr-mini__trust {
  position: relative; margin: 0;
  padding: 11px 0 0 17px; border-top: 2px dotted var(--mc-line-2, #CFCABD);
  font-size: 12px; line-height: 1.4; color: var(--mc-muted, #6B756F);
}
.mcfr-mini__trust::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px;
  background: var(--mcfr-ok); box-shadow: inset -2px -2px 0 rgba(0,0,0,.20);
}
.mcfr-mini__trust b { font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif); font-weight: 700; color: var(--mc-ink, #1E2422); }
/* variante optionnelle « vérifié il y a X min » — masquée par défaut (retirer [hidden] pour l'afficher) */
.mcfr-mini__trust--check::before { background: var(--mc-tq, #1AA995); }

/* 5 ─ LIEN SEO — bouton discret (surface neutre, icône + libellé) */
.mcfr-mini__link {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 9px 13px;
  font-family: var(--mc-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700; font-size: 13px; letter-spacing: .01em;
  color: var(--mc-ink, #1E2422); text-decoration: none; white-space: nowrap;
  background: var(--mc-surface, #fff);
  border: 2px solid var(--mc-edge);
  box-shadow: var(--mc-sh-sm, 3px 3px 0 #1E2422);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.mcfr-mini__ico { width: 15px; height: 15px; flex: 0 0 auto; display: block; color: var(--mc-tq-d, #11796A); }
.mcfr-mini__link:hover { transform: translate(-1px,-1px); box-shadow: var(--mc-sh, 4px 4px 0 #1E2422); background: var(--mc-bone, #F4F1EA); }
.mcfr-mini__link:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--mc-shadow, #1E2422); }
.mcfr-mini__link:focus-visible { outline: 2px solid var(--mc-tq, #1AA995); outline-offset: 2px; }

/* accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  .mcfr-mini__chip, .mcfr-mini__tip, .mcfr-mini__link { transition: none; }
}