/* Visual corrections of 2026-09-28. Hooks are added at build time by
   scripts/visual_changes.py; everything else reuses the theme components. */

/* Desktop menu (>=1200px): the theme's fixed 60px gap made the items
   (with "Academy", "Our Work & References" and the EN | FR switcher) wrap
   onto two lines. Same menu, fluid gap: 28px max in English, 20px in French
   (« Réalisations & Références », « Accueil » and « Nous contacter » are
   wider). Below 1410px (where the header container stops growing) the
   header's 30px spacing around the menu becomes 18px and the French links
   use 15px; below 1280px the links use 15px (14px in French; line height kept
   at 24px so the header keeps its height), the spacing
   around the menu is 8px and the "Get in Touch" button loses 10px of right
   padding, so the items keep a 9-10px gap. These are the smallest
   adjustments that keep one line in both languages. */
@media (min-width: 1200px) {
  .nm-main-navigation #main-nav { gap: clamp(4px, calc((100vw - 1190px) / 7.5), 28px); }
  html[lang="fr"] .nm-main-navigation #main-nav { gap: clamp(4px, calc((100vw - 1210px) / 7), 20px); }
}
@media (min-width: 1200px) and (max-width: 1409px) {
  .nm-header-1-wrap { gap: 18px; }
  html[lang="fr"] .nm-main-navigation #main-nav > li > a { font-size: 15px; line-height: 24px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .nm-header-1-wrap { gap: 8px; }
  .nm-header-1-action-link .nm-pr-btn-1 { padding-right: 20px; }
  .nm-main-navigation #main-nav { gap: 10px; }
  .nm-main-navigation #main-nav > li > a { font-size: 15px; line-height: 24px; }
  html[lang="fr"] .nm-main-navigation #main-nav { gap: 9px; }
  html[lang="fr"] .nm-main-navigation #main-nav > li > a { font-size: 14px; line-height: 24px; }
}

/* Language selector (scripts/i18n.py switcher(), public/lang-switcher.js):
   [globe] EN [chevron] opening a compact dark list (flag, native name, check
   on the current language). Last item of the desktop menu; in the header bar
   on tablet; in the drawer on phones. */
