/* =========================================================================
   enhancements.css — modern/design polish layered on top of the original
   sheets (loaded AFTER them). Original files stay untouched.
   ========================================================================= */

/* ----------------------------------------------------------------------------
 * 0. Design tokens — premium navy palette + type scale. The legacy saturated
 *    blue (#215eb1) is driven everywhere by --backgroundColor / --colorTextHover,
 *    so re-pointing those two variables re-skins every blue section, band, icon
 *    and accent at once. Deep navy becomes the primary; the bright blue is kept
 *    only as a selective accent.
 * ------------------------------------------------------------------------- */
:root {
  --navy: #0f1a2e;
  --navy-2: #14223b;
  --navy-hover: #233a61;
  --ink: #0f1a2e;
  --ink-soft: rgba(15, 26, 46, 0.66);
  --paper: #f6f7f9;
  --line: #e6e8ec;
  --accent: #2f6fd0;
  --accent-deep: #285fb4;
  /* Re-skin the legacy variables → navy primary + blue accent. */
  --backgroundColor: #0f1a2e;
  --colorTextHover: #2f6fd0;
}

#app {
  background-color: var(--paper) !important;
}
/* Guarantee no horizontal scroll at any width (legacy full-bleed bands use
   width:200% / 106vw and are meant to be clipped). */
#Accueil {
  overflow-x: hidden !important;
}
/* Ultra-wide fix: the legacy desktop scroller is flex-direction:row + flex-wrap
   (ancopred.css l.49). On wide screens its width-capped, centred children
   (hero .sectionR 80%/max 1500px, .stats/.services max 1180px, team .sectionC
   80%) leave horizontal room and WRAP two-to-a-row (hero beside the stats band).
   Force a single non-wrapping column on desktop so every section stacks, exactly
   like mobile (already column via ancopredMobile.css). align-items:center is
   inherited → capped sections stay centred; width:100% bands still span edge to
   edge. Touches nothing the carousel pin or hero min-height depend on. */
@media (min-aspect-ratio: 1/1) {
  #Accueil {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    /* CRUCIAL: the legacy justify-content:center (fine for the old ROW layout)
       centres the overflowing column VERTICALLY → it pushes the top (hero) above
       the scroll origin and makes it unreachable. Anchor content to the top,
       like the mobile sheet does. */
    justify-content: flex-start !important;
    align-content: normal !important;
  }
  /* The map band ships with a legacy width:200% full-bleed hack (ancopred.css
     l.26). In the centred column that 200% box overflows symmetrically, dragging
     its left edge — and the left-aligned copy at padding-left:10% — off-screen.
     A border-box width:100% IS already full-bleed here (#Accueil spans the
     viewport), and keeps the copy on-screen. */
  #mapSection {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* Section titles are now real <h1>/<h2> tags (SEO + a11y). Neutralize only the
   default UA top/bottom heading margins — NOT left/right, otherwise it would
   override the inline `margin-left:10%` that left-aligns the realizations title. */
h1#mainTitle,
h2.pageTitle,
h2.pageTitle2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ----------------------------------------------------------------------------
 * 0b. Typography — restored to the original Ubuntu. The legacy sheet already
 *    sets Ubuntu on the universal selector, so we simply stop overriding it.
 * ------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * 1. Section titles — ORIGINAL moving in-text background restored: a textured
 *    image clipped into the glyphs, slowly drifting with `hovr`. Dark texture
 *    (BG1less) for titles on light sections; light texture (BG2FLess) for the
 *    titles that sit on the navy bands, so they stay legible.
 * ------------------------------------------------------------------------- */
.pageTitle,
#mainTitle,
#sectionTitre,
#section3div,
#futureClicker {
  background: url(../images/BG1less.webp) !important;
  background-size: 90% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: hovr 120s infinite linear !important;
}
#reappearClassic,
#sectionTitre2,
#mainTitle2 {
  background: url(../images/BG2FLess.webp) !important;
  background-size: 156% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: hovr 120s infinite linear !important;
}
@media (prefers-reduced-motion: reduce) {
  .pageTitle,
  #mainTitle,
  #sectionTitre,
  #section3div,
  #futureClicker,
  #reappearClassic,
  #sectionTitre2,
  #mainTitle2 {
    animation: none !important;
  }
}
/* Hero subtitle: keep it a visible soft ink — it must not inherit the clipped
   transparent fill from its parent #sectionTitre. */
#sectionTitreSpan,
#sectionTitreSpan2 {
  color: var(--ink-soft) !important;
  -webkit-text-fill-color: var(--ink-soft) !important;
  font-weight: 400 !important;
}

/* ----------------------------------------------------------------------------
 * 2. Contact CTA — NO card. The two action buttons ARE the design.
 *    The white floating box added nothing (it only wrapped two buttons) and
 *    fought the blue diagonal. Instead: a sober lead-in + a primary/secondary
 *    button pair sitting directly on the section. Primary = email (solid brand
 *    fill, leads the eye); secondary = form (outline).
 * ------------------------------------------------------------------------- */
.abonnement,
.abonnementMarketPlace {
  position: relative;
  /* Strip every trace of the old card. */
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none !important;
  cursor: default;
  overflow: visible;
  /* Layout: lead-in on its own row, the two buttons centered below. */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: clamp(1rem, 3vw, 2rem) 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.abonnement::before,
.abonnementMarketPlace::before {
  display: none !important;
}
.abonnement:hover,
.abonnementMarketPlace:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* "Nous contacter" — modest lead-in above the buttons (not a giant title). */
.abonnement .infoTitle,
.abonnementMarketPlace .infoTitle {
  width: 100% !important;
  margin: 0 0 0.4rem !important;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f1a2e !important;
}

/* PRIMARY button (1st = email) — solid navy, matches the nav "Contact Us";
   colors up to the accent blue on hover. Consistent with the new palette. */
.abonnement .button {
  position: relative;
  width: auto;
  margin: 0 !important;
  padding: 0.78em 1.8em !important;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff !important;
  background: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(15, 26, 46, 0.22) !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease !important;
}
.abonnement .button:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  background: var(--navy-hover) !important;
  border-color: var(--navy-hover) !important;
  box-shadow: 0 16px 34px rgba(15, 26, 46, 0.30) !important;
}
.abonnement .button .marketplaceIcon {
  filter: brightness(0) invert(1) !important; /* pure white on the fill */
  opacity: 0.95;
  /* Cap the icon so it doesn't dictate the (now slimmer) button height. */
  width: 19px !important;
  height: 19px !important;
  margin-right: 0.55em !important;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* SECONDARY button (2nd = form) — clean outline, lets the primary lead;
   fills navy on hover. */
.abonnement .button + .button {
  color: var(--navy) !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 26, 46, 0.18) !important;
  box-shadow: 0 6px 18px rgba(16, 35, 70, 0.06) !important;
}
.abonnement .button + .button:hover {
  color: #ffffff !important;
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(15, 26, 46, 0.22) !important;
}
.abonnement .button + .button .marketplaceIcon {
  filter: brightness(0) !important;
  opacity: 0.6;
}
.abonnement .button + .button:hover .marketplaceIcon {
  filter: brightness(0) invert(1) !important;
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * 3. Realization cards — modern card: image header + clamped text.
 *    (Replaces the legacy image-bg + focus-innerHTML swap that jumped.)
 * ------------------------------------------------------------------------- */
/* Kill the legacy 400%-tall scroll rail that left a huge empty gap below the
   cards. The GSAP pin now provides its own scroll length (pinSpacing). */
/* Pin must live in normal block flow — pinning inside a flex container with
   align-items:center makes GSAP's tall pin-spacer get vertically re-centered,
   which shifts the element and causes a jump when the pin releases. */
#scrollDiv {
  height: auto !important;
  margin-bottom: clamp(3rem, 8vw, 7rem) !important;
  display: block !important;
}
.imageCDivRealization {
  height: auto !important;
  display: block !important;
}

/* GSAP ScrollTrigger conflicts with CSS scroll-behavior:smooth on the scroll
   container (causes stutter / jump when pin releases). Disable it on the
   scroller — nav clicks request smooth scrolling explicitly in JS instead. */
#Accueil {
  scroll-behavior: auto !important;
}

/* Carousel window: fixed max width, centered, clips the moving rail. This
   decouples the scroll length from the screen width → consistent, substantial
   horizontal scroll on every screen (incl. ultra-wide). */
.rea-rail {
  max-width: 100%; /* full screen width — cards clip at the screen edges */
  overflow: hidden;
  /* Padding must absorb the focused card's 1.22 height growth (±55px around
     centre) so overflow:hidden never clips it, plus shadow + progress bar. */
  padding-top: clamp(4rem, 7.5vh, 5rem);
  padding-bottom: clamp(5.5rem, 11vh, 7.5rem);
}
/* Desktop: the rail fills the viewport and centres the cards VERTICALLY during
   the pin (justify-content), while keeping their horizontal start at the left
   edge (align-items:flex-start) so the GSAP x:0 / railDistance maths is intact. */
