/* PIPSTER PRO · bouton « Continuer avec Google »
   ═══════════════════════════════════════════════════════════════════════════
   Le bouton n'a PAS de forme à lui : il porte les classes du site (`.btn
   .btn-lg .btn-block`) ou celles de la porte du terminal (`.saas-gate-btn`),
   et hérite donc de la peau active — pilule sous `lux`, angles arrondis
   sinon — de la hauteur, du survol et du thème clair/sombre. Ce fichier ne
   fait que trois choses : lui donner la couleur neutre exigée par la charte
   de Google, empêcher le « G » d'être rétréci par `.btn svg`, et poser le
   séparateur.

   Elle est chargée par le site public ET par le terminal, dont les feuilles
   n'ont rien en commun : d'où les valeurs de repli sur chaque jeton. */

.google-auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ── Le bouton ────────────────────────────────────────────────────────────
   Fond neutre et texte à fort contraste, dans les deux thèmes : la charte
   de Google demande un bouton blanc, noir ou bleu, jamais une couleur de
   marque tierce. Nos jetons `--surface` / `--text` donnent exactement cela,
   et suivent le thème sans qu'on ait à l'écrire deux fois. */
.google-cta {
  /* Un VOILE, pas un aplat : `--surface` vaut exactement la couleur de la
     carte qui le porte (mesuré sous la peau lux), le bouton disparaissait donc
     dans son fond et ne tenait que par son liseré. Le voile se pose sur
     n'importe quel fond, dans les deux thèmes et les deux peaux — c'est déjà
     ainsi que `.btn-ghost` exprime une surface discrète. */
  background: var(--surface-2, transparent);
  background: rgb(var(--veil) / .05);
  border: 1px solid var(--border-strong, #2A2A2A);
  color: var(--text, #F5F5F5);
  gap: 10px;
  text-decoration: none;
}

.google-cta:hover {
  background: rgb(var(--veil) / .1);
  border-color: var(--text-3, #6A6A6A);
  color: var(--text, #F5F5F5);
}

/* `.btn svg { width: 15px }` rétrécirait la marque : la charte de Google
   impose de ne pas la déformer ni la réduire sous 16 px de haut. */
.google-cta .google-g {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Sur la porte du terminal, le bouton est plus court (36 px) : la marque
   descend d'autant, sans jamais passer sous le plancher de la charte. */
.saas-gate-btn.google-cta .google-g { width: 16px; height: 16px; }

/* ── Messages du bandeau One Tap ──────────────────────────────────────── */
.google-msg {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}
.google-msg[hidden]  { display: none; }
.google-msg.is-error { color: var(--down, #E5484D); }
.google-msg.is-info  { color: var(--text-2, #9A9A9A); }

/* La mention d'acceptation sous le bouton d'inscription. */
.google-note {
  margin: 0;
  font-size: .74rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-2, #9A9A9A);
}

/* ── Séparateur « ou » ────────────────────────────────────────────────────
   Un trait qui s'interrompt autour du mot. */
.google-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-3, #9A9A9A);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.google-sep::before,
.google-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #2A2A2A);
}

/* ── Porte du terminal ──────────────────────────────────────────────────
   La colonne y est étroite et le bouton vient APRÈS l'appel à l'action
   principal : `margin-top: auto` de `.saas-gate-btn` pousserait le nôtre
   au bas de la carte, loin du séparateur qui l'annonce. */
.saas-gate .google-auth { margin-top: 10px; }
.saas-gate .google-cta  { margin-top: 0; }
.saas-gate .google-sep  { margin: 12px 0; font-size: 11px; }

/* ── Compte : le rattachement en place ──────────────────────────────────── */
.google-linked {
  display: flex;
  align-items: center;
  gap: 12px;
}
.google-linked-mail { font-weight: 600; }
.google-linked-date { color: var(--text-2, #9A9A9A); font-size: .82rem; }