/* ==================== HEADER GUEST ==================== */

/* Container principal du header guest */
.auth-header {
  width: 100%;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

/* ==================== GRILLE GUEST - DESKTOP ==================== */

/* Grille : Logo (4 cols × 2 lignes) + 2 cases par ligne = 6 colonnes */
.header-auth-row {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 52px 52px;  /* ✅ Lignes FIXES pour hauteurs ÉGALES */
  gap: var(--box-gap);
}

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

/* Cases invités : auto-placement par CSS Grid */
/* Pas besoin de span 1, le grid les place automatiquement dans les colonnes 5-6 */
.header-auth-row > .account-box,
.header-auth-row > .account-link {
  grid-row: span 1;
}

/* ==================== RESPONSIVE - TABLETTE ==================== */

@media (max-width: 768px) {
  /* Grille 3 colonnes : Logo (2 cols × 2 lignes) + 1 case par ligne */
  .header-auth-row {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 52px 52px;
  }

  /* Logo : 4 colonnes × 2 lignes */
  .site-logo-box {
    grid-column: span 4;
    grid-row: span 2;
  }
  
  /* Cases : auto-placement dans colonne 3 */
}

/* ==================== RESPONSIVE - MOBILE ==================== */

@media (max-width: 480px) {
  /* Grille plus compacte */
  .header-auth-row {
    grid-template-rows: 40px 40px;  /* Lignes réduites en mobile */
  }
  
  /* Les labels "Connexion" et "Créer compte" restent visibles en mobile */
  /* Les cases Thème/Langue n'ont pas de label, juste des icônes SVG */
}

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

/*
HEADER_GUEST.CSS :

STRUCTURE DESKTOP (6 colonnes) :
┌────────────────┬──┬──┐
│                │ 1│ 2│  ← Ligne 1 (52px)
│  LOGO (4 cols) ├──┼──┤
│                │ 3│ 4│  ← Ligne 2 (52px)
└────────────────┴──┴──┘
 cols 1-4         5  6

STRUCTURE TABLETTE/MOBILE (3 colonnes) :
┌──────────┬──┐
│          │ 1│  ← Ligne 1 (52px / 40px mobile)
│  LOGO    ├──┤
│ (2 cols) │ 2│  ← Ligne 2 (52px / 40px mobile)
└──────────┴──┘
 cols 1-2   3

✅ Auto-placement CSS Grid : les cases se positionnent automatiquement
✅ Pas de reset brutal en responsive (laisse l'auto-placement fonctionner)
✅ Lignes FIXES pour hauteurs ÉGALES à tous les breakpoints
✅ Propriétés communes héritées de header_base.css et cards.css

DIFFÉRENCE AVEC HEADER_USER.CSS :
- header_user : architecture complexe avec .auth-column (grid dans grid)
- header_guest : architecture simple avec auto-placement direct
*/