/* ============================================
   ENVIROVIA — Design System
   ============================================ */

:root {
  --color-black: #132528;
  --color-forest: #132529;
  --color-forest-deep: #0e1c1f;
  --color-forest-light: #637674;
  --color-lime: #E0FF4F;
  --color-beige: #ECEABE;
  --color-cream: #FCF6EB;
  --color-white: #FFFFFF;

  --color-line-on-dark: rgba(252, 246, 235, 0.12);
  --color-line-on-light: rgba(19, 37, 40, 0.12);
  --color-text-muted-dark: rgba(252, 246, 235, 0.65);
  --color-text-muted-light: rgba(19, 37, 40, 0.62);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-btn: 8px;
  --radius-pill: 9999px;

  --space-section-small: 48px;
  --space-section-main: 120px;
  --space-section-large: 180px;
  --space-page-top: 120px;
  --site-margin: clamp(20px, 4vw, 64px);

  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --reveal-dur: 900ms;
  --eyebrow-star-color: var(--color-forest-light);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-black);
  background: var(--color-cream);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ============ Dotted pattern backgrounds ============ */
.pattern-dots-dark {
  background-image: radial-gradient(rgba(252, 246, 235, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pattern-dots-light {
  background-image: radial-gradient(rgba(19, 37, 40, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ============ Typography ============ */
.display-xl {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(56px, 7.2vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display-lg {
  font-weight: 500;
  font-size: clamp(44px, 5.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.display-md {
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.display-sm {
  font-weight: 500;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.body-lg {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  font-weight: 400;
}
.body-md {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}
.body-sm { font-size: 13px; line-height: 1.5; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.eyebrow-star {
  color: var(--eyebrow-star-color);
  display: inline-block;
  font-size: 20px;
  line-height: 0;
}
:where(
  .hero,
  .mobile-menu,
  .difference,
  .expertise,
  .expertise-detail,
  .page-hero,
  .project-hero,
  .project-approach,
  .project-tech,
  .about-values,
  .careers-perks,
  .contact-main,
  .cta-card,
  .expdet-cta-card,
  .expdet-method-section,
  .footer
) {
  --eyebrow-star-color: var(--color-lime);
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.005em;
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out), transform 400ms var(--ease-out), border-color 300ms;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn .arrow {
  display: inline-flex;
  transition: transform 400ms var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }

.btn-lime {
  background: var(--color-lime);
  color: var(--color-black);
  border-radius: var(--radius-btn);
}
.btn-lime:hover { background: #eaff6f; }

.btn-cream-outline {
  border-color: rgba(19, 37, 40, 0.25);
  color: var(--color-black);
  background: transparent;
}
.btn-cream-outline:hover {
  background: var(--color-forest);
  color: var(--color-cream);
  border-color: var(--color-forest);
}

.btn-dark-outline {
  border-color: rgba(252, 246, 235, 0.28);
  color: var(--color-cream);
  background: transparent;
}
.btn-dark-outline:hover {
  background: var(--color-lime);
  color: var(--color-black);
  border-color: var(--color-lime);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-black);
}
.btn-white:hover { background: var(--color-lime); }

/* Circle icon buttons */
.icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 300ms var(--ease-out);
  border: 1.2px solid rgba(19, 37, 40, 0.2);
  background: transparent;
  color: var(--color-black);
}
.icon-circle:hover {
  background: var(--color-lime);
  border-color: var(--color-lime);
}
.icon-circle.is-active {
  background: var(--color-lime);
  border-color: var(--color-lime);
}
.icon-circle-dark {
  border-color: rgba(252, 246, 235, 0.3);
  color: var(--color-cream);
}
.icon-circle-dark:hover {
  background: var(--color-lime);
  color: var(--color-black);
  border-color: var(--color-lime);
}

/* ============ Navigation ============ */
.nav {
  position: fixed;
  top: 18px; left: 18px; right: 18px;
  z-index: 100;
  padding: 14px 22px 14px 26px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-cream);
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 18px -6px rgba(19, 37, 40, 0.14);
  transition: background 400ms var(--ease-out), top 300ms, box-shadow 300ms;
}
.nav.is-scrolled {
  top: 10px;
  box-shadow: 0 8px 26px -10px rgba(19, 37, 40, 0.28);
}
.nav-logo {
  height: 20px;
  display: inline-flex;
  align-items: center;
  transition: opacity 200ms;
}
.nav-logo img { height: 100%; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: 44px;
}
.nav-link {
  font-size: 17px;
  font-weight: 400;
  position: relative;
  transition: color 200ms;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-menu-btn {
  display: none;
  padding: 9px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(19, 37, 40, 0.2);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--color-black);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--color-forest);
  display: flex; flex-direction: column;
  padding: 22px var(--site-margin) 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 10px 20px;
  background: var(--color-cream);
  border-radius: var(--radius-btn);
  margin-bottom: 32px;
}
.mobile-menu-header .nav-logo img { filter: none; }
.mobile-menu-close {
  width: 36px; height: 36px;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-black);
  border: 1px solid rgba(19, 37, 40, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-links {
  display: flex; flex-direction: column;
  gap: 4px;
  color: var(--color-cream);
}
.mobile-menu-link {
  font-size: 22px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(252, 246, 235, 0.12);
}
.mobile-menu-cta {
  margin-top: 24px;
  align-self: stretch;
  justify-content: center;
  padding: 16px 22px;
}

/* ============ Reveal animations ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

body.animations-off [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============ Sections ============ */
section {
  position: relative;
}
.section-padded {
  padding: var(--space-section-main) var(--site-margin);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 120px var(--site-margin) 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 2000ms var(--ease-out);
  transform: scale(1.04);
}
.hero-media-poster {
  z-index: 1;
}
.hero-media-video {
  z-index: 2;
  opacity: 0;
  transition:
  opacity 800ms var(--ease-out),
  transform 2000ms var(--ease-out);
}
.hero-media.is-video-ready .hero-media-video {
  opacity: 1;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(19, 37, 40, 0.25) 0%,
    rgba(19, 37, 40, 0.15) 30%,
    rgba(19, 37, 40, 0.55) 60%,
    rgba(19, 37, 40, 0.95) 85%,
    var(--color-black) 100%
  );
}
.hero {
  background: var(--color-black);
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}
.hero-title {
  color: var(--color-cream);
}
.hero-title .line {
  display: block;
  overflow: hidden;
}
.hero-title .line-inner {
  display: block;
  transform: translateY(100%);
  animation: heroLineRise 1100ms var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .line-inner { animation-delay: 200ms; }
.hero-title .line:nth-child(2) .line-inner { animation-delay: 350ms; }
@keyframes heroLineRise {
  to { transform: translateY(0); }
}
body.animations-off .hero-title .line-inner {
  transform: none;
  animation: none;
}

.hero-side {
  padding-bottom: 8px;
  max-width: 420px;
  justify-self: end;
  width: 100%;
}
.hero-side p {
  color: var(--color-lime);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  margin-bottom: 24px;
}
.hero-side .btn {
  background: var(--color-lime);
  color: var(--color-black);
}
.hero-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: var(--site-margin);
  z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 246, 235, 0.6);
  animation: floatDown 2.4s ease-in-out infinite;
}
@keyframes floatDown {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ============================================
   LIME BAND
   ============================================ */
.lime-band {
  background: var(--color-lime);
  color: var(--color-black);
  padding: 72px var(--site-margin);
  overflow: hidden;
  position: relative;
}
.marquee {
  display: flex;
  white-space: nowrap;
  gap: 60px;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 52px);
  letter-spacing: -0.02em;
  animation: marquee 38s linear infinite;
}
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
.marquee .dot {
  color: var(--color-forest);
  font-size: 0.7em;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
body.animations-off .marquee { animation: none; }

/* ============================================
   DIFFERENCE SECTION (accordion)
   ============================================ */
.difference {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.difference-head {
  max-width: 1100px;
  margin-bottom: 72px;
}
.difference-head .eyebrow { color: var(--color-cream); margin-bottom: 20px; }
.difference-head h2 {
  color: var(--color-cream);
}
.difference-head h2 em {
  color: var(--color-lime);
  font-style: normal;
}
.difference-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.accordion {
  border-top: 1px solid var(--color-line-on-dark);
}
.accordion-item {
  border-bottom: 1px solid var(--color-line-on-dark);
}
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 26px 0;
  text-align: left;
  cursor: pointer;
  transition: color 250ms;
}
.accordion-header h3 {
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.accordion-item.is-open .accordion-header h3 { color: var(--color-lime); }
.accordion-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-line-on-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 300ms var(--ease-out);
  color: var(--color-cream);
}
.accordion-item.is-open .accordion-icon {
  background: var(--color-lime);
  color: var(--color-black);
  border-color: var(--color-lime);
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 500ms var(--ease-out);
}
.accordion-body-inner {
  padding-bottom: 26px;
  max-width: 560px;
  color: var(--color-text-muted-dark);
  font-size: 15.5px;
  line-height: 1.65;
}
.difference-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: sticky;
  top: 110px;
  max-height: 800px;
}
.difference-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms var(--ease-out), opacity 350ms ease;
}
.difference-media:hover img { transform: scale(1.04); }

/* ============================================
   EXPERTISE
   ============================================ */
.expertise {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-section-small) var(--site-margin) var(--space-section-main);
}
.expertise-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 1.3fr;
  gap: 72px;
  align-items: start;
}
.expertise-intro .eyebrow { margin-bottom: 20px; }
.expertise-intro h2 {
  margin-bottom: 24px;
  color: var(--color-cream);
}
.expertise-intro p {
  color: var(--color-text-muted-dark);
  margin-bottom: 32px;
  max-width: 380px;
}
.expertise-list {
  border-top: 1px solid var(--color-line-on-dark);
  list-style: none;
}
.expertise-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 28px 20px;
  border-bottom: 1px solid var(--color-line-on-dark);
  color: var(--color-cream);
  transition: background 350ms var(--ease-out), color 350ms var(--ease-out), padding 300ms;
  cursor: pointer;
}
.expertise-item .arrow {
  flex-shrink: 0;
  transition: transform 400ms var(--ease-out);
}
.expertise-item:hover {
  background: var(--color-lime);
  color: var(--color-black);
  padding-left: 28px;
}
.expertise-item:hover .arrow {
  transform: translate(3px, -3px);
}
.expertise-item span {
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 400;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  background: var(--color-cream);
  padding: var(--space-section-main) 0;
  overflow: hidden;
}
.testimonials-head {
  text-align: center;
  padding: 0 var(--site-margin);
  max-width: 900px;
  margin: 0 auto 64px;
}
.testimonials-head .eyebrow { margin-bottom: 20px; }
.testimonials-head h2 { letter-spacing: -0.02em; }

.testimonials-track-wrap {
  position: relative;
  padding-left: var(--site-margin);
  padding-right: var(--site-margin);
}
.testimonials-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 40px;
  scroll-padding-left: var(--site-margin);
}
.testimonials-track::-webkit-scrollbar { display: none; }

.testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 300px;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-line-on-light);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  position: relative;
  transition: background 400ms var(--ease-out), color 400ms var(--ease-out), border-color 400ms;
  display: flex; flex-direction: column;
  min-height: 340px;
}
.testimonial-card.is-active,
.testimonial-card:hover {
  background: var(--color-forest);
  color: var(--color-cream);
  border-color: var(--color-forest);
}
.testimonial-card .quote-mark {
  position: absolute;
  top: 20px; right: 28px;
  font-size: 48px;
  line-height: 1;
  color: rgba(19, 37, 40, 0.2);
  font-family: Georgia, serif;
  transition: color 400ms;
}
.testimonial-card.is-active .quote-mark,
.testimonial-card:hover .quote-mark {
  color: var(--color-lime);
}
.testimonial-text {
  font-size: 14.5px;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 28px;
  margin-top: 12px;
}
.testimonial-foot {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(19, 37, 40, 0.1);
}
.testimonial-card.is-active .testimonial-foot,
.testimonial-card:hover .testimonial-foot {
  border-top-color: rgba(252, 246, 235, 0.15);
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-beige);
}
.testimonial-avatar svg { width: 100%; height: 100%; }
.testimonial-author { font-size: 14px; font-weight: 500; }
.testimonial-role { font-size: 12.5px; opacity: 0.7; }

.testimonials-controls {
  display: flex; gap: 12px;
  padding: 0 var(--site-margin);
  margin-top: 16px;
}

/* ============================================
   LOGOS MARQUEE
   ============================================ */
.logos-strip {
  background: var(--color-cream);
  padding: 48px 0;
  border-top: 1px solid var(--color-line-on-light);
  border-bottom: 1px solid var(--color-line-on-light);
  overflow: hidden;
}
.logos-head {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 var(--site-margin);
}
.logos-marquee-viewport {
  overflow: hidden;
}
.logos-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
}
.logos-marquee-track.is-ready { animation: logos-marquee-run var(--logos-marquee-duration, 40s) linear infinite; }
.logos-marquee-track.is-ready:hover { animation-play-state: paused; }
.logos-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
body.animations-off .logos-marquee-track.is-ready,
body.animations-off .logos-marquee-track { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .logos-marquee-track.is-ready,
  .logos-marquee-track { animation: none; }
}
.logo-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
  opacity: 0.55;
  transition: opacity 300ms;
  flex-shrink: 0;
}
.logo-item img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.logo-item--lg img {
  height: 58px;
  max-width: 200px;
}
.logo-item--sm img {
  height: 32px;
  max-width: 120px;
}
.logo-item:hover { opacity: 1; }
.logo-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: var(--color-line-on-light);
}

