/* ============================================================
   EOLIOS — Design System (refonte premium blanc & bleu)
   Type:  Space Grotesk · IBM Plex Sans · IBM Plex Mono
   ============================================================ */

:root {
  /* Neutrals — subtly cool whites */
  --white:      #ffffff;
  --paper:      #f7f9fc;
  --paper-2:    #eef3fa;
  --line:       #e2e8f2;
  --line-soft:  #edf1f8;

  /* Ink — deep navy family */
  --navy:       #071a33;
  --ink:        #0d2444;
  --ink-2:      #34507a;
  --muted:      #6c7f9c;
  --faint:      #9fb0c8;

  /* EOLIOS blue */
  --blue:       #1657e0;
  --blue-700:   #1140ac;
  --blue-bright:#2e7dff;
  --sky:        #e9f1ff;
  --sky-2:      #d7e6ff;

  /* Thermal CFD colormap (jet-like) */
  --t-0:  #181f6e;
  --t-1:  #1f4bd8;
  --t-2:  #2e86ff;
  --t-3:  #19c4c4;
  --t-4:  #8fe34a;
  --t-5:  #f7d13b;
  --t-6:  #f4831f;
  --t-7:  #e8392b;

  --grad-thermal: linear-gradient(120deg,
    var(--t-0) 0%, var(--t-1) 16%, var(--t-2) 32%,
    var(--t-3) 50%, var(--t-4) 64%, var(--t-5) 78%,
    var(--t-6) 90%, var(--t-7) 100%);

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(7,26,51,.06), 0 1px 1px rgba(7,26,51,.04);
  --sh-md: 0 8px 24px -10px rgba(13,36,68,.16), 0 2px 6px rgba(13,36,68,.06);
  --sh-lg: 0 30px 60px -24px rgba(13,36,68,.28), 0 8px 24px -12px rgba(13,36,68,.12);
  --sh-blue: 0 14px 30px -10px rgba(22,87,224,.40);

  /* Geometry */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --maxw: 1200px;

  --ff-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --ff-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

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

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }

/* ---------- Mono / eyebrow labels ---------- */
.kicker {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--blue);
  opacity: .55;
}
.kicker.center::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
}
.btn-primary:hover { background: var(--blue-700); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink-2); background: var(--paper); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #0c2848; transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.arrow { transition: transform .2s ease; }
.btn:hover .arrow,
.txtlink:hover .arrow { transform: translateX(3px); }

.txtlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue);
  font-size: 15.5px;
}
.txtlink svg { width: 16px; height: 16px; }

