/* connexion.css — Écran de connexion undust (N13).
   Modèle validé : /login d'ops.undust.co (carte + CTA aplat, GO Luc 02/09)
   + variante « panneau » inspirée du relevé Pocket ID (l'image qui claque).
   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 (FR|EN, thème) seulement. */

/* ── 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 (et son panneau) centrés dans le canvas ── */
.connexion-scene{
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}
.connexion-scene--panneau{
  width: min(1088px, calc(100% - 2 * var(--space-8)));
  margin-inline: auto;
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: var(--space-8);
  align-items: stretch;
  place-items: stretch;
}
.connexion-scene--panneau .connexion-carte{ align-self: center; }

/* ── 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{
  margin: 0;
  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{
  /* Le couple fond/texte du survol vient ENSEMBLE des tokens : texte
     on-accent-hover sur fond accent sans accent-hover = blanc sur orange
     vif en clair (3,34:1 < 4,5, mesuré sur csee le 06/10). */
  background: var(--accent-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;
}

/* ── formulaire (3.2.0, CH-21) — DANS @layer components (N15) ──
   Livré en couche : une utilitaire Tailwind (couche `utilities`) ou une
   règle de l'app hors couche garde la main sur ces pièces, quel que soit
   l'ordre des feuilles chez le consommateur. Les règles plus anciennes de
   ce fichier (carte, marque, CTA) restent hors couche : dette distincte,
   un consommateur peut tout ranger d'un coup par
   `@import url("/assets/connexion/connexion-1677396c.css") layer(components)`. */
@layer components {
  /* ── formulaire (connexion par mot de passe, email en deux temps) — CH-21 ──
     Le CTA reste LE seul bouton ; les champs prennent la largeur de la carte.
     Rayon des contrôles = token `--radius-interactive` (A6), jamais en dur. */
  .connexion-champs{
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    margin: 0;
  }
  .connexion-champs form{ margin: 0; width: 100%; }
  .connexion-champ{
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--c-fenetre);
    color: var(--text-primary);
    border: var(--border-width-strong) solid var(--border-color-strong);
    border-radius: var(--radius-interactive);
    font: 500 var(--type-body-size)/1.4 var(--font-sans);
    text-align: left;
  }
  .connexion-champ[readonly]{ background: var(--c-canvas); color: var(--text-secondary); cursor: not-allowed; }
  .connexion-champ:focus-visible{ outline: var(--border-width-strong) solid var(--focus-ring); outline-offset: 2px; }
  .connexion-libelle{
    display: block;
    margin-bottom: calc(-1 * var(--space-2));
    font-size: var(--type-small-size);
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
  }
  .connexion-aide{ margin: 0; font-size: var(--type-small-size); line-height: var(--type-small-leading); color: var(--text-secondary); }
  .connexion-aide a{ color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
  .connexion-alerte{
    width: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-hairline) solid var(--status-critical);
    border-radius: var(--radius-interactive);
    color: var(--status-critical);
    font-size: var(--type-small-size);
    text-align: left;
  }
  .connexion-cta{ border-radius: var(--radius-interactive); appearance: none; }

  /* ── geste principal seul (3.6.1) — LE CTA est pleine largeur (N13) même rendu
     par `button_to` sans classe sur le formulaire : la carte est une colonne flex
     centrée, son formulaire (et l'enveloppe de l'app qui le porte) s'y réduisaient
     au contenu — 246 px au lieu de la carte, relevé en ligne le 08/10 sur vote et aly. */
  .connexion-carte > :has(.connexion-cta),
  .connexion-carte form:has(.connexion-cta){ width: 100%; }

  /* ── sous la carte (3.4.0, CH-21) — local `sous_carte:` du layout ──
     UN lien public discret (ex. « Webinaires » du portail) HORS de la carte :
     la carte ne porte que la connexion (N13, un geste). Texte secondaire,
     jamais un bouton. Sans panneau : collé sous la carte, le couple reste
     centré. Avec panneau : sous la carte dans sa colonne, le panneau couvre
     les deux rangées ; ≤ 960 le panneau tombe et le couple se recentre. */
  .connexion-scene--sous-carte{ align-content: center; row-gap: var(--space-4); }
  .connexion-sous-carte{
    width: min(420px, 100%);
    margin: 0 auto;
    font-size: var(--type-small-size);
    line-height: var(--type-small-leading);
    color: var(--text-secondary);
    text-align: center;
  }
  .connexion-sous-carte p{ margin: 0; }
  .connexion-sous-carte a{ color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }
  .connexion-sous-carte a:focus-visible{ outline: var(--border-width-strong) solid var(--focus-ring); outline-offset: 2px; }
  .connexion-scene--panneau.connexion-scene--sous-carte{ grid-template-rows: 1fr auto; align-content: stretch; }
  .connexion-scene--panneau .connexion-sous-carte{ grid-column: 1; align-self: start; }
  .connexion-scene--panneau.connexion-scene--sous-carte .connexion-panneau{ grid-column: 2; grid-row: 1 / span 2; }
  @container (max-width: 960px){
    .connexion-scene--panneau.connexion-scene--sous-carte{ grid-template-rows: none; align-content: center; }
  }
}

/* ── identité au-delà du login (Q42) : mêmes cartes, trois pièces en plus ──
   Règle : le CTA aplat n'existe que s'il y a UN geste décisif DANS cette page
   (se reconnecter, accepter). Attendre un mail, décliner, reprendre = geste
   secondaire mono, jamais un deuxième bouton. */
.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; }
/* attente (retour OIDC) : trois points mono, immobiles si l'hôte réduit le mouvement */
.connexion-attente{
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  letter-spacing: 0.3em;
  color: var(--text-secondary);
}

/* ── panneau : l'image qui claque (slot d'actif de marque) ── */
.connexion-panneau{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-window);
  background: var(--gray-925);
  min-height: 480px;
}
.connexion-panneau > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dégradé sans actif : composition marque (fond profond, tampon cyan N4,
   wordmark en pied) — jamais un placeholder gris ni une image d'emprunt.
   Décor pur, marqué `data-charte-decoratif` (Bn4WbNpY) : pointer-events:none
   obligatoire sur tout le sous-arbre, condition du contrat mobile. */
.connexion-panneau--marque,
.connexion-panneau--marque *{
  pointer-events: none;
}
.connexion-panneau--marque{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8);
}
.connexion-tampon{
  align-self: flex-start;
  background: var(--cyan-500);
  color: var(--gray-925);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--type-small-size);
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-2);
}
.connexion-panneau--marque .connexion-wordmark{
  font-weight: 800;
  font-size: clamp(40px, 8cqw, 72px);
  line-height: 1;
  color: var(--gray-50);
}
.connexion-wordmark i{
  display: inline-block;
  width: 0.16em; height: 0.16em;
  background: var(--accent);
  margin-left: 0.06em;
}

/* ── bande basse système (N11) : FR|EN, 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);
  font-size: var(--type-small-size);
  color: var(--text-secondary);
}

/* ── ≤ 960 : le panneau tombe, la carte reste (rien ne s'empile en chaos) ── */
@container (max-width: 960px){
  .connexion-scene--panneau{ grid-template-columns: 1fr; }
  .connexion-panneau{ display: none; }
}
/* ── ≤ 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); }
}