/* =========================================================
   LCD Bâtiment — Espace plomberie
   Styles spécifiques à plomberie.html (charge après style.css)
   ========================================================= */

/* ---------- Pastille "24h/24" du header ---------- */
.badge-247 {
  display: inline-grid; place-items: center;
  font-family: "Poppins", sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  color: var(--green-900); background: var(--lime-400);
  padding: 5px 9px; border-radius: 999px;
}

/* ---------- Point "live" du hero (pulsation) ---------- */
.dot-live { animation: pulse247 1.9s var(--ease) infinite; }
@keyframes pulse247 {
  0%   { box-shadow: 0 0 0 4px rgba(163,230,53,.25); }
  60%  { box-shadow: 0 0 0 11px rgba(163,230,53,0); }
  100% { box-shadow: 0 0 0 4px rgba(163,230,53,0); }
}

/* ---------- Carte urgence du hero ---------- */
.urgent-card h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.35rem; margin-bottom: 12px;
}
.urgent-card .uc-icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: #fdf1f1; border: 1px solid #f3c6c6; color: #d14343;
}
.urgent-card > p { color: var(--body); font-size: .97rem; margin-bottom: 18px; }
.urgent-card .uc-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; text-align: center; }
.urgent-card .uc-note a { color: var(--green-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.urgent-card .uc-note a:hover { color: var(--green-800); }

/* ---------- Les bons gestes (bande urgence) ---------- */
.urgence-tips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 30px;
}
.urgence-tips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  padding: 8px 15px; border-radius: 999px; backdrop-filter: blur(4px);
}
.urgence-tips svg { color: var(--lime-400); flex: none; }

/* ---------- Bandeau urgence dans le formulaire RDV ---------- */
.form-urgent {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fdf1f1; border: 1px solid #f3c6c6; color: #7c2d2d;
  padding: 13px 15px; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.5; margin-bottom: 20px;
}
.form-urgent svg { flex: none; color: #d14343; margin-top: 1px; }
.form-urgent strong { color: #7c2d2d; }
.form-urgent a { color: #b93838; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.form-urgent a:hover { color: #8f2f2f; }

/* ---------- Barre CTA mobile : appel prioritaire ---------- */
@media (max-width: 640px) {
  .plomb-page .mobile-cta-bar { grid-template-columns: 1.2fr 1fr; }
  .plomb-page .mcb-247 { color: #fff; background: var(--primary); border: none; box-shadow: var(--shadow-glow); }
  .plomb-page .mcb-rdv { color: var(--green-700); background: var(--green-50); border: 1.5px solid var(--green-200); box-shadow: none; }
}

/* ---------- Ajustements responsive ---------- */
@media (max-width: 1024px) {
  .urgent-card { max-width: 460px; }
}