/* ==========================================================
   KHERBEROS HOME
   Noir absolu, acier sombre et rouge signalétique
   ========================================================== */

:root {
  --kh-black: #030303;
  --kh-black-soft: #070707;
  --kh-surface: #0d0d0e;
  --kh-surface-high: #141416;
  --kh-surface-hover: #19191c;

  --kh-red: #b8141a;
  --kh-red-bright: #e32129;
  --kh-red-dark: #571014;
  --kh-red-muted: rgba(190, 20, 27, 0.25);

  --kh-white: #f1f1f1;
  --kh-gray: #9b9b9e;
  --kh-border: #29292c;

  --kh-content-width: 1760px;
}

/* ===== FOND GLOBAL ===== */

html,
body,
#__next {
  min-height: 100%;
  color: var(--kh-white) !important;
  background-color: var(--kh-black) !important;
}

body {
  background:
    radial-gradient(
      circle at 50% -25%,
      rgba(145, 8, 15, 0.10),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #020202 0%,
      #050505 48%,
      #020202 100%
    ) !important;
}

/* Neutralisation des fonds du thème Homepage */
.bg-theme-50,
.bg-theme-100,
.bg-theme-200,
.bg-theme-300,
.bg-theme-400,
.bg-theme-500,
.bg-theme-600,
.bg-theme-700,
.bg-theme-800,
.bg-theme-900,
.dark .dark\:bg-theme-700,
.dark .dark\:bg-theme-800,
.dark .dark\:bg-theme-900 {
  background-color: transparent !important;
}

/* Largeur principale */
main {
  width: calc(100% - 2rem) !important;
  max-width: var(--kh-content-width) !important;
  margin-inline: auto !important;
}

/* Emblème en filigrane */
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;

  top: 55%;
  left: 73%;
  transform: translate(-50%, -50%);

  width: min(760px, 52vw);
  aspect-ratio: 1 / 1;

  background-image: url("/images/kherberos-logo.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  opacity: 0.018;
  filter: grayscale(1) contrast(1.4);
}

#__next {
  position: relative;
  z-index: 1;
}

/* ===== HEADER ===== */

#information-widgets {
  position: relative;

  display: grid !important;
  grid-template-columns: minmax(260px, max-content) minmax(360px, 1fr);
  align-items: center;
  gap: 1.25rem;

  min-height: 160px;

  padding:
    5.2rem
    0
    1.25rem
    82px;

  margin-bottom: 2rem;

  border-bottom: 1px solid var(--kh-red-dark);

  background-image: url("/images/kherberos-logo.jpg");
  background-repeat: no-repeat;
  background-position: left 5.15rem;
  background-size: 58px 58px;
}

#information-widgets::before {
  content: "KHERBEROS HOME ///";

  position: absolute;
  top: 0.2rem;
  left: 0;

  color: var(--kh-white);

  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  text-shadow: 0 0 18px rgba(210, 24, 31, 0.12);
}

#information-widgets::after {
  content: "";

  position: absolute;
  top: 3.35rem;
  left: 0;

  width: min(430px, 58vw);
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--kh-red-bright),
      var(--kh-red-dark) 65%,
      transparent
    );
}

/* Date */
#information-widgets > :first-child {
  min-width: 260px !important;
  width: max-content !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

#information-widgets > :first-child * {
  white-space: nowrap !important;
  word-break: normal !important;
}

/* Recherche */
#information-widgets > :last-child {
  width: 100% !important;
  min-width: 0 !important;
}

#information-widgets form,
#information-widgets form > div {
  width: 100% !important;
}

input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;

  color: var(--kh-white) !important;
  background: rgba(5, 5, 5, 0.96) !important;

  border: 1px solid #303033 !important;
  border-bottom-color: var(--kh-red) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

input[type="text"]:focus {
  border-color: var(--kh-red-bright) !important;

  box-shadow:
    0 0 0 1px var(--kh-red-muted),
    0 0 16px rgba(210, 24, 31, 0.06) !important;
}

button {
  border-radius: 0 !important;
}

/* ===== GROUPES ===== */

.services-group,
.bookmarks-group {
  min-width: 0;
}

.services-group > h2,
.bookmarks-group > h2 {
  color: var(--kh-white) !important;

  margin: 0 0 0.8rem;
  padding: 0 0 0.7rem;

  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.145em;
  text-transform: uppercase;

  border-bottom: 1px solid var(--kh-red-dark);
}

.services-group > h2::after,
.bookmarks-group > h2::after {
  content: "  ///";
  color: var(--kh-red-bright);
  font-weight: 900;
}

