/* ==========================================================================
   CONSTRUCTION NBG INC. - MODERN DESIGN SYSTEM & STYLESHEET
   Includes Dark & Light Mode Theme Variables, Responsive Grid, Animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Variables & Base Setup
   -------------------------------------------------------------------------- */
:root {
  /* Common Palette - aligned with the constructionnbg.ca brand identity:
     black & white, high contrast, with a muted bronze-gold accent
     (rather than a vibrant amber) used sparingly. */
  --color-primary: #b8965c;        /* Muted Bronze-Gold */
  --color-primary-hover: #9c7d46;  /* Deep Bronze-Gold Hover */
  --color-primary-light: rgba(184, 150, 92, 0.15);

  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}

/* DARK THEME (Default) */
[data-theme="dark"] {
  --bg-main: #0a0a0a;
  --bg-surface: #161616;
  --bg-surface-elevated: #202020;
  --bg-glass: rgba(20, 20, 20, 0.75);
  --border-color: rgba(255, 255, 255, 0.1);
  --border-highlight: rgba(184, 150, 92, 0.4);

  --text-main: #ffffff;
  --text-muted: #a3a3a3;
  --text-inverse: #0a0a0a;

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 16px rgba(184, 150, 92, 0.15);

  --topbar-bg: #000000;
  --navbar-bg: rgba(0, 0, 0, 0.9);
}

/* LIGHT THEME */
[data-theme="light"] {
  --bg-main: #ffffff;
  --bg-surface: #fafafa;
  --bg-surface-elevated: #f0f0f0;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-highlight: rgba(184, 150, 92, 0.6);

  --text-main: #0a0a0a;
  --text-muted: #525252;
  --text-inverse: #ffffff;

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 14px rgba(184, 150, 92, 0.2);

  --topbar-bg: #000000;
  --navbar-bg: rgba(255, 255, 255, 0.92);
}

/* Reset & Basic Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* An element's own `display:flex`/`display:grid` rule wins over the browser's
   default [hidden] { display:none } at equal specificity, so anything using
   the hidden attribute alongside such a rule (modals, etc.) would otherwise
   stay visible. This restores the expected behavior everywhere in this file. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography & Gradient Text */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, #d9bd8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   2. Top Bar & Header Navigation
   -------------------------------------------------------------------------- */
.top-bar {
  background-color: var(--topbar-bg);
  color: #94a3b8;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-info-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-info a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.top-info .divider {
  opacity: 0.3;
}

.rbq-badge {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid rgba(184, 150, 92, 0.3);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  box-shadow: var(--shadow-glow);
}

/* Boxed wordmark matching the constructionnbg.ca brand identity - rendered
   as a single self-contained SVG (frame + both text lines drawn to scale
   inside one 100x100 viewBox), so it can never overflow regardless of the
   viewer's font stack. color: currentColor lets it follow the site's own
   dark/light toggle via var(--text-main) on the SVG root. */
.logo-mark {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--text-main);
}

.logo-mark-sm {
  width: 42px;
  height: 42px;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.brand-name .highlight {
  color: var(--color-primary);
}

.brand-sub {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color var(--transition-fast);
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-main);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* Actions & Theme Toggle */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-toggle-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

[data-theme="dark"] .icon-sun { display: block; color: var(--color-primary); }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; color: var(--color-primary); }

.mobile-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.mobile-hamburger .icon-bars {
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   2b. Icon System (Heroicons, inline SVG)
   -------------------------------------------------------------------------- */
.icon-inline {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.icon-inline-check {
  width: 0.85em;
  height: 0.85em;
  vertical-align: -0.1em;
  color: var(--color-primary);
  flex-shrink: 0;
}

.icon-inline-arrow {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Buttons & Component Utilities
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: #0a0a0a;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text-main);
  border-color: var(--border-color);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1.05rem;
}

.btn-full {
  width: 100%;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  border: 1px solid rgba(184, 150, 92, 0.3);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-pill .dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-primary);
}

/* --------------------------------------------------------------------------
   4. Hero Section
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding: 80px 0 100px;
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(184, 150, 92, 0.12) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.hero-title {
  font-size: 3.4rem;
  letter-spacing: -1px;
  margin: 20px 0;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 580px;
}

.hero-btns {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--border-color);
}

.metric-card {
  display: flex;
  flex-direction: column;
}

.metric-num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-primary);
}

.metric-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Hero Media */
.hero-media {
  position: relative;
}

.image-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

.hero-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

.image-wrapper:hover .hero-img {
  transform: scale(1.03);
}

.floating-glass-card {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}

.floating-glass-card .icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
}

