/* Fonts loaded via <link> in header.php */

/* ─────────────────────────────────────
   BRAND PALETTE
   #FFDE5B  accent  — yellow
   #366BB2  primary — blue
   #302D2D  dark    — charcoal
   #E7E6E5  light   — warm grey
───────────────────────────────────── */
:root {
  --primary: #366BB2;
  --accent:  #FFDE5B;
  --dark:    #302D2D;
  --light:   #E7E6E5;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Lenis overrides CSS smooth-scroll when active to avoid double-smoothing */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { font-family: var(--sans); color: #302D2D; background: #fff; line-height: 1.6; }
/* Garde-fou anti-débordement horizontal (mobile) — `clip` ne casse pas position:sticky */
html, body { overflow-x: clip; }
img  { max-width: 100%; height: auto; }

/* ─────────────────────────────────────
   HERO TEXT
───────────────────────────────────── */
.hero-label {
  display: inline-block;
  color: rgba(255,255,255,.75);
  font-family: var(--sans);
  font-size: .65rem; font-weight: 400;
  letter-spacing: 6px; text-transform: uppercase;
}
.hero-sep {
  width: 52px; height: 1.5px;
  background: rgba(255,255,255,.40);
  margin: 1.4rem auto;
}
.hero-title {
  font-family: var(--serif);
  font-style: italic; font-weight: 700;
  font-size: clamp(3.2rem, 7.5vw, 6.5rem);
  color: #fff; line-height: .98;
  margin-bottom: 1.75rem; letter-spacing: -.5px;
}
.hero-subtitle {
  color: rgba(255,255,255,.92);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.95;
  max-width: 500px;
  margin: 0 auto 3rem;
  letter-spacing: .4px;
}
.btn-hero {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .4);
  color: rgba(255, 255, 255, .88);
  background: transparent;
  padding: 0.95rem 5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .35s, background .35s, color .35s;
  border-radius: 0px;
}
.btn-hero:hover {
  border-color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08); color: #fff;
}

/* ─────────────────────────────────────
   STATS BAR
   Yellow bg → dark text for contrast
───────────────────────────────────── */
.stats-bar { background: var(--accent); padding: 2.75rem 0; }
.stat-number {
  font-family: var(--serif);
  font-size: 2.8rem; font-weight: 600;
  color: var(--dark); line-height: 1;
}
.stat-label {
  font-size: .62rem; font-weight: 500;
  color: rgba(48,45,45,.72);
  text-transform: uppercase; letter-spacing: 2px; margin-top: .4rem;
}

/* ─────────────────────────────────────
   SECTIONS
───────────────────────────────────── */
/* sections sit above the sticky hero so they slide over it */
.section {
  padding: 6.5rem 0;
  position: relative;
  z-index: 1;
  background: #fff;
}
/* first section gets a top shadow for the "lifting over" depth */
.section--first {
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .18);
}
.section-light { background: var(--light); }

.eyebrow {
  display: inline-block;
  font-size: .62rem; font-weight: 400;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--primary); margin-bottom: .75rem;
}
.section-heading {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600; font-style: italic;
  color: var(--dark); line-height: 1.12; margin-bottom: 1rem;
}
.section-heading-light { color: #fff; }

/* ─────────────────────────────────────
   SERVICE CARDS
───────────────────────────────────── */
.service-card {
  padding: 2.5rem 2rem; background: #fff;
  box-shadow: 0 2px 24px rgba(0,0,0,.06);
  transition: transform .35s, box-shadow .35s;
  height: 100%;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.service-icon {
  width: 48px; height: 48px;
  margin-bottom: 1.5rem; color: var(--primary);
}

/* ─────────────────────────────────────
   PAGE HERO (subpages)
───────────────────────────────────── */
.page-hero-title {
  font-family: var(--serif);
  font-style: italic; font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600; color: #fff; line-height: 1.08;
}
.breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.5); font-size: .65rem; letter-spacing: 1.5px;
}
.breadcrumb-item a {
  color: rgba(255,255,255,.55); text-decoration: none;
  font-size: .65rem; letter-spacing: 1.5px;
}
.breadcrumb-item a:hover { color: rgba(255,255,255,.88); }
.breadcrumb-item.active { color: rgba(255,255,255,.88); }