/* ===== CARTES SERVICES ===== */

.service-card {
  position: relative;
  overflow: hidden;

  min-height: 92px;
  padding: 1rem !important;

  background:
    linear-gradient(
      135deg,
      rgba(18, 18, 20, 0.98),
      rgba(6, 6, 7, 0.99)
    ) !important;

  border: 1px solid var(--kh-border) !important;
  border-left: 2px solid var(--kh-red) !important;
  border-radius: 0 !important;

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025) !important;

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.service-card::after {
  content: "";

  position: absolute;
  top: 6px;
  right: 6px;

  width: 13px;
  height: 13px;

  border-top: 1px solid var(--kh-red);
  border-right: 1px solid var(--kh-red);

  opacity: 0.65;
}

.service-card:hover {
  transform: translateY(-3px);

  background:
    linear-gradient(
      135deg,
      var(--kh-surface-hover),
      var(--kh-surface)
    ) !important;

  border-color: #422023 !important;
  border-left-color: var(--kh-red-bright) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(210, 24, 31, 0.055) !important;
}

.service-card .font-medium {
  color: var(--kh-white) !important;

  font-size: 0.92rem !important;
  font-weight: 750;
  letter-spacing: 0.035em;
}

.service-card .text-theme-500,
.service-card .text-theme-400,
.service-card .text-theme-300 {
  color: var(--kh-gray) !important;
  font-size: 0.72rem !important;
}

.service-card img {
  filter: saturate(0.92) contrast(1.05);
}

/* Statistiques intégrées */
.service-card .widget {
  margin-top: 0.7rem !important;
  padding-top: 0.7rem !important;

  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

/* ===== FAVORIS ===== */

.bookmarks-group > div {
  display: grid !important;

  grid-template-columns:
    repeat(auto-fit, minmax(230px, 1fr)) !important;

  gap: 0.7rem !important;
}

.bookmark {
  min-height: 46px;
  padding: 0.72rem 0.8rem !important;

  background:
    linear-gradient(
      90deg,
      var(--kh-surface),
      var(--kh-surface-high)
    ) !important;

  border: 1px solid #202022 !important;
  border-left: 1px solid var(--kh-red-dark) !important;
  border-radius: 0 !important;

  transition:
    transform 130ms ease,
    border-color 130ms ease,
    background 130ms ease;
}

.bookmark:hover {
  transform: translateX(3px);

  background:
    linear-gradient(
      90deg,
      #151516,
      #101011
    ) !important;

  border-color: var(--kh-red-dark) !important;
  border-left-color: var(--kh-red-bright) !important;
}

/* ===== COULEURS D’ÉTAT ===== */

.text-green-500 {
  color: #50d67c !important;
}

.text-red-500 {
  color: #ff3239 !important;
}

.text-yellow-500 {
  color: #e3ae3b !important;
}

.text-theme-500,
.text-theme-400 {
  color: var(--kh-gray) !important;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--kh-black);
}

::-webkit-scrollbar-thumb {
  background: #3a1013;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--kh-red);
}

::selection {
  color: white;
  background: var(--kh-red-dark);
}

/* ===== TABLETTE ===== */

@media (max-width: 1100px) {
  #information-widgets {
    grid-template-columns: 1fr;

    padding-left: 72px;

    background-position: left 5.1rem;
    background-size: 54px 54px;
  }

  #information-widgets > :first-child {
    min-width: 0 !important;
  }

  body::after {
    left: 65%;
    width: 72vw;
  }
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {
  :root {
    --kh-content-width: 100%;
  }

  main {
    width: calc(100% - 1rem) !important;
  }

  body::after {
    left: 50%;
    width: 100vw;
    opacity: 0.014;
  }

  #information-widgets {
    min-height: 210px;

    padding:
      4.5rem
      0
      1rem
      0;

    background-position: left 4.4rem;
    background-size: 48px 48px;
  }

  #information-widgets::before {
    font-size: 1.15rem;
    letter-spacing: 0.11em;
  }

  #information-widgets::after {
    top: 3rem;
    width: 230px;
  }

  #information-widgets > :first-child {
    padding-left: 62px;
    min-height: 48px;
    white-space: normal !important;
  }

  #information-widgets > :first-child * {
    white-space: normal !important;
  }

  .services-group > h2,
  .bookmarks-group > h2 {
    font-size: 0.8rem;
    letter-spacing: 0.105em;
  }

  .service-card {
    min-height: 76px;
  }
}