/* ============================================================
   BECHEMS DARK SITE — shared CSS (Ecomus-inspired, industrial)
   Used by: index.html + all migrated pages
   ============================================================ */

:root {
  /* Light-dominant palette */
  --bg:        #ffffff;
  --bg-2:      #f4f5f7;
  --bg-3:      #eceef1;
  --bg-card:   #ffffff;
  --surface:   #ffffff;
  --line:      rgba(0,0,0,0.10);
  --line-2:    rgba(0,0,0,0.16);
  --line-3:    rgba(0,0,0,0.24);
  --fg:        #14151a;
  --fg-2:      #333742;
  --muted:     #5f636e;
  --muted-2:   #8a8e99;

  /* Accent (replaces rainbow buttons) */
  --accent:    #111518;
  --accent-d:  #2a3034;

  /* Dark-zone palette (nav, hero, footer, mission band) */
  --dark-bg:   #0a0a14;

  /* Brand (charte Bechems 2026) */
  --bevil:    #67b336;
  --chembo:   #f49400;
  --mondo:    #4c8ac9;
  --spechim:  #48b2ae;
  --red:      #e30613;
  --yellow:   #ffde00;

  /* Rainbow gradient — Bechems brand colors */
  --rb: linear-gradient(95deg,
    #e30613  0%,
    #f49400  18%,
    #ffde00  34%,
    #67b336  52%,
    #48b2ae  68%,
    #4c8ac9  84%,
    #6a4cc9 100%
  );
  --rb-warm: linear-gradient(95deg, #ff6a3d 0%, #ff3d7f 50%, #c44cff 100%);

  /* Type — Arial for titles (per request), Geist for body */
  --font-display: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-sans:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Scale */
  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ====== Background ambient — INDUSTRIAL, no pink glow ====== */
.bg-fx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(76, 138, 201, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(72, 178, 174, 0.05), transparent 65%);
}
.bg-fx::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* ====== Utility ====== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rb);
}
.grad-text {
  background: var(--rb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.grad-text--anim {
  background: linear-gradient(95deg,
    #e30613, #f49400, #ffde00, #67b336, #48b2ae, #4c8ac9, #6a4cc9,
    #4c8ac9, #48b2ae, #67b336, #ffde00, #f49400, #e30613
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: grad-shift 8s linear infinite;
}
@keyframes grad-shift {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .grad-text--anim { animation: none; }
}
/* Bannieres des pages internes (.page-hero) : meme animation de couleurs
   que le hero d'accueil. On ne touche que background-image + size (pas le
   raccourci background), pour conserver le background-clip:text de .grad-text. */
.page-hero__title .grad-text {
  background-image: linear-gradient(95deg,
    #e30613, #f49400, #ffde00, #67b336, #48b2ae, #4c8ac9, #6a4cc9,
    #4c8ac9, #48b2ae, #67b336, #ffde00, #f49400, #e30613
  );
  background-size: 250% 100%;
  animation: grad-shift 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__title .grad-text { animation: none; }
}
/* Reveal-on-scroll (UX polish) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
/* Focus-visible for accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.grad-text--warm {
  background: var(--rb-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ====== Buttons (pill) ====== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px;
  font-size: 15px; font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  position: relative;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--fill {
  color: #fff;
  background: linear-gradient(180deg, #2a2a3d 0%, #15151f 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 30px rgba(0,0,0,0.4);
}
.btn--fill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 14px 40px rgba(76, 138, 201, 0.25),
    0 0 0 1px rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.btn--outline {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line-2);
}
.btn--outline:hover {
  background: var(--bg-2);
  border-color: var(--line-3);
  transform: translateY(-1px);
}
.btn--grad {
  color: #fff; border: 0;
  background: var(--accent);
  box-shadow: 0 10px 26px rgba(47,107,168,0.28);
}
.btn--grad:hover { transform: translateY(-1px); background: var(--accent-d); box-shadow: 0 14px 34px rgba(47,107,168,0.40); }
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }

/* Pill badge (top of hero) */
.pill-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #fff;
  background: linear-gradient(95deg, #f49400 0%, #e30613 100%);
  box-shadow: 0 8px 28px rgba(244,148,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.pill-badge svg { width: 16px; height: 16px; }

/* Chip with optional gradient border */
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all .25s ease;
  cursor: pointer;
}
.chip:hover { color: #fff; border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.chip--grad {
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    var(--rb) border-box;
  border: 1px solid transparent;
  color: #fff;
}
.chip--bevil   { background: linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(135deg, #67b336, #4e8a28) border-box; border: 1px solid transparent; color: #fff; }
.chip--chembo  { background: linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(135deg, #f49400, #c17300) border-box; border: 1px solid transparent; color: #fff; }
.chip--mondo   { background: linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(135deg, #4c8ac9, #2f6ba8) border-box; border: 1px solid transparent; color: #fff; }
.chip--spechim { background: linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(135deg, #48b2ae, #2f8d89) border-box; border: 1px solid transparent; color: #fff; }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; }
.chip__dot--bevil { background: var(--bevil); }
.chip__dot--chembo { background: var(--chembo); }
.chip__dot--mondo { background: var(--mondo); }
.chip__dot--spechim { background: var(--spechim); }

/* ============================================================
   NAV — sticky + glass + mega menu
   ============================================================ */

/* Lien d'evitement (accessibilite) : invisible, n'apparait qu'au focus clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  position: fixed;
  background: #111518;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none;
  font-weight: 500;
}

.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: #111518;
  border-bottom: 1px solid var(--line);
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  color: #fff;
  flex-shrink: 0;
}
.nav__logo-img {
  height: auto;
  width: auto;
  max-height: 88px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.nav__links {
  display: flex; align-items: center; gap: 2px;
  list-style: none;
}
.nav__links > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 400;
  color: var(--fg-2);
  transition: all .2s ease;
}
.nav__links > li > a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav__chev { width: 14px; height: 14px; opacity: .55; transition: transform .25s ease; }
.nav__has-mega { position: relative; }
.nav__has-mega:hover > a .nav__chev { transform: rotate(180deg); }

.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__lang { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.nav__lang-link { color: var(--muted); text-decoration: none; transition: color .18s ease; }
.nav__lang-link:hover { color: #fff; }
.nav__lang-link.is-active { color: #fff; font-weight: 500; }
.nav__lang-sep { opacity: .45; }

/* Mega menu */
.mega {
  /* L'ecart visuel de 6px est un padding INTERNE : la zone entre l'onglet et le
     panneau reste survolable, le menu ne se referme plus en la traversant.       */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-8px);
  padding-top: 6px;
  min-width: 740px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* delai de grace de 150ms avant fermeture : survit aux sorties de souris breves */
  transition: opacity .28s ease .15s, transform .28s ease .15s, visibility 0s linear .43s;
  z-index: 60;
}
.nav__has-mega:hover .mega,
.nav__has-mega:focus-within .mega,
.nav__has-mega.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
.mega__inner {
  background: linear-gradient(180deg, #14142a, #0f0f1c);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  padding: 28px;
  display: grid; grid-template-columns: 240px 1fr;
  gap: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.mega__inner::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.mega__intro { padding: 8px 0; }
.mega__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.mega__desc { font-size: 13px; color: var(--muted); line-height: 1.55; }
.mega__grid { display: grid; gap: 8px; }
.mega__grid--4 { grid-template-columns: 1fr; }
.mega__grid--2 { grid-template-columns: 1fr 1fr; }
.mega__card {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px 14px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  transition: all .2s ease;
}
.mega__card:hover { background: rgba(255,255,255,0.05); border-color: var(--line-2); transform: translateX(2px); }
.mega__card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: #fff;
}
.mega__card span { font-size: 13px; color: var(--muted); }
.mega__card--lg { padding: 16px 18px; }
.mega__card-dot {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c, #fff);
}
.mega__card-logo { height: 96px; width: auto; max-width: 320px; object-fit: contain; display: block; }
.mega__card-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--muted);
  margin-bottom: 2px;
}

@media (max-width: 980px) {
  .nav__links { display: none; }
}

/* ============================================================
   HERO — 4-photo strip
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(50px, 7vw, 100px) 0 clamp(50px, 7vw, 90px);
  overflow: hidden;
}
/* Hero with full-bleed background video */
.hero--video { min-height: clamp(520px, 78vh, 820px); display: flex; align-items: center; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.hero__bg-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,20,0.40) 0%, rgba(10,10,20,0.18) 45%, rgba(10,10,20,0.62) 100%),
    linear-gradient(90deg, rgba(10,10,20,0.45) 0%, rgba(10,10,20,0.08) 60%, rgba(10,10,20,0.05) 100%);
}
.hero--video .hero__inner { position: relative; z-index: 2; }
.hero__inner { position: relative; z-index: 2; }
.hero__head {
  max-width: 1100px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 7.2vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 24px 0 28px;
  display: flex; flex-direction: column;
}
.hero__title span { display: block; }
.hero__sub-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-top: clamp(20px, 2.5vw, 36px);
}
.hero__sub {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 540px;
  font-weight: 300;
}
.hero__sub b { color: var(--fg-2); font-weight: 500; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
@media (max-width: 800px) {
  .hero__sub-row { grid-template-columns: 1fr; }
}

/* 4-photo strip */
.hero__strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero__shot {
  position: relative;
  aspect-ratio: 4/5;
  background: #14142a;
  overflow: hidden;
  display: block;
}
.hero__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(0.2,0.8,0.2,1);
  filter: brightness(0.78) contrast(1.05);
}
.hero__shot:hover img { transform: scale(1.05); filter: brightness(0.85) contrast(1.05); }
.hero__shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.05) 50%, rgba(10,10,20,0.20) 100%);
}
.hero__shot-cap {
  position: absolute; left: 18px; bottom: 16px; right: 18px;
  display: flex; flex-direction: column; gap: 6px;
  color: #fff; z-index: 1;
}
.hero__shot-cap-l {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.85;
}
.hero__shot-cap-t {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.hero__shot-acc {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(0.2,0.8,0.2,1);
}
.hero__shot:hover .hero__shot-acc { transform: scaleX(1); }
@media (max-width: 800px) {
  .hero__strip { grid-template-columns: 1fr 1fr; }
}

/* Hero video (YouTube embed) */
.hero__video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background:#000; }
.hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 100%); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg) 0%, transparent 100%); }
.marquee__track {
  display: flex; align-items: center; gap: 56px;
  animation: marquee 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.025em;
  color: var(--fg);
}
.marquee__track .marquee__star {
  font-size: clamp(16px, 1.6vw, 22px);
  background: var(--rb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px);
}
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__cell {
  padding: 40px 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.stats__cell:last-child { border-right: 0; }
.stats__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 6vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  color: var(--fg);
}
.stats__num sup { font-size: 0.5em; vertical-align: super; margin-left: 2px; }
.stats__lbl { font-size: 13px; color: var(--muted); font-weight: 400; line-height: 1.45; }
.stats__lbl b { color: var(--fg-2); font-weight: 500; display: block; margin-bottom: 2px; }
@media (max-width: 800px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats__cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .stats__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sect-head {
  text-align: center;
  margin: 0 auto clamp(40px, 6vw, 72px);
  max-width: 800px;
}
.sect-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.sect-head__sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
}

/* ============================================================
   BRANDS
   ============================================================ */
.brands { padding: clamp(80px, 10vw, 130px) 0; }
.brands__chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.brands__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.brand-card {
  position: relative;
  display: block;
  border-radius: 24px;
  padding: 36px 36px 32px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.brand-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--card-gradient, var(--rb));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.brand-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); border-color: transparent; }