/* ============================================
   REALISATIONS
   ============================================ */
.realisations {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.realisations-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
  align-items: end;
}
.realisations-head h2 {
  letter-spacing: -0.025em;
}
.realisations-head p {
  max-width: 380px;
  color: var(--color-text-muted-light);
  font-size: 16px;
  line-height: 1.55;
  padding-bottom: 6px;
  justify-self: end;
}
.realisations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  border-top: 1px solid var(--color-line-on-light);
  padding-top: 48px;
}
.realisation-card {
  display: flex; flex-direction: column;
  cursor: pointer;
  position: relative;
}
.realisation-image {
  aspect-ratio: 16/11;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
}
.realisation-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.realisation-card:hover .realisation-image img { transform: scale(1.05); }
.realisation-image-btn {
  position: absolute;
  bottom: 18px; right: 18px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-black);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: all 400ms var(--ease-out);
}
.realisation-card:hover .realisation-image-btn {
  opacity: 1;
  transform: translateY(0);
}
.realisation-title {
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.realisation-desc {
  color: var(--color-text-muted-light);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 480px;
}
.realisation-tag {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-beige);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-black);
  align-self: flex-start;
}
.realisations-cta {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

/* ============================================
   CAREERS
   ============================================ */
.careers {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin) var(--space-section-main);
}
.careers-card {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 0;
}
.careers-image {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.careers-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms var(--ease-out);
}
.careers-card:hover .careers-image img { transform: scale(1.03); }
.careers-content .eyebrow { margin-bottom: 20px; }
.careers-content h2 { margin-bottom: 20px; letter-spacing: -0.02em; }
.careers-content p {
  color: var(--color-text-muted-light);
  max-width: 420px;
  margin-bottom: 28px;
}

