/* ==================================================================
   UNIFY - Status page theme
   Charte : noir #000 / lime #CEFF00 / crème #F3F1E8
   Typo   : Blinker (display) + Inter (texte)
   ================================================================== */

/* ---- Fonts (charte Unify) ---- */
@font-face {
  font-family: Blinker;
  src: url(https://cdn.prod.website-files.com/672b33aa71cbcc392aa7b39c/672b34c6c131a0451468e07e_Blinker-SemiBold.ttf)
    format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url(https://cdn.prod.website-files.com/672b33aa71cbcc392aa7b39c/672b34a954dbd1cbac79c1bb_Inter-VariableFont_opsz%2Cwght.ttf)
    format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --u-bg: #000000;
  --u-surface: #0f100f;
  --u-surface-2: #141513;
  --u-border: rgba(243, 241, 232, 0.10);
  --u-border-2: rgba(243, 241, 232, 0.18);
  --u-text: #f3f1e8;
  --u-muted: #9f9b90;
  --u-lime: #ceff00;
  --u-yellow: #ffc53d;
  --u-orange: #ff8a3d;
  --u-red: #ff5347;
  --u-blue: #7fb3ff;
  --u-accent: #ceff00;
}

body.status-minor       { --u-accent: #ffc53d; }
body.status-major       { --u-accent: #ff8a3d; }
body.status-critical    { --u-accent: #ff5347; }
body.status-maintenance { --u-accent: #7fb3ff; }

/* ---- Base ---- */
html {
  background: var(--u-bg) !important;
}

body {
  background: var(--u-bg) !important;
  color: var(--u-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--u-accent) 0%,
    rgba(206,255,0,0) 62%
  );
  z-index: 9999;
  pointer-events: none;
}

::selection {
  background: var(--u-lime);
  color: #000;
}

:focus-visible {
  outline: 2px solid var(--u-lime);
  outline-offset: 2px;
}

h1, h2, h3, h4,
.font-largest,
.font-large {
  font-family: Blinker, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  color: var(--u-text);
}

a {
  color: var(--u-lime);
}

a:hover,
a:focus {
  color: var(--u-lime);
}

.color-secondary,
.font-small {
  color: var(--u-muted) !important;
}

.border-color {
  border-color: var(--u-border) !important;
}


/* ================================================================
   LAYOUT
   ================================================================ */

.layout-content {
  position: relative;
}

.layout-content::before {
  content: "";
  position: fixed;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 640px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    closest-side,
    rgba(206,255,0,0.11),
    rgba(206,255,0,0)
  );
}

.layout-content > * {
  position: relative;
  z-index: 1;
}

.layout-content .container {
  max-width: 920px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}


/* ================================================================
   HEADER
   Logo à gauche / Subscribe complètement à droite
   ================================================================ */

.custom-header-container {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px;

  display: flex;
  align-items: center;

  /* Important : toute la largeur disponible */
  width: 100%;
  box-sizing: border-box;
}

/* séparateur pleine largeur */
.custom-header-container::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--u-border);
}


/* ---- Logo ---- */

.unify-brand {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.unify-brand-svg {
  display: block;
  width: 126px;
  height: auto;
}


/* ---- Navigation éventuelle ---- */

.unify-topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;

  /* espace entre logo et navigation */
  margin-left: 32px;

  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unify-topnav a {
  color: var(--u-muted);
  text-decoration: none;
}

.unify-topnav a:hover {
  color: var(--u-lime);
}


/* ---- Subscribe : TOUJOURS À DROITE ---- */

.updates-dropdown-container {
  display: block !important;
  position: relative;

  flex: 0 0 auto;

  /* pousse le bouton à l'extrémité droite */
  margin-left: auto !important;

  float: none !important;
}


/* ---- Masthead natif (sans Custom header HTML) : logo à gauche, subscribe à droite ---- */

.masthead,
.masthead.has-logo {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.masthead .logo-container {
  float: none !important;
  flex: 0 1 auto;
}

.masthead .updates-dropdown-container {
  flex: 0 0 auto;
  margin-left: auto !important;
  text-align: right;

  /* annule le décalage vertical natif de Statuspage */
  top: 0 !important;
  right: 0 !important;
  align-self: center !important;
}

.masthead .clearfix {
  display: none !important;
}


/* fallback si Custom header HTML retiré */

.masthead-container,
.masthead-container.basic {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ================================================================
   BOUTON SUBSCRIBE
   ================================================================ */

.show-updates-dropdown,
a.show-updates-dropdown {
  background: var(--u-lime) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 6px !important;

  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  padding: 11px 18px !important;

  box-shadow: none !important;
  text-shadow: none !important;

  transition:
    filter .15s ease,
    transform .15s ease;
}

.show-updates-dropdown:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.updates-dropdown {
  background: var(--u-surface-2) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65) !important;
}

.updates-dropdown,
.updates-dropdown p,
.updates-dropdown span,
.updates-dropdown label,
.updates-dropdown div {
  color: var(--u-text) !important;
}

.updates-dropdown input,
.updates-dropdown .form-control,
.updates-dropdown select {
  background: #000 !important;
  border: 1px solid var(--u-border-2) !important;
  color: var(--u-text) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.updates-dropdown-nav {
  border-bottom: 1px solid var(--u-border) !important;
}

.updates-dropdown-nav a,
.updates-dropdown-nav button {
  background: transparent !important;
  color: var(--u-muted) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.updates-dropdown-nav a.active,
.updates-dropdown-nav button.active {
  color: var(--u-text) !important;
  box-shadow: inset 0 -2px 0 var(--u-lime) !important;
}

.updates-dropdown .btn,
.updates-dropdown button[type="submit"] {
  background: var(--u-lime) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}


/* ---- Panneau dropdown : fond sombre sur tous les blocs ---- */

#updates-dropdown,
#updates-dropdown .updates-dropdown-nav,
#updates-dropdown .updates-dropdown-sections-container,
#updates-dropdown .updates-dropdown-section,
#updates-dropdown .updates-dropdown-section > div,
#updates-dropdown .updates-dropdown-section > p {
  background: var(--u-surface-2) !important;
  color: var(--u-text) !important;
}

#updates-dropdown .updates-dropdown-nav {
  background: var(--u-surface) !important;
  border-radius: 12px 12px 0 0 !important;
}

#updates-dropdown .updates-dropdown-sections-container,
#updates-dropdown .updates-dropdown-section {
  border-radius: 0 0 12px 12px !important;
}

#updates-dropdown .updates-dropdown-nav a,
#updates-dropdown .updates-dropdown-nav button,
#updates-dropdown-close-btn {
  background: transparent !important;
  color: var(--u-muted) !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#updates-dropdown .updates-dropdown-nav a:hover,
#updates-dropdown-close-btn:hover {
  color: var(--u-lime) !important;
}

#updates-dropdown .icon-container,
#updates-dropdown .icon-container svg,
#updates-dropdown svg {
  color: currentColor !important;
  fill: currentColor !important;
}

#updates-dropdown a,
#updates-dropdown .updates-dropdown-section a {
  color: var(--u-lime) !important;
  background: transparent !important;
  text-decoration: none !important;
}

