/* ============================================================
   ACP Environnement — main.css
   Base: TeleportHQ "CaribioGuard" template
   Colors: Caribbean teal (#0e7c6b / #1aaa94) + coral accent (#e05c3a)
   Fonts: Merriweather (headings) / Source Sans 3 (body)
   ============================================================ */

/* ── 1. Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  -webkit-font-smoothing: antialiased;
}
html { line-height: 1.15; scroll-behavior: smooth; }
body { margin: 0; }
p, li, ul, pre, div, h1, h2, h3, h4, h5, h6,
figure, blockquote, figcaption { margin: 0; padding: 0; }
button { background-color: transparent; }
button, input, optgroup, select, textarea {
  font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;
}
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; color: inherit;
}
a { color: inherit; text-decoration: inherit; }
img { display: block; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 2. Variables ─────────────────────────────────────────── */
:root {
  /* spacing */
  --spacing-xs:  0.25rem;
  --spacing-sm:  0.5rem;
  --spacing-md:  0.75rem;
  --spacing-lg:  1rem;
  --spacing-xl:  1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;

  /* palette – Caribbean teal */
  --color-primary:              #0e7c6b;
  --color-secondary:            #1aaa94;
  --color-accent:               #e05c3a;
  --color-surface:              #ffffff;
  --color-on-primary:           #fafafa;
  --color-on-secondary:         #f0f9f7;
  --color-on-accent:            #fafafa;
  --color-on-surface:           #07121a;
  --color-on-surface-secondary: #2a5048;
  --color-border:               #b2d8d0;
  --color-neutral:              #b2d8d0;
  --color-outline:              #0e7c6b;
  --color-scrim:                color-mix(in oklab, #000000 35%, transparent);
  --color-overlay:              color-mix(in oklab, #000000 40%, transparent);
  --color-backplate:            color-mix(in oklab, #000000 55%, transparent);
  --color-surface-elevated:     color-mix(in oklab, var(--color-surface) 92%, var(--color-secondary));
  --divider-value:              1px solid var(--color-border);

  /* typography */
  --font-family-heading:    "Merriweather", serif;
  --font-family-body:       "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-body:       400;
  --font-weight-medium:     600;
  --font-weight-heading:    700;
  --font-style-heading:     normal;
  --font-style-subheading:  normal;
  --line-height-body:       1.6;
  --line-height-heading:    1.25;
  --letter-spacing-body:    0.01em;
  --letter-spacing-heading: 0em;
  --text-transform-heading: none;

  /* fluid font sizes */
  --font-size-xs:   clamp(0.6875rem, 0.6rem + 0.2vw,   0.8125rem);
  --font-size-sm:   clamp(0.8125rem, 0.75rem + 0.25vw,  0.9375rem);
  --font-size-base: 1rem;
  --font-size-lg:   clamp(1.125rem,  1rem + 0.8vw,      1.25rem);
  --font-size-xl:   clamp(1.25rem,   1.15rem + 0.9vw,   1.5rem);
  --font-size-2xl:  clamp(1.5rem,    1.35rem + 1.2vw,   1.75rem);
  --font-size-3xl:  clamp(2.25rem,   1.9rem + 2.2vw,    2.5rem);
  --font-size-4xl:  clamp(3rem,      2.2rem + 3.5vw,    4rem);

  /* radii */
  --border-radius-sm:      4px;
  --border-radius-md:      8px;
  --border-radius-lg:      12px;
  --border-radius-xl:      16px;
  --border-radius-card:    var(--border-radius-sm);
  --border-radius-control: var(--border-radius-md);
  --border-radius-full:    9999px;

  /* shadows */
  --shadow-level-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-level-2: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-level-3: 0 12px 32px rgba(0,0,0,0.18);

  /* layout */
  --content-max-width: 76rem;
}

/* ── 3. Base ──────────────────────────────────────────────── */
html {
  font-family: var(--font-family-body);
  font-size: 1rem;
}
body {
  font-weight: var(--font-weight-body);
  letter-spacing: var(--letter-spacing-body);
  line-height: var(--line-height-body);
  color: var(--color-on-surface);
  background: var(--color-surface);
}

/* ── 4. Buttons ───────────────────────────────────────────── */
.btn {
  gap: var(--spacing-xs);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-level-1);
  text-align: center;
  transition: all 0.2s ease-in-out;
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  user-select: none;
  white-space: nowrap;
  border-radius: var(--border-radius-control);
  justify-content: center;
  text-decoration: none;
}
.btn-primary   { color: var(--color-on-primary);   border-color: var(--color-primary);   background-color: var(--color-primary); }
.btn-secondary { color: var(--color-on-secondary);  border-color: var(--color-secondary);  background-color: var(--color-secondary); }
.btn-accent    { color: var(--color-on-accent);    border-color: var(--color-accent);    background-color: var(--color-accent); }
.btn-outline   { color: var(--color-primary);      border: 1px solid var(--color-primary); background-color: var(--color-surface); }
.btn-link      { color: var(--color-primary);      box-shadow: none; border-color: transparent; text-decoration: underline; background-color: transparent; }
.btn-sm  { padding: var(--spacing-sm)  var(--spacing-md); }
.btn-lg  { padding: var(--spacing-lg)  var(--spacing-xl); }
.btn-xl  { padding: var(--spacing-xl)  var(--spacing-2xl); }
.btn:focus-visible { outline: 2px solid var(--color-outline); outline-offset: 2px; }
.btn:disabled      { cursor: not-allowed; opacity: 0.6; pointer-events: none; }
.btn-primary:hover:not(:disabled)   { color: #fff; border-color: var(--color-secondary); background-color: var(--color-secondary); }
.btn-secondary:hover:not(:disabled) { border-color: color-mix(in oklab, var(--color-secondary) 90%, var(--color-surface)); background-color: color-mix(in oklab, var(--color-secondary) 90%, var(--color-surface)); }
.btn-accent:hover:not(:disabled)    { border-color: color-mix(in oklab, var(--color-accent) 90%, var(--color-surface)); background-color: color-mix(in oklab, var(--color-accent) 90%, var(--color-surface)); }
.btn-outline:hover:not(:disabled)   { color: var(--color-on-primary); border-color: var(--color-primary); background-color: var(--color-primary); }
.btn-link:hover:not(:disabled)      { color: color-mix(in oklab, var(--color-primary) 80%, black); text-decoration: underline; }

/* backward-compat aliases for old btn--* classes on inner pages */
.btn--primary   { color: var(--color-on-primary);   border-color: var(--color-primary);   background-color: var(--color-primary); }
.btn--secondary { color: var(--color-on-secondary);  border-color: var(--color-secondary);  background-color: var(--color-secondary); }
.btn--accent    { color: var(--color-on-accent);    border-color: var(--color-accent);    background-color: var(--color-accent); }
.btn--outline   { color: var(--color-primary);      border: 1px solid var(--color-primary); background-color: var(--color-surface); }
.btn--ghost     { color: var(--color-surface);      border: 1px solid var(--color-surface); background-color: transparent; }
.btn--primary:hover:not(:disabled) { color: #fff; border-color: var(--color-secondary); background-color: var(--color-secondary); }
.btn--hover-accent:hover:not(:disabled) { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn--outline:hover:not(:disabled) { color: var(--color-on-primary); background-color: var(--color-primary); }

/* ── 5. Typography utilities ──────────────────────────────── */
.section-title {
  font-size: var(--font-size-3xl);
  font-style: var(--font-style-heading);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}
.section-subtitle {
  opacity: 0.85;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
.section-content {
  font-size: var(--font-size-base);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}
.hero-title {
  font-size: var(--font-size-3xl);
  font-variant: small-caps;
  font-style: var(--font-style-heading);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--text-transform-heading);
}
.hero-subtitle {
  opacity: 0.85;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

/* ── 6. Navigation ────────────────────────────────────────── */
.navigation {
  top: 0;
  width: 100%;
  z-index: 1000;
  position: sticky;
  background: var(--color-surface);
  transition: all 0.3s ease;
  border-bottom: var(--divider-value);
}
.navigation-container {
  gap: var(--spacing-2xl);
  margin: 0 auto;
  display: flex;
  padding: var(--spacing-lg) var(--spacing-2xl);
  max-width: var(--content-max-width);
  align-items: center;
  justify-content: space-between;
}
.navigation-logo-link {
  display: flex;
  transition: opacity 0.3s ease;
  align-items: center;
  text-decoration: none;
}
.navigation-logo-link:hover { opacity: 0.8; }
.navigation-logo-text {
  color: var(--color-primary);
  margin: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  white-space: nowrap;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navigation-links {
  gap: var(--spacing-xl);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.navigation-link {
  color: var(--color-on-surface);
  padding: var(--spacing-sm) 0;
  position: relative;
  font-size: var(--font-size-base);
  transition: color 0.3s ease;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}
.navigation-link::after {
  left: 0; width: 0; bottom: 0; height: 2px;
  content: "";
  position: absolute;
  background: var(--color-secondary);
  transition: width 0.3s ease;
}
.navigation-link:hover          { color: var(--color-secondary); }
.navigation-link:hover::after   { width: 100%; }
.navigation-link.btn            { padding: var(--spacing-md) var(--spacing-lg); color: #fff; }
.navigation-link.btn::after     { display: none; }
.navigation-link.btn:hover      { color: #fff; background-color: var(--color-accent); border-color: var(--color-accent); }

/* Projets dropdown */
.nav-dropdown-container { position: relative; }
.nav-dropdown-container:hover .nav-dropdown,
.nav-dropdown-container:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  background: var(--color-surface);
  border: var(--divider-value);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-level-3);
  min-width: 240px;
  padding: var(--spacing-sm) 0;
  transition: all 0.2s ease;
  z-index: 1100;
  list-style: none;
}
/* Invisible bridge fills the gap so mouse moving to dropdown doesn't lose hover */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown-link {
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-dropdown-link:hover { background: var(--color-surface-elevated); color: var(--color-primary); }

/* Language switcher */
.nav-lang-switcher { display: flex; gap: var(--spacing-xs); align-items: center; }
.lang-btn {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-body);
  color: var(--color-on-surface-secondary);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.lang-btn:hover   { color: var(--color-primary); border-color: var(--color-primary); }
.lang-btn--active { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }

/* Search button */
.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  transition: color .2s;
}
.nav-search-btn:hover { color: var(--color-primary); }

/* Search overlay */
.nav-search-overlay {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  z-index: 200;
  padding: 1rem var(--spacing-lg);
  animation: searchSlideDown .2s ease;
}
@keyframes searchSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-search-overlay__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 640px;
  margin: 0 auto;
}
.nav-search-overlay__form input[type="search"] {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: .55rem 1rem;
  font-size: var(--font-size-base);
  font-family: var(--font-family-body);
  outline: none;
  background: var(--color-surface);
  color: var(--color-on-surface);
}
.nav-search-overlay__form input[type="search"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14,124,107,.15);
}
.nav-search-overlay__form button[type="submit"] {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius-md);
  padding: .55rem .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .2s;
}
.nav-search-overlay__form button[type="submit"]:hover { background: var(--color-secondary); }
.nav-search-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-on-surface-secondary);
  padding: .4rem;
  transition: color .2s;
}
.nav-search-overlay__close:hover { color: var(--color-primary); }

/* Mobile search form */
.nav-search-form-mobile {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: var(--spacing-md) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.nav-search-form-mobile input[type="search"] {
  flex: 1;
  border: none;
  padding: .55rem .75rem;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  outline: none;
  background: transparent;
  color: var(--color-on-surface);
}
.nav-search-form-mobile button {
  background: none;
  border: none;
  padding: .55rem .75rem;
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  transition: color .2s;
}
.nav-search-form-mobile button:hover { color: var(--color-primary); }

/* Mobile toggle */
.navigation-toggle {
  color: var(--color-on-surface);
  width: 44px; height: 44px;
  border: none; cursor: pointer;
  display: none;
  padding: var(--spacing-sm);
  background: transparent;
  transition: background 0.3s ease;
  align-items: center;
  border-radius: var(--border-radius-sm);
  justify-content: center;
}
.navigation-toggle:hover         { background: var(--color-surface-elevated); }
.navigation-toggle:focus-visible { outline: 2px solid var(--color-outline); outline-offset: 2px; }

/* Mobile overlay */
.navigation-mobile-overlay {
  inset: 0;
  display: none;
  z-index: 1100;
  position: fixed;
  transform: translateX(100%);
  background: var(--color-surface);
  min-height: 100vh;
  overflow-y: auto;
  transition: transform 0.4s ease;
  pointer-events: auto;
}
.navigation-mobile-overlay.navigation-mobile-open { transform: translateX(0); }
.navigation-mobile-header {
  top: 0;
  display: flex;
  padding: var(--spacing-lg) var(--spacing-2xl);
  z-index: 1110;
  position: sticky;
  background: var(--color-surface);
  align-items: center;
  border-bottom: var(--divider-value);
  justify-content: space-between;
}
.navigation-mobile-links {
  gap: var(--spacing-md);
  display: flex;
  padding: var(--spacing-3xl) var(--spacing-2xl);
  flex-direction: column;
  padding-bottom: var(--spacing-4xl);
}
.navigation-mobile-link {
  color: var(--color-on-surface);
  opacity: 0;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  transform: translateY(20px);
  transition: all 0.3s ease;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}
.navigation-mobile-link:hover        { color: var(--color-secondary); padding-left: var(--spacing-md); border-bottom-color: var(--color-secondary); }
.navigation-mobile-link.btn          { width: fit-content; padding: var(--spacing-lg) var(--spacing-2xl); font-size: var(--font-size-lg); margin-top: var(--spacing-xl); }
.navigation-mobile-link.btn:hover    { padding-left: var(--spacing-2xl); border-bottom-color: transparent; }
.navigation-mobile-open .navigation-mobile-link { opacity: 1; transform: translateY(0); }
.navigation-mobile-link:nth-child(1) { transition-delay: 0.05s; }
.navigation-mobile-link:nth-child(2) { transition-delay: 0.10s; }
.navigation-mobile-link:nth-child(3) { transition-delay: 0.15s; }
.navigation-mobile-link:nth-child(4) { transition-delay: 0.20s; }
.navigation-mobile-link:nth-child(5) { transition-delay: 0.25s; }
.navigation-mobile-link:nth-child(6) { transition-delay: 0.30s; }
.navigation-mobile-link:nth-child(7) { transition-delay: 0.35s; }
.navigation-mobile-close {
  color: var(--color-on-surface);
  width: 48px; height: 48px;
  border: none; cursor: pointer;
  display: flex;
  padding: var(--spacing-sm);
  background: transparent;
  transition: background 0.3s ease, transform 0.3s ease;
  align-items: center;
  border-radius: var(--border-radius-sm);
  justify-content: center;
}
.navigation-mobile-close:hover         { transform: rotate(90deg); background: var(--color-surface-elevated); }
.navigation-mobile-close:focus-visible { outline: 2px solid var(--color-outline); outline-offset: 2px; }
.navigation-mobile-logo-link           { display: flex; align-items: center; text-decoration: none; }

/* ── 7. Cookie banner ─────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #1a1a1a;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 2rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
}
.cookie-banner__text { margin: 0; font-size: .875rem; line-height: 1.5; flex: 1; }
.cookie-banner__link { color: var(--color-secondary); text-decoration: underline; white-space: nowrap; margin-left: .35rem; }
.cookie-banner__actions { display: flex; gap: .75rem; flex-shrink: 0; }
.cookie-banner__btn {
  padding: .45rem 1.1rem;
  border-radius: var(--border-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity .15s;
}
.cookie-banner__btn:hover { opacity: .85; }
.cookie-banner__btn--refuse {
  background: transparent;
  border-color: #555;
  color: #ccc;
}
.cookie-banner__btn--accept {
  background: var(--color-primary);
  color: #fff;
}
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; padding: 1rem; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__btn { flex: 1; text-align: center; }
}

/* ── 8. Footer ────────────────────────────────────────────── */
.footer {
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, var(--color-surface-elevated) 0%, var(--color-surface) 100%);
}
.footer::before {
  top: 0; left: 0; right: 0; height: 1px;
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.footer-main {
  width: 100%;
  padding-top: var(--spacing-4xl);
  padding-bottom: var(--spacing-3xl);
}
.footer-bottom {
  width: 100%;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}
.footer-content {
  gap: var(--spacing-4xl);
  margin: 0 auto;
  display: flex;
  max-width: var(--content-max-width);
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}
.footer-bottom-content {
  gap: var(--spacing-xl);
  margin: 0 auto;
  display: flex;
  max-width: var(--content-max-width);
  align-items: center;
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
  justify-content: space-between;
}
.footer-column         { gap: var(--spacing-lg); flex: 1; display: flex; flex-direction: column; }
.footer-column-brand   { flex: 1.5; max-width: 380px; }
.footer-logo           { margin-bottom: var(--spacing-sm); }
.footer-logo-text      { color: var(--color-primary); font-size: var(--font-size-xl); font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); letter-spacing: -0.02em; }
.footer-description    { color: var(--color-on-surface-secondary); margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.footer-social         { gap: var(--spacing-md); display: flex; margin-top: var(--spacing-md); }
.footer-social-link {
  color: var(--color-primary);
  width: 44px; height: 44px;
  border: 1px solid var(--color-border);
  display: flex;
  background: var(--color-surface);
  transition: all 0.3s ease;
  align-items: center;
  border-radius: var(--border-radius-md);
  justify-content: center;
}
.footer-social-link:hover         { color: var(--color-on-primary); transform: translateY(-2px); background: var(--color-primary); border-color: var(--color-primary); }
.footer-social-link:focus-visible { outline: 2px solid var(--color-outline); outline-offset: 2px; }
.footer-column-title   { color: var(--color-on-surface); margin: 0; font-size: var(--font-size-lg); font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); }
.footer-nav            { gap: var(--spacing-sm); display: flex; flex-direction: column; }
.footer-link {
  color: var(--color-on-surface-secondary);
  width: fit-content;
  position: relative;
  font-size: var(--font-size-base);
  transition: all 0.2s ease;
  line-height: var(--line-height-body);
  text-decoration: none;
}
.footer-link::after        { left: 0; width: 0; bottom: -2px; height: 2px; content: ""; position: absolute; background: var(--color-primary); transition: width 0.3s ease; }
.footer-link:hover         { color: var(--color-primary); }
.footer-link:hover::after  { width: 100%; }
.footer-link:focus-visible { outline: 2px solid var(--color-outline); border-radius: var(--border-radius-sm); outline-offset: 2px; }
.footer-contact-list   { gap: var(--spacing-md); display: flex; flex-direction: column; }
.footer-contact-item   { gap: var(--spacing-sm); display: flex; align-items: flex-start; }
.footer-contact-icon   { color: var(--color-secondary); margin-top: 2px; flex-shrink: 0; }
.footer-contact-link   { color: var(--color-on-surface-secondary); font-size: var(--font-size-base); transition: color 0.2s ease; line-height: var(--line-height-body); text-decoration: none; }
.footer-contact-link:hover { color: var(--color-primary); }
.footer-contact-text   { color: var(--color-on-surface-secondary); font-size: var(--font-size-base); line-height: var(--line-height-body); }
.footer-copyright      { color: var(--color-on-surface-secondary); margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.footer-legal          { gap: var(--spacing-md); display: flex; align-items: center; }
.footer-legal-link     { color: var(--color-on-surface-secondary); font-size: var(--font-size-sm); transition: color 0.2s ease; white-space: nowrap; text-decoration: none; }
.footer-legal-link:hover { color: var(--color-primary); }
.footer-legal-separator  { color: var(--color-border); font-size: var(--font-size-sm); }

/* ── 8. Hero ──────────────────────────────────────────────── */
.hero-section {
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 90vh;
  align-items: center;
  justify-content: center;
  background-color: #0e7c6b;
}
.hero-video {
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  position: absolute;
  object-fit: cover;
  background: #0e7c6b;
  transition: opacity .2s ease;
}
.hero-video--fading { opacity: 0; }
.hero-overlay {
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  position: absolute;
  background: var(--color-scrim);
}
.hero-content {
  color: var(--color-surface);
  padding: var(--spacing-2xl);
  z-index: 3;
  position: relative;
  max-width: 56rem;
  text-align: center;
}
.hero-content .hero-title    { color: var(--color-surface); margin-bottom: var(--spacing-xl); }
.hero-content .hero-subtitle { color: var(--color-surface); opacity: 0.95; font-size: var(--font-size-xl); margin-bottom: var(--spacing-3xl); }
.hero-actions                { gap: var(--spacing-lg); display: flex; align-items: center; justify-content: center; }
.hero-btn-secondary          { color: var(--color-surface); border-color: var(--color-surface); background-color: transparent; }
.hero-btn-secondary:hover:not(:disabled) { color: var(--color-primary); border-color: var(--color-surface); background-color: var(--color-surface); }
.hero-scroll-indicator {
  gap: var(--spacing-sm);
  left: 50%; bottom: var(--spacing-3xl);
  color: var(--color-surface);
  display: flex;
  opacity: 0.8;
  z-index: 3;
  position: absolute;
  animation: heroFloat 2s ease-in-out infinite;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.hero-scroll-text        { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.1em; text-transform: uppercase; }
.hero-scroll-indicator svg { opacity: 0.6; }

@keyframes heroFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-10px); }
}

/* ── 9. Mission ───────────────────────────────────────────── */
.mission-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: var(--color-surface);
}
.mission-container {
  gap: var(--spacing-4xl);
  margin: 0 auto;
  display: flex;
  max-width: var(--content-max-width);
  align-items: flex-start;
}
.mission-content                          { flex: 1; }
.mission-visual                           { flex: 1; position: relative; }
.mission-content .section-title          { color: var(--color-on-surface); margin-bottom: var(--spacing-xl); }
.mission-description                     { color: var(--color-on-surface); margin-bottom: var(--spacing-lg); }
.mission-values                          { gap: var(--spacing-2xl); display: flex; margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }
.mission-value-item                      { gap: var(--spacing-sm); display: flex; text-align: center; align-items: center; flex-direction: column; }
.mission-value-item svg                  { color: var(--color-primary); width: 32px; height: 32px; }
.mission-value-item span                 { color: var(--color-on-surface); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.mission-image-wrapper {
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border-radius: var(--border-radius-lg);
}
.mission-image                           { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.mission-image-wrapper:hover .mission-image { transform: scale(1.05); }
.mission-highlight {
  left: var(--spacing-lg); right: var(--spacing-lg); bottom: var(--spacing-2xl);
  border: 1px solid color-mix(in srgb, var(--color-surface) 20%, transparent);
  padding: var(--spacing-lg) var(--spacing-xl);
  position: absolute;
  background: var(--color-backplate);
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(12px);
}
.mission-highlight-text { color: var(--color-surface); margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }

/* CMS blocks */
.block-img--banner {
  width: 100%;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-xl);
  display: block;
}
.block-img--banner--crop {
  max-height: 400px;
  object-fit: cover;
}
.block-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-xl);
}
.block-body {
  color: var(--color-on-surface);
  line-height: var(--line-height-body);
  font-size: 1.0625rem;
}
.block-body p { margin-bottom: var(--spacing-lg); }
.block-body a:not(.btn) { color: var(--color-primary); text-decoration: underline; }
.block-body ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--spacing-lg);
}
.block-body ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--spacing-sm);
}
.block-body ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: .05em;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
}
.mission-block { padding: var(--spacing-2xl); position: relative; overflow: hidden; }