/* ============================================
   CTA (lime band + dark card)
   ============================================ */
.cta-band {
  background: var(--color-lime);
  padding: 80px var(--site-margin);
  position: relative;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(19, 37, 40, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.cta-card {
  position: relative;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) var(--site-margin);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  color: var(--color-cream);
  isolation: isolate;
}
.cta-card-bg {
  position: absolute; inset: 0;
  z-index: -1;
}
.cta-card-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1400ms var(--ease-out);
}
.cta-card:hover .cta-card-bg img { transform: scale(1.08); }
.cta-card-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32, 59, 56, 0.55) 0%, rgba(32, 59, 56, 0.75) 100%);
}
.cta-card .eyebrow { margin-bottom: 24px; color: var(--color-cream); }
.cta-card h2 {
  color: var(--color-cream);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.cta-card p {
  max-width: 520px;
  margin: 0 auto 36px;
  color: rgba(252, 246, 235, 0.85);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 64px var(--site-margin) 0;
  position: relative;
  overflow: hidden;
}
.footer-top {
  display: flex; justify-content: flex-end;
  margin-bottom: 40px;
}
.footer-top-btn {
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  background: var(--color-lime);
  color: var(--color-black);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 300ms var(--ease-out);
}
.footer-top-btn:hover { transform: translateY(-2px); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
}
.footer-left {
  display: flex; flex-direction: column; gap: 32px;
  align-items: flex-start;
}
.footer-logo img { height: 40px; width: auto; }
.footer-contact {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--color-cream);
}
.footer-contact a:hover { color: var(--color-lime); }
.footer-socials {
  display: flex; gap: 12px;
}
.footer-socials .icon-circle { width: 56px; height: 56px; }
.footer-socials .icon-circle svg { width: 22px; height: 22px; }
.footer-nav {
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.footer-nav a {
  font-size: 15px;
  padding: 4px 0;
  transition: color 200ms;
}
.footer-nav a:hover { color: var(--color-lime); }

.footer-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0 24px;
  border-top: 1px solid var(--color-line-on-dark);
  font-size: 12.5px;
  color: rgba(252, 246, 235, 0.6);
}
.footer-meta a:hover { color: var(--color-lime); }
.footer-meta-left { display: flex; gap: 32px; }

.footer-giant {
  position: relative;
  margin: 40px calc(-1 * var(--site-margin)) 0;
  overflow: hidden;
  display: block;
}
.footer-giant img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}

/* ============================================
   TWEAKS PANEL (built-in)
   ============================================ */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 200;
  width: 300px;
  background: var(--color-forest);
  color: var(--color-cream);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-md);
  padding: 20px;
  font-size: 13px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.4);
  display: none;
}
.tweaks-panel.is-open { display: block; }
.tweaks-panel h4 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.tweaks-close {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(252, 246, 235, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.tweak-group {
  margin-bottom: 18px;
}
.tweak-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 246, 235, 0.55);
  margin-bottom: 8px;
}
.tweak-options {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tweak-btn {
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-line-on-dark);
  background: transparent;
  color: var(--color-cream);
  font-size: 12px;
  transition: all 200ms;
}
.tweak-btn:hover { border-color: rgba(252, 246, 235, 0.4); }
.tweak-btn.is-active {
  background: var(--color-lime);
  color: var(--color-black);
  border-color: var(--color-lime);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1046px) {
  .nav-links:not(.mobile-menu-links) { display: none; }
  .nav-menu-btn { display: inline-flex; }
}

