/* ==================== header/header_base.css - BASE COMMUNE ==================== */
/* Règles communes aux headers guest et user */

/* ==================== CONTAINER DU HEADER ==================== */

#header-container {
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
  transition: all var(--transition-base);
}

/* Block principal du header */
#header-container .account-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
  padding: var(--box-gap);
  max-height: 122px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: max-height var(--transition-base);
}

/* ==================== GRILLE COMMUNE ==================== */

.header-auth-row {
  display: grid;
  gap: var(--box-gap);
  align-items: stretch;
}

/* ==================== LOGO (STYLES COMMUNS) ==================== */

.site-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: var(--spacing-sm); */
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  text-decoration: none;
  min-height: 110px;
  max-height: 110px;
  overflow: hidden;
}

.site-logo-box:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Paramètres image */
.site-logo-box img {
  max-height: 120px;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  background: transparent;
  border-radius: inherit;
  display: block;
}

/* ✅ Support des éléments <picture> */
.site-logo-box picture {
  width: 100%;
  height: 100%;
  display: block;
}

.site-logo-box picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================== AFFICHAGE CONDITIONNEL DES LOGOS ==================== */

/* Par défaut : afficher logo LARGE */
.site-logo-box .logo-full,
.site-logo-box picture.logo-full {
  display: block;
}

.site-logo-box .logo-compact,
.site-logo-box picture.logo-compact {
  display: none;
}

/* ==================== CASES GÉNÉRIQUES ==================== */

.account-box,
.account-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  min-height: 40px;
}

.account-box:hover,
.account-link:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.account-box:active,
.account-link:active {
  transform: translateY(0);
}

/* ==================== ICÔNES ==================== */

/* Icônes génériques */
.account-box .icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Icônes de thème */
.theme-icon {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.account-box:hover .theme-icon {
  transform: rotate(20deg);
}

/* Règle par défaut : cacher les deux icônes */
.theme-icon-sun,
.theme-icon-moon {
  display: none !important;
}

/* Afficher uniquement l'icône selon le thème actif */
:root[data-theme="light"] .theme-icon-moon {
  display: block !important;
}

:root[data-theme="dark"] .theme-icon-sun {
  display: block !important;
}

/* Icônes de drapeaux (langue) */
.flag-icon {
  width: 28px;
  height: 20px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ==================== LABELS ==================== */

.account-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== ANIMATIONS ==================== */

/* Effet pulse sur le bouton actif */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0);
  }
}

.account-box:focus,
.account-link:focus {
  animation: pulse 1.5s infinite;
}

/* ==================== ÉTATS SPÉCIAUX ==================== */

/* Bouton désactivé */
.account-box:disabled,
.account-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.account-box:disabled:hover,
.account-link:disabled:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: none;
}

/* ==================== ACCESSIBILITÉ ==================== */

/* Focus visible pour navigation clavier */
.account-box:focus-visible,
.account-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Améliorer le contraste pour les icônes */
.theme-icon,
.flag-icon {
  filter: brightness(1);
  transition: filter var(--transition-fast);
}

:root[data-theme="dark"] .theme-icon,
:root[data-theme="dark"] .flag-icon {
  filter: brightness(1.2);
}

/* ==================== PRINT ==================== */

@media print {
  #header-container {
    display: none;
  }
}

/* ==================== NOTES ==================== */

/*
HEADER_BASE.CSS :
✅ Règles communes aux deux versions (guest et user)
✅ Container, logo, cases génériques, icônes, labels
✅ Animations et états communs
✅ Accessibilité et print
❌ Pas de règles spécifiques guest ou user
*/