/* Mode image de fond sur mission-block */
.mission-block--bg-img {
  background-size: cover;
  background-position: center;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mission-block--bg-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);
  z-index: 0;
}
.mission-block--bg-img > * { position: relative; z-index: 1; }
.mission-block--bg-img,
.mission-block--bg-img .block-title,
.mission-block--bg-img .block-body,
.mission-block--bg-img p,
.mission-block--bg-img a { color: #fff; }
.mission-block--bg-img .mission-signature__name,
.mission-block--bg-img .mission-signature__role { color: rgba(255,255,255,.8); }
.mission-block--bg-img .mission-quote-mark { color: #fff; opacity: .08; }

.mission-quote-mark {
  position: absolute;
  top: -.5rem;
  right: 1rem;
  font-family: Georgia, serif;
  font-size: 14rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.mission-signature {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-md);
  border-top: 2px solid var(--color-primary);
}
.mission-signature__name {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-primary);
}
.mission-signature__role {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-muted, #6b7280);
  font-style: italic;
}

/* ── 10. Stats ────────────────────────────────────────────── */
.stats-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)) 0%, var(--color-surface) 100%);
}
.stats-container                    { margin: 0 auto; max-width: var(--content-max-width); }
.stats-intro                        { text-align: center; margin-bottom: var(--spacing-4xl); }
.stats-intro .section-title         { color: var(--color-on-surface); margin-bottom: var(--spacing-md); }
.stats-intro .section-subtitle      { color: var(--color-on-surface-secondary); }
.stats-grid                         { gap: var(--spacing-2xl); display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-card {
  border: 1px solid var(--color-border);
  padding: var(--spacing-3xl);
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: all 0.3s ease;
  border-radius: var(--border-radius-lg);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); border-color: var(--color-primary); }