@media (min-aspect-ratio: 1/1) {
  .rea-rail {
    /* Match the scroller's visible height (#Accueil ≈ viewport minus the sticky
       header, ~93vh) so the centred cards sit in the middle of the VISIBLE area,
       not 100vh (which pushed them ~header-height too low). */
    height: 93vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 0;
    /* Coverflow perspective lives HERE (viewport-width element) so the vanishing
       point is the screen centre — cards recede symmetrically toward the focused
       (centre) card, no end-of-rail collisions. */
    perspective: 1600px;
    perspective-origin: 50% 50%;
  }
}
/* The rail is as wide as its content and slides across the full width. */
#realizationDiv {
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  /* Promote the moving rail to its own GPU layer so the cards are painted once
     and the layer is simply translated → no sub-pixel repaint trembling. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Centering pad: half the viewport minus half a card, so the FIRST and LAST
     cards can reach the viewport centre and become the focused card. Falls back
     to a small edge pad on narrow screens. */
  padding-inline: max(clamp(1.5rem, 5.5vw, 120px), calc(50vw - 220px)) !important;
  padding-block: 0 !important;
  /* Very airy spacing between cards (~200px on wide screens). */
  gap: clamp(2.5rem, 9vw, 200px) !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  /* The cards sit slightly BACK in Z (coverflow translateZ ≤ ~0), so this z=0
     container would otherwise hit-test IN FRONT of them and swallow card clicks
     (open-detail). Make the container click-transparent; the cards/tile opt back in. */
  pointer-events: none !important;
}
#realizationDiv .realization,
#realizationDiv .rcard--more {
  pointer-events: auto !important;
}
#realizationDiv .realization {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: clamp(320px, 70vw, 440px) !important;
  max-width: 440px !important;
  height: 500px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(15, 17, 21, 0.06) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(16, 35, 70, 0.16) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  cursor: pointer;
  scale: 1 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* 5-card preview: cards past the preview are hidden until "See more" reveals
   them. Must out-specify the `display:flex !important` just above. */
#realizationDiv .realization.rcard-hidden {
  display: none !important;
}
/* (the hover lift that used to live here is removed — the focus interaction in
   section 18 now owns the hover/centred effect; its !important transform was
   overriding the focus scaleX, so hover appeared to do nothing.) */
.rcard__media {
  position: relative;
  flex: 0 0 46%;
  overflow: hidden;
}
/* Editorial: mute the bright-blue illustration toward a deeper, calmer navy and
   add a soft bottom vignette so the media reads as a refined panel, not a
   saturated block. */
.rcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(15, 26, 46, 0) 50%,
    rgba(15, 26, 46, 0.32) 100%
  );
}
.rcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#realizationDiv .realization:hover .rcard__img {
  transform: scale(1.06);
}
.rcard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.25rem 1.35rem 1.4rem;
}
.rcard__title {
  color: #0f1a2e !important;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard__text {
  color: rgba(15, 17, 21, 0.64) !important;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcard__more {
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--navy) !important;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.rcard__more::after {
  content: '→';
  transition: transform 0.25s ease;
}
#realizationDiv .realization:hover .rcard__more::after {
  transform: translateX(4px);
}

/* --- Editorial card meta: index · pillar chip, and the tech-tag row --------- */
.rcard__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}
.rcard__index {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
}
.rcard__chip {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: rgba(47, 111, 208, 0.1);
  border: 1px solid rgba(47, 111, 208, 0.2);
  border-radius: 999px;
  padding: 0.22em 0.7em;
}
.rcard__foot {
  margin-top: auto;
}
.rcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}
.rcard__tags li {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(15, 26, 46, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.2em 0.55em;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
 * 4. Realization detail modal (full description).
 * ------------------------------------------------------------------------- */
.real-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(8, 12, 20, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.real-modal {
  position: relative;
  width: min(100%, 640px);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}
.real-modal__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  flex: 0 0 auto;
}
.real-modal__content {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  overflow-y: auto;
}
.real-modal__title {
  color: #0f1a2e !important;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
.real-modal__text {
  color: rgba(15, 17, 21, 0.72) !important;
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-line;
  margin: 0;
}
.real-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex; /* perfectly center the ✕ glyph */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0f1a2e;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: background-color 0.25s ease, color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Subtle, clean hover (no gimmicky rotation): gentle lift + brand tint. */
.real-modal__close:hover {
  background: #ffffff;
  color: var(--navy);
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}
.real-modal__close:active {
  transform: scale(0.96);
}
.realfade-enter-active,
.realfade-leave-active {
  transition: opacity 0.25s ease;
}
.realfade-enter-from,
.realfade-leave-to {
  opacity: 0;
}

/* ----------------------------------------------------------------------------
 * 5. Diagonal blue band near the footer — crisp clip-path instead of the
 *    oversized rotated div (#bgEnd).
 * ------------------------------------------------------------------------- */
/* Footer: clean, pronounced diagonal top (clip-path), no rotated div. */
#ml_cgv {
  clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 100%);
  padding-top: 22vh !important;
}
#bgEnd {
  display: none !important;
}

/* "Still have questions" CTA back in normal flow (legacy top:30em removed) so
   its text no longer overlaps the blue footer. */
.last-cta {
  top: 0 !important;
  margin-top: clamp(2rem, 5vw, 4rem) !important;
  margin-bottom: clamp(3rem, 7vw, 6rem) !important;
}
/* Lead text was white → unreadable on the light part. Make it dark. */
.textAccLBottom {
  color: rgba(15, 17, 21, 0.74) !important;
}

/* Map section: ~2x taller blue band + pronounced diagonal bottom (clip-path). */
#mapSection {
  clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
  padding-top: 12vh !important;
  padding-bottom: 14vh !important;
  min-height: 84vh !important; /* + padding (content-box) ≈ 110vh ≈ 2x original */
}
/* Reset the legacy rotated/offset decorative block to a clean full container. */
#bg {
  transform: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
/* Globe: glued to the right edge (no gap), larger, anchored top-right; bottom
   kept above the diagonal so it is not clipped. */
#world-map {
  bottom: 11vh !important;
  top: auto !important;
  right: 0 !important;
  width: 42% !important;
  padding-top: 0 !important;
  transform: scaleX(-1) !important;
}
/* Map section subtext: align its left edge with the title (the generic
   .textAccC2 rule below centers it with margin:auto, pushing it inward). */
#mapSection .textAccC2 {
  margin-left: 0 !important;
}

/* ----------------------------------------------------------------------------
 * 6. Mobile realizations — see §25 (horizontal swipe carousel) and §26.
 *    The earlier vertical-stack rules here were dead (fully overridden by §25)
 *    and contradicted the carousel, so they were removed to end the conflict.
 * ------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * 7. Breathing room — the legacy layout packed content tightly *inside* each
 *    section (only ~2vmin under a 4em title, the CTA lead-in glued to its
 *    buttons). This opens up the internal vertical rhythm. Inter-section
 *    margins are already generous and left untouched.
 * ------------------------------------------------------------------------- */
/* Air under every big section title. */
.pageTitle,
.pageTitle2 {
  padding-bottom: clamp(1.6rem, 4vh, 3rem) !important;
}

/* Paragraphs: more generous line-height + a little vertical padding. */
.textAccL,
.textAccLBottom,
.textAccC,
.textAccC2,
.textAccR,
.textAccLEA,
.textAccLEABis {
  line-height: 1.8 !important;
}
.divTextAcc {
  padding-top: clamp(1rem, 3vh, 2.2rem) !important;
  padding-bottom: clamp(1rem, 3vh, 2.2rem) !important;
}

/* Contact CTA cluster: let the lead-in, the buttons and the supporting text
   each breathe instead of stacking tightly. */
.abonnement {
  margin-top: clamp(2rem, 5vh, 3.6rem) !important;
  margin-bottom: clamp(2rem, 5vh, 3.6rem) !important;
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
}
.abonnement .infoTitle,
.abonnementMarketPlace .infoTitle {
  margin-bottom: clamp(0.8rem, 2vh, 1.3rem) !important;
}

/* Team section: photos/text were a touch dense. */
#SinDiv,
#PonsDiv {
  margin-bottom: clamp(1rem, 3vh, 2.2rem) !important;
}

/* ----------------------------------------------------------------------------
 * 8. Sticky top bar (#sectionTop) — the original bar was 40%-white with a big
 *    soft drop-shadow, so on the light page the bar itself was nearly invisible
 *    and only its blurry shadow showed as a weird semi-transparent band at the
 *    bottom edge. Replace with a clean frosted-glass bar: a more opaque bg +
 *    backdrop blur + a crisp 1px hairline border instead of the gappy shadow.
 * ------------------------------------------------------------------------- */
/* Transparent over the hero, frosting in once the page is scrolled (a class
   toggled in JS). Cleaner hero, premium "settling" feel. */
#sectionTop {
  position: relative; /* anchor the scroll-progress bar */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease, backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease !important;
}
#sectionTop.topbar-scrolled {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  border-bottom-color: rgba(15, 17, 21, 0.07) !important;
  box-shadow: 0 6px 24px rgba(16, 35, 70, 0.06) !important;
}

/* --- Home bar: refined solid pill + clean GSAP-driven glide ---------------- */
/* The active section is marked by a navy pill that glides between items. Lighter
   than the original: softer corners (not a full circle) and a discreet shadow. */
#nameBarDivBG {
  background: linear-gradient(180deg, var(--navy-2), var(--navy)) !important;
  box-shadow: 0 4px 12px rgba(15, 26, 46, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 9px !important;
  top: 0 !important;
  bottom: auto !important;
  padding-top: 0.25em !important;
  padding-bottom: 0.25em !important;
  /* GSAP owns left/width/height — kill the legacy `transition: all .7s` so it
     doesn't double-animate (which made the slide feel laggy). */
  transition: none !important;
}
.nameBarDiv {
  padding: 0.45em 1.25em !important;
  border-radius: 9px !important;
}
.nameBar {
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
  text-decoration: none !important;
}

/* --- Scroll-progress bar (header bottom edge) ----------------------------- */
#scrollProgress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--navy));
  z-index: 2;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * 9. "Scope of work" — four-pillar capabilities band (financial-engineering
 *    positioning). Sits on the light page background, before the realizations,
 *    framing the breadth of work the portfolio then proves. Editorial, premium
 *    layout: brand-tinted line icons, dark title, muted body, centered.
 * ------------------------------------------------------------------------- */