@media (max-width: 900px) {
  :root {
    --space-section-main: 80px;
    --space-section-small: 36px;
  }
  .hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 64px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-side { justify-self: start; }
  .difference-grid,
  .expertise-grid,
  .realisations-head,
  .realisations-grid,
  .careers-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .difference-media {
    aspect-ratio: 4/3;
    position: static;
  }
  .testimonial-card {
    flex: 0 0 85%;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-nav { align-items: flex-start; }
  .footer-meta { flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer-meta-left { flex-direction: column; gap: 4px; }
}


/* ============================================
   INNER PAGES — shared
   ============================================ */
.page-hero {
  position: relative;
  min-height: 78vh;
  padding: 160px var(--site-margin) 80px;
  background: var(--color-black);
  color: var(--color-cream);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(19, 37, 40, 0.35) 0%,
    rgba(19, 37, 40, 0.15) 30%,
    rgba(19, 37, 40, 0.55) 65%,
    rgba(19, 37, 40, 0.95) 88%,
    var(--color-black) 100%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: end;
}
.page-hero-inner > * {
  min-width: 0;
}
.page-hero h1 {
  font-size: clamp(56px, 7.5vw, 110px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-lime);
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
}
/* Last resort when a word still doesn't fit at the minimum size (see fitHeroTitles in main.js) */
.page-hero h1.is-squeezed {
  overflow-wrap: anywhere;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--color-cream);
}
.page-hero-side p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-muted-dark);
  margin-bottom: 22px;
}
.page-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-lime);
  font-size: 18px; font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.page-hero-eyebrow span:first-child {
  color: var(--color-lime);
  font-size: 20px;
  line-height: 0;
  transform: translateY(1px);
}

@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .page-hero { min-height: 60vh; padding-top: 120px; }
}

/* ============================================
   PAGE: EXPERTISES
   ============================================ */
.expertises-intro {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.expertises-intro-text h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.expertises-intro-text p { font-size: 17px; line-height: 1.6; color: var(--color-text-muted-light); max-width: 480px; }
.expertises-intro-image {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.expertises-intro-image img { width: 100%; height: 100%; object-fit: cover; }

.expertise-detail {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.expertise-detail + .expertise-detail { padding-top: 0; }
.expertise-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.expertise-detail-grid.is-reverse { direction: rtl; }
.expertise-detail-grid.is-reverse > * { direction: ltr; }
.expertise-detail-image {
  aspect-ratio: 5/4;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.expertise-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.expertise-detail-content .eyebrow { color: var(--color-lime); margin-bottom: 18px; }
.expertise-detail-content h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.expertise-detail-content p {
  font-size: 16px; line-height: 1.65;
  color: var(--color-text-muted-dark);
  margin-bottom: 18px;
}
.expertise-bullets {
  margin-top: 28px;
  display: grid; gap: 12px;
}
.expertise-bullets li {
  display: flex; align-items: flex-start; gap: 18px;
  font-size: 19px;
  list-style: none;
  padding: 22px 0;
  border-top: 1px solid var(--color-line-on-dark);
}
.expertise-bullets li:last-child { border-bottom: 1px solid var(--color-line-on-dark); }
.expertise-bullets svg { flex-shrink: 0; margin-top: 2px; color: var(--color-lime); }

@media (max-width: 900px) {
  .expertises-intro,
  .expertise-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .expertise-detail-grid.is-reverse { direction: ltr; }
}

/* ============================================
   PAGE: EXPERTISE DETAIL (single)
   — réutilise la grammaire visuelle existante
   ============================================ */

/* Layout : aside sticky (gauche) + contenu (droite), fond crème */
.expdet-body {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 96px;
  align-items: start;
}
.expdet-aside { position: sticky; top: 110px; }

/* Carte CTA — même langage que .testimonial-card en état foncé */
.expdet-cta-card {
  background: var(--color-forest);
  color: var(--color-cream);
  border: 1px solid var(--color-forest);
  border-radius: var(--radius-md);
  padding: 40px 36px 36px;
}
.expdet-cta-card .eyebrow { color: var(--color-cream); margin-bottom: 22px; }
.expdet-cta-card h3 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--color-cream);
  text-wrap: balance;
  font-weight: 500;
}
.expdet-cta-card > p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  margin: 0 0 28px;
}
.expdet-cta-card .btn { width: 100%; justify-content: center; }
.expdet-cta-divider {
  height: 1px;
  background: rgba(252,246,235,0.14);
  margin: 28px 0 22px;
}
.expdet-cta-phone {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-cream);
  transition: color .18s ease;
}
.expdet-cta-phone:hover { color: var(--color-lime); }
.expdet-cta-phone svg { flex-shrink: 0; color: var(--color-lime); }
.expdet-cta-phone-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted-dark);
  margin-bottom: 2px;
  font-weight: 500;
}
.expdet-cta-phone-num {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* CONTENU — utilise les classes existantes du site */
.expdet-content > section + section { margin-top: 96px; }

/* ===== JOB PAGE EXTRAS ===== */
.job-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.job-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(225, 250, 79, 0.12);
  border: 1px solid rgba(225, 250, 79, 0.35);
  color: var(--color-cream);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.job-chip svg { color: var(--color-lime); flex-shrink: 0; }

.job-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line-on-light);
  border-bottom: 1px solid var(--color-line-on-light);
  margin: 36px 0 0;
}
.job-summary-grid > div {
  padding: 22px 0;
  border-right: 1px solid var(--color-line-on-light);
  padding-right: 24px;
}
.job-summary-grid > div:nth-child(2n) { border-right: none; padding-left: 24px; padding-right: 0; }
.job-summary-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
  margin-bottom: 8px;
  font-weight: 500;
}
.job-summary-value {
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-forest);
  font-weight: 400;
}

.job-apply-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-line-on-dark);
  border-bottom: 1px solid var(--color-line-on-dark);
}
.job-apply-steps li {
  padding: 28px 28px 28px 0;
  border-right: 1px solid var(--color-line-on-dark);
}
.job-apply-steps li:last-child { border-right: none; padding-right: 0; }
.job-apply-steps li:not(:first-child) { padding-left: 28px; }
.job-apply-step-num {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lime);
  margin-bottom: 14px;
  font-weight: 500;
}
.job-apply-step-body h4 {
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--color-cream);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.job-apply-step-body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-muted-dark);
  margin: 0;
}

