/* =============================================================================
   static/css/pages/auth.css
   Pages d'authentification standalone (hors shell) :
   reset password, lien invalide, etc.
   Consomme : tokens.css, base.css, components.css, utils.css
   Fournit  : layout centré .auth-page + branding .auth-brand

   FIX TPL-01 — Remplace base.html pour les pages accessibles sans connexion
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Layout centré
--------------------------------------------------------------------------- */
.auth-page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-8) var(--space-5);
  background:      var(--color-bg);
}

.auth-container {
  width:     100%;
  max-width: 460px;
}


/* ---------------------------------------------------------------------------
   Brand — en-tête des pages auth
--------------------------------------------------------------------------- */
.auth-brand {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             var(--space-3);
  text-align:      center;
  background:      var(--color-bg);
  border:          var(--border-width) solid var(--color-border);
  border-radius:   var(--radius-xl) var(--radius-xl) 0 0;
  border-bottom:   none;
  padding:         var(--space-6) var(--space-8);
}

.auth-brand__icon {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     0;
}

.auth-brand__icon img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.auth-brand__name {
  font-size:   var(--text-lg);
  font-weight: var(--font-bold);
  color:       var(--color-text-main);
}

.auth-brand__sub {
  font-size: var(--text-xs);
  color:     var(--color-text-light);
}


/* Carte contenu collée au bloc brand */
.auth-container .card {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  margin-bottom: var(--space-8);
}
.auth-footer {
  text-align:  center;
  font-size:   var(--text-xs);
  color:       var(--color-text-light);
  margin-top:  var(--space-8);
}


/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .auth-page {
    padding:     var(--space-6) var(--space-4);
    align-items: flex-start;
    padding-top: var(--space-10);
  }
}