/* =====================================================================
   BAZA-S303 — CLÉS D'ACCÈS (PASSKEYS) : styles ADDITIFS.

   Feuille servie depuis public/ (Vite ne la fusionne PAS dans
   assets/index-*.css) : la coque CSS GELÉE S141 reste byte-identique,
   aucun re-pin de hash, PWA sans réinstallation (motif S215→S301).

   Contenu :
   - bouton « Se connecter avec une clé d'accès » de l'écran de connexion ;
   - section « Mes clés d'accès » de la page « Moi » (liste, création,
     confirmation de suppression, demande de mot de passe).

   TROIS RÈGLES ÉCRITES ICI PARCE QU'ELLES SE VOIENT :

   1. AUCUNE MARQUE, AUCUN LOGO BIOMÉTRIQUE. Ni pomme, ni icône Face ID, ni
      empreinte dessinée. Baza ne sait PAS quel capteur l'appareil va
      utiliser — l'écran ne peut donc pas l'illustrer sans mentir. Le bouton
      porte un texte, et rien d'autre. (À l'inverse d'Apple/Google en S300,
      où la marque est OBLIGATOIRE sur le bouton.)

   2. Aucune taille de texte sous 16 px sur les boutons et champs de
      parcours : sous ce seuil iOS zoome et déplace la réponse hors écran
      (piège S263/S287). Le champ de mot de passe de réauthentification
      est donc à 1rem, pas à 0,9rem.

   3. Cibles tactiles ≥ 44 px, y compris le bouton de suppression : une
      action destructive ne se rate pas du doigt (règle S301 ergonomie).
   ===================================================================== */

/* --- Bouton de connexion (écran de pré-authentification) ------------- */

.s303-passkey-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  background-color: var(--surface, #ffffff);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  /* Le libellé est long en espagnol (« Iniciar sesión con una llave de
     acceso ») : il passe à la ligne plutôt que d'être coupé (défaut S287). */
  white-space: normal;
  text-align: center;
}

/* Le bouton est retiré quand l'appareil n'expose pas WebAuthn ou quand le
   serveur ne publie pas la surface. Sans cette règle, le `display: flex`
   ci-dessus l'emporterait sur `[hidden] { display: none }` du navigateur et
   un bouton MORT resterait affiché. */
.s303-passkey-signin[hidden] {
  display: none;
}

.s303-passkey-signin:disabled {
  opacity: 0.55;
  cursor: default;
}

.s303-passkey-signin:focus-visible {
  outline: 2px solid var(--accent, #2f6f4e);
  outline-offset: 2px;
}

/* Rappel sous le bouton : le téléphone Baza reste le chemin de récupération.
   Ce n'est pas une mention légale décorative, c'est la promesse qui rend la
   clé d'accès acceptable — elle se lit, donc elle est lisible. */
.s303-passkey-notice {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
}

/* --- Section « Mes clés d'accès » (page « Moi ») --------------------- */

.s303-passkey-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.s303-passkey {
  display: flex;
  /* La confirmation de suppression devient un TROISIÈME élément de la
     rangée : sans repli, elle comprimerait la colonne des dates à un mot
     par ligne (défaut mesuré en S300 à 390 px). */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  background-color: var(--surface, #ffffff);
}

.s303-passkey-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.s303-passkey-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  /* Libellé choisi par le membre : il peut être long, il ne déborde jamais
     et il n'est jamais coupé au milieu d'un mot (amende S287). */
  overflow-wrap: anywhere;
}

.s303-passkey-meta {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Action de suppression : VISIBLE, jamais derrière un geste caché
   (règle permanente « rien de masqué », amende S192). */
/* SPÉCIFICITÉ DÉLIBÉRÉE — mesurée, pas supposée.
   Le bouton porte AUSSI « text-btn », qui vit dans la coque GELÉE S141. Cette
   coque est chargée APRÈS cette feuille additive, et « .text-btn » (min-height
   32px, font-size 0.8rem) a EXACTEMENT la même spécificité que
   « .s303-passkey-action » : à égalité, c'est le dernier chargé qui gagne. La
   règle ci-dessous était donc correctement DÉCLARÉE et pourtant RECOUVERTE — le
   bouton était peint à 32 px, sous le seuil tactile de 44 px, et une porte qui
   lit le CSS ne pouvait pas le voir (leçon S301b, défaut mesuré au pixel par
   scripts/recette-app-s303-cles-acces-responsive.ts).
   On remonte donc la spécificité à 0-2-0 via le parent « .s303-passkey » plutôt
   que d'employer « !important » ou de toucher à la coque gelée. L'identité
   visuelle (pastille verte de « text-btn ») est conservée ; seules la taille
   tactile et la lisibilité sont reprises. */
.s303-passkey .s303-passkey-action {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  background-color: transparent;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.s303-passkey .s303-passkey-action:focus-visible {
  outline: 2px solid var(--accent, #2f6f4e);
  outline-offset: 2px;
}

.s303-passkey .s303-passkey-action:disabled {
  opacity: 0.55;
  cursor: default;
}

/* La confirmation occupe une ligne ENTIÈRE sous la rangée : elle se lit d'un
   coup, c'est elle qui décide d'une suppression. */
.s303-passkey-confirm {
  flex: 0 0 100%;
  margin: 4px 0 0;
}

.s303-passkey-empty {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- Création d'une clé --------------------------------------------- */

.s303-passkey-create {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
}

.s303-passkey-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s303-passkey-field label {
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* 16 px OBLIGATOIRES : sous ce seuil, iOS zoome à la mise au point et le
   bouton de validation part hors de l'écran (piège S263/S287). */
.s303-passkey-field input {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  background-color: var(--surface, #ffffff);
  color: var(--text);
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.s303-passkey-field input:focus-visible {
  outline: 2px solid var(--accent, #2f6f4e);
  outline-offset: 1px;
}

.s303-passkey-create-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  background-color: var(--surface, #ffffff);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  white-space: normal;
}

.s303-passkey-create-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.s303-passkey-create-btn:focus-visible {
  outline: 2px solid var(--accent, #2f6f4e);
  outline-offset: 2px;
}

/* Écrans étroits (iPhone SE, 320 px) : le bouton de suppression passe SOUS le
   libellé au lieu de le comprimer. */
@media (max-width: 360px) {
  .s303-passkey {
    flex-direction: column;
    align-items: stretch;
  }

  .s303-passkey .s303-passkey-action {
    width: 100%;
  }
}