.stat-icon {
  color: var(--color-on-primary);
  width: 56px; height: 56px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  align-items: center;
  border-radius: var(--border-radius-full);
  justify-content: center;
}
.stat-icon svg  { width: 28px; height: 28px; }
.stat-value {
  color: var(--color-primary);
  font-size: var(--font-size-4xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.1;
  margin-bottom: var(--spacing-md);
}
.stat-label     { color: var(--color-on-surface-secondary); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }

/* ── 11. Services ─────────────────────────────────────────── */
.services-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: var(--color-surface);
}
.services-container                  { margin: 0 auto; max-width: var(--content-max-width); }
.services-header                     { text-align: center; margin-bottom: var(--spacing-4xl); }
.services-header .section-title      { color: var(--color-on-surface); margin-bottom: var(--spacing-md); }
.services-header .section-subtitle   { color: var(--color-on-surface-secondary); }
.services-grid                       { gap: var(--spacing-2xl); display: grid; grid-template-columns: 1fr 1fr; }
.service-card {
  gap: var(--spacing-lg);
  border: 1px solid var(--color-border);
  display: flex;
  padding: var(--spacing-3xl);
  background: var(--color-surface-elevated);
  transition: all 0.3s ease;
  border-radius: var(--border-radius-lg);
  flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); border-color: var(--color-accent); }
