/* =========================================================================
   Brand wordmark (remplace le logo SVG ARC144 par un lockup texte SCALEAD).
   currentColor -> s'adapte automatiquement aux thèmes clair/sombre.
   ========================================================================= */
.brand-wordmark {
  font-family: var(--_typography---font--coda), 'Coda', monospace;
  font-weight: 600;
  font-size: 1.4em;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
  text-transform: uppercase;
}

/* Logo Scalead (mark SVG) — remplace le wordmark dans la navigation. */
.scalead-logo {
  height: 30px;
  width: auto;
  display: block;
}
.blog-logo .scalead-logo {
  height: 28px;
}

/* =========================================================================
   Entrance animation removed — hide the preloader/loading screen in both
   themes so it never flashes before the (now neutralized) intro script runs.
   ========================================================================= */
.loading_wrap {
  display: none !important;
}

/* =========================================================================
   ARC144 — Theme toggle control
   A small technical/mono control with corner-bracket framing, matching the
   site's aesthetic. Styled for both dark (default) and light themes.
   ========================================================================= */
.theme-toggle {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2147483000; /* above the fixed header / loaders */

  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.85em;

  font-family: var(--_typography---font--coda), 'Coda', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;

  cursor: pointer;
  color: var(--_theme---text, #fff);
  background-color: rgba(8, 10, 11, 0.55);
  border: 1px solid var(--_theme---border, rgba(255, 255, 255, 0.12));
  border-radius: 0.5em;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.6, 0.6, 0, 1);
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--brand--blue, #269dae);
  box-shadow: 0 0 16px rgba(38, 157, 174, 0.25);
}

.theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand--blue, #269dae);
}

.theme-toggle__label {
  display: inline-block;
  min-width: 2.6em;
  text-align: left;
}

/* Corner brackets — the recurring technical motif */
.theme-toggle__corner {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--brand--blue, #269dae);
  opacity: 0.7;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  pointer-events: none;
}
.theme-toggle:hover .theme-toggle__corner {
  opacity: 1;
}
.theme-toggle__corner.cc-tl {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.theme-toggle__corner.cc-tr {
  top: -1px;
  right: -1px;
  border-left: 0;
  border-bottom: 0;
}
.theme-toggle__corner.cc-bl {
  bottom: -1px;
  left: -1px;
  border-right: 0;
  border-top: 0;
}
.theme-toggle__corner.cc-br {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* ---- Light theme appearance ---- */
html[data-theme='light'] .theme-toggle {
  color: #111827;
  background-color: rgba(255, 255, 255, 0.78);
  border-color: #dce9f9;
}
html[data-theme='light'] .theme-toggle:hover {
  border-color: #1677ff;
  box-shadow: 0 4px 20px rgba(22, 119, 255, 0.18);
}
html[data-theme='light'] .theme-toggle__icon {
  color: #1677ff;
}
html[data-theme='light'] .theme-toggle__corner {
  border-color: #1677ff;
}

@media screen and (max-width: 479px) {
  .theme-toggle {
    right: 0.85rem;
    bottom: 0.85rem;
    padding: 0.55em 0.7em;
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle__corner {
    transition: none;
  }
}