/* ─────────────────────────────────────────────────────────────
   Flaynn · Les portes d'entrée

   Portage de l'écran « Connexion » de la maquette Intelligence
   (Flaynn Intelligence.dc.html, isLogin) : pas de carte, une barre
   en haut, une colonne de 400 px, la marque et l'univers, un titre,
   des champs de 44 px, un bouton plat, un pied à filet et le
   disclaimer en bas de page.

   Deux univers, décision du 2026-09-15 :
     body.porte[data-univers="investor"]  nuit froide, accent violet
     body.porte[data-univers="founder"]   papier, accent orange

   Aucune couleur n'est choisie ici : tout vient d'universes.css.
   Les classes que connexion.js pose ou lit (field__error,
   field__error--success, btn__text, is-active) sont stylées ici
   et gardent leur nom.
   ───────────────────────────────────────────────────────────── */

body.porte {
  --p-bg: var(--int-bg);
  --p-ink: var(--int-ink);
  --p-muted: var(--int-ink-muted);
  --p-line: var(--int-border-strong);
  --p-field: var(--int-surface);
  --p-accent: var(--int-accent);
  --p-accent-ink: var(--int-accent-soft);
  --p-tab: var(--int-accent-mid);
  --p-erreur: var(--notyet, #dc2626);
  --p-titre: 300 30px/1.1 var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-4);
  padding: max(env(safe-area-inset-top, 0px), 18px) clamp(16px, 3vw, 32px) max(env(safe-area-inset-bottom, 0px), 18px);
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--font-sans, 'IBM Plex Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

body.porte[data-univers="founder"] {
  --p-bg: var(--atl-desk);
  --p-ink: var(--atl-ink);
  --p-muted: var(--atl-ink-faint);
  --p-line: var(--atl-border-dashed);
  --p-field: var(--atl-paper);
  --p-accent: var(--atl-flaynn);
  --p-accent-ink: var(--atl-flaynn-ink);
  --p-tab: var(--atl-flaynn);
  --p-erreur: var(--atl-notyet);
  --p-titre: 600 30px/1.1 var(--font-title);
  background-color: var(--atl-desk);
  background-image: radial-gradient(900px 500px at 88% -12%, rgba(232, 101, 26, 0.09), transparent 62%), var(--grain);
  color-scheme: light;
}

.porte [hidden] { display: none !important; }
.porte a { color: var(--p-accent-ink); text-decoration: none; }
.porte a:hover { color: var(--p-ink); }
.porte :focus-visible { outline: 2px solid var(--p-accent-ink); outline-offset: 2px; }

/* ── Barre ─────────────────────────────────────────────────── */
.porte__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.porte__retour {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--p-line); border-radius: var(--r-2);
  font-size: 12.5px; color: var(--p-ink) !important;
}
.porte__retour:hover { border-color: var(--p-accent-ink); }

/* ── Colonne ───────────────────────────────────────────────── */
.porte__scene { display: grid; place-items: center; padding: var(--sp-5) 0; }
.porte__colonne { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--sp-5); }
.porte__tete { display: flex; flex-direction: column; gap: var(--sp-3); }
.porte__marque { display: flex; align-items: center; gap: 10px; }
.porte__marque img { height: 26px; width: auto; display: block; }
.porte__monde { font-size: 13px; color: var(--p-muted); }
.porte__titre { margin: 6px 0 0; font: var(--p-titre); letter-spacing: -0.03em; text-wrap: balance; color: var(--p-ink); }
.porte__sous { margin: 0; font-size: 14px; line-height: 1.5; color: var(--p-muted); text-wrap: pretty; }

/* ── Onglets ───────────────────────────────────────────────── */
.porte__onglets { display: flex; gap: 18px; border-bottom: 1px solid var(--p-line); }
.porte__onglet {
  height: 36px; padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font: 500 13px var(--font-sans, 'IBM Plex Sans', sans-serif); color: var(--p-muted); cursor: pointer;
}
.porte__onglet.is-active { border-bottom-color: var(--p-tab); color: var(--p-ink); }

/* ── Formulaires ───────────────────────────────────────────── */
.porte__form { display: flex; flex-direction: column; gap: 14px; }
.porte__champ { display: flex; flex-direction: column; gap: 6px; }
.porte__champ-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.porte__champ-gauche { display: inline-flex; align-items: center; gap: 6px; }
.porte__label { font-size: 12.5px; font-weight: 500; color: var(--p-ink); }
.porte__input {
  height: 44px; padding: 0 12px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--p-line); border-radius: var(--r-2);
  background: var(--p-field); color: var(--p-ink);
  font: 400 14px var(--font-sans, 'IBM Plex Sans', sans-serif);
  outline: none; transition: border-color var(--dur-1) var(--ease-soft);
}
.porte__input::placeholder { color: var(--p-muted); opacity: 0.8; }
.porte__input:focus { border-color: var(--p-accent); }
.porte__input--code { font: 500 14px var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: 0.06em; }
.porte__aide { margin: 0; font-size: 12px; line-height: 1.5; color: var(--p-muted); }