.service-icon-wrapper {
  color: var(--color-on-accent);
  width: 64px; height: 64px;
  display: flex;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  align-items: center;
  border-radius: var(--border-radius-md);
  justify-content: center;
}
.service-icon-wrapper svg { width: 32px; height: 32px; }
.service-title {
  color: var(--color-on-surface);
  margin: 0;
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
.service-description { flex: 1; color: var(--color-on-surface-secondary); font-size: var(--font-size-base); line-height: var(--line-height-body); }
.service-link {
  gap: var(--spacing-sm);
  color: var(--color-primary);
  display: flex;
  transition: all 0.3s ease;
  align-items: center;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.service-link:hover          { gap: var(--spacing-md); color: var(--color-accent); }
.service-link svg            { transition: transform 0.3s ease; }
.service-link:hover svg      { transform: translateX(4px); }

/* ── 12. Projects ─────────────────────────────────────────── */
.projects-section {
  padding: var(--spacing-4xl) 0;
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) 100%);
}
.projects-header                              { padding: 0 var(--spacing-2xl) var(--spacing-3xl); }
.projects-header-content                      { margin: 0 auto; max-width: var(--content-max-width); text-align: center; }
.projects-header-content .section-title       { color: var(--color-on-surface); margin-bottom: var(--spacing-md); }
.projects-header-content .section-subtitle    { color: var(--color-on-surface-secondary); }