.brand-card:hover::before { opacity: 1; }
.brand-card__glow {
  position: absolute; inset: auto -20% -50% -20%; height: 80%;
  background: radial-gradient(ellipse at center, var(--brand-color, #fff) 0%, transparent 60%);
  opacity: 0.06;
  pointer-events: none;
  transition: opacity .4s ease;
}
.brand-card:hover .brand-card__glow { opacity: 0.16; }
.brand-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.brand-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--brand-color, #fff);
}
.brand-card__mark { width: 56px; height: 56px; opacity: 0.92; }
.brand-card__mark img { width: 100%; height: 100%; object-fit: contain; }
/* max-height plutot que height + max-width en px : sinon le logo Chembo
   (561x240) reste a 234px de large et est tranche par overflow:hidden. */
.brand-card__logo { height: auto; max-height: 100px; width: auto; max-width: 100%; object-fit: contain; display: block; margin-top: 6px; }
.brand-card__role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.brand-card__desc {
  font-size: 15px; line-height: 1.55;
  color: var(--fg-2);
  margin-bottom: 28px;
  max-width: 440px;
}
.brand-card__foot { display: flex; align-items: center; justify-content: space-between; }
.brand-card__url { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.brand-card__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--line);
  transition: all .25s ease;
}
.brand-card:hover .brand-card__arrow {
  background: var(--brand-color, #fff);
  border-color: transparent;
  color: #0a0a14;
  transform: rotate(-45deg);
}
.brand-card__arrow svg { width: 18px; height: 18px; }
@media (max-width: 800px) { .brands__grid { grid-template-columns: 1fr; } }
.brands__grid--3 { grid-template-columns: repeat(3, 1fr); }
.brands__grid--3 .brand-card__name { font-size: clamp(30px, 2.6vw, 40px); }
.brands__grid--3 .brand-card__head { min-height: 56px; }
@media (max-width: 980px) { .brands__grid--3 { grid-template-columns: 1fr; } }

/* ============================================================
   EXPERTISES
   ============================================================ */
.expert { padding: clamp(80px, 10vw, 130px) 0; }
.expert__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.expert-card {
  position: relative;
  display: block;
  border-radius: 20px;
  padding: 28px 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  transition: all .3s ease;
  overflow: hidden;
}
.expert-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.expert-card__num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.expert-card__icon {
  width: 46px; height: 46px;
  margin-bottom: 24px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.expert-card__icon svg { width: 22px; height: 22px; }
.expert-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin-bottom: 10px;
}
.expert-card__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.brand-logo-plate {
  background: #fff; border-radius: 14px;
  height: 96px; margin-bottom: 16px;
  display: grid; place-items: center; padding: 18px 22px;
  overflow: hidden;
}
.brand-logo-plate img { max-height: 60px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.expert-card__glow {
  position: absolute; inset: auto -30% -60% -30%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(76,138,201,0.25), transparent 65%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.expert-card:hover .expert-card__glow { opacity: 0.6; }
@media (max-width: 1000px) { .expert__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .expert__grid { grid-template-columns: 1fr; } }
.expert__grid--2 { grid-template-columns: repeat(2, 1fr); }
.expert__grid--2 .expert-card { padding: 36px 34px 34px; }
.expert__grid--2 .expert-card__title { font-size: 26px; }
.expert__grid--2 .expert-card__desc { font-size: 15px; }
@media (max-width: 700px)  { .expert__grid--2 { grid-template-columns: 1fr; } }

/* ============================================================
   SECTORS
   ============================================================ */
.sectors { padding: clamp(80px, 10vw, 130px) 0; }
.sectors__chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
}
.sectors__chips .chip { font-size: 14px; height: 44px; padding: 0 22px; cursor: default; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  padding: clamp(80px, 12vw, 140px) 0;
  position: relative;
}
.manifesto__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 64px);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(24,24,48,0.7), rgba(15,15,28,0.7));
  border: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
}
.manifesto__inner::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--rb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
}
.manifesto__inner::after {
  content: ''; position: absolute; inset: -50% -10% auto -10%; height: 80%;
  background: radial-gradient(ellipse at center top, rgba(76,138,201,0.18), transparent 65%);
  pointer-events: none;
}
.manifesto__q {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  color: var(--fg);
  text-wrap: pretty;
}
.manifesto__q em { font-style: normal; }
.manifesto__sig {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.manifesto__sig::before { content: ''; width: 36px; height: 1px; background: var(--rb); }

/* ============================================================
   CTA
   ============================================================ */
.cta { padding: clamp(60px, 9vw, 110px) 0 0; }
.cta__inner {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 60px; align-items: end;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.cta__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.cta__h em { font-style: normal; }
.cta__r { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.cta__r p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 380px; }
@media (max-width: 800px) { .cta__inner { grid-template-columns: 1fr; gap: 32px; align-items: flex-start; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { padding: 56px 0 32px; font-size: 13.5px; }
.foot__grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.foot__brand-name {
  margin-bottom: 18px;
  display: inline-flex; align-items: center;
}
.foot__logo-img {
  height: auto;
  width: auto;
  max-height: 128px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.foot__brand-desc { color: var(--muted); line-height: 1.6; max-width: 280px; }
.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 16px;
}
.foot__col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot__col a { color: var(--fg-2); transition: color .2s; }
.foot__col a:hover { color: #fff; }
.foot__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted-2); font-size: 12px;
}
.foot__bar .grad-bar { height: 3px; width: 60px; border-radius: 2px; background: var(--rb); }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE — generic content (reused by inner pages)
   ============================================================ */
.page-hero {
  padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 70px);
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 1000px;
  text-wrap: balance;
  margin-top: 24px;
  margin-bottom: 24px;
}
.page-hero__sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
  font-weight: 300;
}
.page-hero__sub b { color: var(--fg-2); font-weight: 500; }

.prose-section { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
.prose-section__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.prose-section__lede {
  font-size: 17px;
  color: var(--fg-2);
  line-height: 1.65;
  max-width: 720px;
  font-weight: 400;
}
.prose-section__lede + p { margin-top: 18px; }
.prose-section p { color: var(--muted); line-height: 1.7; max-width: 720px; }
.prose-section p + p { margin-top: 16px; }
/* mots-cles mis en avant dans les paragraphes de prose */
.prose-section p b, .prose-section p strong { color: var(--fg-2); font-weight: 600; }
.prose-section .grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
/* minmax(0,1fr) et non 1fr : sinon le min-content d'un mot compose
   neerlandais dimensionne la piste et fait deborder la grille. */
@media (max-width: 800px) { .prose-section .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ============================================================
   CONTACT — form + aside (dark)
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.cform { display: flex; flex-direction: column; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .cform__row { grid-template-columns: 1fr; } }
.cform__field { display: flex; flex-direction: column; gap: 8px; }
.cform__field > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.cform__field input, .cform__field select, .cform__field textarea {
  font: inherit; font-size: 15px; color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 13px 16px; width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
.cform__field textarea { resize: vertical; min-height: 120px; }
.cform__field input::placeholder, .cform__field textarea::placeholder { color: var(--muted-2); }
.cform__field input:focus, .cform__field select:focus, .cform__field textarea:focus {
  /* background-color et non le raccourci background : celui-ci remettrait
     background-image a none et effacerait le chevron des listes au focus. */
  outline: none; border-color: var(--mondo); background-color: var(--bg-3);
}
/* sans chevron, une liste deroulante est indiscernable d'un champ texte
   au doigt : l'utilisateur attend un clavier qui ne vient jamais. */
.cform__field select {
  appearance: none; cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f636e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.cform__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
.cform__check input { margin-top: 2px; accent-color: var(--mondo); width: 16px; height: 16px; flex-shrink: 0; }
.cform__hp { position: absolute; left: -9999px; }
.cform__sent { display: none; font-size: 14px; color: var(--bevil); padding: 14px 18px; border: 1px solid var(--bevil); border-radius: 12px; }
.cform__sent.is-visible { display: block; }
.cform__sent--error { color: #e5484d; border-color: #e5484d; }

/* ============================================================
   Bandeau de consentement cookies (RGPD)
   ============================================================ */
#cc-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
  max-width: 680px; margin: 0 auto;
  background: linear-gradient(180deg, #14142a, #0f0f1c);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
#cc-banner .cc-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: #cfd3dc; flex: 1 1 320px; }
#cc-banner .cc-more { color: #67b336; text-decoration: underline; }
#cc-banner .cc-actions { display: flex; gap: 10px; flex-shrink: 0; }
#cc-banner .cc-btn {
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: #e7e9ee;
  background: transparent; border: 1px solid rgba(255,255,255,0.22);
  transition: background .18s ease, border-color .18s ease;
}
#cc-banner .cc-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); }
#cc-banner .cc-btn--accept { background: #fff; color: #111518; border-color: #fff; font-weight: 600; }
#cc-banner .cc-btn--accept:hover { background: #e7e9ee; }
.cform__btn { align-self: flex-start; margin-top: 4px; }

.contact-aside { display: flex; flex-direction: column; gap: 4px; }
.contact-block { padding: 22px 0; border-top: 1px solid var(--line); }
.contact-block:first-child { border-top: 0; padding-top: 0; }
.contact-block h2, .contact-block h3 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 10px;
}
.contact-block p { color: var(--fg-2); line-height: 1.65; font-size: 15px; }
.contact-block a { color: var(--fg-2); transition: color .2s; }
.contact-block a:hover { color: #fff; }
.contact-block strong { color: #fff; font-weight: 600; }

/* ============================================================
   ENTITY PAGE — brand hero
   ============================================================ */
.ent-hero { padding: clamp(30px, 4vw, 56px) 0 clamp(50px, 7vw, 90px); }
.ent-hero__inner {
  position: relative;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
.ent-hero__inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand, var(--rb));
}
.ent-hero__glow {
  position: absolute; inset: auto -10% -60% -10%; height: 90%;
  background: radial-gradient(ellipse at center, var(--brand, #fff), transparent 65%);
  opacity: 0.12; pointer-events: none;
}
.ent-hero__media {
  display: grid; place-items: center;
  background: #fff; border-radius: 18px; padding: 36px;
  min-height: 180px;
}
.ent-hero__media img { max-width: 100%; max-height: 130px; width: auto; object-fit: contain; }
.ent-hero__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brand, var(--muted)); margin-bottom: 14px;
}
.ent-hero__head {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.08; letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.ent-hero__txt { color: var(--muted); line-height: 1.65; font-size: 15px; margin-bottom: 26px; max-width: 540px; }
.ent-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 800px) { .ent-hero__inner { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   LEGAL / PROSE LIST
   ============================================================ */
.legal { padding: clamp(20px,3vw,40px) 0 clamp(60px,8vw,100px); }
.legal__inner { max-width: 820px; }
.legal__block { padding: 28px 0; border-top: 1px solid var(--line); }
.legal__block:first-child { border-top: 0; padding-top: 0; }
.legal__block h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.legal__block p { color: var(--muted); line-height: 1.7; }
.legal__block p + p { margin-top: 12px; }
.legal__block strong { color: var(--fg-2); font-weight: 600; }
.legal__block a { color: var(--fg-2); border-bottom: 1px solid var(--line-2); }
.legal__block a:hover { color: #fff; }

/* ============================================================
   NEWS LIST
   ============================================================ */
.newslist { padding: clamp(20px,3vw,40px) 0 clamp(60px,8vw,100px); }
.newslist__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.newslist__filter {
  height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--line);
  transition: all .2s ease;
}
.newslist__filter:hover { color: #fff; border-color: var(--line-2); }
.newslist__filter.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--rb) border-box;
  border: 1px solid transparent;
}
.newslist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .newslist__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .newslist__grid { grid-template-columns: 1fr; } }
.news {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
  border-radius: 18px;
  background: var(--bg-card); border: 1px solid var(--line);
  overflow: hidden; transition: border-color .25s ease, transform .25s ease;
}
.news::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--brand, var(--rb)); opacity:.85; }
.news:hover { border-color: var(--line-2); transform: translateY(-3px); }
.news--feat { grid-column: span 2; }
@media (max-width: 1000px) { .news--feat { grid-column: span 2; } }
@media (max-width: 640px) { .news--feat { grid-column: span 1; } }
.news__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.news__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand, var(--muted)); }
.news__date { font-size: 12px; color: var(--muted-2); }
.news__title { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 12px; }
.news--feat .news__title { font-size: 24px; }
.news__body { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.news__more { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); transition: color .2s; }
.news__more:hover { color: #fff; }

/* ============================================================
   JOBS
   ============================================================ */
.jobs { padding: clamp(20px,3vw,40px) 0 clamp(40px,6vw,70px); }
.jobs__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.job {
  display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: center;
  padding: 24px 28px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--line);
  transition: border-color .25s ease, transform .25s ease;
}
.job:hover { border-color: var(--line-2); transform: translateX(3px); }
.job__meta { display: flex; flex-direction: column; gap: 6px; }
.job__type { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.job__loc { font-size: 13px; color: var(--muted); }
.job__title { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.018em; margin-bottom: 4px; }
.job__desc { font-size: 14px; color: var(--muted); line-height: 1.55; }
.job__cta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); white-space: nowrap; transition: color .2s; }
.job__cta:hover { color: var(--fg); }
@media (max-width: 760px) {
  .job { grid-template-columns: 1fr; gap: 12px; }
  .job__meta { flex-direction: row; gap: 14px; }
}


/* ============================================================
   LIGHT-DOMINANT THEME — overrides & dark zones
   ============================================================ */

/* Dark zones keep light text via scoped tokens */
.nav, .foot, .hero--video, .manifesto__inner {
  color: var(--fg);
  --fg: #ffffff;
  --fg-2: #d8dae2;
  --muted: #9da1b2;
  --muted-2: #7c8090;
  --line: rgba(255,255,255,0.12);
  --line-2: rgba(255,255,255,0.18);
  --line-3: rgba(255,255,255,0.28);
  --bg-2: #15151f;
  --bg-3: #1c1c2c;
}
.foot { background: var(--dark-bg); }

/* Hero buttons - high contrast on dark video */
.hero--video .btn--fill { background: #ffffff; color: #14151a; border-color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.hero--video .btn--fill:hover { background: #eef0f3; border-color: #eef0f3; }
.hero--video .btn--outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero--video .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* Hide ambient fixed bg on light site */
.bg-fx { display: none !important; }

/* Remove small eyebrow labels & card index/role tags site-wide */
.eyebrow,
.brand-card__role,
.expert-card__num,
.mega__card-num { display: none !important; }

/* Soften card shadows for light bg */
.brand-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.10); }
.brand-card { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.expert-card { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.news { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.job { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* Sticky/click-open Sociétés dropdown */
.nav__has-mega.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Full-bleed / framed photo bands */
.photo-band { width: 100%; margin: 0; }
.photo-band img {
  width: 100%; height: clamp(280px, 38vw, 520px);
  object-fit: cover; display: block;
}
.photo-band--framed { padding: clamp(40px,6vw,90px) var(--gutter); }
.photo-band--framed .photo-band__inner {
  max-width: var(--maxw); margin: 0 auto;
  border-radius: 22px; overflow: hidden; position: relative;
  border: 1px solid var(--line);
}
.photo-band--framed img { height: clamp(300px, 42vw, 560px); border-radius: 22px; }
.photo-band__cap {
  position: absolute; left: 28px; bottom: 24px; right: 28px; z-index: 2;
  color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.02em; line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.photo-band--framed .photo-band__inner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 55%);
}
/* Animation Ken Burns : zoom lent et continu sur la bande photo */
.photo-band--anim img {
  animation: photoKenburns 28s ease-in-out infinite alternate;
  transform-origin: 55% 60%;
  will-change: transform;
}
@keyframes photoKenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-band--anim img { animation: none; }
}

/* Subtle separation for entity media box on light bg */
.ent-hero__media { border: 1px solid var(--line); }


/* ===== UX refresh: photo page-heroes, tighter spacing, prominent nav CTA, map ===== */
.page-hero { position: relative; overflow: hidden; background: var(--dark-bg); color:#fff; --fg:#fff; --fg-2:#e7e9ee; --muted:#cfd3dc; --muted-2:#9aa0ac; padding: clamp(72px,10vw,140px) 0 clamp(52px,7vw,90px); }
.page-hero::before { content:''; position:absolute; inset:0; background-image: var(--hero-img,none); background-size:cover; background-position: var(--hero-pos, center); z-index:0; }
.page-hero::after { content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(12,14,17,0.60), rgba(12,14,17,0.48) 45%, rgba(12,14,17,0.82)); }
.page-hero > .wrap { position: relative; z-index: 2; }
.stats { padding: clamp(40px,5vw,64px) 0; }
.brands, .expert, .sectors { padding: clamp(44px,6vw,80px) 0; }
.manifesto { padding: clamp(48px,7vw,90px) 0; }
.cta { padding: clamp(44px,6vw,72px) 0 0; }
.prose-section { padding: clamp(40px,5vw,70px) 0; }
.legal { padding: clamp(16px,2vw,32px) 0 clamp(44px,6vw,80px); }
.newslist, .jobs { padding: clamp(20px,3vw,36px) 0 clamp(44px,6vw,80px); }
.photo-band--framed { padding: clamp(28px,4vw,60px) var(--gutter); }
.ent-hero { padding: clamp(28px,3vw,48px) 0 clamp(40px,5vw,72px); }
.nav .nav__right .btn--fill { background:#ffffff; color:#111518; border-color:#ffffff; font-weight:600; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.nav .nav__right .btn--fill svg { color:#111518; }
.nav .nav__right .btn--fill:hover { background:#e8ecf1; border-color:#e8ecf1; transform: translateY(-1px); }
.contact-map-section { padding: clamp(20px,3vw,40px) 0 clamp(48px,6vw,90px); }
.contact-map { border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,0.05); }
.contact-map iframe { width:100%; height:440px; border:0; display:block; }


/* ===== Photo background brand card ===== */
.brand-card--photo { color:#fff; isolation:isolate; }
.brand-card--photo .brand-card__photo { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; border-radius:inherit; }
.brand-card--photo .brand-card__photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,14,17,0.45), rgba(12,14,17,0.82)); }
.brand-card--photo > *:not(.brand-card__photo) { position:relative; z-index:1; }
.brand-card--photo .brand-card__desc { color:rgba(255,255,255,0.92); }
.brand-card--photo .brand-card__logo { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.brand-card--photo .brand-card__arrow { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); color:#fff; }
.brand-card--photo:hover { box-shadow:0 24px 60px rgba(0,0,0,0.28); }

/* ===== CTA attention animation ===== */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(17,21,24,0.30); }
  50% { box-shadow: 0 16px 38px rgba(17,21,24,0.5), 0 0 0 6px rgba(17,21,24,0.08); }
}
@keyframes ctaArrow { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(4px);} }
.btn--cta-anim { position: relative; z-index: 0; border: 0; }
.btn--cta-anim svg { animation: ctaArrow 2s ease-in-out infinite; }
.btn--cta-anim:hover { animation-play-state: paused; }
/* Moving rainbow outline (animated, cross-browser via background-position) */
.btn--cta-anim::before {
  content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: 999px;
  background: linear-gradient(90deg, #e30613, #f49400, #ffde00, #67b336, #48b2ae, #4c8ac9, #6a4cc9, #e30613, #f49400, #ffde00, #67b336, #48b2ae, #4c8ac9, #6a4cc9);
  background-size: 300% 100%;
  animation: ctaSlide 5s linear infinite;
}
.btn--cta-anim::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: var(--accent);
}
@keyframes ctaSlide { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@media (prefers-reduced-motion: reduce) { .btn--cta-anim svg, .btn--cta-anim::before { animation: none; } }


/* ===== Photo société cards refresh (logo + explanation over image) ===== */
.brand-card--photo { display:flex; flex-direction:column; justify-content:flex-end; min-height:400px; padding:34px; }
.brand-card--photo .brand-card__head { margin-bottom:14px; }
.brand-card--photo .brand-card__logo { height:auto; max-height:108px; max-width:100%; margin-top:0; }
.brand-card--photo .brand-card__desc { margin-bottom:0; max-width:none; }
.brand-card--photo .brand-card__foot { display:none; }


/* ===== Animated Europe distribution map ===== */
.euromap-section { padding: clamp(28px,4vw,60px) var(--gutter); }
.euromap { max-width: var(--maxw); margin: 0 auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px,3vw,40px); }
.euromap__head { text-align: center; margin-bottom: 8px; }
.euromap__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,3.2vw,44px); letter-spacing: -0.025em; }
.euromap__svg { display: block; width: 100%; height: auto; max-height: 560px; }
.euromap__land { fill: rgba(17,21,24,0.05); stroke: rgba(17,21,24,0.16); stroke-width: 1.5; }
.euromap__route { fill: none; stroke: url(#routeGrad); stroke-width: 2; stroke-linecap: round; opacity: 0.45; stroke-dasharray: 1; stroke-dashoffset: 1; animation: routeDraw 2.6s ease-in-out infinite; }
#r2 { animation-delay: .5s; } #r3 { animation-delay: 1s; } #r4 { animation-delay: .7s; }
#r5 { animation-delay: 1.4s; } #r6 { animation-delay: .3s; } #r7 { animation-delay: 1.1s; }
#r8 { animation-delay: 1.8s; } #r9 { animation-delay: .9s; }
@keyframes routeDraw { 0%{stroke-dashoffset:1;} 40%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} }
.euromap__arrow path { fill: #f49400; }
.euromap__dest circle { fill: #4c8ac9; }
.euromap__dest text { font-family: var(--font-mono); font-size: 12px; fill: #333742; }
.euromap__origin text { font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: #111518; text-anchor: middle; }
.euromap__origin > circle:not(.euromap__pulse) { fill: #e30613; }
.euromap__pulse { fill: #e30613; opacity: 0.35; transform-origin: var(--ox) var(--oy); animation: originPulse 2s ease-out infinite; }
@keyframes originPulse { 0%{ transform: scale(1); opacity:.45; } 70%{ transform: scale(3); opacity:0; } 100%{ transform: scale(3); opacity:0; } }
@keyframes globePulseB { 0%{ transform: scale(1); opacity:.45; } 70%{ transform: scale(3.4); opacity:0; } 100%{ transform: scale(3.4); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .euromap__route { stroke-dashoffset: 0; animation: none; opacity: .5; }
  .euromap__pulse { animation: none; opacity: 0; }
  .euromap__arrow animateMotion { display:none; }
}


/* ===== Globe distribution map ===== */
/* pas de gouttiere ici : le .wrap interne l'applique deja (double marge) */
.globe-section { padding: clamp(28px,4vw,60px) 0; }
.globe-section .euromap__head { text-align:center; margin:0 auto clamp(20px,3vw,36px); }
.globe-wrap { position:relative; max-width:980px; margin:0 auto; border-radius:22px; overflow:hidden; border:1px solid var(--line); }
.globe-img { display:block; width:100%; height:auto; aspect-ratio: 1500 / 1001; }
.globe-svg { position:absolute; inset:0; width:100%; height:100%; }
.globe-route { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.9; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); animation: globeDraw 3s linear infinite; }
.globe-arrow path { filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
@keyframes globeDraw { 0%{stroke-dashoffset:1;} 72%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} } 45%{stroke-dashoffset:0;} 85%{stroke-dashoffset:0; opacity:1;} 100%{stroke-dashoffset:0; opacity:.85;} }
.globe-origin > circle:not(.globe-pulse){ fill:#e30613; }
.globe-origin text { font-family:var(--font-sans); font-size:17px; font-weight:700; letter-spacing:-0.01em; fill:#fff; text-anchor:middle; paint-order:stroke; stroke:rgba(17,21,24,.6); stroke-width:3.5px; }
.globe-pulse { fill:#e30613; opacity:.4; transform-origin:622px 424px; animation: originPulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce){ .globe-route{ stroke-dashoffset:0; animation:none;} .globe-pulse{ animation:none; opacity:0;} }


/* Globe overlay heading (in the white sky area) */
.globe-wrap { position:relative; }
.globe-overlay-title { position:absolute; top:5%; left:0; right:0; text-align:center; z-index:3; font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3.4vw,48px); letter-spacing:-0.025em; color:#14151a; padding:0 16px; pointer-events:none; }
@media (max-width:600px){ .globe-overlay-title{ top:3%; } }
@media (prefers-reduced-motion: reduce){ .globe-arrow animate, .globe-arrow animateMotion { display:none; } }


/* Parcels appearing across Europe */
.parcel { transform-box: fill-box; transform-origin: center bottom; opacity:0; animation: parcelPop 5s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.28)); }
@keyframes parcelPop {
  0%{ opacity:0; transform:scale(0) translateY(8px); }
  7%{ opacity:1; transform:scale(1.18) translateY(0); }
  13%{ transform:scale(1); }
  86%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.55); }
}
@media (prefers-reduced-motion: reduce){ .parcel{ opacity:1; animation:none; } }


/* ============================================================
   SPLIT CARD — integrated photo + editorial copy
   Replaces the floating .photo-band on chembo / bevil /
   distribution ONLY (le-groupe & fabrication keep .photo-band).
   Sibling of .ent-hero__inner: one rounded card, a Ken Burns
   photo edge-to-edge in one half, mono kicker + display head +
   muted paragraph in the other. Light editorial theme, tokens only.

   Per-instance accent via inline style: style="--brand:#f49400"
     Chembo #f49400 · Bevil #67b336
     Distribution: style="--brand:var(--rb)" + class split-card--rb
   Alternate the photo side page-to-page with split-card--reverse.
   Reuses the existing global @keyframes photoKenburns.
   ============================================================ */
.split { padding: clamp(40px, 6vw, 90px) 0; }

.split-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.split-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
}

/* 4px brand top-bar — clipped to the rounded corners, like .ent-hero.
   Accepts a solid hex OR a gradient (var(--rb)) transparently. */
.split-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand, var(--rb));
  z-index: 4;
}

/* ---- Media half : photo edge-to-edge, NO inner padding ---- */
.split-card__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 32vw, 480px);
  background: var(--bg-2);
}
.split-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 55% 60%;
  will-change: transform;
}
/* whisper of depth where the photo meets the copy half */
.split-card__media::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 82%, rgba(17, 21, 24, 0.06) 100%);
}

