/* e-Tijara PRO — écran d'accueil entre la connexion et le back-office (Config/auth/layout.php + Private/Admin/header.php).
   À plat : fond bleu nuit, Twitty, barre de progression jaune, 3 étapes qui se cochent. */
.etj-hello { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 24px; background: #1b3c45; color: #fff; overflow: hidden;
  font-family: Cairo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.etj-hello.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.etj-hello.is-out { opacity: 0; visibility: hidden; transition: opacity .42s ease .05s, visibility 0s linear .5s; }
.etj-hello.is-out .eh-card { transform: scale(1.03); opacity: 0; transition: transform .45s ease, opacity .35s ease; }
.etj-hello[hidden] { display: none; }
.eh-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.eh-orb.a { width: 520px; height: 520px; top: -260px; inset-inline-end: -160px; background: rgba(255, 193, 7, .09); }
.eh-orb.b { width: 420px; height: 420px; bottom: -240px; inset-inline-start: -140px; background: rgba(95, 213, 182, .09); }
.eh-brand { position: absolute; top: 26px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; font-weight: 800; letter-spacing: .01em; color: #fff; }
.eh-brand img { width: 26px; height: 26px; }
.eh-card { position: relative; width: min(360px, 100%); display: grid; justify-items: center; text-align: center; }
.eh-tw { width: 132px; height: 132px; object-fit: contain; animation: eh-in .6s cubic-bezier(.2, 1.4, .4, 1) both, eh-bob 2.6s ease-in-out .6s infinite; }
.eh-card h1 { margin: 14px 0 4px; font-size: 22px; font-weight: 800; line-height: 1.3; color: #fff; animation: eh-up .5s .1s both; }
.eh-card p { margin: 0; font-size: 14px; color: #b9cdd2; animation: eh-up .5s .18s both; }
.eh-bar { width: 220px; height: 4px; margin: 20px 0 18px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.eh-bar i { display: block; height: 100%; width: 100%; border-radius: 4px; background: #ffc107; transform-origin: left; transform: scaleX(.06); animation: eh-bar 3.2s cubic-bezier(.15, .7, .2, 1) forwards; }
[dir="rtl"] .eh-bar i { transform-origin: right; }
.etj-hello.is-done .eh-bar i { animation: none; transform: none; transition: transform .3s ease; }
.eh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; text-align: start; }
.eh-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .45); animation: eh-lit .3s both; }
.eh-steps li b { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); font-size: 9.5px; color: transparent; animation: eh-ok .3s both; }
.eh-steps li:nth-child(1), .eh-steps li:nth-child(1) b { animation-delay: .5s; }
.eh-steps li:nth-child(2), .eh-steps li:nth-child(2) b { animation-delay: 1.1s; }
.eh-steps li:nth-child(3), .eh-steps li:nth-child(3) b { animation-delay: 1.8s; }
.etj-hello.is-done .eh-steps li, .etj-hello.is-done .eh-steps li b { animation-delay: 0s !important; animation-duration: .2s; }
@keyframes eh-lit { to { color: #fff; } }
@keyframes eh-ok { to { border-color: #1baf7a; background: #1baf7a; color: #fff; } }
@keyframes eh-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes eh-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes eh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes eh-bar { 0% { transform: scaleX(.06); } 30% { transform: scaleX(.5); } 70% { transform: scaleX(.8); } 100% { transform: scaleX(.94); } }
/* Arrivée dans le back-office : même écran, animations reprises au point atteint sur la page de connexion (--eh-skip = temps écoulé).
   Twitty ne réapparaît pas, la barre ne repart pas de zéro, les étapes déjà cochées le restent. */
.etj-hello.is-resume .eh-tw { animation-delay: calc(0s - var(--eh-skip, 0s)), calc(.6s - var(--eh-skip, 0s)); }
.etj-hello.is-resume .eh-card h1, .etj-hello.is-resume .eh-card p { animation: none; }
.etj-hello.is-resume .eh-bar i { animation-delay: calc(0s - var(--eh-skip, 0s)); }
.etj-hello.is-resume .eh-steps li:nth-child(1), .etj-hello.is-resume .eh-steps li:nth-child(1) b { animation-delay: calc(.5s - var(--eh-skip, 0s)); }
.etj-hello.is-resume .eh-steps li:nth-child(2), .etj-hello.is-resume .eh-steps li:nth-child(2) b { animation-delay: calc(1.1s - var(--eh-skip, 0s)); }
.etj-hello.is-resume .eh-steps li:nth-child(3), .etj-hello.is-resume .eh-steps li:nth-child(3) b { animation-delay: calc(1.8s - var(--eh-skip, 0s)); }
.etj-hello.is-resume.is-done .eh-steps li, .etj-hello.is-resume.is-done .eh-steps li b { animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .etj-hello * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* v2.12.2 — Twitty selon le compte : admin (Twitty qui salue) · agent (Twitty au casque) · inconnu (chargement neutre) */
.eh-brand .eh-logo { width: auto; height: 34px; }
.eh-tws { position: relative; display: grid; place-items: center; width: 150px; height: 140px; }
.eh-tws .eh-tw { grid-area: 1 / 1; display: none; width: 140px; height: 140px; }
.etj-hello[data-kind="admin"] .eh-tw.is-admin, .etj-hello[data-kind="agent"] .eh-tw.is-agent { display: block; }
.eh-spin { grid-area: 1 / 1; width: 64px; height: 64px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .12); border-top-color: #ffc107; animation: eh-spin .8s linear infinite; }
.etj-hello[data-kind] .eh-spin { display: none; }
.eh-steps .k-admin, .eh-steps .k-agent { display: none; }
.etj-hello[data-kind="admin"] .eh-steps .k-gen, .etj-hello[data-kind="agent"] .eh-steps .k-gen { display: none; }
.etj-hello[data-kind="admin"] .eh-steps .k-admin, .etj-hello[data-kind="agent"] .eh-steps .k-agent { display: inline; }
@keyframes eh-spin { to { transform: rotate(360deg); } }