/* connexion.css — Écran de connexion undust (N13, doctrine Pby1980e).
   Contrat = /home/ll/Projects/undust--charte/static/connexion/.
   Charger APRÈS tokens.css (fait via chrome_head → :app par Propshaft).
   L'anonyme ne voit AUCUN chrome de session : le layout login rend
   canvas + carte + bande basse système seule (langue N10d + thème N8
   + signature undust. N10b) — pas de barre produit, pas de compte,
   pas d'outil d'app. */

/* ── canvas : même échange canvas/fenêtre que le chrome v3 ── */
.connexion-canvas {
  --c-canvas: var(--surface-raised, #F5F5F3);
  --c-fenetre: var(--surface, #FFFFFF);
}
html[data-theme="dark"] .connexion-canvas,
html.dark .connexion-canvas {
  --c-canvas: var(--surface, #0B151B);
  --c-fenetre: var(--surface-raised, #1B2930);
}
.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, #1C1E2A);
  font-family: var(--font-sans, Aspekta, system-ui, sans-serif);
  container-type: inline-size;
}

/* ── scène : la carte centrée dans le canvas ── */
.connexion-scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6, 24px);
  padding: var(--space-8, 32px) var(--space-4, 16px);
}

/* ── carte ── */
.connexion-carte {
  width: min(420px, 100%);
  margin-inline: auto;
  background: var(--c-fenetre);
  border-radius: var(--radius-window, 16px);
  padding: var(--space-12, 48px) var(--space-8, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6, 24px);
  text-align: center;
}

.connexion-marque {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 12px);
}
.connexion-marque .connexion-mono {
  width: 28px;
  height: 28px;
  display: block;
  color: var(--text-primary, #1C1E2A);
}
.connexion-marque .connexion-mono .atome { fill: var(--accent, #FB5102); }

.connexion-produit {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: var(--type-h3-tracking, -0.01em);
  line-height: 1;
}

.connexion-acces {
  margin: 0;
  font-size: var(--type-body-size, 16px);
  line-height: var(--type-body-leading, 1.6);
  color: var(--text-secondary, #52545F);
  max-width: 34ch;
}

/* champ email — plein cadre, cohérent avec le CTA */
.connexion-champ {
  display: block;
  width: 100%;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--c-fenetre);
  color: var(--text-primary, #1C1E2A);
  border: var(--border-width-strong, 2px) solid var(--border-color-strong, #1C1E2A);
  border-radius: 0;
  font-family: var(--font-sans, Aspekta, sans-serif);
  font-weight: 500;
  font-size: var(--type-body-size, 16px);
  line-height: 1.4;
  text-align: left;
}
.connexion-champ[readonly] {
  background: var(--surface-raised, #F5F5F3);
  color: var(--text-secondary, #52545F);
  cursor: not-allowed;
}
.connexion-champ:focus-visible {
  outline: var(--border-width-strong, 2px) solid var(--focus-ring, #1C1E2A);
  outline-offset: 2px;
}

/* petite ligne d'aide sous le champ (mot de passe oublié, changer d'email…) */
.connexion-aide {
  margin: 0;
  font-size: var(--type-small-size, 14px);
  line-height: var(--type-small-leading, 1.55);
  color: var(--text-secondary, #52545F);
}
.connexion-aide a {
  color: var(--text-accent, #C24002);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.connexion-aide a:hover { color: var(--accent-hover, #C24002); }

/* CTA primaire : 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, 12px) var(--space-6, 24px);
  background: var(--accent, #FB5102);
  color: var(--on-accent, #1C1E2A);
  border: var(--border-width-strong, 2px) solid var(--border-color-strong, #1C1E2A);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--border-color-strong, #1C1E2A);
  font-family: var(--font-sans, Aspekta, sans-serif);
  font-weight: 700;
  font-size: var(--type-body-size, 16px);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: transform var(--motion-duree-2, 240ms) var(--motion-courbe-sortie, ease-out),
              box-shadow var(--motion-duree-2, 240ms) var(--motion-courbe-sortie, ease-out),
              color var(--motion-duree-2, 240ms) var(--motion-courbe-sortie, ease-out);
}
.connexion-cta:hover {
  color: var(--on-accent-hover, #FFFFFF);
  transform: translate(-3px, -3px) rotate(-3.5deg);
  box-shadow: 9px 9px 0 var(--border-color-strong, #1C1E2A);
}
.connexion-cta:focus-visible {
  outline: var(--border-width-strong, 2px) solid var(--focus-ring, #1C1E2A);
  outline-offset: 4px;
}

/* CTA secondaire : même géométrie, variante sobre (pas d'aplat orange). */
.connexion-cta-sec {
  display: block;
  width: 100%;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  background: transparent;
  color: var(--text-primary, #1C1E2A);
  border: var(--border-width-strong, 2px) solid var(--border-color-strong, #1C1E2A);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--border-color-strong, #1C1E2A);
  font-family: var(--font-sans, Aspekta, sans-serif);
  font-weight: 700;
  font-size: var(--type-body-size, 16px);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: transform var(--motion-duree-2, 240ms) var(--motion-courbe-sortie, ease-out),
              box-shadow var(--motion-duree-2, 240ms) var(--motion-courbe-sortie, ease-out);
}
.connexion-cta-sec:hover {
  transform: translate(-3px, -3px) rotate(-3.5deg);
  box-shadow: 9px 9px 0 var(--border-color-strong, #1C1E2A);
}
.connexion-cta-sec:focus-visible {
  outline: var(--border-width-strong, 2px) solid var(--focus-ring, #1C1E2A);
  outline-offset: 4px;
}

/* Deux niveaux d'empilement :
   `.connexion-actions` enveloppe { form + aide/second CTA } ;
   `.connexion-champs` enveloppe les champs + submit d'UN form Rails.
   Rails enveloppe déjà chaque CTA dans un <form> — le gap vient du flex. */
.connexion-actions,
.connexion-champs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  width: 100%;
}
.connexion-actions form { margin: 0; width: 100%; }
.connexion-carte turbo-frame { display: block; width: 100%; }

/* ── bande basse système (N11) : langue N10d + thème N8 + signature undust. ── */
.connexion-bas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  min-height: 48px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: var(--type-small-size, 14px);
  color: var(--text-secondary, #52545F);
}

/* lien discret « Webinaires » sous la carte */
.connexion-lien {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0 auto;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  color: var(--text-secondary, #52545F);
  text-decoration: none;
  font-size: var(--type-small-size, 14px);
}
.connexion-lien:hover { color: var(--text-accent, #C24002); }
.connexion-lien svg { width: 16px; height: 16px; }

/* ── ≤ 440 (375 cible N9) : carte bord à bord, respiration réduite ── */
@container (max-width: 440px) {
  .connexion-scene { padding: var(--space-4, 16px) var(--space-3, 12px); }
  .connexion-carte { padding: var(--space-8, 32px) var(--space-4, 16px); }
  .connexion-cta,
  .connexion-cta-sec {
    box-shadow: 4px 4px 0 var(--border-color-strong, #1C1E2A);
  }
  .connexion-cta:hover,
  .connexion-cta-sec:hover {
    box-shadow: 6px 6px 0 var(--border-color-strong, #1C1E2A);
  }
}

@media (prefers-reduced-motion: reduce) {
  .connexion-cta,
  .connexion-cta-sec { transition: none; }
  .connexion-cta:hover,
  .connexion-cta-sec:hover { transform: none; }
}