#expertiseFields {
  width: 100% !important;
  margin-top: clamp(2.5rem, 7vh, 5rem) !important;
  padding-top: clamp(4rem, 11vh, 8rem) !important;
  padding-bottom: clamp(3rem, 8vh, 5.5rem) !important;
  text-align: center;
}
#expertiseFields .pageTitle {
  text-align: center !important;
  margin: 0 auto !important;
}
.pillars__intro {
  max-width: 760px;
  margin: 0.4rem auto 2.8rem;
  padding-inline: 1.5rem;
  color: rgba(15, 17, 21, 0.66);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.75;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 2.8vw, 2.6rem);
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  margin-bottom: 1.15rem;
  background: linear-gradient(135deg, rgba(47, 111, 208, 0.12), rgba(48, 53, 158, 0.12));
  border: 1px solid rgba(33, 94, 177, 0.18);
}
.pillar__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.pillar__title {
  color: #0f1a2e !important;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.pillar__text {
  color: rgba(15, 17, 21, 0.62) !important;
  font-size: 0.95rem;
  line-height: 1.62;
  margin: 0;
}
@media (max-width: 1000px) {
  .pillars__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 2.2rem;
    max-width: 720px;
  }
}
@media (max-width: 560px) {
  .pillars__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .pillar {
    align-items: center;
    text-align: center;
  }
}

/* Framing line above the realizations carousel. */
.rea-intro {
  max-width: 58ch;
  margin: 0 10% clamp(1.8rem, 4vh, 2.8rem);
  padding-inline: 0;
  text-align: left;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.7;
}
/* Portfolio header shares the same centered 1180px column as the other
   left-aligned section headers (Stats, Services) so its left edge lines up with
   the cards instead of the old hard-coded margin-left:10% (which drifted further
   left than the rest on wide screens). */
.rea-head {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
}
.rea-head .rea-intro {
  margin-left: 0;
  margin-right: 0;
}

/* ----------------------------------------------------------------------------
 * 10. Responsive & fluid — adapt from ~320px to ultra-wide. The legacy sheets
 *     sized big titles with max(4vmax,5em), which overflowed small screens;
 *     replace with clamp(). Also stack the team and tame oversized voids.
 * ------------------------------------------------------------------------- */
#sectionTitre {
  font-size: clamp(2.1rem, 5.6vw, 4.6rem) !important;
}
#sectionTitreSpan,
#sectionTitreSpan2 {
  font-size: clamp(1rem, 1.5vw, 1.3rem) !important;
  line-height: 1.6 !important;
}
.pageTitle,
.pageTitle2,
#sectionTitre2,
#mainTitle2,
#section3div {
  font-size: clamp(1.85rem, 4.6vw, 3.4rem) !important;
}

/* Constrain body copy width so lines stay readable on wide screens. */
.textAccC,
.textAccC2,
.textAccL,
.textAccLBottom {
  max-width: 68ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* AI section: its title is LEFT-aligned, so its body copy must be too (the
   centered margin:auto above is meant for the centered-header sections). */
#useIA .textAccC2 {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Cap body-copy size on desktop. The legacy size is `max(1.5vmax, 1.5em)` with
   NO upper bound → on ultra-wide (e.g. 2794px, vmax≈28) it balloons to ~42px,
   nearly as large as the headings. Clamp it to the site's body scale (~17–19px),
   matching .services__intro / .rea-intro. Mobile already clamps these (§25). */
@media (min-aspect-ratio: 1/1) {
  .textAccC,
  .textAccC2,
  .textAccL,
  .textAccLBottom,
  .textAccR {
    font-size: clamp(1.05rem, 1.1vw, 1.2rem) !important;
  }
}

/* Tame oversized section voids (a single line floating in a huge band). */
#section1div {
  min-height: auto !important;
  padding-top: clamp(3rem, 8vh, 6.5rem) !important;
  padding-bottom: clamp(3rem, 8vh, 6.5rem) !important;
}
#section2div {
  padding-top: clamp(3rem, 8vh, 6rem) !important;
}

/* Ultra-wide: keep the experience centered, never edge-to-edge text. */
@media (min-width: 1700px) {
  #homeTitle,
  #firstItem,
  #expertiseFields,
  #useIA {
    max-width: 1500px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ----------------------------------------------------------------------------
 * 11. Unified button system + refined logo walls.
 * ------------------------------------------------------------------------- */
/* Nav "Contact us" → matches the page CTA: navy pill, white, refined hover. */
#contactUs {
  padding: 0.6em 1.3em !important;
  border-radius: 999px !important;
  background: var(--navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 6px 18px rgba(16, 35, 70, 0.16) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
#contactUs:hover {
  background: var(--navy-hover) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(16, 35, 70, 0.22) !important;
}

/* Logo walls: lighten the heavy container, present logos as clean tiles that are
   monochrome at rest and colorize on hover (premium, less "brand soup"). */
.imageCDiv {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: clamp(2rem, 6vh, 5rem) !important;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.imgDiv,
.imgDivIA {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 18px rgba(16, 35, 70, 0.05) !important;
  border-radius: 14px !important;
}
.imageC,
.imageC2 {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.imgDiv:hover .imageC,
.imgDivIA:hover .imageC2 {
  filter: grayscale(0);
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * 12. Footer — from two bare legal links to a composed, premium footer.
 * ------------------------------------------------------------------------- */
#ml_cgv {
  flex-direction: column !important;
  gap: 1rem !important;
  padding-bottom: clamp(3rem, 8vh, 7rem) !important;
}
.footer-brand {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.footer-links {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2rem);
  flex-wrap: wrap;
  justify-content: center;
}
.ml_cgv_text {
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color 0.25s ease;
}
.ml_cgv_text:hover {
  color: #ffffff !important;
}
.footer-copy {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
 * 13. Scroll reveals (GSAP-driven). Start states only; GSAP animates them to
 *     the resting state on scroll. Guarded by the `gsap-ready` body class added
 *     client-side (desktop, motion allowed) so SSR / no-JS / reduced-motion /
 *     mobile keep every element fully visible. clip-path is used on the headings
 *     instead of a wrapper so the background-clip:text textured fill survives.
 * ------------------------------------------------------------------------- */
.gsap-ready .anco-wipe {
  opacity: 0;
  transform: translateY(22px);
  clip-path: inset(0 0 100% 0);
}
.gsap-ready .anco-stagger > * {
  opacity: 0;
  transform: translateY(30px);
}
.gsap-ready .anco-rise {
  opacity: 0;
  transform: translateY(28px);
}
/* SplitText injects fresh line <div>s that match the legacy universal rule
   `* { color:#f0f0f0 }`, which sets an EXPLICIT near-white colour on them and
   defeats inheritance from the dark intro paragraph → invisible on the light
   page. Force the generated children to inherit their parent's real colour. */
.pillars__intro *,
.rea-intro * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (prefers-reduced-motion: reduce) {
  .gsap-ready .anco-wipe,
  .gsap-ready .anco-stagger > *,
  .gsap-ready .anco-rise {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}
/* Lenis smooth scroll: keep native smooth-behavior off while Lenis drives it. */
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
 * 14. "Our team can help you" — harmonize the section: title, copy and the
 *     logo wall all share one centered axis (logos used to start at the far
 *     left edge while the text was indented).
 * ------------------------------------------------------------------------- */
#firstItem {
  align-items: center !important;
  text-align: center !important;
}
#firstItem .pageTitle,
#firstItem #teamCanHelp {
  width: 100% !important;
  margin-left: 0 !important;
  text-align: center !important;
}
#firstItem .textAccC {
  text-align: center !important;
}
.imageCDiv {
  width: min(100%, 900px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  justify-content: center !important;
  align-content: center !important;
}

/* ----------------------------------------------------------------------------
 * 15. Team — premium white cards (were dark translucent blocks). Photo on top,
 *     serif name + muted role below, navy LinkedIn that accents on hover. The
 *     .team-grid wrapper guarantees a clean 2-up (desktop) / 1-up (mobile).
 * ------------------------------------------------------------------------- */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(7.5rem, 21vw, 18rem);
  width: 100%;
  margin: clamp(1.6rem, 4vh, 3rem) auto 0;
}
#SinDiv,
#PonsDiv {
  width: clamp(260px, 42%, 320px) !important;
  height: auto !important;
  max-width: 320px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 44px rgba(16, 35, 70, 0.1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 0 1.2rem !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
}
#SinDiv:hover,
#PonsDiv:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 30px 60px rgba(16, 35, 70, 0.16) !important;
}
#imageDorian,
#imageGuillaume {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
/* Mirror Guillaume's portrait on the vertical axis (left-right flip). The dezoom
   is baked into the image file (padded to 4:5 so cover no longer crops his sides),
   so no scale here — the frame stays the SAME size as Dorian's. */
#imageGuillaume {
  transform: scaleX(-1);
}
#SindjiD,
#PonsG {
  text-shadow: none !important;
  text-align: center !important;
  margin: 1rem 1rem 0.5rem !important;
  padding: 0 !important;
}
.member-name {
  display: block;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.member-role {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
}
#LinkedInD,
#LinkedInP {
  background: transparent !important;
  -webkit-text-fill-color: initial !important;
  text-shadow: none !important;
  margin: 0.2rem 0 0 !important;
}
#linkedinsvgD,
#linkedinsvgP {
  fill: var(--navy) !important;
  height: 0.95em !important;
  width: auto !important;
  transition: fill 0.3s ease;
}
#LinkedInD:hover #linkedinsvgD,
#LinkedInP:hover #linkedinsvgP {
  fill: var(--accent) !important;
}
@media (max-width: 760px) {
  #aboutUsDiv {
    flex-direction: column !important;
    align-items: center !important;
  }
  #SinDiv,
  #PonsDiv {
    width: min(86%, 330px) !important;
  }
}

