/* Alertes personnelles : cloche de l'ERP, page « Mes alertes » (ERP et portail mobile). */

/* ---------- Cloche ---------- */
.alert-bell { position: relative }
.alert-bell > summary {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  cursor: pointer; list-style: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.alert-bell > summary::-webkit-details-marker { display: none }
.alert-bell > summary:hover, .alert-bell[open] > summary { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow: var(--lift, 0 6px 18px rgba(15, 40, 80, .1)) }
.alert-bell > summary svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.alert-bell-count, .mobile-alert-link .alert-bell-count {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--surface, #fff);
  border-radius: 999px; background: var(--danger, #b33432); color: #fff; font-size: .66rem; font-weight: 850; line-height: 15px; text-align: center;
}
.alert-bell.has-new > summary svg { animation: alert-ring .9s ease-in-out 1 }
@keyframes alert-ring { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(14deg) } 40% { transform: rotate(-12deg) } 60% { transform: rotate(8deg) } 80% { transform: rotate(-4deg) } }
@media (prefers-reduced-motion: reduce) { .alert-bell.has-new > summary svg { animation: none } }
.alert-bell-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 41; width: 370px; max-height: min(560px, calc(100dvh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); background: var(--surface); box-shadow: var(--lift-strong, 0 18px 48px rgba(15, 40, 80, .2));
  animation: erp-pop .16s ease-out;
}
.alert-bell-panel .alert-list { flex: 1; overflow-y: auto; overscroll-behavior: contain }
.alert-panel-loading { margin: 0; padding: 26px 18px; color: var(--muted); text-align: center; font-size: .88rem }
.alert-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line) }
.alert-panel-head strong, .alert-panel-head small { display: block }
.alert-panel-head small { margin-top: 1px; color: var(--muted); font-size: .76rem }
.alert-panel-head form { margin: 0 }
.alert-panel-footer { display: flex; justify-content: center; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-alt, #f6f8fb); font-size: .84rem; font-weight: 700; text-decoration: none }
.alert-panel-footer:hover { background: var(--blue-soft, #e8f0fa) }

/* ---------- Liste d'alertes ---------- */
.alert-list { list-style: none; margin: 0; padding: 4px 0 }
.alert-list li a {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; color: var(--ink); text-decoration: none;
  transition: background .12s ease;
}
.alert-list li a:hover { background: var(--surface-alt, #f6f8fb) }
.alert-list li.is-unread a { background: color-mix(in srgb, var(--blue-soft, #e8f0fa) 55%, transparent) }
.alert-list li.is-unread a:hover { background: var(--blue-soft, #e8f0fa) }
.alert-list li.is-unread strong { font-weight: 800 }
.alert-copy { display: grid; gap: 2px; min-width: 0; flex: 1 }
.alert-copy strong { font-size: .9rem; font-weight: 650; line-height: 1.35 }
.alert-copy small { color: var(--muted); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere }
.alert-copy time { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums }
.alert-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--blue) }
.alert-empty { padding: 26px 18px; color: var(--muted); font-size: .88rem; line-height: 1.6; text-align: center }
.alert-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-soft, #e8f0fa); color: var(--blue) }
.alert-icon-appointment_cancelled { background: var(--danger-soft, #fbeaea); color: var(--danger, #b33432) }
.alert-icon-contact_new, .alert-icon-contact_reply, .alert-icon-ticket_reply { background: var(--success-soft, #e5f4f1); color: var(--success, #137a70) }
.alert-icon-prospect_new, .alert-icon-demo_conversion { background: var(--warning-soft, #fdf3dc); color: var(--warning, #9a6400) }
html body button.alert-link-button { min-height: 0; padding: 4px 2px; border: 0; border-radius: 4px; background: transparent; color: var(--blue); font-size: .82rem; font-weight: 700; box-shadow: none; filter: none; cursor: pointer }
html body button.alert-link-button:hover { background: transparent; color: var(--blue); text-decoration: underline }

/* ---------- Page « Mes alertes » ---------- */
.alerts-page { max-width: 1120px; margin: 0 auto }
.alerts-page [hidden] { display: none !important }
.alerts-heading { margin: 6px 0 24px }
.alerts-heading h1 { margin: 8px 0 10px; font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -.03em }
.alerts-heading p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.65 }
.alerts-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start }
.alerts-side { display: grid; gap: 22px }
.alerts-page .card { margin: 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px }
.alerts-page h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.08rem }
.alerts-feed { padding: 0 !important; overflow: hidden }
.alerts-feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 20px; border-bottom: 1px solid var(--line) }
.alerts-feed-head h2 { margin-right: auto }
.alerts-filter { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-alt, #f1f4f8) }
.alerts-filter a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; color: var(--muted); font-size: .84rem; font-weight: 700; text-decoration: none }
.alerts-filter a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 40, 80, .12) }
.alerts-read-all { margin: 0 }
.alert-list-page li a { padding: 14px 20px }
.alert-list-page li + li { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent) }
.alerts-count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-alt, #f1f4f8); color: var(--muted); font-size: .74rem; font-weight: 800 }
.alerts-device-head { display: flex; gap: 14px; margin-bottom: 16px }
.alerts-device-head p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55 }
.alerts-device-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--blue-soft, #e8f0fa); color: var(--blue) }
.alerts-device-icon svg, .alerts-share svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.alerts-share { display: inline-grid; vertical-align: middle; color: var(--blue) }
.alerts-share svg { width: 19px; height: 19px }
.alerts-primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 750; font-size: .95rem; cursor: pointer }
.alerts-primary:hover { filter: brightness(1.08) }
.alerts-device-note { margin: 10px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.6 }
.alerts-device-ok { display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--success-soft, #e5f4f1); color: var(--success, #137a70); font-weight: 750 }
.alerts-device-warning { margin: 10px 0 0; padding: 11px 13px; border-radius: 11px; background: var(--danger-soft, #fbeaea); color: var(--danger, #b33432); font-size: .86rem; line-height: 1.55; font-weight: 650 }
.alerts-device-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px }
.alerts-status { min-height: 1.3em; margin: 12px 0 0; color: var(--muted); font-size: .86rem }
.alerts-status.is-error { color: var(--danger, #b33432) }
.alerts-steps { list-style: none; display: grid; gap: 12px; margin: 12px 0 0; padding: 0 }
.alerts-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; line-height: 1.5 }
.alerts-steps li > span:first-child { display: grid; place-items: center; flex: none; width: 25px; height: 25px; border-radius: 8px; background: var(--blue-soft, #e8f0fa); color: var(--blue); font-weight: 800; font-size: .8rem }
.alerts-preferences form { display: grid; gap: 14px; margin-top: 14px }
.alerts-kinds { display: grid; gap: 4px; margin: 0; padding: 0; border: 0 }
.alerts-kinds legend { margin-bottom: 8px; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase }
.alerts-check { display: flex; align-items: center; gap: 12px; margin: 0; padding: 7px 4px; border-radius: 10px; cursor: pointer; font-size: .9rem; font-weight: 600 }
.alerts-check:hover { background: var(--surface-alt, #f6f8fb) }
.alerts-check > span:not(.alert-icon) { flex: 1 }
.alerts-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--blue) }
.alerts-switch, .alerts-field { padding: 12px 4px 0; border-top: 1px solid var(--line); border-radius: 0 }
.alerts-switch:hover { background: transparent }
.alerts-switch strong, .alerts-switch small, .alerts-field strong, .alerts-field small { display: block }
.alerts-switch small, .alerts-field small { margin-top: 2px; color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.5 }
.alerts-field { display: grid; gap: 8px; margin: 0; font-size: .9rem }
.alerts-field select { width: 100%; min-height: 42px; border-radius: 10px }
.alerts-preferences button[type=submit] { justify-self: start }
.alerts-device-list { list-style: none; display: grid; gap: 4px; margin: 12px 0 0; padding: 0 }
.alerts-device-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0 }
.alerts-device-list li + li { border-top: 1px solid var(--line) }
.alerts-device-list form { margin: 0 }
.alerts-device-list strong, .alerts-device-list small { display: block }
.alerts-device-list small { color: var(--muted); font-size: .78rem; line-height: 1.5 }
.alerts-device-list .icon-button { display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted) }
.alerts-device-list .icon-button:hover { border-color: var(--danger, #b33432); background: var(--danger-soft, #fbeaea); color: var(--danger, #b33432) }
.alerts-error { color: var(--danger, #b33432) }
@media (max-width: 900px) {
  .alerts-layout { grid-template-columns: 1fr }
  /* Téléphone : relier l'appareil, puis les alertes, puis les réglages. */
  .alerts-side { display: contents }
  .alerts-device { order: -1 }
  .alerts-preferences, .alerts-devices { order: 1 }
  .alert-bell-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--erp-header-height, 64px) + 6px); width: auto }
}

/* ---------- Portail mobile ---------- */
.mobile-alert-link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink) }
.mobile-alert-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.mobile-alerts .alerts-layout { display: grid; grid-template-columns: 1fr; gap: 16px }
.mobile-alerts .card { padding: 18px; border-radius: 16px }
.mobile-alerts .alerts-heading { margin: 4px 0 16px }
.mobile-alerts .alerts-heading h1 { font-size: 1.6rem }
.mobile-alerts button.secondary { min-height: 44px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--blue); font-weight: 700 }
.mobile-alerts select { padding: 9px 11px; border: 1px solid var(--line); background: var(--surface) }

/* En-tête de l'ERP sur téléphone : la cloche prend place à côté du menu du compte. */
@media (max-width: 900px) {
  .erp-shell > header:has(.alert-bell) { grid-template-columns: minmax(0, 1fr) 42px 54px }
  .erp-shell > header .alert-bell { grid-column: 2; grid-row: 1; align-self: center }
  .erp-shell > header:has(.alert-bell) .account-menu { grid-column: 3 }
  .erp-shell > header:has(.alert-bell) .global-search { grid-column: 1 / -1 }
  .erp-shell > header:has(.alert-bell):has(.erp-phone-link) .global-search { grid-column: 1 / 3 }
  .erp-shell > header:has(.alert-bell) .erp-phone-link { grid-column: 3 }
}

/* Elunis CORE : boutons secondaires de la page, comme ceux de l'ERP. */
html body .core-alerts button.secondary { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--blue) }
html body .core-alerts button.secondary:hover { background: var(--blue-soft, #e8f0fa); filter: none }
html body .core-alerts .alerts-device-list .icon-button { background: var(--surface); color: var(--muted) }
/* Elunis CORE : la cloche prend la hauteur des boutons de la barre du haut. */
.mc-topbar-actions .alert-bell > summary { width: 38px; height: 38px }