#updates-dropdown a:hover {
  text-decoration: underline !important;
}


/* ================================================================
   BANDEAU DE STATUT GLOBAL
   ================================================================ */

.page-status {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-left: 3px solid var(--u-accent) !important;
  border-radius: 14px !important;
  padding: 26px 28px !important;
  margin: 6px 0 34px !important;
  box-shadow: none !important;
  color: var(--u-text) !important;
  text-shadow: none !important;
}

.page-status .status {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;

  font-family: Blinker, sans-serif !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;

  color: var(--u-text) !important;
}

.page-status .status::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--u-accent);
  box-shadow:
    0 0 0 5px
    color-mix(in srgb, var(--u-accent) 16%, transparent);
}

.page-status .last-updated-stamp {
  display: block !important;
  margin: 12px 0 0 24px !important;
  color: var(--u-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}


/* ================================================================
   COMPOSANTS
   ================================================================ */

.components-section {
  margin-bottom: 42px !important;
}

.components-container {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  overflow: hidden;
}

.component-container {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--u-border) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.components-container .component-container:last-child {
  border-bottom: 0 !important;
}

.component-inner-container {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 17px 24px !important;
  background: transparent !important;
  border: 0 !important;
  transition: background .15s ease;
}

.component-inner-container:hover {
  background: rgba(243,241,232,0.035) !important;
}

.component-inner-container .name,
.component-container .name {
  flex: 1 1 auto;
  padding: 0 !important;
  border: 0 !important;
  color: var(--u-text) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

.component-status {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  color: var(--u-muted) !important;
}

.component-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-green  .component-status { color: var(--u-lime) !important; }
.status-yellow .component-status { color: var(--u-yellow) !important; }
.status-orange .component-status { color: var(--u-orange) !important; }
.status-red    .component-status { color: var(--u-red) !important; }
.status-blue   .component-status { color: var(--u-blue) !important; }

.status-icon-button,
button.tool.icon-indicator {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.status-green  .icon-indicator { color: var(--u-lime) !important; }
.status-yellow .icon-indicator { color: var(--u-yellow) !important; }
.status-orange .icon-indicator { color: var(--u-orange) !important; }
.status-red    .icon-indicator { color: var(--u-red) !important; }
.status-blue   .icon-indicator { color: var(--u-blue) !important; }


/* groupes de composants */

.component-container.status-group > .component-inner-container,
.child-components-container {
  background: rgba(243,241,232,0.02) !important;
}


/* légende */

.component-statuses-legend,
.component-statuses-legend .legend-item {
  color: var(--u-muted) !important;
  font-size: 12px !important;
}

.component-statuses-legend .breaker {
  border-color: var(--u-border) !important;
}


/* ================================================================
   INCIDENTS
   ================================================================ */

.incidents-list > h2,
.incidents-list .font-largest {
  font-family: Blinker, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--u-muted) !important;

  margin: 0 0 6px !important;
  padding: 0 0 14px !important;

  border-bottom: 1px solid var(--u-border) !important;
}

.status-day {
  border: 0 !important;
  border-bottom: 1px solid var(--u-border) !important;
  padding: 20px 0 !important;
  margin: 0 !important;
}

.incidents-list .status-day:last-child {
  border-bottom: 0 !important;
}

.status-day .date {
  border: 0 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;

  font-family: Blinker, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;

  color: var(--u-text) !important;
}

.status-day .date var,
.incidents-list var {
  font-style: normal !important;
}

.status-day p,
.status-day .color-secondary {
  color: var(--u-muted) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.unresolved-incident,
.incident-container {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  margin: 0 0 18px !important;
}

.incident-title,
.incident-title a,
.incident-name,
.incident-name a {
  font-family: Blinker, sans-serif !important;
  font-weight: 400 !important;
  color: var(--u-text) !important;
  border: 0 !important;
}

.incident-body,
.incident-updates-container,
.update-title,
.updates .update {
  color: var(--u-muted) !important;
}

.incident-updates-container .update-title strong {
  color: var(--u-text) !important;
}

.impact-none .incident-title {
  box-shadow: inset 4px 0 0 var(--u-lime) !important;
}

.impact-minor .incident-title {
  box-shadow: inset 4px 0 0 var(--u-yellow) !important;
}

.impact-major .incident-title {
  box-shadow: inset 4px 0 0 var(--u-orange) !important;
}

.impact-critical .incident-title {
  box-shadow: inset 4px 0 0 var(--u-red) !important;
}

.impact-maintenance .incident-title {
  box-shadow: inset 4px 0 0 var(--u-blue) !important;
}


/* ================================================================
   HISTORIQUE
   ================================================================ */

.incident-history,
.incident-history .month,
.month-wrapper,
.incident-history-title {
  color: var(--u-text) !important;
  border-color: var(--u-border) !important;
}

.pagination a,
.pagination span,
.pagination li a {
  color: var(--u-muted) !important;
}


/* ================================================================
   UPTIME
   ================================================================ */

.uptime-graph .availability-time-line-graph rect {
  opacity: .9;
}

.uptime-graph .legend,
.uptime-graph .availability-value {
  color: var(--u-muted) !important;
}


/* ================================================================
   FOOTER STATUSPAGE
   ================================================================ */

.page-footer {
  border-top: 1px solid var(--u-border) !important;
  border-bottom: 0 !important;
  margin-top: 44px !important;
  padding: 22px 0 8px !important;
  color: var(--u-muted) !important;
}

.page-footer a,
.page-footer .powered-by,
.page-footer .powered-by a,
.page-footer .color-secondary,
.history-footer-link {
  color: var(--u-muted) !important;
}

.page-footer a:hover,
.history-footer-link:hover {
  color: var(--u-text) !important;
}


/* ================================================================
   FOOTER DE MARQUE
   ================================================================ */

.unify-footer {
  position: relative;
  z-index: 2;

  max-width: 920px;
  margin: 0 auto;
  padding: 16px 20px 56px;

  font-family: Inter, sans-serif;
}

.unify-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding-bottom: 16px;
}

.unify-footer-links a {
  color: var(--u-muted);
  text-decoration: none;
  font-size: 13px;
}

.unify-footer-links a:hover {
  color: var(--u-lime);
}

.unify-footer-legal {
  color: rgba(159,155,144,0.65);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ================================================================
   BANDEAUX TECHNIQUES
   ================================================================ */

.cookie-consent-banner {
  background: var(--u-surface-2) !important;
  color: var(--u-muted) !important;
  border-bottom: 1px solid var(--u-border) !important;
}

.cookie-consent-banner a {
  color: var(--u-lime) !important;
}

.activate-page-prompt {
  background: var(--u-yellow) !important;
}

.activate-page-prompt,
.activate-page-prompt a {
  color: #000 !important;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 640px) {

  .custom-header-container {
    gap: 14px 20px;
    padding: 16px 18px;
  }

  .unify-brand {
    order: 1;
  }

  .unify-brand-svg {
    width: 108px;
  }

  .updates-dropdown-container {
    order: 2;
    margin-left: auto !important;
  }

  .unify-topnav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .layout-content .container {
    padding-top: 26px !important;
  }

  .page-status {
    padding: 22px 20px !important;
    border-radius: 12px !important;
  }

  .page-status .status {
    font-size: 23px !important;
  }

  .page-status .last-updated-stamp {
    margin-left: 24px !important;
  }

  .component-inner-container {
    padding: 15px 18px !important;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
}