/* ==========================================================================
   Demea Invest - V3 Styles CSS (Mobile-First)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
  /* Colors - Primary */
  --color-primary: #1a2744;
  --color-primary-light: #2a3a5a;
  --color-primary-dark: #0f1a2e;

  /* Colors - Accent */
  --color-accent: #2a8c5a;
  --color-accent-light: #3da86f;
  --color-accent-dark: #1f6b44;

  /* Colors - Key Figures */
  --color-figures-1: #1a2744;
  --color-figures-2: #2a4a6b;
  --color-figures-3: #2a6b5a;
  --color-figures-4: #1a4a3a;

  /* Colors - Neutral */
  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #f5f5f5;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #666666;
  --color-gray-700: #424242;
  --color-gray-800: #333333;
  --color-gray-900: #212121;
  --color-black: #000000;

  /* Typography */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  --header-height: 60px;
  --header-height-scrolled: 60px;
  --mobile-nav-height: 56px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Layout - Side margins */
  --side-margin: 8%;
  --indicator-size: 100px;
}

@media (min-width: 769px) {
  :root {
    --header-height: 80px;
  }
}

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

/* --------------------------------------------------------------------------
   Accessibilite — Skip Link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-base);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Accessibilite — Focus visible sur tous les elements interactifs
   -------------------------------------------------------------------------- */
*:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Accessibilite — Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .section-numbered > .container {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .section-indicator {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .hero-presentation,
  .page-header {
    transform: none !important;
  }

  .fusion-animation,
  .fusion-box,
  .fusion-result {
    animation: none !important;
    transition: none !important;
  }

  .word-cloud-item {
    font-size: 1rem !important;
    opacity: 1 !important;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  overflow-y: scroll;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-800);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 2;
}

@media (min-width: 769px) {
  .container {
    padding: 0 calc(var(--side-margin) * 2);
  }
}

/* --------------------------------------------------------------------------
   Fractal Background Pattern
   -------------------------------------------------------------------------- */
.fractal-bg {
  position: relative;
}

.fractal-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/fractals-bg.svg');
  background-size: 100% auto;
  background-position: 0 0;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  clip-path: var(--fractal-clip, inset(0));
}

/* Sections sur fond blanc/clair */
.fractal-bg--dark::before {
  opacity: var(--fractal-opacity, 0.5);
  filter: invert(42%) sepia(30%) saturate(900%) hue-rotate(105deg) brightness(90%);
}

/* Sections sur fond de couleur */
.fractal-bg--light::before {
  opacity: var(--fractal-opacity, 0.2);
  filter: brightness(0) invert(1);
}

/* Variations par section */
.metiers.fractal-bg::before {
  transform: scaleX(-1);
}

.key-figures.fractal-bg::before {
  transform: scaleY(-1);
}

.esg-section.fractal-bg::before {
  transform: rotate(180deg);
}

.news-latest.fractal-bg::before,
.news-all.fractal-bg::before {
  transform: scaleX(-1) scaleY(-1) translateY(30%);
}

.initiatives-banner.fractal-bg::before {
  transform: scaleX(-1) scaleY(-1);
}

.footer.fractal-bg::before {
  transform: scaleY(-1);
  opacity: 0.2;
  filter: brightness(0) invert(1);
}

.footer.fractal-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-primary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Section Indicators — ACTIVE (v1 sweeping animation)
   -------------------------------------------------------------------------- */
.section-numbered {
  position: relative;
  overflow: hidden;
}

.section-numbered > .container {
  will-change: clip-path;
}

.section-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  z-index: 10;
}

@media (min-width: 769px) {
  .section-indicator {
    display: flex;
  }
}

.section-indicator--left {
  left: 0;
  transform: translateX(0);
}

.section-indicator--right {
  right: 0;
  transform: translateX(0);
}

.section-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--indicator-size);
  height: var(--indicator-size);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  flex-shrink: 0;
}

.section-indicator--light .section-number {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-number-total {
  font-size: 0.25em;
  font-weight: 400;
  opacity: 0.4;
  margin-top: 6px;
}

.section-label-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--indicator-size);
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-xs);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-top: none;
}

.section-indicator--light .section-label-vertical {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  border-top: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Scroll Reveal Animation */
.section-numbered.reveal-ready > .container {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-numbered.revealed > .container {
  opacity: 1;
  transform: translateY(0);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xl);
}

.section-title--light {
  color: var(--color-white);
}

.section-tag {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2xl);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.section-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--spacing-lg) 0;
  margin-top: var(--spacing-md);
}

.section-cta .btn {
  width: auto;
  min-width: 250px;
  max-width: 300px;
}

@media (min-width: 769px) {
  .section-cta {
    width: auto;
    padding: 0;
    margin-top: var(--spacing-xl);
  }

  .section-cta .btn {
    min-width: 0;
    max-width: none;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  height: 48px;
  padding: 0 var(--spacing-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary, .btn-secondary, .btn-outline { min-width: 200px; }

@media (min-width: 769px) {
  .btn {
    height: auto;
    padding: var(--spacing-md) var(--spacing-2xl);
  }

  .btn-primary, .btn-secondary, .btn-outline { min-width: 0; }
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(42, 140, 90, 0.3);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(42, 140, 90, 0.4);
}

.btn-secondary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(26, 39, 68, 0.3);
}

.btn-secondary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(26, 39, 68, 0.4);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-outline:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(26, 39, 68, 0.4);
}

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
  .header {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.header.scrolled {
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height-scrolled);
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
  .header.scrolled {
    top: 15px;
    left: 200px;
    right: 200px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .header.scrolled {
    left: 80px;
    right: 80px;
  }
}

.header.scrolled .nav {
  display: flex;
  justify-content: center;
  padding: 0 var(--spacing-md);
}

@media (min-width: 769px) {
  .header.scrolled .nav {
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}

@media (min-width: 769px) {
  .header.scrolled .nav-right--desktop {
    display: contents;
  }

  .header.scrolled .menu {
    justify-self: center;
  }

  .header.scrolled .lang-selector {
    justify-self: end;
  }
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-lg);
}

@media (min-width: 769px) {
  .nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding: 0 var(--side-margin);
  }

  .nav .menu {
    justify-self: center;
  }

  .nav .lang-selector {
    justify-self: end;
  }
}

.logo {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  padding-top: 15px;
  transition: padding var(--transition-base);
}

.header.scrolled .logo {
  padding-top: 0;
  align-items: center;
}

.logo-img {
  height: 45px;
  width: auto;
  filter: brightness(0) invert(1);
  transform-origin: top center;
  transition: filter var(--transition-base), height var(--transition-base);
}

.header.scrolled .logo-img {
  height: 37px;
  filter: none;
}

.footer-logo .logo-img {
  height: 32px;
  filter: brightness(0) invert(1);
}

.menu {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 1;
}

.menu > li {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.menu > li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 769px) {
  .menu {
    display: flex;
    flex: initial;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-lg);
  }

  .menu > li {
    padding: 0;
    border-bottom: none;
  }

  .menu > li:first-child {
    border-top: none;
  }
}

/* Desktop nav: display contents inside header grid */
.nav-right--desktop {
  display: none;
}
@media (min-width: 769px) {
  .nav-right--desktop {
    display: contents;
  }
}

/* Mobile overlay: full-screen, outside header stacking context */
.nav-right--mobile {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background: rgb(26, 39, 68);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.4s;
  padding: var(--spacing-3xl);
  padding-bottom: calc(var(--mobile-nav-height) + var(--spacing-xl));
}
@media (min-width: 769px) {
  .nav-right--mobile {
    display: none !important;
  }
}

.nav-right--mobile.active {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

.menu-link {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  padding: var(--spacing-xs) 0;
  width: auto;
  text-align: left;
  text-shadow: none;
  transition: color var(--transition-base), text-shadow var(--transition-base);
}

@media (min-width: 769px) {
  .menu-link {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    width: auto;
    text-align: center;
    white-space: nowrap;
  }
}

.header.scrolled .menu-link {
  color: var(--color-gray-700);
  text-shadow: none;
}

.menu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent-light);
  transition: width var(--transition-base), background-color var(--transition-base);
  display: none;
}

@media (min-width: 769px) {
  .menu-link::after {
    display: block;
  }
}

.header.scrolled .menu-link::after {
  background-color: var(--color-accent);
}

.menu-link:hover,
.menu-link.active {
  color: var(--color-white);
}

.header.scrolled .menu-link:hover,
.header.scrolled .menu-link.active {
  color: var(--color-primary);
}

.menu-link:hover::after,
.menu-link.active::after {
  width: 100%;
}

/* Dropdown Menu — Vertical dropdown sous l'entrée parente */
.menu-item-dropdown {
  position: relative;
}

@media (min-width: 769px) {
  .menu-item-dropdown {
    /* Étendre la zone hover sous le lien via pseudo-element (pas de padding pour garder l'alignement) */
  }
  .menu-item-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--spacing-md);
  }
}

.dropdown-menu {
  position: static;
  transform: none;
  min-width: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: var(--spacing-sm);
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

@media (min-width: 769px) {
  .dropdown-menu {
    position: absolute;
    /* Juste sous le header, léger chevauchement */
    top: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-sm) 0;
    max-height: none;
    overflow: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  }
}

.menu-item-dropdown.dropdown-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  max-height: 300px;
}

.menu-item-dropdown:hover .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: none;
}

.menu-item-dropdown.dropdown-open:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 769px) {
  .menu-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .menu-item-dropdown.dropdown-open .dropdown-menu {
    max-height: none;
  }

  .menu-item-dropdown.dropdown-open:hover .dropdown-menu {
    transform: translateX(-50%) translateY(0);
  }
}

.dropdown-link {
  display: block;
  padding: var(--spacing-xs) 0;
  padding-left: var(--spacing-xl);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-align: left;
}

.dropdown-link:hover {
  color: var(--color-white);
}

@media (min-width: 769px) {
  .dropdown-link {
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-xs);
    color: var(--color-gray-700);
    text-align: left;
  }

  .dropdown-link:hover {
    background: var(--color-gray-100);
    color: var(--color-accent);
  }
}

/* Scrolled header: ensure dropdown visible */
.header.scrolled {
  overflow: visible;
}

