/* =======================================================================
 *  LES PAGES D'ACCÈS — connexion, mot de passe oublié, invitation
 * =======================================================================
 *
 *  Elles partagent la direction artistique de l'inscription : le ciel vivant
 *  en fond, une carte de verre au centre, les mêmes champs et les mêmes
 *  boutons. Ce sont les trois écrans qu'on traverse avant d'entrer — ils ne
 *  doivent pas donner l'impression de changer de produit en chemin.
 *
 *  Elles chargent `app.css` (le ciel, les jetons) puis `bienvenue.css` (les
 *  champs, les boutons, la case à cocher). Ce fichier n'ajoute que la mise en
 *  place, et rien d'autre : tout ce qui est déjà défini ailleurs le reste.
 * ======================================================================= */

.acces {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 48px) 20px;
  position: relative; z-index: 1;
}

.acces-carte {
  width: min(440px, 100%);
  padding: clamp(28px, 4vw, 40px) clamp(22px, 3.4vw, 34px);
  border-radius: var(--r-xl, 28px);
  border: 1px solid var(--ciel-bord, rgba(255, 255, 255, .11));
  background: var(--ciel-verre, rgba(8, 11, 18, .62));
  backdrop-filter: blur(30px) saturate(1.45);
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
}

.acces-orbe { width: 78px; aspect-ratio: 1; margin: 0 auto 20px; }

.acces h1 {
  font-size: clamp(1.5rem, 3.4vw, 1.95rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.12; text-align: center;
  color: var(--ciel-texte, #eaf1f7);
}
.acces .sous {
  margin-top: 9px; text-align: center; font-size: .9rem; line-height: 1.55;
  color: var(--ciel-texte-doux, rgba(234, 241, 247, .7));
}

.acces .formulaire { margin-top: 26px; }

.acces-pied {
  margin-top: 20px; text-align: center;
  font-size: .84rem; color: var(--ciel-texte-doux, rgba(234, 241, 247, .7));
}
.acces-pied a { color: var(--ciel-accent, #6ee7ff); text-decoration: none; }
.acces-pied a:hover { text-decoration: underline; }
.acces-pied + .acces-pied { margin-top: 10px; }

/*  LE LIEN DE RETOUR, hors de la carte : on doit pouvoir repartir sans que
 *  ça ressemble à une action du formulaire. */
.acces-retour {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 18px; font-size: .85rem; text-decoration: none;
  color: var(--ciel-texte-doux, rgba(234, 241, 247, .66));
  transition: color .25s var(--elan, ease);
}
.acces-retour:hover { color: var(--ciel-texte, #eaf1f7); }

/*  L'AVERTISSEMENT DE SESSION EXPIRÉE.
 *  Il n'est pas rouge : ce n'est pas une faute de la personne, c'est un
 *  fonctionnement normal. Un bandeau alarmant pour un événement ordinaire
 *  apprend surtout à ignorer les bandeaux. */
.acces-note {
  margin-bottom: 18px; padding: 12px 15px; border-radius: var(--r-m, 16px);
  border: 1px solid var(--ciel-accent-trait, rgba(110, 231, 255, .3));
  background: var(--ciel-accent-doux, rgba(110, 231, 255, .1));
  color: var(--ciel-texte, #eaf1f7);
  font-size: .86rem; line-height: 1.5;
}

/*  Les deux écrans (connexion / mot de passe oublié) occupent la même place :
 *  on les échange sans que la carte saute. */
.acces-vue[hidden] { display: none; }