@media (max-width: 720px) {
  .job-summary-grid { grid-template-columns: 1fr; }
  .job-summary-grid > div { border-right: none; padding: 18px 0; border-bottom: 1px solid var(--color-line-on-light); }
  .job-summary-grid > div:nth-child(2n) { padding-left: 0; }
  .job-summary-grid > div:last-child { border-bottom: none; }
  .job-apply-steps { grid-template-columns: 1fr; }
  .job-apply-steps li { border-right: none; border-bottom: 1px solid var(--color-line-on-dark); padding: 24px 0 !important; }
  .job-apply-steps li:last-child { border-bottom: none; }
}

/* Lead intro */
.expdet-lead .eyebrow { margin-bottom: 24px; }
.expdet-lead h2 {
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.expdet-lead p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-muted-light);
  max-width: 62ch;
  margin: 0 0 18px;
}

/* Bandeau de chiffres-clés — bordure haut+bas comme les sections du site */
.expdet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid var(--color-line-on-light);
  border-bottom: 1px solid var(--color-line-on-light);
  padding: 36px 0;
  margin-top: 56px;
}
.expdet-stat-num {
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--color-forest);
  margin-bottom: 12px;
}
.expdet-stat-label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-muted-light);
  max-width: 28ch;
}

/* Inclus — réutilise le pattern de .expertise-list (lime sur forest) inversé pour fond crème */
.expdet-section-head { margin-bottom: 32px; }
.expdet-section-head .eyebrow { margin-bottom: 22px; }
.expdet-section-head h3 {
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
}
.expdet-section-head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-muted-light);
  margin: 16px 0 0;
  max-width: 60ch;
}

.expdet-includes {
  border-top: 1px solid var(--color-line-on-light);
  list-style: none;
  margin: 0; padding: 0;
}
.expdet-includes li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-line-on-light);
  font-size: 19px;
  line-height: 1.4;
  color: var(--color-text);
}
.expdet-includes li svg {
  flex-shrink: 0;
  color: var(--color-forest);
  width: 18px; height: 18px;
}

/* Image éditoriale */
.expdet-image {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 96px 0;
}
.expdet-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Méthode — section dark forest avec étapes numérotées (réutilise pattern .difference) */
.expdet-method-section {
  background: var(--color-forest);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 64px 56px;
}
.expdet-method-section .eyebrow { color: var(--color-cream); margin-bottom: 22px; }
.expdet-method-section h3 {
  color: var(--color-cream);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  text-wrap: balance;
  font-weight: 500;
  max-width: 18ch;
}
.expdet-method {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: step;
}
.expdet-method li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--color-line-on-dark);
  align-items: start;
}
.expdet-method li:last-child { border-bottom: 1px solid var(--color-line-on-dark); }
.expdet-method-num {
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--color-lime);
  padding-top: 6px;
  text-transform: uppercase;
}
.expdet-method-num::before {
  counter-increment: step;
  content: "Étape 0" counter(step);
}
.expdet-method-body h4 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  font-weight: 500;
  color: var(--color-cream);
}
.expdet-method-body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-muted-dark);
  margin: 0;
  max-width: 60ch;
}

/* Réalisations associées */
.expdet-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.expdet-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line-on-light);
  transition: transform .25s ease, box-shadow .25s ease;
}
.expdet-related-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -20px rgba(0,0,0,0.25); }
.expdet-related-img { aspect-ratio: 4/3; overflow: hidden; }
.expdet-related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.expdet-related-card:hover .expdet-related-img img { transform: scale(1.04); }
.expdet-related-body { padding: 24px 26px 28px; }
.expdet-related-tag {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted-light);
  margin-bottom: 12px;
  font-weight: 500;
}
.expdet-related-card h4 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.expdet-related-card > .expdet-related-body p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--color-text-muted-light);
  margin: 0;
}