/* Header non-scrolled (transparent/dark) : dropdown style */
@media (min-width: 769px) {
  .header:not(.scrolled) .dropdown-menu {
    background: rgba(26, 39, 68, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .header:not(.scrolled) .dropdown-link {
    color: rgba(255, 255, 255, 0.8);
  }

  .header:not(.scrolled) .dropdown-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
  }
}

/* Language Selector — inside .menu-overlay-top on mobile, grid child on desktop */
.lang-selector {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

@media (min-width: 769px) {
  .lang-selector {
    justify-content: flex-start;
  }
}

.lang-pill {
  position: absolute;
  left: 0;
  width: 36px;
  height: 36px;
  background-color: var(--color-accent);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

@media (min-width: 769px) {
  .lang-pill {
    width: 28px;
    height: 28px;
  }
}

.lang-btn {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-base);
}

@media (min-width: 769px) {
  .lang-btn {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }
}

.lang-btn.active {
  color: var(--color-white);
}

.lang-btn:hover:not(.active) {
  color: rgba(255, 255, 255, 0.8);
}

.lang-selector[data-active="fr"] .lang-pill,
.lang-selector:not([data-active]) .lang-pill {
  transform: translateX(0);
}

.lang-selector[data-active="en"] .lang-pill {
  transform: translateX(36px);
}

@media (min-width: 769px) {
  .lang-selector[data-active="en"] .lang-pill {
    transform: translateX(28px);
  }
}

.header.scrolled .lang-btn {
  color: var(--color-gray-700);
}

.header.scrolled .lang-btn.active {
  color: var(--color-white);
}

.header.scrolled .lang-btn:hover:not(.active) {
  color: var(--color-primary);
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
}

.header .menu-toggle { display: none; }

.mobile-nav-bar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-nav-height);
  background-color: var(--color-primary);
  justify-content: center;
  align-items: center;
  z-index: 10002;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

@media (min-width: 769px) {
  .mobile-nav-bar {
    display: none;
  }
}

.mobile-nav-bar .menu-toggle {
  display: flex;
  width: 56px; height: 56px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  transition: background var(--transition-base);
  margin-top: -40px;
}

.mobile-nav-bar .menu-toggle.active { background: var(--color-accent); }

.hamburger,
.hamburger::before,
.hamburger::after {
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  position: absolute;
  transition: all var(--transition-base);
}

.header.scrolled .hamburger,
.header.scrolled .hamburger::before,
.header.scrolled .hamburger::after {
  background-color: var(--color-primary);
}

.mobile-nav-bar .hamburger,
.mobile-nav-bar .hamburger::before,
.mobile-nav-bar .hamburger::after {
  background-color: var(--color-white);
}

.hamburger {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hamburger::before,
.hamburger::after {
  content: '';
  left: 0;
}

.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

.menu-toggle.active .hamburger {
  background-color: transparent;
}

.menu-toggle.active .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle.active .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   SECTION 1: Hero Presentation (fond bleu fonce)
   -------------------------------------------------------------------------- */
.hero-presentation {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* will-change: transform creates a containing block that traps fixed elements — desktop only */
@media (min-width: 769px) {
  .hero-presentation {
    will-change: transform;
  }
}

/* Content sections slide over the hero — desktop only (on mobile, z-index conflicts with fixed menu) */
@media (min-width: 769px) {
  .hero-presentation ~ section,
  .hero-presentation ~ div {
    position: relative;
    z-index: 1;
  }
}

.hero-presentation-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 40%, #1a3344 70%, var(--color-accent-dark) 100%);
}

.hero-presentation-overlay {
  position: absolute;
  inset: 0;
  background-image: url('../images/fractals-bg.svg');
  background-size: 120% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  filter: brightness(0) invert(1);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 100%);
}

.hero-presentation-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  align-items: center;
  width: 100%;
  padding: calc(var(--header-height) + var(--spacing-2xl)) 30px calc(var(--mobile-nav-height) + var(--spacing-xl));
}

@media (min-width: 769px) {
  .hero-presentation-content {
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-4xl);
    padding: calc(var(--header-height) + var(--spacing-4xl)) calc(var(--side-margin) * 2) var(--spacing-4xl);
  }
}

.hero-main-title {
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--spacing-2xl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

@media (min-width: 769px) {
  .hero-main-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    text-align: left;
  }
}

.title-accent {
  color: var(--color-accent-light);
}

.hero-paragraph {
  font-size: var(--font-size-sm);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

@media (min-width: 769px) {
  .hero-paragraph {
    font-size: var(--font-size-lg);
    text-align: left;
  }
}

.hero-paragraph:last-child {
  margin-bottom: 0;
}

.hero-paragraph--bold {
  font-weight: 500;
}

/* WYSIWYG hero — les <p> du CKEditor héritent du style .hero-paragraph */
.hero-text p {
  font-size: var(--font-size-sm);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}
@media (min-width: 769px) {
  .hero-text p {
    font-size: var(--font-size-lg);
    text-align: left;
  }
}
.hero-text p:last-child {
  margin-bottom: 0;
}
.hero-text p strong {
  font-weight: 500;
}

.hero-text-side {
  position: relative;
  z-index: 2;
}

/* Fusion Animation — Horizontal */
.hero-anim-side {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  order: -1;
}

@media (min-width: 769px) {
  .hero-anim-side {
    order: 0;
  }
}

/* ==========================================================================
   FUSION ANIMATION — full rewrite (state-driven, JS toggles .is-* on .fusion-animation)
   --------------------------------------------------------------------------
   Scenario (loops):
   1. enter      : two logo-boxes slide in from left & right to their final spots
   2. (hold ~1s) : boxes stay frozen, side by side
   3. clear      : the text inside each box fades out, only the outlines remain
   4. merge      : the two outlines slide together, overlap and become one
   5. expand     : the single square morphs/grows into a wide rectangle
   6. logo       : the Demea Invest logo fades in inside the rectangle, with a slow zoom
   7. (fade out) : everything fades, then the cycle restarts

   Geometry: the two boxes AND the result are centered with the exact same mechanic —
   left:50%; top:50%; transform: translate(calc(-50% + var(--x)), -50%) — so when --x
   reaches 0 they coincide to the pixel. At is-merge the two overlapped boxes approach,
   overlap and grow into the rectangle simultaneously (one single move).
   Sizes/gap are driven by CSS vars that change per breakpoint only (no left/right
   asymmetry, no margin hacks).
   ========================================================================== */

.fusion-animation {
  --box: 126px;          /* side of each square (base +15%) */
  --gap: 140px;          /* center-to-center distance of the two boxes when side by side */
  --rect-w: 340px;       /* width of the final rectangle (matches previous screenshot) */
  --rect-h: 200px;       /* height of the final rectangle */
  position: relative;
  width: 340px;
  height: 300px;
}

@media (min-width: 769px) {
  .fusion-animation {
    --box: 161px;        /* +15% from 140px */
    --gap: 178px;
    --rect-w: 460px;     /* wide rectangle as in the DEMEA INVEST screenshot */
    --rect-h: 260px;
    width: 460px;
    height: 400px;
  }
}

/* --- The two logo boxes ------------------------------------------------- */
.fusion-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--box);
  height: var(--box);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform-origin: center center;
  /* off-screen start position; --x is set per side, animated by JS state classes.
     Boxes also fade in (alpha 0 -> 1) while they slide in. */
  opacity: 0;
  transform: translate(calc(-50% + var(--x, 0px)), -50%);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              width 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              height 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.6s ease,
              border-color 0.6s ease,
              box-shadow 1.2s ease,
              opacity 1.4s ease;
}

/* Classes are CUMULATIVE: once added they stay until the cycle resets.
   So .is-logo also has .is-enter .is-clear .is-merge on the element. */

/* Reset frame — kill all transitions so the whole animation snaps back to its
   initial state INSTANTLY (boxes off-screen, full size, no logo) without playing
   the sequence in reverse. JS adds .is-reset, forces a reflow, then removes it. */
.fusion-animation.is-reset,
.fusion-animation.is-reset * {
  transition: none !important;
}

/* Start fully OUTSIDE the viewport, whatever the screen width (100vw guarantees
   the box is past the window edge), then they rush in to meet at the same moment. */
.fusion-box--left  { --x: -100vw; }   /* start off the left edge of the window  */
.fusion-box--right { --x:  100vw; }   /* start off the right edge of the window */

/* Phase 1 — slide in to their resting spots, separated by --gap, fading in (alpha 0->1) */
.fusion-animation.is-enter .fusion-box--left  { --x: calc(var(--gap) / -2); opacity: 1; }
.fusion-animation.is-enter .fusion-box--right { --x: calc(var(--gap) /  2); opacity: 1; }

/* Phase 2 — text inside fades out, only the box outline remains (from is-clear on) */
.fusion-animation.is-clear .fusion-box {
  background: rgba(255, 255, 255, 0);
}
.fusion-animation.is-clear .fusion-box-name,
.fusion-animation.is-clear .fusion-box-sub {
  opacity: 0;
}

/* Phase 3 — MERGE: the two outlines move to the exact center (--x: 0) AND grow into
   the rectangle AT THE SAME TIME — one single simultaneous move (approach + overlap +
   grow). Same center & size => they read as one shape morphing into the rectangle. */
.fusion-animation.is-merge .fusion-box--left,
.fusion-animation.is-merge .fusion-box--right {
  --x: 0px;
}
.fusion-animation.is-merge .fusion-box {
  width: var(--rect-w);
  height: var(--rect-h);
  background: rgba(255, 255, 255, 0);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.12),
    0 0 48px rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.25);
}

.fusion-box-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
}

@media (min-width: 769px) {
  .fusion-box-name { font-size: var(--font-size-xl); }
}

.fusion-box-sub {
  font-size: var(--font-size-xs);
  color: var(--color-white);
  margin-top: var(--spacing-xs);
  letter-spacing: 0.05em;
  text-align: center;
  transition: opacity 0.5s ease;
}

/* --- The result = transparent logo holder, sized like the rectangle, centered.
   It carries NO border/background of its own (the two morphing boxes draw the frame),
   so there is never a duplicate outline. It just holds the Demea logo centered. */
.fusion-result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rect-w);
  height: var(--rect-h);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Phase 6 — fade the WHOLE composition out as a single object (frame + logo together)
   before the loop restarts. Faded on the container so nothing desyncs. */
.fusion-animation.is-out {
  opacity: 0;
  transition: opacity 1s ease-out, transform 5s ease-out;
}

/* --- The Demea logo inside the result ---------------------------------- */
.fusion-logo {
  width: 62%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fusion-logo-svg { width: 100%; height: auto; }

.fusion-logo-group {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.96);
  transform-origin: center center;
  transition: opacity 0.8s ease-out, filter 0.8s ease-out, transform 0.8s ease-out;
}

