/* Thème EndoCraft · KendiX (Bungee, jaune #FBB03B, fond motif gris) */

:root {
  --endo-yellow: #fbb03b;
  --endo-yellow-dark: #e09920;
  --endo-yellow-glow: rgba(251, 176, 59, 0.4);
  --endo-gray: #2b2b2b;
  --endo-gray-card: rgba(38, 38, 38, 0.94);
  --endo-navy: #203354;

  --primary: var(--endo-yellow);
  --secondary: var(--endo-yellow-dark);
  --accent: var(--endo-yellow);
  --accent-dim: var(--endo-yellow-dark);
  --accent-glow: var(--endo-yellow-glow);
  --bg-dark: var(--endo-gray);
  --bg: var(--endo-gray);
  --card-bg: var(--endo-gray-card);
  --surface: #333333;
  --surface-2: #3d3d3d;
  --border: rgba(255, 255, 255, 0.12);
  --text-main: #ffffff;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --muted: rgba(255, 255, 255, 0.72);
  --success: var(--endo-yellow);
  --danger: #e85d5d;
  --warning: var(--endo-yellow);
  --radius: 14px;
  --radius-lg: 20px;
  --font-display: 'Bungee', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font: var(--font-display);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --chip-success-bg: rgba(251, 176, 59, 0.18);
  --chip-success-border: rgba(251, 176, 59, 0.55);
  --chip-success-text: #fff4dc;

  /* Bannière fixe en haut (avertissement) → header */
  --top-banner-height: 2.5rem;
  --banner-header-gap: 2rem;
  --content-gap: 1.25rem;
  --safe-top-with-banner: calc(var(--top-banner-height) + var(--banner-header-gap));
  --page-edge-y: 2.5rem;
}

@media (max-width: 640px) {
  :root {
    --top-banner-height: 5.5rem;
    --banner-header-gap: 3rem;
    --safe-top-with-banner: calc(var(--top-banner-height) + var(--banner-header-gap));
  }

  .top-banner {
    padding: 0.75rem 0.85rem;
    line-height: 1.45;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--endo-gray);
  color: var(--text-main);
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* Fond motif EndoCraft — léger dérive « aléatoire » */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--endo-gray);
}

.bg-pattern::before {
  content: '';
  position: absolute;
  inset: -24%;
  background-image: url('/endocraft-pattern.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0) scale(1.12);
  backface-visibility: hidden;
  will-change: transform;
  animation: bg-pattern-drift 62s linear infinite;
}

/* Orbite plus ample : horizontal + vertical + diagonales */
@keyframes bg-pattern-drift {
  0% {
    transform: translate3d(6.5%, 0, 0) scale(1.12);
  }
  8.333% {
    transform: translate3d(5.5%, 2.8%, 0) scale(1.12);
  }
  16.666% {
    transform: translate3d(3.2%, 4.8%, 0) scale(1.12);
  }
  25% {
    transform: translate3d(0, 5.5%, 0) scale(1.12);
  }
  33.333% {
    transform: translate3d(-3.2%, 4.8%, 0) scale(1.12);
  }
  41.666% {
    transform: translate3d(-5.5%, 2.8%, 0) scale(1.12);
  }
  50% {
    transform: translate3d(-6.5%, 0, 0) scale(1.12);
  }
  58.333% {
    transform: translate3d(-5.5%, -2.8%, 0) scale(1.12);
  }
  66.666% {
    transform: translate3d(-3.2%, -4.8%, 0) scale(1.12);
  }
  75% {
    transform: translate3d(0, -5.5%, 0) scale(1.12);
  }
  83.333% {
    transform: translate3d(3.2%, -4.8%, 0) scale(1.12);
  }
  91.666% {
    transform: translate3d(5.5%, -2.8%, 0) scale(1.12);
  }
  100% {
    transform: translate3d(6.5%, 0, 0) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-pattern::before {
    animation: none;
    inset: 0;
    transform: none;
  }
}

.bg-dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.25) 0%,
    rgba(20, 20, 20, 0.45) 100%
  );
}

/* Anciens calques (remplacés par bg-pattern) */
.bg-grid,
.grain,
.crt-overlay {
  display: none !important;
}

.credit-name {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Pied de page — identique à l’accueil (toutes les pages) */
.home-footer,
.site-footer,
.tool-footer,
footer:has(.footer-heart) {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 3px solid var(--accent);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--muted);
  text-align: center;
}

.home-footer p,
.site-footer p,
.tool-footer p,
footer:has(.footer-heart) > p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-sub {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
}

/* Pied de page — cœur ♥ : pulsation douce + halo néon fixe */
.footer-heart {
  --heart-neon: var(--accent-glow);
  --heart-neon-outer: rgba(251, 176, 59, 0.45);
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.06em;
  transform-origin: center;
  animation: kendix-heartbeat 1.15s ease-in-out infinite;
  text-shadow:
    0 0 8px var(--heart-neon),
    0 0 20px var(--heart-neon-outer);
}

.footer-heart--danger {
  --heart-neon: rgba(232, 93, 93, 0.8);
  --heart-neon-outer: rgba(232, 93, 93, 0.42);
  color: var(--danger);
}

@keyframes kendix-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Bannière d’avertissement pleine largeur (Calcdrogue, etc.) */
.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--top-banner-height);
  padding: 0.65rem 1rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warning);
  background: rgba(251, 176, 59, 0.1);
  border-bottom: 1px solid rgba(251, 176, 59, 0.35);
}

body.has-top-banner {
  padding-top: var(--safe-top-with-banner);
}