/* ---- Copy half : mono kicker + display head + muted paragraph ---- */
.split-card__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(32px, 4vw, 56px);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
/* brand glow bleeding up behind the copy (mirrors .ent-hero__glow). */
.split-card__body::before {
  content: '';
  position: absolute; inset: auto -20% -55% -10%; height: 85%;
  background: radial-gradient(ellipse at center, var(--brand, var(--mondo)), transparent 62%);
  opacity: 0.10; pointer-events: none;
}
.split-card__kicker {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand, var(--muted));
  margin-bottom: 14px;
}
/* small brand tick — background accepts a gradient, so Distribution
   gets an on-brand rainbow dash. */
.split-card__kicker::before {
  content: '';
  flex: 0 0 auto; width: 26px; height: 2px; border-radius: 2px;
  background: var(--brand, var(--rb));
}
.split-card__head {
  position: relative;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08; letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 18px;
  text-wrap: balance;
}
.split-card__copy {
  position: relative;
  color: var(--muted);
  font-size: 15px; line-height: 1.65;
  max-width: 48ch;
}

/* ---- Alternating photo side (add split-card--reverse) ---- */
.split-card--reverse .split-card__media { order: 2; }
.split-card--reverse .split-card__body {
  order: 1; border-left: 0; border-right: 1px solid var(--line);
}
.split-card--reverse .split-card__media::after {
  background: linear-gradient(270deg, transparent 82%, rgba(17, 21, 24, 0.06) 100%);
}