/* Expertises list — two photos at end of section */
.expertise-photos {
  display: grid;
  grid-template-columns: 1fr 2.3fr;
  gap: 24px;
  margin-top: 80px;
}
.expertise-photos figure {
  margin: 0;
  height: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.expertise-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cette expertise, en action (two photos) */
.expdet-action {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
}
.expdet-action-photo {
  margin: 0;
  height: 460px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.expdet-action-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1100px) {
  .expdet-body { grid-template-columns: 1fr; gap: 56px; padding-top: 80px; }
  .expdet-aside { position: static; }
  .expdet-cta-card { max-width: 520px; }
  .expdet-method-section { padding: 48px 32px; }
}
@media (max-width: 720px) {
  .expdet-stats { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .expdet-related-grid { grid-template-columns: 1fr; }
  .expdet-action { grid-template-columns: 1fr; }
  .expdet-action-photo { height: 280px; }
  .expertise-photos { grid-template-columns: 1fr; gap: 16px; margin-top: 56px; }
  .expertise-photos figure { height: 260px; }
  .expdet-method li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .expdet-content > section + section { margin-top: 64px; }
}

/* ============================================
   PAGE: À PROPOS
   ============================================ */
.about-portrait {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
  align-items: center;
}
.about-portrait-image {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.about-portrait-image img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait-text {
  align-self: center;
}
.about-portrait-text h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.about-portrait-text p { font-size: 17px; line-height: 1.65; color: var(--color-text-muted-light); margin-bottom: 18px; max-width: 460px; }

.about-values {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.about-values-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
  margin-bottom: 64px;
}
.about-values-head h2 {
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.about-values-head h2 em { font-style: normal; color: var(--color-lime); }
.about-values-head p { font-size: 16px; color: var(--color-text-muted-dark); max-width: 420px; line-height: 1.6; }
.about-values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.about-value-card {
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  background: rgba(252,246,235,0.02);
  display: flex; flex-direction: column; gap: 16px;
}
.about-value-card .num {
  font-size: 14px; color: var(--color-lime); font-weight: 500;
}
.about-value-card h3 { font-size: 22px; font-weight: 500; line-height: 1.2; }
.about-value-card p { font-size: 14.5px; line-height: 1.55; color: var(--color-text-muted-dark); }

.about-team {
  padding: var(--space-section-main) var(--site-margin);
  background: var(--color-cream);
}
.about-team-head { margin-bottom: 56px; max-width: 720px; }
.about-team-head h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.about-team-head p { font-size: 17px; color: var(--color-text-muted-light); line-height: 1.6; max-width: 540px; }
.about-team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.about-team-card .img {
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  background: #d4c9a2;
}
.about-team-card .img img { width: 100%; height: 100%; object-fit: cover; }
.about-team-card h3 { font-size: 20px; font-weight: 500; }
.about-team-card span { font-size: 14px; color: var(--color-text-muted-light); }

@media (max-width: 900px) {
  .about-portrait { grid-template-columns: 1fr; gap: 32px; padding: 64px var(--site-margin); }
  .about-portrait-text { padding: 0; }
  .about-values-head, .about-values-grid { grid-template-columns: 1fr; }
  .about-team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PAGE: RÉALISATIONS
   ============================================ */
.real-grid-section {
  padding: var(--space-section-main) var(--site-margin);
  background: var(--color-cream);
}
.real-grid-head { margin-bottom: 64px; max-width: 760px; }
.real-grid-head h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.real-grid-head p { font-size: 17px; color: var(--color-text-muted-light); line-height: 1.6; max-width: 540px; }
.real-filters {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px;
}
.real-filter {
  padding: 9px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-line-on-light);
  font-size: 13.5px; font-weight: 500;
  background: transparent; cursor: pointer;
  transition: all 250ms;
}
.real-filter.is-active { background: var(--color-black); color: var(--color-cream); border-color: var(--color-black); }
.real-filter:hover:not(.is-active) { background: rgba(19, 37, 40, 0.04); }
.real-grid-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 40px;
}
.real-card-large {
  display: flex; flex-direction: column; gap: 22px;
}
.real-card-large .img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.real-card-large .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.real-card-large:hover .img img { transform: scale(1.04); }
.real-card-large .img-btn {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: var(--color-cream); color: var(--color-black);
  border-radius: var(--radius-btn);
  display: flex; align-items: center; justify-content: center;
}
.real-card-large h3 {
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.15; letter-spacing: -0.01em;
  font-weight: 500;
}
.real-card-large p { font-size: 15.5px; color: var(--color-text-muted-light); line-height: 1.55; }
.real-card-large .tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-on-light);
  font-size: 12.5px; color: var(--color-black);
  width: fit-content;
}

.real-feature {
  position: relative;
  height: 78vh;
  min-height: 540px;
  overflow: hidden;
  background: var(--color-cream);
  margin: var(--space-section-main) var(--site-margin) 0;
  border-radius: var(--radius-md);
}
.real-feature img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.real-feature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(19, 37, 40, 0.5) 60%, rgba(19, 37, 40, 0.9) 100%);
  padding: 0 56px 56px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--color-cream);
}
.real-feature-overlay h2 {
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--color-lime);
  margin-bottom: 18px; max-width: 800px;
}
.real-feature-overlay p { font-size: 17px; max-width: 540px; color: var(--color-text-muted-dark); margin-bottom: 24px; }

@media (max-width: 900px) {
  .real-grid-list { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================
   PAGE: CARRIÈRES
   ============================================ */
.careers-intro {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.careers-intro-text h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.careers-intro-text h2 em { font-style: normal; }
.careers-intro-text p { font-size: 17px; line-height: 1.6; color: var(--color-text-muted-light); max-width: 460px; margin-bottom: 18px; }
.careers-intro-image {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.careers-intro-image img { width: 100%; height: 100%; object-fit: cover; }

.careers-perks {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.careers-perks-head { margin-bottom: 56px; max-width: 800px; }
.careers-perks-head h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1; letter-spacing: -0.02em;
}
.careers-perks-head h2 em { font-style: normal; color: var(--color-lime); }
.careers-perks-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.careers-perk {
  padding: 28px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line-on-dark);
  background: rgba(252,246,235,0.02);
}
.careers-perk h3 { font-size: 19px; margin-bottom: 10px; font-weight: 500; }
.careers-perk p { font-size: 14.5px; color: var(--color-text-muted-dark); line-height: 1.55; }
.careers-perk .num { font-size: 13px; color: var(--color-lime); margin-bottom: 14px; }

.careers-jobs {
  padding: var(--space-section-main) var(--site-margin);
  background: var(--color-cream);
}
.careers-jobs-head { margin-bottom: 48px; }
.careers-jobs-head h2 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.02em; line-height: 1.05; }
.careers-jobs-list { border-top: 1px solid var(--color-line-on-light); }
.careers-job {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-line-on-light);
  cursor: pointer;
  transition: padding 300ms var(--ease-out), background 300ms;
}
.careers-job:hover {
  padding-left: 16px; padding-right: 16px;
  background: var(--color-lime);
  border-bottom-color: transparent;
}
.careers-job h3 { font-size: 22px; font-weight: 500; }
.careers-job span { font-size: 14px; color: var(--color-text-muted-light); }
.careers-job:hover span { color: rgba(19, 37, 40, 0.7); }
.careers-job .arrow {
  width: 36px; height: 36px;
  border-radius: var(--radius-btn);
  background: var(--color-black); color: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
}
.careers-job:hover .arrow { background: var(--color-cream); color: var(--color-black); }

@media (max-width: 900px) {
  .careers-intro, .careers-perks-grid { grid-template-columns: 1fr; gap: 32px; }
  .careers-job { grid-template-columns: 1fr auto; }
  .careers-job span { display: none; }
}

/* ============================================
   PAGE: CONTACT
   ============================================ */
.contact-main {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 140px var(--site-margin) var(--space-section-main);
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-headline {
  font-size: clamp(48px, 6.5vw, 110px);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--color-lime);
  margin-bottom: 32px;
  text-wrap: balance;
}
.contact-headline em { font-style: normal; color: var(--color-cream); }
.contact-intro p { font-size: 17px; color: var(--color-text-muted-dark); line-height: 1.6; margin-bottom: 18px; max-width: 460px; }
.contact-info {
  margin-top: 48px;
  display: grid; gap: 28px;
  border-top: 1px solid var(--color-line-on-dark);
  padding-top: 36px;
}
.contact-info dt { font-size: 13px; color: var(--color-lime); margin-bottom: 6px; letter-spacing: 0.02em; }
.contact-info dd { font-size: 18px; }
.contact-info a:hover { color: var(--color-lime); }

.contact-form {
  background: rgba(252,246,235,0.04);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-md);
  padding: 36px;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact-form .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.contact-form label { font-size: 13px; color: var(--color-text-muted-dark); }
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: transparent;
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-btn);
  padding: 14px 16px;
  color: var(--color-cream);
  font: inherit;
  font-size: 15px;
  transition: border-color 200ms;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--color-lime);
}
.contact-form select option {
  background: var(--color-cream);
  color: var(--color-black);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .submit-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--color-line-on-dark);
}
.contact-form .submit-row p { font-size: 13px; color: var(--color-text-muted-dark); max-width: 280px; }