/* Phase 6 — logo reveals (deblur + fade) */
.fusion-animation.is-logo .fusion-logo-group {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: opacity 0.8s ease-out, filter 0.8s ease-out, transform 0.8s ease-out;
}

/* Phase 6 — slow gentle zoom on the WHOLE final composition: the rectangle frame
   AND the Demea logo grow together (scale the container, from its center). */
.fusion-animation {
  transform-origin: center center;
  transition: transform 5s ease-out;
}
.fusion-animation.is-logo {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   SECTION 2: Metiers & Expertises
   -------------------------------------------------------------------------- */
.metiers {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-gray-100);
}

@media (min-width: 769px) {
  .metiers {
    padding: var(--spacing-4xl) 0;
  }
}

.metiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 769px) {
  .metiers-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4xl);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .metiers-grid { gap: var(--spacing-2xl); }
}

.metiers-col {
  display: flex;
  flex-direction: column;
  /* min-width:0 empêche la largeur min-content des mots (nowrap, taille animée
     en JS) d'élargir la piste de grille et de décaler le titre/intro */
  min-width: 0;
}

.metiers-intro {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: var(--spacing-2xl);
}

/* Word Cloud — Vertical dock magnification */
.word-cloud {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centré verticalement : la place vide de la min-height se répartit en haut
     ET en bas, donc la translation verticale du dock (1er/dernier mot grossi)
     reste dans le conteneur au lieu d'être rognée par overflow:hidden en haut */
  justify-content: center;
  gap: 0;
  padding: 10px 0;
  min-height: 180px;
  /* largeur figée sur la colonne : les mots (nowrap, font-size animée) débordent
     et sont rognés au lieu d'élargir le conteneur et de pousser les textes voisins */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 769px) {
  .word-cloud {
    min-height: 280px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .word-cloud { min-height: 220px; }
}

.metiers-cta {
  margin-top: auto;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xs);
  text-align: center;
}

/* CTA bloc-level optionnel, centré sous le grid metiers/secteurs */
.metiers-cta-extra {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-2xl);
}

.word-cloud-item {
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  display: block;
  text-align: center;
  line-height: 1.3;
  will-change: transform, opacity;
  transition: none;
  transform-origin: top center;
  backface-visibility: hidden;
}

/* Column color themes — blue (métiers) / green (secteurs) */
.metiers-col--blue .section-title { color: var(--color-primary); }
.metiers-col--blue .metiers-intro { color: var(--color-primary); opacity: 0.7; }
.metiers-col--green .section-title { color: var(--color-accent); }
.metiers-col--green .metiers-intro { color: var(--color-accent); opacity: 0.7; }

/* Cloud color themes — opacity handled by JS */
#wordCloudMetiers .word-cloud-item { color: var(--color-primary); }
#wordCloudSecteurs .word-cloud-item { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   SECTION 3: Chiffres Cles — Masonry
   -------------------------------------------------------------------------- */
.key-figures {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #1a6b44 0%, #1f4a3a 25%, #1a2744 55%, #0f1a2e 100%);
}

@media (min-width: 769px) {
  .key-figures {
    padding: var(--spacing-4xl) 0;
  }
}

.key-figures .section-title {
  text-align: center;
}

.figures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: var(--spacing-sm);
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: auto;
}

@media (min-width: 769px) {
  .figures-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-md);
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .figures-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    aspect-ratio: auto;
  }
}

.figure-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.figure-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.4s ease;
}

/* .figure-card:hover::before {
  background: rgba(255, 255, 255, 0.1);
}

.figure-card:hover {
  transform: scale(1.02);
} */

/* Masonry: 4 different colors */
.figure-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 1;
  background: linear-gradient(135deg, var(--color-figures-1) 0%, #0f1a2e 100%);
}

@media (min-width: 769px) {
  .figure-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .figure-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.figure-card:nth-child(2) {
  grid-column: span 2;
  grid-row: span 1;
  background: linear-gradient(135deg, #5da674 0%, #315a4c 100%);
}

@media (min-width: 769px) {
  .figure-card:nth-child(2) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.figure-card:nth-child(3) {
  grid-column: span 1;
  grid-row: span 1;
  background: linear-gradient(135deg, var(--color-figures-4) 0%, #1f5a4a 100%);
}

.figure-card:nth-child(4) {
  grid-column: span 1;
  grid-row: span 1;
  background: linear-gradient(135deg, var(--color-figures-2) 0%, #3a6a9b 100%);
}

@media (min-width: 769px) and (max-width: 1024px) {
  .figure-card:nth-child(4) { grid-column: span 2; }
}

.figure-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 1;
}

.figure-icon svg {
  width: 100%;
  height: 100%;
}

.figure-card:nth-child(1) .figure-icon {
  width: 64px;
  height: 64px;
}

.figure-number {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

@media (min-width: 769px) {
  .figure-number {
    font-size: var(--font-size-5xl);
  }
}

.figure-card:nth-child(1) .figure-number {
  font-size: var(--font-size-5xl);
}

@media (min-width: 769px) {
  .figure-card:nth-child(1) .figure-number {
    font-size: clamp(4rem, 10vw, 7rem);
  }
}

.figure-label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   SECTION 4: Portfolio — Hero Split-Screen Slider
   -------------------------------------------------------------------------- */
.portfolio-slider {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background-color: var(--color-primary-dark);
}

.portfolio-slider .slider-container {
  position: relative;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease-in-out, visibility 800ms ease-in-out;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-left {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.hero-left-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 8s ease-out;
}

.slide.active .hero-left-bg {
  transform: scale(1.08);
}

.hero-left-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26, 39, 68, 0.9) 0%, rgba(26, 39, 68, 0.88) 65%, rgba(24, 50, 52, 0.88) 85%, rgba(31, 70, 58, 0.85) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero-left-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: var(--spacing-4xl);
  padding-top: calc(var(--header-height) + var(--spacing-3xl));
  padding-left: calc(var(--indicator-size, 100px) + var(--spacing-3xl) + 60px);
  z-index: 1;
}

.hero-tagline {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-accent-light);
  margin-bottom: var(--spacing-xl);
}

.hero-title-masked {
  position: relative;
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: var(--spacing-xl);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    var(--bg-image);
  background-size: 100vw auto;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: contrast(1.1) brightness(1.1);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transition: background-size 8s ease-out;
}

.slide.active .hero-title-masked {
  background-size: 108vw auto;
}

.hero-desc {
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 400px;
  margin-bottom: var(--spacing-xl);
}

.hero-right {
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.hero-right-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 200%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 8s ease-out;
}

.slide.active .hero-right-bg {
  transform: scale(1.08);
}

.hero-right-content {
  position: absolute;
  bottom: var(--spacing-3xl);
  right: var(--spacing-3xl);
  z-index: 1;
}

.hero-category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
}

/* Mobile-only category badge inside hero-left-content */
.hero-category--mobile {
  display: inline-block;
  margin-bottom: var(--spacing-sm);
}

@media (min-width: 769px) {
  .hero-category--mobile {
    display: none;
  }
}

/* Hide desktop category on mobile */
@media (max-width: 768px) {
  .hero-right-content {
    display: none;
  }
}

.btn-hero { width: fit-content; }

.btn-hero-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-hero:hover .btn-hero-icon {
  transform: translateX(5px);
}

/* Slider Navigation */
.slider-nav {
  position: absolute;
  bottom: var(--spacing-2xl);
  left: 25%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--spacing-sm);
  z-index: 10;
}

.slider-dot {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.3);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.slider-dot:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.slider-dot.active {
  background-color: rgba(255, 255, 255, 0.3);
}

.dot-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}

.slider-dot.active .dot-progress {
  animation: progressBar 6s linear forwards;
}

@keyframes progressBar {
  from { width: 0; }
  to { width: 100%; }
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider-arrow:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.slider-prev { left: calc(var(--indicator-size, 100px) + var(--spacing-md)); }
.slider-next { left: calc(50% - var(--spacing-xl) - 50px); }

/* Portfolio CTA below slider */
.portfolio-slider-bottom {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 var(--spacing-xl);
  z-index: 10;
}

/* --------------------------------------------------------------------------
   SECTION 5: ESG — Photo + Texte
   -------------------------------------------------------------------------- */
.esg-section {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-white);
}

@media (min-width: 769px) {
  .esg-section {
    padding: var(--spacing-4xl) 0;
  }
}

.esg-section .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

@media (min-width: 769px) {
  .esg-section .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .esg-section .container { gap: var(--spacing-2xl); }
}

.esg-content {
  padding-right: 0;
  order: 2;
}

@media (min-width: 769px) {
  .esg-content {
    /* image à gauche, texte à droite (même ligne de grille) */
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
    padding-left: var(--spacing-xl);
    order: 0;
  }
}

.esg-content .section-title {
  line-height: 1.4;
}

.esg-text {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.esg-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  order: 1;
}

@media (min-width: 769px) {
  .esg-image {
    grid-column: 1;
    grid-row: 1;
    order: 0;
  }
}

.esg-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.esg-cta {
  grid-column: 1 / -1;
  order: 3;
}

@media (min-width: 769px) {
  .esg-cta {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   SECTION 6: News
   -------------------------------------------------------------------------- */
.news-latest {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-gray-100);
}

@media (min-width: 769px) {
  .news-latest {
    padding: var(--spacing-4xl) 0;
  }
}

.news-latest .section-header {
  justify-content: center;
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 769px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Carte entièrement cliquable : pseudo du lien "Lire la suite" qui couvre la card.
   Le texte du lien reste affiché, c'est juste sa zone de hit qui s'étend. */
.news-card .news-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.news-card:hover .news-image img { transform: scale(1.08); }
.news-card:hover .news-title { color: var(--color-accent); }
.news-card:hover .news-link { color: var(--color-accent-dark); }

.news-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-date {
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-white);
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
}

.news-content { padding: var(--spacing-lg); }

.news-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.news-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
  transition: color var(--transition-base);
}

.news-excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.news-link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.news-link:hover { color: var(--color-accent-dark); }

/* News All — Full listing bloc (toutes les actualités) */
.news-all {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-gray-100);
}

@media (min-width: 769px) {
  .news-all {
    padding: var(--spacing-4xl) 0;
  }
}

.news-all .section-header {
  justify-content: center;
}

.news-all.fractal-bg::before {
  background-size: cover;
}

