/* ==================== header/header_user.css - VERSION USER ==================== */
/* Header pour utilisateurs connectés (index, dashboard, detail_compte) */

/* ==================== GRILLE USER - DESKTOP ==================== */

/* Grille 6 colonnes : Logo (4 cols) + auth-column (2 cols) */
.header-auth-row {
  grid-template-columns: repeat(6, 1fr);
  /* grid-template-rows défini automatiquement par le contenu */
}

/* Logo : 4 colonnes × 2 lignes */
.site-logo-box {
  grid-column: span 4;
  grid-row: span 2;
}

/* ==================== COLONNE D'AUTHENTIFICATION ==================== */

.auth-column {
  grid-column: span 2;  /* 2 colonnes sur 6 */
  grid-row: span 2;     /* 2 lignes */
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;  /* 2 colonnes internes */
  grid-template-rows: 52px 52px;  /* Lignes de 52px chacune */
  gap: var(--box-gap);
  margin-left: var(--spacing-sm);  /* Espace entre le logo et les boutons */
  min-width: 0;
  height: 100%;
}



/* ==================== LIGNE PSEUDO (ligne 1) ==================== */

/* .auth-column > .account-box,
.auth-column > .account-link {
  grid-column: 2;  /* Pseudo : colonne 6 uniquement */
/*  display: flex;
  align-items: center;
  justify-content: center;
}*/


/* Toggle header (affiche l'email au survol) */
.toggle-header {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.toggle-header[title]::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-surface);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip);
}

.toggle-header:hover[title]::after {
  opacity: 1;
}

/* ==================== LIGNE DE BOUTONS (ligne 2) ==================== */

.auth-row-split {
  grid-column: 1 / -1;  /* Boutons : sur les 2 colonnes internes */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--box-gap);
  width: 100%;
  transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
  transform-origin: top;
}

.auth-row-split > * {
  min-width: 0;
}

.auth-row-split .account-box,
.auth-row-split .account-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

/* ==================== MODE COLLAPSED ==================== */

/* Mode collapsed : masquer la ligne de boutons */
#header-container.collapsed .auth-row-split {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scaleY(0);
}

/* Mode collapsed : ajuster la hauteur du bloc */
#header-container.collapsed .account-block {
  max-height: 64px; /* ✅ 52px ligne + 2×6px padding = 64px */
}

/* Mode collapsed : logo sur UNE ligne */
#header-container.collapsed .site-logo-box {
  min-height: 0;
  max-height: 52px;
}

/* Mode normal : état explicite pour l'animation */
#header-container:not(.collapsed) .auth-row-split {
  opacity: 1;
  max-height: 100px;
  transform: scaleY(1);
}

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

/* Animation de dépliage */
.auth-row-split {
  animation: slideDown var(--transition-base);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Animation de pliage */
#header-container.collapsed .auth-row-split {
  animation: slideUp var(--transition-fast);
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0.8);
  }
}


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

/*
HEADER_USER.CSS :
✅ Grille complexe avec .auth-column et .auth-row-split
✅ Logo 4 colonnes × 2 lignes
✅ Auth-column 2 colonnes × 2 lignes (grid interne 52px 52px)
✅ Mode collapsed fonctionnel avec animations
✅ Toggle header avec tooltip email
✅ Responsive tablette et mobile
✅ Animations slideDown et slideUp
*/