/* ---- Group / rainbow accent (Distribution) ---- */
.split-card--rb .split-card__body::before {
  background: radial-gradient(ellipse at center, var(--mondo), transparent 62%);
  opacity: 0.09;
}
.split-card--rb .split-card__kicker { color: var(--muted); }

/* ---- Ken Burns — reuse the global @keyframes photoKenburns ---- */
.split-card--anim .split-card__img {
  animation: photoKenburns 28s ease-in-out infinite alternate;
}

/* ---- Responsive : stack to one column, photo always on top ---- */
@media (max-width: 800px) {
  .split-card { grid-template-columns: 1fr; }
  .split-card__media,
  .split-card--reverse .split-card__media {
    order: 0; min-height: clamp(220px, 56vw, 340px);
  }
  .split-card__body,
  .split-card--reverse .split-card__body {
    order: 1;
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--line);
  }
  .split-card__media::after,
  .split-card--reverse .split-card__media::after {
    background: linear-gradient(180deg, transparent 84%, rgba(17, 21, 24, 0.06) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .split-card--anim .split-card__img { animation: none; }
}


/* ============================================================
   RESPONSIVE — menu mobile + corrections de debordement
   Jusqu'ici, sous 980px, .nav__links passait simplement en
   display:none : plus aucune navigation possible sur mobile.
   ============================================================ */

/* Bouton hamburger : masque sur desktop */
.nav__burger { display: none; }
.nav__burger-close { display: none; }
/* Le selecteur de langue clone dans le menu (par site-nav-dark.js) ne doit
   apparaitre que dans le panneau mobile ; le bloc @media 980px le reaffiche. */
.nav__links .nav__lang { display: none; }

@media (max-width: 980px) {
  .nav { gap: 10px; }
  .nav__logo-img { max-height: 44px; }

  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.28);
    background: transparent; color: #fff; cursor: pointer;
  }
  .nav__burger svg { width: 22px; height: 22px; display: block; }
  .nav__burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .nav.is-open .nav__burger-open { display: none; }
  .nav.is-open .nav__burger-close { display: block; }

  /* le selecteur de langue de la barre laisse la place ; il est
     reinjecte dans le panneau par site-nav-dark.js */
  .nav__right > .nav__lang { display: none; }

  /* .nav__links devient un panneau deroulant plein largeur */
  .nav__links {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #111518;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 0 var(--gutter);
    max-height: 0; overflow: hidden;
  }
  /* Pas de transition sur max-height : mesuree comme ne demarrant pas
     (le panneau restait ecrase a 25px avec ses liens inaccessibles).
     L'ouverture est instantanee, donc fiable partout. */
  .nav.is-open .nav__links {
    max-height: 80vh;
    overflow-y: auto;
    padding: 6px var(--gutter) 18px;
  }
  .nav__links > li { display: block; }
  .nav__links > li > a {
    display: block; width: 100%;
    padding: 15px 2px; border-radius: 0;
    font-size: 16px; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav__links > li > a:hover { background: transparent; }
  .nav__chev { display: none; }

  /* sous-menu Societes : deplie en liste simple dans le panneau */
  .mega {
    position: static; transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; padding-top: 0; transition: none;
  }
  .mega__inner {
    display: block; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .mega__inner::before { display: none; }
  .mega__intro { display: none; }
  .mega__grid, .mega__grid--2, .mega__grid--4 { display: block; }
  .mega__card {
    border: 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0; background: transparent;
    padding: 13px 2px 13px 20px;
  }
  .mega__card:hover { background: transparent; transform: none; }

  /* langues clonees en bas du panneau */
  .nav__links .nav__lang {
    display: block; padding: 16px 2px 2px;
    font-size: 12px; letter-spacing: 0.14em;
  }
  /* cibles tactiles d'au moins 44px de haut */
  .nav__links .nav__lang-link { padding: 12px 10px; display: inline-block; }
}

@media (max-width: 560px) {
  .nav__logo-img { max-height: 38px; }
  .nav .nav__right { gap: 8px; }
  .nav .nav__right .btn--fill { padding: 9px 13px; font-size: 13px; }
  .nav .nav__right .btn--fill svg { display: none; }
}

/* ---- Grille de chiffres : le style inline repeat(3,1fr) dans le HTML
   ecrasait la media query et bloquait 3 colonnes sur mobile ---- */
.stats__grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 800px) {
  .stats__grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .stats__grid, .stats__grid--3 { grid-template-columns: 1fr; }
  .stats__grid .stats__cell { padding: 26px 2px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stats__grid .stats__cell:nth-child(odd) { border-right: 0; }
  .stats__grid .stats__cell:last-child { border-bottom: 0; }
  .stats__num { font-size: clamp(40px, 13vw, 56px); }
}

/* ---- Bas de page : les deux blocs (copyright / liens) etaient sur une
   seule ligne non secable et debordaient sous 400px ---- */
@media (max-width: 700px) {
  .foot__bar {
    flex-wrap: wrap; justify-content: flex-start;
    gap: 10px 18px;
  }
}

/* ---- Filet de securite : un mot tres long (les composes neerlandais
   du type "kwaliteitscontrolelaboratorium") ne doit jamais elargir la
   page. Le mot se coupe plutot que de pousser la mise en page. ---- */
body { overflow-wrap: break-word; }

/* ============================================================
   LIGNE DU TEMPS (page Notre histoire)
   Rail vertical arc-en-ciel, une pastille par jalon, annee a gauche.
   Le rail est un fond de 2px de large porte par chaque .tl__body :
   il se prolonge donc naturellement d'un jalon au suivant.
   ============================================================ */
.timeline { padding: clamp(44px, 6vw, 90px) 0; }
.timeline__list { max-width: 940px; margin: 0 auto; }

.tl {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 26px;
}
.tl__year {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 27px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
  text-align: right;
  padding-top: 16px;
  /* neutralise le body { overflow-wrap: break-word } : un libelle d'annee
     ne doit jamais se couper au milieu (ex. « Aujourd'hui »). */
  overflow-wrap: normal;
  hyphens: none;
}
/* Libelle long du dernier jalon (« Aujourd'hui », « Vandaag », « Today ») :
   taille reduite + insecable pour tenir sur une seule ligne. */
.tl--now .tl__year {
  font-size: clamp(16px, 1.55vw, 20px);
  white-space: nowrap;
}
.tl__body {
  position: relative;
  padding-left: 30px;
  padding-bottom: 30px;
  background-image: var(--rb);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: left top;
}
/* le rail s'arrete juste apres la derniere pastille */
.tl:last-child .tl__body { background-size: 2px 34px; padding-bottom: 4px; }

.tl__body::before {
  content: '';
  position: absolute; left: -6px; top: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c, var(--mondo));
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line-2);
}
.tl__card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 24px 22px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* Visuel optionnel en tete de carte : la photo est collee aux bords hauts
   de la carte (marges negatives compensant le padding). */