/* ---------- Header / Nav ---------- */
/* ===== Two-tier header ===== */
.nav-row { max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; display: flex; align-items: center; }
.nav-row-top { padding-block: 8px; gap: 22px; }
.nav-row-top .brand .logo-slot { width: 128px; height: 32px; }
.nav-util { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.nav-util .btn { padding: 9px 18px; font-size: 13.5px; }
.nav-util .btn-primary { border-radius: 0; padding: 8px 16px; font-size: 13px; box-shadow: none; background: #0043AF; color: #fff; border-color: #0043AF; }
.nav-util .btn-primary:hover { background: #fff; color: #0043AF; border-color: #0043AF; transform: none; }
.nav-util .btn-primary svg { stroke: currentColor; }
.nav-util .btn svg { width: 15px; height: 15px; }
.nav-util > a { font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.nav-util > a:hover { color: var(--navy); }
.lang-sel { position: relative; }
.lang-btn { background: none; border: 0; cursor: pointer; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.lang-btn .fl, .lang-menu a .fl { font-size: 14px; line-height: 1; margin-right: 7px; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.lang-menu a .fl { display: inline-block; width: 18px; text-align: center; }
.lang-btn svg { width: 12px; height: 12px; }
.lang-btn:hover { color: var(--navy); }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); min-width: 180px; padding: 7px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 90; }
.lang-sel:hover .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a { display: block; padding: 9px 12px; font-size: 13.5px; color: var(--ink); border-radius: 6px; }
.lang-menu a:hover { background: var(--paper); color: var(--blue); }
.lang-menu a b { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-right: 8px; }

.nav-bottom { border-top: 1px solid var(--line-soft); }
.nav-bottom .nav-row { position: relative; padding-block: 2px; }
.nav-bottom .nav-links { position: static; display: flex; justify-content: space-between; gap: 8px; width: 100%; margin: 0; }
.nav-bottom .nav-item { position: static !important; }
.nav-bottom .nav-trigger { font-size: 14px; font-weight: 600; letter-spacing: .01em; padding: 9px 0; white-space: nowrap; }

/* full-width mega centered on the page (independent of which domain is hovered) */
.mega.wide { left: 50%; right: auto; width: min(1160px, calc(100vw - 36px)); top: 100%; transform: translateX(-50%) translateY(8px); }
.nav-item.open .mega.wide { transform: translateX(-50%) translateY(0); }
.mega.wide::before { display: none; }

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled { border-color: var(--line); box-shadow: 0 1px 0 rgba(7,26,51,.03); }

/* Overlay variant — nav floats over a dark hero (transparent, light text) */
.nav.over {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; backdrop-filter: none; border-color: transparent;
}
.nav.over:not(.scrolled) .brand-name,
.nav.over:not(.scrolled) .nav-trigger,
.nav.over:not(.scrolled) .nav-links > a { color: #fff !important; }
.nav.over:not(.scrolled) .nav-util > a,
.nav.over:not(.scrolled) .lang-btn { color: rgba(255,255,255,.85); }
.nav.over:not(.scrolled) .nav-util > a:hover,
.nav.over:not(.scrolled) .lang-btn:hover { color: #fff; }
.nav.over:not(.scrolled) .nav-bottom { border-top-color: rgba(255,255,255,.16); }
.nav.over:not(.scrolled) .nav-trigger .chev { color: rgba(255,255,255,.7); }
.nav.over:not(.scrolled) .nav-links > a:hover,
.nav.over:not(.scrolled) .nav-trigger:hover { color: #cfe0ff; }
.nav.over:not(.scrolled) .lang { color: rgba(255,255,255,.75); }
.nav.over:not(.scrolled) .lang b { color: #fff; }
.nav.over:not(.scrolled) .logo-slot { border-color: rgba(255,255,255,.4); }
.nav.over:not(.scrolled) .logo-slot::part(placeholder) { color: rgba(255,255,255,.7); }
/* once scrolled, fall back to the solid light bar */
.nav.over.scrolled { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); }
.nav-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 38px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--navy);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  flex: none;
}
.brand-mark::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-thermal);
  opacity: .9;
  -webkit-mask: radial-gradient(circle at 50% 120%, #000 30%, transparent 62%);
          mask: radial-gradient(circle at 50% 120%, #000 30%, transparent 62%);
}
.brand-mark span {
  position: relative; z-index: 1;
  font-family: var(--ff-display); font-weight: 700;
  color: #fff; font-size: 18px;
}
.brand-name {
  font-family: var(--ff-display);
  font-weight: 600; font-size: 20px;
  letter-spacing: .01em; color: var(--navy);
}
.brand-name b { color: var(--blue); font-weight: 600; }
.nav-links { display: flex; gap: 28px; margin-left: 8px; }
.nav-links > a {
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 6px 0; position: relative;
}
.nav-links > a:hover { color: var(--navy); }

/* ---------- Mega menu ---------- */
.nav-item { position: relative; }
.nav-trigger {
  font-family: var(--ff-body);
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; cursor: pointer;
  padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
}
.nav-trigger:hover, .nav-item.open .nav-trigger { color: var(--navy); }
.nav-trigger .chev { width: 14px; height: 14px; transition: transform .25s ease; color: var(--faint); }
.nav-item.open .nav-trigger .chev { transform: rotate(180deg); color: var(--blue); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 0;
  transform: translateY(8px);
  width: min(940px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility .22s;
  z-index: 80;
}
.nav-item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega::before {
  content: ""; position: absolute; top: -7px; left: 40px; transform: rotate(45deg);
  width: 13px; height: 13px; background: #fff;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 3px 0 0 0;
}
.mega-in { display: grid; grid-template-columns: 1fr 268px; gap: 14px; }

.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 15px; border-radius: var(--r);
  transition: background .18s ease;
}
.mega-card:hover { background: var(--paper); }
.mega-card .mc-ic {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  background: var(--sky); color: var(--blue);
  display: grid; place-items: center; transition: background .18s ease, color .18s ease;
}
.mega-card .mc-ic svg { width: 22px; height: 22px; }
.mega-card:hover .mc-ic { background: var(--blue); color: #fff; }
.mega-card .mc-t {
  font-family: var(--ff-display); font-weight: 600; font-size: 15.5px;
  color: var(--navy); display: flex; align-items: center; gap: 7px;
}
.mega-card .mc-t .badge {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: var(--sky); padding: 2px 6px; border-radius: 5px;
}
.mega-card .mc-d { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

.mega-rail {
  position: relative; overflow: hidden;
  border-radius: var(--r); padding: 22px;
  display: flex; flex-direction: column;
  background: var(--navy); color: #fff; min-height: 230px;
}
.mega-rail .thermal { position: absolute; inset: 0; opacity: .5; }
.mega-rail .rail-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.mega-rail .rk {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #9fc0ff;
}
.mega-rail h4 { color: #fff; font-size: 20px; margin-top: 12px; line-height: 1.1; }
.mega-rail p { color: #c4d4ee; font-size: 13px; margin-top: 8px; }
.mega-rail .rail-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: #fff;
  padding-top: 16px;
}
.mega-rail .rail-cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
.mega-rail .rail-cta:hover svg { transform: translateX(3px); }

.mega-foot {
  margin-top: 8px; padding: 12px 15px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line-soft);
}
.mega-foot span { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.mega-foot .txtlink { font-size: 14px; }

@media (max-width: 1040px) { .mega { width: min(760px, calc(100vw - 32px)); } }

/* ============ eolios-style domain mega menu ============ */
.nav-bottom .nav-trigger { text-decoration: none; }
.nav-bottom .nav-trigger .lbl { transition: color .2s ease; }
.nav-bottom .nav-trigger:hover .lbl,
.nav-item.open > .nav-trigger .lbl {
  background: var(--grad-thermal); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nav-item.open > .nav-trigger .chev { color: var(--blue); }
.mega.wide { width: min(1160px, calc(100vw - 36px)); padding: 0; overflow: hidden; }
.mega.wide::before { left: 60px; }
.mega-cols { display: grid; grid-template-columns: 1fr 308px; }
.mega-main { padding: 24px 28px 26px; }
.msec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.msec-head .t { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.msec-head a { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; gap: 7px; align-items: center; }
.msec-head a:hover { color: var(--blue); }
.msec-head [data-nolink] { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); display: inline-flex; gap: 7px; align-items: center; cursor: default; }
.msec-head [data-nolink] .t { color: var(--faint); }
.exp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin-bottom: 8px; }
.exp-list a { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.3; }
.exp-list a .ar { color: var(--blue); flex: none; margin-top: 1px; transition: transform .18s ease; }
.exp-list a:hover { color: var(--blue); }
.exp-list a:hover .ar { transform: translate(2px,-2px); }
/* fallback (untranslated target) — match the link row layout but muted & non-clickable */
.exp-list > [data-nolink] { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--muted); font-weight: 500; line-height: 1.3; cursor: default; }
.exp-list > [data-nolink] .ar { color: var(--faint); flex: none; margin-top: 1px; }
.mega-projwrap { margin-top: 22px; }
.mega-proj { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.mega-pc { position: relative; aspect-ratio: 2/1; overflow: hidden; background: var(--grad-thermal); display: block; }
.mega-pc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mega-pc:hover img { transform: scale(1.06); }
.mega-pc .g { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(4,12,30,.82)); }
.mega-pc b { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #fff; font-family: var(--ff-display); font-weight: 600; font-size: 12.5px; z-index: 1; line-height: 1.18; }
.mega-rail2 { background: var(--paper); border-left: 1px solid var(--line); padding: 22px; }
.mega-feat { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--navy); }
.mega-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mega-feat:hover img { transform: scale(1.05); }
.mega-feat .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,26,51,.15) 0%, rgba(7,26,51,.55) 55%, rgba(7,26,51,.92) 100%); z-index: 1; }
.mega-feat .thermal { position: absolute; inset: 0; opacity: .6; }
.mega-feat .fin { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.mega-feat .ek { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8fb6ff; }
.mega-feat h5 { color: #fff; font-family: var(--ff-display); font-size: 17px; font-weight: 600; line-height: 1.15; margin-top: 5px; }
.mega-feat .fbtn { margin-top: 11px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: #0043AF; color: #fff; font-weight: 600; font-size: 12px; padding: 9px 14px; transition: background .2s; }
.mega-feat .fbtn svg { width: 13px; height: 13px; }
.mega-feat:hover .fbtn { background: #00a3b4; }
.mega-ress { margin-top: 20px; }
.mega-ress a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.mega-ress a .ar { color: var(--blue); flex: none; margin-top: 1px; }
.mega-ress a:hover { color: var(--blue); }
.mega-ress > [data-nolink] { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); line-height: 1.3; cursor: default; }
.mega-ress > [data-nolink] .ar, .mega-ress > [data-nolink] .rthumb { flex: none; }
@media (max-width: 1100px) { .mega.wide { width: min(820px, calc(100vw - 28px)); } .mega-cols { grid-template-columns: 1fr; } .mega-rail2 { border-left: 0; border-top: 1px solid var(--line); } }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-cta .lang {
  font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted);
  letter-spacing: .08em; cursor: pointer;
}
.nav-cta .lang b { color: var(--navy); }

/* ---------- Section scaffolding ---------- */
.section { padding: 110px 0; }
.section.tight { padding: 78px 0; }
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  margin-top: 18px;
}
.section-head p {
  margin-top: 18px; color: var(--ink-2); font-size: 18px;
}

.eyebrow-row { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }

/* ---------- CFD thermal field (decorative data-viz) ---------- */
.thermal {
  position: relative; overflow: hidden;
  background: #07112a;
}
.thermal::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 55% at 22% 38%, rgba(46,134,255,.95), transparent 60%),
    radial-gradient(34% 46% at 62% 30%, rgba(25,196,196,.85), transparent 62%),
    radial-gradient(30% 40% at 78% 62%, rgba(247,209,59,.85), transparent 60%),
    radial-gradient(26% 38% at 90% 50%, rgba(244,131,31,.9), transparent 58%),
    radial-gradient(22% 30% at 96% 46%, rgba(232,57,43,.85), transparent 60%),
    radial-gradient(50% 60% at 8% 70%, rgba(24,31,110,.95), transparent 65%);
  filter: blur(14px) saturate(1.15);
  animation: drift 24s ease-in-out infinite alternate;
}
.thermal::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
  mix-blend-mode: screen; opacity: .5;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1.02); }
  100% { transform: translate3d(-3%,2%,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .thermal::before { animation: none; } }

/* streamline overlay used on cards */
.streamlines {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-radial-gradient(circle at 30% 120%, transparent 0 18px, rgba(255,255,255,.10) 18px 19px, transparent 19px 40px);
  -webkit-mask: linear-gradient(0deg, transparent, #000 40%);
          mask: linear-gradient(0deg, transparent, #000 40%);
}

/* ---------- Image slot base look ---------- */
image-slot {
  --slot-bg: #07112a;
  background: var(--grad-thermal);
  color: #eaf2ff;
  border-radius: 0 !important;
}
image-slot::part(placeholder) {
  font-family: var(--ff-mono);
  letter-spacing: .04em;
  font-size: 12.5px;
}

/* ---------- Cards ---------- */
.card.proj { border-radius: 0; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .22s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--sky-2); }

/* ---------- Stats ---------- */
.stat-n {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 58px);
  letter-spacing: -.03em;
  color: var(--navy);
  line-height: 1;
}
.stat-n .u { color: var(--blue); }
.stat-l {
  font-family: var(--ff-mono); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-top: 12px;
}

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #cdd9ec; padding: 80px 0 40px; }
.footer a { color: #cdd9ec; }
.footer a:hover { color: #fff; }

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- EOLIOS logo lockup ---------- */
.brand { gap: 12px; }
.logo-mark { width: 38px; height: 38px; flex: none; display: block; }
.logo-word {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .005em;
  color: var(--navy);
  line-height: 1;
}
.logo-word i { color: var(--blue); font-style: normal; }
.foot-brand .logo-word { color: #fff; }
.foot-brand .logo-word i { color: #3fdada; }
/* real logo image */
.logo-img { height: 34px; width: auto; display: block; }
.nav-row-top .brand .logo-img { height: 30px; }
.foot-brand .logo-img-white { height: 40px; filter: none; background: #fff; padding: 8px 12px; border-radius: 8px; }
.nav.over:not(.scrolled) .logo-img { filter: brightness(0) invert(1); }

/* ---------- Logo drop slot (user-supplied) ---------- */
.brand .logo-slot {
  width: 158px; height: 42px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  transition: border-color .2s ease;
}
.brand .logo-slot:hover { border-color: var(--sky-2); }
.brand .logo-slot::part(placeholder) {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
.foot-brand .logo-slot { border-color: rgba(255,255,255,.2); }
.foot-brand .logo-slot::part(placeholder) { color: #7d92b4; }

/* ============================================================
   PAGE TEMPLATES — sub-expertise (niv.3) & project (niv.4)
   ============================================================ */

/* Breadcrumb bar */
.crumbbar { border-bottom: 1px solid var(--line-soft); background: #fff; }
.crumbbar .wrap { padding-block: 16px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--blue); }
.crumbs .sep { color: var(--faint); }
.crumbs .here { color: var(--navy); }

/* ---- Sub-expertise hero (light) ---- */
.sx-hero { padding: 60px 0 58px; border-bottom: 1px solid var(--line-soft); }
.sx-hero .kicker { margin-bottom: 18px; }
.sx-hero h1 { font-size: clamp(34px, 4.6vw, 56px); max-width: 17ch; }
.sx-hero .lead { margin-top: 22px; font-size: 19px; color: var(--ink-2); max-width: 62ch; }
.sx-hero .hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* model list (what we model) */
.model-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.model-list { columns: 2; column-gap: 30px; margin-top: 8px; }
.model-list li { list-style: none; display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; break-inside: avoid; }
.model-list .ck { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--sky); color: var(--blue); display: grid; place-items: center; margin-top: 1px; }
.model-list .ck svg { width: 13px; height: 13px; }
.model-list span.t { font-size: 15px; color: var(--ink); }
.model-visual { border-radius: 0; overflow: hidden; aspect-ratio: 4/3.4; box-shadow: var(--sh-lg); border: 1px solid var(--line); position: relative; }
.model-visual image-slot { width: 100%; height: 100%; }

/* scenarios matrix */
.scn-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 46px; }
.scn { padding: 28px; }
.scn .h { display: flex; align-items: center; gap: 12px; }
.scn .h .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
.scn .h .ic svg { width: 22px; height: 22px; }
.scn h3 { font-size: 20px; }
.scn .tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.scn .tags span { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); padding: 6px 11px; border-radius: 8px; }

/* ---- Project page two-column ---- */
.section:has(> .wrap > .proj-layout) { background: var(--paper); }
.proj-layout { display: grid; grid-template-columns: 296px 1fr; gap: 40px; align-items: start; }
/* the text column floats as its own sheet */
/* the text column: summary sheet + article sheet, each floating */
.proj-main { background: transparent; box-shadow: none; padding: 0; }
.proj-main > * + * { margin-top: 26px; }
.proj-summary, .proj-article { background: #fff; padding: 44px 48px; box-shadow: 0 26px 64px -32px rgba(13,36,68,.22), 0 3px 12px rgba(13,36,68,.05); }
.proj-summary > * + *, .proj-article > * + * { margin-top: 40px; }
@media (max-width: 760px) { .proj-summary, .proj-article { padding: 26px 22px; } }
.proj-aside { position: static; align-self: start; display: flex; flex-direction: column; gap: 18px; }
.aside-head { background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 16px 38px -24px rgba(13,36,68,.20), 0 2px 8px rgba(13,36,68,.04); padding: 24px 20px; text-align: center; }
.aside-head .ah-domain { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.aside-head .ah-domain:hover { text-decoration: underline; }
.aside-head .ah-type { display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
.aside-head .ah-title { font-family: var(--ff-display); font-weight: 600; font-size: 20px; color: var(--navy); margin-top: 11px; line-height: 1.2; letter-spacing: -.01em; }
.aside-head .ah-rule { display: none; }
/* aside-head with project background image */
.aside-head.has-bg { position: relative; border: 0; padding: 28px 22px; overflow: hidden; color: #fff; }
.aside-head.has-bg::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; background-image: var(--ah-img); z-index: 0; }
.aside-head.has-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,17,42,.55), rgba(7,17,42,.82)); z-index: 1; }
.aside-head.has-bg > * { position: relative; z-index: 2; }
.aside-head.has-bg .ah-domain { color: #8fc0ff; }
.aside-head.has-bg .ah-type { color: #c4d4ee; }
.aside-head.has-bg .ah-title { color: #fff; }
.aside-card { border: 1px solid var(--line-soft); border-radius: 3px; background: #fff; overflow: hidden; box-shadow: 0 16px 38px -24px rgba(13,36,68,.20), 0 2px 8px rgba(13,36,68,.04); }
.aside-card .ac-head { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 16px 20px 0; }
.fiche { padding: 8px 20px 18px; }
.fiche dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.fiche .row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.fiche .row:last-child { border-bottom: 0; }
.fiche dt { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fiche dd { margin: 0; font-weight: 600; color: var(--navy); font-size: 14.5px; text-align: right; }

.aside-links { padding: 6px 12px 12px; }
.aside-links a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; transition: background .16s ease; }
.aside-links a:hover { background: var(--paper); }
.aside-links a .mk { flex: none; width: 36px; height: 28px; border-radius: 6px; overflow: hidden; position: relative; background: var(--grad-thermal); }
.aside-links a .mk.topic { background: var(--sky); color: var(--blue); display: grid; place-items: center; }
.aside-links a .mk.topic svg { width: 16px; height: 16px; }
.aside-links a .tx { display: flex; flex-direction: column; }
.aside-links a .tx b { font-family: var(--ff-display); font-weight: 600; font-size: 14px; color: var(--navy); line-height: 1.2; }
.aside-links a .tx s { text-decoration: none; font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .03em; margin-top: 2px; }
.aside-links a .go { margin-left: auto; color: var(--faint); flex: none; transition: transform .18s ease, color .18s ease; }
.aside-links a:hover .go { color: var(--blue); transform: translateX(2px); }

.aside-cta { background: var(--navy); color: #fff; border-radius: 3px; padding: 22px; position: relative; overflow: hidden; }
.aside-cta .thermal { position: absolute; inset: 0; opacity: .45; }
.aside-cta .in { position: relative; z-index: 2; }
.aside-cta h4 { color: #fff; font-size: 18px; line-height: 1.15; }
.aside-cta p { color: #c4d4ee; font-size: 13px; margin-top: 8px; }
.aside-cta .btn { margin-top: 16px; width: 100%; justify-content: center; }

/* project main column */
.proj-main > * + * { margin-top: 40px; }
.proj-hero-visual { border-radius: 0; overflow: hidden; aspect-ratio: 16/9; position: relative; box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.proj-hero-visual image-slot { width: 100%; height: 100%; }
.proj-block h2 { font-size: clamp(25px, 3vw, 34px); }
.proj-block h2 .num { font-family: var(--ff-mono); font-size: .5em; color: var(--blue); letter-spacing: .04em; vertical-align: middle; margin-right: 12px; }
.proj-block p { margin-top: 16px; color: var(--ink); font-size: 17px; text-align: justify; -webkit-hyphens: none; hyphens: none; }
.proj-block p + p { margin-top: 14px; }
.lede { font-size: 17px !important; color: var(--ink) !important; line-height: 1.72; text-align: justify; -webkit-hyphens: none; hyphens: none; }

.method-steps { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.method-steps .ms { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-soft); }
.method-steps .ms:first-child { border-top: 0; }
.method-steps .ms .n { font-family: var(--ff-mono); font-size: 13px; color: var(--blue); flex: none; width: 30px; padding-top: 2px; }
.method-steps .ms b { font-family: var(--ff-display); font-weight: 600; color: var(--navy); font-size: 17px; }
.method-steps .ms p { margin-top: 5px; font-size: 15.5px; }

.res-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; }
.res-cards .rc { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.res-cards .rc .n { font-family: var(--ff-display); font-weight: 600; font-size: 34px; color: var(--navy); letter-spacing: -.02em; }
.res-cards .rc .n .u { color: var(--blue); }
.res-cards .rc .l { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }

.callout { border-left: 3px solid var(--blue); background: var(--sky); border-radius: 0 var(--r) var(--r) 0; padding: 22px 26px; }
.callout p { margin: 0; color: var(--ink); font-size: 17px; }
.callout .src { font-family: var(--ff-mono); font-size: 11.5px; color: var(--blue); letter-spacing: .06em; text-transform: uppercase; margin-top: 12px; }

/* ---- article reading-aerators (break up heavy text) ---- */
/* key figures strip */
.keyfacts { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.kf { border: 1px solid var(--line); background: var(--paper); padding: 20px; text-align: center; }
.kf .ic { width: 34px; height: 34px; color: var(--blue); display: grid; place-items: center; margin: 0 auto 12px; }
.kf .ic svg { width: 24px; height: 24px; }
.kf .n { font-family: var(--ff-display); font-weight: 600; font-size: 27px; color: var(--navy); letter-spacing: -.02em; line-height: 1; }
.kf .n .u { color: var(--blue); font-size: .7em; }
.kf .l { font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 8px; line-height: 1.35; }
/* insight note with icon */
.art-note { display: flex; gap: 16px; background: var(--sky); border: 1px solid var(--sky-2); padding: 20px 22px; align-items: flex-start; margin: 24px 0; clear: both; }
.art-note .ic { flex: none; width: 30px; height: 30px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.art-note .ic svg { width: 17px; height: 17px; }
.art-note p { margin: 0 !important; font-size: 15.5px; color: var(--ink); text-align: left !important; }
.art-note b { color: var(--navy); }
/* tools / method chips */
.art-tools { display: flex; flex-wrap: wrap; gap: 9px; }
.art-tools .chip { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 8px 13px; }
.art-tools .chip b { color: var(--navy); font-weight: 600; }
@media (max-width: 620px) { .keyfacts { grid-template-columns: 1fr; } }

/* bottom "other projects" rail */
.more-proj { border-top: 1px solid var(--line); }
.more-proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 36px; }

@media (max-width: 1000px) {
  .model-grid { grid-template-columns: 1fr; }
  .scn-grid { grid-template-columns: 1fr; }
  /* Option B — la colonne de gauche se réorganise sur mobile/tablette :
     doublons masqués (fiche=meta-strip, projets liés=grille du bas, recherche=méga-menu, CTA=contact),
     on garde le sommaire (accordéon, en haut), la localisation et les dossiers techniques (en bas) */
  .proj-layout { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .proj-aside { display: contents; }
  .proj-aside > * { width: 100%; flex: none; }
  .proj-aside > [data-aside-kind="head"],
  .proj-aside > [data-aside-kind="fiche"],
  .proj-aside > [data-aside-kind="search"],
  .proj-aside > [data-aside-kind="cta"],
  .proj-aside > [data-aside-list="projets"] { display: none; }
  .proj-aside > [data-aside-kind="toc"] { order: -1; }
  .proj-main { order: 0; }
  .proj-aside > [data-aside-kind="map"] { order: 1; }
  .proj-aside > [data-aside-list="dossiers"] { order: 2; }
  /* sommaire repliable */
  .aside-acc .ac-head { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .aside-acc .ac-head::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; opacity: .55; }
  .aside-acc[data-open] .ac-head::after { transform: rotate(225deg); }
  .aside-acc .toc { display: none; }
  .aside-acc[data-open] .toc { display: block; margin-top: 12px; }
  .res-cards, .more-proj-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .model-list { columns: 1; }
  .res-cards, .more-proj-grid { grid-template-columns: 1fr; }
}

/* ---------- Big video header (project hero) ---------- */
.video-hero {
  position: relative;
  min-height: 100vh;
  background: #040e22;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.video-hero.xl { min-height: 100vh; }
.video-hero .vbg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.video-hero .vbg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;          /* 16:9 by width */
  min-height: 100%; min-width: 177.78vh;  /* 16:9 by height — cover */
  transform: translate(-50%, -50%);
  border: 0;
}
.video-hero .vbg .vposter {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.05) contrast(1.02);
  z-index: 0;
}
.video-hero .vbg .ytbg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .8s ease; overflow: hidden;
}
.video-hero.playing .vbg .ytbg { opacity: 1; }
.video-hero .vbg .ytbg iframe {
  position: absolute; top: 50%; left: 50%;
  width: 100vw !important; height: 56.25vw !important;          /* 16:9 by width */
  min-height: 100% !important; min-width: 177.78vh !important;  /* 16:9 by height — cover */
  transform: translate(-50%, -50%); border: 0;
}
/* sound toggle */
.vsound {
  position: absolute; z-index: 4; right: 28px; bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(7,17,42,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 11px 18px 11px 13px; cursor: pointer; color: #fff;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.vsound:hover { background: rgba(22,87,224,.7); transform: translateY(-1px); }
.vsound .ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; flex: none; }
.vsound .ic svg { width: 14px; height: 14px; }
.vsound .on { display: none; }
.vsound.unmuted .on { display: inline; }
.vsound.unmuted .off { display: none; }
@media (max-width: 760px) { .vsound { right: 16px; bottom: 16px; } }
.video-hero .vveil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,12,30,.32) 0%, rgba(4,12,30,.05) 40%, rgba(4,12,30,.55) 82%, rgba(4,12,30,.9) 100%);
}
.video-hero .vgrid {
  position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 30px);
  -webkit-mask: linear-gradient(0deg, #000, transparent 65%); mask: linear-gradient(0deg, #000, transparent 65%);
}
.video-hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 0 56px; }
.video-hero .crumbs { color: #a9c4ee; }
.video-hero .crumbs a { color: #c9dcf7; }
.video-hero .crumbs a:hover { color: #fff; }
.video-hero .crumbs .here { color: #fff; }
.video-hero .vkicker { margin-top: 28px; color: #8fb6ff; }
.video-hero .vkicker::before { background: #8fb6ff; opacity: .6; }
.video-hero h1 {
  color: #fff; font-size: clamp(32px, 4.4vw, 58px);
  max-width: 19ch; margin-top: 18px; line-height: 1.02;
}
.video-hero .vlead {
  color: #d3e1f6; font-size: 19px; margin-top: 20px; max-width: 60ch;
}
.video-hero .vmeta {
  margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px;
}
.video-hero .vmeta .chip {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em;
  color: #e7f0ff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); padding: 9px 15px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.video-hero .vmeta .chip b { color: #fff; font-weight: 600; }
.vplay {
  position: absolute; z-index: 3; right: 28px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(7,17,42,.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  padding: 12px 20px 12px 14px; cursor: pointer; color: #fff;
  font-family: var(--ff-body); font-weight: 600; font-size: 14.5px;
  transition: background .2s ease, transform .2s ease;
}
.vplay:hover { background: rgba(22,87,224,.7); transform: translateY(-50%) scale(1.03); }
.vplay .pp { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; flex: none; }
.vplay .pp svg { width: 16px; height: 16px; margin-left: 2px; }
@media (max-width: 760px) { .vplay { display: none; } .video-hero { min-height: 72vh; } }

/* Inline video block (in body, with sound + controls) */
.video-embed {
  position: relative; border-radius: 0; overflow: hidden;
  aspect-ratio: 16/9; box-shadow: var(--sh-lg); border: 1px solid var(--line);
  background: #040e22;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap {
  margin-top: 14px; font-family: var(--ff-mono); font-size: 12.5px;
  color: var(--muted); letter-spacing: .03em;
  display: flex; align-items: center; gap: 9px;
}
.video-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; }

/* meta strip below hero */
.meta-strip { background: var(--navy); color: #fff; }
.meta-strip .wrap { display: flex; flex-wrap: wrap; gap: 14px 56px; padding-block: 26px; }
.meta-strip .mi { display: flex; flex-direction: column; gap: 5px; }
.meta-strip .mi dt { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8fa3c2; }
.meta-strip .mi dd { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: 18px; color: #fff; }
.meta-strip .ms-cta { margin-left: auto; align-self: center; }

/* project content figures */
.fig { margin: 0; }
/* always keep clear breathing room around any media so it's never glued to text */
.proj-main .fig,
.proj-main .video-embed,
.proj-main .proj-hero-visual { margin-top: 14px; margin-bottom: 30px; }
.fig .ph {
  border-radius: 0; overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-2); box-shadow: var(--sh-md);
}
.fig .ph img { width: 100%; height: auto; display: block; }
/* clickable figures — hover cue + zoom */
.fig .ph { cursor: zoom-in; position: relative; }
.fig .ph img { transition: transform .4s ease, filter .3s ease; }
.fig .ph:hover img { transform: scale(1.03); filter: saturate(1.05); }
.fig .ph::after { content: ""; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(7,17,42,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M12.5 12.5 17 17M6 8h4M8 6v4'/%3E%3C/svg%3E") center/18px no-repeat; opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.fig .ph:hover::after { opacity: 1; transform: scale(1); }
/* lightbox overlay */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,10,24,.92); display: flex; align-items: center; justify-content: center; padding: 4vw; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; cursor: zoom-out; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; gap: 14px; align-items: center; transform: scale(.96); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.lightbox.open figure { transform: scale(1); }
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.lightbox figcaption { font-family: var(--ff-mono); font-size: 13px; color: #cfe0ff; letter-spacing: .03em; text-align: center; }
.lightbox .lb-close { position: fixed; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 22px; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.lightbox .lb-close:hover { background: rgba(255,255,255,.25); }
.fig figcaption {
  margin-top: 12px; font-family: var(--ff-mono); font-size: 12.5px;
  color: var(--muted); letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 9px;
}
.fig figcaption::before { content: "FIG"; font-size: 10px; letter-spacing: .1em; color: var(--blue); background: var(--sky); padding: 3px 7px; border-radius: 5px; flex: none; }
/* definition callout (expertise pages) */
.xp-def { margin-top: 24px; background: var(--sky); border-left: 3px solid var(--blue); padding: 18px 22px; }
.xp-def .t { display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.xp-def p { margin: 0; color: #0d2444; font-size: 16px; line-height: 1.65; text-align: justify; -webkit-hyphens: none; hyphens: none; }
/* text + side image as a vertically-centred 2-col row (no float — balanced whitespace) */
.xp-figrow { display: grid; grid-template-columns: 1fr minmax(260px, 42%); gap: 36px; align-items: center; margin: 30px 0; }
.xp-figrow > .txt > :first-child { margin-top: 0; }
.xp-figrow > .txt > :last-child { margin-bottom: 0; }
.xp-figrow .fig { margin: 0; clear: none; }
@media (max-width: 760px) { .xp-figrow { grid-template-columns: 1fr; gap: 18px; } }
/* numbered/checked lists: number box optically aligned with the first text line */
.proj-list li { align-items: flex-start; }
.proj-list .ck { margin-top: 1px; }
.proj-list p { text-wrap: pretty; }
/* single in-body figures: centred block (not floated) */
.fig-side { float: none; clear: both; width: 100%; max-width: 640px; margin: 30px auto; }
.fig-side figcaption { justify-content: center; text-align: center; }
/* editorial rhythm: lead paragraph after a section title + alternating side images */
.proj-article .proj-section-title + p, .proj-article .proj-section-title + h3 + p { font-size: 17px; color: var(--ink); }
.proj-article .fig-side:nth-of-type(even) { float: none; margin: 30px auto; }
/* prevent floated side-images from rising beside titles/notes — keep clean two-column rhythm */
.proj-article .proj-section-title, .proj-article h3, .proj-article .art-note, .proj-article .keyfacts, .proj-article .proj-list, .proj-summary { clear: both; }
.fig:not(.fig-side) { clear: both; }
@media (max-width: 700px) { .fig-side { float: none; width: 100%; margin: 18px 0; } }
/* paired figures sit side-by-side as a clean 2-up row */
.fig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; clear: both; }
.proj-main .fig-row { margin-top: 14px; margin-bottom: 30px; }
.fig-row .fig { margin: 0; min-width: 0; }
.fig-row .fig video, .fig-row .fig img { max-width: 100%; }
.fig-row .fig .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig-row .fig .ph { height: auto; aspect-ratio: 16 / 10; }
.fig-row .fig .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .fig-row { grid-template-columns: 1fr; } }
/* paires injectées (.proj-fig-row) : deux médias côte à côte alignés verticalement (même hauteur) — comme .fig-row */
.proj-fig-row { align-items: stretch; }
.proj-fig-row > .fig { margin: 0; min-width: 0; }
.proj-fig-row > .fig .ph { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.proj-fig-row > .fig .ph video, .proj-fig-row > .fig .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .proj-fig-row { grid-template-columns: 1fr !important; } }
/* deux médias côte à côte : neutralise la marge d'empilement verticale (.section .fig + .fig) qui décalait la 2ᵉ figure → bords alignés */
.proj-main .fig-row > .fig + .fig, .proj-main .proj-fig-row > .fig + .fig,
.xp-article .fig-row > .fig + .fig, .dt-article .fig-row > .fig + .fig { margin-top: 0; }
/* vidéos pleine largeur dans l'article (figure.fig directe) : cadrage 16/9 cohérent (les vidéos sont en 1280×720) — évite que la figure prenne l'aspect du poster */
.proj-article > figure.fig > .ph:has(> video) { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.proj-article > figure.fig > .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* breathing room under the "other projects" heading */
.more-proj .eyebrow-row { margin-bottom: 30px; }
.more-proj .proj-card-grid { margin-top: 6px; }

/* content sub-headings & lists in project main */
.proj-main h3 {
  font-family: var(--ff-display); font-weight: 600; color: var(--navy);
  font-size: 21px; margin: 0; line-height: 1.2; text-align: justify;
}
.proj-block > h3 { margin-top: 30px; }
.proj-block > h3:first-child { margin-top: 0; }
.proj-block h3 + p { margin-top: 14px; }
.proj-list { margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.proj-list li { list-style: none; display: flex; gap: 14px; align-items: flex-start; }
.proj-list .ck { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--sky); color: var(--blue); display: grid; place-items: center; margin-top: 2px; font-family: var(--ff-mono); font-size: 12px; font-weight: 500; }
.proj-list p { margin: 0; font-size: 16px; color: var(--ink-2); text-align: left; -webkit-hyphens: none; hyphens: none; }
.proj-list b { color: var(--navy); font-family: var(--ff-display); font-weight: 600; }
.ref-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: .02em;
  color: var(--blue); font-weight: 500;
}
.ref-link::before { content: "→"; }
.ref-link:hover { text-decoration: underline; }
/* end-of-article related links */
.art-related { margin-top: 14px; }
.proj-main > .art-related { background: #fff; padding: 34px 44px; box-shadow: 0 26px 64px -32px rgba(13,36,68,.22), 0 3px 12px rgba(13,36,68,.05); }
@media (max-width: 760px) { .proj-main > .art-related { padding: 24px 22px; } }
.art-sep { display: block; width: 110px; height: 2px; background: var(--line); margin: 0 auto 22px; }
.art-related-h { display: block; text-align: center; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.art-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.art-related-grid a { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border: 1px solid var(--line); background: var(--paper); transition: border-color .2s ease, box-shadow .3s ease, background .2s ease; }
.art-related-grid a:hover { border-color: var(--sky-2); background: #fff; box-shadow: var(--sh-md); }
.art-related-grid a .k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.art-related-grid a .t { font-family: var(--ff-display); font-weight: 600; color: var(--navy); font-size: 15px; line-height: 1.25; }
.art-related-grid a[target] .t::after { content: " ↗"; color: var(--faint); }
@media (max-width: 620px) { .art-related-grid { grid-template-columns: 1fr; } }
.proj-section-title {
  position: relative;
  font-size: clamp(26px, 3.2vw, 36px); color: var(--navy);
  margin-top: 40px; padding-bottom: 16px;
  border-bottom: 2px solid var(--blue);
  scroll-margin-top: 96px;
}
.proj-summary .proj-block:first-child > .proj-section-title { margin-top: 0; }

/* sidebar — table des matières */
.toc { display: flex; flex-direction: column; padding: 4px 10px 12px; }
.toc a {
  display: flex; gap: 11px; align-items: baseline;
  padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
.toc a:hover { background: var(--paper); color: var(--navy); }
.toc a.active { background: var(--sky); color: var(--blue); font-weight: 600; }
.toc a .n { font-family: var(--ff-mono); font-size: 11px; color: var(--faint); flex: none; }
.toc a.active .n { color: var(--blue); }

/* sidebar — project / dossier cards with big images */
.side-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 8px; }
.side-card { display: block; border-radius: 3px; padding: 7px; transition: background .16s ease; }
.side-card:hover { background: var(--paper); }
.side-card .thumb {
  display: block; border-radius: 0; overflow: hidden;
  aspect-ratio: 16/9; background: var(--grad-thermal); position: relative;
  box-shadow: var(--sh-sm);
}
.side-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-card .t { display: block; font-family: var(--ff-display); font-weight: 600; font-size: 14.5px; color: var(--navy); margin-top: 10px; line-height: 1.22; }
.side-card:hover .t { color: var(--blue); }
.side-card .s { display: block; font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; letter-spacing: .03em; }
/* variant: text above, larger image below (maximize image) */
.side-list.stacked { gap: 2px; }
.side-list.stacked .side-card { display: flex; flex-direction: column; padding: 9px 7px 12px; }
.side-list.stacked .side-card .s { order: 1; margin-top: 0; }
.side-list.stacked .side-card .t { order: 2; margin-top: 2px; margin-bottom: 9px; }
.side-list.stacked .side-card .thumb { order: 3; aspect-ratio: 16/10; }
.side-all {
  display: flex; align-items: center; gap: 8px; margin: 2px 12px 4px; padding: 12px 8px 4px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); border-top: 1px solid var(--line-soft); font-weight: 500;
}
.side-all svg { width: 14px; height: 14px; flex: none; transition: transform .18s ease; }
.side-all:hover svg { transform: translateX(3px); }
/* sidebar equivalent-project vignettes — large cards (image top, title below) */
.aside-vignettes { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px 14px; }
.side-vignette { display: block; border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; background: #fff; transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; }
.side-vignette:hover { box-shadow: var(--sh-md); border-color: var(--sky-2); transform: translateY(-2px); }
.side-vignette .thumb { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--navy); position: relative; }
.side-vignette .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.side-vignette:hover .thumb img { transform: scale(1.06); }
.side-vignette .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,17,42,.35)); }
.side-vignette .tx { display: block; padding: 11px 13px 13px; }
.side-vignette .vt { display: block; font-family: var(--ff-display); font-weight: 600; font-size: 14px; color: var(--navy); line-height: 1.22; }
.side-vignette:hover .vt { color: var(--blue); }
.side-vignette .vs { display: block; text-decoration: none; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-top: 6px; }

/* sidebar — localisation map */
.side-map .map-frame { margin-top: 12px; aspect-ratio: 4/3; overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--paper-2); position: relative; }
.side-map .map-frame iframe { width: 100%; height: calc(100% + 42px); border: 0; display: block; }
.side-map .map-cap { display: flex; align-items: center; gap: 11px; padding: 14px 18px 16px; }
.side-map .map-cap .pin { width: 32px; height: 32px; background: var(--sky); color: var(--blue); display: grid; place-items: center; flex: none; }
.side-map .map-cap .pin svg { width: 17px; height: 17px; }
.side-map .map-cap .loc b { font-family: var(--ff-display); font-weight: 600; color: var(--navy); font-size: 15px; display: block; line-height: 1.2; }
.side-map .map-cap .loc s { text-decoration: none; font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .03em; }
.proj-section-title::before {
  content: none;
}

/* ============ Expertise page elements ============ */
.exp-cap-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 34px; margin-top: 36px; }
.exp-cap { display: flex; gap: 13px; align-items: flex-start; }
.exp-cap .ck { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--sky); color: var(--blue); display: grid; place-items: center; margin-top: 1px; }
.exp-cap .ck svg { width: 15px; height: 15px; }
.exp-cap p { margin: 0; font-size: 15.5px; color: var(--ink); font-weight: 500; }
.exp-quote { margin: 26px 0; padding: 22px 28px; border-left: 4px solid var(--t-3); font-family: var(--ff-display); font-weight: 500; font-size: clamp(20px,2.6vw,28px); color: #fff; line-height: 1.3; background: rgba(255,255,255,.04); }
.ilot-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
@media (max-width: 760px) { .exp-cap-grid, .ilot-compare { grid-template-columns: 1fr; } }
/* expertise sticky sub-nav */
.exp-subnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* vertical breathing room around figures on full-width pages */
.section > .wrap > .fig:not(.fig-side), .dom-intro .fig:not(.fig-side) { margin: 26px 0; }
.section .fig + .fig { margin-top: 18px; }
/* expertise article (.xp-article) : les figures .fig / .fig-row doivent respirer comme .xp-media (jamais collées au texte) */
.xp-article .fig:not(.fig-side), .xp-article .fig-row { margin-top: 32px; }
.xp-article .fig + .fig { margin-top: 24px; }
.xp-article .fig-row .fig, .xp-article .xp-figrow .fig { margin-top: 0; }
.exp-reslinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.exp-reslinks a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 500; color: var(--ink); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.exp-reslinks a:hover { border-color: var(--sky-2); color: var(--blue); background: var(--paper); }
.exp-reslinks a .k { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.exp-subnav .wrap { display: flex; gap: 28px; overflow-x: auto; }
.exp-subnav a { padding: 16px 0; font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .18s ease, border-color .18s ease; }
.exp-subnav a:hover { color: var(--navy); }
.exp-subnav a.active { color: var(--blue); border-bottom-color: var(--blue); }
.exp-subnav .wrap::-webkit-scrollbar { display: none; }

/* ============ Full-width synthesis video ============ */
.video-synthesis { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.video-synthesis .thermal { position: absolute; inset: 0; opacity: .38; }
.video-synthesis .wrap { position: relative; z-index: 2; text-align: center; }
.video-synthesis .kicker { color: #8fb6ff; justify-content: center; }
.video-synthesis .kicker::before { background: #8fb6ff; opacity: .6; }
.video-synthesis h2 { color: #fff; font-size: clamp(28px, 3.8vw, 46px); margin-top: 16px; }
.video-synthesis .lead-sub { color: #c4d4ee; font-size: 18px; max-width: 780px; margin: 18px auto 0; text-align: center; }
.video-embed-lg {
  position: relative; max-width: 1140px; margin: 38px auto 0;
  aspect-ratio: 16/9; overflow: hidden; background: #040e22;
  border: 1px solid rgba(255,255,255,.14); box-shadow: var(--sh-lg);
}
.video-embed-lg iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-synthesis .video-cap { justify-content: center; color: #8fa3c2; margin-top: 16px; }

/* Vidéos en zone de texte (expertise · dossier · projet) : toujours à la largeur du texte */
.xp-article figure:has(video), .dt-article figure:has(video), .proj-article figure:has(video),
.xp-article .xp-media, .xp-article .xp-vidwrap, .dt-article .dt-vid,
.xp-article .video-embed, .dt-article .video-embed, .proj-article .video-embed {
  float: none; clear: both; width: 100%; max-width: 100%;
  margin-left: 0; margin-right: 0;
}
.xp-article figure:has(video) .fr, .dt-article figure:has(video) .fr,
.proj-article figure:has(video) .fr, .xp-media .fr, .dt-vid .fr, .xp-vidwrap > video {
  width: 100%; max-width: 100%;
}


/* synthesis video facade (poster + click-to-play) */
.video-embed-lg .sv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.video-embed-lg .sv-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,12,30,.25), rgba(4,12,30,.55)); transition: opacity .3s ease; }
.video-embed-lg .sv-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer; color: #fff;
}
.video-embed-lg .sv-play .ring {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.75); display: grid; place-items: center;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
  box-shadow: 0 12px 44px -8px rgba(0,0,0,.55);
}
.video-embed-lg .sv-play .ring svg { width: 34px; height: 34px; margin-left: 4px; }
.video-embed-lg .sv-play:hover .ring { transform: scale(1.08); background: var(--blue); border-color: var(--blue); box-shadow: var(--sh-blue); }
.video-embed-lg .sv-play .lbl { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.video-embed-lg.playing .sv-poster,
.video-embed-lg.playing .sv-shade,
.video-embed-lg.playing .sv-play { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.video-embed-lg .sv-yt { position: absolute; inset: 0; z-index: 3; }
.video-embed-lg .sv-yt iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* ============ Image-first project cards ============ */
.proj-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; }
.proj-card-grid.grid-4 { grid-template-columns: repeat(4,1fr); margin-top: 0; }
.proj-card-grid.grid-4 .proj-card { aspect-ratio: 4/3.4; }
@media (max-width: 1000px) { .proj-card-grid.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .proj-card-grid.grid-4 { grid-template-columns: 1fr; } }
/* project filter chips */
.proj-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.pf-btn { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 9px 15px; border-radius: 999px; cursor: pointer; transition: all .18s ease; }
.pf-btn:hover { border-color: var(--ink-2); }
.pf-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.proj-card {
  position: relative; display: block; aspect-ratio: 4/3.2; overflow: hidden;
  border: 1px solid var(--line); background: var(--navy);
}
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.proj-card:hover img { transform: scale(1.06); }
.proj-card .pc-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,12,30,.05) 35%, rgba(4,12,30,.88)); }
.proj-card .pc-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(7,17,42,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22); padding: 6px 11px;
}
.proj-card .pc-title {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.proj-card .pc-title b { font-family: var(--ff-display); font-weight: 600; font-size: 18px; color: #fff; line-height: 1.16; }
.proj-card[data-domain="Data Center"]{--dom:#2a6fdb}
.proj-card[data-domain="Air & Vent"]{--dom:#1f8a5b}
.proj-card[data-domain="Génie climatique"]{--dom:#d97757}
.proj-card[data-domain="Désenfumage"]{--dom:#c0392b}
.proj-card[data-domain="Industries"]{--dom:#8a6d1f}
.proj-card[data-domain="Process Industriel"]{--dom:#6c4bb6}
.proj-card[data-domain="Laboratoires"]{--dom:#1f7a8a}
.proj-card .pc-title b::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--dom,var(--blue)); margin-right:8px; vertical-align:middle; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.35); }
.proj-card .pc-title .go { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); display: grid; place-items: center; color: #fff; transition: background .2s ease, transform .2s ease; }
.proj-card:hover .pc-title .go { background: var(--blue); border-color: var(--blue); transform: translateX(2px); }

/* ============ Optimized footer ============ */
.footer { background: var(--navy); color: #cdd9ec; padding: 76px 0 30px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.foot-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.foot-contact a, .foot-contact span { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: #aebfd8; }
.foot-contact a:hover { color: #fff; }
.foot-contact svg { width: 16px; height: 16px; flex: none; color: var(--t-2); margin-top: 2px; }
.foot-social { display: flex; gap: 10px; margin-top: 24px; }
.foot-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #cdd9ec; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.foot-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.foot-social svg { width: 18px; height: 18px; }
.foot-locations {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; color: #7d92b4;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.foot-locations .lbl { color: var(--t-2); }
.foot-bottom {
  margin-top: 22px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; color: #7d92b4;
}
.foot-bottom a { color: #7d92b4; text-decoration: none; transition: color .15s; }
.foot-bottom a:hover { color: #fff; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .proj-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .foot-top { grid-template-columns: 1fr; } .proj-card-grid { grid-template-columns: 1fr; } }

/* ============ Clean contact panel ============ */
.cta-panel {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: center;
  padding: 56px 56px;
}
.cta-panel .colormap-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-thermal); }
.cta-panel .glow { position: absolute; right: -10%; top: -40%; width: 50%; height: 180%; z-index: 0;
  background: radial-gradient(closest-side, rgba(46,134,255,.30), transparent 70%); pointer-events: none; }
.cta-panel-in, .cta-panel-action { position: relative; z-index: 1; }
.cta-panel .kicker { color: #8fb6ff; }
.cta-panel .kicker::before { background: #8fb6ff; opacity: .6; }
.cta-panel h2 { color: #fff; font-size: clamp(26px, 3.2vw, 40px); margin-top: 14px; }
.cta-panel p { color: #cddcf2; margin-top: 14px; font-size: 17px; max-width: 50ch; }
.cta-panel-action { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-panel-action .btn { font-size: 16px; }
.cta-panel-action .cta-phone { font-family: var(--ff-mono); color: #9fc0ff; font-size: 14.5px; letter-spacing: .03em; }
.cta-panel-action .cta-phone:hover { color: #fff; }
@media (max-width: 820px) { .cta-panel { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; } }

/* projects map (Leaflet) */
.projmap-head { max-width: 640px; }
.proj-map { margin-top: 26px; height: 460px; border: 1px solid var(--line); background: var(--paper-2); }
.proj-map .leaflet-container { font-family: var(--ff-body); }
.proj-map .leaflet-popup-content-wrapper { border-radius: 4px; }
.pmk { background: var(--blue); width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(13,36,68,.35); }
.pmk i { display: block; width: 6px; height: 6px; background: #fff; border-radius: 50%; margin: 4px auto 0; transform: rotate(45deg); }
.pmk.dark { background: var(--navy); }
.pmk--dc { background: #2a6fdb; }
.pmk--av { background: #1f8a5b; }
.pmk--gc { background: #d97757; }
.pmk--df { background: #c0392b; }
.pmk--in { background: #8a6d1f; }
.pmk--pi { background: #6c4bb6; }
.pmk--lab { background: #1f7a8a; }
.map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-family: var(--ff-mono); font-size: 12px; color: var(--ink-2); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.pm-pop b { font-family: var(--ff-display); color: var(--navy); font-size: 14px; display: block; }
.pm-pop s { text-decoration: none; font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; display: block; margin-top: 2px; }
.pm-pop .pm-thumb { display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 10px; background: var(--navy); }
.pm-pop .pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-pop .pm-go { display: inline-flex; gap: 5px; margin-top: 12px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); font-weight: 500; }
.pm-pop.pm-link { display: block; text-decoration: none; cursor: pointer; }
.pm-pop.pm-link b { transition: color .15s; }
.pm-pop.pm-link:hover b { color: var(--blue); }
.pm-pop.pm-link:hover .pm-go { text-decoration: underline; }
.proj-map .leaflet-popup-content { margin: 0; width: 200px !important; }
.proj-map .leaflet-popup-content .pm-pop { padding: 0 0 4px; }
.proj-map .leaflet-popup-content b, .proj-map .leaflet-popup-content s, .proj-map .leaflet-popup-content .pm-go { padding-inline: 12px; }

/* ============ Domain (level-2) page ============ */
.exp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.exp-card { display: block; padding: 28px; background: #fff; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease; }
.exp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--sky-2); }
.exp-card .ic { width: 50px; height: 50px; background: var(--sky); color: var(--blue); display: grid; place-items: center; margin-bottom: 18px; }
.exp-card .ic svg { width: 25px; height: 25px; }
.exp-card h3 { font-size: 19px; }
.exp-card p { margin-top: 9px; color: var(--ink-2); font-size: 15px; }
.exp-card .more { margin-top: 14px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: inline-flex; gap: 7px; opacity: 0; transform: translateY(3px); transition: .22s ease; }
.exp-card:hover .more { opacity: 1; transform: none; }
.dom-hero-media { margin-top: 40px; aspect-ratio: 21/8; overflow: hidden; border: 1px solid var(--line); position: relative; }
.dom-hero-media image-slot { width: 100%; height: 100%; }
@media (max-width: 900px) { .exp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .exp-grid { grid-template-columns: 1fr; } }

/* ============ Domain page — native video header + rich sections ============ */
.video-hero .vbg .vbg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* multicolor thermal text accent */
.grad { background: var(--grad-thermal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* stats credibility band */
.stats-band { background: var(--navy); position: relative; overflow: hidden; }
.stats-band .thermal { position: absolute; inset: 0; opacity: .42; }
.stats-band .wrap { position: relative; z-index: 2; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.stat-b .n { font-family: var(--ff-display); font-weight: 600; font-size: clamp(36px,5vw,54px); color: #fff; letter-spacing: -.03em; line-height: 1; }
.stat-b .n .u { color: var(--t-2); }
.stat-b .l { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8fa3c2; margin-top: 12px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* notre démarche — process steps */
.demarche { display: grid; grid-template-columns: repeat(5,1fr); gap: 24px; margin-top: 46px; }
.dstep { position: relative; padding-top: 20px; }
.dstep::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 4px; background: var(--grad-thermal); }
.dstep .num { font-family: var(--ff-mono); font-size: 12px; color: var(--blue); letter-spacing: .08em; }
.dstep h4 { font-size: 16.5px; margin-top: 11px; }
.dstep p { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 900px) { .demarche { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .demarche { grid-template-columns: 1fr; } }

/* intro lead */
.dom-intro p { font-size: 18px; color: var(--ink-2); max-width: 70ch; margin-top: 16px; text-align: justify; }
.dom-intro p strong { color: var(--navy); font-weight: 600; }

/* besoin grid */
.besoin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.besoin { padding: 26px; border: 1px solid var(--line); background: #fff; }
.besoin .n { font-family: var(--ff-mono); font-size: 12px; color: var(--blue); letter-spacing: .06em; }
.besoin h3 { font-size: 18px; margin-top: 12px; }
.besoin p { margin-top: 9px; color: var(--ink-2); font-size: 14.5px; }
/* besoin — étiquettes dépliables */
.besoin.expandable { cursor: pointer; transition: border-color .2s, box-shadow .25s, background .2s; }
.besoin.expandable:hover { border-color: var(--blue); }
.besoin.expandable:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.besoin.open { border-color: var(--blue); box-shadow: var(--sh-md); }
.besoin .b-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.besoin .b-toggle { flex: none; width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue); transition: transform .28s ease, background .2s, border-color .2s; }
.besoin .b-toggle svg { width: 15px; height: 15px; }
.besoin.expandable:hover .b-toggle { border-color: var(--blue); background: var(--sky); }
.besoin.open .b-toggle { transform: rotate(180deg); background: var(--blue); border-color: var(--blue); color: #fff; }
.besoin-more { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.besoin.open .besoin-more { max-height: 560px; }
.besoin.open .besoin-more > .bm { margin-top: 15px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.bm-lead { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.62; text-align: justify; text-wrap: pretty; -webkit-hyphens: none; hyphens: none; }
.bm-lead strong { color: var(--navy); font-weight: 600; }
.bm-deliv { margin-top: 16px; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.bm-list { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; list-style: none; padding: 0; }
.bm-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.bm-list li svg { flex: none; width: 15px; height: 15px; color: var(--blue); margin-top: 2px; }
.bm-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--blue); font-weight: 500; }
.bm-link svg { width: 14px; height: 14px; transition: transform .2s; }
.bm-link:hover svg { transform: translateX(3px); }

/* clients band */
.clients-band { background: var(--paper); border-block: 1px solid var(--line-soft); }
.clients-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 52px; margin-top: 26px; }
.clients-row .logo { font-family: var(--ff-display); font-weight: 600; font-size: 23px; color: var(--ink-2); opacity: .5; filter: grayscale(1); transition: opacity .2s ease; letter-spacing: -.01em; }
.clients-row .logo:hover { opacity: .92; }
/* scrolling marquee */
.clients-marquee { margin-top: 30px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.clients-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: client-scroll 38s linear infinite; }
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-track .logo { font-family: var(--ff-display); font-weight: 600; font-size: 24px; color: var(--ink-2); opacity: .5; filter: grayscale(1); letter-spacing: -.01em; white-space: nowrap; transition: opacity .2s ease, filter .2s ease, color .2s ease; }
.clients-track .logo:hover { opacity: 1; filter: none; color: var(--navy); }
@keyframes client-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } }

/* dossiers — horizontal editorial cards */
.doss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.doss { display: grid; grid-template-columns: 150px 1fr; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: box-shadow .3s ease, border-color .3s ease; }
.doss:hover { box-shadow: var(--sh-lg); border-color: var(--sky-2); }
.doss .img { position: relative; overflow: hidden; background: var(--navy); }
.doss .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,.06)); }
.doss .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.doss:hover .img img { transform: scale(1.06); }
.doss .b { padding: 20px 22px; align-self: center; }
.doss .tagx { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.doss h4 { font-size: 16px; color: var(--navy); line-height: 1.25; margin-top: 8px; }
.doss p { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.doss .more { margin-top: 13px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); display: inline-flex; gap: 6px; }
@media (max-width: 520px) { .doss { grid-template-columns: 110px 1fr; } }

/* video gallery */
.vid-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
.vid-card { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border: 0; background: #07112a; cursor: pointer; box-shadow: 0 12px 30px -16px rgba(0,0,0,.6); }
.vid-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-card .vc-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,12,30,.1) 38%, rgba(4,12,30,.85)); transition: opacity .3s ease; }
.vid-card.playing .vc-grad, .vid-card.playing .vc-play { opacity: 0; pointer-events: none; }
.vid-card .vc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,.75); display: grid; place-items: center; color: #fff; transition: background .2s ease, transform .2s ease; }
.vid-card:hover .vc-play { background: var(--blue); border-color: var(--blue); transform: translate(-50%,-50%) scale(1.08); }
.vid-card .vc-play svg { width: 22px; height: 22px; margin-left: 3px; }
.vid-card .vc-title { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font-family: var(--ff-display); font-weight: 600; font-size: 15px; line-height: 1.2; }

/* load more + section link */
.load-more-wrap { display: flex; justify-content: center; margin-top: 34px; }
.sec-link { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 1000px) { .doss-grid { grid-template-columns: 1fr 1fr; } .vid-grid, .besoin-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .doss-grid, .vid-grid, .besoin-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Recherche site · drapeaux · loupe (partagé toutes pages)
   ============================================================ */
/* Drapeaux du sélecteur de langue */
.lang-btn .flag, .lang-menu .flag { width:20px; height:15px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(7,26,51,.10); flex:none; }
.lang-btn { gap:7px; }
.lang-menu a { display:flex; align-items:center; gap:10px; }
/* Bouton loupe (nav) */
.nav-search-btn { display:grid; place-items:center; width:34px; height:34px; background:none; border:0; cursor:pointer; color:var(--ink-2); border-radius:3px; transition:color .18s ease, background .18s ease; }
.nav-search-btn svg { width:18px; height:18px; }
.nav-search-btn:hover { color:var(--navy); background:var(--paper); }
.nav.over:not(.scrolled) .nav-search-btn { color:rgba(255,255,255,.85); }
.nav.over:not(.scrolled) .nav-search-btn:hover { color:#fff; background:rgba(255,255,255,.12); }
/* Recherche du rail (aside) */
.aside-search { position:relative; }
.aside-search .search-label { font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.site-search { display:flex; align-items:center; gap:10px; padding:0 14px; height:48px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 38px -24px rgba(13,36,68,.20), 0 2px 8px rgba(13,36,68,.04); transition:border-color .18s ease, box-shadow .18s ease; }
.site-search:focus-within { border-color:var(--sky-2); box-shadow:0 0 0 4px var(--sky); }
.site-search > svg { width:18px; height:18px; color:var(--muted); flex:none; }
.site-search input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-family:var(--ff-body); font-size:14.5px; color:var(--ink); }
.site-search input::placeholder { color:var(--faint); }
.search-results { position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-lg); max-height:360px; overflow-y:auto; }
.search-results a { display:flex; flex-direction:column; gap:3px; padding:11px 15px; border-bottom:1px solid var(--line-soft); }
.search-results a:last-child { border-bottom:0; }
.search-results a:hover { background:var(--paper); }
.search-results a b { font-family:var(--ff-display); font-weight:600; font-size:14px; color:var(--navy); line-height:1.2; }
.search-results a:hover b { color:var(--blue); }
.search-results a s { text-decoration:none; font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.search-empty { padding:14px 15px; font-size:13.5px; color:var(--muted); }
/* Modale de recherche (loupe nav) */
.search-modal { position:fixed; inset:0; z-index:200; display:grid; }
.search-modal[hidden] { display:none; }
.sm-backdrop { position:absolute; inset:0; background:rgba(7,17,42,.55); backdrop-filter:blur(4px); animation:smFade .2s ease; }
.sm-panel { position:relative; z-index:1; width:min(640px,92vw); margin:12vh auto auto; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-lg); animation:smPop .22s cubic-bezier(.2,.7,.3,1); max-height:72vh; display:flex; flex-direction:column; }
@keyframes smFade { from { opacity:0; } }
@keyframes smPop { from { opacity:0; transform:translateY(-10px); } }
.sm-form { display:flex; align-items:center; gap:13px; padding:18px 20px; border-bottom:1px solid var(--line-soft); }
.sm-form > svg { width:22px; height:22px; color:var(--blue); flex:none; }
.sm-form input { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-family:var(--ff-display); font-weight:500; font-size:21px; color:var(--navy); }
.sm-form input::placeholder { color:var(--faint); }
.sm-close { flex:none; width:30px; height:30px; border:0; background:var(--paper); color:var(--muted); cursor:pointer; display:grid; place-items:center; border-radius:3px; }
.sm-close:hover { background:var(--sky); color:var(--blue); }
.sm-close svg { width:16px; height:16px; }
.sm-results { overflow-y:auto; }
.sm-results a { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line-soft); }
.sm-results a:last-child { border-bottom:0; }
.sm-results a:hover { background:var(--paper); }
.sm-results a .cat { font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--sky); padding:4px 9px; flex:none; }
.sm-results a b { font-family:var(--ff-display); font-weight:600; font-size:16px; color:var(--navy); }
.sm-results a:hover b { color:var(--blue); }
.sm-hint, .sm-empty { padding:18px 20px; font-size:14px; color:var(--muted); }
/* --- Recherche riche (palette) --- */
.sm-panel { display:flex; flex-direction:column; width:min(720px,94vw); max-height:78vh; }
.search-modal mark { background:linear-gradient(transparent 55%, rgba(247,209,59,.55) 55%); color:inherit; padding:0; }
.search-modal kbd { font-family:var(--ff-mono); font-size:10.5px; background:#fff; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px; color:var(--ink-2); }
.sm-chips { display:flex; gap:7px; flex-wrap:wrap; padding:12px 20px 4px; }
.sm-chips[hidden] { display:none; }
.sm-chip { border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 13px; font-family:var(--ff-body); font-weight:500; font-size:13px; color:var(--ink-2); cursor:pointer; display:inline-flex; gap:7px; align-items:center; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.sm-chip .n { font-family:var(--ff-mono); font-size:10.5px; color:var(--faint); }
.sm-chip:hover { border-color:var(--blue); color:var(--blue); }
.sm-chip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.sm-chip.on .n { color:#9dc0ff; }
.sm-ghead { display:flex; align-items:baseline; gap:8px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:16px 20px 6px; }
.sm-ghead b { color:var(--blue); font-weight:500; }
.sm-results a.sm-row { display:flex; align-items:center; gap:13px; padding:9px 20px; border-bottom:0; }
.sm-results a.sm-row.sel { background:var(--paper); box-shadow:inset 3px 0 0 var(--blue); }
.sm-th { flex:none; width:60px; height:40px; object-fit:cover; background:var(--paper-2); border:1px solid var(--line-soft); }
.sm-rmain { flex:1 1 auto; min-width:0; }
.sm-rmain b { display:block; font-family:var(--ff-body); font-weight:600; font-size:15px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-results a.sm-row:hover .sm-rmain b { color:var(--blue); }
.sm-rmain .sm-d { display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.sm-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.sm-tag { font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:4px; }
.sm-tag.t-expertise { background:var(--sky); color:var(--blue-700); }
.sm-tag.t-projet { background:#e6f7f0; color:#0f7a4d; }
.sm-tag.t-dossier { background:#fdf3e0; color:#a05a10; }
.sm-tag.t-video { background:#fdeaea; color:#b3271b; }
.sm-tag.t-domaine { background:var(--navy); color:#fff; }
.sm-tag.t-actualite { background:#f1e9fd; color:#6a3bbf; }
.sm-tag.t-listing, .sm-tag.t-ressource, .sm-tag.t-societe, .sm-tag.t-page { background:var(--paper-2); color:var(--ink-2); }
.sm-dm { display:inline-flex; align-items:center; gap:5px; font-family:var(--ff-mono); font-size:10.5px; color:var(--muted); white-space:nowrap; }
.sm-dm i { width:7px; height:7px; border-radius:50%; flex:none; }
.sm-vrail { display:flex; gap:10px; overflow-x:auto; padding:6px 20px 12px; scrollbar-width:thin; }
.sm-results a.sm-vcard { flex:none; width:180px; display:block; padding:0; border-bottom:0; }
.sm-vcard .vi { position:relative; display:block; width:180px; height:101px; background:var(--paper-2); overflow:hidden; border:1px solid var(--line-soft); }
.sm-vcard .vi img, .sm-vcard .vi video { width:100%; height:100%; object-fit:cover; display:block; }
.sm-vcard .vi video { position:absolute; inset:0; }
.sm-vcard .vp { position:absolute; right:8px; bottom:8px; width:28px; height:28px; border-radius:50%; background:rgba(7,26,51,.65); display:grid; place-items:center; color:#fff; transition:opacity .15s ease, transform .15s ease; }
.sm-vcard .vp svg { width:11px; height:11px; margin-left:2px; }
.sm-vcard:hover .vp { opacity:0; transform:scale(.8); }
.sm-vcard .vt { display:block; margin-top:6px; font-family:var(--ff-body); font-weight:500; font-size:12.5px; line-height:1.3; color:var(--navy); white-space:normal; }
.sm-results a.sm-vcard.sel .vi { outline:2px solid var(--blue); }
.sm-foot { border-top:1px solid var(--line-soft); padding:8px 20px; display:flex; gap:16px; align-items:center; font-size:11.5px; color:var(--muted); background:var(--paper); }
.sm-foot[hidden] { display:none; }
.sm-foot span { display:inline-flex; gap:5px; align-items:center; }
.sm-count { margin-left:auto; font-family:var(--ff-mono); font-size:11px; }
.sm-sug { padding:16px 20px 6px; }
.sm-sug .lbl { font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.sm-sugchips { display:flex; flex-wrap:wrap; gap:8px; }
.sm-domgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; padding:6px 20px 18px; }
.sm-results a.sm-domc { display:flex; align-items:center; gap:9px; border:1px solid var(--line); padding:9px 12px; font-family:var(--ff-body); font-weight:500; font-size:13px; color:var(--navy); border-bottom:1px solid var(--line); }
.sm-results a.sm-domc:hover { border-color:var(--blue); background:var(--sky); }
.sm-domc i { width:8px; height:8px; border-radius:50%; flex:none; }
@media (max-width:560px) {
  .sm-th { display:none; }
  .sm-side .sm-dm { display:none; }
  .sm-panel { max-height:86vh; margin-top:6vh; }
}

/* ============================================================
   Titres de section (code couleur eolios.fr)
   titre bleu · sous-titre gris · barre grise plus épaisse
   ============================================================ */
.proj-section-title { color: var(--blue-700); border-bottom: 3px solid var(--line); padding-bottom: 18px; }
/* Premier titre (bloc résumé) centré comme sur eolios.fr ; les suivants à gauche */
.proj-summary .proj-section-title { text-align: center; }
/* Titres de colonne (aside) un peu plus grands */
.aside-card .ac-head { font-size: 12.5px; }

/* mobile-typo-leftalign — justifié sur desktop, ferré à gauche sur petit écran (pas de césure -> évite les rivières) */
@media (max-width: 600px){
  .proj-block p, .lede, .proj-list p, .proj-main h3 { text-align: left; }
}
/* légendes centrées sous les images (expertise + dossier) */
.xp-article .xp-media figcaption, .xp-article figure.fig figcaption, .xp-article .xp-diagram .cap,
.dt-article .dt-fig figcaption, .dt-article .dt-vid figcaption {
  text-align: center; justify-content: center; align-items: center;
}


/* === EOLIOS responsive pack v2 === */
/* `overflow-x: clip` (PAS `hidden`) : clippe l'horizontal sans créer de conteneur
   de défilement sur <body>, sinon `overflow-y` passe en `auto` et casse le
   `position: sticky` du header (le bandeau méga-menu « remonte »). */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* --- Header: tablette --- */
@media (max-width: 1000px){
  .nav-row { padding-inline: 18px; }
  .nav-util { gap: 12px; }
  .nav-bottom .nav-links { justify-content: flex-start; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .nav-bottom .nav-links::-webkit-scrollbar { display: none; }
  .nav-bottom .nav-trigger { font-size: 13.5px; }
}
/* --- Header: mobile --- */
@media (max-width: 720px){
  .nav-row-top { gap: 12px; padding-block: 7px; }
  /* on masque les liens secondaires + langue, on garde logo + loupe + Contact */
  .nav-util > a:not(.btn), .nav-util .lang-sel { display: none; }
  .nav-util .btn-primary { padding: 8px 14px; font-size: 12.5px; }
  .logo-img, .nav-row-top .brand .logo-img { height: 26px; }
  .nav-bottom .nav-links { gap: 15px; }
  .nav-bottom .nav-trigger { padding: 8px 0; font-size: 13px; }
  .nav-bottom .nav-trigger .chev { display: none; }
}

/* --- Hero (full-bleed video) sur mobile --- */
@media (max-width: 720px){
  .home-hero, .video-hero.xl { min-height: 86vh; }
  .home-hero .wrap { padding-block: 96px 64px; }
  .home-hero .hero-meta { gap: 0; }
  .home-hero .hero-meta > div { padding-right: 20px; margin-right: 20px; }
}
@media (max-width: 480px){
  .home-hero .hero-meta { flex-direction: column; gap: 16px; align-items: flex-start; }
  .home-hero .hero-meta > div { border-right: 0; padding-right: 0; margin-right: 0; }
  .video-hero .wrap h1 { font-size: clamp(28px,8vw,40px); }
}

/* --- Méta-strip projet : empile proprement --- */
@media (max-width: 760px){
  .meta-strip .wrap { flex-wrap: wrap; gap: 16px 26px; }
  .meta-strip .ms-cta { width: 100%; justify-content: center; }
}

/* --- Sections : padding latéral resserré --- */
@media (max-width: 600px){
  .wrap { padding-inline: 18px; }
  .section { padding-block: 48px; }
}

/* --- Showcase vidéo (médiathèque) : featured + rail empilés --- */
@media (max-width: 860px){
  .xv-grid, .xv-feat-row { grid-template-columns: 1fr !important; }
}

/* --- Société v2 : grilles serrées sur très petit écran --- */
@media (max-width: 480px){
  .so-hero-in { padding: 26px 18px 40px; }
  .so-vals { grid-template-columns: 1fr 1fr; }
}

/* --- Contact : formulaire 1 colonne --- */
@media (max-width: 640px){
  .ct-form-grid, .contact-grid { grid-template-columns: 1fr !important; }
}
/* === fin responsive pack v2 === */


/* === responsive pack v3 (dossiers / expertise components) === */
@media (max-width: 820px){
  .dt-trip, .dt-trip.three, .xp-trip { grid-template-columns: 1fr !important; }
  .dt-rel-grid, .dt-apps { grid-template-columns: 1fr 1fr !important; }
  .dt-hgrid { grid-template-columns: 1fr !important; }
  .xp-shell, .dt-body { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px){
  .dt-rel-grid, .dt-apps { grid-template-columns: 1fr !important; }
  .dt-fig.two { grid-template-columns: 1fr !important; }
  .dt-formula .eq { font-size: 18px; }
}
/* tableaux : scroll horizontal plutôt que débordement */
.dt-table, .xp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* sommaire latéral dossiers : passe au-dessus de l'article sur mobile */
@media (max-width: 820px){
  .dt-index, .xp-index { position: static !important; max-width: 100%; }
}
/* === fin v3 === */


/* === no mega on mobile === */
@media (max-width: 820px){
  .nav-bottom .mega, .nav-item .mega { display: none !important; }
  /* le tap sur un domaine va directement à sa page (href du .nav-trigger) */
  .nav-bottom .nav-trigger .chev, .nav-bottom .nav-trigger .cev { display: none; }
}


/* === hero top scrim (logo legibility over light posters) === */
.video-hero { position: relative; }
.video-hero > .top-scrim, .video-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(180deg, rgba(7,17,42,.62), rgba(7,17,42,0));
  z-index: 1; pointer-events: none;
}


/* === side-map locator === */
.aside-card.side-map{padding:0;overflow:hidden;width:100%}
.aside-card.side-map .ac-head{padding:16px 18px 0}
.side-map .map-frame{position:relative;width:100%;height:140px;margin-top:12px;overflow:hidden;background:var(--paper);border-top:1px solid var(--line-soft)}
.side-map .map-frame iframe{position:absolute!important;top:-1px!important;left:0!important;width:100%!important;height:210px!important;max-width:none!important;border:0!important;filter:grayscale(.15);pointer-events:none}
.side-map .map-cap{display:flex;align-items:center;gap:8px;padding:12px 18px;font-family:var(--ff-mono);font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.side-map .map-cap .pin{flex:none;color:var(--blue)}
.side-map .map-cap .pin svg{width:16px;height:16px;display:block}


/* === liens éditoriaux in-body (maillage interne) === */
.xp-article a[data-inlink], .dt-article a[data-inlink], .proj-article a[data-inlink] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(31,108,209,.35);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.xp-article a[data-inlink]:hover, .dt-article a[data-inlink]:hover, .proj-article a[data-inlink]:hover {
  color: var(--navy);
  text-decoration-color: currentColor;
}
.xp-break a[data-inlink] { color: #bcd4ff; text-decoration-color: rgba(188,212,255,.4); }
.xp-break a[data-inlink]:hover { color: #fff; }

/* === global img zoom cursor === */
.proj-article img, .dt-article img, .xp-article img, .fig img, figure img:not(.logo-img){cursor:zoom-in}
.side-map img, .logo-img, a img{cursor:inherit}


/* ============================================================
   Menu mobile (burger)  —  remplace la barre de domaines sous 820px
   ============================================================ */
.nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--navy);flex:none}
.nav-burger span{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav.over:not(.scrolled) .nav-burger{color:#fff}

.m-nav{position:fixed;inset:0;z-index:2000;visibility:hidden}
.m-nav.open{visibility:visible}
.m-nav-scrim{position:absolute;inset:0;background:rgba(7,17,42,.52);opacity:0;transition:opacity .3s ease}
.m-nav.open .m-nav-scrim{opacity:1}
.m-nav-panel{position:absolute;top:0;right:0;height:100%;width:min(392px,88vw);background:var(--white);
  display:flex;flex-direction:column;box-shadow:-24px 0 70px -24px rgba(7,26,51,.45);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.m-nav.open .m-nav-panel{transform:none}
.m-nav-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:var(--white);border-bottom:1px solid var(--line)}
.m-nav-ttl{font-family:var(--ff-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.m-nav-close{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.m-nav-close:hover{color:var(--blue);border-color:var(--sky-2)}
.m-nav-body{padding:10px 14px 44px}
.m-nav-lbl{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin:20px 8px 6px}
.m-nav-body > .m-nav-lbl:first-child{margin-top:8px}

.m-dom{list-style:none;margin:0;padding:0}
.m-dom-item{border-bottom:1px solid var(--line-soft)}
.m-dom-row{display:flex;align-items:stretch}
.m-dom-link{flex:1;display:flex;align-items:center;min-height:54px;padding:0 10px;
  font-family:var(--ff-display);font-weight:600;font-size:17px;color:var(--navy)}
.m-dom-link[data-nolink]{color:var(--faint)}
.m-dom-exp{flex:none;width:54px;min-height:54px;border:0;background:transparent;color:var(--ink-2);
  cursor:pointer;display:grid;place-items:center}
.m-dom-exp .chev{width:20px;height:20px;transition:transform .25s ease}
.m-dom-item.exp-open .m-dom-exp{color:var(--blue)}
.m-dom-item.exp-open .m-dom-exp .chev{transform:rotate(180deg)}
.m-dom-sub{padding:0 8px 12px}
.m-sub-link,.m-sub-all{display:flex;align-items:center;min-height:44px;padding:4px 10px;
  font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.m-sub-link .ar{display:none}
.m-sub-link[data-nolink]{color:var(--faint)}
.m-sub-link:hover{color:var(--blue)}
.m-sub-all{font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;color:var(--blue);gap:6px}
.m-sub-all .ar{width:13px;height:13px}

.m-sec{display:flex;flex-direction:column}
.m-sec-link{display:flex;align-items:center;min-height:50px;padding:0 10px;border-bottom:1px solid var(--line-soft);
  font-family:var(--ff-display);font-weight:500;font-size:16px;color:var(--ink)}
.m-sec-link:hover{color:var(--blue)}

.m-lang{display:flex;flex-wrap:wrap;gap:8px;padding:8px 8px 0}
.m-lang-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:var(--ink-2)}
.m-lang-link .fl{font-size:15px}
.m-lang-link:hover{border-color:var(--sky-2);color:var(--blue)}

@media (max-width:820px){
  .nav-burger{display:flex}
  .nav-bottom{display:none}
  .nav-row-top .nav-util > a:not(.btn), .nav-row-top .nav-util .lang-sel{display:none}
}
@media (prefers-reduced-motion: reduce){
  .m-nav-panel,.m-nav-scrim,.nav-burger span,.m-dom-exp .chev{transition:none}
}