/* Ombre plus marquee sur la page actu pour detacher les cartes du fond gris */
.news-all .news-card {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.news-card--hidden {
  display: none;
}

.news-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

/* --------------------------------------------------------------------------
   Initiatives Banner
   -------------------------------------------------------------------------- */
.initiatives-banner {
  display: flex;
  /* mobile : liens empilés (pas assez de place côte à côte) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  min-height: 180px;
  padding: var(--spacing-xl) var(--spacing-2xl);
  background-color: var(--color-accent);
}

@media (min-width: 769px) {
  .initiatives-banner {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-4xl);
    min-height: 200px;
  }
}

.initiative-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* mobile : pleine largeur, pas d'étirement vertical (empilés) */
  flex: 0 0 auto;
  width: 100%;
  max-width: 400px;
  min-height: 100px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  overflow: hidden;
}

@media (min-width: 769px) {
  .initiative-link {
    flex: 1;
    width: auto;
    padding: var(--spacing-md) var(--spacing-2xl);
  }
}

.initiative-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.initiative-link:hover::before { left: 100%; }

.initiative-link:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(26, 39, 68, 0.4);
}

.initiative-logo-img {
  height: 25px;
  width: auto;
  transition: all var(--transition-base);
}

@media (min-width: 769px) {
  .initiative-logo-img {
    height: 40px;
  }
}

.initiative-link[data-initiative="faim"] .initiative-logo-img {
  filter: brightness(0) invert(1);
}

.initiative-link[data-initiative="paris-fonds-vert"] .initiative-logo-img {
  filter: none;
}

.initiative-separator {
  width: 1px;
  height: 35px;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 var(--spacing-sm);
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .initiative-separator {
    height: 50px;
    margin: 0 var(--spacing-lg);
  }
}

.initiative-description {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
}

@media (min-width: 769px) {
  .initiative-description {
    font-size: var(--font-size-sm);
  }
}

/* mobile : zone logo calée sur le plus grand logo (~50px @25px de haut) pour
   aligner les descriptions empilées ; espace logo→séparateur = espace
   bordure gauche→logo (= padding gauche du lien, var(--spacing-md)) */
@media (max-width: 768px) {
  .initiative-logo-img {
    width: 51px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: left center;
  }
  .initiative-separator {
    margin-left: var(--spacing-md);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--spacing-xl) 0 var(--spacing-md);
  padding-bottom: calc(var(--mobile-nav-height) + var(--spacing-xl));
}

@media (min-width: 769px) {
  .footer {
    padding-bottom: var(--spacing-md);
  }
}

.footer > .container {
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 769px) {
  .footer-grid {
    flex-direction: row;
    gap: var(--spacing-2xl);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer-grid {
    flex-direction: column;
    gap: var(--spacing-xl);
  }
}

.footer-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
}

@media (min-width: 769px) {
  .footer-left {
    align-items: flex-start;
    text-align: left;
  }
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.footer-logo { margin-bottom: 0; }

.footer-nav {
  display: none;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  flex-wrap: wrap;
}

@media (min-width: 769px) {
  .footer-nav {
    display: flex;
    gap: var(--spacing-2xl);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer-nav { gap: var(--spacing-lg); }
}

.footer-nav a {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.footer-nav a:hover { color: var(--color-white); }

span.menu-link {
  cursor: default;
}

.footer-nav-group {
  position: relative;
}

.footer-nav-parent {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  cursor: default;
}

.footer-nav-children {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  white-space: nowrap;
}

.footer-nav-child {
  opacity: 0.6;
}

/* LinkedIn icon in footer — in sitemap nav */
.footer-linkedin {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.footer-linkedin:hover {
  background-color: var(--color-accent);
}

.footer-offices {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: var(--spacing-sm);
  white-space: normal;
}

@media (min-width: 769px) {
  .footer-offices {
    white-space: nowrap;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer-offices { flex-wrap: wrap; }
}

.footer-offices-label {
  font-weight: 600;
  color: var(--color-white);
}

.footer-address {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.footer-address p { margin-bottom: var(--spacing-xs); }
.footer-address p:last-child { margin-bottom: 0; }
.footer-address .footer-line2 { margin-top: var(--spacing-md); }

.footer-address a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.footer-address a:hover { color: var(--color-white); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-sm);
  gap: var(--spacing-md);
  text-align: center;
}

@media (min-width: 769px) {
  .footer-bottom {
    flex-direction: row;
    gap: 0;
    text-align: left;
  }
}

.footer-copyright {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
}

@media (min-width: 769px) {
  .footer-legal {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--spacing-lg);
  }
}

.footer-legal a {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

.footer-legal a:hover { color: var(--color-white); }

.footer-design {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.footer-design:hover { color: var(--color-white); }

/* --------------------------------------------------------------------------
   Internal Pages — Header forced scrolled (pages sans hero sombre)
   -------------------------------------------------------------------------- */
.page-internal--light .header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.page-internal--light .menu-link {
  color: var(--color-gray-700);
  text-shadow: none;
}

.page-internal--light .menu-link:hover,
.page-internal--light .menu-link.active {
  color: var(--color-primary);
}

.page-internal--light .menu-link::after {
  background-color: var(--color-accent);
}

.page-internal--light .logo-img {
  filter: none;
}

.page-internal--light .lang-btn {
  color: var(--color-gray-700);
}

.page-internal--light .lang-btn.active {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Bloc Texte — Generic text section for internal pages
   -------------------------------------------------------------------------- */
.bloc-text {
  padding: var(--spacing-xl) 0;
}

.bloc-text-header {
  margin-bottom: var(--spacing-lg);
}

.bloc-text-subtitle {
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-top: var(--spacing-xs);
}

.bloc-text-content {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-gray-700);
}

/* Palier desktop aligné sur .esg-block-text pour homogénéiser les blocs */
@media (min-width: 769px) {
  .bloc-text-content {
    font-size: var(--font-size-lg);
  }
}

.bloc-text-content h1,
.bloc-text-content h2,
.bloc-text-content h3 {
  color: var(--color-primary);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.bloc-text-content h1 { font-size: var(--font-size-2xl); }
.bloc-text-content h2 { font-size: var(--font-size-xl); }
.bloc-text-content h3 { font-size: var(--font-size-lg); }

.bloc-text-content p {
  margin-bottom: var(--spacing-sm);
}

.bloc-text-content a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.bloc-text-content a:hover {
  color: var(--color-accent-dark);
}

.bloc-text-content ul,
.bloc-text-content ol {
  list-style: revert;
  padding-left: 1em;
  margin-bottom: var(--spacing-sm);
}

.bloc-text-content ul li,
.bloc-text-content ol li {
  margin-bottom: 0.25em;
}

.bloc-text-image {
  margin-bottom: var(--spacing-lg);
}

.bloc-text-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Bloc CTA — bouton primary centré */
.bloc-cta {
  padding: var(--spacing-2xl) 0;
}

.bloc-cta .container {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Page Header — Shared component for internal pages
   -------------------------------------------------------------------------- */
.page-header {
  background:
    radial-gradient(circle at 10% 10%, #1a6b44 0%, transparent 46%),
    linear-gradient(135deg, #1a2744 0%, #0f1a2e 60%, #1a3344 100%);
  padding: calc(var(--header-height) + var(--spacing-3xl)) 0 var(--spacing-3xl);
  text-align: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
}

@media (min-width: 769px) {
  .page-header {
    padding: calc(var(--header-height) + var(--spacing-4xl)) 0 var(--spacing-4xl);
  }
}

/* Content after page-header slides over it */
.page-header ~ .container,
.page-header ~ div,
.page-header ~ section {
  position: relative;
  z-index: 1;
  background: var(--color-white);
}


.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/fractals-bg.svg');
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
}

/* Shimmer sweep container — clips to fractals */
.page-header-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: url('../images/fractals-bg.svg');
  mask-image: url('../images/fractals-bg.svg');
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 768px) {
  .page-header-shimmer {
    display: none;
  }
}

.page-header-shimmer::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.7) 0%, transparent 70%);
  filter: blur(50px);
  animation: shimmerMove 48s ease-in-out infinite;
}

@keyframes shimmerMove {
  /* Start: hors champ à gauche, centré en Y */
  0%    { top: 35%; left: -30%; }
  /* Gauche → Droite */
  12.5% { top: 35%; left: 100%; }
  /* Pause */
  25%   { top: 35%; left: 100%; }
  /* Droite → Gauche */
  37.5% { top: 35%; left: -30%; }
  /* Pause */
  50%   { top: 35%; left: -30%; }
  /* Haut → Bas */
  50.1% { top: -30%; left: 35%; }
  62.5% { top: 100%; left: 35%; }
  /* Pause */
  75%   { top: 100%; left: 35%; }
  /* Bas → Haut */
  87.5% { top: -30%; left: 35%; }
  /* Pause */
  100%  { top: -30%; left: 35%; }
}

.page-header .container {
  position: relative;
  z-index: 3;
}

.page-header-title {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-header-subtitle {
  font-size: var(--font-size-base);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

@media (min-width: 769px) {
  .page-header-subtitle {
    font-size: var(--font-size-lg);
  }
}

.page-header-subtitle strong,
.page-header-subtitle b {
  font-weight: 700;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Page Content Area — Fractal reveal on scroll
   -------------------------------------------------------------------------- */
.page-content-area {
  position: relative;
  z-index: 1;
  background: var(--color-white);
}

.fractal-reveal {
  position: absolute;
  inset: 0;
  background-image: url('../images/fractals-bg.svg');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat-y;
  opacity: 0.3;
  filter: brightness(0) invert(8%) sepia(50%) saturate(2000%) hue-rotate(190deg);
  pointer-events: none;
  z-index: 0;
  --reveal: 0%;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(var(--reveal) - 33.33vh), transparent var(--reveal));
  mask-image: linear-gradient(to bottom, black 0%, black calc(var(--reveal) - 33.33vh), transparent var(--reveal));
}

.page-content-area > .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Filter Bar — Shared component
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: var(--spacing-sm);
  padding: var(--spacing-2xl) var(--spacing-xl);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

/* Scroll indicator arrows on mobile — above the fade gradient */
.filter-bar-wrapper {
  position: relative;
}

.filter-bar-wrapper::before,
.filter-bar-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: no-repeat center / 36px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

.filter-bar-wrapper::before {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a8c5a' stroke-width='2.5'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

.filter-bar-wrapper::after {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a8c5a' stroke-width='2.5'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

@media (min-width: 769px) {
  .filter-bar-wrapper::before,
  .filter-bar-wrapper::after {
    display: none;
  }
}

@media (min-width: 769px) {
  .filter-bar {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl) 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

}

.filter-label {
  display: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-600);
  white-space: nowrap;
  line-height: 1;
  margin-right: var(--spacing-sm);
}

@media (min-width: 769px) {
  .filter-label {
    display: block;
  }
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-gray-600);
  background: var(--color-gray-200);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.filter-btn.active {
  background: var(--color-accent-dark);
  color: var(--color-white);
  border-color: var(--color-accent-dark);
}

/* --------------------------------------------------------------------------
   Team Grid — Page Equipe
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #ffffff;
  width: 100%;
}

@media (min-width: 769px) {
  .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.team-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.team-card:hover {
}

.team-card-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: var(--color-gray-200);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card-photo--placeholder {
  background: var(--color-gray-200);
}

@media (min-width: 769px) {
  .team-card:hover .team-card-photo {
    transform: scale(1.12);
  }
}

.team-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: var(--color-white);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}

@media (min-width: 769px) {
  .team-card:hover .team-card-info {
    transform: translateY(0);
  }
}

.team-card-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.team-card-title {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-sm);
}

.team-card-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-accent);
  background: rgba(42, 140, 90, 0.1);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.team-card-overlay {
  position: absolute;
  inset: 0;
  /* Filtre bleu appliqué uniquement aux membres ayant un LinkedIn (voir --has-linkedin) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-xl) 30%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.team-card-overlay--has-linkedin {
  background: rgba(26, 39, 68, 0.9);
}

@media (min-width: 769px) {
  .team-card:hover .team-card-overlay {
    opacity: 1;
  }
}

.team-card-bio {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.team-card-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  color: var(--color-white);
  transition: background var(--transition-fast);
}

.team-card-linkedin:hover {
  background: var(--color-accent);
}

/* Mobile: layout horizontal photo + infos alternées */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .team-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    min-height: 220px;
    border-radius: 0;
    overflow: hidden;
    background: var(--color-primary);
  }

  .team-card-photo {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
  }

  .team-card-info {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    transform: none;
    background: transparent;
    color: var(--color-white);
    padding: var(--spacing-xl) var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xs);
  }

  /* Séparateur entre info et bio */
  .team-card-info::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin-top: var(--spacing-xs);
  }

  .team-card-name {
    font-size: calc(var(--font-size-sm) * 1.5);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0;
    line-height: 1.2;
  }

  .team-card-title {
    font-size: var(--font-size-base);
    color: var(--color-white);
    margin-bottom: 0;
  }

  .team-card-tag {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-white);
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    width: fit-content;
    font-size: var(--font-size-xs);
    margin-top: 0;
  }

  .team-card-overlay {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: transparent;
    opacity: 1;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-xl);
    inset: auto;
  }

  .team-card-bio {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-xs);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 0;
  }

  .team-card-linkedin {
    display: inline-flex;
    align-self: center;
    margin-top: var(--spacing-md);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    color: var(--color-white);
    align-items: center;
    justify-content: center;
  }

  /* Lignes paires : inverser photo/infos */
  .team-card:nth-child(even) .team-card-photo {
    grid-column: 2;
  }
  .team-card:nth-child(even) .team-card-info {
    grid-column: 1;
  }
  .team-card:nth-child(even) .team-card-overlay {
    grid-column: 1;
  }

  .team-card:hover .team-card-photo {
    transform: none;
  }
}

/* Team filter animation */
.team-card.hidden {
  opacity: 0;
  transform: scale(0.9);
  position: absolute;
  visibility: hidden;
}

.team-card.visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --------------------------------------------------------------------------
   Portfolio Grid — Page Portfolio (ported from V1)
   -------------------------------------------------------------------------- */
.portfolio-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #ffffff;
  width: 100%;
}