.tl__media {
  margin: -20px -24px 18px;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
  background: var(--bg-2);
  line-height: 0;
}
.tl__media img {
  width: 100%; height: clamp(120px, 15vw, 170px);
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.tl__card:hover .tl__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .tl__media img { transition: none; }
  .tl__card:hover .tl__media img { transform: none; }
}
.tl__card:hover {
  border-color: var(--line-2);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.tl__kicker {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c, var(--muted));
  margin-bottom: 9px;
}
.tl__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 20px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--fg);
  margin-bottom: 8px;
}
.tl__desc {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
  margin: 0;
}
/* jalon de cloture (aujourd'hui) : mis en avant */
.tl--now .tl__card {
  background: var(--bg-2);
  border-color: var(--line-2);
}
.tl--now .tl__year { color: var(--fg); }

@media (max-width: 640px) {
  /* L'annee passe au-dessus de la carte : le rail et la pastille sont alors
     portes par le conteneur du jalon, pour rester continus d'un jalon a l'autre. */
  .tl {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 28px;
    background-image: var(--rb);
    background-size: 2px 100%;
    background-repeat: no-repeat;
    background-position: left top;
  }
  .tl:last-child { background-size: 2px 30px; }
  .tl::before {
    content: '';
    position: absolute; left: -6px; top: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--c, var(--mondo));
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--line-2);
  }
  .tl__year {
    text-align: left;
    padding-top: 0; margin-bottom: 7px;
    font-size: 19px;
  }
  .tl__body {
    padding-left: 0; padding-bottom: 26px;
    background-image: none;
  }
  .tl:last-child .tl__body { background-size: auto; padding-bottom: 2px; }
  .tl__body::before { display: none; }
  .tl__card { padding: 17px 18px 19px; border-radius: 15px; }
}

