@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --brand: #0d6efd;
  --brand-600: #0b57cc;
  --ink-900: #111827;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --bg-page: #eef2f6;
  --bg-card: #ffffff;
  --bg-soft: #f8fbff;
  --line: #dbe3ee;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 14px 36px rgba(15, 23, 42, 0.14);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
  color: var(--ink-700);
  background:
    radial-gradient(1200px 500px at 105% -10%, rgba(13, 110, 253, 0.14), transparent 60%),
    linear-gradient(180deg, #f2f6fb, var(--bg-page));
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

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

small,
.text-muted {
  color: var(--ink-500) !important;
}

main {
  padding-top: 84px;
}

section {
  padding: 2.3rem 0;
}

.section-title {
  position: relative;
  margin: 0 0 1.2rem;
  padding-bottom: .45rem;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #64b4ff);
}

.navbar {
  background: rgba(9, 15, 29, 0.84) !important;
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 12px 24px rgba(2, 8, 23, 0.22);
  transition: box-shadow .22s ease, background-color .22s ease;
}

.navbar.is-scrolled {
  background: rgba(9, 15, 29, 0.92) !important;
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.28);
}

.navbar .navbar-brand {
  color: #fff;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar [aria-current='page'] {
  color: #fff !important;
  font-weight: 600;
}

.hero {
  min-height: clamp(280px, 42vh, 520px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  background:
    radial-gradient(900px 360px at 0% 0%, rgba(13, 110, 253, 0.2), transparent 65%),
    linear-gradient(180deg, #f7fbff, #f1f6fb);
  overflow: hidden;
}

.hero .lead {
  max-width: 68ch;
  color: var(--ink-600);
}

.hero.hero-compact {
  min-height: clamp(180px, 28vh, 260px);
  padding: 1.2rem 0;
}

.hero-mfr {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(10, 28, 54, .64), rgba(10, 28, 54, .58)),
    url('images/Panorama.jpg') center 36% / cover no-repeat;
}

.hero-mfr .section-title,
.hero-mfr .lead {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

.hero-mfr .section-title::after {
  background: linear-gradient(90deg, #85c3ff, #fff);
}

.hero-numeriks {
  position: relative;
  min-height: clamp(420px, 66vh, 740px);
  padding: 6.3rem 1.1rem 1.2rem;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(9, 15, 29, .62), rgba(9, 15, 29, .5), rgba(9, 15, 29, .62)),
    url('images/img-numeriks-bourgoin.jpg') center 28% / cover no-repeat;
}

.hero-numeriks .hero-top-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hero-numeriks .hero-heading {
  margin: 0;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
  font-size: clamp(1.6rem, 4.1vw, 3rem);
}

.hero-numeriks > .container {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
}

.hero-numeriks .bubble-block {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-700);
  border-color: rgba(255, 255, 255, 0.8);
}

.home-hero {
  background:
    radial-gradient(920px 300px at 100% 0%, rgba(13, 110, 253, .22), transparent 62%),
    radial-gradient(800px 260px at 0% 0%, rgba(89, 180, 255, .16), transparent 58%),
    linear-gradient(180deg, #f7fbff, #eef4fb);
}

.avatar-shell {
  width: clamp(240px, 28vw, 420px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
  background: #e9eef5;
}

img.avatar.hero-avatar {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 44%;
  transform: scale(1.18);
}

.bubble,
.bubble-title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.bubble {
  padding: .34rem .74rem;
  color: var(--ink-700);
  background: #f8fbff;
}

.bubble-title {
  padding: .4rem .82rem;
  font-weight: 700;
  color: #1c3e66;
  background: #eef6ff;
}

.bubble-block,
.block,
.card,
.elev {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
}

.block,
.elev {
  padding: 1.35rem;
}

.card {
  overflow: hidden;
}

.card:hover,
.block:hover {
  box-shadow: var(--shadow-2);
}

.card-img-top {
  border-radius: 0;
}

.btn {
  border-radius: var(--radius-sm);
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
}

.btn-outline-light {
  --bs-btn-color: #eff6ff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.62);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-border-color: #fff;
}

.btn-doc {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .88rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #1f3e66;
  font-weight: 500;
}

.btn-doc:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.16);
  text-decoration: none;
}

.home-page { padding-bottom: 2.4rem; }

.home-highlight-list {
  display: grid;
  gap: .45rem;
}

.home-highlight-list span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: #1f3e66;
}