@media (min-width: 769px) {
  .portfolio-page-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

.portfolio-card-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.portfolio-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.4) 100%);
}

@media (min-width: 769px) {
  .portfolio-card:hover .portfolio-card-bg {
    transform: scale(1.05);
  }
}

.portfolio-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-xl);
}

.portfolio-title {
  font-size: clamp(1rem, 1.8vw, 1.8rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.portfolio-category {
  position: absolute;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.9);
  padding: var(--spacing-sm) 0;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  padding-left: var(--spacing-sm);
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 769px) {
  .portfolio-card:hover .portfolio-category {
    opacity: 1;
  }
}

/* Mobile: show category by default since hover doesn't work */
@media (max-width: 768px) {
  .portfolio-category {
    opacity: 1;
    font-size: 0.7rem;
  }
}

/* Portfolio filter animation */
.portfolio-card.hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   Portfolio Detail — Image overlapping header
   -------------------------------------------------------------------------- */
/* Portfolio detail: more padding on header to make room for overlapping image */
.page-header--detail {
  padding-bottom: calc(var(--spacing-4xl) + 80px);
}

/* Image overlapping the header — inside content-area */
.portfolio-detail-image-wrapper {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin-top: -120px;
  margin-bottom: var(--spacing-xl);
  padding: 0 var(--side-margin);
}

/* Content area on detail page: no background, hero visible behind image */
.page-content-area--detail {
  background: none !important;
}

.portfolio-detail-image {
  width: 900px;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Legacy — kept for reference, overridden by .page-header */
.portfolio-detail-hero-LEGACY {
  position: relative;
  z-index: 0;
  min-height: 38vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  will-change: transform;
}

.portfolio-detail-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary-dark);
}

.portfolio-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 36, 0.85) 0%, rgba(10, 18, 36, 0.3) 50%, transparent 100%);
}

.portfolio-detail-hero-content {
  position: relative;
  z-index: 1;
  padding: var(--spacing-4xl) calc(var(--side-margin) * 2) var(--spacing-3xl);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.portfolio-detail-hero-strategy {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-accent);
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-md);
}

.portfolio-detail-hero .portfolio-detail-name {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--spacing-sm);
}

.portfolio-detail-hero-activity {
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

/* Content slides over hero — handled by .page-header ~ div rule */

/* --------------------------------------------------------------------------
   Portfolio Detail — Page Portfolio Detail
   -------------------------------------------------------------------------- */
.portfolio-detail {
  padding: var(--spacing-xl) 0 var(--spacing-4xl);
  min-height: 50vh;
  position: relative;
  z-index: 1;
}

.portfolio-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  max-width: 900px;
  margin: 0 auto;
}

.portfolio-detail-description {
  font-size: var(--font-size-lg);
  color: var(--color-gray-700);
  line-height: 1.8;
  max-width: 100%;
  text-align: left;
}

.portfolio-detail-info {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gray-300);
}

.portfolio-info-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0 var(--spacing-md);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-gray-100);
  transition: background 0.3s ease;
  border-bottom: 1px solid var(--color-gray-300);
}

.portfolio-info-item:last-child {
  border-bottom: none;
}

.portfolio-info-item:hover {
  background: var(--color-white);
}

.portfolio-info-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.portfolio-info-icon {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.portfolio-info-item:hover .portfolio-info-icon {
  transform: scale(1.25);
}

.portfolio-info-content {
  display: flex;
  align-items: center;
  text-align: left;
}

.portfolio-info-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-600);
  line-height: 1.2;
  white-space: nowrap;
}

.portfolio-info-value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  white-space: pre-line;
}

.portfolio-info-value a {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.portfolio-info-value a:hover {
  color: var(--color-accent-dark);
}

.portfolio-detail-nav {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-4xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-gray-300);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------------------------------
   Portfolio Nav Bar — Green band with prev/next navigation
   -------------------------------------------------------------------------- */
.portfolio-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-accent) !important;
  padding: var(--spacing-lg) 0;
  min-height: 100px;
  position: relative;
  z-index: 2;
}

.portfolio-nav-prev,
.portfolio-nav-next {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.3s ease;
  padding: var(--spacing-sm) var(--spacing-md);
  flex: 1;
}

.portfolio-nav-next {
  justify-content: flex-end;
}

.portfolio-nav-prev:hover,
.portfolio-nav-next:hover {
  opacity: 1;
}

/* Shine effect on full left/right half of the bar */
.portfolio-nav-bar {
  overflow: hidden;
}

.portfolio-nav-prev:hover ~ .portfolio-nav-bar-shine-left,
.portfolio-nav-next:hover ~ .portfolio-nav-bar-shine-right {
  opacity: 1;
}

.portfolio-nav-bar::before,
.portfolio-nav-bar::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.portfolio-nav-bar::before {
  left: -100%;
}

.portfolio-nav-bar::after {
  right: -100%;
}

.portfolio-nav-bar:has(.portfolio-nav-bar-side--left:hover)::before {
  animation: shineLeft 1.2s ease forwards;
}

.portfolio-nav-bar:has(.portfolio-nav-bar-side--right:hover)::after {
  animation: shineRight 1.2s ease forwards;
}

@keyframes shineLeft {
  0% { left: -50%; opacity: 1; }
  100% { left: 50%; opacity: 0; }
}

@keyframes shineRight {
  0% { right: -50%; opacity: 1; }
  100% { right: 50%; opacity: 0; }
}


.portfolio-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portfolio-nav-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  display: block;
  color: var(--color-white);
  text-transform: uppercase;
}

.portfolio-nav-category {
  font-size: var(--font-size-sm);
  opacity: 0.7;
  color: var(--color-white);
}

.portfolio-nav-arrow {
  flex-shrink: 0;
  color: var(--color-white);
}

.portfolio-nav-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.portfolio-nav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-3xl);
  text-decoration: none;
  transition: all 0.3s ease;
  opacity: 0.9;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.portfolio-nav-back:hover {
  opacity: 1;
}

.portfolio-nav-back svg {
  transition: transform 0.3s ease;
}

.portfolio-nav-back:hover svg {
  transform: scale(1.15);
}

.portfolio-nav-back svg {
  flex-shrink: 0;
}

/* Side zones in green bar — clickable for prev/next */
.portfolio-nav-bar-side {
  flex: 1;
  display: block;
  height: 100%;
  min-height: 100px;
}

/* Floating prev/next — full navigation blocks */
.portfolio-float-nav {
  position: fixed;
  z-index: 100;
  display: flex;
  align-items: stretch;
  gap: 0;
  text-decoration: none;
  color: var(--color-primary);
}

.portfolio-float-nav .portfolio-float-svg {
  flex-shrink: 0;
  stroke: var(--color-accent);
  transition: stroke 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  border: 1.5px solid var(--color-accent);
  width: 60px;
  height: 60px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 0;
}