/* ---- Confort tactile et saisie sur mobile ---- */
@media (max-width: 700px) {
  /* En dessous de 16px, iOS zoome la page a chaque fois qu'on touche
     un champ, et ne dezoome pas ensuite. */
  .cform__field input,
  .cform__field select,
  .cform__field textarea { font-size: 16px; }

  .cform__check input { width: 22px; height: 22px; }
  .btn--sm { height: 44px; }
  .foot__logo-img { max-height: 76px; }

  /* la carte gardait une hauteur figee de 440px */
  .contact-map iframe { height: 300px; }

  /* liens de pied de page : cibles tactiles trop rapprochees */
  .foot__col a { display: inline-block; padding: 7px 0; }
}

/* ---- Titres : les bornes basses des clamp() etaient trop hautes,
   les titres occupaient jusqu'a 7 lignes sur un petit ecran ---- */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(34px, 10vw, 52px); }
  .page-hero__title { font-size: clamp(32px, 9.5vw, 48px); }
  .cta__h { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.08; }
}

/* ============================================================
   Video d'accueil : le fichier pese 22 Mo et etait telecharge en
   entier par chaque visiteur mobile (autoplay neutralise preload).
   Sous 900px on affiche le poster a la place.
   ============================================================ */
@media (max-width: 900px) {
  .hero__bg { display: none; }
  .hero--video {
    background-image: url(/assets/img/poster-home.jpg);
    background-size: cover;
    background-position: 32% 50%;
  }
}

