/*
Made by__           ___                         ___           ___          
     /__/\         /  /\                       /  /\         /  /\         
     \  \:\       /  /::\                     /  /::\       /  /:/_        
      \__\:\     /  /:/\:\                   /  /:/\:\     /  /:/ /\       
  ___ /  /::\   /  /:/  \:\   ___     ___   /  /:/  \:\   /  /:/ /::\      
 /__/\  /:/\:\ /__/:/ \__\:\ /__/\   /  /\ /__/:/ \__\:\ /__/:/ /:/\:\     
 \  \:\/:/__\/ \  \:\ /  /:/ \  \:\ /  /:/ \  \:\ /  /:/ \  \:\/:/~/:/     
  \  \::/       \  \:\  /:/   \  \:\  /:/   \  \:\  /:/   \  \::/ /:/      
   \  \:\        \  \:\/:/     \  \:\/:/     \  \:\/:/     \__\/ /:/       
    \  \:\        \  \::/       \  \/:/       \  \::/        /_Gouriou Axel
     \__\/         \__\/         \__\/         \__\/         \__\/         
                                                                           
                         - Built for reality -
*/

/* ============================================================
   HOLOSLab · Badge de signature
   ----
   Snippet autonome à poser dans le footer d'un site client.
   Tout est scopé sous .holos-badge pour ne rien casser
   du design hôte.
   ----
   Usage :
     1. <link rel="stylesheet" href="holos-badge.css">
     2. Copier le HTML du badge dans le footer
     3. Choisir le thème : data-theme="dark" (défaut) ou "light"
   ============================================================ */

.holos-badge,
.holos-badge * {
  box-sizing: border-box;
}

.holos-badge {
  /* Tokens locaux, pas de fuite vers le site hôte */
  --hb-accent: #ff5b14;
  --hb-text-dark: #cccccc;
  --hb-text-light: #333333;
  --hb-hover-dark: #ffffff;
  --hb-hover-light: #000000;
  --hb-ease: cubic-bezier(0.4, 0, 0.2, 1);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oxanium', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 4px 2px;
  border: none;
  background: none;
  transition: color 0.3s var(--hb-ease);
}

/* --- Thème foncé (défaut) : pour fond noir ou sombre --- */
.holos-badge,
.holos-badge[data-theme="dark"] {
  color: var(--hb-text-dark);
}

.holos-badge:hover,
.holos-badge[data-theme="dark"]:hover,
.holos-badge:focus-visible,
.holos-badge[data-theme="dark"]:focus-visible {
  color: var(--hb-hover-dark);
  outline: none;
}

/* --- Thème clair : pour fond blanc ou pastel --- */
.holos-badge[data-theme="light"] {
  color: var(--hb-text-light);
}

.holos-badge[data-theme="light"]:hover,
.holos-badge[data-theme="light"]:focus-visible {
  color: var(--hb-hover-light);
  outline: none;
}

/* --- Texte "BY" --- */
.holos-badge__prefix {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.85;
}

/* --- Le logo HOLOSLab --- */
.holos-badge__logo {
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.holos-badge__lab {
  display: inline-block;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--hb-accent);
  letter-spacing: 0.02em;
  margin-left: 0.05em;
}

/* --- Flèche --- */
.holos-badge__arrow {
  display: inline-block;
  font-size: 0.9em;
  opacity: 0.6;
  transition: transform 0.2s var(--hb-ease), opacity 0.3s var(--hb-ease);
}

.holos-badge:hover .holos-badge__arrow,
.holos-badge:focus-visible .holos-badge__arrow {
  transform: translate(2px, -2px);
  opacity: 1;
  color: var(--hb-accent);
}

/* --- Respect des préférences utilisateur --- */
@media (prefers-reduced-motion: reduce) {
  .holos-badge,
  .holos-badge * {
    transition: none !important;
  }
  .holos-badge:hover .holos-badge__arrow {
    transform: none;
  }
}