.portfolio-float-nav.docked .portfolio-float-svg {
  border-color: transparent;
}

/* Thumb + text: hidden by default, visible on hover */
.portfolio-float-thumb,
.portfolio-float-text {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.portfolio-float-thumb {
  width: 60px;
  height: 60px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.portfolio-float-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.portfolio-float-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-float-category {
  font-size: var(--font-size-sm);
  opacity: 0.7;
  white-space: nowrap;
}

/* Prev: [carré|vignette|texte] */
.portfolio-float-prev { left: 20px; }
.portfolio-float-prev .portfolio-float-thumb { transform: translateX(0); margin-right: var(--spacing-md); }
.portfolio-float-prev .portfolio-float-text { transform: translateX(-5px); }

/* Next: [texte|vignette|carré] */
.portfolio-float-next { right: 20px; }
.portfolio-float-next .portfolio-float-thumb { transform: translateX(0); margin-left: var(--spacing-md); }
.portfolio-float-next .portfolio-float-text { transform: translateX(5px); }


/* Hover: show thumb + text */
.portfolio-float-nav:hover .portfolio-float-thumb,
.portfolio-float-nav:hover .portfolio-float-text {
  opacity: 1;
}

/* Undocked (on white): blue/green text */
.portfolio-float-name { color: var(--color-primary); }
.portfolio-float-category { color: var(--color-gray-600); }

/* Docked (on green bar): white text + white arrow */
.portfolio-float-nav.docked .portfolio-float-svg { stroke: white; }
.portfolio-float-nav.docked .portfolio-float-name { color: white; }
.portfolio-float-nav.docked .portfolio-float-category { color: rgba(255,255,255,0.7); }

/* When docked, always show thumb + text */
.portfolio-float-nav.docked .portfolio-float-thumb,
.portfolio-float-nav.docked .portfolio-float-text {
  opacity: 1;
}

/* Actualités — titre masqué partout (hover mid-page, sur le header sombre).
   Il n'apparaît que lorsque la flèche est réellement dockée sur la barre verte (.on-bar).
   La vignette, elle, conserve son comportement de base (visible au hover et lorsque docked).
   On double la classe parente (.portfolio-float-nav.portfolio-float-nav--actualites) pour
   gagner contre .portfolio-float-nav.docked … (spécificité 0,3,0) qui sinon l'emporte. */
.portfolio-float-nav.portfolio-float-nav--actualites .portfolio-float-text {
  opacity: 0;
}
.portfolio-float-nav.portfolio-float-nav--actualites.on-bar .portfolio-float-text {
  opacity: 1;
  /* Cap responsif : 500px max sur très large, 25vw sinon → laisse de la place
     au .portfolio-nav-back central même au resize. */
  max-width: min(500px, 25vw);
}
.portfolio-float-nav.portfolio-float-nav--actualites.on-bar .portfolio-float-name {
  /* Nom multi-lignes (jusqu'à 3 lignes), ellipsis au-delà. */
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.portfolio-float-nav.portfolio-float-nav--actualites.on-bar .portfolio-float-category {
  /* Catégorie sur une seule ligne, ellipsis si débordement. */
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Portfolio Detail — Mobile adjustments */
@media (max-width: 768px) {
  /* Hide floating arrows entirely on mobile */
  .portfolio-float-nav {
    display: none !important;
  }

  /* Reduce white space on detail page */
  .portfolio-detail {
    padding-bottom: var(--spacing-lg);
    min-height: auto;
  }

  /* Nav bar: in flow, stacked above footer */
  .portfolio-nav-bar {
    position: relative;
    min-height: 120px;
    padding: var(--spacing-lg) var(--spacing-md);
    margin-top: var(--spacing-xl);
  }

  /* Add visible chevron arrows in the green bar side zones */
  .portfolio-nav-bar-side {
    display: flex;
    align-items: center;
    min-height: 120px;
  }

  .portfolio-nav-bar-side--left::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-left: 2.5px solid white;
    border-bottom: 2.5px solid white;
    transform: rotate(45deg);
    margin-left: var(--spacing-md);
  }

  .portfolio-nav-bar-side--right::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-right: 2.5px solid white;
    border-top: 2.5px solid white;
    transform: rotate(45deg);
    margin-right: var(--spacing-md);
    margin-left: auto;
  }

  .portfolio-nav-thumb {
    display: none;
  }

  .portfolio-nav-name {
    font-size: var(--font-size-sm);
  }

  .portfolio-nav-category {
    font-size: var(--font-size-xs);
  }
}

/* --------------------------------------------------------------------------
   Scroll to Top
   -------------------------------------------------------------------------- */
.scroll-top {
  position: fixed;
  bottom: calc(var(--mobile-nav-height) + 20px);
  right: 30px;
  width: 50px;
  height: 50px;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 15px rgba(26, 39, 68, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 999;
}

@media (min-width: 769px) {
  .scroll-top {
    display: flex;
    bottom: 30px;
  }
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(42, 140, 90, 0.4);
}

.scroll-top svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   Mobile Menu Overlay — Top row, logo, separator, dropdown chevron
   -------------------------------------------------------------------------- */

/* Top row: logo left + lang switch right */
.menu-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 769px) {
  .menu-overlay-top { display: contents; }
}

.menu-overlay-logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

@media (min-width: 769px) {
  .menu-overlay-logo { display: none; }
}

.menu-overlay-separator {
  display: none;
}

@media (min-width: 769px) {
  .menu-overlay-separator { display: none; }
}

/* Dropdown chevron indicator on mobile — before, green, no text shift */
.menu-item-dropdown > .menu-link::before {
  content: '\25B8';
  color: var(--color-accent);
  position: absolute;
  right: calc(100% + var(--spacing-md));
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  transition: transform 0.3s ease;
}

.menu-item-dropdown.dropdown-open > .menu-link::before {
  transform: translateY(-50%) rotate(90deg);
}

@media (min-width: 769px) {
  .menu-item-dropdown > .menu-link::before {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile Nav Bar — Background opacity + scroll-top integration
   -------------------------------------------------------------------------- */
.mobile-nav-bar {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-nav-bar .menu-toggle {
  background: var(--color-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mobile-nav-bar .hamburger,
.mobile-nav-bar .hamburger::before,
.mobile-nav-bar .hamburger::after {
  background-color: var(--color-white);
}

.mobile-nav-scroll-top {
  position: absolute;
  right: var(--spacing-xl);
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.mobile-nav-scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-scroll-top:hover {
  background-color: var(--color-accent);
}

@media (min-width: 769px) {
  .mobile-nav-scroll-top { display: none; }
}

/* Footer LinkedIn — logo row visible, nav hidden on mobile */
.footer-linkedin--nav {
  display: none;
}

.footer-linkedin--logo {
  display: inline-flex;
}

@media (min-width: 769px) {
  .footer-linkedin--nav {
    display: inline-flex;
  }
  .footer-linkedin--logo {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Word Cloud — Fixed height mobile
   -------------------------------------------------------------------------- */
.word-cloud {
  height: 180px;
  min-height: 180px;
}

.metiers-col .section-title {
  text-align: center;
}

@media (min-width: 769px) {
  .word-cloud {
    height: auto;
  }
  .metiers-col .section-title {
    text-align: left;
  }
}

/* ==========================================================================
   Responsive — Portfolio Slider Mobile
   ========================================================================== */

@media (max-width: 768px) {
  .portfolio-slider { height: 100vh; min-height: 500px; }

  .slide { flex-direction: column; }

  .hero-left { width: 100%; height: 50%; }
  .hero-right { width: 100%; height: 50%; }

  .hero-left-content {
    padding: var(--spacing-xl);
    padding-top: calc(var(--header-height) + var(--spacing-md));
    padding-bottom: var(--spacing-xl);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
  }

  .hero-left-bg { width: 100%; height: 200%; top: auto; bottom: 0; }

  /* Photo affichée en pleine largeur, sans crop, contenue dans son propre bloc */
  .hero-right-bg {
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
  }
  .slide.active .hero-right-bg { transform: none; }

  /* Titre du bloc bleu en blanc plein (plus de remplissage transparent par l'image) */
  .hero-title-masked {
    font-size: clamp(2.5rem, 12vw, 4rem);
    margin-bottom: 0;
    background: none;
    -webkit-text-fill-color: var(--color-white);
    color: var(--color-white);
    filter: none;
  }
  .hero-desc { display: none; }
  .hero-tagline { display: none; }

  .hero-right-content {
    top: auto;
    bottom: var(--spacing-lg);
    left: 50%; right: auto;
    transform: translateX(-50%);
  }

  .hero-category {
    background: var(--color-accent);
    border: none;
    padding: var(--spacing-sm) var(--spacing-xl);
  }

  .slider-nav {
    left: 50%;
    bottom: auto;
    top: calc(50% + var(--spacing-sm));
    transform: translateX(-50%);
  }

  .slider-arrow { display: none; }

  .portfolio-slider-bottom {
    display: none;
  }
}

/* ==========================================================================
   Responsive — Small Mobile
   ========================================================================== */

@media (max-width: 480px) {
  .hero-main-title { font-size: 1.6rem; }
  .section-title { font-size: var(--font-size-2xl); }

  .figures-grid { grid-template-columns: 1fr; }
  .figure-card:nth-child(1),
  .figure-card:nth-child(2),
  .figure-card:nth-child(4) { grid-column: span 1; }

  .hero-left { height: 45%; }
  .hero-right { height: 55%; }

  .hero-left-content {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-bottom: calc(var(--mobile-nav-height) + var(--spacing-sm));
  }

  .hero-title-masked {
    font-size: clamp(2rem, 14vw, 3rem);
    margin-bottom: 0;
  }

  .btn-hero {
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
  }

  .word-cloud { min-height: 100px; }

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

/* --------------------------------------------------------------------------
   Contact Page Bloc
   -------------------------------------------------------------------------- */
.contact-page {
  padding: var(--spacing-2xl) 0;
}

@media (min-width: 769px) {
  .contact-page {
    padding: var(--spacing-4xl) 0;
  }
}

.contact-page .section-header {
  justify-content: center;
  margin-bottom: var(--spacing-xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 769px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }
}

/* Form fields */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.form-field {
  margin-bottom: var(--spacing-lg);
}

.form-label-front {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-sm);
}

.required-star {
  color: var(--color-accent);
}

.form-input-front,
.form-textarea-front {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input-front:focus,
.form-textarea-front:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(42, 140, 90, 0.1);
}

.form-input-front::placeholder,
.form-textarea-front::placeholder {
  color: var(--color-gray-400);
}

.form-textarea-front {
  min-height: 150px;
  resize: vertical;
}

.form-required-note {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

/* hCaptcha placeholder */
.hcaptcha-placeholder {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
}

/* Contact info */
.contact-info-block {
  margin-bottom: var(--spacing-xl);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.contact-info-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  margin-top: 3px;
}

.contact-info-item a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-info-item a:hover {
  color: var(--color-accent);
}

/* Offices */
.contact-offices {
  margin-top: var(--spacing-lg);
  color: var(--color-gray-700);
  line-height: 1.6;
}

.contact-offices-label {
  font-weight: 600;
  display: block;
  margin-bottom: var(--spacing-xs);
}

/* Map */
.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.contact-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}

@media (min-width: 769px) {
  .contact-map iframe {
    height: 350px;
  }
}

/* Contact alerts */
.contact-alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.contact-alert--success {
  background: #d1f4e0;
  color: #0d894f;
  border: 1px solid #a3e4be;
}

.contact-alert--error {
  background: #ffe5e5;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* --------------------------------------------------------------------------
   Contact Infos Bloc (coordonnées uniquement, sans formulaire ni map)
   -------------------------------------------------------------------------- */
.contact-infos-section {
  padding: var(--spacing-2xl) 0;
}

@media (min-width: 769px) {
  .contact-infos-section {
    padding: var(--spacing-4xl) 0;
  }
}

.contact-infos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .contact-infos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }
}

.contact-infos-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-infos-card:nth-child(1) {
  background: linear-gradient(135deg, var(--color-figures-1) 0%, #0f1a2e 100%);
}

.contact-infos-card:nth-child(2) {
  background: linear-gradient(135deg, #5da674 0%, #315a4c 100%);
}

.contact-infos-card:nth-child(3) {
  background: linear-gradient(135deg, var(--color-figures-4) 0%, #1f5a4a 100%);
}


.contact-infos-icon {
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
}

.contact-infos-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--spacing-sm);
}

.contact-infos-value {
  font-size: var(--font-size-sm);
  color: var(--color-white);
  line-height: 1.6;
  word-break: break-word;
}

a.contact-infos-value {
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.contact-infos-value:hover {
  color: rgba(255, 255, 255, 0.7);
}

.contact-infos-offices {
  text-align: center;
  margin-top: var(--spacing-xl);
  color: var(--color-gray-600);
  line-height: 1.6;
  font-size: var(--font-size-sm);
}

.contact-infos-offices-label {
  font-weight: 600;
  margin-right: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   Contact page — offices grid + contact blocks (blocs contact_offices / contact_blocks)
   -------------------------------------------------------------------------- */
.contact-section-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xl);
  position: relative;
  padding-bottom: var(--spacing-md);
}

@media (min-width: 769px) {
  .contact-section-title { font-size: var(--font-size-3xl); }
}

.contact-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.contact-offices-section {
  padding: var(--spacing-2xl) 0 var(--spacing-xl);
}

@media (min-width: 769px) {
  .contact-offices-section { padding: var(--spacing-3xl) 0 var(--spacing-2xl); }
}

/* Offices grid (6 cities with photo) */
.offices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 600px) {
  .offices-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
  .offices-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Creative office card: full-bleed city photo + frosted-glass info panel that
   slides up to reveal the full address on hover. */
.office-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-primary-dark);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

@media (min-width: 600px) {
  .office-card { aspect-ratio: 4 / 5; }
}

.office-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.office-card-media {
  position: absolute;
  inset: 0;
}

.office-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.office-card:hover .office-card-media img { transform: scale(1.08); }

/* readability gradient over the photo */
.office-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 26, 46, 0.92) 0%, rgba(15, 26, 46, 0.35) 45%, rgba(15, 26, 46, 0) 70%);
  z-index: 1;
  pointer-events: none;
}

/* content stack pinned to the bottom: city always visible, address below it */
.office-card-city {
  position: absolute;
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  bottom: var(--spacing-lg);
  z-index: 3;
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-white);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.office-card-city::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-sm);
}

/* address: structured 4-line block, hidden below, reveals on hover under the city */
.office-card-info {
  position: absolute;
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  bottom: var(--spacing-lg);
  z-index: 3;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* on hover: city slides up to make room, address reveals beneath it */
.office-card:hover .office-card-city,
.office-card:focus-within .office-card-city {
  transform: translateY(-6em);
}

.office-card:hover .office-card-info,
.office-card:focus-within .office-card-info {
  opacity: 1;
  transform: translateY(0);
}

/* homogeneous 4-line layout: place / street / postcode+city / phone */
.office-line {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.office-line--place {
  font-weight: 600;
  color: var(--color-white);
}

.office-line--phone {
  margin-top: 4px;
  font-weight: 600;
}

.office-line--phone a {
  color: var(--color-accent-light);
  text-decoration: none;
}

.office-line--phone a:hover { text-decoration: underline; }

.office-line--empty { opacity: 0.4; }

/* on touch / no-hover devices, always show the address (no hover possible) */
@media (hover: none) {
  .office-card-city { transform: translateY(-6em); }
  .office-card-info { opacity: 1; transform: none; }
}

/* Mobile: redesign office cards as stacked photo + address block.
   The overlay approach (slide-up on hover) is replaced by a clean
   photo-on-top / address-block-below layout where everything is always visible. */
@media (max-width: 599px) {
  /* Card becomes a flex column, no fixed aspect-ratio */
  .office-card {
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    box-shadow: var(--shadow-sm);
  }
  /* The ::after readability gradient is not needed when address is below */
  .office-card::after {
    display: none;
  }
  /* Photo area: fixed height */
  .office-card-media {
    position: relative;
    height: 180px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .office-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* City name: pinned inside the photo, always visible */
  .office-card-city {
    position: absolute;
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    transform: none;
    /* keep the city visible within the photo via z-index stacking */
    z-index: 2;
  }
  /* Re-add gradient readability just for the city text within the media */
  .office-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 26, 46, 0.8) 0%, rgba(15, 26, 46, 0.2) 50%, rgba(15, 26, 46, 0) 70%);
    z-index: 1;
    pointer-events: none;
  }
  /* Address block: normal in-flow block under the photo */
  .office-card-info {
    position: static;
    opacity: 1;
    transform: none;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary-dark);
    flex: 1;
  }
  .office-line {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
  }
  .office-line--place {
    color: var(--color-white);
    font-weight: 700;
    margin-bottom: 2px;
  }
  .office-line--empty {
    display: none;
  }
  /* No hover lift on touch cards */
  .office-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* Contact blocks (4 email cards) */
.contact-blocks-section {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
  /* same light gray as the ESG "investisseur engagé" section */
  background: var(--color-gray-100);
}

/* Le framework rend les blocs à plat (pas de wrapper .page-content-area) : la règle
   globale `.page-header ~ section` (spécificité 0,1,1) force un fond blanc sur les
   sections sœurs et écrase le fond gris ci-dessus (0,1,0). On rétablit le gris avec
   une spécificité supérieure — uniquement quand un page_header précède la section. */
.page-header ~ section.contact-blocks-section {
  background: var(--color-gray-100);
}

@media (min-width: 769px) {
  .contact-blocks-section { padding: var(--spacing-2xl) 0 var(--spacing-4xl); }
}

.contact-blocks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 769px) {
  .contact-blocks-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }
}

.contact-block {
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.contact-block:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--color-accent);
}

@media (hover: none) {
  .contact-block:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
    border-color: var(--color-gray-300);
  }
}