/* ---- Carte d'Europe (page Distribution) ---- */
/* Le titre en surimpression recouvrait jusqu'a 69% de la carte, en
   degrade transparent pose sur la photo. Declare APRES la regle
   existante a 600px, sinon celle-ci reprendrait la main. */
@media (max-width: 760px) {
  .globe-overlay-title {
    top: 0; left: 0; right: 0;
    padding: 8px 12px;
    font-size: clamp(14px, 3.8vw, 20px);
    line-height: 1.25;
    background: rgba(255,255,255,0.88);
    border-radius: 22px 22px 0 0;
  }
}
/* Le lettrage SVG est en unites de viewBox : rendu a 2,7px sur mobile.
   Les paliers compensent la reduction d'echelle. */
@media (max-width: 800px) {
  .globe-origin text { font-size: 30px; stroke-width: 6px; }
  .globe-origin > circle:not(.globe-pulse) { r: 12px; }
}
@media (max-width: 600px) {
  .globe-origin text { font-size: 40px; stroke-width: 8px; }
  .globe-origin > circle:not(.globe-pulse) { r: 16px; }
}
@media (max-width: 480px) {
  .globe-origin text { font-size: 50px; stroke-width: 10px; }
  .globe-origin > circle:not(.globe-pulse) { r: 20px; }
}
@media (max-width: 400px) {
  .globe-origin text { font-size: 68px; stroke-width: 13px; }
  .globe-origin > circle:not(.globe-pulse) { r: 26px; }
}