/* Projects carousel */
.projects-carousel-wrap {
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: 0 var(--spacing-2xl);
}
.projects-carousel {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* Project slide: image left / content right */
.project-slide {
  flex: 0 0 100%;
  display: flex;
  min-height: 420px;
  background: var(--color-surface);
  overflow: hidden;
}
.project-slide__image {
  flex: 0 0 48%;
  overflow: hidden;
  position: relative;
}
.project-slide__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.project-slide:hover .project-slide__image img { transform: scale(1.04); }
.project-slide__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-4xl);
  justify-content: center;
}
.project-slide__num {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.project-title {
  color: var(--color-on-surface);
  margin: 0;
  font-size: var(--font-size-2xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
.project-objective { color: var(--color-on-surface-secondary); margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-body); }
.project-impact    { color: var(--color-on-surface-secondary); margin: 0; font-size: var(--font-size-base); line-height: var(--line-height-body); }
.project-objective::before { content: "🎯 "; }
.project-impact::before    { content: "✨ "; }

/* ── 13. Blog (Actualités) ────────────────────────────────── */
.blog-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: var(--color-surface);
}
.blog-container          { margin: 0 auto; max-width: var(--content-max-width); }
.blog-header             { display: flex; align-items: center; margin-bottom: var(--spacing-3xl); justify-content: space-between; }
.blog-header .section-title { color: var(--color-on-surface); margin: 0; }
.blog-grid               { gap: var(--spacing-2xl); display: grid; grid-template-columns: repeat(3, 1fr); }
.blog-card {
  border: 1px solid var(--color-border);
  display: flex;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  border-radius: var(--border-radius-lg);
  flex-direction: column;
}
.blog-card:hover              { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); border-color: var(--color-secondary); }
.blog-image-wrapper           { width: 100%; height: 220px; overflow: hidden; }
.blog-image                   { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-image  { transform: scale(1.08); }
.blog-content                 { gap: var(--spacing-md); flex: 1; display: flex; padding: var(--spacing-xl); flex-direction: column; }
.blog-date {
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.blog-title {
  color: var(--color-on-surface);
  margin: 0;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
.blog-excerpt { flex: 1; color: var(--color-on-surface-secondary); font-size: var(--font-size-base); line-height: var(--line-height-body); }
.blog-link    { color: var(--color-primary); display: inline-block; transition: color 0.3s ease; font-weight: var(--font-weight-medium); text-decoration: none; }
.blog-link:hover { color: var(--color-accent); text-decoration: underline; }

/* ── 14. Newsletter ───────────────────────────────────────── */
.newsletter-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)) 0%, var(--color-surface) 100%);
}
.newsletter-container                    { margin: 0 auto; max-width: var(--content-max-width); }
.newsletter-header                       { display: flex; align-items: center; margin-bottom: var(--spacing-3xl); justify-content: space-between; }
.newsletter-header .section-title        { color: var(--color-on-surface); margin: 0; }
.newsletter-grid                         { gap: var(--spacing-2xl); display: grid; grid-template-columns: repeat(3, 1fr); }

/* Subscribe form block */
.nl-subscribe {
  margin-top: var(--spacing-4xl);
  padding: var(--spacing-3xl);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  text-align: center;
}
.nl-subscribe-title {
  font-size: var(--font-size-2xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-md);
}
.nl-subscribe-text  { color: var(--color-on-surface-secondary); margin-bottom: var(--spacing-xl); font-size: var(--font-size-base); }
.nl-form            { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; }
.nl-input {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-control);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  min-width: 260px;
  color: var(--color-on-surface);
  background: var(--color-surface);
  transition: border-color 0.2s ease;
}
.nl-input:focus { outline: 2px solid var(--color-outline); outline-offset: 2px; border-color: var(--color-primary); }
.nl-message     { width: 100%; margin-top: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--color-secondary); }

/* ── 15. CTA ──────────────────────────────────────────────── */
.cta-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)) 100%);
}
.cta-container    { margin: 0 auto; max-width: var(--content-max-width); }
.cta-card {
  border: 1px solid var(--color-border);
  padding: var(--spacing-4xl);
  background: var(--color-surface);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border-radius: var(--border-radius-xl);
}
.cta-content      { text-align: center; margin-bottom: var(--spacing-4xl); }
.cta-title        { color: var(--color-on-surface); margin-bottom: var(--spacing-lg); }
.cta-description  { color: var(--color-on-surface); margin: 0 auto var(--spacing-xl); font-size: var(--font-size-lg); max-width: 48rem; }
.cta-trust {
  gap: var(--spacing-md);
  width: max-content;
  margin: 0 auto;
  display: flex;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  align-items: center;
  border-radius: var(--border-radius-md);
  justify-content: center;
}
.cta-trust svg    { color: var(--color-accent); flex-shrink: 0; }
.cta-trust-text   { color: var(--color-on-surface); margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.cta-actions      { gap: var(--spacing-2xl); display: grid; grid-template-columns: repeat(3, 1fr); }
.cta-action-item {
  border: 1px solid var(--color-border);
  padding: var(--spacing-2xl);
  background: color-mix(in srgb, var(--color-primary) 3%, transparent);
  text-align: center;
  transition: all 0.3s ease;
  border-radius: var(--border-radius-lg);
}
.cta-action-item:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-color: var(--color-primary); }
.cta-action-title {
  color: var(--color-on-surface);
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  margin-bottom: var(--spacing-md);
}
.cta-action-text  { color: var(--color-on-surface-secondary); font-size: var(--font-size-base); line-height: var(--line-height-body); margin-bottom: var(--spacing-xl); }

/* ── 16. Bureau carousel ──────────────────────────────────── */
.bureau-section {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-secondary) 6%, var(--color-surface)) 100%);
}
.bureau-container                        { margin: 0 auto; max-width: var(--content-max-width); }
.bureau-header                           { text-align: center; margin-bottom: var(--spacing-4xl); }
.bureau-header .section-title            { color: var(--color-on-surface); margin-bottom: var(--spacing-md); }
.bureau-header .section-subtitle         { color: var(--color-on-surface-secondary); }
.carousel-wrap                           { position: relative; }
.carousel                                { overflow: hidden; border-radius: var(--border-radius-lg); }
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.carousel-item {
  flex: 0 0 100%;
  display: flex;
  gap: var(--spacing-2xl);
  padding: var(--spacing-3xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  align-items: flex-start;
  box-shadow: var(--shadow-level-2);
}
.carousel-item__photo {
  width: 100px; height: 100px;
  border-radius: var(--border-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-border);
}
.carousel-item__name {
  font-size: var(--font-size-xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-xs);
}
.carousel-item__role {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-md);
}
.carousel-item__bio {
  font-size: var(--font-size-base);
  color: var(--color-on-surface-secondary);
  line-height: var(--line-height-body);
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}
.carousel-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.carousel-btn:hover   { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.carousel-dots        { display: flex; gap: var(--spacing-sm); }
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: var(--border-radius-full);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.carousel-dot.active  { background: var(--color-primary); width: 24px; }

/* ── 17. Partners ─────────────────────────────────────────── */
.partners-section {
  padding: var(--spacing-3xl) var(--spacing-2xl);
  background: var(--color-surface);
  border-top: var(--divider-value);
}
.partners-container { margin: 0 auto; max-width: var(--content-max-width); }
.partners-header    { text-align: center; margin-bottom: var(--spacing-3xl); }
.partners-header .section-title { color: var(--color-on-surface-secondary); font-size: var(--font-size-xl); }
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  align-items: center;
  justify-content: center;
}
.partner-logo {
  height: 48px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.partner-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }

/* ── 18. Inner pages & shared components ──────────────────── */

/* Container & section wrappers */
.container {
  margin: 0 auto;
  max-width: var(--content-max-width);
  width: 100%;
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}
.section { padding: var(--spacing-4xl) 0; }
/* article.article-layout is standalone on detail pages; div.article-layout is inside .section */
article.article-layout.container { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }

