/* ==================== FORMULAIRE REGISTER - GRILLE 6 COLONNES ==================== */

/* Forcer la grille du formulaire sur 6 colonnes avec haute spécificité */
.dashboard-container .account-block .account-header-row.form-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  display: grid !important;
  gap: var(--box-gap) !important;
}

/* Classes span manquantes pour la grille 6 colonnes */
.account-header-row.form-grid .span-1 {
  grid-column: span 1;
}

.account-header-row.form-grid .span-2 {
  grid-column: span 2;
}

.account-header-row.form-grid .span-4 {
  grid-column: span 4;
}

.account-header-row.form-grid .span-5 {
  grid-column: span 5;
}

.account-header-row.form-grid .span-6 {
  grid-column: span 6;
}

/* Style du bouton en mode dark */
:root[data-theme="dark"] .account-header-row.form-grid .account-box span-1 button[type="submit"] {
  background: #1a3d5c !important;
  color: #90caf9 !important;
  border-color: #64b5f6 !important;
}

/* ==================== RESPONSIVE HEADER REGISTER ==================== */

/* Mobile/Tablette (768px et moins) */
@media (max-width: 768px) {
  /* HEADER : Passer en grille 3 colonnes */
  body .dashboard-container #header-container .header-auth-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Logo : 1 colonne × 2 lignes */
  body .dashboard-container #header-container .site-logo-box {
    grid-column: span 1 !important;
    grid-row: span 2;
    height: auto !important;
  }
  
  /* Autres cases header : 1 colonne */
  body .dashboard-container #header-container .header-auth-row .account-box:not(.site-logo-box),
  body .dashboard-container #header-container .header-auth-row .account-link:not(.site-logo-box) {
    grid-column: span 1 !important;
    max-height: none !important;
    min-height: auto !important;
  }
    
  /* FORMULAIRE : Passer en grille 3 colonnes */
  body .dashboard-container .account-block .account-header-row.form-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Cases du formulaire : adapter selon les besoins de register.php */
  body .dashboard-container .account-block .account-header-row.form-grid .span-4 {
    grid-column: span 2 !important;
  }
  
  body .dashboard-container .account-block .account-header-row.form-grid .span-2 {
    grid-column: span 1 !important;
  }
}

/* ==================== VERSION MOBILE (1 colonne) ==================== */

/* Sur mobile : passer à 1 colonne */
@media (max-width: 768px) {
  .dashboard-container .account-block .account-header-row.form-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  
  /* Toutes les cases prennent 1 colonne */
  .account-header-row.form-grid .span-1,
  .account-header-row.form-grid .span-2,
  .account-header-row.form-grid .span-4,
  .account-header-row.form-grid .span-5,
  .account-header-row.form-grid .span-6 {
    grid-column: span 1;
  }
}

/* Mobile/Tablette (768px et moins) */
@media (max-width: 768px) {
  /* Passer le formulaire en grille 3 colonnes */
  body .dashboard-container .account-block .account-header-row.form-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Pseudo, Email, Password, Case vide : passent de 4 à 2 colonnes */
  body .dashboard-container .account-block .account-header-row.form-grid .span-4 {
    grid-column: span 2 !important;
  }
  
  /* Bouton Création : passe de 2 à 1 colonne (garde 4 lignes) */
  body .dashboard-container .account-block .account-header-row.form-grid .span-2 {
    grid-column: span 1 !important;
  }
  /* Retirer les limites de hauteur et overflow du header en mobile */
  body .dashboard-container #header-container .account-block {
    max-height: none !important;
    overflow: visible !important;  /* ✅ AJOUTER CETTE LIGNE */
  }
}