/* Page hero backgrounds — brand palette */
.about-hero-bg       { background: linear-gradient(140deg, #366BB2 0%, #302D2D 100%); }
.service-hero-bg     { background: linear-gradient(155deg, #302D2D 0%, #366BB2 100%); }
.realisation-hero-bg { background: linear-gradient(155deg, #2a2728 0%, #302D2D 100%); }
.contact-hero-bg     { background: linear-gradient(155deg, #366BB2 0%, #2a2728 100%); }

/* ─────────────────────────────────────
   PROJECT CARDS
───────────────────────────────────── */
.project-card { position: relative; overflow: hidden; }
.project-card-img {
  width: 100%; height: 280px; object-fit: cover; display: block;
  background: linear-gradient(135deg, #c8d4e0, #9fb0c2);
  transition: transform .55s ease;
}
.project-card:hover .project-card-img { transform: scale(1.05); }
.project-card-body { padding: 1.35rem 1rem; background: #fff; }
.project-badge {
  display: inline-block; background: var(--accent); color: var(--dark);
  font-size: .58rem; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: .25rem .65rem; margin-bottom: .5rem;
}

/* ─────────────────────────────────────
   PROJECT CARDS — HOME (cinematic overlay)
───────────────────────────────────── */
.proj-card {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
/* accent top-bar slides in on hover */
.proj-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .52s cubic-bezier(.25,.46,.45,.94);
  z-index: 3;
}
.proj-card:hover::before { transform: scaleX(1); }

.proj-card-media {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: linear-gradient(135deg, #c8d4e0, #9fb0c2);
}
/* middle card is taller → pyramid layout */
.proj-grid .col-md-4:nth-child(2) .proj-card-media { height: 460px; }
@media (max-width: 767px) {
  .proj-card-media,
  .proj-grid .col-md-4:nth-child(2) .proj-card-media { height: 270px; }
}

.proj-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.07);
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.proj-card:hover .proj-card-img { transform: scale(1.15); }

.proj-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22,18,18,.92) 0%,
    rgba(22,18,18,.28) 52%,
    rgba(22,18,18,.02) 100%
  );
  transition: background .5s ease;
}
.proj-card:hover .proj-card-overlay {
  background: linear-gradient(
    to top,
    rgba(22,18,18,.97) 0%,
    rgba(22,18,18,.62) 58%,
    rgba(22,18,18,.20) 100%
  );
}

.proj-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.35rem 1.35rem;
  transform: translateY(6px);
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
  z-index: 2;
}
.proj-card:hover .proj-card-body { transform: translateY(0); }

.proj-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.proj-card-year {
  font-size: .64rem; font-weight: 600;
  color: rgba(255,255,255,.42);
  letter-spacing: 1.5px;
}
.proj-card-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 .85rem;
  line-height: 1.42;
}
.proj-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .33s ease .07s, transform .33s ease .07s;
}
.proj-card:hover .proj-card-cta { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────
   WHY US
───────────────────────────────────── */
.check-item { display: flex; gap: 1rem; margin-bottom: 1.75rem; }
.check-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-top: .2rem;
}
/* Dark stroke on yellow background */
.check-icon svg { width: 12px; height: 12px; stroke: var(--dark); fill: none; stroke-width: 2.5; }

/* ─────────────────────────────────────
   ABOUT DUO — arche + rectangle décalé
───────────────────────────────────── */
.about-duo {
  position: relative;
  height: 520px;
}

/* ── Arch — tall portrait ── */
.about-arch-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 62%; height: 88%;
  border-radius: 9999px 9999px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #c8d4e0, #9fb0c2);
  z-index: 1;
}
.about-arch-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;   /* show upper portion of portrait */
  display: block;
  transform: scale(1.04);
  transition: transform 1s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.about-arch-wrap:hover .about-arch-img { transform: scale(1.1); }

/* ── Rect overlay — landscape ── */
.about-rect-wrap {
  position: absolute;
  bottom: 0; right: 0;
  width: 60%; height: 54%;
  overflow: hidden;
  background: linear-gradient(135deg, #9fb0c2, #c8d4e0);
  z-index: 2;
  box-shadow: -6px -6px 0 5px #fff;
  border-radius: 2px;
}
.about-rect-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;  /* landscape — center crops best */
  display: block;
  transform: scale(1.06);
  transition: transform 1s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.about-rect-wrap:hover .about-rect-img { transform: scale(1.13); }

/* ── Floating portrait medallion ── */
.about-float-wrap {
  position: absolute;
  top: 42%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
  border: 5px solid #fff;
  box-shadow: 0 8px 28px rgba(48,45,45,.22);
  background: #edecea;
}
.about-float-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .about-duo { height: 420px; }
}
@media (max-width: 576px) {
  .about-duo { height: 320px; }
  .about-arch-wrap  { width: 62%; height: 86%; }
  .about-rect-wrap  { width: 58%; height: 50%; }
  .about-float-wrap { width: 80px; height: 80px; border-width: 4px; }
}

/* ─────────────────────────────────────
   HOME — NOS SERVICES (split layout)
───────────────────────────────────── */
.home-svc-left {
  background: var(--accent);
  padding: 5.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-svc-right {
  background: #fff;
  padding: 5rem 3.5rem;
}
.home-svc-list {
  list-style: none;
  padding: 0; margin: 0;
}
.home-svc-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f0eded;
  font-size: .85rem;
  color: #888;
  line-height: 1.75;
  font-weight: 300;
}
.home-svc-list li:first-child { padding-top: 0; }
.home-svc-list li::before {
  content: '';
  width: 5px; height: 5px;
  min-width: 5px;
  background: var(--accent);
  border: 1px solid rgba(48,45,45,.22);
  flex-shrink: 0;
  margin-top: .6rem;
}
.home-svc-list strong {
  color: var(--dark);
  font-weight: 600;
}
@media (max-width: 991px) {
  .home-svc-left  { padding: 4rem 1.5rem; }
  .home-svc-right { padding: 3.5rem 1.5rem; }
}

/* ─────────────────────────────────────
   CTA BANNER
───────────────────────────────────── */
.cta-banner { background: var(--dark); padding: 6rem 0; position: relative; z-index: 1; }

/* ─────────────────────────────────────
   BUTTONS
───────────────────────────────────── */
/* Yellow button — always dark text for contrast */
.btn-primary-wan {
  display: inline-block; background: var(--accent); color: var(--dark);
  padding: .9rem 2.25rem;
  font-weight: 600; font-size: .65rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  border: none; text-decoration: none;
  transition: background .25s, transform .2s;
}
.btn-primary-wan:hover {
  background: #e6cb40; color: var(--dark); transform: translateY(-1px);
}

/* Blue outlined button */
.btn-outline-blue {
  display: inline-block;
  border: 1.5px solid var(--primary); color: var(--primary);
  background: transparent; padding: .9rem 2.25rem;
  font-weight: 500; font-size: .65rem;
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
  transition: background .25s, color .25s;
}
.btn-outline-blue:hover { background: var(--primary); color: #fff; }

/* White outlined button (on dark bg) */
.btn-outline-wan {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.85);
  background: transparent; padding: .9rem 2.25rem;
  font-weight: 400; font-size: .65rem;
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
  transition: border-color .25s, background .25s, color .25s;
}
.btn-outline-wan:hover {
  border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); color: #fff;
}

/* ─────────────────────────────────────
   FORM
───────────────────────────────────── */
.form-control, .form-select {
  border: 1px solid #d4d3d2; border-radius: 0;
  padding: .9rem 1rem; font-size: .875rem;
  font-family: var(--sans); color: var(--dark);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(54,107,178,.12);
}
.form-label {
  font-size: .62rem; font-weight: 400;
  letter-spacing: 2px; text-transform: uppercase;
  color: #888; margin-bottom: .5rem;
}

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────── */
/* ── Footer accent bar ── */
.wan-footer-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

/* ── Footer shell ── */
.wan-footer {
  background: #f7f6f4;
  color: #5a5653;
  border-top: 1px solid #e8e5e1;
}

/* ── Main content area ── */
.wan-footer-main {
  padding: 4.5rem 0 3.5rem;
  gap: 0;
}

/* ── Brand column ── */
.wan-footer-brand-col {
  padding-right: 3rem;
  border-right: 1px solid #e8e5e1;
  padding-bottom: 2.5rem;
}
@media (max-width: 991px) {
  .wan-footer-brand-col {
    border-right: none;
    border-bottom: 1px solid #e8e5e1;
    padding-right: 0;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

/* ── Brand header: logo + social wrapper ── */
.wan-footer-brand-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

/* ── Logo image (dark version) ── */
.wan-footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
  text-decoration: none;
}
.wan-footer-logo-img {
  height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
  /* Dark logo: invert colours removed — use original for light bg */
  filter: brightness(0);
  opacity: .82;
  transition: opacity .2s;
}
.wan-footer-logo:hover .wan-footer-logo-img { opacity: 1; }

/* ── Tagline ── */
.wan-footer-tagline {
  font-size: .83rem;
  line-height: 1.85;
  color: #6d6a67;
  margin-bottom: 1.75rem;
  max-width: 300px;
}

/* ── Contact items ── */
.wan-footer-contact {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 2rem;
}
.wan-footer-contact-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: #4a4745;
  text-decoration: none;
  transition: color .2s;
  line-height: 1.5;
}
a.wan-footer-contact-item:hover { color: var(--primary); }
.wan-footer-contact--plain { cursor: default; }
.wan-footer-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: var(--primary);
  opacity: .75;
}

/* ── Devis CTA button ── */
.wan-footer-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary);
  text-decoration: none;
  padding: .65rem 1.6rem;
  border-radius: 2px;
  transition: background .25s, transform .2s;
}
.wan-footer-cta:hover {
  background: var(--dark);
  color: var(--accent);
  transform: translateY(-1px);
}

