/* Adjugé! — Accueil « Comment ça marche » (overlay de 1re visite, skippable).
   Mobile-first (autorité). Le desktop est confiné à app.desktop.css (l'overlay
   y rejoint les listes « panneaux plein écran → cartes centrées »). Aucun style
   inline : tout vit ici, l'animation d'entrée passe par Web Animations API
   (app.onboarding.js), CSP-safe. */

#welcome-overlay {
  position: fixed; inset: 0; z-index: 90;   /* au-dessus du splash feed (#feed-loading) */
  background: var(--bg);
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column;
  /* Entrée MOBILE : fondu seul (opacity, jamais transform → pas de conflit avec
     le centrage). En desktop, app.desktop.css remplace par dialogPop (chargé
     APRÈS, même spécificité → il gagne). */
  animation: fadeIn 0.22s ease both;
}
/* Sortie : fondu OPACITY uniquement (le transform de centrage desktop reste
   intact). Spécificité id+classe → l'emporte sur les deux règles d'animation. */
#welcome-overlay.leaving { animation: welcomeFadeOut 0.18s ease both; }
@keyframes welcomeFadeOut { from { opacity: 1; } to { opacity: 0; } }

.welcome-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; flex: 1;
}

/* Lien « Passer » discret en haut à droite, sous la safe-area. */
.welcome-skip {
  position: absolute; top: calc(10px + var(--sat)); right: 12px; z-index: 2;
  border: 0; background: transparent;
  color: var(--muted); font-weight: 700; font-size: 15px;
  padding: 8px 10px; border-radius: 12px; cursor: pointer;
}
.welcome-skip:active { background: var(--chip-bg); }

/* Zone scrollable du contenu (le CTA reste épinglé en bas). */
.welcome-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(46px + var(--sat)) 22px 18px;
  text-align: center;
}

.welcome-logo {
  width: 84px; height: 84px; object-fit: contain;
  margin: 8px auto 14px; display: block;
}

.welcome-title {
  margin: 0 0 8px; font-size: 24px; line-height: 1.18;
  font-weight: 900; color: var(--ink); letter-spacing: -0.01em;
}
/* Le nom de domaine ne doit JAMAIS casser sur deux lignes (« vos- » / « encheres.com ») :
   il reste insécable et passe en bloc à la ligne suivante si besoin. */
.welcome-brand { white-space: nowrap; }
.welcome-lead {
  margin: 0 auto 24px; max-width: 30ch;
  font-size: 15.5px; line-height: 1.45; color: var(--ink-soft);
}

.welcome-section-label {
  text-align: left;
  margin: 0 0 12px; font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted2);
}

.welcome-steps, .welcome-trust {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.welcome-trust { margin-bottom: 8px; }

.welcome-step, .welcome-trust-item {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
}

/* Pastille d'icône : ronde, crème pour les étapes, verte pour la confiance. */
.welcome-step-ico, .welcome-trust-ico {
  flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  background: var(--chip-bg);
}
.welcome-trust-ico { background: var(--green-bg); }

.welcome-step-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.welcome-step-title {
  font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.25;
}
.welcome-step-sub {
  font-size: 13.5px; line-height: 1.4; color: var(--ink-soft);
}

/* Pied épinglé : CTA pleine largeur (façon bouton primaire orange). */
.welcome-foot {
  flex: none;
  padding: 14px 22px calc(16px + var(--sab));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.welcome-cta {
  width: 100%; border: 0; cursor: pointer;
  background: var(--orange); color: #fff;
  font-size: 17px; font-weight: 800;
  padding: 16px 18px; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(253, 104, 2, 0.28);  /* teinte de --orange #FD6802 */
}
.welcome-cta:active { background: var(--orange-dark); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  #welcome-overlay, #welcome-overlay.leaving { animation: none !important; }
}