.floating-glass-card .icon-box svg {
  width: 22px;
  height: 22px;
}

.floating-glass-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Services Section
   -------------------------------------------------------------------------- */
.section {
  padding: 100px 0;
}

.section-header {
  margin-bottom: 60px;
}

.section-header.text-center {
  text-align: center;
}

.section-tag {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  margin-bottom: 8px;
  display: block;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.section-description {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 650px;
  margin: 0 auto;
}

/* Admin-authored custom sections (see SiteSection kind=CUSTOM) reuse the
   same .section-header look, then render plain-text paragraphs below it. */
.custom-section-body {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.custom-section-body p {
  margin-bottom: 1.1em;
}

.custom-section-body p:last-child {
  margin-bottom: 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.service-img-box {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.service-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.service-card:hover .service-img-box img {
  transform: scale(1.08);
}

.service-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--topbar-bg);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.service-body {
  padding: 28px;
}

.service-body h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.service-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.service-list {
  list-style: none;
  margin-bottom: 24px;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 8px;
}

.service-list li .icon-inline-check {
  margin-top: 0.3em;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   6. Portfolio Section
   -------------------------------------------------------------------------- */
.portfolio-filter-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--color-primary);
  color: #0a0a0a;
  border-color: var(--color-primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.portfolio-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  position: relative;
  height: 320px;
}

.portfolio-img-holder {
  width: 100%;
  height: 100%;
  position: relative;
}

.portfolio-img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #ffffff;
  transition: opacity var(--transition-fast);
}

.portfolio-overlay .tag {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.portfolio-overlay h4 {
  color: #ffffff;
  font-size: 1.25rem;
}

.portfolio-overlay p {
  color: #cbd5e1;
  font-size: 0.85rem;
}

/* Card overlay only needs to sit at the bottom strip so the before/after
   slider above it stays draggable; only the button underneath needs clicks. */
.portfolio-overlay.has-slider {
  inset: auto 0 0 0;
  pointer-events: none;
}

.portfolio-overlay.has-slider .portfolio-details-btn {
  pointer-events: auto;
}

.portfolio-details-btn {
  align-self: flex-start;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

/* --------------------------------------------------------------------------
   6a. Before / After Comparison Slider
   -------------------------------------------------------------------------- */
.ba-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
  background: var(--bg-surface-elevated);
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ba-before {
  clip-path: inset(0 50% 0 0);
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #ffffff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.ba-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ba-handle-grip svg {
  width: 18px;
  height: 18px;
}

.ba-tag {
  position: absolute;
  top: 12px;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }

/* --------------------------------------------------------------------------
   6b. Actualités Section (CMS Articles)
   -------------------------------------------------------------------------- */
.actualites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.actualites-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
}

.actualite-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.actualite-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.actualite-img-box {
  height: 200px;
  overflow: hidden;
}

.actualite-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.actualite-card:hover .actualite-img-box img {
  transform: scale(1.08);
}

.actualite-body {
  padding: 24px;
}

.actualite-date {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.actualite-body h3 {
  font-size: 1.15rem;
  margin: 8px 0 10px;
}

.actualite-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.actualite-read-more {
  display: inline-block;
  margin-top: 12px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.actualite-read-more:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Estimator Section
   -------------------------------------------------------------------------- */
.estimator-section {
  background-color: var(--bg-surface-elevated);
  border-y: 1px solid var(--border-color);
}

.estimator-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.estimator-intro h2 {
  font-size: 2.4rem;
  margin: 12px 0 20px;
}

.estimator-intro p {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 1.05rem;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.check-icon {
  width: 28px;
  height: 28px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.check-icon svg {
  width: 16px;
  height: 16px;
}

/* Holds both the calculator and the embedded contact form cards; when the
   admin picks "Les deux" (BOTH) they stack here with a gap instead of
   fighting the .estimator-wrapper grid's own 2-column layout. */
.estimator-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.estimator-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}

.step-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.step-indicator .step {
  /* Reset <button> defaults so it reads identically to the plain label it replaced. */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: not-allowed;
  transition: color var(--transition-fast);
}

/* Reachable = a step already visited - clicking it jumps back to review/edit it. */
.step-indicator .step.reachable {
  cursor: pointer;
}

.step-indicator .step.reachable:hover {
  color: var(--text-main);
}

.step-indicator .step.active {
  color: var(--color-primary);
  font-weight: 800;
  cursor: default;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.form-label {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 16px;
  display: block;
  font-size: 1.1rem;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.option-card {
  background: var(--bg-surface-elevated);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.option-card:hover, .option-card.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.option-icon {
  margin-bottom: 8px;
  color: var(--color-primary);
}

.option-icon svg {
  width: 28px;
  height: 28px;
}

.option-card strong {
  display: block;
  font-size: 0.95rem;
}

.option-card span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.range-box {
  margin: 32px 0;
  text-align: center;
}

.range-slider {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.range-val-display {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-top: 12px;
}

.finish-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.radio-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  padding: 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.radio-card input {
  accent-color: var(--color-primary);
  width: 20px;
  height: 20px;
}

.radio-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.btn-group {
  display: flex;
  gap: 16px;
}

.estimate-result-box {
  text-align: center;
  background: var(--color-primary-light);
  border: 1px solid rgba(184, 150, 92, 0.4);
  padding: 24px;
  border-radius: var(--radius-md);
  margin-bottom: 28px;
}

.res-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);

}

.res-price {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 8px 0;
}

.res-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-input {
  width: 100%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   7b. About Section (/apropos) - BUILTIN section, hideable from the admin
   -------------------------------------------------------------------------- */
.about-section {
  background-color: var(--bg-surface);
}

.about-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-intro .section-description {
  margin: 0 0 32px;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.about-value-card {
  background-color: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal);
}

.about-value-card:hover {
  border-color: var(--border-highlight);
}

.about-value-card h3 {
  color: var(--color-primary);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.about-value-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   8. Testimonials & CMS Section
   -------------------------------------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.testimonial-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stars {
  display: flex;
  gap: 3px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.stars svg {
  width: 18px;
  height: 18px;
}

.quote {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.author strong {
  display: block;
}

.author span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8b. Office Location Map (single map for the business address, not the
   project gallery - see .ba-slider / .project-detail-* for that instead)
   -------------------------------------------------------------------------- */
.location-map {
  position: relative;
  width: 100%;
  padding-top: 38%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   9. Footer & Toast Notifications
   -------------------------------------------------------------------------- */
.footer {
  /* The footer background stays dark in both themes (like the top bar), so
     its text colors are fixed here rather than following --text-main /
     --text-muted, which would go near-black-on-black in light mode. */
  background-color: var(--topbar-bg);
  border-top: 1px solid var(--border-color);
  padding: 80px 0 30px;
  color: #a3a3a3;
}

.footer .brand-name,
.footer .brand-sub {
  color: #ffffff;
}

.footer .brand-sub {
  opacity: 0.75;
}

.rbq-info strong {
  color: #ffffff;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-desc {
  margin: 16px 0 24px;
  font-size: 0.9rem;
}

.rbq-info {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
  font-size: 0.85rem;
}

.footer-col h4 {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.footer-links, .contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
}

.footer-links li, .contact-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-list a {
  color: var(--color-primary);
  text-decoration: none;
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 30px;
  text-align: center;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   9b. Project Detail Modal (before/after pairs, gallery, location map)
   -------------------------------------------------------------------------- */
.project-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 500;
}

.project-modal {
  width: 100%;
  max-width: 860px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.project-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.project-modal-close:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.project-modal-body {
  padding: 40px;
}

.project-modal-body h3 {
  font-size: 1.6rem;
  margin: 6px 0 12px;
}

.project-modal-desc {
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   9c. Configurable Contact Form Modal (extends .project-modal-overlay/.project-modal)
   -------------------------------------------------------------------------- */
.contact-modal {
  max-width: 520px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form-field .form-label {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* Country code + national number pair (see buildPhoneInput in app.js). */
.phone-input-group {
  display: flex;
  gap: 8px;
}

.phone-country-select {
  flex: 0 0 150px;
}

.phone-number-input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .phone-input-group {
    flex-direction: column;
  }

  .phone-country-select {
    flex: 1 1 auto;
  }
}

/* Embedded contact form shown inside the "estimation" section's calculator
   card (see #estimatorContactFormCard / applyEstimatorSectionMode). */
#estimatorContactFormCard h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.project-detail-sliders {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.project-detail-sliders .ba-slider {
  position: relative;
  height: 380px;
  border-radius: var(--radius-md);
}

.project-detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.project-detail-gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--bg-surface);
  border: 1px solid var(--color-primary);
  color: var(--text-main);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition-normal);
  z-index: 1000;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Persistent mobile "tap to call" bar (desktop-hidden; shown in the 768px
   breakpoint below). The top bar's phone line scrolls away with the page,
   so this stays reachable the whole time the visitor is on the site. */
.mobile-call-bar {
  display: none;
}

/* --------------------------------------------------------------------------
   10. Responsive Design Breakpoints (Mobile-First Safety Net)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .hero-container, .estimator-wrapper, .about-wrapper, .footer-container {
    grid-template-columns: 1fr;
  }

  .services-grid, .portfolio-grid, .testimonials-grid, .actualites-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    font-size: 2.6rem;
  }

  .hero-img {
    height: 360px;
  }
}

/* Full desktop nav (7 links + CTA) needs ~900px of breathing room; below that
   it starts crowding (e.g. "À Propos" wrapping onto two lines). Switching to
   the hamburger menu at 1024px instead of 768px means tablets - portrait
   (~768px) and landscape (~1024px) alike - always get the roomier, larger
   touch-target mobile menu rather than a cramped inline one. */
@media (max-width: 1024px) {
  .nav-menu {
    display: none;
  }

  /* Toggled by JS (initNav in app.js) - no inline styles, just this class. */
  .nav-menu.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
  }

  /* Full-width, generously sized rows so each link is an easy tap target
     (~44px) instead of just its own text line-height. */
  .nav-menu.mobile-open .nav-link {
    display: block;
    padding: 12px 4px;
  }

  .nav-cta {
    display: none;
  }

  .mobile-hamburger {
    display: flex;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 18px;
  }

  /* Room at the bottom of the page so the fixed call bar never covers the
     footer's last line, and lift the toast above the bar so they don't overlap. */
  body {
    padding-bottom: 56px;
  }

  .mobile-call-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Just under .navbar's z-index (100): on very short viewports the open
       mobile dropdown menu (rendered inside the navbar's stacking context)
       can extend down near the bottom of the screen, and it should stay
       above this bar rather than be covered by it. */
    z-index: 90;
    background: var(--color-primary);
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 14px 16px;
    text-decoration: none;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  }

  .toast {
    bottom: 74px;
    right: 16px;
  }

  .top-bar-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .top-info {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Mobile top bar: keep only the emergency phone line */
  .top-info-item:first-child,
  .top-bar .divider,
  .top-actions {
    display: none;
  }

  .section {
    padding: 64px 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .services-grid, .portfolio-grid, .testimonials-grid, .options-grid, .actualites-grid {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-btns {
    flex-direction: column;
  }

  .hero-btns .btn {
    width: 100%;
  }

  .floating-glass-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 14px 16px;
  }

  .estimator-card {
    padding: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .project-modal-body {
    padding: 24px;
  }

  .project-detail-sliders .ba-slider {
    height: 260px;
  }

  .project-detail-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .location-map {
    padding-top: 70%;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 14px;
  }

  .about-values {
    grid-template-columns: 1fr;
  }

  .hero-section {
    padding: 48px 0 60px;
  }

  .hero-title {
    font-size: 2.05rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-img {
    height: 240px;
  }

  .metrics-grid {
    gap: 12px;
  }

  .metric-num {
    font-size: 1.4rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .options-grid {
    gap: 10px;
  }

  .estimator-card {
    padding: 18px;
  }

  .project-modal-overlay {
    padding: 0;
  }

  .project-modal {
    max-width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .project-detail-sliders .ba-slider {
    height: 220px;
  }

  .project-detail-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .navbar-container {
    height: 68px;
  }

  .brand-name {
    font-size: 1.05rem;
  }
}