@media (max-width: 900px) {
  .contact-main { grid-template-columns: 1fr; gap: 48px; padding-top: 110px; }
  .contact-form { padding: 24px; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* Mobile : empêche un select ou un champ fichier de forcer la largeur de la grille */
.contact-main > *,
.contact-form .row > .field { min-width: 0; }
.contact-form input,
.contact-form textarea,
.contact-form select { width: 100%; min-width: 0; max-width: 100%; }
.contact-form .submit-row { flex-wrap: wrap; gap: 16px; }

/* Message d'etat des formulaires (succes ou erreur), sous le bouton */
.contact-form .form-status {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-lime);
}
.contact-form .form-status.is-error { color: var(--color-cream); }
.contact-form .submit-row .btn { max-width: 100%; }
.contact-form .submit-row .btn:disabled { justify-content: center; }

/* Carrières : formulaire de candidature (réutilise .contact-main / .contact-form) */
.careers-apply {
  position: relative;
  min-height: 0;
  padding: clamp(32px, 6vw, 96px);
  border-radius: var(--radius-md);
}
.careers-apply .contact-headline { font-size: clamp(48px, 5vw, 72px); }
.contact-form input[type="file"] { cursor: pointer; }
.contact-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-cream);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .careers-apply { padding: 32px 20px; }
}


/* Force em/i to share parent typography — only color may differ */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.display-xl em, .display-lg em, .display-md em,
.contact-headline em, .page-hero h1 em,
em, i {
  font-style: normal !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
}


/* ============================================
   PAGE: PROJET (DÉTAIL)
   ============================================ */
.project-hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  padding: 160px var(--site-margin) 80px;
  background: var(--color-black);
  color: var(--color-cream);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.project-hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.project-hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.project-hero-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(19, 37, 40, 0.45) 0%, rgba(19, 37, 40, 0.15) 35%, rgba(19, 37, 40, 0.85) 100%);
}
.project-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; gap: 48px;
}
.project-hero-breadcrumb {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(252, 246, 235, 0.7);
}
.project-hero-breadcrumb a { color: inherit; text-decoration: none; transition: color 200ms; }
.project-hero-breadcrumb a:hover { color: var(--color-lime); }
.project-hero-breadcrumb span { opacity: 0.5; }
.project-hero-content h1 {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 18px 0 0;
  color: var(--color-cream);
}
.project-hero-content h1 em {
  font-style: normal;
  color: var(--color-lime);
}

.project-meta-intro {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.project-meta {
  position: sticky; top: 120px;
  border-top: 1px solid var(--color-line-on-light);
}
.project-meta-list { margin: 0; }
.project-meta-list > div {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-line-on-light);
}
.project-meta-list dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(19, 37, 40, 0.55);
  margin-bottom: 8px;
}
.project-meta-list dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-black);
  font-weight: 500;
}
.project-intro h2 { margin-bottom: 28px; letter-spacing: -0.02em; }
.project-intro-lead {
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-black);
  margin-bottom: 24px;
  font-weight: 400;
}
.project-intro p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(19, 37, 40, 0.78);
}

.project-facts {
  background: var(--color-cream);
  padding: var(--space-section-small) var(--site-margin) var(--space-section-main);
  border-top: 1px solid var(--color-line-on-light);
}
.project-facts-head { margin-bottom: 56px; max-width: 720px; }
.project-facts-head h2 { margin-top: 18px; letter-spacing: -0.02em; }
.project-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.project-fact {
  border-top: 1px solid var(--color-black);
  padding-top: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.project-fact-num {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-black);
}
.project-fact-label {
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(19, 37, 40, 0.7);
  max-width: 240px;
}

.project-approach {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.project-approach-image {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.project-approach-image img { width: 100%; height: 100%; object-fit: cover; }
.project-approach-text h2 { color: var(--color-cream); margin-bottom: 8px; letter-spacing: -0.02em; }

.project-gallery {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.project-gallery-head { margin-bottom: 56px; max-width: 720px; }
.project-gallery-head h2 { margin-top: 18px; letter-spacing: -0.02em; }
.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.project-gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.project-gallery-item-tall { aspect-ratio: 4/3; }
.project-gallery-item-wide { grid-column: span 3; aspect-ratio: 21/9; }
.project-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.project-gallery-item:hover img { transform: scale(1.04); }
.project-gallery-item figcaption {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  font-size: 13px;
  color: var(--color-cream);
  background: rgba(19,37,41,0.78);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 350ms var(--ease-out);
  pointer-events: none;
}
.project-gallery-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.project-tech {
  background: var(--color-black);
  color: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.project-tech-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.project-tech-head h2 { color: var(--color-cream); margin-top: 18px; letter-spacing: -0.02em; }
.project-tech-list { margin: 0; }
.project-tech-list > div {
  padding: 24px 0;
  border-top: 1px solid rgba(252,246,235,0.16);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: baseline;
}
.project-tech-list > div:last-child { border-bottom: 1px solid rgba(252,246,235,0.16); }
.project-tech-list dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lime);
  margin: 0;
}
.project-tech-list dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-cream);
  font-weight: 400;
}

.project-quote {
  background: var(--color-cream);
  padding: var(--space-section-main) var(--site-margin);
}
.project-quote-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
.project-quote-inner .quote-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 140px;
  line-height: 0.6;
  color: var(--color-lime);
  -webkit-text-stroke: 0;
  display: block;
  margin-bottom: -10px;
}
.project-quote-inner blockquote {
  margin: 0 0 36px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--color-black);
  text-wrap: pretty;
}
.project-quote-foot {
  display: flex; align-items: center; gap: 16px;
}