.porte__lien {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 12.5px var(--font-sans, 'IBM Plex Sans', sans-serif); color: var(--p-accent-ink);
}
.porte__lien:hover { color: var(--p-ink); }
.porte__lien--centre { align-self: center; }
.porte__oeil { color: var(--p-muted); }

.porte__bouton {
  height: 46px; margin-top: 4px; padding: 0 20px;
  border: 0; border-radius: var(--r-2);
  background: var(--p-accent); color: #fff;
  font: 600 14px var(--font-sans, 'IBM Plex Sans', sans-serif); cursor: pointer;
  transition: filter var(--dur-1) var(--ease-soft);
}
/* Fondateur : l'orange de marque ne porte le texte blanc qu'a 3,33 ; le
   bouton prend l'orange fonce des appels a l'action (5,50), decision du
   2026-09-29. L'investisseur garde son violet. */
body.porte[data-univers="founder"] .porte__bouton { background: var(--orange-cta, #ad4c0c); }
.porte__bouton:hover { filter: brightness(1.08); }
.porte__bouton:disabled { opacity: 0.6; cursor: default; filter: none; }

/* defaut.css replie .field__error (max-height 0, opacity 0) tant qu'un
   parent .field--error ne l'ouvre pas : sur la porte, un message non vide
   se lit toujours. */
.porte .field__error { margin: 0; max-height: none; opacity: 1; overflow: visible; font-size: 13px; line-height: 1.5; color: var(--p-erreur); }
.porte .field__error:empty { display: none; }
/* Un succès n'est jamais vert : le vert appartient au seul Strong Yes. */
.porte .field__error--success { color: var(--p-ink); }

/* ── Panneaux secondaires (oubli, nouveau lien) ────────────── */
.porte__panneau { display: flex; flex-direction: column; gap: var(--sp-3); }
.porte__panneau-titre { margin: 0; font-size: 16px; font-weight: 600; color: var(--p-ink); }
.porte__panneau-texte { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--p-muted); }

/* ── Bouton porté par un lien (états de fin : lien expiré, succès) ── */
.porte a.porte__bouton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
.porte a.porte__bouton:hover { color: #fff; }

/* ── Écrans de jeton : champ figé, aide, compteur, consentement ── */
.porte__input:disabled, .porte__input[readonly] { opacity: 0.75; cursor: default; }
.porte__aide--compteur { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.porte .beta-mdp-compteur { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Minimum atteint : l'encre, jamais le vert, qui appartient au seul Strong Yes.
   L'ancienne feuille (auth.css) le passait en vert. */
.porte .beta-mdp-compteur.is-ok { color: var(--p-ink); }
.porte__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--p-muted); cursor: pointer; }
.porte__consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--p-tab); cursor: pointer; }
.porte__consent a { color: inherit; text-decoration: underline; }

/* ── Code à six chiffres (double authentification) ────────── */
.porte__otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.porte__otp-case {
  height: 52px; min-width: 0; padding: 0; box-sizing: border-box;
  border: 1px solid var(--p-line); border-radius: var(--r-2);
  background: var(--p-field); color: var(--p-ink); text-align: center;
  font: 500 22px var(--font-mono, 'IBM Plex Mono', monospace); font-variant-numeric: tabular-nums;
  outline: none; transition: border-color var(--dur-1) var(--ease-soft);
}
.porte__otp-case:focus { border-color: var(--p-accent); }
.porte__otp.is-error .porte__otp-case { border-color: var(--p-erreur); }

/* ── Pied ──────────────────────────────────────────────────── */
.porte__pied {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: 14px; border-top: 1px solid var(--p-line);
  font-size: 13px; line-height: 1.5; color: var(--p-muted);
}
.porte__pied p { margin: 0; }
.porte__legal { margin: 0; max-width: 64ch; font-size: 11.5px; line-height: 1.5; color: var(--p-muted); }

/* ── Papier : le sélecteur de langue est dessiné pour la nuit ─ */
body.porte[data-univers="founder"] .lang-toggle { background: var(--atl-paper); border-color: var(--atl-border-dashed); color: var(--atl-ink-faint); }
body.porte[data-univers="founder"] .lang-toggle::after { background: var(--atl-paper-sunken); border-color: var(--atl-border); }
body.porte[data-univers="founder"] .lang-toggle__btn.is-active,
body.porte[data-univers="founder"] .lang-toggle__btn:hover { color: var(--atl-ink); }

/* ── Tactile : 44 px au doigt ──────────────────────────────── */
@media (pointer: coarse) {
  .porte__retour, .porte__onglet, .porte__lien, .porte__bouton { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .porte__input, .porte__bouton { transition: none; }
}