/* Page banner */
.page-banner {
  padding: var(--spacing-4xl) var(--spacing-2xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  background-size: cover;
  background-position: center;
  color: var(--color-on-primary);
  text-align: center;
  position: relative;
}
/* When a background image is set inline, overlay it with a teal scrim */
.page-banner[style] {
  background-color: var(--color-primary);
  background-blend-mode: multiply;
}
.page-banner h1 {
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-on-primary);
  margin-bottom: var(--spacing-md);
}
.page-banner__title {
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-md);
}
.page-banner__cta { margin-top: var(--spacing-xl); }
.page-banner__subtitle { font-size: var(--font-size-lg); opacity: 0.9; max-width: 48rem; margin: 0 auto; }
.page-banner__tag {
  display: inline-block;
  background: color-mix(in srgb, var(--color-on-primary) 20%, transparent);
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-full);
  margin-bottom: var(--spacing-lg);
}
.page-content   { padding: var(--spacing-4xl) var(--spacing-2xl); }
.page-container { margin: 0 auto; max-width: var(--content-max-width); }

/* Article layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--spacing-4xl);
  align-items: start;
}
.article-body h2, .article-body h3 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-heading);
}
.article-body h2  { font-size: var(--font-size-2xl); }
.article-body h3  { font-size: var(--font-size-xl); }
.article-body p   { margin-bottom: var(--spacing-lg); line-height: var(--line-height-body); color: var(--color-on-surface); }
.article-body ul  { padding-left: var(--spacing-2xl); margin-bottom: var(--spacing-lg); }
.article-body li  { margin-bottom: var(--spacing-sm); line-height: var(--line-height-body); color: var(--color-on-surface); }
.article-body a:not(.btn) { color: var(--color-primary); }
.article-body img { border-radius: var(--border-radius-md); margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 0; max-width: 100%; }
.article-body iframe { display: block; margin: var(--spacing-2xl) auto; max-width: 100%; }

/* Images inline dans les articles / newsletters */
.img-left {
  float: left;
  max-width: 280px;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  margin: 0 var(--spacing-xl) var(--spacing-lg) 0;
  shape-outside: margin-box;
}
.img-right {
  float: right;
  max-width: 280px;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  margin: 0 0 var(--spacing-lg) var(--spacing-xl);
  shape-outside: margin-box;
}
.img-banner {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  margin: 0 0 var(--spacing-xl) 0;
}


/* Article header / meta */
.article-header   { margin-bottom: var(--spacing-3xl); }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  margin-bottom: var(--spacing-xl);
  transition: color 0.2s ease;
}
.article-back:hover { color: var(--color-accent); }
.article-title {
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-lg);
}
.article-subtitle { font-size: var(--font-size-lg); color: var(--color-on-surface-secondary); margin-bottom: var(--spacing-md); }
.article-date {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Article figure */
.article-figure { margin: var(--spacing-3xl) 0; }
.article-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  display: block;
}

/* Article attachments */
.article-attachments {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: var(--divider-value);
}
.article-attachments__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}
.attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.attachments-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  word-break: break-all;
}
.attachments-list__link:hover {
  text-decoration: underline;
}

/* Article footer */
.article-footer {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: var(--divider-value);
}

/* Blockquote */
.article-body blockquote {
  margin: var(--spacing-3xl) 0;
  padding: var(--spacing-2xl) var(--spacing-3xl);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}
.article-body blockquote p      { color: var(--color-on-surface); font-style: italic; }
.article-body blockquote footer { color: var(--color-on-surface-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }

/* Project CTA */
.project-cta {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: var(--divider-value);
}

/* Sidebar */
.article-sidebar { position: sticky; top: calc(72px + var(--spacing-2xl)); }
.sidebar-title {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--divider-value);
}
.sidebar-block {
  padding: var(--spacing-2xl);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-2xl);
}
.sidebar-block__title {
  font-size: var(--font-size-lg);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: var(--divider-value);
}

/* Sidebar: related articles / newsletters */
.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-lg); margin-bottom: var(--spacing-3xl); }
.sidebar-item__link {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sidebar-item__link:hover .sidebar-item__title { color: var(--color-primary); }
.sidebar-item__img   { width: 64px; height: 56px; object-fit: cover; border-radius: var(--border-radius-sm); flex-shrink: 0; }
.sidebar-item__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-on-surface); line-height: var(--line-height-heading); }
.sidebar-item__date  { font-size: var(--font-size-xs); color: var(--color-secondary); margin-top: var(--spacing-xs); display: block; }

/* Sidebar: bureau members */
.sidebar-bureau       { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-lg); }
.sidebar-bureau__item {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  padding-bottom: var(--spacing-md);
  border-bottom: var(--divider-value);
}
.sidebar-bureau__item:last-child { border-bottom: none; }
.sidebar-bureau__item img  { border-radius: var(--border-radius-full); object-fit: cover; flex-shrink: 0; }
.sidebar-bureau__info { flex: 1; min-width: 0; }
.sidebar-bureau__name { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-on-surface); }
.sidebar-bureau__role { font-size: var(--font-size-xs); color: var(--color-secondary); }
.sidebar-bureau__linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-secondary);
  transition: color var(--transition-fast);
  margin-left: auto;
}
.sidebar-bureau__linkedin:hover { color: var(--color-primary); }

/* Sidebar: project links */
.sidebar-projects { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-3xl); }
.sidebar-projects__item a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.sidebar-projects__item a:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); border-left-color: var(--color-secondary); }
.sidebar-projects__item--active a { color: var(--color-primary); font-weight: var(--font-weight-medium); background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-left-color: var(--color-primary); }

/* Sidebar: contact block */
.sidebar-contact         { margin-top: var(--spacing-3xl); }
.sidebar-contact p       { color: var(--color-on-surface-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); }

/* Sidebar: newsletter subscribe */
.sidebar-subscribe {
  margin-bottom: var(--spacing-3xl);
  padding: var(--spacing-2xl);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
}
.sidebar-subscribe .sidebar-title { border-bottom: none; padding-bottom: 0; }
.sidebar-subscribe p  { color: var(--color-on-surface-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); }
.sidebar-subscribe .nl-form    { flex-direction: column; gap: var(--spacing-md); }
.sidebar-subscribe .nl-input   { min-width: 0; width: 100%; }

/* Cards grid (listing pages) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2xl);
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.card:hover                     { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); }
.card__image-wrap               { display: block; overflow: hidden; height: 200px; position: relative; }
.card__image-wrap img           { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card__image-wrap img { transform: scale(1.05); }
.card__date {
  position: absolute;
  bottom: var(--spacing-sm); left: var(--spacing-sm);
  background: var(--color-backplate);
  color: var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  backdrop-filter: blur(4px);
}
.card__body     { padding: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-md); flex: 1; }
.card__title    { font-size: var(--font-size-lg); font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); color: var(--color-on-surface); line-height: var(--line-height-heading); }
.card__title a  { color: inherit; }
.card__title a:hover { color: var(--color-primary); }
.card__subtitle { color: var(--color-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.card__excerpt  { color: var(--color-on-surface-secondary); font-size: var(--font-size-base); line-height: var(--line-height-body); flex: 1; }
.card__link     { margin-top: auto; width: fit-content; }
.load-more-wrap { text-align: center; margin-top: var(--spacing-3xl); }
.section-header { text-align: center; margin-bottom: var(--spacing-3xl); }

/* Newsletter subscribe block (listing page) */
.nl-subscribe-block {
  margin-top: var(--spacing-4xl);
  padding: var(--spacing-3xl);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  text-align: center;
}
.nl-subscribe-block h2 {
  font-size: var(--font-size-2xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-md);
}
.nl-subscribe-block p { color: var(--color-on-surface-secondary); margin-bottom: var(--spacing-xl); }