.home-highlight-list i {
  color: var(--brand);
}

.home-kpis { padding: 1.2rem 0 1rem; }

.home-kpi-card,
.kpi-card {
  position: relative;
  overflow: hidden;
}

.home-kpi-card::before,
.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), #55b1ff);
}

.home-kpi-label,
.kpi-label {
  margin: 0;
  font-size: .89rem;
  color: var(--ink-600);
}

.home-kpi-value,
.kpi-value {
  margin: .2rem 0 .3rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.home-kpi-value { font-size: clamp(1.1rem, 2.8vw, 1.52rem); }
.kpi-value { font-size: clamp(1.7rem, 4vw, 2.35rem); }

.company-nav-wrap {
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.company-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .56rem;
}

.quick-link {
  display: inline-flex;
  align-items: center;
  padding: .42rem .78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: #1f3e66;
  font-weight: 500;
  transition: .2s ease;
}

.quick-link:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.16);
  text-decoration: none;
}

.quick-link.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pdf-thumbnail { margin: 0; }

.pdf-thumbnail .thumb-frame {
  position: relative;
  height: 250px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-1);
}

.pdf-thumbnail .thumb-embed {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.pdf-thumbnail .thumb-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: rgba(9, 15, 29, 0.36);
  opacity: 0;
  transition: opacity .18s ease;
}

.pdf-thumbnail .thumb-frame:hover .thumb-overlay,
.pdf-thumbnail .thumb-frame:focus-within .thumb-overlay {
  opacity: 1;
}

.projects-grid .col {
  display: flex;
}

.project-card {
  width: 100%;
}

.project-card .card-img-top {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #f3f7fc;
}

.project-slideshow {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f3f7fc;
}

.project-slideshow .card-img-top {
  transition: opacity .35s ease, transform .35s ease;
}

.project-slideshow .card-img-top.is-fading {
  opacity: .5;
  transform: scale(1.01);
}

.project-slideshow-dots {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.project-slideshow-dots {
  left: 50%;
  bottom: .85rem;
  display: flex;
  gap: .38rem;
  padding: .34rem .54rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, .5);
  transform: translateX(-50%);
}

.project-slideshow-dot {
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transition: transform .25s ease, background-color .25s ease;
}

.project-slideshow-dot.is-active {
  background: #fff;
  transform: scale(1.15);
}

.project-card .card-body {
  display: flex;
  flex-direction: column;
  gap: .44rem;
}

.project-card .project-actions {
  display: grid;
  gap: .55rem;
  margin-top: auto;
}

.project-card .project-actions .btn {
  width: 100%;
}

.project-card .card-title {
  font-size: 1.26rem;
  line-height: 1.22;
}

.project-card .card-text,
.project-card .card-subtitle {
  color: var(--ink-600);
}

.project-filter-bar,
[data-filter-bar] {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .4rem 0 1.2rem;
}

[data-filter-bar] [data-tag] {
  appearance: none;
  border: 1.5px solid var(--brand);
  border-radius: 999px;
  background: rgba(13, 110, 253, .04);
  color: var(--brand);
  font-size: .96rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  padding: .5rem .95rem;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

[data-filter-bar] [data-tag]:hover {
  background: rgba(13, 110, 253, .11);
  box-shadow: 0 8px 20px rgba(13, 110, 253, .16);
  transform: translateY(-1px);
}

[data-filter-bar] [data-tag]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .24);
}

