/* connexion.css — Écran de connexion undust (N13, doctrine Pby1980e).
   Repris d'agents.undust.co (référence charte N16, fractal--agents app/assets/stylesheets/connexion.css),
   complété des pièces Q42 du contrat charte (.connexion-statut, .connexion-geste) pour la carte de refus.
   Variante panneau et .connexion-attente non reprises (non utilisées ici).
   Copié du contrat `~/Projects/undust--charte/static/connexion/connexion.css`
   (v2.2.1+ post-PR #8 du charte, pas encore livré dans la gem undust-charte).
   Charger APRÈS tokens.css. Aucun hex ici. JAMAIS d'emoji.
   L'anonyme ne voit AUCUN chrome de session : ni nav, ni compte, ni app —
   identité produit + contrôles système (langue, thème) seulement. */

/* ── body : plein cadre, flex column (flash au-dessus du canvas si présent) ── */
body.connexion-body{
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-sans);
}
body.connexion-body .connexion-canvas{ flex: 1; }

/* ── canvas : même échange canvas/fenêtre que le chrome v3 ── */
.connexion-canvas{
  --c-canvas: var(--surface-raised);
  --c-fenetre: var(--surface);
}
[data-theme="dark"] .connexion-canvas,
html.dark .connexion-canvas,
.dark .connexion-canvas{
  --c-canvas: var(--surface);
  --c-fenetre: var(--surface-raised);
}
.connexion-canvas,
.connexion-canvas *,
.connexion-canvas *::before,
.connexion-canvas *::after{ box-sizing: border-box; }
.connexion-canvas{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  container-type: inline-size;
}

/* ── scène : la carte centrée dans le canvas ── */
.connexion-scene{
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

/* ── carte ── */
.connexion-carte{
  width: min(420px, 100%);
  margin-inline: auto;
  background: var(--c-fenetre);
  border-radius: var(--radius-window);
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.connexion-marque{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.connexion-marque .connexion-mono{ width: 28px; height: 28px; display: block; color: var(--text-primary); }
.connexion-marque .connexion-mono .atome{ fill: var(--accent); }
.connexion-produit{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: var(--type-h3-tracking);
}
.connexion-acces{
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--text-secondary);
  max-width: 34ch;
}

/* CTA : LE bouton validé — aplat accent, ombre dure, label encre au repos,
   blanc au survol (décision YGK5KQOC), soulèvement + rotation au survol. */
.connexion-cta{
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: var(--on-accent);
  border: var(--border-width-strong) solid var(--border-color-strong);
  box-shadow: 6px 6px 0 var(--border-color-strong);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-body-size);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-duree-2) var(--motion-courbe-sortie),
              box-shadow var(--motion-duree-2) var(--motion-courbe-sortie);
}
.connexion-cta:hover{
  color: var(--on-accent-hover);
  transform: translate(-3px, -3px) rotate(-3.5deg);
  box-shadow: 9px 9px 0 var(--border-color-strong);
}
.connexion-cta:focus-visible{
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: 2px;
}
.connexion-cta[type="submit"],
.connexion-cta button{ appearance: none; }
.connexion-form{ width: 100%; margin: 0; }

/* ── bande basse système (N11) : langue, thème, signature undust. ── */
.connexion-bas{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 48px;
  padding-inline: var(--space-4);
  padding-block-end: env(safe-area-inset-bottom);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}

/* ── ≤ 440 (375 cible N9) : carte bord à bord, respiration réduite ── */
@container (max-width: 440px){
  .connexion-scene{ padding: var(--space-4) var(--space-3); }
  .connexion-carte{ padding: var(--space-8) var(--space-4); }
}

/* ── identité au-delà du login (Q42), depuis undust--charte static/connexion/connexion.css ── */
.connexion-statut{
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-ref-size);
  line-height: var(--type-ref-leading);
  letter-spacing: var(--type-ref-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.connexion-geste{
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-cotation-size);
  line-height: var(--type-cotation-leading);
  letter-spacing: var(--type-cotation-tracking);
  color: var(--text-secondary);
}
.connexion-geste a{ color: var(--text-primary); text-underline-offset: 3px; }