/* Newsletter form — multi-step */
.nl-form-row { display: flex; gap: var(--spacing-md); flex-wrap: wrap; justify-content: center; margin-bottom: var(--spacing-md); }
.nl-form-row .nl-input { flex: 1 1 180px; }
.nl-input--wide  { flex: 2 1 260px !important; }
.nl-input--md    { width: 280px; max-width: 100%; flex: none; }
.nl-input--code  { max-width: 180px; text-align: center; letter-spacing: .25em; font-size: 1.20rem; font-weight: 600; }
.nl-info    { font-size: var(--font-size-sm); color: var(--color-on-surface-secondary); margin-bottom: var(--spacing-lg); }
.nl-success { color: var(--color-primary); font-weight: 600; font-size: var(--font-size-lg); margin-bottom: var(--spacing-lg); }

/* Gestion abonnement */
.nl-manage-wrap { max-width: 560px; margin: 0 auto; }
.nl-manage-wrap h3 { font-family: var(--font-family-heading); font-size: var(--font-size-xl); margin: var(--spacing-2xl) 0 var(--spacing-md); }
.nl-manage-wrap h4 { font-size: var(--font-size-base); margin: var(--spacing-xl) 0 var(--spacing-sm); }
.nl-manage-wrap .nl-form { flex-direction: column; align-items: stretch; }
.nl-manage-wrap .nl-form-row { justify-content: flex-start; }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4xl);
  align-items: start;
}
.contact-info h2 {
  font-size: var(--font-size-2xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-xl);
}
.contact-info p { color: var(--color-on-surface-secondary); margin-bottom: var(--spacing-2xl); line-height: var(--line-height-body); }
.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}
.contact-list li  { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--font-size-base); color: var(--color-on-surface); }
.contact-list svg { color: var(--color-primary); flex-shrink: 0; }
.contact-list a   { color: var(--color-primary); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-social { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; }
.contact-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-control);
  transition: all 0.2s ease;
}
.contact-social__link:hover { color: var(--color-primary); border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.contact-form h2 { margin-bottom: var(--spacing-sm); }

.contact-field { display: flex; flex-direction: column; gap: .4rem; }
.contact-field label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-on-surface); }
.contact-field input,
.contact-field select,
.contact-field textarea {
  padding: .6rem .85rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-on-surface);
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { outline: none; border-color: var(--color-primary); }
.contact-field select { cursor: pointer; appearance: auto; }
.contact-field textarea { resize: vertical; min-height: 140px; }


.contact-alert {
  padding: .85rem 1.1rem;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.contact-alert--success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.contact-alert--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* 404 error page */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-2xl);
}
.error-page__code {
  font-size: clamp(6rem, 20vw, 10rem);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-primary);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: var(--spacing-lg);
}
.error-page__title {
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-on-surface);
  margin-bottom: var(--spacing-lg);
}
.error-page__text { color: var(--color-on-surface-secondary); font-size: var(--font-size-lg); margin-bottom: var(--spacing-3xl); }

/* Button size backward-compat alias */
.btn--lg { padding: var(--spacing-lg) var(--spacing-xl); }
.btn--sm { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); }

