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

/* ==================== GRILLE GUEST - 4 COLONNES + BANNIÈRE ==================== */

/* Adapter le bloc pour options + bannière (supprime les contraintes de header_base) */
#header-container .account-block {
  max-height: none;
  overflow: visible;
}

/* Grille : 4 cases d'options sur 1 ligne + bannière en dessous */
/* Spécificité #id .class pour battre cards.css (.account-header-row) */
#header-container .header-auth-row {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 52px auto;
  gap: var(--box-gap);
}

/* ==================== BANNIÈRE ==================== */

/* Bannière pleine largeur sous les options */
.header-banner {
  grid-column: 1 / -1;
  height: 150px;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.header-banner:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.header-banner picture {
  width: 100%;
  height: 100%;
  display: block;
}

.header-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  display: block;
}

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

@media (max-width: 768px) {
  #header-container .header-auth-row {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 52px auto;
  }
}

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

@media (max-width: 480px) {
  #header-container .header-auth-row {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 40px 40px auto;
  }

  .header-banner {
    grid-column: 1 / -1;
    height: 120px;
  }
}

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

/*
HEADER_GUEST.CSS :

STRUCTURE (4 colonnes) :
┌──────┬──────┬──────┬──────┐
│Login │Regis │Theme │ Lang │  ← Ligne 1 (52px)
├──────┴──────┴──────┴──────┤
│         BANNIÈRE          │  ← Ligne 2 (150px)
└───────────────────────────┘

MOBILE (2 colonnes) :
┌──────┬──────┐
│Login │Regis │  ← Ligne 1 (40px)
├──────┼──────┤
│Theme │ Lang │  ← Ligne 2 (40px)
├──────┴──────┤
│  BANNIÈRE   │  ← Ligne 3 (120px)
└─────────────┘

✅ Sélecteur #header-container .header-auth-row pour battre cards.css
✅ 4 cases d'options sur 1 ligne (desktop/tablette)
✅ Bannière header_landing dans le même bloc
✅ Propriétés communes héritées de header_base.css
*/