/* ============================================================
   May'Kilos — la porte : connexion et inscription.

   Une colonne étroite et centrée. Un formulaire d'authentification ne
   gagne rien à s'étaler : plus la ligne est longue, plus l'œil se perd
   entre l'étiquette et le champ.
   ============================================================ */

.porte { max-width: 460px; margin: 0 auto; padding: clamp(28px, 6vh, 64px) 0 80px; }

.porte-raison {
  background: var(--mk-mint); color: var(--mk-mint-text);
  border-radius: var(--mk-r-card); padding: 16px 20px; margin-bottom: 24px;
  font: 600 15px/1.5 var(--mk-font);
}

/* ---------- Les deux onglets ---------- */
.onglets-p {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--mk-piste); border-radius: var(--mk-r-pill); padding: 4px;
}
.onglet-p {
  min-height: 44px; border: 0; border-radius: var(--mk-r-pill); background: none;
  font: 600 15px var(--mk-font); color: var(--mk-text-2); cursor: pointer;
}
.onglet-p.on { background: var(--mk-card); color: var(--mk-primary); font-weight: 700; box-shadow: var(--mk-shadow-card); }

/* ---------- Le formulaire ---------- */
.porte-form { margin-top: 30px; }
.porte-form h1 {
  font: 800 clamp(26px, 3.4vw, 34px)/1.15 var(--mk-font);
  color: var(--mk-primary); letter-spacing: -1.2px; text-wrap: balance;
}
.porte-form .sous { font: 400 16px/1.55 var(--mk-font); color: var(--mk-text-2); margin-top: 10px; }

.champ-p { display: block; margin-top: 20px; }
.champ-p .l { display: block; font: 600 13px var(--mk-font); color: var(--mk-text-2); margin-bottom: 6px; }
.champ-p input {
  width: 100%; min-height: 56px; padding: 0 18px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-fort);
  border-radius: var(--mk-r-card); font: 500 17px var(--mk-font); color: var(--mk-text);
}
.champ-p input:focus-visible { outline: 3px solid var(--mk-primary); outline-offset: 2px; }
/* Le champ fautif se signale par une couleur ET par le message
   au-dessus du bouton : la couleur seule ne dit rien à qui ne la voit
   pas. */
.champ-p input[aria-invalid="true"] { border-color: var(--mk-refus-text); }
.champ-p .aide-p { display: block; font: 400 13px var(--mk-font); color: var(--mk-text-2); margin-top: 6px; }

.deux-p { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deux-p .champ-p { margin-top: 20px; }

.erreur-p {
  background: var(--mk-refus-bg); color: var(--mk-refus-text);
  border-radius: var(--mk-r-card); padding: 14px 18px; margin-top: 18px;
  font: 600 15px/1.5 var(--mk-font);
}
/* Un message de succès emprunte la même place — c'est là que l'œil
   revient après avoir appuyé. */
.erreur-p.bonne { background: var(--mk-mint); color: var(--mk-mint-text); }

.porte-form .btn { width: 100%; margin-top: 24px; }
.porte-form .btn[disabled] { opacity: .55; cursor: progress; }

.oublie {
  display: block; width: 100%; min-height: 44px; margin-top: 8px;
  background: none; border: 0; cursor: pointer;
  font: 600 15px var(--mk-font); color: var(--mk-primary); text-decoration: underline;
}

/* 15 px et non 13 : un texte légal est trop petit en 13 px pour ce qu'il
   engage.

   Ses deux liens restent en dessous de 24 × 24, et c'est assumé : le
   critère 2.5.8 de WCAG 2.2 exempte explicitement les liens en ligne
   dans une phrase, dont la taille est fixée par l'interligne du texte
   qui les entoure. Les agrandir davantage casserait le paragraphe pour
   satisfaire une règle qui ne s'y applique pas. */
.mentions-p { font: 400 15px/1.7 var(--mk-font); color: var(--mk-text-2); margin-top: 20px; }
.mentions-p a { color: var(--mk-primary); }

@media (max-width: 460px) {
  .deux-p { grid-template-columns: 1fr; gap: 0; }
}