/* ----------------------------------------------------------------------------
 * 16. Vertical rhythm between sections. The legacy sheet used erratic em margins
 *     (firstItem 270px, aboutUsDiv 400px, several 288px...) so inter-section
 *     gaps jumped from -16px to 560px. Normalize them to a single fluid scale.
 *     Where a navy band meets a light section the gap stays 0 (the colour change
 *     is the divider); a gap is placed BEFORE each navy band instead.
 * ------------------------------------------------------------------------- */
:root {
  --section-gap: clamp(5.5rem, 11vh, 10rem);
}
/* Neutralize legacy structural quirks that broke the box model and caused
   sections to overlap: .sectionR was pushed down 14em via `top` (its content
   overflowed its own box, so the next section rode up into it); .sectionC had a
   fixed height:75% (content overflowed below the box). */
.sectionR {
  top: 0 !important;
}
.sectionC {
  height: auto !important;
}
/* Hero: own the WHOLE first screen (viewport minus the 80px header), content
   centered — the old min(80vh,720px) cap let the next section (Stats eyebrow +
   title) peek at the bottom of taller screens, which read as clutter.
   §25 overrides this to min-height:auto on mobile portrait. */
#homeTitle {
  min-height: calc(100vh - 80px) !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}
#firstItem {
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
}
#expertiseFields {
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
  padding-top: clamp(0.5rem, 2vh, 1.5rem) !important;
  padding-bottom: clamp(0.5rem, 2vh, 1.5rem) !important;
}
#scrollDiv {
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
}
#section1div {
  /* navy band: gap before it, flush with the light section after it */
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
}
/* The Process band (navy) sits directly before the quote (also navy). Drop the
   light gap between them so the two dark bands read as ONE continuous block
   instead of navy → paper strip → navy, and trim the doubled vertical padding
   at the seam (Process bottom + quote top were stacking ~13rem). */
.process + #section1div {
  margin-top: 0 !important;
  padding-top: clamp(2rem, 5vh, 3.5rem) !important;
}
#useIA {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#mapSection {
  /* navy band: gap before it, flush with the CTA after it */
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
}
/* Team now sits flush after the navy map band (the diagonal is the divider),
   with internal top padding mirroring what the CTA had there before. */
#aboutUsDiv {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: clamp(3rem, 8vh, 6rem) !important;
}
/* "Want to learn more?" CTA now follows the team → normal section gap. */
#section2div {
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
/* networks block = the .sectionC immediately after the CTA */
#section2div + .sectionC {
  margin-top: var(--section-gap) !important;
  margin-bottom: 0 !important;
}
#ml_cgv {
  margin-top: var(--section-gap) !important;
}

/* ----------------------------------------------------------------------------
 * 17. Intra-section rhythm — the legacy `margin-top: 3em` on body copy made
 *     uneven internal gaps. Use one consistent, smaller step under titles and
 *     between blocks.
 * ------------------------------------------------------------------------- */
.textAccC,
.textAccC2,
.textAccL,
.textAccLBottom {
  margin-top: clamp(1.1rem, 3vh, 1.9rem) !important;
}
.imageCDiv {
  margin-top: clamp(1.6rem, 4vh, 2.6rem) !important;
}
#imageuseIA {
  margin-top: clamp(1.6rem, 4vh, 2.6rem) !important;
}
/* keep the centered pillars intro tight to its heading */
.pillars__intro {
  margin-top: clamp(0.6rem, 2vh, 1rem) !important;
}

/* ----------------------------------------------------------------------------
 * 18. Realization carousel — "focus" interaction (desktop only). KEEPS the
 *     original white-body card (illustration on top, white body below). By
 *     default a card shows only its title; the focused card ENLARGES (the whole
 *     div grows), reveals its description, and its SVG components animate.
 *
 *     Trembling fix: the focus state is applied via the `.is-active` class that
 *     JS adds ONLY when the carousel is idle (settled on a card) and removes the
 *     instant scrolling starts. So while you scroll NOTHING transitions — the
 *     rail is just translated (GPU), exactly like the smooth baseline. The focus
 *     pops in when you stop on a card. Hover works at any time.
 * ------------------------------------------------------------------------- */
/* Inline SVG fills its container on every breakpoint. */
.rcard__media svg {
  width: 100%;
  height: 100%;
  display: block;
  /* No mute filter: the illustrations are designed straight in the deep-navy
     palette (the old filter compensated for a saturated flat blue). */
}

@media (min-aspect-ratio: 1/1) {
  /* The focus enlarge is a pure compositor transform (no per-frame layout/reflow),
     so it stays fluid while the rail scrolls. NB: `will-change` is intentionally
     NOT set here — promoting all 17 cards permanently pins 17 GPU layers in VRAM
     for an effect only ONE card runs at a time. It is hinted on focus instead. */
  /* Coverflow: the perspective lives on .rea-rail (viewport-width → vanishing
     point at the SCREEN centre). The wide moving rail only carries preserve-3d so
     its cards render in that perspective. (Perspective on #realizationDiv itself
     was the overlap bug: its origin sat at the middle of the ~5600px rail, so
     end cards were projected toward that off-screen point and collided.)
     The per-card transform is JS-driven each frame → no CSS transition on it. */
  #realizationDiv {
    transform-style: preserve-3d;
  }
  /* Focus enlarge = WIDTH ONLY (the height stays the base 500). The coverflow rAF
     grows the centred card's REAL CSS `width` (crisp — laid out, not transform-
     scaled) CONTINUOUSLY with proximity (like the depth → fluid, no binary pop),
     and balances it with equal NEGATIVE margins so the flex footprint stays at the
     base width (rail scrollWidth + 1:1 pin scroll untouched, growth centred).
     `transition: none` on width/margin — JS owns them per frame. The media's
     flex-basis is also grown a little (JS) so the wider media isn't an over-zoomed
     slice. */
  #realizationDiv .realization {
    transition: box-shadow 0.4s ease !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .rcard__media {
    /* Fixed 16:9 (the SVG viewBox ratio): the media's height tracks its width, so
       a widening focused card grows a proportionally TALLER illustration — while
       the text body keeps a constant height (no white gap). */
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }
  /* SVG COVERS its media box (preserveAspectRatio="slice", set in inlineRealSvg) —
     fills the frame crisp at the layout level, no matte, no transform upscaling. */
  .rcard__media svg {
    width: 100% !important;
    height: 100% !important;
    flex: 0 0 auto !important;
  }
  /* Editorial: a 2-line teaser is ALWAYS visible at rest (the card no longer
     looks empty); focusing expands it and fades in the "learn more" link. */
  .rcard__text {
    -webkit-line-clamp: 2;
    transition: none;
  }
  .rcard__more {
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  /* FOCUSED = the scroll-centred card (.rea-on) OR the hovered card. The SIZE is
     the coverflow's continuous scale (JS); here we only add emphasis + reveal. */
  #realizationDiv .realization.rea-on,
  #realizationDiv .realization:hover {
    box-shadow: 0 36px 70px rgba(16, 35, 70, 0.3) !important;
  }
  .realization:is(.rea-on, :hover) .rcard__text {
    -webkit-line-clamp: 4;
  }
  .realization:is(.rea-on, :hover) .rcard__more {
    opacity: 1;
  }

  /* --- bespoke SVG component animations (focused card only) ---------------- */
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: raSpin 7s linear infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-spin-rev {
    transform-box: fill-box;
    transform-origin: center;
    animation: raSpin 9s linear infinite reverse;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: raPulse 2.4s ease-in-out infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-twinkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: raTwinkle 2.2s ease-in-out infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-twinkle:nth-of-type(2n) {
    animation-delay: 0.45s;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-twinkle:nth-of-type(3n) {
    animation-delay: 0.9s;
  }
  /* Draw-in: the SVG marks each .ra-draw with pathLength="1", so a dasharray of 1
     spans the WHOLE polyline whatever its real length (was a fixed 620 that left
     long lines unfinished and short ones idling). One length, one timing, all lines. */
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-draw {
    stroke-dasharray: 1;
    animation: raDraw 3.6s ease-in-out infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-rise {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: raRise 2.6s ease-in-out infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-rise:nth-of-type(2n) {
    animation-delay: 0.3s;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-rise:nth-of-type(3n) {
    animation-delay: 0.6s;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-flow {
    animation: raFlow 3.2s ease-in-out infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-swing {
    transform-box: fill-box;
    transform-origin: top center;
    animation: raSwing 2.6s ease-in-out infinite;
  }
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-flash {
    animation: raFlash 1.7s ease-in-out infinite;
  }
  /* Gauge needle: pivots around its own bbox bottom-left corner, which the SVG
     places exactly on the gauge hub → a live back-and-forth sweep, no drift. */
  .realization:is(.rea-on, :hover) .rcard__media svg .ra-gauge {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: raGauge 3.6s ease-in-out infinite;
  }

  /* NOTE: SVG animations used to be frozen while the rail scrolled (a
     `.rea-scrolling` pause) to avoid scrub stutter on the old heavy SVGs. The
     user wants them live immediately, and the redesigned SVGs animate mostly
     compositor-friendly transforms on small elements (repaints bounded by the
     media's `contain: layout paint`), so the freeze is gone. */
}

@keyframes raSpin {
  to { transform: rotate(360deg); }
}
@keyframes raPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.16); opacity: 1; }
}
@keyframes raTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes raDraw {
  0% { stroke-dashoffset: 1; }
  55%, 100% { stroke-dashoffset: 0; }
}
@keyframes raRise {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.14); }
}
@keyframes raFlow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}
@keyframes raSwing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes raFlash {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes raGauge {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(11deg); }
}
@media (prefers-reduced-motion: reduce) {
  .realization .rcard__media svg * {
    animation: none !important;
  }
}