.project-related {
  background: var(--color-cream);
  padding: var(--space-section-small) var(--site-margin) var(--space-section-main);
  border-top: 1px solid var(--color-line-on-light);
}
.project-related-head { margin-bottom: 56px; max-width: 720px; }
.project-related-head h2 { margin-top: 18px; letter-spacing: -0.02em; }

@media (max-width: 1100px) {
  .project-meta-intro { grid-template-columns: 1fr; gap: 48px; }
  .project-meta { position: static; }
  .project-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .project-approach { grid-template-columns: 1fr; gap: 48px; }
  .project-tech-inner { grid-template-columns: 1fr; gap: 48px; }
  .project-tech-list > div { grid-template-columns: 1fr; gap: 8px; }
  .project-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .project-gallery-item, .project-gallery-item-tall { aspect-ratio: 4/3; }
  .project-gallery-item-wide { grid-column: span 2; aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .project-hero { min-height: 70vh; padding: 140px var(--site-margin) 56px; }
  .project-facts-grid { grid-template-columns: 1fr; }
  .project-gallery-grid { grid-template-columns: 1fr; }
  .project-gallery-item, .project-gallery-item-tall, .project-gallery-item-wide { grid-column: span 1; aspect-ratio: 4/3; }
}

.real-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.real-card-link:hover .real-card-large h3 { color: var(--color-forest); }
.real-card-link:hover .img-btn { background: var(--color-lime); color: var(--color-black); }

/* ============================================
   PAGE: RÉALISATIONS — Tableau des mandats
   ============================================ */
.real-table-section {
  padding: var(--space-section-main) var(--site-margin);
  background: var(--color-cream);
}
.real-table-head { max-width: 760px; margin-bottom: 56px; }
.real-table-head h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.real-table-head p {
  font-size: 17px;
  color: var(--color-text-muted-light);
  line-height: 1.6;
  max-width: 560px;
}

.real-table { position: relative; }

.real-table-header,
.real-table-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 1.5fr) minmax(220px, 1.1fr);
  gap: 40px;
  align-items: start;
}
.real-table-header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line-on-light);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
}

.real-table-viewport {
  position: relative;
  max-height: 620px;
  overflow: hidden;
  transition: max-height 720ms var(--ease-out);
}
.real-table.is-open .real-table-viewport { overflow: visible; }

.real-table-row {
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line-on-light);
}
.real-table-row:hover .rt-client-name { color: var(--color-forest); }

.rt-client { display: flex; flex-direction: column; gap: 8px; }
.rt-client-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
  line-height: 1.3;
  transition: color 250ms var(--ease-out);
}
.rt-year {
  font-size: 13px;
  color: var(--color-text-muted-light);
  letter-spacing: 0.04em;
}
.rt-project {
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-black);
}
.rt-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1;
  color: var(--color-black);
  background: #DBE1D2;
  white-space: nowrap;
}

.real-table-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(252, 246, 235, 0) 0%, var(--color-cream) 78%);
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.real-table.is-open .real-table-fade { opacity: 0; }

.real-table-actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.real-table.is-open .real-table-actions { display: none; }

@media (max-width: 860px) {
  .real-table-header { display: none; }
  .real-table-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .rt-project { order: 1; font-weight: 500; font-size: 17px; }
  .rt-client { order: 2; flex-direction: row; align-items: baseline; gap: 10px; }
  .rt-tags { order: 3; margin-top: 4px; }
  .real-table-viewport { max-height: 560px; }
  .real-table-fade { height: 180px; }
}

/* Language switcher */
.nav-lang {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: inherit;
}
.mobile-menu-links .nav-lang {
  margin-top: 8px;
}

/* Legal / privacy policy page */
.legal-page {
  padding: var(--space-page-top) var(--site-margin) var(--space-section-main);
  background: var(--color-cream);
  color: var(--color-black);
}
.legal-page-inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal-page-title {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.legal-tab {
  appearance: none;
  border: 1px solid rgba(19, 37, 40, 0.2);
  background: transparent;
  color: var(--color-black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.legal-tab:hover {
  border-color: rgba(19, 37, 40, 0.45);
}
.legal-tab.is-active {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-cream);
}
.legal-panel-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
.legal-content h2 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  margin: 40px 0 16px;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content p,
.legal-content li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-muted-light);
}
.legal-content p + p {
  margin-top: 14px;
}
.legal-content ul {
  margin: 14px 0 0 1.2em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-content a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content a:hover {
  color: var(--color-forest-light);
}
.legal-updated {
  margin-top: 48px;
  font-size: 14px;
  color: var(--color-text-muted-light);
}


/* Keep a hyphenated word on one line (e.g. photo-interprétation) */
.nowrap { white-space: nowrap; }
/* Below 360px the word no longer fits; let it break rather than overflow the page */
@media (max-width: 359px) { .nowrap { white-space: normal; } }

/* ============================================
   Avis de changement de nom (popup)
   ============================================ */
.rebrand-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--site-margin);
  background: rgba(19, 37, 40, 0.88);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.rebrand-popup[hidden] { display: none; }
.rebrand-popup.is-open { opacity: 1; }
.rebrand-popup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 545px);
  width: 100%;
  max-width: 1253px;
  min-height: 363px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  transform: translateY(16px);
  transition: transform 600ms var(--ease-out);
}
.rebrand-popup.is-open .rebrand-popup-card { transform: none; }
.rebrand-popup-content {
  padding: 50px 47px;
  color: var(--color-black);
}
.rebrand-popup-content h2 {
  font-size: clamp(32px, 3.3vw, 49px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.055em;
  max-width: 754px;
  margin-bottom: 14px;
}
.rebrand-popup-content p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 405px;
  margin-bottom: 28px;
}
.rebrand-popup-media { position: relative; min-height: 220px; }
.rebrand-popup-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
@media (max-width: 900px) {
  .rebrand-popup { align-items: flex-end; }
  .rebrand-popup-card { grid-template-columns: 1fr; min-height: 0; max-height: 100%; overflow-y: auto; }
  .rebrand-popup-media { order: -1; aspect-ratio: 3 / 2; min-height: 0; max-height: 34vh; }
  .rebrand-popup-content { padding: 28px 24px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .rebrand-popup, .rebrand-popup-card { transition: none; }
}