/* ── Footer social icons ── */
.wan-footer-social {
  display: flex;
  gap: .6rem;
  margin-top: 0;
}
.wan-footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(48, 45, 45, .18);
  color: rgba(48, 45, 45, .5);
  text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
}
.wan-footer-social-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(54, 107, 178, .07);
}
.wan-footer-social-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── Nav columns ── */
.wan-footer-nav-col {
  padding-left: 2.25rem;
  padding-bottom: 2rem;
}
@media (max-width: 991px) {
  .wan-footer-nav-col { padding-left: 0; padding-top: 1.5rem; }
}

/* ── Footer responsive ── */

/* Tablet (992px breakpoint handled by Bootstrap col-lg-*) */
@media (max-width: 991px) {
  .wan-footer-main        { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* Logo + social side-by-side once brand col goes full-width */
  .wan-footer-brand-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
  }
  .wan-footer-logo        { margin-bottom: 0; }
  /* Clamp tagline on tablet */
  .wan-footer-tagline     { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wan-footer-brand-col   { padding-bottom: 2rem; margin-bottom: 0; border-bottom: 1px solid #e2dfdb; }
}

/* Mobile — 768px */
@media (max-width: 767px) {
  .wan-footer-main        { padding-top: 2rem; padding-bottom: 2rem; }
  .wan-footer-tagline     { display: none; }
  .wan-footer-contact     { margin-top: .5rem; gap: .5rem; margin-bottom: 1.25rem; }
  .wan-footer-contact-item { font-size: .74rem; gap: .4rem; }
  .wan-footer-icon        { width: 13px; height: 13px; }
  .wan-footer-cta         { margin-top: .75rem; padding: .55rem 1.35rem; font-size: .7rem; }

  /* Certs */
  .wan-footer-certs       { gap: .75rem; margin-top: 1rem; padding-top: 1rem; flex-wrap: wrap; }
  .wan-footer-cert-img    { height: 48px; }
  .wan-footer-cert-img--re { height: 42px; }
  .wan-footer-rcpro       { font-size: .6rem; }
  .wan-footer-rcpro-icon  { width: 18px; height: 18px; }

  /* Nav columns */
  .wan-footer-nav-col     { padding-top: 1.25rem; padding-bottom: .75rem; }
  .wan-footer-heading     { font-size: .6rem; margin-bottom: .65rem; }
  .wan-footer-links a     { font-size: .74rem; padding: .22rem 0; }

  /* Zone & hours */
  .wan-footer-zone-text   { font-size: .74rem; line-height: 1.65; }
  .wan-footer-hours td    { font-size: .7rem; padding: .18rem 0; }
  .wan-footer-hours td:last-child { padding-left: .75rem; }

  /* Bottom bar */
  .wan-footer-bottom      { flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem 0; }
  .wan-footer-copy,
  .wan-footer-legal a,
  .wan-footer-legal span  { font-size: .66rem; }
}

/* Small mobile — 576px: swap hours table for compact single line */
@media (max-width: 575px) {
  .wan-footer-main        { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .wan-footer-brand-col   { padding-bottom: 1.5rem; margin-bottom: 0; }
  .wan-footer-social-btn  { width: 30px; height: 30px; }
  .wan-footer-social-btn svg { width: 12px; height: 12px; }

  /* Nav cols stay side-by-side (Bootstrap col-6) but tighter */
  .wan-footer-nav-col     { padding-top: 1rem; padding-bottom: .5rem; }
  .wan-footer-links a     { font-size: .72rem; padding: .18rem 0; }

  /* Zone: hide full table + "Horaires" heading, show compact line */
  .wan-footer-heading--hours { display: none; }
  .wan-footer-hours       { display: none; }
  .wan-footer-hours-short { display: block; }
  .wan-footer-zone-text   { margin-bottom: .65rem; }

  /* Certs */
  .wan-footer-certs       { gap: .6rem; margin-top: .75rem; padding-top: .75rem; }
  .wan-footer-cert-img    { height: 40px; }
  .wan-footer-cert-img--re { height: 34px; }
}

/* ── Section headings ── */
.wan-footer-heading {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 1.25rem;
}

/* ── Nav links ── */
.wan-footer-links { margin: 0; }
.wan-footer-links li { margin-bottom: 0; }
.wan-footer-links a {
  font-size: .82rem;
  color: #6d6a67;
  text-decoration: none;
  display: block;
  padding: .28rem 0;
  line-height: 1.5;
  transition: color .2s, padding-left .2s;
  border: none;
}
.wan-footer-links a:hover {
  color: var(--primary);
  padding-left: 4px;
}
/* Special CTA link in nav */
.wan-footer-link-cta {
  color: var(--primary) !important;
  font-weight: 600 !important;
  margin-top: .4rem;
}
.wan-footer-link-cta:hover { color: var(--dark) !important; }

/* ── Zone text ── */
.wan-footer-zone-text {
  font-size: .82rem;
  line-height: 1.85;
  color: #6d6a67;
  margin-bottom: 0;
}
.wan-footer-zone-text strong {
  color: var(--dark);
  font-weight: 500;
}

/* ── Hours table ── */
.wan-footer-hours {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  color: #6d6a67;
  margin-bottom: 1.5rem;
}
.wan-footer-hours td {
  padding: .3rem 0;
  line-height: 1.4;
}
.wan-footer-hours td:last-child {
  text-align: right;
  color: var(--dark);
  font-weight: 500;
}
.wan-footer-hours em { font-style: normal; color: #aaa9a7; }

/* ── Trust badges ── */
/* ── Certification badges (images + RC Pro) ── */
.wan-footer-certs {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wan-footer-cert-img {
  display: block;
  height: 60px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .92;
  transition: opacity .2s;
}
.wan-footer-cert-img--re {
  height: 52px;
}
.wan-footer-cert-img:hover { opacity: 1; }
.wan-footer-rcpro {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(48, 45, 45, .55);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.35;
  flex-shrink: 0;
}
.wan-footer-rcpro-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: .6;
}

/* ── Compact hours (mobile only) ── */
.wan-footer-hours-short {
  display: none;
  font-size: .8rem;
  color: #6d6a67;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.wan-footer-hours-short strong { color: var(--dark); font-weight: 500; }
.wan-footer-hours-short em { font-style: normal; color: #aaa9a7; }

/* ── Bottom bar ── */
.wan-footer-bottom {
  border-top: 1px solid #e2dfdb;
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.wan-footer-copy {
  font-size: .72rem;
  color: #a09d9a;
  margin: 0;
  line-height: 1.6;
}
.wan-footer-legal {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.wan-footer-legal a,
.wan-footer-legal span {
  font-size: .72rem;
  color: #a09d9a;
  text-decoration: none;
  transition: color .2s;
}
.wan-footer-legal a:hover { color: var(--primary); }
.wan-footer-legal span { opacity: .5; }

/* ─────────────────────────────────────
   REVEAL FROM RIGHT
───────────────────────────────────── */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1),
              transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal-right.visible { opacity: 1; transform: none; }
/* Mobile : décalage réduit — 60px provoquait un débordement horizontal */
@media (max-width: 991px) {
  .reveal-right { transform: translateX(24px); }
}

/* ─────────────────────────────────────
   SERVICES — accent divider line
───────────────────────────────────── */
.svc-line {
  display: block;
  width: 52px; height: 3px;
  background: var(--accent);
  margin: .65rem 0 .8rem;
}

/* ─────────────────────────────────────
   SERVICES — staggered image collage
───────────────────────────────────── */
.svc-collage {
  position: relative;
  height: 540px;
}
.svc-collage-a {
  position: absolute;
  top: 0; left: 0;
  width: 54%; height: 76%;
  overflow: hidden;
}
.svc-collage-b {
  position: absolute;
  bottom: 0; right: 0;
  width: 60%; height: 72%;
  overflow: hidden;
}
.svc-collage-a img,
.svc-collage-b img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.svc-collage-a:hover img,
.svc-collage-b:hover img { transform: scale(1.04); }

/* ─────────────────────────────────────
   SERVICES — statement text
───────────────────────────────────── */
.svc-statement-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(2.6rem, 4.5vw, 4.8rem);
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--dark);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.svc-statement-title strong {
  font-weight: 800;
}
.svc-statement-body {
  font-size: .9rem;
  line-height: 1.95;
  color: #555;
  font-weight: 400;
  margin-bottom: 1rem;
}

/* ─────────────────────────────────────
   SERVICES — image marquee
───────────────────────────────────── */
.svc-marquee {
  margin-top: 4.5rem;
  overflow: hidden;
  user-select: none;
}
.svc-marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: svcScroll 38s linear infinite;
  will-change: transform;
}
/* Only pause on true pointer devices — touch :hover is sticky/unreliable */
@media (hover: hover) and (pointer: fine) {
  .svc-marquee:hover .svc-marquee-track {
    animation-play-state: paused;
  }
}
@keyframes svcScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.svc-slide {
  width: 340px; height: 240px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.svc-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s ease;
}
.svc-slide:hover img { transform: scale(1.05); }
.svc-slide-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .5rem .85rem;
  background: linear-gradient(to top, rgba(48,45,45,.82), transparent);
  color: rgba(255,255,255,.9);
  font-size: .58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
}

/* ─────────────────────────────────────
   PROCESSUS — étapes clé en main
───────────────────────────────────── */
.process-step {
  padding: 2.5rem 2.5rem 2.5rem 0;
  border-top: 2px solid var(--accent);
  height: 100%;
}
.process-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 4rem;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: 1.25rem;
  -webkit-text-stroke: 1px var(--dark);  /* text-stroke is non-standard — removed */
}
.process-title {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: .75rem;
}
.process-desc {
  font-size: .85rem;
  color: #666;
  font-weight: 400;
  line-height: 1.85;
  margin: 0;
}

/* ─────────────────────────────────────
   SERVICES — trust strip
───────────────────────────────────── */
/* Trust strip — light warm background, flush with section edge */
.svc-trust {
  margin-top: 3rem;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  background: var(--light);   /* #E7E6E5 warm grey — solid, blocks hero bleed */
  padding: 1.15rem 0;
}
@media (prefers-reduced-motion: reduce) { .svc-trust-track { animation: none !important; } }

.svc-trust-panel {
  background: var(--light);   /* matches the strip bg — seamless */
  overflow: hidden;
  padding: .42rem 0;
}
.svc-trust-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 0 1.1rem;
  padding: 0 1.5rem;
  width: max-content;
  margin: 0 auto;
}
.svc-trust-item {
  font-family: 'Bebas Neue', var(--serif);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  color: var(--dark);
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.svc-trust-pipe {
  width: 2px;
  height: 11px;
  background: var(--dark);
  opacity: .15;
  flex-shrink: 0;
}
.svc-trust-dupe { display: none; }
@keyframes trustScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1),
              transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="0"] { transition-delay: 0s; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width: 991px) {
  .section    { padding: 4.5rem 0; }
  .page-hero  { padding: 9rem 0 4rem; }
  .cta-banner { padding: 4rem 0; }
  .svc-collage { height: 380px; }
}
@media (max-width: 576px) {
  .hero-title  { font-size: 2.6rem; }
  .stat-number { font-size: 2.2rem; }
  .section     { padding: 3.5rem 0; }
  .svc-collage { height: 280px; }
  .svc-collage-b { right: 0; }
  .svc-statement-title { letter-spacing: -.5px; }
  .svc-slide   { width: 240px; height: 170px; }
  .svc-trust-dupe  { display: inline-block; }
  .svc-trust-track { margin: 0; animation: trustScroll 18s linear infinite; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY STACK — each section slides over the previous as you scroll.
   The hero already has position:sticky; top:0; z-index:0 (header.php inline).
   Sections receive .stack-N to continue the z-index ladder with depth shadows.
═══════════════════════════════════════════════════════════════════════════ */
/* Every stack layer MUST have an explicit solid background to fully cover
   the sticky hero video beneath. Without this the video bleeds through.
   NOTE: le "pin & slide over" (position:sticky) a été retiré — il gelait le
   scroll dès qu'une section était plus haute que l'écran (avis Google,
   laptops, mobile) et masquait le contenu suivant. Le hero garde son effet
   sticky (il fait exactement 100vh). Les ombres/z-index sont conservés. */
.stack-1 { position: relative; z-index: 1; box-shadow: 0 -16px 48px rgba(0,0,0,.22); background-color: #fff; }
.stack-2 { position: relative; z-index: 2; box-shadow: 0 -20px 56px rgba(0,0,0,.28); background-color: var(--light); }
.stack-3 { position: relative; z-index: 3; box-shadow: 0 -24px 64px rgba(0,0,0,.32); background-color: #fff; }
.stack-4 { position: relative; z-index: 4; box-shadow: 0 -28px 72px rgba(0,0,0,.36); background-color: #fff; }
.stack-5 { position: relative; z-index: 5; box-shadow: 0 -32px 80px rgba(0,0,0,.40); background-color: var(--dark); }
.stack-6 { position: relative; z-index: 6; box-shadow: 0 -36px 88px rgba(0,0,0,.44); background-color: var(--dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK SECTIONS — unified charcoal base (var(--dark) = #302D2D).
   !important on background overrides any inline style in section blocks.
═══════════════════════════════════════════════════════════════════════════ */
.section-dark {
  background: var(--dark) !important;
  color: rgba(255,255,255,.6);
}

/* Headings */
.section-dark .section-heading  { color: #fff; }
.section-dark .svc-row-title    { color: #fff; }

/* Eyebrow label — accent yellow at 62% */
.section-dark .eyebrow { color: rgba(255,222,91,.62); }

/* Body text */
.section-dark p                 { color: rgba(255,255,255,.6); }
.section-dark .text-muted       { color: rgba(255,255,255,.55) !important; }

/* Bold inline text */
.section-dark strong            { color: rgba(255,255,255,.92); font-weight: 600; }

/* Stat grid — default light-bg colours; dark-section override below */
.dark-stat-num                  { color: var(--dark); }
.dark-stat-label                { color: #888; }
.section-dark .dark-stat-num    { color: #fff; }
.section-dark .dark-stat-label  { color: rgba(255,255,255,.42); }

/* Services statement (section 2) */
.section-dark .svc-statement-title        { color: #fff; }
.section-dark .svc-statement-title strong { color: #fff; }
.section-dark .svc-statement-body         { color: rgba(255,255,255,.58); }

/* Trust strip on dark background */
.section-dark .svc-trust-panel { background: rgba(22,20,20,.65); }
.section-dark .svc-trust-item  { color: rgba(255,255,255,.65); }
.section-dark .svc-trust-pipe  { background: rgba(255,255,255,.18); opacity: 1; }

/* btn-outline-blue becomes white-outline on dark backgrounds */
.section-dark .btn-outline-blue {
  border-color: rgba(255,255,255,.38);
  color: rgba(255,255,255,.78);
}
.section-dark .btn-outline-blue:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

/* ── Ce que nous faisons (svc-row-section) inside section-dark ── */
.section-dark.svc-row-section::after          { color: rgba(255,255,255,.028); }
.section-dark .svc-row-header                 { border-bottom-color: rgba(255,255,255,.07); }
.section-dark .svc-row                        { border-bottom-color: rgba(255,255,255,.07); }
.section-dark .svc-row:hover                  { background: rgba(255,222,91,.04); }
.section-dark .svc-row-num                    { color: rgba(255,222,91,.35); }
.section-dark .svc-row:hover .svc-row-num     { color: var(--accent); }
.section-dark .svc-row-name                   { color: rgba(255,255,255,.92); }
.section-dark .svc-row:hover .svc-row-name    { color: var(--accent); }
.section-dark .svc-row-desc                   { color: rgba(255,255,255,.45); }
.section-dark .svc-row:hover .svc-row-desc    { color: rgba(255,255,255,.7); }
.section-dark .svc-row-arrow                  { border-color: rgba(255,255,255,.18); }
.section-dark .svc-row-arrow svg              { stroke: rgba(255,255,255,.35); }
.section-dark .svc-row:hover .svc-row-arrow   { border-color: var(--accent); background: var(--accent); }
.section-dark .svc-row:hover .svc-row-arrow svg { stroke: var(--dark); }

/* ── about-rect white frame still pops on dark ── */
.section-dark .about-rect-wrap { box-shadow: -6px -6px 0 4px rgba(255,255,255,.12); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO WATERMARK — ghost WAN logo in section background via ::before.
   Path is relative to style.css → assets/css/ → one level up to assets/img/
═══════════════════════════════════════════════════════════════════════════ */
.section-logo-bg {
  position: relative;
  isolation: isolate;      /* new stacking context so ::before stays local */
}
.section-logo-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/logo.png');
  background-repeat: no-repeat;
  background-size: clamp(260px, 38vw, 500px) auto;
  background-position: center center;  /* centré sur l'axe de la section */
  filter: brightness(0);   /* renders as pure dark ghost on light bg */
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
/* Left-side variant — désormais centré aussi (axe de la section) */
.section-logo-bg--left::before {
  background-position: center center;
}
/* Push all direct children above the watermark layer */
.section-logo-bg > .container,
.section-logo-bg > .svc-trust { position: relative; z-index: 1; }

/* ── Responsive watermark ── */
@media (max-width: 768px) {
  .section-logo-bg::before {
    background-size: clamp(200px, 55vw, 360px) auto;
    opacity: 0.045;
  }
}
@media (max-width: 576px) {
  .section-logo-bg::before {
    background-size: clamp(160px, 70vw, 280px) auto;
    background-position: center bottom -10px;
    opacity: 0.038;
  }
  .section-logo-bg--left::before {
    background-position: center bottom -10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TÉMOIGNAGES — premium testimonial cards on dark background
═══════════════════════════════════════════════════════════════════════════ */
.temoignages {
  background: var(--dark);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
/* Decorative oversized quote in background */
.temoignages::before {
  content: '\201C';
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(18rem, 36vw, 42rem);
  font-weight: 700;
  color: rgba(255,255,255,.02);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Header */
.temoignages .eyebrow { color: rgba(255,222,91,.62); }
.temoignages .section-heading { color: #fff; }

/* Card grid */
.temoignage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 991px)  { .temoignage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  {
  .temoignage-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .temoignages { padding: 4.5rem 0; }
}

/* Individual card */
.temoignage-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  padding: 2.5rem 2rem 2rem;
  position: relative;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.temoignage-card:hover {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,222,91,.22);
  transform: translateY(-4px);
}

/* Quote icon */
.temoignage-quote-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}
.temoignage-quote-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--dark);
}

/* Stars */
.temoignage-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 1.25rem;
}
.temoignage-stars svg {
  width: 14px;
  height: 14px;
  fill: var(--accent);
}

/* Text */
.temoignage-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  margin-bottom: 1.75rem;
}

/* Author block */
.temoignage-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.temoignage-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.temoignage-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  color: rgba(255,255,255,.92);
  letter-spacing: .5px;
  line-height: 1.3;
}
.temoignage-location {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .68rem;
  color: rgba(255,255,255,.42);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Accent line at card bottom — slides in on hover */
.temoignage-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}
.temoignage-card:hover::after {
  transform: scaleX(1);
}


/* ═══════════════════════════════════════════════════════
   RÉALISATIONS — Project gallery + Lightbox
   ══════════════════════════════════════════════════════ */

/* ── Filter bar ── */
.real-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.real-filter-btn {
  background: transparent;
  border: 1.5px solid #d0d0d0;
  color: var(--dark);
  padding: .4rem 1.1rem;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background .2s, color .2s, border-color .2s;
  line-height: 1.4;
}
.real-filter-btn:hover {
  border-color: var(--dark);
  background: var(--dark);
  color: #fff;
}
.real-filter-btn.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--accent);
}

/* ── Project card ── */
.real-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 18px rgba(0,0,0,.07);
  cursor: pointer;
  transition: transform .32s cubic-bezier(.25,.46,.45,.94),
              box-shadow .32s cubic-bezier(.25,.46,.45,.94);
}
.real-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,.13);
}
.real-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.real-card:hover .real-card-thumb {
  transform: scale(1.06);
}
.real-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(48,45,45,.82) 0%,
    rgba(48,45,45,.18) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .32s;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem 1.25rem;
}
.real-card:hover .real-card-overlay { opacity: 1; }
.real-card-overlay-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.real-card-overlay-label {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.real-card-overlay-arrow {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.real-card:hover .real-card-overlay-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
}
.real-card-body {
  padding: 1rem 1.1rem 1.25rem;
  background: #fff;
}
.real-card-title {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .25rem;
  line-height: 1.3;
}
.real-card-meta {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .72rem;
  color: #888;
}
.real-card-location svg { vertical-align: -2px; }
.real-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--light);
  color: var(--dark);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: .18rem .55rem;
  text-transform: uppercase;
}

/* ── Accent bar top of card on hover ── */
.real-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  z-index: 2;
}
.real-card:hover::before { transform: scaleX(1); }

/* ── Empty state ── */
.real-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 0;
  color: #aaa;
  font-size: .9rem;
}

/* ════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════ */
.lb {
  display: none;
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(20,18,18,.96);
}
.lb.lb--open { display: flex; flex-direction: column; }

/* Header bar */
.lb-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lb-header-title {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.lb-header-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--dark);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: .15rem .5rem;
  margin-left: .6rem;
  text-transform: uppercase;
}
.lb-counter {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  color: rgba(255,255,255,.35);
  letter-spacing: 1px;
  margin: 0 auto 0 1.5rem;
}
.lb-close-btn {
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: .25rem .5rem;
  transition: color .2s;
}
.lb-close-btn:hover { color: #fff; }

/* Stage */
.lb-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.lb-img {
  max-width: 92%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 2px;
  box-shadow: 0 8px 60px rgba(0,0,0,.6);
  transition: opacity .22s ease;
  user-select: none;
}
.lb-img.lb-img--fade { opacity: 0; }

.lb-nav-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background .2s, color .2s, border-color .2s;
  z-index: 1;
}
.lb-nav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
}
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

/* Thumbnail strip */
.lb-thumbs {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 8px 1rem;
  overflow-x: auto;
  background: rgba(0,0,0,.5);
  border-top: 1px solid rgba(255,255,255,.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.lb-thumbs::-webkit-scrollbar { height: 3px; }
.lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
.lb-thumb {
  flex-shrink: 0;
  width: 68px; height: 44px;
  object-fit: cover;
  cursor: pointer;
  opacity: .45;
  border: 2px solid transparent;
  border-radius: 1px;
  transition: opacity .2s, border-color .2s;
}
.lb-thumb.lb-thumb--active {
  opacity: 1;
  border-color: var(--accent);
}
.lb-thumb:hover { opacity: .8; }

/* ══════════════════════════════════════════════════════
   RÉALISATIONS — RESPONSIVE
   ══════════════════════════════════════════════════════ */

/* ── Tablet (≤ 991px): filter bar scrolls horizontally ── */
@media (max-width: 991px) {
  .real-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: .4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .real-filter-bar::-webkit-scrollbar { display: none; }
  .real-filter-btn { flex-shrink: 0; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {

  /* Cards */
  .real-card-title  { font-size: .82rem; }
  .real-card-body   { padding: .75rem .85rem 1rem; }
  .real-card-thumb  { aspect-ratio: 4 / 3; }

  /* Always show bottom overlay on touch (hover doesn't fire) */
  .real-card-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(48,45,45,.65) 0%, transparent 55%);
  }
  .real-card-overlay-arrow  { display: none; }
  .real-card-overlay-label  { font-size: .6rem; letter-spacing: 1.5px; }

  /* Filter pills */
  .real-filter-btn { font-size: .62rem; padding: .38rem .9rem; letter-spacing: 1.2px; }

  /* Lightbox: hide thumbs strip */
  .lb-thumbs { display: none; }

  /* Compact header */
  .lb-header       { padding: .7rem 1rem; }
  .lb-header-title {
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
  }
  .lb-header-badge { display: none; }
  .lb-counter      { margin-left: .5rem; font-size: .65rem; }

  /* Large touch targets (min 44×44 per WCAG) */
  .lb-close-btn {
    font-size: 1.8rem;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: .3rem .5rem;
  }
  .lb-nav-btn { width: 44px; height: 44px; font-size: 1.3rem; }
  .lb-prev    { left: .3rem; }
  .lb-next    { right: .3rem; }
  .lb-img     { max-width: 96%; }
}

/* ── Small phones (≤ 480px): 1 card per row ── */
@media (max-width: 480px) {
  .real-grid-item { width: 100% !important; }
  .real-card-thumb { aspect-ratio: 16 / 9; }

  /* Full-bleed lightbox image */
  .lb-img { max-width: 100%; border-radius: 0; box-shadow: none; }
  .lb-stage { padding: 0; }
}