/* ----------------------------------------------------------------------------
 * 19. Carousel progress indicator — a tabular counter + a thin fill bar that
 *     track the pinned horizontal scroll. Sits in the rail's bottom padding so
 *     it stays visible for the whole pin. Desktop only.
 * ------------------------------------------------------------------------- */
.rea-rail {
  position: relative;
}
.rea-progress {
  position: absolute;
  left: 50%;
  /* Nestle it just UNDER the focused card. --rea-focus-half (set by setupCoverflow)
     = the enlarged card's half-height + a small gap, so the bar tracks the focus
     scale across viewports. Falls back to ~the base card's half-height. */
  top: calc(50% + var(--rea-focus-half, 18.75rem));
  bottom: auto;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.5vw, 1.1rem);
  pointer-events: none;
}
.rea-progress__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.rea-progress__cur {
  color: var(--navy);
}
.rea-progress__track {
  position: relative;
  width: clamp(120px, 18vw, 240px);
  height: 1px;
  border-radius: 2px;
  background: rgba(15, 26, 46, 0.12);
  overflow: hidden;
}
.rea-progress__fill {
  position: absolute;
  /* Match the 1px visual track, NOT the 8px click-padding the track adds below —
     inset:0 made the blue fill fill the whole 17px hit-area (looked thick). */
  top: 8px;
  bottom: 8px;
  left: 0;
  right: 0;
  transform-origin: left center;
  transform: scaleX(0.03);
  background: linear-gradient(90deg, var(--accent), var(--navy));
  border-radius: 2px;
}
/* The track is the one interactive part of the progress block → click to jump
   to that point in the carousel (the count + fill stay decorative). */
.rea-progress__track {
  pointer-events: auto;
  cursor: pointer;
  padding-block: 8px; /* larger hit area without changing the visual 2px bar */
  margin-block: -8px;
  background-clip: content-box;
}

/* --- Carousel arrows (prev / next) — keep the cinematic pinned scroll but give
       an explicit, keyboard-reachable control so the carousel isn't scroll-only. */
.rea-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 250; /* above every card (focused card z ≈ 200) */
  width: clamp(46px, 3.4vw, 56px);
  height: clamp(46px, 3.4vw, 56px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--navy);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(16, 35, 70, 0.14);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.rea-nav--prev {
  left: clamp(0.8rem, 3vw, 2.4rem);
}
.rea-nav--next {
  right: clamp(0.8rem, 3vw, 2.4rem);
}
.rea-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 18px 40px rgba(16, 35, 70, 0.2);
}
.rea-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.rea-nav:disabled {
  opacity: 0;
  pointer-events: none;
}
.rea-rail:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .rea-nav,
  .rea-nav:hover,
  .rea-nav:active {
    transition: none;
    transform: translateY(-50%);
  }
}

/* ----------------------------------------------------------------------------
 * 19b. Scattered floating-particle fields (the hero motif, recurring down the
 *      page). The canvas sits behind the section's real content.
 * ------------------------------------------------------------------------- */
.anco-pfield {
  position: relative;
}
.anco-pfield > *:not(.anco-particles) {
  position: relative;
  z-index: 1;
}
.anco-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
 * 20. Cursor — native OS cursor everywhere. The custom dot+ring cursor was
 *     removed at the user's request ("forme traditionnelle"); do not re-add.
 * ------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * 20b. "See more" tile — closes the 5-card realization preview; clicking it
 *      reveals the other cards (and refreshes the pin length). Styled like the
 *      card medias (deep navy) so it reads as part of the set, slimmer.
 * ------------------------------------------------------------------------- */
.rcard--more {
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(220px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #24418f, #16264f 55%, #101b31);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(16, 35, 70, 0.18);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  /* Sit ABOVE the cards so the widened last card passes BEHIND this CTA and it stays
     fully clickable. In the rail's preserve-3d context z-index alone is unreliable
     (paint follows 3D Z), so push the tile FORWARD in Z — it's then unambiguously in
     front of the cards (which sit at translateZ ≤ 0). */
  position: relative;
  z-index: 260;
  transform: translateZ(60px);
}
.rcard--more:hover {
  transform: translateZ(60px) translateY(-6px);
  box-shadow: 0 28px 60px rgba(16, 35, 70, 0.28);
}
.rcard--more__num {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #5ea2ff, #9d8bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rcard--more__lbl {
  font-size: 1.02rem;
  font-weight: 600;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.rcard--more__arrow {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.75);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
  transition: transform 0.3s ease;
}
.rcard--more:hover .rcard--more__arrow {
  transform: translateX(6px);
}

/* ----------------------------------------------------------------------------
 * 21. Intro loader — brief, sober reveal. JS slides the panel up; a CSS
 *     fallback keyframe auto-dismisses it if JS never runs, and reduced-motion
 *     skips it entirely.
 * ------------------------------------------------------------------------- */
#anco-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  animation: ancoLoaderFallback 0s linear 2.8s forwards;
}
.anco-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.anco-loader__brand {
  font-family: 'Ubuntu', sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.anco-loader__bar {
  position: relative;
  width: clamp(120px, 26vw, 240px);
  height: 2px;
  background: rgba(15, 26, 46, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.anco-loader__fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--navy));
}
@keyframes ancoLoaderFallback {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #anco-loader {
    display: none !important;
  }
}

/* ============================================================================
 * 22. Editorial system — eyebrows, enriched hero, and the new sections
 *     (key figures, capabilities, approach). Shared premium language.
 * ========================================================================= */

/* --- Eyebrow (small uppercase kicker with a short rule) -------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--center {
  justify-content: center;
}
.eyebrow--light {
  color: rgba(255, 255, 255, 0.82);
}

/* --- Enriched hero -------------------------------------------------------- */
.hero-eyebrow {
  justify-content: center;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  justify-content: center;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.hero-cta .button {
  width: auto;
  margin: 0;
  padding: 0.9em 1.9em;
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(0.98rem, 1.9vw, 1.08rem);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}
.hero-cta__primary {
  color: #fff;
  background: var(--navy);
  border: 1.5px solid var(--navy);
  box-shadow: 0 10px 26px rgba(15, 26, 46, 0.22);
}
.hero-cta__primary:hover {
  color: #fff;
  background: var(--navy-hover);
  border-color: var(--navy-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 26, 46, 0.3);
}
.hero-cta__alt {
  color: var(--navy);
  background: #fff;
  border: 1.5px solid rgba(15, 26, 46, 0.18);
  box-shadow: 0 6px 18px rgba(16, 35, 70, 0.06);
}
.hero-cta__alt:hover {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 26, 46, 0.22);
}
.hero-scrollcue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(2rem, 6vh, 4rem);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-scrollcue__line {
  position: relative;
  width: 1px;
  height: 40px;
  overflow: hidden;
  background: rgba(15, 26, 46, 0.12);
}
.hero-scrollcue__line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--accent);
  animation: ancoScrollCue 1.9s ease-in-out infinite;
}
@keyframes ancoScrollCue {
  0% { transform: translateY(-14px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scrollcue__line::after { animation: none; }
}

/* --- Key figures band ----------------------------------------------------- */
.stats {
  width: 100%;
  max-width: 1180px;
  margin: var(--section-gap) auto 0;
  padding-inline: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.stats__heading {
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.3rem, 2.5vw, 2rem) 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 35, 70, 0.05);
}
.stat__value {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
/* The number lives in a child span which the legacy `* { color:#f0f0f0 }` rule
   repaints near-white (defeating inheritance) → it was invisible on white.
   Pin it to the navy ink so the figure reads clearly. */
.stat__num {
  color: var(--navy);
  -webkit-text-fill-color: var(--navy);
}
.stat__suffix {
  color: var(--accent);
}
.stat__label {
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(15, 26, 46, 0.82);
  max-width: 22ch;
}
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stats__grid { grid-template-columns: 1fr; }
}

/* --- Capabilities / services --------------------------------------------- */
.services {
  width: 100%;
  margin-top: var(--section-gap);
  padding-inline: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.services__heading {
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.services__intro {
  max-width: 60ch;
  margin: clamp(0.6rem, 2vh, 1rem) auto 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.7;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2rem);
  max-width: 1180px;
  margin: clamp(1.8rem, 4vh, 2.8rem) auto 0;
}
.service {
  text-align: left;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 35, 70, 0.05);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}
.service:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(16, 35, 70, 0.12);
}
.service__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.service__title {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0;
}
.service__desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
}

/* Editorial rhythm: a few section headers align LEFT (echoing the left hero) so
   the page alternates left/centered headers down its length instead of stacking
   identical centered eyebrow→title→intro blocks. Desktop only — on phones the
   single-column card stacks read cleaner under a centered header. */
@media (min-width: 720px) {
  .stats--left,
  .services--left {
    text-align: left;
  }
  /* .services is full-bleed (width:100%) while its card grid is a centered
     1180px box → a left-aligned header would hug the viewport edge, misaligned
     with the cards. Constrain the section to the same 1180px box (like .stats)
     so the header's left edge lines up with the first card. */
  .services--left {
    max-width: 1180px;
    margin-inline: auto;
  }
  .services--left .services__intro {
    margin-left: 0;
    margin-right: auto;
  }
}

/* --- "Ils nous font confiance" — client-logo band -------------------------- */
/* Full-bleed navy band (matches the site's other navy bands). The Chiliz asset is
   a WHITE logo, so a dark band is the right home; both logos are normalised to
   uniform white (`brightness(0) invert(1)` turns any colour → white) for a clean
   monochrome "trusted by" row. */