[data-filter-bar] [data-tag].active {
  color: #fff;
  background: linear-gradient(160deg, var(--brand), #3f9bff);
  border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(13, 110, 253, .25);
}

.timeline {
  border-left: 3px solid #8fc4ff;
  margin-left: .45rem;
  padding-left: .95rem;
}

.timeline .t {
  position: relative;
  margin-bottom: .95rem;
}

.timeline .t::before {
  content: '';
  position: absolute;
  left: -1.12rem;
  top: .3rem;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: var(--brand);
}

.timeline-pro {
  background:
    radial-gradient(900px 200px at 100% 0%, rgba(13, 110, 253, .08), transparent 65%),
    #fff;
}

.timeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.timeline-track {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-left: 2rem;
}

.timeline-track::before {
  content: '';
  position: absolute;
  left: .78rem;
  top: .2rem;
  bottom: .2rem;
  width: 2px;
  background: linear-gradient(var(--brand), #8ec5ff);
}

.timeline-item { position: relative; }

.timeline-dot {
  position: absolute;
  left: -1.43rem;
  top: 1.1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(13, 110, 253, .15);
}

.timeline-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 1rem 1rem .9rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.timeline-item:hover .timeline-card {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, .09);
  border-color: #cfe2ff;
}

.timeline-item.is-current .timeline-card {
  border-color: #9fc3ff;
  background: linear-gradient(180deg, rgba(13, 110, 253, .05), #fff 55%);
}

.timeline-period {
  margin: 0 0 .3rem;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2459b4;
}

.timeline-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
}

.timeline-sub { margin: 0; color: var(--ink-600); }

.timeline-card details {
  margin-top: .65rem;
  border-top: 1px dashed #dbe4f0;
  padding-top: .52rem;
}

.timeline-card summary {
  cursor: pointer;
  font-weight: 600;
  color: #2459b4;
}

.timeline-card details[open] summary { margin-bottom: .4rem; }
.timeline-card details ul { margin: 0; padding-left: 1rem; }

.tool-card img {
  max-height: 80px;
  object-fit: contain;
}

.form-control,
.form-select,
.form-check-input {
  border: 1px solid var(--line);
  border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.18);
}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

footer {
  margin-top: 2rem;
  background: #0f172a;
  color: #cbd5e1;
  border-top: 1px solid #1e293b;
}

footer a {
  color: inherit;
}

footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 44px;
  height: 44px;
  border: 1px solid #c9d5e6;
  border-radius: 999px;
  background: #fff;
  color: #16427a;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  z-index: 1080;
}

.back-to-top:hover {
  box-shadow: var(--shadow-2);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 991.98px) {
  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero-numeriks {
    min-height: 520px;
    padding-top: 7rem;
    padding-bottom: 1.2rem;
  }

  .hero-numeriks > .container {
    position: static;
    padding: 0;
    margin-top: 1.2rem;
  }

  img.avatar {
    width: clamp(120px, 36vw, 220px);
    height: clamp(120px, 36vw, 220px);
  }
}

@media (max-width: 768px) {
  section { padding: 1.8rem 0; }

  .timeline-track {
    padding-left: 1.35rem;
    gap: .8rem;
  }

  .timeline-track::before { left: .45rem; }

  .timeline-dot {
    left: -1.12rem;
    width: 10px;
    height: 10px;
    top: 1rem;
  }

  .timeline-title { font-size: 1rem; }

  .project-card .card-title { font-size: 1.12rem; }
  .project-card .card-img-top { aspect-ratio: 4 / 3; }

  [data-filter-bar] {
    gap: .46rem;
    margin-bottom: 1rem;
  }

  [data-filter-bar] [data-tag] {
    padding: .44rem .78rem;
    font-size: .9rem;
  }
}

@media (max-width: 576px) {
  main { padding-top: 76px; }

  .block,
  .elev { padding: 1rem; }

  .hero-numeriks .hero-top-left {
    top: .72rem;
    left: .72rem;
    right: .72rem;
  }

  .hero-numeriks { padding: 6.6rem .75rem .9rem; }

  .home-kpi-value,
  .kpi-value { font-size: 1.55rem; }

  .avatar-shell {
    width: clamp(180px, 58vw, 320px);
  }
}

@media print {
  .navbar,
  footer,
  .btn,
  .timeline-toolbar,
  [data-filter-bar] {
    display: none !important;
  }

  body { background: #fff; }

  .block,
  .card,
  .elev,
  .hero {
    box-shadow: none;
    border-color: #bfc7d3;
  }
}