/* =============================================
   Serrurier Bonneuil – styles communs
   header · menu mobile · barre d'appel · footer · contenu (services & blog)
   ============================================= */

:root {
  --sb-primary: #1d4ed8;
  --sb-primary-dark: #1e40af;
  --sb-red: #dc2626;
  --sb-ink: #0f172a;
  --sb-text: #374151;
  --sb-muted: #6b7280;
  --sb-line: #e5e7eb;
  --sb-header-h: 4rem;           /* mobile : barre seule */
}
@media (min-width: 1024px) {
  :root { --sb-header-h: 6.25rem; } /* desktop : bandeau info + barre */
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sb-header-h) + 1rem); }
html, body { overflow-x: clip; } /* aucun élément ne doit élargir la page sur mobile */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.sb-lock { overflow: hidden; }
.sb-main { padding-top: var(--sb-header-h); }

/* ---------- Header ---------- */
.sb-topbar { height: 2.25rem; overflow: hidden; transition: height .25s ease; }
.sb-header .sb-bar { transition: box-shadow .25s ease; }
.sb-header.is-scrolled .sb-bar { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
@media (min-width: 1024px) {
  .sb-header.is-scrolled .sb-topbar { height: 0; }
}

/* Menus déroulants desktop */
.sb-dd-panel {
  position: absolute; top: 100%; left: 50%;
  padding-top: .75rem;
  opacity: 0; visibility: hidden;
  transform: translate(-40%, 8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.sb-dd:hover .sb-dd-panel,
.sb-dd:focus-within .sb-dd-panel,
.sb-dd.is-open .sb-dd-panel { opacity: 1; visibility: visible; transform: translate(-40%, 0); }
[data-dd-toggle] i { transition: transform .2s ease; }
.sb-dd:hover [data-dd-toggle] i,
.sb-dd.is-open [data-dd-toggle] i { transform: rotate(180deg); }

/* Bouton burger animé */
.sb-burger {
  position: relative; width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid var(--sb-line); background: #fff;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background-color .2s ease, border-color .2s ease;
}
.sb-burger:hover { background: #f9fafb; }
.sb-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #111827;
  transition: transform .3s ease, opacity .2s ease;
}
.sb-burger[aria-expanded="true"] { background: #eff6ff; border-color: #bfdbfe; }
.sb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau mobile plein écran (sous la barre de 4rem) */
.sb-mobile-menu {
  position: fixed; left: 0; right: 0; top: 4rem;
  height: calc(100vh - 4rem); height: calc(100dvh - 4rem);
  background: #fff; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  border-top: 1px solid #f3f4f6;
}
.sb-mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.sb-acc summary::-webkit-details-marker { display: none; }

/* Sous-navigation "Sur cette page" des services */
.sb-subnav {
  position: sticky; top: var(--sb-header-h); z-index: 30;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6;
}
.sb-subnav ::-webkit-scrollbar { display: none; }
.sb-subnav > div { scrollbar-width: none; }
@media (min-width: 1024px) {
  .sb-header.is-scrolled ~ .sb-main .sb-subnav { top: 4rem; }
}

/* Petit sur-titre */
.sb-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(29, 78, 216, .08); color: var(--sb-primary);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}

/* ---------- Photos ---------- */
.sb-figure { margin: 0; }
.sb-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 1.5rem; background: #e5e7eb;
  box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .35);
}
.sb-figure figcaption {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: .75rem; font-size: .875rem; line-height: 1.5; color: var(--sb-muted);
}
.sb-figure figcaption::before { content: "\eb31"; font-family: remixicon; color: var(--sb-primary); } /* ri-camera-line */
/* image indisponible : fond dégradé + icône à la place de l'icône "image cassée" */
img.is-broken { opacity: 0; }
.sb-figure:has(img.is-broken), a:has(> img.is-broken), div:has(> img.is-broken) {
  position: relative;
  background: radial-gradient(circle at 30% 20%, #dbeafe, transparent 60%), linear-gradient(135deg, #eff6ff, #e0e7ff);
  border-radius: 1.5rem;
}
.sb-figure:has(img.is-broken)::after, a:has(> img.is-broken)::after, div:has(> img.is-broken)::after {
  content: "\ee6f"; font-family: remixicon; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 2.5rem; color: rgba(29, 78, 216, .35); pointer-events: none;
}
.sb-figure:has(img.is-broken) figcaption { position: relative; z-index: 1; }
.sb-figure--hero img { aspect-ratio: 4 / 3; border-radius: 2rem; }
.sb-figure--tall img { aspect-ratio: 4 / 5; }
.sb-figure--band img { aspect-ratio: 21 / 9; }
.sb-figure--cover img { aspect-ratio: 21 / 9; border-radius: 2rem; }
@media (max-width: 767.98px) {
  .sb-figure--band img, .sb-figure--cover img { aspect-ratio: 16 / 10; }
  .sb-figure--tall img { aspect-ratio: 16 / 10; }
}

/* ---------- Contenu éditorial (articles + services) ---------- */
.sb-prose { color: var(--sb-text); font-size: 1.0625rem; line-height: 1.8; max-width: 46rem; }
.sb-prose--wide { max-width: none; }
.sb-prose > * + * { margin-top: 1.25rem; }
.sb-prose h2 {
  margin-top: 3.25rem; scroll-margin-top: calc(var(--sb-header-h) + 1.5rem);
  font-size: 1.75rem; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--sb-ink);
}
.sb-prose h2::before {
  content: ""; display: block; width: 2.5rem; height: .3rem; margin-bottom: .9rem;
  border-radius: 999px; background: linear-gradient(90deg, var(--sb-primary), #60a5fa);
}
.sb-prose h3 { margin-top: 2rem; font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: var(--sb-ink); }
.sb-prose p strong, .sb-prose li strong { color: var(--sb-ink); font-weight: 600; }
.sb-prose a { color: var(--sb-primary); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(29, 78, 216, .3); text-underline-offset: 3px; }
.sb-prose a:hover { text-decoration-color: currentColor; }
.sb-prose .sb-small { font-size: .9rem; color: var(--sb-muted); }
.sb-prose > .sb-figure { margin-top: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .sb-prose h2 { font-size: 2rem; } }

/* listes à coches */
.sb-list { list-style: none; padding: 0; }
.sb-list li { position: relative; padding-left: 2rem; }
.sb-list li + li { margin-top: .6rem; }
.sb-list li::before {
  content: "\eb7b"; font-family: remixicon; /* ri-check-line */
  position: absolute; left: 0; top: .2rem;
  width: 1.3rem; height: 1.3rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .8rem; line-height: 1;
  background: #dbeafe; color: var(--sb-primary);
}

/* tableaux */
.sb-table { overflow-x: auto; border-radius: 1rem; border: 1px solid var(--sb-line); }
.sb-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.sb-table th { background: #f8fafc; color: var(--sb-ink); font-weight: 700; text-align: left; }
.sb-table th, .sb-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--sb-line); vertical-align: top; }
.sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table tbody tr:hover { background: #f8fafc; }

/* encadrés */
.sb-callout {
  --c: var(--sb-primary); --bg: #eff6ff;
  position: relative; padding: 1.5rem 1.5rem 1.5rem 1.75rem; border-radius: 1.25rem;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
  font-size: 1rem;
}
.sb-callout::before { content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.sb-callout > * + * { margin-top: .75rem; }
.sb-callout__title { font-weight: 800; color: var(--sb-ink); font-size: 1.05rem; }
.sb-callout h3 { margin-top: 1rem; font-size: 1.05rem; }
.sb-callout--green { --c: #059669; --bg: #ecfdf5; }
.sb-callout--orange { --c: #d97706; --bg: #fffbeb; }
.sb-callout--red { --c: #dc2626; --bg: #fef2f2; }
.sb-callout--purple { --c: #7c3aed; --bg: #f5f3ff; }
.sb-callout--gray { --c: #475569; --bg: #f8fafc; }

/* cartes */
.sb-cards, .sb-features { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .sb-cards--2, .sb-cards--3, .sb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sb-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-card {
  position: relative; padding: 1.5rem; border-radius: 1.25rem; background: #fff;
  border: 1px solid var(--sb-line); font-size: .975rem; line-height: 1.65;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.sb-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 20px 40px -24px rgba(29, 78, 216, .45); }
.sb-card > * + * { margin-top: .6rem; }
.sb-card .sb-card__title { margin-top: 0; font-size: 1.1rem; font-weight: 700; color: var(--sb-ink); }
.sb-card .sb-card__title::before {
  content: "\ee6f"; font-family: remixicon; /* ri-key-2-line */
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: .9rem; background: #eff6ff; color: var(--sb-primary); font-size: 1.3rem; font-weight: 400;
}
.sb-card .sb-list li { padding-left: 1.6rem; font-size: .925rem; }
.sb-card .sb-list li::before { width: 1.1rem; height: 1.1rem; font-size: .7rem; }
.sb-card--green { background: #f0fdf4; border-color: #bbf7d0; }
.sb-card--orange { background: #fffbeb; border-color: #fde68a; }
.sb-card--blue { background: #eff6ff; border-color: #bfdbfe; }
.sb-card--purple { background: #faf5ff; border-color: #e9d5ff; }
.sb-card--red { background: #fef2f2; border-color: #fecaca; }
.sb-card--green .sb-card__title::before, .sb-card--orange .sb-card__title::before,
.sb-card--blue .sb-card__title::before, .sb-card--purple .sb-card__title::before,
.sb-card--red .sb-card__title::before { background: #fff; }
.bg-gray-50 .sb-card { background: #fff; }

/* "Pourquoi nous choisir" */
.sb-features { gap: 1rem; }
.sb-features .sb-card { padding: 1.25rem 1.25rem 1.25rem 4.25rem; border-radius: 1rem; }
.sb-features .sb-card:hover { transform: none; }
.sb-features .sb-card .sb-card__title::before {
  content: "\eb81"; /* ri-checkbox-circle-line */
  position: absolute; left: 1.1rem; top: 1.15rem; margin: 0; width: 2.3rem; height: 2.3rem; font-size: 1.15rem;
  background: var(--sb-primary); color: #fff; border-radius: .75rem;
}
.sb-features .sb-card__title { font-size: 1rem; }

/* étapes */
.sb-steps { list-style: none; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 768px) { .sb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sb-prose--wide .sb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sb-step {
  position: relative; padding: 1.5rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--sb-line);
  font-size: .95rem; line-height: 1.6;
}
.sb-step__n {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--sb-primary), #3b82f6); color: #fff; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 10px 20px -10px rgba(29, 78, 216, .7);
}
.sb-step h3 { margin-top: 1rem !important; font-size: 1.05rem; }
.sb-step p { margin-top: .4rem; }

/* FAQ */
.sb-faq { display: grid; gap: .75rem; }
.sb-faq__item { border-radius: 1rem; background: #fff; border: 1px solid var(--sb-line); transition: border-color .2s ease, box-shadow .2s ease; }
.sb-faq__item[open] { border-color: #bfdbfe; box-shadow: 0 16px 32px -24px rgba(29, 78, 216, .5); }
.sb-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--sb-ink); line-height: 1.4;
}
.sb-faq__item summary::-webkit-details-marker { display: none; }
.sb-faq__item summary i {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: #eff6ff; color: var(--sb-primary); transition: transform .25s ease;
}
.sb-faq__item[open] summary i { transform: rotate(45deg); background: var(--sb-primary); color: #fff; }
.sb-faq__a { padding: 0 1.25rem 1.25rem; color: var(--sb-text); font-size: .975rem; line-height: 1.7; }
.sb-faq__a p + p { margin-top: .5rem; }

/* note de fin d'article */
.sb-note {
  display: flex; gap: .9rem; margin-top: 3rem !important; padding: 1.25rem; border-radius: 1rem;
  background: #f8fafc; border: 1px dashed #cbd5e1; font-size: .9rem; line-height: 1.65; color: var(--sb-muted);
}
.sb-note i { font-size: 1.3rem; color: var(--sb-primary); }

/* ---------- Barre d'appel mobile ---------- */
.sb-callbar {
  position: fixed; z-index: 45;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px;
  transition: transform .3s ease, opacity .3s ease;
}
.sb-callbar__call {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 18px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 12px 28px -8px rgba(220, 38, 38, .6);
}
.sb-callbar__icon {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: 20px;
  animation: sb-ring 1.8s ease-out infinite;
}
.sb-callbar__icon i { animation: sb-wiggle 3s ease-in-out infinite; }
.sb-callbar__text { display: flex; flex-direction: column; line-height: 1.15; }
.sb-callbar__text small { font-size: 11px; opacity: .9; letter-spacing: .02em; }
.sb-callbar__text strong { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.sb-callbar__arrow { margin-left: auto; font-size: 20px; opacity: .9; }
.sb-callbar__alt {
  flex: none; width: 62px; border-radius: 18px; background: #fff; color: var(--sb-primary);
  border: 1px solid var(--sb-line); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 22px; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .35);
}
.sb-callbar__alt span { font-size: 10px; font-weight: 600; color: #4b5563; }
body.sb-lock .sb-callbar,
.sb-callbar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* ---------- Bouton flottant desktop ---------- */
.sb-fab { display: none; }

@media (max-width: 767.98px) {
  body { padding-bottom: 88px; }
}
@media (min-width: 768px) {
  .sb-callbar { display: none; }
  .sb-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 45;
    display: flex; align-items: center; gap: 12px;
    padding: 8px 20px 8px 8px; border-radius: 999px; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    box-shadow: 0 14px 30px -10px rgba(220, 38, 38, .65);
    transition: transform .3s ease, box-shadow .2s ease, opacity .3s ease;
  }
  .sb-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(220, 38, 38, .75); }
  .sb-fab.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .sb-fab__icon {
    width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .2);
    display: grid; place-items: center; font-size: 20px; animation: sb-ring 1.8s ease-out infinite;
  }
  .sb-fab__text { display: flex; flex-direction: column; font-weight: 800; font-size: 17px; line-height: 1.1; }
  .sb-fab__text small { font-size: 11px; font-weight: 500; opacity: .9; }
}

/* articles : la barre latérale contient déjà l'appel → pas de bouton flottant sur grand écran */
@media (min-width: 1024px) {
  body:has(aside .sticky) .sb-fab { display: none; }
}

/* ---------- Footer ---------- */
.sb-footer { margin-top: 4rem; }

/* ---------- Animations ---------- */
@keyframes sb-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@keyframes sb-wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-14deg); }
  88% { transform: rotate(12deg); }
  92% { transform: rotate(-8deg); }
  96% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sb-callbar__icon, .sb-callbar__icon i, .sb-fab__icon { animation: none; }
  .sb-card:hover { transform: none; }
}