/* ═══════════════════════════════════════════════════════════════════════════
   SERRURERIE BAYEUSAINE — Feuille de styles globale
   Palette : Orange #DC5032 · Blanc cassé #F4F4F4 · Noir #161917
   Thème : fond sombre, cartes blanches en contraste
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables contextuelles ────────────────────────────────────────────── */
:root {
  --c-text:        #161917;   /* texte principal (foncé sur fond clair) */
  --c-text-body:   #444444;   /* texte courant */
  --c-text-muted:  #555555;   /* texte secondaire */
  --c-text-subtle: #666666;   /* texte discret */
}

/* ─── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { margin: 0; background: #FAF7F2; color: #161917; font-family: Manrope, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a     { color: #DC5032; text-decoration: none; }
a:hover { color: #c44428; }
input, textarea, button { font-family: inherit; }
img   { max-width: 100%; height: auto; display: block; }

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(220,80,50,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(220,80,50,0);  }
  100% { box-shadow: 0 0 0 0   rgba(220,80,50,0);   }
}

/* ─── Top bar ───────────────────────────────────────────────────────────── */
.top-bar {
  background: rgba(14,16,15,.98);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(244,244,244,.6);
}
.top-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(14px,3vw,28px);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-bar-left { display: flex; align-items: center; gap: 6px; }
.top-bar-right { display: flex; align-items: center; gap: 20px; }
.top-bar a { color: #E0684C; font-weight: 700; transition: color .15s; }
.top-bar a:hover { color: #f08060; text-decoration: underline; }
.top-bar-sep { color: rgba(255,255,255,.2); }
@media (max-width: 899px) { .top-bar { display: none; } }

/* ─── Header / nav ──────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(22,25,23,.97);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.6);
}

/* Lien actif dans la nav */
a[aria-current="page"] { color: #E0684C !important; }

/* Nav desktop */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(6px,1.1vw,16px);
  flex-wrap: nowrap;
}
.nav-link {
  font-size: 13.5px; font-weight: 700; color: rgba(244,244,244,.85);
  white-space: nowrap; padding: 8px 2px;
  transition: color .18s;
}
.nav-link:hover { color: #E0684C; }

/* Tagline logo */
.nav-tagline { display: inline; }

/* CTA téléphone desktop */
.nav-desktop-tel {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg,#DC5032,#c44428);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(220,80,50,.7);
  animation: pulseRing 2.6s infinite;
}

/* Bouton burger mobile */
.nav-mobile-btn {
  display: none;
  flex: 0 0 auto; order: 3;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}

/* Bouton téléphone mobile (icône ronde) */
.nav-mobile-tel {
  display: none;
  flex: 0 0 auto; order: 2;
  width: 44px; height: 44px;
}

/* Menu mobile déroulant */
.mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(22,25,23,.98);
  backdrop-filter: blur(16px);
  padding: 10px clamp(14px,3vw,28px) 16px;
  max-height: 70vh;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }

.mobile-link {
  padding: 13px 4px; font-size: 16px; font-weight: 700;
  color: rgba(244,244,244,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .15s;
}
.mobile-link:hover { color: #E0684C; }
.mobile-link--sub {
  padding-left: 18px; font-size: 15px; font-weight: 600; color: rgba(244,244,244,.6);
}
.mobile-link-tel {
  margin-top: 12px; padding: 14px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(220,80,50,.4);
  color: rgba(244,244,244,.85); font-weight: 800; font-size: 15px;
  text-align: center;
  transition: color .15s;
}
.mobile-link-tel:hover { color: #E0684C; }

/* ─── Responsive : bascule desktop / mobile ─────────────────────────────── */
@media (max-width: 899px) {
  .nav-desktop    { display: none; }
  .nav-desktop-tel { display: none; }
  .nav-tagline    { display: none; }
  .nav-mobile-btn { display: grid; }
  .nav-mobile-tel { display: grid; }
}
@media (min-width: 430px) {
  .nav-tagline { display: inline; }
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.footer-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: .12em; color: rgba(224,104,76,.85);
}
.footer-link {
  font-size: 14.5px; color: rgba(244,244,244,.75);
  transition: color .15s;
}
.footer-link:hover { color: #E0684C; }
.footer-bottom-link {
  font-size: 12.5px; color: rgba(244,244,244,.5);
  transition: color .15s;
}
.footer-bottom-link:hover { color: #E0684C; }
.footer-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg,#DC5032,#c44428);
  color: #fff; font-weight: 800; font-size: 14.5px;
  transition: filter .18s;
}
.footer-cta:hover { filter: brightness(1.07); color: #fff; }

/* ─── CTA sticky mobile ─────────────────────────────────────────────────── */
.sticky-cta {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  align-items: center; justify-content: center; gap: 10px;
  padding: 15px 20px; border-radius: 999px;
  background: linear-gradient(135deg,#DC5032,#c44428);
  color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 22px 44px -16px rgba(220,80,50,.7);
  max-width: 520px; margin: 0 auto;
  transition: filter .18s;
}
.sticky-cta:hover { filter: brightness(1.06); color: #fff; }
@media (max-width: 899px) {
  .sticky-cta { display: flex; }
}

/* ─── Formulaire ────────────────────────────────────────────────────────── */
.form-input {
  padding: 13px 14px; border-radius: 14px;
  border: 1px solid rgba(22,25,23,.14);
  background: rgba(255,255,255,.9);
  font-size: 15px; color: #161917;
  outline: none; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.form-input:focus {
  border-color: #DC5032;
  box-shadow: 0 0 0 4px rgba(220,80,50,.15);
}
.form-input.has-error { border-color: #ef4444; }

.form-error {
  display: block; margin-top: 4px;
  font-size: 12.5px; color: #ef4444;
}
.form-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: #1e2220;
}
.btn-submit {
  margin-top: 4px; padding: 15px 24px; border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg,#DC5032,#c44428);
  color: #fff; font-size: 16px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 18px 36px -18px rgba(220,80,50,.7);
  transition: filter .18s;
}
.btn-submit:hover { filter: brightness(1.06); }

/* ─── Popup démo ─────────────────────────────────────────────────────────── */
.demo-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(22,25,23,.55);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .22s ease;
}
.demo-overlay.is-visible { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.demo-modal {
  background: #fff;
  border-radius: 26px;
  padding: 36px 32px;
  max-width: 440px; width: 100%;
  box-shadow: 0 40px 80px -30px rgba(22,25,23,.55);
  text-align: center;
  animation: slideUp .26s ease;
}
.demo-icon {
  width: 64px; height: 64px; border-radius: 999px;
  background: rgba(220,80,50,.12);
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.demo-close-btn {
  padding: 13px 28px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg,#DC5032,#c44428);
  color: #fff; font-size: 15px; font-weight: 800;
  cursor: pointer;
  transition: filter .18s;
}
.demo-close-btn:hover { filter: brightness(1.07); }

/* ─── Placeholders photos (à remplacer par <img>) ───────────────────────── */
.photo-placeholder {
  min-height: 260px;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(22,25,23,.055) 0 10px, rgba(22,25,23,.02) 10px 20px);
}
.photo-placeholder span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: .08em;
  color: #666666; text-align: center; padding: 0 20px;
}

/* ─── Page politique de confidentialité ─────────────────────────────────── */
.rgpd-content p  { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--c-text-body); }
.rgpd-content p:last-child { margin-bottom: 0; }
.rgpd-content ul { margin: 8px 0 14px 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rgpd-content li { font-size: 14.5px; line-height: 1.6; color: var(--c-text-body); }
.rgpd-content strong { color: var(--c-text); }
.rgpd-content code  { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; background: rgba(22,25,23,.08); padding: 2px 6px; border-radius: 6px; }
.rgpd-content table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 13.5px; }
.rgpd-content th    { text-align: left; padding: 9px 12px; background: rgba(22,25,23,.06); font-weight: 700; color: var(--c-text); border-bottom: 2px solid rgba(22,25,23,.1); }
.rgpd-content td    { padding: 9px 12px; border-bottom: 1px solid rgba(22,25,23,.07); color: var(--c-text-body); vertical-align: top; }
.rgpd-content tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .rgpd-content table, .rgpd-content thead, .rgpd-content tbody,
  .rgpd-content th, .rgpd-content td, .rgpd-content tr { display: block; }
  .rgpd-content thead { display: none; }
  .rgpd-content td { padding: 6px 0; border-bottom: 0; }
  .rgpd-content tr { border-bottom: 1px solid rgba(22,25,23,.08); padding: 10px 0; }
}

/* ─── Bandeau RGPD ───────────────────────────────────────────────────────── */
.rgpd-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  background: rgba(14,16,15,.97);
  border-top: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  box-shadow: 0 -12px 40px -12px rgba(0,0,0,.5);
  padding: 16px clamp(16px,4vw,28px);
  animation: slideUpBanner .3s ease;
}
@keyframes slideUpBanner {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.rgpd-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(14px,2vw,28px);
  flex-wrap: wrap;
}
.rgpd-text { flex: 1 1 280px; }
.rgpd-title {
  display: block;
  font-size: 14px; font-weight: 800;
  color: #fff; margin-bottom: 4px;
}
.rgpd-desc {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: rgba(244,244,244,.65);
}
.rgpd-desc strong { color: rgba(244,244,244,.85); font-weight: 700; }
.rgpd-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.rgpd-btn {
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .18s;
  border: 0;
}
.rgpd-btn--outline {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(244,244,244,.85);
}
.rgpd-btn--outline:hover { background: rgba(255,255,255,.14); }
.rgpd-btn--solid {
  background: linear-gradient(135deg,#DC5032,#c44428);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(220,80,50,.7);
}
.rgpd-btn--solid:hover { filter: brightness(1.07); }

/* Sur mobile, laisser de la place au-dessus du sticky-cta */
@media (max-width: 899px) {
  .rgpd-banner { bottom: 76px; }
}

/* ─── Placeholder carte (consentement refusé) ────────────────────────────── */
.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  min-height: 240px;
  background: rgba(22,25,23,.06);
  text-align: center;
  padding: 24px;
}
.map-placeholder p {
  margin: 0;
  font-size: 13.5px;
  color: var(--c-text-subtle);
  line-height: 1.55;
}
.map-activate-btn {
  padding: 10px 20px;
  border: 1px solid rgba(220,80,50,.4);
  border-radius: 999px;
  background: rgba(220,80,50,.08);
  color: #DC5032;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s;
  font-family: inherit;
}
.map-activate-btn:hover {
  background: #DC5032;
  color: #fff;
}

/* ─── Utilitaires ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}