/* Pronotempo — demandes de notifications et invitation à installer l'application (accueil, Bienvenue, profil). */

/* Accueil : le conteneur s'efface pour que les cartes masquées ne laissent pas d'espace dans la grille. */
.notify-prompts { display: contents; }

.prompt-card { display: flex; gap: 14px; align-items: flex-start; }
.prompt-icon { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--tempo-blue-soft); color: var(--tempo-blue-strong); }
.prompt-icon svg { width: 22px; height: 22px; }
.prompt-body { flex: 1; min-width: 0; display: grid; gap: 10px; }
.prompt-body > *, .prompt-body > div > * { margin: 0; }
.prompt-body > div:not(.prompt-actions):not(.install-steps) { display: grid; gap: 6px; }
.prompt-body h2 { font-size: 1.0625rem; line-height: 1.25; font-weight: 750; letter-spacing: -0.01em; }
.prompt-body p { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }
.prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prompt-status { font-weight: 600; color: var(--success) !important; }
.prompt-status:empty { display: none; }

/* « Ne plus me demander » : lien discret, toujours touchable (44 px). */
.prompt-never { min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prompt-never:hover { color: var(--text); }

/* Étapes d'installation (iPhone / Android) */
.install-steps { display: grid; gap: 10px; }
.install-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.install-steps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); line-height: 1.4; }
.install-steps p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }
.step-icon { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--glass-bg-subtle, rgba(127, 140, 170, 0.14)); color: var(--tempo-blue-strong); }
.step-icon svg { width: 17px; height: 17px; }
.install-steps .btn { justify-self: start; gap: 8px; }
.install-steps .btn svg { width: 18px; height: 18px; }

/* Écran Bienvenue : « Te prévenir par email ? » */
.welcome-notify { width: 100%; display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--tempo-white-edge, rgba(127, 140, 170, 0.25)); text-align: left; }
.welcome-notify > * { margin: 0; }
.welcome-notify h2 { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 750; }
.welcome-notify h2 svg { width: 22px; height: 22px; color: var(--tempo-blue-strong); }
.notify-perks { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--text-muted); }
.notify-perks li { position: relative; padding-left: 22px; }
.notify-perks li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--tempo-blue-strong); }
.welcome-notify .hint { text-align: center; margin: 0; }