/* =========================================================
   urgence-serrurier-boulogne.fr — styles communs
   Header, menu mobile, barre mobile, boutons flottants,
   footer, contenu d'article, FAQ.
   ========================================================= */

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --whatsapp: #25D366;
  --ink: #0f172a;
  --header-h: 72px;
  --mobile-bar-h: 68px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1f2937; overflow-x: hidden; }
img { max-width: 100%; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Lien d'évitement (accessibilité) */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { left: 8px; }

/* Focus visible homogène */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; border-radius: 6px;
}

/* ---------- Barre d'info (desktop) ---------- */
.topbar a { color: inherit; transition: color .2s; }
.topbar a:hover { color: #fff; }

/* ---------- Header ---------- */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .18); background-color: rgba(255, 255, 255, .97); }
.site-header .header-inner { height: var(--header-h); }

.logo-badge { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6); }

.nav-link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 10px; font-weight: 500; color: #374151; white-space: nowrap; transition: color .2s, background-color .2s; }
.nav-link:hover { color: var(--primary); background: #eff6ff; }
.nav-link.is-active { color: var(--primary); font-weight: 600; }
.nav-link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--primary); }

/* Menu déroulant Services */
.dropdown { position: relative; }
.dropdown-panel { position: absolute; top: calc(100% + 10px); left: 50%; width: 560px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.dropdown-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* pont de survol */
.dropdown.is-open .dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 1024px) {
  .dropdown:hover .dropdown-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
.dropdown .chevron { transition: transform .2s; }
.dropdown.is-open .chevron { transform: rotate(180deg); }
.dropdown-item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; transition: background-color .2s; }
.dropdown-item:hover { background: #f1f5f9; }
.dropdown-item:hover .dropdown-title { color: var(--primary); }

/* Bouton téléphone du header */
.btn-call-header { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .7); }
.btn-call-header:hover { filter: brightness(1.08); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--whatsapp); display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--whatsapp); animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* Bouton burger animé */
.burger { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger span + span { margin-top: 5px; }
.burger-lines { display: flex; flex-direction: column; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menu mobile (tiroir) ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 70; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: #fff; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); z-index: 80; display: flex; flex-direction: column; box-shadow: -20px 0 40px -20px rgba(15, 23, 42, .35); }
body.menu-open .drawer-overlay { opacity: 1; visibility: visible; }
body.menu-open .drawer { transform: translateX(0); }
body.menu-open { overflow: hidden; }
.drawer-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; font-weight: 500; color: #1f2937; }
.drawer-link:hover, .drawer-link.is-active { background: #eff6ff; color: var(--primary); }
.drawer-link i { font-size: 1.15rem; color: #64748b; }
.drawer-link.is-active i, .drawer-link:hover i { color: var(--primary); }
.drawer-sub { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.drawer-sub.is-open { max-height: 520px; }
.drawer-toggle .chevron { transition: transform .25s; }
.drawer-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ---------- Barre d'action mobile (fixe en bas) ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid #e5e7eb; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, .25); transition: transform .3s; }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; border-radius: 14px; font-size: 12px; font-weight: 600; }
.mobile-bar a i { font-size: 20px; line-height: 1; }
.mobile-bar .mb-call { flex-direction: row; gap: 10px; font-size: 15px; color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .8); }
.mobile-bar .mb-call small { display: block; font-size: 11px; font-weight: 500; opacity: .85; }
.mobile-bar .mb-wa { color: #fff; background: var(--whatsapp); }
.mobile-bar .mb-alt { color: #1f2937; background: #f1f5f9; }
.mobile-bar-spacer { height: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom)); }
body.menu-open .mobile-bar { transform: translateY(110%); }
@media (min-width: 768px) { .mobile-bar, .mobile-bar-spacer { display: none; } }

/* ---------- Boutons flottants ---------- */
.fab-stack { position: fixed; right: 18px; bottom: calc(var(--mobile-bar-h) + 16px + env(safe-area-inset-bottom)); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (min-width: 768px) { .fab-stack { right: 24px; bottom: 24px; } }
.fab { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .45); transition: transform .2s, opacity .25s, visibility .25s; }
.fab:hover { transform: translateY(-2px) scale(1.04); }
.fab-wa { background: var(--whatsapp); position: relative; }
.fab-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--whatsapp); animation: pulse-ring 2.2s ease-out infinite; z-index: -1; }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.fab-call { background: var(--primary); }
.fab-top { width: 44px; height: 44px; background: #fff; color: var(--ink); border: 1px solid #e5e7eb; opacity: 0; visibility: hidden; }
.fab-top.is-visible { opacity: 1; visibility: visible; }
.fab-label { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.fab:hover .fab-label { opacity: 1; }
/* Sur mobile, WhatsApp et téléphone sont déjà dans la barre du bas */
@media (max-width: 767px) { .fab-wa, .fab-call { display: none; } }

/* ---------- Footer ---------- */
.footer-link { color: #94a3b8; transition: color .2s; display: inline-flex; align-items: center; gap: 8px; }
.footer-link:hover { color: #fff; }
.footer-title { color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: 1.1rem; }
.google-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #fff; color: #111827; transition: transform .2s, box-shadow .2s; }
.google-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }

/* ---------- FAQ (accordéons) ---------- */
.faq-question { cursor: pointer; }
.faq-icon { transition: transform .25s; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-item.is-open { box-shadow: 0 10px 30px -18px rgba(37, 99, 235, .45); }
.faq-item.is-open .faq-question span { color: var(--primary); }

/* ---------- Contenu d'article ---------- */
.article-content h2 { font-size: 1.6rem; line-height: 1.3; font-weight: 700; color: #111827; margin: 3rem 0 1.25rem; scroll-margin-top: 110px; }
@media (min-width: 768px) { .article-content h2 { font-size: 1.875rem; } }
.article-content h3 { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 2rem 0 .75rem; }
.article-content p { color: #374151; line-height: 1.8; margin-bottom: 1.25rem; font-size: 1.075rem; }
.article-content ul, .article-content ol { margin-bottom: 1.5rem; }
.article-content ul li { position: relative; padding-left: 1.75rem; color: #374151; font-size: 1.075rem; line-height: 1.75; margin-bottom: .5rem; }
.article-content ul li::before { content: ""; position: absolute; left: .3rem; top: .7rem; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--primary); }
.article-content ol { counter-reset: step; }
.article-content ol li { position: relative; padding-left: 2.5rem; color: #374151; font-size: 1.075rem; line-height: 1.75; margin-bottom: .75rem; counter-increment: step; }
.article-content ol li::before { content: counter(step); position: absolute; left: 0; top: .1rem; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: #eff6ff; color: var(--primary); font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.article-content a { color: var(--primary); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(37, 99, 235, .3); text-underline-offset: 3px; }
.article-content a:hover { text-decoration-color: var(--primary); }
.article-content strong { color: #111827; font-weight: 600; }
.article-content blockquote { border-left: 4px solid var(--primary); background: #eff6ff; padding: 1rem 1.25rem; border-radius: 0 12px 12px 0; margin: 1.5rem 0; color: #1e3a8a; }

/* Barre de progression de lecture */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #2563eb, #25D366); z-index: 90; transition: width .1s linear; }

/* ---------- Blog ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9999px; font-size: 14px; font-weight: 500; background: #fff; border: 1px solid #e5e7eb; color: #374151; transition: all .2s; white-space: nowrap; }
.chip:hover { border-color: #93c5fd; color: var(--primary); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.post-card img { transition: transform .5s ease; }
.post-card:hover img { transform: scale(1.05); }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Animations d'apparition ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .fab-wa::before, .live-dot::after, .animate-pulse { animation: none !important; }
}

/* ---------- Tableaux responsive ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; }