/* ============================================================
   FlowLab — Page de connexion dédiée (login.html)
   S'appuie sur flowlab-ds.css + pages/index.css (chargée après).
   Carte unique centrée (style "auth card"), identité FlowLab teal.
   Light + dark via tokens. Aucune logique / id / action modifiés.
   ============================================================ */

/* --- Masquer le contenu "vitrine" hérité de la copie -------- */
.fl-page-login .fl-feature-band,
.fl-page-login .portal-section,
.fl-page-login .portal-footer,
.fl-page-login .login-visual { display: none !important; }

/* --- Fond de page : tint doux + halo accent ----------------- */
.fl-page-login .portal-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(60% 55% at 50% -6%, var(--fl-accent-soft) 0%, transparent 70%),
    var(--fl-bg-2);
}

/* --- En-tête : marque centrée, actions en haut à droite ----- */
.fl-page-login .portal-header {
  position: relative;
  border-bottom: none;
  background: transparent;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: clamp(26px, 5vh, 52px) 16px clamp(6px, 2vh, 18px);
}
.fl-page-login .portal-brand {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.fl-page-login .portal-brand h1 { margin: 0; }
.fl-page-login .portal-brand p { margin: 2px 0 0; color: var(--fl-text-2); }
.fl-page-login .portal-header-actions {
  position: absolute;
  top: 16px; right: 16px;
  gap: 8px;
}

/* --- Zone principale : centre la carte ---------------------- */
.fl-page-login .portal-main {
  flex: 1;
  width: 100%; max-width: none;
  padding: clamp(12px, 3vw, 28px) 16px clamp(28px, 6vh, 56px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.fl-page-login .portal-hero-premium {
  display: block;
  grid-template-columns: none;
  padding: 0;
  min-height: 0;
  width: 100%;
  max-width: 440px;
}

/* --- La carte ---------------------------------------------- */
.fl-page-login .secure-access-panel {
  width: 100%;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(12, 14, 16, .04),
    0 28px 60px -34px rgba(12, 14, 16, .35);
  padding: clamp(24px, 4.5vw, 38px);
  display: block;
  overflow: visible;
}

/* --- Titre / sous-titre centrés ---------------------------- */
.fl-page-login .secure-access-panel .panel-top {
  display: block;
  border-bottom: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: center;
}
.fl-page-login .panel-top .login-welcome {
  display: block;
  margin: 0 0 6px;
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--fl-accent);
}
.fl-page-login .panel-top .login-welcome::before { display: none; content: none; }
.fl-page-login .secure-access-panel .panel-top #panel-title {
  margin: 0;
  font-family: var(--fl-display);
  font-weight: 800;
  font-size: clamp(26px, 5.4vw, 32px);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fl-text);
}
.fl-page-login .secure-access-panel .panel-top #panel-subtitle {
  margin: 10px 0 0;
  color: var(--fl-text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* Masquer la pastille d'état pour un rendu épuré (JS conservé) */
.fl-page-login .secure-access-panel .panel-top .status-pill { display: none; }

/* --- Conteneur des vues ------------------------------------ */
.fl-page-login .secure-access-panel .views { padding: 0; width: 100%; }

/* --- Réordonner le formulaire : Google d'abord (style réf.) - */
.fl-page-login #login-form { display: flex; flex-direction: column; }
.fl-page-login #login-form .fl-google-btn      { order: 1; }
.fl-page-login #login-form .fl-google-note     { order: 2; }
.fl-page-login #login-form .fl-or              { order: 3; }
.fl-page-login #login-form .form-group:has(#username) { order: 4; }
.fl-page-login #login-form .form-group:has(#password) { order: 5; }
.fl-page-login #login-form #login-btn          { order: 6; margin-top: 4px; }
.fl-page-login #login-form #login-message      { order: 7; }

/* Champ "Appareil" masqué (valeur conservée et envoyée) */
.fl-page-login #login-form .form-group:has(#device_label) { display: none; }

/* --- Bouton Google : pleine largeur ------------------------ */
.fl-page-login .fl-google-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-weight: 600;
}

/* --- Séparateur "ou par email" ----------------------------- */
.fl-page-login .fl-or { margin: 18px 0; }

/* --- Bouton principal pleine largeur ----------------------- */
.fl-page-login #login-form .btn-primary { width: 100%; padding: 14px 18px; font-weight: 700; }

/* --- Animation d'entrée ------------------------------------ */
@keyframes fl-login-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fl-page-login .secure-access-panel { animation: fl-login-in .55s cubic-bezier(.22, .61, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .fl-page-login .secure-access-panel { animation: none; }
}

/* --- Portail connecté : modules alignés horizontalement ------
   Le lanceur (#module-grid) passe d'une grille 2 colonnes à une
   rangée horizontale. Le panneau s'élargit UNIQUEMENT dans la vue
   "modules" (connecté) pour rendre la rangée lisible ; la carte de
   connexion reste à 440px. */
.fl-page-login .portal-hero-premium:has(#view-modules.active) { max-width: 720px; }

.fl-page-login #module-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 18px;
  padding-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--fl-border-2, #cdd3da) transparent;
}
.fl-page-login #module-grid > .module-card {
  flex: 0 0 clamp(185px, 46%, 210px);
  scroll-snap-align: start;
}
.fl-page-login #module-grid::-webkit-scrollbar { height: 8px; }
.fl-page-login #module-grid::-webkit-scrollbar-track { background: transparent; }
.fl-page-login #module-grid::-webkit-scrollbar-thumb { background: var(--fl-border-2, #cdd3da); border-radius: 999px; }

/* --- Mobile ------------------------------------------------ */
@media (max-width: 540px) {
  .fl-page-login .portal-header { padding-top: 28px; }
  .fl-page-login .portal-brand p { display: none; }
  .fl-page-login .portal-header-actions .portal-link-ghost { display: none; }
  .fl-page-login .portal-hero-premium:has(#view-modules.active) { max-width: 440px; }
}