.contact-block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: rgba(42, 140, 90, 0.1);
  color: var(--color-accent);
  margin-bottom: var(--spacing-lg);
}

.contact-block-icon svg { width: 26px; height: 26px; }

.contact-block-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.contact-block-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.contact-block-email {
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

.contact-block-email:hover { border-bottom-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Expertises page — intro + alternating image/text blocks
   (porté depuis la maquette ; .page-content-area / .fractal-bg / .container
   existent déjà plus haut dans ce fichier)
   -------------------------------------------------------------------------- */
/* Clip horizontal overflow only where the section-zoom needs it (Expertises),
   NOT globally — un overflow non-visible sur un ancêtre casse position:sticky. */
.expertise-block {
  overflow-x: clip;
}

/* keep .container's horizontal padding — only add vertical spacing */
.expertises-intro {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
}

.expertises-intro-lead {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 769px) {
  .expertises-intro-lead {
    font-size: var(--font-size-2xl);
  }
}

.expertise-block {
  padding: var(--spacing-lg) 0;
}

@media (min-width: 769px) {
  .expertise-block {
    padding: var(--spacing-xl) 0;
  }
}

/* extra breathing room between the last expertise block and the footer */
.expertise-block:last-of-type {
  padding-bottom: var(--spacing-3xl);
}

@media (min-width: 769px) {
  .expertise-block:last-of-type {
    padding-bottom: var(--spacing-4xl);
  }
}

/* Dynamic scroll focus — the section closest to the viewport center is highlighted:
   slightly scaled up at full opacity, while the others stay desaturated/blurred.
   JS toggles .is-active on the block nearest the center as you scroll. */
.expertise-block-inner {
  opacity: 0.5;
  transform: scale(1);
  transform-origin: center center;
  filter: saturate(0.15) blur(2px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}

.expertise-block.is-active .expertise-block-inner {
  opacity: 1;
  transform: scale(1.08);
  filter: saturate(1) blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .expertise-block-inner {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

.expertise-block-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

@media (min-width: 769px) {
  .expertise-block-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4xl);
  }
  /* Alternance : sur les blocs --reverse, l'image passe à droite */
  .expertise-block--reverse .expertise-media {
    order: 2;
  }
  /* --reverse = liste à gauche / photo à droite : la liste est poussée à DROITE de sa
     colonne (vers la photo), avec un retrait réglable (--reverse-shift) du bord photo. */
  .expertise-block--reverse .expertise-text {
    justify-self: end;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-right: var(--reverse-shift, 127px);
  }
  /* normal = photo à gauche / liste à droite : la liste est poussée à GAUCHE de sa
     colonne (vers la photo), même valeur de retrait. */
  .expertise-block:not(.expertise-block--reverse) .expertise-text {
    justify-self: start;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: var(--reverse-shift, 127px);
  }
}

.expertise-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}

.expertise-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* slightly enlarged so the JS parallax translateY never reveals empty edges */
  transform: scale(1.06);
  will-change: transform;
}

/* the .expertise-text translateY is driven by JS parallax — keep it smooth */
.expertise-text {
  will-change: transform;
}

.expertise-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-md);
}

