/* ============================================================
   Up·me — Système de boutons « lever de soleil » (labo 3a → prod)
   Grammaire : marine = AGIR (créer, valider, envoyer)
               verre  = CONSULTER (naviguer, filtrer, ouvrir)
   Le geste : le soleil du logo se lève dans le bouton au survol
   (marine = nuit, dégradé orange 0/38/62 = disque + halo, toile
   240 % → seule la partie transparente est visible au repos).
   Namespace .upbtn — JAMAIS .btn (collision Bootstrap/Velzon).
   Pilote n°1 : écran de connexion (.login-btn), décision Fabrice 24/07.
   ============================================================ */

:root {
  --upme-marine: #2B3A64;
  --upme-marine-pressed: #C94510;   /* clic = soleil couché */
  --upme-soleil: #E8571C;
  --upme-soleil-clair: #EE6526;
  --upme-encre: #37415c;
  --upme-verre: rgba(255, 255, 255, .55);
  --upme-verre-bord: rgba(255, 255, 255, .95);
  --upme-desactive-fond: #E3E9F1;
  --upme-desactive-texte: #9AA9BF;
  --upme-lever-duree: 1.1s;
  --upme-lever-courbe: cubic-bezier(.3, 0, .25, 1);
}

/* ---------- Système réutilisable (pour les prochains écrans) ---------- */
.upbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 19px; border: none; border-radius: 999px;
  font: 600 14px inherit; white-space: nowrap; cursor: pointer;
}
.upbtn--sm { height: 34px; padding: 0 15px; font-size: 13px; }

.upbtn--agir {
  background-color: var(--upme-marine);
  background-image: linear-gradient(0deg,
    var(--upme-soleil) 0%, var(--upme-soleil-clair) 38%, rgba(238, 101, 38, 0) 62%);
  background-size: 100% 240%; background-position: 50% 0%; background-repeat: no-repeat;
  color: #fff;
  transition: background-position var(--upme-lever-duree) var(--upme-lever-courbe), box-shadow .25s;
}
.upbtn--agir:hover { background-position: 50% 100%; box-shadow: 0 5px 16px rgba(232, 87, 28, .35); }
.upbtn--agir:active { background-color: var(--upme-marine-pressed); }
.upbtn--agir:disabled { background: var(--upme-desactive-fond); color: var(--upme-desactive-texte); box-shadow: none; cursor: default; }

.upbtn--verre {
  border: 1px solid var(--upme-verre-bord); background: var(--upme-verre);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--upme-marine); box-shadow: 0 2px 8px rgba(43, 58, 100, .06);
  transition: background .25s;
}
.upbtn--verre:hover { background: rgba(255, 255, 255, .8); }

/* Soleil PLEIN (l'orange du logo, #ea580c) : le signal « des réponses humaines
   vous attendent » — l'événement le plus précieux du module emailing mérite la
   couleur de la marque (demande Fabrice 2026-08-24). */
.upbtn--soleil {
  background-color: #ea580c;
  color: #fff;
  transition: background-color .25s, box-shadow .25s;
}
.upbtn--soleil:hover { background-color: var(--upme-soleil-clair); box-shadow: 0 5px 16px rgba(232, 87, 28, .35); }
.upbtn--soleil:active { background-color: var(--upme-marine-pressed); }
.upbtn--soleil:disabled { background: var(--upme-desactive-fond); color: var(--upme-desactive-texte); box-shadow: none; cursor: default; }

.upbtn--verre-lever {
  border: none; background-color: transparent;
  background-image: linear-gradient(0deg,
    var(--upme-soleil) 0%, var(--upme-soleil-clair) 38%, rgba(238, 101, 38, 0) 62%);
  background-size: 100% 240%; background-position: 50% 0%; background-repeat: no-repeat;
  color: var(--upme-marine); font-size: 13px;
  transition: background-position var(--upme-lever-duree) var(--upme-lever-courbe), color .4s .3s;
}
.upbtn--verre-lever:hover { background-position: 50% 100%; color: #fff; }

/* Focus clavier (absent du labo — indispensable en prod) */
.upbtn:focus-visible, .login-btn:focus-visible {
  outline: 2px solid var(--upme-soleil); outline-offset: 2px;
}

/* ---------- PILOTE : écran de connexion ----------
   Les 4 boutons (.login-btn : connexion, inscription, lien oublié, reset)
   passent au lever de soleil — pleine largeur, pilule. Chargée APRÈS
   flowos-components.css / custom.min.css → ces règles gagnent. */
.login-btn {
  border: none; border-radius: 999px;
  background-color: var(--upme-marine);
  background-image: linear-gradient(0deg,
    var(--upme-soleil) 0%, var(--upme-soleil-clair) 38%, rgba(238, 101, 38, 0) 62%);
  background-size: 100% 240%; background-position: 50% 0%; background-repeat: no-repeat;
  color: #fff;
  transition: background-position var(--upme-lever-duree) var(--upme-lever-courbe), box-shadow .25s;
}
.login-btn:hover { opacity: 1; background-position: 50% 100%; box-shadow: 0 5px 16px rgba(232, 87, 28, .35); }
.login-btn:active { background-color: var(--upme-marine-pressed); }
.login-btn:disabled { background: var(--upme-desactive-fond); color: var(--upme-desactive-texte); box-shadow: none; opacity: 1; }

/* Confort : lien « Créer un compte » dans l'encre du logo */
.login-switch a { color: var(--upme-marine); font-weight: 600; }
.login-switch a:hover { color: var(--upme-soleil); }

/* Accessibilité : pas d'animation pour qui la refuse */
@media (prefers-reduced-motion: reduce) {
  .upbtn, .upbtn--agir, .upbtn--verre-lever, .login-btn { transition: none !important; }
}