.trust {
  width: 100%;
  margin-top: var(--section-gap);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  background: linear-gradient(135deg, #1f3a72 0%, #16264f 55%, #101b31 100%);
}
.trust__heading {
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
}
.trust__logos {
  list-style: none;
  margin: clamp(2rem, 5vh, 3.2rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 8vw, 6.5rem);
}
.trust__logos li {
  display: flex;
  align-items: center;
}
.trust__logos a {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 8px;
  outline-offset: 6px;
}
.trust__logos img {
  height: clamp(34px, 5vh, 52px);
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.trust__logos li:hover img {
  opacity: 1;
  transform: translateY(-3px);
}

/* --- Approach / process (navy band) -------------------------------------- */
.process {
  width: 100%;
  margin-top: var(--section-gap);
  padding: clamp(4rem, 9vh, 7rem) clamp(1.5rem, 5vw, 3rem);
  background: var(--navy);
  color: #fff;
}
.process__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.process .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.process .eyebrow::before {
  background: rgba(255, 255, 255, 0.6);
}
.process__heading {
  font-size: clamp(1.85rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 0.8rem;
}
.process__intro {
  max-width: 60ch;
  margin: 0 auto clamp(2.2rem, 5vh, 3.5rem);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}
.process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
}
/* Connector: a segment from each step's circle CENTRE to the next one's, so the
   line begins exactly at "01" (was an 8%/92% approximation that started after it).
   Circle is 44px at the column's left → centre is at 22px,22px; the next circle
   centre is one column + one gap further → width = 100% (column) + gap. */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 22px;
  width: calc(100% + clamp(1.4rem, 2.5vw, 2.2rem));
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 0;
}
.step {
  position: relative;
  text-align: left;
}
.step__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.step__desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}
@media (max-width: 900px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .step::after { display: none !important; }
}
@media (max-width: 520px) {
  .process__steps { grid-template-columns: 1fr; }
}

/* ============================================================================
 * 23. Mobile navigation menu (full-screen overlay) + mobile typography pass.
 * ========================================================================= */
/* Mobile header: declutter to logo (left) + hamburger (right); language and
   contact move into the menu. */
@media (max-aspect-ratio: 1/1) {
  #toprightDiv { display: none !important; }
}

#mobileMenuBtn {
  position: absolute;
  right: 1.1em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 130;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box; /* keep an exact 44×44 tap target (padding stays inside) */
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* On-brand bars: the site's signature accent→navy gradient (same as the titles,
   CTAs and dividers) instead of a flat generic navy 3-line icon. */
#mobileMenuBtn span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--navy));
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease, width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
/* Subtle premium cue: the middle bar is a touch shorter at rest. */
#mobileMenuBtn span:nth-child(2) { width: 70%; align-self: flex-end; }

/* Open → clean centred X (white on the navy overlay); middle bar collapses. */
#mobileMenuBtn.open span { background: #fff; width: 100%; align-self: stretch; }
#mobileMenuBtn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobileMenuBtn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#mobileMenuBtn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobileMenu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.6rem 2.2rem;
  background: var(--navy);
  color: #fff;
}
.mobileMenu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobileMenu__brand {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
.mobileMenu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-sizing + padding:0 + line-height:1 force a true 44×44 square so
     border-radius:50% is a PERFECT circle (the UA <button> default padding under
     content-box was inflating it to ~58×48 → the oval the user saw). */
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.mobileMenu__close:hover,
.mobileMenu__close:active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(47, 111, 208, 0.6); /* var(--accent) tint */
  transform: rotate(90deg);
}
.mobileMenu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: auto 0;
}
.mobileMenu__link {
  display: block;
  padding: 0.5rem 0;
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(16px);
  animation: mmenuLinkIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
.mobileMenu__link:active { color: var(--accent); }
@keyframes mmenuLinkIn {
  to { opacity: 1; transform: none; }
}
.mobileMenu__foot {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.mobileMenu__cta {
  display: block;
  padding: 0.95rem;
  text-align: center;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
}
.mobileMenu__lang {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.mobileMenu__lang button {
  padding: 0.4rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.mobileMenu__lang button.active {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.mmenu-enter-active,
.mmenu-leave-active { transition: opacity 0.35s ease; }
.mmenu-enter-from,
.mmenu-leave-to { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .mobileMenu__link { animation: none; opacity: 1; transform: none; }
}

/* Tech-stack trust strip caption (logos relocated into the Expertise section
   after consolidating the redundant "Our team can help" block). */
.tech-caption {
  width: 100%;
  margin-top: clamp(2.5rem, 6vh, 4rem) !important;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
#expertiseFields .imageCDiv {
  margin-top: clamp(1rem, 2.5vh, 1.6rem) !important;
}

/* ----------------------------------------------------------------------------
 * Mobile typography — the legacy sheet sized body copy with min(3.5vmin,3em),
 * so paragraphs rendered huge on phones (a single one filled the screen). Bring
 * them to a comfortable reading size; shortens the page substantially.
 * ------------------------------------------------------------------------- */
@media (max-aspect-ratio: 1/1) {
  .textAccC,
  .textAccC2 {
    font-size: clamp(1rem, 4vw, 1.15rem) !important;
    line-height: 1.65 !important;
  }
  .textAccL,
  .textAccLBottom,
  .textAccR,
  .textAccLEA,
  .textAccLEABis {
    font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
    line-height: 1.6 !important;
  }
  #sectionTitreSpan,
  #sectionTitreSpan2 {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
  }
  /* Hero scroll cue is redundant on touch + was overlapping the next section. */
  .hero-scrollcue { display: none !important; }
}

/* ============================================================================
 * 24. Fixes after the <span> → <h1>/<h2> heading conversion + layout polish.
 * ========================================================================= */
/* <h1> carries a UA default font-size:2em that DOUBLED the inherited hero size
   (147px!). Reset to inherit so the title is EXACTLY its original size again. */
#mainTitle {
  font-size: inherit !important;
}
/* Hero illustration: nudge it further LEFT so its right-edge "peek" no longer
   overlaps the hero sub-title (legacy left:-80em let the dots reach into the
   copy). Desktop only — mobile hides #imgHome. */
#imgHome {
  left: -84em !important;
}
/* CTA title: as an inline <span> it was centred and its clipped texture mapped
   to the text; as a block <h2> it went hard-left and the texture flattened.
   Centre the section + make the title inline-block so the moving texture maps
   to the glyphs again. */
#section2div {
  text-align: center !important;
}
#section3div {
  display: inline-block !important;
}
/* "Managing team" heading was an inline <a> (centred); keep it centred as <h2>. */
#teamTitle {
  display: inline-block !important;
}
/* Navy quote → AI section seam was too compact (the quote author sat right on
   the boundary). Give both sides room to breathe. */
#section1div {
  padding-bottom: clamp(4.5rem, 10vh, 8rem) !important;
}
#useIA {
  padding-top: clamp(3.5rem, 8vh, 6rem) !important;
}

/* ============================================================================
 * 25. Mobile layout pass — the legacy mobile sheet left big voids (hero 80vh,
 *     50%/15vh section margins), 17 stacked cards with 5em gaps, edge-hugging
 *     process steps, and an absolute AI image overlapping the logos. Clean it.
 * ========================================================================= */
