/* =====================================================================
   BAZA-S300 — CONNEXIONS APPLE ET GOOGLE : 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 validé S215→S298).

   Contenu :
   - séparateur « ou » entre les accès Baza et les accès fournisseurs ;
   - boutons Apple et Google, aux dimensions et couleurs des chartes
     officielles (noir Apple, blanc bordé Google) ;
   - rappel du téléphone obligatoire, sous les boutons ;
   - section « Méthodes de connexion » de la page « Moi ».

   DEUX POINTS DE VIGILANCE ÉCRITS ICI PARCE QU'ILS SE VOIENT :

   1. AUCUN LOGO N'EST DESSINÉ EN CSS. Les marques Apple et Google sont
      des marques déposées, dont les chartes interdisent la reproduction
      approximative. Le sigle vient d'un fichier officiel servi depuis
      public/ ; tant qu'il n'est pas présent, le bouton reste LISIBLE
      (libellé seul) plutôt que faux.

   2. Aucune taille de texte sous 16 px sur les champs et boutons de
      parcours : sous ce seuil, iOS zoome automatiquement et déplace la
      réponse hors de l'écran (piège documenté S263/S287).
   ===================================================================== */

/* --- Séparateur « ou » ---------------------------------------------- */

.s300-oauth-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--text-faint);
  font-size: 0.85rem;
  text-transform: lowercase;
}

.s300-oauth-separator::before,
.s300-oauth-separator::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--line, rgba(0, 0, 0, 0.12));
}

/* --- Groupe de boutons ---------------------------------------------- */

.s300-oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Socle COMMUN aux deux boutons : hauteur tactile confortable (44 px, seuil
   d'accessibilité), texte 16 px (pas de zoom iOS), aucune troncature. */
.s300-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  /* Le libellé peut être long en espagnol : il passe à la ligne plutôt que
     d'être coupé (défaut relevé à la recette responsive S287). */
  white-space: normal;
  text-align: center;
}

.s300-oauth-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

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

/* Apple — variante NOIRE de la charte : fond noir, texte blanc. */
.s300-oauth-btn--apple {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* Google — variante BLANCHE de la charte : fond blanc, filet gris, texte
   presque noir. Les valeurs sont celles publiées par Google. */
.s300-oauth-btn--google {
  background-color: #ffffff;
  color: #1f1f1f;
  border-color: #747775;
}

/* Sigle officiel, servi comme FICHIER : jamais redessiné en CSS. */
.s300-oauth-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: block;
}

/* --- Rappel du téléphone -------------------------------------------- */

.s300-oauth-notice {
  margin: 10px 0 0;
  color: var(--text-faint);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: center;
}

/* --- Retour du fournisseur (écran d'attente) ------------------------ */

.s300-oauth-return {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
}

/* --- Section « Méthodes de connexion » (page « Moi ») ---------------- */

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

.s300-method {
  display: flex;
  /* BAZA-S300 (recette visuelle 390 px) — quand la confirmation de retrait
     apparaît, elle devient un TROISIÈME élément de la rangée : sans passage à
     la ligne, elle comprimait la colonne des dates à un mot par ligne. La
     rangée se replie, la confirmation prend toute la largeur. */
  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);
}

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

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

.s300-method-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

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

/* Action de retrait : VISIBLE, jamais cachée derrière un geste (règle
   permanente « rien de masqué », amende S192). */
.s300-method-action {
  flex: 0 0 auto;
  min-height: 36px;
  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;
}

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

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

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

  .s300-method-action {
    width: 100%;
  }
}