/* Reveal animation */
.reveal         { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── 19. Documents ────────────────────────────────────────── */
.doc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: var(--spacing-xl);
}
.doc-item__visual {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.doc-item__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.5rem;
}
.doc-item__icon {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.doc-item__body {
  flex: 1;
  min-width: 0;
}
.doc-item__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 0.25rem;
}
.doc-item__desc {
  font-size: 0.9rem;
  color: var(--color-on-surface-secondary);
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.doc-item__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.doc-item__badge {
  background: var(--color-primary);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: .04em;
}
.doc-item__size {
  color: var(--color-on-surface-secondary);
}
.doc-item__dl {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── 20. Responsive ───────────────────────────────────────── */
@media (max-width: 991px) {
  .navigation-container  { padding: var(--spacing-lg) var(--spacing-xl); }
  .navigation-links      { gap: var(--spacing-lg); }
  .navigation-link       { font-size: var(--font-size-sm); }
  .footer-content        { gap: var(--spacing-3xl); }
  .footer-column-brand   { flex: 1; max-width: 100%; }
  .hero-content          { padding: var(--spacing-xl); }
  .hero-actions          { width: 100%; flex-direction: column; }
  .hero-actions .btn     { width: 100%; }
  .mission-container     { gap: var(--spacing-3xl); flex-direction: column; }
  .mission-values        { gap: var(--spacing-lg); flex-direction: column; }
  .stats-grid            { gap: var(--spacing-xl); grid-template-columns: repeat(2, 1fr); }
  .services-grid         { gap: var(--spacing-xl); grid-template-columns: 1fr; }
  .project-slide         { flex-direction: column; min-height: auto; }
  .project-slide__image  { flex: 0 0 260px; }
  .project-slide__content { padding: var(--spacing-2xl); }
  .blog-header           { gap: var(--spacing-lg); align-items: flex-start; flex-direction: column; }
  .blog-grid             { gap: var(--spacing-xl); grid-template-columns: 1fr 1fr; }
  .newsletter-grid       { gap: var(--spacing-xl); grid-template-columns: 1fr 1fr; }
  .cta-actions           { gap: var(--spacing-xl); grid-template-columns: 1fr; }
  .cards-grid            { grid-template-columns: 1fr 1fr; }
  .article-layout        { grid-template-columns: 1fr; }
  .article-sidebar       { position: static; }
  .contact-grid          { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .img-left, .img-right { float: none; width: 100%; max-width: 100%; height: auto; margin: 0 0 var(--spacing-lg) 0; }
  .container                  { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .section                    { padding: var(--spacing-3xl) 0; }
  article.article-layout.container { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
  .page-banner                { padding: var(--spacing-3xl) var(--spacing-lg); }
  .contact-form               { gap: var(--spacing-lg); }
  .navigation-container       { padding: var(--spacing-md) var(--spacing-lg); }
  .navigation-mobile-overlay  { display: block; }
  .navigation-links           { display: none; }
  .navigation-toggle          { display: flex; }
  .navigation-mobile-header   { padding: var(--spacing-md) var(--spacing-lg); }
  .navigation-mobile-links    { padding: var(--spacing-2xl) var(--spacing-lg); }
  .navigation-mobile-link     { font-size: var(--font-size-xl); }
  .footer-main                { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-2xl); }
  .footer-content             { gap: var(--spacing-2xl); flex-direction: column; }
  .footer-bottom-content      { gap: var(--spacing-lg); align-items: flex-start; flex-direction: column; }
  .footer-column              { max-width: 100%; }
  .footer-legal               { flex-wrap: wrap; }
  .footer-copyright           { width: 100%; }
  .footer-column-brand        { order: 1; }
  .footer-column-links        { order: 2; }
  .footer-column-engage       { order: 3; }
  .footer-column-contact      { order: 4; }
  .hero-section               { min-height: 90vh; }
  .hero-scroll-indicator      { bottom: var(--spacing-xl); }
  .mission-section            { padding: var(--spacing-3xl) var(--spacing-lg); }
  .stats-section              { padding: var(--spacing-3xl) var(--spacing-lg); }
  .stat-card                  { padding: var(--spacing-2xl); }
  .services-section           { padding: var(--spacing-3xl) var(--spacing-lg); }
  .service-card               { padding: var(--spacing-2xl); }
  .projects-section           { padding: var(--spacing-3xl) 0; }
  .projects-header            { padding: 0 var(--spacing-lg) var(--spacing-2xl); }
  .projects-track             { padding: 0 var(--spacing-lg); }
  .project-card               { flex: 0 0 340px; }
  .project-content            { padding: var(--spacing-xl); }
  .blog-section               { padding: var(--spacing-3xl) var(--spacing-lg); }
  .blog-grid                  { grid-template-columns: 1fr; }
  .newsletter-section         { padding: var(--spacing-3xl) var(--spacing-lg); }
  .newsletter-grid            { grid-template-columns: 1fr; }
  .cta-section                { padding: var(--spacing-3xl) var(--spacing-lg); }
  .cta-card                   { padding: var(--spacing-2xl); }
  .cta-trust                  { padding: var(--spacing-lg); flex-direction: column; }
  .bureau-section             { padding: var(--spacing-3xl) var(--spacing-lg); }
  .carousel-item              { flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-2xl); }
  .cards-grid                 { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
  .navigation-logo-text    { font-size: var(--font-size-xl); }
  .navigation-mobile-link  { font-size: var(--font-size-lg); }
  .footer-content          { gap: var(--spacing-xl); padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .footer-bottom-content   { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .footer-legal            { gap: var(--spacing-sm); align-items: flex-start; flex-direction: column; }
  .footer-legal-separator  { display: none; }
  .footer-column-title     { font-size: var(--font-size-base); }
  .footer-logo-text        { font-size: var(--font-size-lg); }
  .footer-social-link      { width: 40px; height: 40px; }
  .hero-content            { padding: var(--spacing-lg); }
  .mission-values          { gap: var(--spacing-md); }
  .stat-value              { font-size: var(--font-size-3xl); }
  .stat-label              { font-size: var(--font-size-base); }
  .service-icon-wrapper    { width: 56px; height: 56px; }
  .project-card            { flex: 0 0 300px; }
  .project-image-wrapper   { height: 200px; }
  .blog-image-wrapper      { height: 180px; }
  .cta-card                { padding: var(--spacing-xl); }
  .cta-content             { margin-bottom: var(--spacing-3xl); }
}

/* ── Search page ─────────────────────────────────────────────────────────────── */
.search-page { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); max-width: var(--content-max-width); }
.search-page__head { margin-bottom: var(--spacing-2xl); }
.search-page__head h1 { font-family: var(--font-family-heading); margin-bottom: var(--spacing-xl); }
.search-form { margin: 0; }
.search-form__inner {
  display: flex;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  max-width: 600px;
  transition: border-color .2s;
}
.search-form__inner:focus-within { border-color: var(--color-primary); }
.search-form__inner input[type="search"] {
  flex: 1;
  border: none;
  padding: .75rem 1rem;
  font-size: var(--font-size-base);
  font-family: var(--font-family-body);
  outline: none;
  background: transparent;
  color: var(--color-on-surface);
}
.search-form__inner button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: .75rem 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .2s;
}
.search-form__inner button:hover { background: var(--color-secondary); }

.search-count      { color: var(--color-on-surface-secondary); margin-bottom: var(--spacing-xl); }
.search-no-results { color: var(--color-on-surface-secondary); font-size: var(--font-size-lg); margin-top: var(--spacing-2xl); }

.search-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.search-result__link {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-result__img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.search-result__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-result__body {
  flex: 1;
  min-width: 0;
}
.search-result__link:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px rgba(14,124,107,.1);
}
.search-result__type {
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-on-surface-secondary);
  display: block;
  margin-bottom: .3rem;
}
.search-result__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0 0 .5rem;
  font-family: var(--font-family-heading);
}
.search-result__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-secondary);
  line-height: 1.6;
  margin: 0 0 .5rem;
}
.search-result__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .25rem;
}
.search-result__date {
  font-size: var(--font-size-xs);
  color: var(--color-on-surface-secondary);
}
.search-result__actions {
  display: flex;
  gap: .25rem;
  opacity: 0;
  transition: opacity .15s;
}
.search-result__link:hover .search-result__actions { opacity: 1; }
.search-copy-btn, .search-share-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--border-radius-sm, 4px);
  color: var(--color-on-surface-secondary);
  transition: background .15s, color .15s;
}
.search-copy-btn:hover, .search-share-btn:hover {
  background: var(--color-surface-alt, #f0f0f0);
  color: var(--color-primary);
}
/* Tooltip */
.search-copy-btn::after, .search-share-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.search-copy-btn:hover::after, .search-share-btn:hover::after { opacity: 1; }
/* État "Copié" */
.search-btn--done { color: var(--color-primary) !important; }
.search-btn--done::after { opacity: 1 !important; }
.search-result__link mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Galerie de contenu ──────────────────────────────────────────────────── */
.content-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem auto;
  justify-content: center;
}
.content-gallery .gallery-link,
.content-gallery .gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  margin: 0;
  padding: 0;
  flex: 1 1 calc(100% / var(--gallery-cols, 3) - .5rem);
  max-width: calc(100% / var(--gallery-cols, 3) - .5rem);
}
.content-gallery[data-format="crop-square"] .gallery-link,
.content-gallery[data-format="crop-square"] .gallery-item { aspect-ratio: 1; flex: 0 1 300px; max-width: 300px; }
.content-gallery[data-format="crop-md"] .gallery-link,
.content-gallery[data-format="crop-md"] .gallery-item { aspect-ratio: 16 / 9; }
.content-gallery[data-format="crop-lg"] .gallery-link,
.content-gallery[data-format="crop-lg"] .gallery-item { aspect-ratio: 16 / 9; }
.content-gallery .gallery-link img,
.content-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.content-gallery .gallery-link:hover img { transform: scale(1.04); }
@media (max-width: 640px) {
  .content-gallery .gallery-link,
  .content-gallery .gallery-item { flex-basis: calc(50% - .25rem); max-width: calc(50% - .25rem); }
}
@media (max-width: 400px) {
  .content-gallery .gallery-link,
  .content-gallery .gallery-item { flex-basis: calc(50% - .25rem); max-width: calc(50% - .25rem); }
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.gallery-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lb[hidden] { display: none; }
.gallery-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
  cursor: pointer;
}
.gallery-lb__img-wrap {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lb__img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  transition: opacity .2s;
}
.gallery-lb__img.lb-loading { opacity: 0; }
.gallery-lb__close {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  width: 40px; height: 40px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gallery-lb__close:hover { background: rgba(255,255,255,.25); }
.gallery-lb__prev,
.gallery-lb__next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.gallery-lb__prev:hover, .gallery-lb__next:hover { background: rgba(255,255,255,.25); }
.gallery-lb__prev { left: 1rem; }
.gallery-lb__next { right: 1rem; }
.gallery-lb__prev[hidden], .gallery-lb__next[hidden] { display: none; }
.gallery-lb__counter {
  position: absolute;
  bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,.7);
  font-size: .85rem;
}
.gallery-lb__caption {
  position: absolute;
  bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: .9rem;
  text-align: center;
  max-width: 80vw;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}