@media (max-aspect-ratio: 1/1) {
  /* Calmer inter-section rhythm. */
  :root {
    --section-gap: clamp(2.75rem, 7vh, 4.25rem);
  }

  /* Hero owns the FULL first screen so the next section (key figures) never
     peeks in under it on load. min-height = the scroller's visible height
     (100dvh − the ~59px mobile header); dvh tracks the live viewport as the
     browser toolbar shows/hides, with a vh fallback for older engines. Content
     is centred — enough breathing room without the old cavernous void. */
  #homeTitle {
    /* border-box so the min-height INCLUDES the padding (the legacy sheet left
       this content-box → 785 + 72px padding = 857, overflowing the fold). */
    box-sizing: border-box !important;
    min-height: calc(100vh - 59px) !important; /* fallback (older engines) */
    min-height: calc(100dvh - 59px) !important; /* tracks the live viewport */
    /* Column + justify-content:center vertically centres the title+CTA group.
       (The legacy sheet forced row-wrap, so justify-content only centred on the
       horizontal axis → content packed at the top with a void underneath.) */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding-top: clamp(1rem, 4vh, 2rem) !important;
    padding-bottom: clamp(1.5rem, 5vh, 2.5rem) !important;
    margin-top: 0 !important;
  }
  #imgHome {
    display: none !important; /* the half-off-screen peek is awkward on phones */
  }
  /* Legacy mobile pushed the hero title 3em below the eyebrow → tighten. */
  #sectionTitre {
    margin-top: 0.5em !important;
  }

  /* Realizations → horizontal swipe carousel (cleaner than 17 stacked cards).
     Legacy `.sectionL{width:auto}` let the rail expand to its content width
     (~5600px) so overflow-x had nothing to clip → constrain to the viewport. */
  #scrollDiv {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--section-gap) !important;
  }
  #scrollDiv .imageCDivRealization {
    width: 100% !important;
    max-width: 100% !important;
  }
  .rea-rail {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0 1.5rem !important;
  }
  .rea-rail::-webkit-scrollbar {
    display: none;
  }
  #realizationDiv {
    flex-direction: row !important;
    width: max-content !important;
    margin: 0 !important;
    gap: 1rem !important;
    padding-inline: 5vw !important;
    align-items: stretch !important;
  }
  #realizationDiv .realization {
    flex: 0 0 80vw !important;
    width: 80vw !important;
    max-width: 340px !important;
    /* Height auto: the media keeps the SVG aspect ratio (below) and the body is
       line-clamped, so cards stay ~equal — the rail's align-items:stretch then
       equalises them exactly into one harmonious row. */
    height: auto !important;
    margin: 0 !important;
    scroll-snap-align: center;
  }
  /* Media KEEPS the SVG's 16:9 (viewBox 800×450) aspect ratio → it grows in
     height with the card width, showing the whole illustration with no crop and
     no white letterbox. More elegant than a fixed slice. Title ≤2 lines, text
     capped at 3 lines (full text in the tap modal), foot pinned to the bottom. */
  #realizationDiv .rcard__media {
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
  }
  #realizationDiv .rcard__title {
    font-size: 1.06rem !important;
  }
  #realizationDiv .rcard__text {
    -webkit-line-clamp: 3 !important;
  }

  /* --- Réalisations: animate the card illustrations on mobile ----------------
     The mobile carousel is a native horizontal swipe (no :hover, no .rea-on
     focus), so the desktop ra-* triggers never fire. Re-attach the SAME
     keyframes here, gated on .m-in (added per card by setupMobileReveals'
     IntersectionObserver) so a card only animates once it has scrolled into
     view. Keyframes (raSpin..raGauge) and the prefers-reduced-motion guard
     (`animation: none !important`) are top-level, so they already apply. */
  .m-reveal-on .realization.m-in .rcard__media svg .ra-spin {
    transform-box: fill-box; transform-origin: center;
    animation: raSpin 7s linear infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-spin-rev {
    transform-box: fill-box; transform-origin: center;
    animation: raSpin 9s linear infinite reverse;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-pulse {
    transform-box: fill-box; transform-origin: center;
    animation: raPulse 2.4s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-twinkle {
    transform-box: fill-box; transform-origin: center;
    animation: raTwinkle 2.2s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-twinkle:nth-of-type(2n) { animation-delay: 0.45s; }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-twinkle:nth-of-type(3n) { animation-delay: 0.9s; }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-draw {
    stroke-dasharray: 1;
    animation: raDraw 3.6s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-rise {
    transform-box: fill-box; transform-origin: center bottom;
    animation: raRise 2.6s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-rise:nth-of-type(2n) { animation-delay: 0.3s; }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-rise:nth-of-type(3n) { animation-delay: 0.6s; }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-flow {
    animation: raFlow 3.2s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-swing {
    transform-box: fill-box; transform-origin: top center;
    animation: raSwing 2.6s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-flash {
    animation: raFlash 1.7s ease-in-out infinite;
  }
  .m-reveal-on .realization.m-in .rcard__media svg .ra-gauge {
    transform-box: fill-box; transform-origin: 0% 100%;
    animation: raGauge 3.6s ease-in-out infinite;
  }

  /* Process: centre the stacked steps (were crammed against the left edge). */
  .process {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
  .process__steps {
    gap: 1.8rem !important;
  }
  .step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* AI section: the absolute dot-portrait overlapped the logos → put it in flow. */
  #useIA {
    margin-bottom: var(--section-gap) !important;
  }
  #imgIA {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 78% !important;
    max-width: 340px !important;
    margin: clamp(1.5rem, 4vh, 2.5rem) auto 0 !important;
    display: block;
  }
  #imageuseIA {
    margin-top: clamp(1.5rem, 4vh, 2.5rem) !important;
  }

  /* Trim the legacy oversized section margins/padding. */
  #section1div {
    margin-top: var(--section-gap) !important;
    padding-top: clamp(2.5rem, 8vh, 4rem) !important;
    padding-bottom: clamp(2.5rem, 8vh, 4rem) !important;
  }
  #section2div {
    margin-top: var(--section-gap) !important;
    padding-top: clamp(2rem, 6vh, 3.5rem) !important;
  }
  #mapSection {
    margin-top: var(--section-gap) !important;
  }
  .sectionC {
    margin-top: var(--section-gap) !important;
    margin-bottom: var(--section-gap) !important;
  }

  /* Mobile scroll-reveal (set by setupMobileReveals). */
  .m-reveal-on .m-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m-reveal-on .m-reveal.m-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-reveal-on .m-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================================
 * 26. Mobile UI/UX correction pass (authoritative — last in the cascade).
 *
 *     The earlier mobile work left several regressions, all fixed here:
 *       - .stats bled ~48px past the viewport (no border-box) → cards clipped.
 *       - #mapSection was a ~930px near-empty navy void with a tiny globe
 *         scrap pinned bottom-right (desktop "2× taller band" rule leaking in).
 *       - #useIA inherited the legacy 15%/10% left-skewed padding → text shoved
 *         right with dead space under it.
 *       - The "learn more" CTA stack had cavernous legacy gaps.
 *       - The footer rendered as invisible WHITE text on a TRANSPARENT band:
 *         §5 hid #bgEnd (which painted the band) but the mobile sheet never
 *         gave #ml_cgv its own fill, unlike the desktop sheet.
 * ========================================================================= */
@media (max-aspect-ratio: 1/1) {
  /* Hard guard: a phone never scrolls or zooms sideways. */
  #Accueil { overflow-x: hidden !important; }

  /* Hide the internal scroller's vertical scrollbar on mobile (scroll stays
     fully live — touch + overflow-y unaffected), mirroring .rea-rail. */
  #Accueil {
    scrollbar-width: none !important;       /* Firefox */
    -ms-overflow-style: none !important;    /* old Edge / IE */
  }
  #Accueil::-webkit-scrollbar {
    display: none !important;               /* Chrome / Safari / Blink */
  }

  /* The new full-bleed sections size with padding boxes; make 100% width
     include padding so a full-width section can never exceed the viewport. */
  .stats,
  .services,
  .process,
  .stats__grid,
  .services__grid,
  .process__steps,
  .process__inner {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* --- Stats: one clean column of edge-to-edge cards that actually fit. ----- */
  .stats {
    width: 100% !important;
    padding-inline: clamp(1.1rem, 5vw, 1.6rem) !important;
  }
  .stats__grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
    width: 100% !important;
    max-width: 460px !important;
    margin-inline: auto !important;
  }
  .stat {
    padding: clamp(1.25rem, 5vw, 1.7rem) 1rem !important;
  }

  /* --- Global reach (like desktop): a LARGE globe bleeding off the right edge,
         sitting BEHIND the copy — not a small centred scrap. The webp's dark
         backdrop + legacy grey #888 glow are erased by `screen` (only the
         luminous globe survives over the navy). ------------------------------- */
  #mapSection {
    min-height: 27rem !important; /* room to reveal the bleeding globe */
    flex-shrink: 0 !important;
    padding-top: clamp(3rem, 9vh, 5rem) !important;
    padding-bottom: clamp(2rem, 6vh, 3.2rem) !important;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%) !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important; /* clip the bleed */
  }
  /* Copy floats above the globe. */
  #mapSection .eyebrow,
  #mapSection .pageTitle2,
  #mapSection .textAccC2 {
    position: relative !important;
    z-index: 1 !important;
  }
  #mapSection .textAccC2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 90% !important; /* wider → fewer line breaks, less cramped */
  }
  #bg {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    display: block !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
  }
  #world-map {
    position: absolute !important;
    right: -20% !important; /* bleed past the right edge, like desktop */
    bottom: -16% !important; /* sit LOWER so the copy reads on clean navy */
    top: auto !important;
    left: auto !important;
    width: min(86%, 360px) !important; /* a touch smaller */
    opacity: 0.85 !important;
    filter: none !important;
    mix-blend-mode: screen !important;
  }

  /* --- AI section: balance the legacy 15%/10% skew + remove the trailing void. */
  #useIA {
    padding-left: clamp(1.4rem, 6vw, 2.4rem) !important;
    padding-right: clamp(1.4rem, 6vw, 2.4rem) !important;
    padding-top: clamp(3rem, 8vh, 5rem) !important;
  }
  #imageuseIA {
    margin-top: clamp(1.5rem, 4vh, 2.4rem) !important;
  }

  /* --- "Want to learn more?" CTA: stack the two action buttons (side-by-side
         they overflowed the viewport — the white "contact form" pill bled off
         the right edge) and tighten the cavernous legacy gaps. ---------------- */
  #section2div {
    padding-bottom: clamp(2rem, 6vh, 3.5rem) !important;
  }
  #section2div .abonnement {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0.85rem !important;
    margin-top: clamp(1.2rem, 3vh, 1.8rem) !important;
    margin-bottom: clamp(1.2rem, 3vh, 1.8rem) !important;
  }
  #section2div .abonnement .button {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
  }
  #section2div .divTextAcc {
    padding-top: clamp(0.6rem, 2vh, 1.2rem) !important;
    padding-bottom: clamp(0.6rem, 2vh, 1.2rem) !important;
  }
  /* The closing CTA title carried a 3rem padding-bottom from the global rule;
     trim it so "Want to learn more?" sits closer to the contact cluster. */
  #section2div #section3div {
    padding-bottom: clamp(1rem, 3vh, 1.8rem) !important;
  }

  /* --- "See more" tile sizes like a slim card in the mobile swipe rail. ----- */
  .rcard--more {
    flex: 0 0 56vw !important;
    width: 56vw !important;
    max-width: 250px !important;
    min-height: 430px !important;
    scroll-snap-align: center;
  }

  /* --- Footer: restore the band fill the desktop sheet has (the mobile sheet
         left #ml_cgv transparent → white text vanished on the light page). ---- */
  #ml_cgv {
    background-color: var(--backgroundColor) !important;
    padding-top: clamp(4rem, 14vh, 8rem) !important;
    padding-bottom: clamp(3rem, 9vh, 6rem) !important;
  }
}

/* ============================================================================
 * 27. Contact section + contact-form & legal modals — premium pass.
 * ========================================================================= */
#section2div { padding-bottom: clamp(2.5rem, 6vh, 4rem) !important; }
#section2div .divTextAcc {
  padding-top: clamp(0.4rem, 1.5vh, 1rem) !important;
  padding-bottom: clamp(1.6rem, 4vh, 2.6rem) !important;
}
#section2div .textAccL {
  max-width: 54ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
#section2div .abonnement { margin-top: 0 !important; }
#section2div + .sectionC { margin-top: clamp(2rem, 5vh, 3.2rem) !important; }

