/* ============================================================================
   assets/css/connexion.css — Les pages de connexion (vues/gabarits/entete_connexion.php) :
   le fond de la marque, une carte de la charte au centre. Préfixe cnx-, aucune couleur écrite
   en dur. Les vagues du fond sont dessinées par auth.js, aux couleurs --m-vague-* de charte.css : leur toile
   est en z-index 5, la carte passe au-dessus.
   ============================================================================ */

body.cnx-page {
  min-height: 100vh; margin: 0; padding: 32px 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-entete-plein);
}

.cnx-carte {
  position: relative; z-index: 10; width: 100%; max-width: 440px; padding: 32px;
  background: var(--m-blanc); border: 1px solid var(--m-bordure); border-radius: var(--m-rayon-lg);
  box-shadow: var(--m-ombre-modale); animation: apparait .5s var(--m-doux) backwards;
}
.cnx-carte:focus { outline: none; }

.cnx-tete { text-align: center; margin-bottom: 24px; }
.cnx-logo { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 20px; }
.cnx-titre { margin: 0; font-size: 22px; font-weight: 700; color: var(--m-noir); }
.cnx-sous-titre { margin: 6px 0 0; font-size: 14px; color: var(--m-gris-500); }

.cnx-message { margin-bottom: 16px; }
.cnx-formulaire .m-btn-primaire, .cnx-bouton-seul { width: 100%; justify-content: center; margin-top: 4px; }

.cnx-liens {
  margin: 28px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 14px; color: var(--m-gris-500); text-align: center;
}
.cnx-liens p { margin: 0; }
.cnx-liens a:not(.m-btn) { color: var(--m-noir); font-weight: 600; }

@media (max-width: 480px) {
  body.cnx-page { padding: 16px 12px; align-items: flex-start; }
  .cnx-carte { padding: 24px 20px; }
  .socle-regles-mdp { grid-template-columns: 1fr; }
}