/* ============================================================
   La porte — connexion et inscription.

   Cette feuille ne décrit que ce que l'atelier n'a pas : un bandeau sans
   navigation, et une colonne étroite. Tout le reste — bandes, filets, étiquettes
   monospace, boutons, champs — vient d'`atelier.css`, chargée avant celle-ci.

   Pas de carte, pas d'ombre, pas d'arrondi. L'ancienne page en posait trois, et
   c'est précisément ce qui la faisait ressembler à un autre produit que celui
   qu'elle ouvre.
   ============================================================ */

/* Le bandeau de la porte : le logo, et rien d'autre à gauche. Même hauteur et même
   filet que `.app-bar`, pour que passer de la porte à l'atelier ne fasse pas
   sauter la ligne d'horizon. */
.porte .p-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--u4);
  padding: var(--u4) var(--u4) var(--u3);
  border-bottom: 2px solid var(--rule-strong);
}

/* On lit ici deux champs et deux phrases, pas un tableau : la colonne large de
   l'atelier laisserait la ligne de saisie flotter au milieu du vide. */
.porte .wrap { max-width: 560px; }

/* La bande d'accueil porte le titre et la raison d'être du site. */
.porte .p-accueil .a-titre { margin-bottom: var(--u2); }

.porte .p-intro {
  font-size: 15px;
  color: var(--ink-3);
  margin: 0;
  max-width: 60ch;
}

/* Les deux champs l'un sous l'autre, jamais côte à côte : `.champs` de l'atelier
   les met en ligne dès qu'il y a la place, et un identifiant à côté d'un mot de
   passe se saisit mal.

   Et la base est remise à `auto` : `.champ` porte `flex: 1 1 240px`, écrit pour une
   rangée où 240 px est une largeur. Passée en colonne, cette base devient une
   hauteur et chaque champ s'étire à 240 px — la bande faisait 676 px de haut. */
.porte .champs { flex-direction: column; gap: var(--u4); }
.porte .champs .champ { flex: 0 0 auto; }

.porte .p-souviens {
  display: flex;
  align-items: center;
  gap: var(--u3);
  margin: var(--u4) 0 0;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* La case elle-même reste celle du navigateur, seulement agrandie : la redessiner
   demanderait un arrondi ou une image, et la charte n'en veut pas.
   Le type est nommé parce que Yii pose devant la case un champ caché portant la
   valeur zéro — la règle ne doit pas prétendre le dimensionner. */
.porte .p-souviens input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex: none;
}

.porte .p-souviens label { margin: 0; cursor: pointer; }

.porte .p-valider { margin-top: var(--u6); }
.porte .p-valider .bouton { width: 100%; }

/* Les deux issues secondaires. Elles sont dans leur propre bande, sous un filet,
   parce que ce ne sont pas des variantes du bouton principal : l'une crée un
   compte, l'autre n'en demande aucun. */
/* Centré, et non aligné sur la ligne de base : la phrase peut tenir sur deux
   lignes, et le bouton se retrouvait alors accroché à la première, décalé vers le
   haut par rapport au bloc qu'il accompagne. */
.porte .p-issue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--u4);
  flex-wrap: wrap;
}

.porte .p-issue + .p-issue { margin-top: var(--u4); }

.porte .p-issue p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-3);
  flex: 1 1 220px;
}

.porte .p-issue .bouton { flex: none; }

@media (max-width: 620px) {
  .porte .p-tete { padding: var(--u3); }
  /* Sur un téléphone, les deux issues s'empilent et leur bouton prend la largeur :
     c'est le pouce qui les vise. La base de la phrase repasse à `auto` pour la
     même raison que les champs — 220 px de large deviendraient 220 px de haut. */
  .porte .p-issue { flex-direction: column; align-items: stretch; }
  .porte .p-issue p { flex: 0 0 auto; }
  .porte .p-issue .bouton { width: 100%; }
}