.lm-lang { position: relative; }
.lm-lang-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; list-style: none; cursor: pointer; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1; user-select: none; transition: color .2s; }
.lm-lang-toggle::-webkit-details-marker { display: none; }
.lm-lang-toggle::marker { content: ""; }
.lm-lang-toggle:hover, .lm-lang[open] > .lm-lang-toggle { color: #fff; }
.lm-lang-toggle:focus-visible { outline: 2px solid var(--nm-clr-pr-1, #66FF63); outline-offset: 4px; border-radius: 6px; }
.lm-lang-toggle .fa-globe { font-size: 14px; }
.lm-lang-chevron { font-size: 9px; opacity: .6; transition: transform .25s; }
.lm-lang[open] .lm-lang-chevron { transform: rotate(180deg); }
.lm-lang-menu { position: absolute; top: calc(100% + 12px); right: -8px; z-index: 30; min-width: 184px; padding: 6px; display: grid; gap: 2px; background: #141414; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.lm-lang[open] .lm-lang-menu { animation: lmLangIn .18s ease-out; }
@keyframes lmLangIn { from { opacity: 0; transform: translateY(-4px); } }
.lm-lang-menu .lm-lang-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.lm-lang-menu .lm-lang-link:hover, .lm-lang-menu .lm-lang-link:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; outline: none; }
.lm-lang-menu .lm-lang-link.is-active { color: #fff; }
.lm-lang-flag { font-size: 16px; line-height: 1; }
.lm-lang-check { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--nm-clr-pr-1, #66FF63); visibility: hidden; }
.lm-lang-link.is-active .lm-lang-check { visibility: visible; }
.nm-main-navigation #main-nav > .lm-lang-item { display: flex; align-items: center; }
/* Inside the desktop menu the list items are not menu links (no 35px padding). */
.nm-main-navigation #main-nav .lm-lang-menu .lm-lang-link { padding: 10px 12px; font-size: 14px; line-height: 1.2; }
/* Tablet header bar only (the desktop menu and the phone drawer carry their own). */
.lm-lang-header { display: none; }
@media (min-width: 768px) and (max-width: 1199px) {
  .nm-header-1-action-link > .lm-lang-header { display: flex; align-items: center; }
  .lm-lang-header .lm-lang-toggle { min-height: 44px; font-size: 14px; }
}
/* Drawer: a full-width row, the list opens in place. The drawer's link rules
   (18px, white, 44px right padding for the submenu arrows) do not apply. */
.mobile-main-navigation .lm-lang-item .lm-lang-toggle { min-height: 52px; font-size: 15px; gap: 8px; }
.mobile-main-navigation .lm-lang-item .lm-lang-menu { position: static; min-width: 0; margin: 0 0 12px; background: rgba(255, 255, 255, .03); box-shadow: none; }
.wa-offcanvas-area .mobile-main-navigation .lm-lang-item .lm-lang-link { padding: 12px; font-size: 15px; white-space: nowrap; color: rgba(255, 255, 255, .72) !important; }
.wa-offcanvas-area .mobile-main-navigation .lm-lang-item .lm-lang-link.is-active { color: #fff !important; }
/* The drawer capitalises every word (an English title-case convention):
   French menu labels keep their own capitalisation ("Pour les professionnels"). */
html[lang="fr"] .wa-offcanvas-area .mobile-main-navigation a { text-transform: none; }

/* Homepage hero mascot, desktop (>=1200px; mobile: responsive-fixes.css).
   Tablet (768-1199px: theme 62% width, bottom-anchored) is the approved
   reference and is not touched.
   Same logic here: anchored to the hero bottom, height tied to the hero
   (86%) and capped by the viewport width (57vw tall = about 38vw wide), so
   it no longer rises behind the header (1280-1440px) nor floats or gets cut
   (1600-1920px). The theme's 14vw right offset, entrance and colour overlay
   (second image) are kept. */
@media (min-width: 1200px) {
  .nm-hero-1-main-img { align-items: flex-end; }
  .nm-hero-1-main-img img { width: auto; height: min(86%, 57vw); max-width: none; object-fit: contain; }
  .nm-hero-1-main-img img:nth-child(2) { top: auto; bottom: 0; }
}

/* Homepage partner strip: every logo of the owner's ZIP in colour, on two
   rows (theme marquee, left and right). Logos share one visual size; the
   theme's hover roll (three stacked copies) and edge mask are unchanged. */
section.lm-partner-strip { margin-bottom: 0 !important; }  /* the theme's 80px mb-80 left an empty dark band */
.lm-partner-rows { display: grid; gap: 30px; flex: 1 1 auto; min-width: 0; width: 100%; }
.lm-partner-rows .nm-partner-1-logo img { display: block; width: auto; height: auto; }
.lm-partner-rows .lm-logo-square img { max-width: 66px; max-height: 66px; }
.lm-partner-rows .lm-logo-mid img { max-width: 150px; max-height: 54px; }
.lm-partner-rows .lm-logo-wide img { max-width: 180px; max-height: 44px; }
@media (max-width: 767px) {
  .lm-partner-rows { gap: 22px; }
  .lm-partner-rows .lm-logo-square img { max-width: 50px; max-height: 50px; }
  .lm-partner-rows .lm-logo-mid img { max-width: 112px; max-height: 42px; }
  .lm-partner-rows .lm-logo-wide img { max-width: 136px; max-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-partner-rows .js-marquee-wrapper { animation-play-state: paused !important; }
}

/* Homepage LeadMagnet Academy section (was Our Journey). The card images
   are approved Academy photos (content/academy/images.json). Until they
   exist, each card shows a typographic cover: the step word in the site's
   display type over a dark, softly lit background. No fake interface and no
   other site image. Same card-img box, radius and hover overlay. */
.lm-academy-cover {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(70% 95% at 90% 0%, rgba(102, 255, 99, .17), rgba(102, 255, 99, 0) 62%),
    radial-gradient(55% 70% at 0% 100%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 65%),
    linear-gradient(155deg, #111712 0%, #050706 58%, #000 100%);
}
.lm-academy-cover::before {
  content: ""; position: absolute; left: 34px; right: 34px; top: 34px; height: 1px;
  background: linear-gradient(90deg, rgba(102, 255, 99, .7), rgba(102, 255, 99, 0) 55%);
}
.lm-academy-cover-num { display: none; }
.lm-academy-cover-word {
  position: absolute; left: 28px; bottom: -.14em; white-space: nowrap;
  font-family: var(--nm-font-1, var(--nm-font-2)); font-size: clamp(84px, 10.5vw, 158px); font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .26);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 85%); -webkit-background-clip: text; background-clip: text;
}
@media (max-width: 767px) {
  .lm-academy-cover::before { left: 24px; right: 24px; top: 26px; }
  .lm-academy-cover-word { left: 20px; font-size: 26vw; }
}
/* French words (APPRENDRE, CONSTRUIRE, PROGRESSER) are twice as long as the
   English ones and were cut by the card edge: same style, sized to the card. */
html[lang="fr"] .lm-academy-cover { container-type: inline-size; }
html[lang="fr"] .lm-academy-cover-word { font-size: min(clamp(84px, 10.5vw, 158px), 14.5cqi); }
@media (max-width: 767px) {
  html[lang="fr"] .lm-academy-cover-word { font-size: min(26vw, 14.5cqi); }
}

/* Main LeadMagnet black, the value the Solution pages' section 2 uses
   (Elementor .tx-section #000000). Replaces #020202, #0E0E0E and the
   green-tinted #010C07 of Our Journey. Depth stays with cards, borders,
   images and the subtle grid texture. */
section.lm-bg-black { background-color: #000 !important; }

/* Service pages: black fills the whole viewport. The Elementor containers
   around each section lose their 10px padding so sections run edge to edge
   with no grey strip between them. */
body.lm-black-page { background-color: #000 !important; }
.lm-full-bleed {
  padding: 0 !important;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --content-width: 100%;
  /* Containers stacking several sections (homepage) put a 20px gap between them. */
  gap: 0 !important;
  --gap: 0px; --row-gap: 0px;
}
/* Boxed containers (Creative Production hero) cap their inner box at 1168px. */
.e-con-inner.lm-full-bleed { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* About, Contact, Blog, Realisations: the first section starts at the top
   (its background runs behind the floating menu, no empty band) and its
   content starts 60px below the menu, as on the service pages. Menu bottom:
   151px (>=1200), 142px (768-1199), 132px (mobile). */
.lm-absorbed-spacer { display: none !important; }
section.lm-menu-clear { margin-top: 0 !important; padding-top: 211px !important; }
@media (max-width: 1199px) { section.lm-menu-clear { padding-top: 202px !important; } }
@media (max-width: 767px) { section.lm-menu-clear { padding-top: 192px !important; } }
/* Realisations: fine from 992px (pinned layout); below, its content sits
   14px inside the section and the label went under the menu. */
@media (max-width: 991px) { section.lm-menu-clear-mobile { padding-top: 188px !important; } }
@media (max-width: 767px) { section.lm-menu-clear-mobile { padding-top: 178px !important; } }

/* Homepage: room between the Our Realisations cards and the overlapping
   "Have a Podcast?" CTA (theme section spacing, pb-100). */
section.lm-space-before-cta { padding-bottom: 100px !important; }

/* Homepage They Trusted Us: card numbers as in the Brand page's
   "Brand Architecture Framework" (same nm-choose-2 component). */
section.lm-choose-numbers .nm-choose-2-card .number { color: var(--e-global-color-primary, #66FF63); }

/* Homepage Our Solutions cards: same colour logic as the Solution pages'
   section 2 (title in the primary green, description #A2A2A2). */
section.lm-solutions-cards .nm-services-2-card :is(.nm-h-2, .card-title, .card-title a) {
  color: var(--e-global-color-primary, #66FF63) !important;
}

/* Eyebrow dot: services use .nm-subtitle-2 .icon, rendered as a dot by
   responsive-fixes.css. Give it the glow of the Latest Insights
   .nm-subtitle-1 .dot so both label types read as one system. */
.nm-subtitle-2 .icon { box-shadow: 0 3px 5.52px 0.48px rgba(214, 243, 69, 0.46); }
/* Label entrance: the theme's waRotateX keyframes (Latest Insights), started
   by visual-fixes.js when the label enters the viewport. Hidden only once
   that script is running, so labels never disappear if JS fails. */
.lm-entrance { display: inline-block; }
.lm-entrance-ready .lm-entrance:not(.waRotateX) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  :is(.nm-subtitle-1, .nm-subtitle-2) .text:is(.wow, .lm-entrance) {
    animation: none !important;
    visibility: visible !important;
  }
  .wa_bg_position div { background-position-x: 0 !important; }
  .wa_parallax_shape_3 { transform: none !important; }
}

/* Homepage Our Realisations: real website captures; on phones keep the
   logo and headline (left part of the site) in the portrait crop. */
@media (max-width: 767px) { .lm-project-card img { object-position: 0% 50%; } }

/* Desktop submenus (Services, Solutions, Academy; visual_changes.fix_desktop_submenus).
   Compact dark panel under its menu item: one column, small line icon,
   existing title, arrow; subtle separators; green kept to the icons. Same
   hover logic as the theme (li:hover), so one submenu at a time. Desktop only:
   the mobile / tablet drawer is a separate menu (#m-main-nav). */
@media (min-width: 1200px) {
  .nm-main-navigation .navbar-nav > li > .dropdown-menu.lm-submenu {
    box-sizing: border-box; left: 50%; top: 100%; width: 360px; margin-top: 6px; padding: 8px;
    min-width: 0 !important;  /* the header's Elementor setting (post-1459.css) forces 387px */
    background: #0e1011; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
    backdrop-filter: none; opacity: 0; visibility: hidden;
    transform: translate(-50%, 8px) scale(.98); transform-origin: 50% 0;
    transition: opacity .18s ease, transform .24s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .24s;
  }
  .nm-main-navigation .navbar-nav > li:hover > .dropdown-menu.lm-submenu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s;
  }
  /* Small pointer toward the menu item, and an invisible bridge so the
     pointer can travel from the item to the panel without closing it. */
  .lm-submenu::before {
    content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px;
    background: #0e1011; border-top: 1px solid rgba(255, 255, 255, .08); border-left: 1px solid rgba(255, 255, 255, .08);
    border-radius: 3px 0 0 0; transform: translateX(-50%) rotate(45deg);
  }
  .lm-submenu::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nm-main-navigation .navbar-nav li:hover > .dropdown-menu.lm-submenu > li { animation: none; }
  .nm-main-navigation .navbar-nav .dropdown-menu.lm-submenu > li { position: relative; }
  .nm-main-navigation .navbar-nav .dropdown-menu.lm-submenu > li + li::before {
    content: ""; position: absolute; top: 0; left: 66px; right: 14px; height: 1px; background: rgba(255, 255, 255, .06);
  }
  .nm-main-navigation .navbar-nav .dropdown-menu.lm-submenu > li > a {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 9px 12px;
    border-radius: 12px; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: 0;
    color: rgba(255, 255, 255, .9); text-align: left; white-space: normal;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
  }
  .nm-main-navigation .navbar-nav .dropdown-menu.lm-submenu > li:hover > a {
    color: #fff; background: rgba(255, 255, 255, .045); transform: translateX(2px);
  }
  .lm-submenu .lm-sub-icon {
    flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 10px; background: #15181a; border: 1px solid rgba(255, 255, 255, .07);
    color: var(--nm-clr-pr-1, #66FF63); opacity: .82; transition: opacity .2s ease, border-color .2s ease;
  }
  .lm-submenu .lm-sub-glyph { width: 20px; height: 20px; }
  .lm-submenu .lm-sub-label { flex: 1 1 auto; min-width: 0; }
  .lm-submenu .lm-sub-arrow { flex: 0 0 18px; display: grid; place-items: center; color: rgba(255, 255, 255, .45); transition: transform .2s ease, color .2s ease; }
  .lm-submenu .lm-sub-chevron { width: 16px; height: 16px; }
  .lm-submenu > li:hover .lm-sub-icon { opacity: 1; border-color: rgba(102, 255, 99, .28); }
  .lm-submenu > li:hover .lm-sub-arrow { color: #fff; transform: translateX(3px); }
  .lm-submenu > li > a:focus-visible { outline: 2px solid var(--nm-clr-pr-1, #66FF63); outline-offset: -2px; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .nm-main-navigation .navbar-nav > li > .dropdown-menu.lm-submenu { transition: none; transform: translate(-50%, 0); }
}

/* Endless decorative animations out of view (public/motion-perf.js): paused
   until they come back on screen; on screen, the theme's rules apply. */
.lm-offscreen, .lm-offscreen::before, .lm-offscreen::after { animation-play-state: paused !important; }