.expertise-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.expertise-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.expertise-list li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: 1.5;
}

@media (min-width: 769px) {
  .expertise-list li {
    font-size: var(--font-size-lg);
  }
}

.expertise-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* ==========================================================================
   ESG page (page-esg) — figures card, sandwich, text blocks, engagements,
   awards, download buttons. Porté depuis la maquette esg.html.
   ========================================================================== */
/* ESG: taller header so the floating figures card has room and isn't glued to the text */
.page-esg .page-header {
  padding-bottom: calc(var(--spacing-4xl) + var(--spacing-2xl));
}

@media (min-width: 769px) {
  .page-esg .page-header {
    padding-bottom: calc(var(--spacing-4xl) + var(--spacing-4xl));
  }
}

/* Figures card floats over the header↕image junction. The section itself takes NO
   vertical room (the card overflows it), so the header (above) and the image (below)
   meet with no white band. The card is pulled up onto the header by half its height. */
.esg-figures-section {
  position: relative;
  z-index: 2;
  height: 0;                 /* no space in the flow → no white band */
  margin: 0;
  padding: 0;
  overflow: visible;
}

.esg-figures-section .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                 /* card centered on the junction (see translateY) */
  transform: translateY(50%);
}

/* Mobile: figures card mostly INSIDE a much taller header, only its lower edge
   straddling onto the image — so it never overlaps the title below. */
@media (max-width: 768px) {
  .page-esg .page-header {
    padding-bottom: calc(var(--spacing-3xl) + 280px);
  }
  .esg-figures-section {
    height: 0;
    overflow: visible;
    padding: 0;
  }
  .esg-figures-section .container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;            /* at the header/image junction */
    transform: translateY(-32%);
  }
  .esg-figures-card {
    box-shadow: var(--shadow-lg);
  }
}

.esg-figures-card {
  background: linear-gradient(135deg, #1a2744 0%, #0f1a2e 55%, #1a3344 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: var(--spacing-xl) var(--spacing-xl);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.esg-figures-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl) var(--spacing-lg);
}

@media (min-width: 769px) {
  .esg-figures-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2xl);
  }
}

.esg-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.esg-figure-number {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.esg-figure-label {
  font-size: var(--font-size-sm);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .esg-figure-number {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .esg-figures-grid {
    gap: var(--spacing-lg) var(--spacing-md);
  }
}

/* CTA wrapper over the image, under the title, right edge aligned with the title & card.
   Fades in from the bottom (--cta: 0→1) once the title finishes — driven by scroll JS.
   Contains 1 or 2 CTAs (.esg-sandwich-cta), stacked vertically. */
.esg-sandwich-ctas {
  position: absolute;
  z-index: 4;
  right: calc(var(--side-margin) * 2);
  top: 72%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: fit-content;
  opacity: var(--cta, 0);
  transform: translateY(calc((1 - var(--cta, 0)) * 24px));
  will-change: opacity, transform;
}

.esg-sandwich-ctas--mobile { display: none; }

@media (max-width: 768px) {
  .esg-sandwich-ctas { display: none; }
  .esg-sandwich-ctas--mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: fit-content;
    margin: var(--spacing-lg) auto var(--spacing-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .esg-sandwich-ctas { opacity: 1; transform: none; }
}

/* Text blocks */
.esg-text-block {
  padding: var(--spacing-xl) 0;
}

@media (min-width: 769px) {
  .esg-text-block {
    padding: var(--spacing-2xl) 0;
  }
}

.esg-text-block--alt {
  background: var(--color-gray-100);
}

.esg-block-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-md);
}

@media (min-width: 769px) {
  .esg-block-title {
    font-size: var(--font-size-3xl);
  }
}

.esg-block-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.esg-block-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: 1.8;
  max-width: 900px;
  margin-bottom: var(--spacing-md);
}

@media (min-width: 769px) {
  .esg-block-text {
    font-size: var(--font-size-lg);
  }
}

.esg-block-text:last-child {
  margin-bottom: 0;
}

/* Download buttons */
.esg-downloads {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

@media (min-width: 769px) {
  .esg-downloads {
    padding: var(--spacing-2xl) 0 var(--spacing-4xl);
  }
}

.esg-downloads-note {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-style: italic;
  margin-bottom: var(--spacing-lg);
}

.esg-downloads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

@media (min-width: 769px) {
  .esg-downloads-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

.esg-download-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.esg-download-btn:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (hover: none) {
  .esg-download-btn:hover {
    border-color: var(--color-gray-300);
    box-shadow: none;
    transform: none;
  }
}

.esg-download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(42, 140, 90, 0.1);
  color: var(--color-accent);
}

.esg-download-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.3;
}

/* ESG — sandwich: under (back) / title (middle) / over (front), all same XY frame.
   The two title lines slide in (left & right) on scroll, sandwiched between the layers. */
.esg-sandwich {
  padding: 0 0 var(--spacing-xl);
  overflow-x: hidden;
}

@media (min-width: 769px) {
  .esg-sandwich {
    padding: 0 0 var(--spacing-2xl);
  }
}

.esg-sandwich-text {
  margin-top: var(--spacing-3xl);
  max-width: none;
}

@media (max-width: 768px) {
  .esg-sandwich-text {
    margin-top: var(--spacing-xl);
  }
}

.esg-sandwich-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 626;
  overflow: hidden;
}

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

.esg-layer--under { z-index: 1; }
.esg-layer--over  { z-index: 3; }

.esg-sandwich-title {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(var(--side-margin) * 2);
  left: auto;
  transform: translateY(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.08em;
}

@media (max-width: 768px) {
  .esg-sandwich-stage {
    aspect-ratio: auto;
    height: 290px;
  }
  .esg-layer {
    object-position: 38% center;
  }
  .esg-sandwich-title {
    left: auto;
    right: 24px;
    width: auto;
    max-width: calc(100% - 48px);
    align-items: flex-end;
    text-align: right;
  }
}

.esg-sandwich-line {
  display: block;
  transform: translateX(var(--slide, 0px)) scale(var(--scale, 1));
  transform-origin: right center;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  will-change: transform;
}

.esg-sandwich-line { font-size: clamp(1.8rem, 5vw, 3.6rem); }
.esg-sandwich-line--from-left  { --slide: 120vw; }
.esg-sandwich-line--from-right { --slide: -120vw; color: var(--color-white); }

@media (max-width: 768px) {
  .esg-sandwich-line {
    font-size: clamp(1.1rem, 4.6vw, 1.6rem);
    white-space: normal;
    text-align: right;
    transform-origin: right center;
    max-width: 70vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esg-sandwich-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.esg-accent { color: var(--color-accent); }

/* ESG — engagements (classic blocks) */
.esg-engagements {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

@media (min-width: 769px) {
  .esg-engagements {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl) var(--spacing-4xl);
  }
  .esg-engagements--3col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-2xl) var(--spacing-3xl);
  }
}

.esg-engagement-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

@media (min-width: 769px) {
  .esg-engagement-title {
    font-size: var(--font-size-xl);
  }
}

.esg-engagement-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: rgba(42, 140, 90, 0.1);
  color: var(--color-accent);
}

.esg-engagement-icon svg {
  width: 22px;
  height: 22px;
}

.esg-engagement .esg-block-text {
  margin-bottom: 0;
}

/* Scroll-reveal animation for titles & text blocks */
.esg-anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.esg-anim.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .esg-anim {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ESG — award cards */
.esg-awards-section {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(135deg, #1a6b44 0%, #1f4a3a 25%, #1a2744 55%, #0f1a2e 100%);
}

@media (min-width: 769px) {
  .esg-awards-section {
    padding: var(--spacing-3xl) 0;
  }
}

.esg-awards-section .esg-block-title {
  color: var(--color-white);
}
.esg-awards-section .esg-block-text {
  color: rgba(255, 255, 255, 0.85);
}

.esg-awards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (min-width: 769px) {
  .esg-awards-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }
}

.esg-award-card {
  position: relative;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.esg-award-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

@media (hover: none) {
  .esg-award-card:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
  }
}

.esg-award-badge {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.esg-award-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: rgba(42, 140, 90, 0.1);
  color: var(--color-accent);
  margin-bottom: var(--spacing-lg);
}

.esg-award-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   ESG page — overrides de la règle générique `.page-header ~ section`
   Le framework rend les blocs à plat après le bloc page_header. La règle
   `.page-header ~ .container/div/section` (spécificité 0,1,1) impose
   position:relative; z-index:1; background:#fff à TOUTES les sections sœurs,
   ce qui (a) met la carte chiffres flottante au même z-index que le sandwich
   (donc masquée par lui) et (b) écrase les fonds propres des sections ESG.
   On rétablit le tout avec une spécificité supérieure (.page-esg …, 0,2,0).
   -------------------------------------------------------------------------- */
.page-esg .esg-figures-section {
  z-index: 3;   /* repasse au-dessus du sandwich (z-index 1 hérité de la règle générique) */
}
.page-esg .esg-awards-section {
  background: linear-gradient(135deg, #1a6b44 0%, #1f4a3a 25%, #1a2744 55%, #0f1a2e 100%);
}
/* (.esg-downloads reste sur fond blanc : conforme à la maquette) */

/* --------------------------------------------------------------------------
   Bandeau initiatives — fond accent sur TOUTES les pages
   Bloc réutilisable (homepage, ESG, SFDR…). La règle générique
   `.page-header ~ section` (0,1,1) lui imposerait un fond blanc dès qu'il
   suit un bloc page_header (texte blanc sur blanc → invisible). On rétablit
   l'accent avec une spécificité supérieure (0,2,0) indépendante de la page.
   -------------------------------------------------------------------------- */
.initiatives-banner.fractal-bg {
  background-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Bloc engagements ESG (.esg-text-block--alt) — fond gris sur TOUTES les pages
   Bloc réutilisable (ESG, SFDR…). Même problème que la bannière : la règle
   générique `.page-header ~ section` (0,1,1) le repasserait en blanc. On
   rétablit le gris avec une spécificité supérieure (0,2,0) indépendante de
   la page (.esg-text-block + .esg-text-block--alt).
   -------------------------------------------------------------------------- */
.esg-text-block.esg-text-block--alt {
  background: var(--color-gray-100);
}