/* entree.css — l'habillage de la porte unique (D41).
   Thème salon, jetons de ../commun/charte.css : aucune couleur en dur, aucune
   taille hors de l'échelle. Conçu pour 375 px de large, une main, et une seule
   colonne — la porte n'a rien à mettre côte à côte. */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
a{ color:inherit; }

/* La porte tient au centre de l'écran, et reste centrée sur un écran
   d'ordinateur : au-delà de 420 px, un formulaire de deux champs étalé sur
   toute la largeur ne se lit plus. */
.porte{
  min-height:100vh; max-width:420px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 24px calc(40px + env(safe-area-inset-bottom));
}

/* Le VRAI logo (D37), en encre sur fond craie. Rien n'est dessiné ici : ni
   monogramme de secours, ni lettres empilées. */
.logo{ display:block; width:230px; max-width:66%; height:auto; margin:0 auto 22px; }

/* Même utilitaire que client.css : hors écran, jamais display:none — un titre
   en display:none disparaît aussi du lecteur d'écran, et l'on perd le seul
   <h1> de la page. */
.hors-ecran{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
             clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.porte .sous{ text-align:center; margin:0 0 26px; font-size:15px; color:var(--texte-2); line-height:1.45; }

/* champs : mêmes valeurs que l'application client (charte 5.8) — 54 px de
   haut, 16 px de corps. Sous 16 px, iOS Safari zoome tout seul à la mise au
   point et l'écran saute au moment précis où l'on tape son mot de passe. */
.champ{ display:block; margin-bottom:14px; }
.champ span{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
             color:var(--texte-2); font-weight:600; margin-bottom:6px; }
.champ input, .champ select{
  width:100%; min-height:54px; padding:14px; font:inherit; font-size:16px;
  color:var(--texte); background:var(--fond-2); border:1.5px solid var(--filet);
  border-radius:12px; -webkit-appearance:none; appearance:none;
}
/* La charte 8.4 interdit outline:none : la bordure d'accent MARQUE la mise au
   point, le contour du système reste par-dessus pour qui navigue au clavier.
   Même raison que dans client.css : charte.css pose son propre
   « .champ input:focus{ outline:none } », plus spécifique que son
   « :focus-visible ». On rétablit ce qu'elle demande, depuis chez nous. */
.champ input:focus, .champ select:focus{ border-color:var(--accent); }
.champ input:focus-visible, .champ select:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Le code à quatre chiffres se lit en chiffres tabulaires : quatre points qui
   ne dansent pas pendant qu'on tape. */
#p-code{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.4em; }

/* Un lien seul dans un formulaire reste une cible de 44 pt, aligné à droite
   pour ne pas se confondre avec le libellé du champ au-dessus. */
.lien-oubli{ display:block; text-align:right; min-height:var(--doigt); padding:11px 2px;
             margin:-6px 0 8px; font-size:14px; font-weight:600; color:var(--or-txt);
             text-decoration:underline; }

/* L'erreur sous le bouton — jamais une bordure rouge muette : la phrase porte
   l'information, la couleur ne fait que la souligner. */
#p-erreur:empty{ display:none; }
#p-erreur{ margin:14px 0 0; padding:11px 14px; border-radius:12px;
           background:color-mix(in srgb, var(--casse) 9%, var(--fond-2));
           border:1px solid var(--casse); color:var(--casse-txt); font-size:14px; line-height:1.4; }

/* La bascule vers l'entrée équipier : un bouton de texte, cible pleine
   largeur, 44 pt de haut comme tout le reste. */
.bascule{ display:block; width:100%; min-height:var(--doigt); margin-top:18px; padding:12px;
          text-align:center; font-size:14.5px; font-weight:600; color:var(--or-txt);
          text-decoration:underline; }

.lien-bas{ display:block; text-align:center; margin-top:10px; font-size:14.5px; font-weight:600;
           color:var(--or-txt); text-decoration:none; padding:12px; min-height:var(--doigt); }