/* Milvue site additions on top of the mirrored theme CSS.
   Animation-ready foundation (per migration plan): motion tokens + reduced-motion
   guard. Kept intentionally minimal so the current look is unchanged. */

:root {
  --milvue-green: #44d62c;
  --milvue-teal: #21737c;
  --milvue-ink: #0e0f0e;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Header logo: white over the green hero, green on the white sticky bar ---
   The logo SVG is natively green. Over the green page/hero it must invert to
   white (else green-on-green = invisible); once the sticky bar turns white on
   scroll it shows its native green (perfect on white). The theme already does
   this; enforced explicitly here so it can never fall back to green-on-green
   regardless of cascade/JS timing. Applied to the <a> only (not the <img>) to
   avoid a double inversion. */
.header .custom-logo-link { filter: brightness(0) invert(1); }
.sticky .header .custom-logo-link { filter: none; }

/* --- Home hero responsive fix (<=1025px) -----------------------------------
   On desktop the "MILVUE / NEW TECH / NEW CARE" wordmark (.slogan) is an
   absolutely-positioned overlay tuned to land its green half on the dark X-ray.
   At tablet/mobile widths the theme stretches the same overlay full-bleed
   (width:calc(100% + Npx)), so the green half spills onto the green page
   background (invisible) and the wordmark collides with the photos in a cramped
   muddle that reads as "text overlapping itself".

   Fix: below 1025px, take the wordmark out of the overlay and stack the hero
   cleanly (wordmark on top, photos below). Render the wordmark solid white via
   the same brightness(0) invert(1) trick the theme already uses for the logo on
   the green sticky header, so green + white both stay legible on the green bg.
   Desktop (>1025px) is untouched — the canonical collage is preserved. */
@media (max-width: 1025px) {
  .banner .position-relative {
    display: flex;
    flex-direction: column;
  }
  .banner .slogan {
    order: 1;
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 460px;
    margin: 6px auto 18px;
    filter: brightness(0) invert(1);
  }
  .banner .banner__grid {
    order: 2;
    justify-content: center;
  }
}

/* --- Home magazine layout: repair the tablet/mobile flow (<=1025px) ---------
   The theme builds the home as a desktop magazine collage: each .mediatext
   module is pulled up with a large negative margin-top to overlap its
   neighbour, galleries are pushed off-axis with absolute deco shapes, and the
   publications / around-the-world blocks use absolute positioning. Below 1025px
   these desktop offsets are kept (the theme only reflows columns at <=768px and
   even then leaves the negative margins), so consecutive modules crash into
   each other: the Detection text lands on the TechCare paragraph, the Team
   heading collides with the detection galleries, decos overflow into the next
   section ("le texte s'empale dans la section en dessous", "milvue team avec
   detection"). Reset the offsets so the home flows in normal document order.
   Desktop (>1025px) is untouched. */
@media (max-width: 1025px) {
  /* stop every home module from pulling up into the one above */
  .mediatext.customhome { margin-top: 0 !important; }
  /* the white Milvue-Suite card reserved 377px below for a desktop image
     overlap that no longer happens once the pull is gone -> close the gap */
  .event { padding-bottom: 56px !important; }
  /* decorative circles/squares are positioned absolutely and overflow siblings */
  .mediatext.customhome .deco,
  .mediatext.m1 .media .deco,
  .galerie__item [class^="shapedeco"],
  .galerie__item .deco { display: none; }

  /* screenshot galleries: keep on-axis, no upward pull, no off-grid stagger */
  .galerie { right: auto; width: auto; margin-left: 0; }
  .galerie.home { margin-top: 0; margin-bottom: 40px; }
  .galerie__item:nth-of-type(3) { margin-top: 0; }

  /* publications: single column, image in normal flow */
  .posthome__content { grid-template-columns: auto; gap: 28px; }
  .posthome__content--img { position: static; bottom: auto; padding-top: 0; height: auto; }
  .posthome__content--desc { padding-top: 0; }

  /* "Milvue around the world": flow the absolutely-placed media + map */
  .mediatext.m1 { margin-bottom: 40px; }
  .mediatext.m1 h2,
  .mediatext.m1 .title { padding-left: 0; }
  .mediatext.m1 .media { position: relative; right: auto; width: auto; }
  .mediatext.m1 .texte { padding-bottom: 0; }
  .mediatext.m1 .map { position: static; margin: 24px 0; left: auto; max-width: 100%; }
}

/* --- Home magazine layout: desktop hybrid de-overlap (>1025px) --------------
   Operator decision 2026-05-30: keep the deliberate collage where it works (the
   hero), but clean up where it becomes unreadable. On the live site the
   detection screenshot galleries are pulled up (margin-top:-9%) and staggered
   (nth-child(3) margin-top:-30%) and the Team module is pulled up under them
   (margin-top:-220px), so the green "THE MILVUE TEAM" heading and its text end
   up buried under the detection screenshots ("milvue team avec detection").
   Target the Team module (the only customhome with a .lightfirst title) and the
   home galleries specifically -> stop them pulling into each other. The TechCare
   module's intended overlap with the white Milvue-Suite card is left alone, and
   the hero (.banner) is never touched. */
@media (min-width: 1025.1px) {
  /* galleries: drop the upward pull and the off-grid stagger that cause them to
     sit on top of the Detection text above and the Team heading below */
  .galerie.home { margin-top: 0; }
  .galerie.home .galerie__item:nth-of-type(3) { margin-top: 0; }
  /* the Team module must not pull up under the gallery above it */
  .mediatext.customhome:has(.title.lightfirst) { margin-top: 0; }
  /* the gallery deco circle is absolutely placed and can clip the Team heading */
  .galerie.home .galerie__item .deco { display: none; }
}

/* ===========================================================================
   QA AUDIT 2026-05-30 FIXES (docs/qa-audit-2026-05-30.md). Override only.
   =========================================================================== */

/* --- GROUP 2: header logo legible at rest, native green on the white sticky bar
   The header band is green (#44D62C) and the logo SVG is natively green, so it
   depends on a filter toggle that ties with the theme's own rule. Force it,
   body-scoped + :not(.sticky), so it can never fall back to green-on-green.
   (Nav links are already #fff at rest in the theme.) */
body .header:not(.sticky) .custom-logo-link { filter: brightness(0) invert(1); }
body .sticky .header .custom-logo-link { filter: none; }

/* --- GROUPS 3-4: text on STRONG-green (#44D62C) blocks must be white.
   The global body color is teal (#21737C); on green blocks whose body text has
   no explicit color it renders teal-on-green (~2.7:1, illegible). Scope ONLY to
   the strong-green blocks -- the pale-green #ebfbea blocks (.bg__primarylight)
   keep their dark text, and white cards nested inside green sections are left
   alone. */
.bg__primary.newsletter p,
.bg__primary.newsletter li { color: #fff; }
.mosaique__content--item.customblock .texte,
.mosaique__content--item.customblock .texte p,
.mosaique__content--item.customblock .texte li { color: #fff; }

/* --- GROUP 5: NOT A BUG (false positive). The audit reported the interior
   hero title's 2nd line + intro as "green-on-green". Pixel sampling proved the
   green band (.customintro .main-title span::after) ends at the bottom of line 1
   (the span); line 2 and the intro paragraph sit on WHITE below it, so the green
   text is green-on-white = legible. No override -- forcing white here would make
   it white-on-white. Left as-is by design. */

/* --- GROUP 9: hide the non-functional form error strings on the static build.
   Contact Form 7 has no server here, so it renders "Error: Contact form not
   found." The forms are a known backend gap (serverless to come); showing the
   raw error reads as broken. Hide it until the serverless handler lands. */
.wpcf7-contact-form-not-found { display: none !important; }