/* Networks: refined circular icon chips (were raw 70px navy glyphs). */
#Contact {
  gap: clamp(0.8rem, 2vw, 1.3rem) !important;
  margin-top: clamp(1.4rem, 4vh, 2.2rem) !important;
}
#contactTittle {
  width: 100% !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin-bottom: clamp(1rem, 2.5vh, 1.6rem) !important;
}
#Contact > a:not(#contactTittle) {
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(16, 35, 70, 0.06) !important;
  -webkit-text-fill-color: initial !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#Contact > a:not(#contactTittle):hover {
  transform: translateY(-5px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 16px 32px rgba(16, 35, 70, 0.16) !important;
}
#Contact svg { width: 22px !important; height: 22px !important; fill: var(--navy) !important; }
#Contact svg path { fill: var(--navy) !important; }
#Contact > a:not(#contactTittle):hover svg,
#Contact > a:not(#contactTittle):hover svg path { fill: var(--accent) !important; }

/* Shared modal overlay (contact + legal): dim + blur scrim, centered. */
.contact-overlay,
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(8, 15, 30, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.legalfade-enter-active,
.legalfade-leave-active { transition: opacity 0.3s ease; }
.legalfade-enter-active .contact-modal,
.legalfade-enter-active .legal-modal,
.legalfade-leave-active .contact-modal,
.legalfade-leave-active .legal-modal {
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.legalfade-enter-from,
.legalfade-leave-to { opacity: 0; }
.legalfade-enter-from .contact-modal,
.legalfade-enter-from .legal-modal,
.legalfade-leave-to .contact-modal,
.legalfade-leave-to .legal-modal {
  transform: translateY(26px) scale(0.98);
  opacity: 0;
}

/* Contact form modal — full override of the legacy dark #contact-box. */
#contact-box.contact-modal {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(92vw, 480px) !important;
  height: auto !important;
  max-height: 88vh !important;
  margin: 0 !important;
  padding: clamp(1.8rem, 4.5vw, 2.7rem) !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  box-shadow: 0 40px 90px rgba(8, 15, 30, 0.4) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
}
.contact-modal__title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.35rem 0 1.4rem;
}
.contact-modal__close,
.legal-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.contact-modal__close:hover,
.legal-modal__close:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
  transform: rotate(90deg);
}

.contact-form .form-group { margin-bottom: 1.1rem; }
.contact-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: var(--ink);
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 208, 0.15);
}
.contact-form__submit {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.95rem 1.4rem !important;
  font-size: 1rem !important;
  font-weight: 600;
  color: #ffffff !important;
  background: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(15, 26, 46, 0.22);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, box-shadow 0.25s ease !important;
}
.contact-form__submit:hover {
  background: var(--navy-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 26, 46, 0.3);
}
.contact-modal__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink);
}
.contact-modal__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}
.contact-modal__state--ok .contact-modal__badge { background: #1f9d6b; }
.contact-modal__state--err .contact-modal__badge { background: #d9534f; }
.contact-modal__spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: contactSpin 0.8s linear infinite;
}
@keyframes contactSpin { to { transform: rotate(360deg); } }

/* Legal / privacy modal — clean readable document. */
.legal-modal {
  position: relative;
  width: min(94vw, 760px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(8, 15, 30, 0.4);
  overflow: hidden;
}
.legal-modal__head {
  position: relative;
  flex: 0 0 auto;
  padding: clamp(1.5rem, 4vw, 2.2rem) clamp(1.5rem, 5vw, 3rem) clamp(1.1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfcfe, #ffffff);
}
.legal-modal__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #2f6fd0, #6a4bd0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.4rem;
}
.legal-modal__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 5vw, 2.6rem);
}
.legal-modal__intro {
  margin: 0 0 1.8rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-block { margin-bottom: 1.7rem; }
.legal-block__h {
  margin: 0 0 0.6rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal-block__p {
  margin: 0 0 0.6rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: rgba(15, 26, 46, 0.78);
}
.legal-modal__updated {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}
.legal-modal__body::-webkit-scrollbar { width: 10px; }
.legal-modal__body::-webkit-scrollbar-thumb {
  background: rgba(15, 26, 46, 0.18);
  border-radius: 10px;
  border: 3px solid #ffffff;
}

/* Modals on small screens: near-full-bleed bottom sheets. */
@media (max-aspect-ratio: 1/1) {
  .contact-overlay,
  .legal-overlay { padding: 0.7rem; align-items: flex-end; }
  #contact-box.contact-modal {
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 22px !important;
  }
  .legal-modal { width: 100%; max-height: 92vh; border-radius: 22px; }
}

/* Legal modal: company identity card + bullet lists. */
.legal-identity {
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: #f7f9fc;
}
.legal-identity__name {
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.legal-identity__line {
  margin: 0.15rem 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(15, 26, 46, 0.78);
}
.legal-block__list {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  list-style: none;
}
.legal-block__list li {
  position: relative;
  margin: 0 0 0.7rem;
  padding-left: 0.9rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(15, 26, 46, 0.78);
}
.legal-block__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5ea2ff, #9d8bff);
}

/* Wrapper around the AI orb + tool logos. `display:contents` makes it invisible
   to layout on desktop, so the orb keeps its existing absolute placement; mobile
   (§27) turns it into a grid that stacks the orb BEHIND the logo tiles. */
.ai-stack {
  display: contents;
}

/* ============================================================================
 * 27. Mobile density pass (authoritative — last in the cascade). The page ran
 *     ~14 phone-screens tall: the logo walls were one full-width tile per row
 *     and the key figures a 4-tall single column. Compact them into grids and
 *     tighten the inter-section gaps. Also melt the AI orb's light backdrop into
 *     the paper (the navy globe is handled up in §25).
 * ========================================================================= */
@media (max-aspect-ratio: 1/1) {
  /* Calmer, tighter section rhythm. */
  :root {
    --section-gap: clamp(2rem, 5vh, 3.25rem);
  }

  /* Logo walls → compact 3-column grid (centred, equal-height tiles) instead of
     a 1-per-row tower. 6 tech logos: 6 rows → 2 rows; 5 AI logos: → 2 rows. */
  #expertiseFields .imageCDiv,
  #imageuseIA {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.55rem !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #expertiseFields .imageCDiv .imgDiv,
  #imageuseIA .imgDivIA {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.65em 0.4em !important;
  }
  #expertiseFields .imageCDiv .imageC,
  #imageuseIA .imageC2 {
    width: 100% !important;
    height: 30px !important;
    object-fit: contain !important;
  }
  .tech-caption {
    margin-top: clamp(1.4rem, 4vh, 2.2rem) !important;
  }

  /* Key figures → 2 columns. */
  .stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 460px !important;
    gap: 0.7rem !important;
  }

  /* AI section (like desktop): the orb sits BEHIND the tool tiles, not stacked
     above them. .ai-stack becomes a 1-cell grid; the orb and the logo grid share
     that cell → the orb is the backdrop, the white tiles float on top. */
  .ai-stack {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    margin-top: clamp(1.4rem, 4vh, 2.4rem) !important;
  }
  .ai-stack > #imgIA,
  .ai-stack > #imageuseIA {
    grid-area: 1 / 1 !important; /* stack both in the same cell */
  }
  #imgIA {
    position: static !important;
    width: min(104%, 420px) !important; /* a touch wider → bleeds past the tiles */
    max-width: none !important;
    margin: 0 !important;
    opacity: 0.55 !important;
    z-index: 0 !important;
    mix-blend-mode: multiply !important;
  }
  #imageuseIA {
    position: relative !important;
    z-index: 1 !important;
    align-self: center !important;
  }

  /* Pillars → 2 columns (4 stacked → 2 rows). Compact centred icon cards. */
  .pillars__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
  }
  .pillar {
    text-align: center !important;
    padding: 1rem 0.7rem !important;
  }
  .pillar__title {
    font-size: 1rem !important;
  }

  /* Capabilities → 2 columns (6 stacked → 3 rows). */
  .services__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  .service {
    padding: 1rem 0.85rem !important;
  }
  .service__title {
    font-size: 1rem !important;
    margin: 0.35rem 0 !important;
  }
  .service__desc {
    font-size: 0.86rem !important;
  }

  /* Team: the stacked cards had a cavernous 120px row-gap → normalise it, and
     cap the card width so two short cards don't tower. */
  .team-grid {
    gap: clamp(1.6rem, 5vh, 2.6rem) !important;
  }

  /* Trim the oversized vertical paddings that padded the page out by whole
     screens (process / global-reach / trust / quote / CTA all had 64–76px top
     AND bottom). One calmer, consistent value. */
  .process,
  #mapSection,
  .trust,
  #section1div,
  #section2div,
  #useIA,
  #aboutUsDiv {
    padding-top: clamp(2.2rem, 6vh, 3.2rem) !important;
    padding-bottom: clamp(2.2rem, 6vh, 3.2rem) !important;
  }
}

/* ============================================================================
 * 28. Mobile: consistent side gutter for section titles. Some sections sat at
 *     0–24px horizontally (the pillars title even touched the edge) while others
 *     had ~39px → titles read as "glued to the edge". Unify the tight ones to a
 *     comfortable, consistent gutter (~30px). Full-bleed bands and the swipe
 *     carousel rail are intentionally NOT included (they bleed edge-to-edge).
 * ========================================================================= */
@media (max-aspect-ratio: 1/1) {
  #expertiseFields,
  .stats,
  .services,
  .process,
  #useIA,
  .rea-head {
    /* border-box so the gutter sits INSIDE width:100% (content-box would add it
       on top → the section overflows and re-centres, dragging the title back to
       the edge — exactly what happened to #expertiseFields). */
    box-sizing: border-box !important;
    padding-left: clamp(1.7rem, 7.5vw, 2.4rem) !important;
    padding-right: clamp(1.7rem, 7.5vw, 2.4rem) !important;
  }
}