/* ---- Bande photo : cadre de 300px de haut pour 280px de large sous
   320px, soit un cadre portrait pour une photo paysage ---- */
@media (max-width: 560px) {
  .photo-band--framed img { height: clamp(190px, 58vw, 300px); }
  .photo-band img { height: clamp(180px, 54vw, 280px); }
}

/* ---- Bandeau cookies : ancre en bas, il masquait jusqu'a 210px de
   l'ecran, rendant la barre basse du pied de page (dont le lien
   obligatoire vers les mentions legales) inatteignable ---- */
body:has(#cc-banner) { padding-bottom: 150px; }
#cc-banner .cc-btn { height: 44px; padding: 0 20px; }
#cc-banner .cc-actions { gap: 14px; }

@media (max-width: 600px) {
  body:has(#cc-banner) { padding-bottom: 230px; }
  #cc-banner {
    left: 0; right: 0; bottom: 0;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
  }
  #cc-banner .cc-text { flex: 1 1 100%; font-size: 13px; }
  #cc-banner .cc-actions { width: 100%; }
  #cc-banner .cc-btn { flex: 1 1 0; padding: 0 12px; }
}

/* ---- Derniers ecarts de cibles tactiles ---- */
@media (max-width: 700px) {
  .foot__bar a { display: inline-block; padding: 8px 0; }
}
@media (max-width: 900px) {
  .contact-block p a { display: inline-block; padding: 13px 2px; line-height: 1.3; }
}
/* le logo de pied de page etait plus grand sur tablette qu'en desktop */
@media (min-width: 701px) and (max-width: 900px) {
  .foot__logo-img { max-height: 96px; }
}