/* ===========================================================================
   MASAR LP3 HOME PAGE: the six sections of Sofiene Lamouchi's comp.

   RULING THIS FILE IMPLEMENTS (Louay, 2026-09-08, verbatim):
   "We are taking the designer's layout and graphics and everything, but
   adapting it to our official design system, which is square edges."

   So the comp's containment, section order and count, composition, photo side,
   graphic devices and copy are reproduced as measured off the artboards. The
   ONLY substitutions are design-system tokens: corner radius 0, the brand
   palette, the typography scale, and the 4px spacing scale. Nothing is
   re-composed, no device is dropped, nothing is added that the comp lacks.

   This REPLACES the previous version of this file, which carried only the hero
   and the CTA banners and which had adapted the comp rather than reproducing
   it ("Sofiene's comp is DIRECTIONAL reference, not a spec to trace", Louay
   2026-09-03). That instruction is superseded by the ruling above.

   SOURCE OF EVERY NUMBER BELOW
   The seven artboards are 1200x800 renders of the designer's own baked
   composite (lp3-designer-psd/artboards/). Every proportion here was measured
   off those pixels or off the PSD layer bounding boxes in psd-layer-tree.txt,
   expressed as a percentage of the 1200px comp column, and then written in
   `cqw` against a container query context that IS the site's own container.
   That is why the layout holds its comp proportions at 390, 768, 1024, 1280,
   1440, 1920 and 2560 instead of only at the width it was eyeballed on.

   THE COLUMN
   Every section wraps its content in the theme's own `.container`, measured on
   this build as max-width 390 / 720 / 960 / 1140 / 1320 / 1320 / 1320 at the
   seven QA viewports, with a 12px gutter. Using the same class rather than a
   copied max-width is what guarantees each section's start edge IS the header's
   and the footer's start edge. Measured after this build: header, all six
   sections and the footer report one identical left value at all seven widths.
   Do not replace it with a bespoke wrapper.

   ON THE 1180px PROPOSAL. The 2026-09-08 QA read `--mlp3-max: 1180px` in the
   previous version of this file, found it declared and never used, and proposed
   1180 as the column because the LP2 sections wrapped at exactly that. That
   premise does not survive this rebuild: the LP2 sections no longer exist on the
   page, so 1180 is now the width of nothing. Setting it would put the six
   sections at x=130 at 1440 while the header and the footer stay at x=60, which
   is the three-edges defect re-created rather than closed.
   If it is wanted anyway it is one rule and nothing else:
       .mlp3 > .container { max-width: 1180px; }
   Measured consequence before adding it: sections inset 70px further than the
   header and the footer at 1440, 130px at 1920 and 2560, and unchanged at or
   below 1024 where the container is already narrower than 1180.

   The 1920 and 2560 column is 1320 and not the 1410 the pre-rebuild homepage
   showed. 1410 came from `homepageV7/banner-v7.css`, a stylesheet the removed
   vendor banner component pulled in, which widened `.container` above 1500px for
   that one page. Every other page on the site was already 1320. The homepage now
   agrees with the rest of the site instead of being the exception.

   CORNERS
   `--mb-r` is 0 (masar-design-system.css, Louay 2026-08-26). Every card, panel,
   photo frame and call-to-action reads it, including the comp's pill-shaped
   CTAs, which the ruling squares off explicitly.
   ONE deliberate exemption: the round information medallion that overlaps the
   about photo's bottom-left corner. A circle is a SHAPE, not a corner
   treatment, and squaring it is the exact category error masar-design-system.css
   section 2 exists to prevent. It reads `--mb-r-pill` and is listed here so the
   conformance audit's residue is explained rather than mysterious.

   COLOUR
   Everything reads a `--masar-*` token from masar-design-system.css. TWO values
   are comp-derived because the brand palette has no equivalent and dropping
   them would change the composition rather than the token:
     --mlp3-cyan  the right-hand end of the designer's blue gradient, which runs
                  brand blue to a cyan blue on the hero, all three photo panels
                  and the first CTA banner. Sampled #1f8ad4 family.
     --mlp3-grey  the collapsed accordion row. Sampled #bebebe. Checked against
                  the blue label it carries: 4.86:1, which clears AA.
   Neither is a brand colour. Neither may be adopted outside this file.

   TYPE
   No font-family is declared here. masar-typography.css already forces
   Alexandria on `html body`. Sizes are a cqw scale taken from the comp.
   Uppercase is a display transform on headings and CTA labels only, exactly as
   the approved LP2 page already ships it; body copy stays sentence case,
   because the PSD's own strings are sentence case and the caps in the render
   are a Photoshop display transform (lp3-designer-psd/README.md, copy issue 3).

   RTL
   Layout is CSS Grid in source order plus logical properties throughout. No
   physical left or right property appears below.

   Namespaced `mlp3-` so nothing here can collide with the `.masar-brand` /
   `.mb-*` layer LP2 baked into front_pages.details.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Tokens, the container-query context, and the section rhythm
   --------------------------------------------------------------------------- */
.mlp3 {
  /* The 4px spacing scale, lms-design-system.v1.fr.md section 2.3. Same values
     the LP2 layer already declares, restated here because this layer is loaded
     from the theme and must not depend on a class baked into the database. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Section rhythm. Both ends are scale values (--sp-7 and --sp-8) so the
     saturated widths land on the 4px scale; between them it interpolates, which
     is what a fluid rhythm is. One value for all six sections, measured equal at
     all seven viewports. */
  --mlp3-rhythm: clamp(var(--sp-7), 4.4vw, var(--sp-8));

  /* The two comp-derived values. See the header. */
  --mlp3-cyan: #1f8ad4;
  --mlp3-grey: #bebebe;

  /* --mlp3-panel: a flat two-stop approximation of the blue panel, kept ONLY
     because `.mlp3-panel` still declares it as its own background. That
     background is never seen: `.mlp3-panel__wash` sits `inset: 0` on top of it
     with an OPAQUE `--masar-blue` base of its own, so `.mlp3-panel`'s value has
     no visual consumer. Left in place rather than deleted so nothing regresses
     if a future panel is built without a wash; it is not measured against any
     artboard and must not be treated as documentation of the comp gradient.
     The REAL, measured gradient is --mlp3-fill-hero/about/steps/faq below. */
  --mlp3-panel: linear-gradient(90deg, var(--masar-blue) 0%, var(--mlp3-cyan) 100%);

  /* THE CYAN FILL, PER PANEL, 2026-09-15. Previously one token
     (--mlp3-panel-cyan) fed the hero's `::after` veil and all three photo
     panels' `.mlp3-panel__wash::after`, on the claim that the designer used
     "one gradient, measured left-to-right on artboards 6, 1, 3 and 4." That
     claim does not survive a pixel measurement. Sampled on each artboard's own
     panel rectangle (`Rectangle 7` for About/Steps/FAQ, the `Ellipse 1` field
     clipped to 56.4% of the column for the hero), along three horizontal lines
     (top quarter, mid, bottom quarter) at columns where the pixel is pure fill
     (R stays 31, B stays 212-213, so alpha = (G-57)/(137-57)): the four panels
     ramp at four different rates and to four different end values, none of
     which is the 0-to-1, edge-to-edge ramp --mlp3-panel-cyan encoded.

       About (artboard 1, panel 485x618): alpha 0.00 at the start edge, still
       under 0.05 through the panel's first ~45%, then rising to 0.66 at the
       end edge. Three-line spread <=0.03 everywhere sampled.

       Steps (artboard 3, panel 445x618): the panel carries a full-bleed,
       NORMAL-blend watermark wash (unlike About's COLOR_BURN, which is a
       no-op over white and leaves the base untouched), so raw pixels never
       read pure masar-blue even at alpha 0. Measured against that wash
       baseline: alpha 0.00 at the start edge, ~0.24 at mid, 0.77 at the end
       edge, still rising. Three-line spread <=0.02 everywhere sampled.

       FAQ (artboard 4, panel 445x618): alpha 0.00 for the first ~48.5% of the
       panel width, unreadable in a band the answer photo and book overlap
       from ~40% to ~58%, then ramping from the ~48.5% start point to 0.65 at
       the end edge. Three-line spread <=0.03 at every point with two or more
       readable lines.

       Hero (artboard 6, panel clipped to the column's own 56.4%, i.e. the
       right edge of `.mlp3-hero__field`, not the comp's own visual arc which
       bulges past it): alpha 0.00 at the start edge, climbing smoothly and
       still accelerating to 0.80 at the panel's right edge. The comp's own
       cyan peak sits near comp x=863 of the 1200px column, i.e. PAST this
       panel's clipped edge at x=677, which is why the ramp has not leveled
       off by the time our rectangle ends: the field is genuinely still
       mid-ramp at 56.4%, not saturated. Cross-line spread runs up to ~0.07 at
       a few points (icons and the headline intersect one line and not the
       others), well above the other three panels', which the aggregate
       (all-rows, not 3-line) curve used to derive the stops below absorbs.

     Each gradient below is a piecewise-linear fit to its own measured curve,
     max error <=0.03 alpha at every sampled point. Colour is written
     rgb(31 138 212 / a), the same convention as before: 31/138/212 is
     --mlp3-cyan's own RGB, so even the zero-alpha stop carries the cyan hue
     rather than `transparent` (rgba(0,0,0,0)), which avoids the grey cast a
     premultiplied interpolation through black can otherwise pick up. */
  --mlp3-fill-hero: linear-gradient(90deg,
    rgb(31 138 212 / 0)    0%,
    rgb(31 138 212 / 0.06) 12%,
    rgb(31 138 212 / 0.06) 16%,
    rgb(31 138 212 / 0.29) 48%,
    rgb(31 138 212 / 0.74) 92%,
    rgb(31 138 212 / 0.80) 100%);
  --mlp3-fill-about: linear-gradient(90deg,
    rgb(31 138 212 / 0)    0%,
    rgb(31 138 212 / 0)    36%,
    rgb(31 138 212 / 0.05) 48%,
    rgb(31 138 212 / 0.20) 68%,
    rgb(31 138 212 / 0.66) 100%);
  --mlp3-fill-steps: linear-gradient(90deg,
    rgb(31 138 212 / 0)    0%,
    rgb(31 138 212 / 0.04) 20%,
    rgb(31 138 212 / 0.16) 40%,
    rgb(31 138 212 / 0.41) 68%,
    rgb(31 138 212 / 0.77) 100%);
  --mlp3-fill-faq: linear-gradient(90deg,
    rgb(31 138 212 / 0)    0%,
    rgb(31 138 212 / 0)    48.5%,
    rgb(31 138 212 / 0.08) 64%,
    rgb(31 138 212 / 0.26) 80%,
    rgb(31 138 212 / 0.65) 100%);

  padding-block: var(--mlp3-rhythm);
  background: var(--masar-surface);
}

/* The container-query context. It sits INSIDE .container so the query width is
   the comp column, and so nothing about the theme's own container changes. */
.mlp3__cq {
  container-type: inline-size;
  container-name: mlp3col;
}

/* The page-builder wraps every section in a bare Bootstrap `.row`, which carries
   a -12px inline margin meant for a grid that has a `.container` above it. These
   rows have none, so each one hangs 12px off both edges of the viewport and the
   page scrolls horizontally by exactly 12px at every width. Measured on this
   build: body.scrollWidth was viewport + 12 at all seven viewports.
   The LP2 layer carried the same fix inside the HTML baked into front_pages,
   which is precisely why it disappeared the moment that body was replaced. It
   lives in the stylesheet now, where replacing a page body cannot delete it. */
.full-page > .row { margin-inline: 0; }

/* And the column inside it carries Bootstrap's 12px gutter, which at widths
   below 576px (where `.container` has no max-width to absorb it) pushed every
   section 12px further in than the header and the footer. Measured at 390:
   footer container left 0, section container left 12. Zeroed so a section's
   start edge IS the header's start edge at every width, which is the gate. */
.full-page > .row > [data-type="container-content"] { padding-inline: 0; }

/* Shared display type. Sizes are the comp's, as a share of the column. */
.mlp3 :where(h1, h2, h3) { font-family: inherit; }

.mlp3__display {
  margin: 0;
  color: var(--masar-blue);
  font-size: clamp(28px, 4.35cqw, 58px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* The comp sets FAQ far larger than the other two section titles: measured cap
   heights are 37 for NOS SERVICES, 38 for COMMENT CA MARCHE and 64 for FAQ, all
   on the same 1200px column. That is a deliberate graphic, not drift, so it
   keeps its own size rather than being normalised into the scale. */
.mlp3__display--xl { font-size: clamp(40px, 7.5cqw, 100px); }

.mlp3__lede {
  margin: 0;
  color: var(--masar-text);
  font-size: clamp(14px, 1.29cqw, 18px);
  line-height: 1.68;
}

.mlp3__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6em 1.5em;
  border-radius: var(--mb-r, 0px);
  background: var(--masar-surface);
  color: var(--masar-blue);
  /* The comp does not set one CTA size: measured label heights are 25px in the
     hero, 22px on the about button, 19px on the service cards and 18px on the
     banners, all on the 1200px column. The base is the banner size and the two
     larger ones carry a modifier, rather than averaging four real values into
     one that matches none of them. */
  font-size: clamp(13px, 1.5cqw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mlp3__cta:hover,
.mlp3__cta:focus { color: var(--masar-blue-hover); text-decoration: none; }
.mlp3__cta:focus-visible { outline: 3px solid var(--masar-violet); outline-offset: 3px; }

.mlp3__cta--hero    { font-size: clamp(15px, 2.08cqw, 28px); }
.mlp3__cta--about   { font-size: clamp(14px, 1.83cqw, 25px); }
.mlp3__cta--service { font-size: clamp(13px, 1.58cqw, 21px); }

/* The solid-blue variant, used where the CTA sits on white (about section). */
.mlp3__cta--solid { background: var(--masar-blue); color: var(--masar-surface); }
.mlp3__cta--solid:hover,
.mlp3__cta--solid:focus { background: var(--masar-blue-hover); color: var(--masar-surface); }

/* The Masar wordmark, centred above a column. Widths are the comp's. */
.mlp3__wordmark { display: block; height: auto; margin-inline: auto; }

/* The blue photo panel shared by about, how-it-works and FAQ. In the comp the
   cutout overhangs the panel on three sides, so the panel is a positioned box
   and the photo is placed against it rather than inside it. */
.mlp3-panel {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 445 / 618;      /* measured, artboards 1, 3 and 4 agree */
  background: var(--mlp3-panel);
  border-radius: var(--mb-r, 0px);
}
/* THE PANEL WATERMARK, on About, How it works and FAQ. Sofiene's own layers,
   not a redraw. Restored 2026-09-15, the same ruling that put the hero's back:
   "let's keep this component exactly as sofiene did it."

   WHAT WAS WRONG. All three panels shared `masar-m-watermark.webp`, the 522x390
   glyph cut from the wordmark and refilled in --masar-blue-deep, at 4% / 26% /
   74% / opacity .40. None of those four numbers comes from an artboard.

   WHAT SHIPS NOW. Each panel gets ITS OWN layer: `Hue/Saturation 3`, the smart
   object clipped to that artboard's panel rectangle `Rectangle 7`, taken with
   psd-tools at its placed resolution, alpha untouched, cropped to that
   artboard's own 1200x800 window and to nothing else. All three are a 254-white
   field carrying the Masar wordmark in 121-grey at a uniform alpha of 38/255,
   which is why there is no CSS opacity here and no box anywhere: the field is
   full bleed and the panel is what clips it.

   THE WASH IS A WRAPPER AND IT HAS TO BE. `.mlp3-panel` deliberately does NOT
   clip, because `.mlp3-panel__photo` overhangs it on three sides. A watermark
   that bleeds off the panel inside a box that never clips would spill into the
   section. So the mark lives in its own `inset: 0` clipping layer, which gives
   the comp's clip without touching the photo's overhang.

   THE WASH ALSO CARRIES THE PANEL'S OWN TWO LAYERS, in the comp's order. Every
   one of the three artboards stacks the same way: `Rectangle 7`, measured solid
   rgb(31, 57, 212) = --masar-blue at every pixel on About and FAQ (Steps reads
   a lightened baseline instead, because its watermark blend is NORMAL rather
   than COLOR_BURN and so the wash's own white field tints the base under it;
   see the --mlp3-fill-steps comment in section 0); then the watermark; then a
   cyan fill, rgb(31, 138, 212) = --mlp3-cyan, transparent at the panel's start
   edge and PARTWAY to opaque by the end edge, not fully opaque anywhere on any
   of the three (measured 0.66 / 0.77 / 0.65 at the About / Steps / FAQ end
   edge respectively). The cyan sits ABOVE the watermark and progressively
   covers it, so the glyph fades across the panel instead of reading at one
   flat strength. `.mlp3-panel` keeps its own background untouched underneath;
   see its own comment in section 0 for why that never shows.

   MEASURED AND FIXED 2026-09-15: this file used to ship ONE cyan ramp
   (--mlp3-panel-cyan, 0 to full opacity edge to edge) for all three panels
   plus the hero, and recorded here that About/Steps/FAQ each measurably
   diverge from it. --mlp3-fill-about/steps/faq now each encode their own
   measured curve (section 0), so the divergence this paragraph used to
   describe is closed; the per-panel numbers live in that token's comment
   rather than duplicated here.

   ISOLATION. The two burn blends below have to see the panel base as their
   backdrop and nothing behind it, so the wash is an isolation group. */
.mlp3-panel__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;                    /* the ONLY thing that clips the mark */
  isolation: isolate;
  border-radius: var(--mb-r, 0px);
  background: var(--masar-blue);       /* `Rectangle 7`, measured solid on all three */
  pointer-events: none;
}
.mlp3-panel__wash::after {             /* the cyan fill, ABOVE the mark, as the comp stacks it */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mlp3-fill-about);  /* default/fallback; every real user below overrides it */
  pointer-events: none;
}
/* PER-PANEL CYAN FILL. The three photo panels share one `.mlp3-panel__wash`
   markup, but the ramp is NOT one shared gradient (see the token comment in
   section 0); each section overrides the default above with its own measured
   curve. Higher specificity than the base rule above, so no !important. */
.mlp3-about .mlp3-panel__wash::after { background: var(--mlp3-fill-about); }
.mlp3-steps .mlp3-panel__wash::after { background: var(--mlp3-fill-steps); }
.mlp3-faq   .mlp3-panel__wash::after { background: var(--mlp3-fill-faq); }

/* GEOMETRY, all of it read off the artboards, none of it tuned.
   The layer maps 1:1 onto its artboard, so the mark is placed in the artboard's
   own pixel units and then expressed as a share of the panel. It is sized from
   the panel's HEIGHT rather than its width on purpose: all three comp panels are
   618 tall, `.mlp3-panel` renders at 445/618, and About's comp panel is 485 wide
   rather than 445. Driving from the height keeps the mark at the comp's true
   scale on all three and lets the narrower rendered panel simply crop earlier,
   which is what a narrower panel means. Driving from the width instead was
   worked through and fails About: the mark comes out 1.188 panel-heights tall
   against the 1.294 it needs, so it would not reach the panel's bottom edge and
   a horizontal seam would appear.
   height 800/618 = 129.4498% of the panel height, width auto, so no squash.
   The comp's own left offsets are -36px (About) and -31px (the other two) and
   its top offsets are -140, -159 and -156, each divided by 445 or 618. Every
   one is NEGATIVE: in all three artboards the mark bleeds off the panel's start
   and top edges, which is the comp's own treatment and the reason there is no
   frame to see. Bottom margins after placement are 42, 23 and 26 artboard units,
   so subpixel rounding cannot uncover an edge and no overhang hack is needed. */
.mlp3-panel__mark {
  position: absolute;
  max-width: none;                     /* the theme's img { max-width: 100% } clamps this to the panel */
  width: auto;
  height: 129.4498%;
  pointer-events: none;
  user-select: none;
}
.mlp3-about .mlp3-panel__mark { inset-inline-start: -8.0899%; top: -22.6537%; }
.mlp3-steps .mlp3-panel__mark { inset-inline-start: -6.9663%; top: -25.7282%; }
/* FAQ is NOT placed this way. It ships a BAKED panel; see the modifier below. */
[dir="rtl"] .mlp3-panel__mark { transform: scaleX(-1); }

/* THE BAKED PATH, for a blend CSS cannot express.
   RULE: declare the designer's blend mode where CSS has it and it measurably
   matches; where CSS has no such mode, do the composite in Photoshop's own
   arithmetic before export and place the result with normal blending. Reproduce
   by MEASUREMENT, not by mode names.

   WHICH PANEL TOOK WHICH PATH, and the number that decided it. Each layer was
   composited four ways against its own artboard, photo and copy masked out:

     About  PSD COLOR_BURN, CSS HAS IT   declared  0.96 / 0.49   CSS PATH
     Steps  PSD NORMAL,     CSS HAS IT   declared  0.52 / 0.75   CSS PATH
     FAQ    PSD LINEAR_BURn, CSS HAS NONE          0.47 / 0.50   BAKED PATH
            the nearest CSS mode, multiply, scored 1.20 / 3.54

   About and Steps ship their designer's own mode, so there is nothing a bake
   could recover and baking would only add a quantisation. FAQ's mode does not
   exist in CSS, so it is composited before export instead of approximated after.

   WHAT THE BAKED FILE IS. `Rectangle 7` of artboard 4, READ FROM THE FILE and
   asserted to be a single colour rather than assumed, is rgb(31, 57, 212). Over
   it, the panel-region pixels of `Hue/Saturation 3` at 1:1 with no resampling,
   through linear burn, which is Cb + Cs - 1 clamped at zero, composited at the
   layer's own alpha of 38/255. The result is an OPAQUE 445x618 image: the
   designer's panel, not an overlay on ours. Field pixels come out exactly
   rgb(31, 57, 212), because linear burn with a 254-white source is a no-op, and
   ink pixels come out rgb(26, 49, 192). Lossless, round trip verified identical.
   445x618 is the artboard's own panel rectangle, so the glyph carries exactly
   the pixels it carries on the other two panels: the CSS path also resolves 445
   source pixels across the panel's width. Baking costs no resolution.

   The cyan fill still goes on top in CSS, because the comp puts it above the
   watermark and a normal-blend overlay after an opaque base is exact. */
.mlp3-panel__mark--baked {
  inset: 0;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  mix-blend-mode: normal;
}

/* BLEND, per artboard, because the three are NOT the same and the difference is
   measurable. Each panel's layer was composited four ways against its own comp,
   with the photo and the copy masked out, and in every case the PSD's own mode
   won against every alternative and against a no-watermark control:

     About, COLOR_BURN    mean 0.96  p95  0.49   (normal 15.12, no mark 2.26)
     Steps, NORMAL        mean 0.52  p95  0.75   (multiply 13.80, no mark 14.02)
     FAQ,   LINEAR_BURN   mean 0.47  p95  0.50   (multiply 1.20, no mark 3.36)

   About and Steps declare their designer's mode, which CSS has. FAQ's mode does
   not exist in CSS, so it takes the baked path above rather than an approximation
   declared here. No panel ships a substituted blend mode. */
.mlp3-about .mlp3-panel__mark { mix-blend-mode: color-burn; }
/* Steps is NORMAL in the PSD, so it declares no blend mode at all.
   FAQ declares none either: its composite is already in the file. */
.mlp3-panel__photo {
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  border-radius: var(--mb-r, 0px);
}
/* Under dir="rtl" translateX must mirror, since transform is not a logical
   property and inset-inline-start:50% already flips its own reference edge. */
[dir="rtl"] .mlp3-panel__photo { transform: translateX(50%); }

/* The figure is what CLIPS. In the comp each cutout rises above its panel and
   runs off the bottom of the artboard, so the top overhang lives in the
   figure's own top padding and the bottom overhang is cut where the comp cuts
   it. Percentage padding resolves against WIDTH, which is why the values below
   are the measured overhangs converted from panel-height to panel-width share.
   Letting the photo simply overflow instead would push it into the next
   section, which the no-overlap gate would fail and rightly so. */
.mlp3-steps__figure,
.mlp3-faq__figure {
  position: relative;
  margin: 0;
  /* Clip the BOTTOM ONLY. `overflow: hidden` was the obvious move and it is
     wrong here: it also clips horizontally, and both cutouts are wider than
     their panel on purpose (the FAQ subject's book crosses the panel's end edge
     onto white in the comp, measured 18px at comp scale). A negative inset on
     three sides leaves those edges alone and still stops the figure spilling
     into the section below. */
  clip-path: inset(0 -100vw 0 -100vw);
}

/* ---------------------------------------------------------------------------
   1. HERO (artboard 6)
   Blue panel on the start side ending at 56.4% of the column, the M watermark
   inside it, five line icons around the panel and the photo, headline, subline
   and the S'inscrire call to action; the woman in the armchair on white on the
   end side. The comp's shape bleeds off the artboard on three sides and stops
   well short of the column's end edge; squared off, that is a panel flush to
   the column's start edge with the white margin kept on the end side.
   --------------------------------------------------------------------------- */
.mlp3-hero__inner {
  position: relative;                 /* the icon layer positions against this */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-6);
}
@container mlp3col (min-width: 720px) {
  .mlp3-hero__inner {
    grid-template-columns: minmax(0, 56.4fr) minmax(0, 43.6fr);
    gap: 0;
  }
}

.mlp3-hero__field {
  position: relative;
  /* The STACKED default: a centred flex box, which is what a narrow hero needs.
     The capped layout below replaces it with a ratio grid. */
  display: flex;
  align-items: center;
  padding-block: clamp(var(--sp-8), 14cqw, 120px);
  padding-inline: clamp(var(--sp-5), 3cqw, var(--sp-8));
  /* The BASE of the designer's stack, `Ellipse 1`. The cyan half of the panel
     is a separate overlay below, so the watermark can sit between the two
     exactly where artboard 6 puts it. */
  background: var(--masar-blue);
  border-radius: var(--mb-r, 0px);
  /* The ONLY thing that clips the watermark. No mask anywhere in this section. */
  overflow: hidden;
}

/* The cyan half of the panel, ON TOP of the watermark. This is not decoration:
   the cyan fill is transparent at the panel's start edge and rises to alpha
   0.80 at its end edge (--mlp3-fill-hero, section 0; still climbing there, not
   plateaued, because the comp's own peak sits past this panel's clipped 56.4%
   edge), so it PROGRESSIVELY COVERS the watermark from left to right, and that
   is why the glyph fades out towards the arc rather than reading at one flat
   strength across the panel. Measured on artboard 6: the ink-to-field step is
   16 to 19 levels at x=180 of the 1200 column and 8 to 11 levels at x=430.
   Absolutely positioned, so it is not a grid item in the capped layout. */
.mlp3-hero__field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--mlp3-fill-hero);
  pointer-events: none;
}

/* AFTER the base rule, not before it. A container query carries NO extra
   specificity, so placed above it these overrides lost on document order and
   the panel stayed a flex row: the icon band was laid out BESIDE the copy
   rather than above it. Second time the same ordering trap bit in this file.
   VIEWPORT FIT, section 7 of masar-design-system.css. From 1024 up the hero is
   capped at the smaller of the comp's own proportion and what the viewport has
   left under the header. Below that the layout stacks and the rule does not
   apply. */
@container mlp3col (min-width: 720px) {
  .mlp3-hero__inner { height: var(--mlp3-hero-h); }
  /* The ratio grid belongs ONLY to the capped layout. Applied unconditionally it
     also governed the stacked hero, where the height is content driven, and an
     `fr` row in an auto-height grid resolves against the row rather than the
     content: measured at 390, the copy overflowed its row and the panel's
     `overflow: hidden` clipped the headline. Narrow stays a centred flex box. */
  .mlp3-hero__field {
    display: grid;
    /* ONE column, stated. Without it the two in-flow children were placed side
       by side and the icon band ended up beside the copy instead of above it. */
    grid-template-columns: minmax(0, 1fr);
    /* NORMALISED to sum to 1. Written as the comp's raw shares, 0.2975 and
       0.2010, the factors sum to 0.4985, and CSS treats flex factors below 1
       as literal fractions of the free space rather than normalising them, so
       half the leftover went unallocated: measured at 1440x800 the top band
       came out 38px instead of 76px and the icons shrank to specks. These are
       the same two shares as a proportion of each other, 0.2975:0.2010. */
    grid-template-rows: minmax(0, 0.5967fr) auto minmax(0, 0.4033fr);
    padding-block: 0;
  }
  .mlp3-hero__content { grid-row: 2; }
}
/* THE WATERMARK. Sofiene's own layer, not a redraw of it.
   RESTORED 2026-09-15 on Louay's ruling, verbatim: "I don't like what you've
   done with the M here. let's keep this component exactly as sofiene did it."

   WHAT WAS WRONG. The previous build shipped `masar-m-watermark.webp`, a 522x390
   derivative somebody cut from the wordmark and refilled in --masar-blue-deep,
   placed at 78% of the panel at opacity .40. Its alpha reached the frame on all
   four sides, so the frame itself read as a lighter rectangle across the panel,
   and the glyph inside it was 390 tall where the comp's is 628. Louay saw the
   rectangle at 2000px and that is the defect this rule closes.

   WHAT SHIPS NOW. Layer `Hue/Saturation 3` of artboard 6's ICONE group, lifted
   from the PSD with psd-tools at its embedded resolution, alpha untouched, no
   retouching, cropped to the artboard's own 1200x800 window and to nothing else.
   The layer is a 254-white field carrying the Masar logo in 121-grey at a
   uniform alpha of 38/255, normal blend, layer opacity 100. So NO CSS opacity
   here: the alpha the designer painted is the alpha that ships. The field is
   FULL BLEED, which is exactly why the comp has no box: there is no frame to
   see, because the asset covers the whole panel and beyond on every side.

   GEOMETRY, all of it read off the PSD, none of it eyeballed:
     - the layer maps 1:1 onto the artboard, so `width: 177.3050%` of a panel
       that is 56.4% of the column makes the image exactly one comp column wide
       and lands the panel's end edge on comp x=677, which is where `Ellipse 1`
       cuts. That crop is load-bearing: the layer carries the WHOLE wordmark and
       the comp shows only the M because the ellipse clips "asar" away;
     - `height: auto` keeps the aspect, so the mark is never squashed;
     - the M's own ink box is comp x 0..601, y 43..670, so its vertical centre
       sits at 356.5/800 = 44.56% of the artboard. Anchoring 44.56% of the image
       to 44.56% of the panel reproduces the comp EXACTLY wherever the hero is at
       the comp's own 3:2 proportion, and keeps the mark on its comp centre-line
       where --mlp3-hero-fit compresses the hero below it;
     - the image is always at least as tall as the panel, because the panel is
       min(66.7cqw, fit) and the image is 66.67cqw. Where the hero is shorter,
       the glyph BLEEDS off the panel's top and bottom edges the same way it
       already bleeds off the start edge in the comp. That is the comp's own
       treatment, and it is the reason there is no horizontal seam to find.
   `min-height: 100%` is a floor for the stacked layout only, where the field's
   height is content-driven and could in principle out-run the image. */
.mlp3-hero__mark {
  position: absolute;
  inset-inline-start: 0;
  top: 44.56%;
  transform: translateY(-44.56%);
  /* max-width: none FIRST, and it is not optional. The theme ships the usual
     `img { max-width: 100% }` reset, which silently clamped 177.305% back to the
     panel's own width; min-height then stretched the result to the panel height
     and the measured box came out 730.94x577.27, exactly the panel, with the
     glyph squeezed and squashed. Measured before this line existed. */
  max-width: none;
  width: 177.3050%;
  height: auto;
  /* THE OVERHANG IS THE POINT, and the 2px is measured rather than chosen.
     Two things make the image fall a hair short of the panel at the comp's own
     3:2 proportion. First --mlp3-hero-comp is 66.7cqw, a rounded two thirds, so
     the panel is 0.05% TALLER than an image whose aspect gives 66.667cqw.
     Second the 44.56% anchor lands on a fractional pixel. Measured at 1920x1080
     before this line existed: the panel's first and last device-pixel row
     carried no watermark and stepped 23 luminance levels against the row beside
     it, across 89% of the panel width. That is a hairline of exactly the kind
     this whole rebuild exists to remove. 2px of guaranteed overhang, split
     0.89 above and 1.11 below by the anchor, closes it; it binds ONLY at the
     comp ratio and costs 0.15% of the column, inside the 1% tolerance. */
  min-height: calc(100% + 2px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
[dir="rtl"] .mlp3-hero__mark { transform: translateY(-44.56%) scaleX(-1); }

.mlp3-hero__content { position: relative; z-index: 3; width: 100%; }

.mlp3-hero__title {
  margin: 0;
  color: var(--masar-surface);
  font-size: clamp(26px, 4cqw, 54px);         /* measured cap 34px on the comp's 1200 column */
  line-height: 1.17;                          /* measured line pitch 56px */
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mlp3-hero__subline {
  margin: var(--sp-6) 0 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(14px, 1.53cqw, 21px);      /* measured cap 13px */
  line-height: 1.55;
  max-width: 52ch;
}
/* The comp indents the button and centres it under the copy block rather than
   aligning it to the headline. That is the composition, so it is reproduced. */
.mlp3-hero__actions {
  display: flex;
  justify-content: center;
  /* The comp leaves 110px between the subline and the button on an 800px
     section, 13.75 percent of it. Proportional like the rest of the block, with
     both ends of the range on the 4px scale, so it gives on a short viewport
     instead of pushing the button past the fold. */
  margin-block-start: clamp(var(--sp-6), calc(0.1375 * var(--mlp3-hero-h)), calc(var(--sp-8) + var(--sp-7)));
}

/* The five line icons, in TWO layers, one per box. Each position is the comp's
   as a share of the box the icon sits over: the 677x800 panel for the first
   three, the 523x800 media column for the last two. Measuring them against the
   whole hero instead was tried and failed at 390 and 768, where the columns
   stack and the same percentage lands somewhere else entirely. */
.mlp3-hero__icons {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.mlp3-hero__icon {
  position: absolute;
  display: block;
  width: var(--mlp3-icon-size);
  aspect-ratio: 1;
  color: rgba(255, 255, 255, .92);
}
.mlp3 { --mlp3-icon-size: clamp(22px, 4.4cqw, 62px); }

.mlp3-hero__icon svg { width: 100%; height: 100%; display: block; }
/* Inside the blue panel: white line work, as in the comp. */
.mlp3-hero__icon--graduate    { inset-inline-start: 5.8%;  top: 4%; }
.mlp3-hero__icon--monitor     { inset-inline-start: 73.4%; top: 15.9%; }
/* Beside the copy, not above it: the comp puts this one in the gap between the
   subline and the centred button, at the panel's start edge where no glyph
   reaches. It stays an overlay on the whole panel for that reason. */
.mlp3-hero__icons--foot       { position: absolute; inset: 0; }
.mlp3-hero__icon--certificate { inset-inline-start: 6.9%;  top: 68.5%; }

/* AFTER the plain rules on purpose. A container query adds NO specificity,
   so placed before them these overrides lost on document order and the
   computed top stayed at the comp's flat 4 percent.
   The upper pair is a GRID ITEM in the panel's first row, so its box IS the
   clear band the comp leaves above the copy. Each icon then sits at its comp
   share of that band, and `min()` pins it inside when the band is short: at a
   compressed height the icons move up into the remaining clearance instead of
   sliding onto the headline. */
@container mlp3col (min-width: 720px) {
    /* align-self: stretch, because the field sets align-items: start and a
     start-aligned item takes its CONTENT height. With absolutely positioned
     children that is zero, so the band measured 0px tall and there was
     nowhere for the icons to sit. */
  .mlp3-hero__icons--top {
    position: relative; grid-row: 1; inset: auto;
    align-self: stretch; justify-self: stretch; width: 100%; height: 100%;
  }
  /* Each icon keeps its comp share of the band and is bounded BY the band, so it
     shrinks as the band does instead of spilling onto the copy or being clipped
     in half. `aspect-ratio: 1` with a height cap gives the width, so the shape
     is preserved at any size. At the comp's full band both render at the comp
     size; at 1440x800 the band is 38px and they scale down inside it. */
  .mlp3-hero__icons--top .mlp3-hero__icon { width: auto; height: var(--mlp3-icon-size); }
  .mlp3-hero__icon--graduate {
    top: 13.4%;
    max-height: calc(86.6% - var(--sp-2));
  }
  .mlp3-hero__icon--monitor {
    top: 53.4%;
    max-height: calc(46.6% - var(--sp-2));
  }
}
/* Inside the white media column: solid and line blue, as in the comp. */
.mlp3-hero__icon--globe     { inset-inline-start: 2.1%;  top: 40.75%; color: var(--masar-blue); }
.mlp3-hero__icon--lightbulb { inset-inline-start: 71.7%; top: 31.75%; color: var(--masar-blue); }

.mlp3-hero__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(280px, 43cqw, 620px);
  background: var(--masar-surface);
}
/* The photo SCALES inside the capped height rather than being cropped by it. */
@container mlp3col (min-width: 720px) {
  .mlp3-hero__media { min-height: 0; }
  .mlp3-hero__photo { max-height: calc(var(--mlp3-hero-h) - 2.25cqw); }
}
.mlp3-hero__photo {
  position: relative;
  z-index: 1;
  width: 83%;                    /* comp 434 of the 523px media column */
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  /* Restored 2026-09-09 with the designer's own photograph. The gap was zeroed
     while the slot held a stock substitute whose chair legs were cut by its
     source frame, where sitting the cut ON the baseline was the least bad
     reading. The PSD asset is a whole chair, so the comp's own measurement
     applies again: artboard 6 leaves 27px under the photo on a 1200 column. */
  margin-block-end: 2.25cqw;
  object-fit: contain;
  border-radius: var(--mb-r, 0px);
}

/* ---------------------------------------------------------------------------
   2. ABOUT (artboard 1)
   Photo on the start side: the folded ABOUT US / man nahnu / Masar sign on a
   blue panel, with the round information medallion overlapping its bottom-start
   corner. Wordmark centred above the copy on the end side, then the justified
   mission paragraph and Commencez maintenant.
   --------------------------------------------------------------------------- */
.mlp3-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
@container mlp3col (min-width: 720px) {
  .mlp3-about__inner { grid-template-columns: minmax(0, 47.3fr) minmax(0, 52.7fr); gap: 8.8cqw; }
}

.mlp3-about__figure { position: relative; margin: 0; }
/* The sign photo overhangs the blue panel by 13px each side on a 485px panel. */
.mlp3-about__figure .mlp3-panel { aspect-ratio: 485 / 618; }
.mlp3-about__photo {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inset-block-start: 2.6%;
  width: 105.4%;
  max-width: none;
  height: auto;
  border-radius: var(--mb-r, 0px);
}
[dir="rtl"] .mlp3-about__photo { transform: translateX(50%); }

/* The round information medallion. THE ONE DELIBERATE RADIUS EXEMPTION in this
   file: it is a circular shape, not a corner treatment. See the header. */
.mlp3-about__badge {
  position: absolute;
  inset-block-end: -6.6%;      /* comp: the medallion clears the panel's foot */
  inset-inline-start: -6%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(44px, 9cqw, 110px);
  aspect-ratio: 1;
  border-radius: var(--mb-r-pill);
  background: var(--masar-surface);
  color: var(--masar-blue);
  box-shadow: 0 6px 18px -8px rgba(5, 6, 10, .45);
  pointer-events: none;
}
.mlp3-about__badge svg { width: 62%; height: 62%; display: block; }

.mlp3-about__body { text-align: center; }
.mlp3-about__body .mlp3__wordmark { width: 42.8%; }   /* comp 232 of a 541 column */
.mlp3-about__text {
  margin: var(--sp-6) 0 0;
  color: var(--masar-text);
  font-size: clamp(15px, 1.6cqw, 22px);       /* measured cap 15px, pitch 34px */
  line-height: 1.62;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.mlp3-about__actions { margin-block-start: var(--sp-8); }

/* ---------------------------------------------------------------------------
   3. SERVICES (artboard 2)
   Centred title and lede, then three gradient cards. Each carries the white
   Masar wordmark with its universe name tucked under the M, a paragraph, and a
   white Decouvrir call to action centred at the foot of the card.
   --------------------------------------------------------------------------- */
.mlp3-services__head { text-align: center; }
.mlp3-services__head .mlp3__lede {
  max-width: 78.3cqw;           /* comp lede runs 940 of the 1200 column */
  margin-inline: auto;
  margin-block-start: var(--sp-5);
}

.mlp3-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-block-start: var(--sp-7);
}
@container mlp3col (min-width: 600px) {
  .mlp3-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.25cqw; }
}

.mlp3-service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(380px, 41cqw, 520px);   /* comp card 362 x 491 */
  padding: 12.6% 7.7% 12.2%;                /* comp 62 / 28 / 60 on a 362 card */
  border-radius: var(--mb-r, 0px);
  color: var(--masar-surface);
}
/* The three gradients, sampled top and bottom off artboard 2. Edu and Consult
   land on the brand blue and the brand violet; Pro is the comp's navy. */
.mlp3-service--edu     { background: linear-gradient(180deg, var(--masar-blue) 0%, #3f57e5 100%); }
.mlp3-service--pro     { background: linear-gradient(180deg, #081560 0%, #1930b6 100%); }
.mlp3-service--consult { background: linear-gradient(180deg, #521a86 0%, var(--masar-violet) 100%); }

.mlp3-service__brand { position: relative; width: 75.7%; }
.mlp3-service__brand .mlp3__wordmark { width: 100%; }
/* The universe name overlaps the wordmark's lower start corner, as in the comp. */
.mlp3-service__label {
  position: absolute;
  inset-inline-start: 5.5%;
  top: 79.6%;
  margin: 0;
  color: var(--masar-surface);
  font-size: clamp(20px, 3.4cqw, 46px);       /* measured 32px ink height for 'Edu' */
  line-height: 1;
  font-weight: 800;
}
.mlp3-service__text {
  margin: var(--sp-7) 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(13px, 1.15cqw, 16px);      /* measured cap 9px */
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
}
.mlp3-service__actions { margin-block-start: auto; padding-block-start: var(--sp-7); }
.mlp3-service--pro     .mlp3__cta { color: #081560; }
.mlp3-service--consult .mlp3__cta { color: var(--masar-violet); }

/* ---------------------------------------------------------------------------
   4. HOW IT WORKS (artboard 3)
   Photo on the start side: the man with the folder on a blue panel, overhanging
   it top and bottom, with two line icons on the panel. Wordmark centred, then
   the title and the three numbered steps on the end side.
   --------------------------------------------------------------------------- */
.mlp3-steps__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
@container mlp3col (min-width: 720px) {
  .mlp3-steps__inner { grid-template-columns: minmax(0, 38fr) minmax(0, 57fr); gap: 5cqw; }
}

/* Comp: panel 445x618, cutout 401x744 sitting 76px above the panel top and
   running 50px past its bottom, of which 23px are visible before the artboard
   cuts him off. 76/618 of the panel height is 17.1% of the panel width. */
.mlp3-steps__figure { padding-block: 17.1% 5.2%; }
.mlp3-steps__figure .mlp3-panel__photo { height: 120.4%; inset-block-end: -8.1%; }
@container mlp3col (min-width: 720px) {
  .mlp3-steps__figure .mlp3-panel__photo { inset-inline-start: 55.4%; }
}
.mlp3-steps__icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mlp3-steps__icon {
  position: absolute;
  display: block;
  width: clamp(20px, 3.4cqw, 48px);
  aspect-ratio: 1;
  color: rgba(255, 255, 255, .9);
}
.mlp3-steps__icon svg { width: 100%; height: 100%; display: block; }
.mlp3-steps__icon--graduate { inset-inline-start: 9.4%;  top: 8.9%; }
.mlp3-steps__icon--globe    { inset-inline-start: 84%;   top: 19.1%; }

.mlp3-steps__body { text-align: center; }
.mlp3-steps__body .mlp3__wordmark { width: 50.4%; }   /* comp 335 of a 665 column */
.mlp3-steps__body .mlp3__display { margin-block-start: var(--sp-5); }

.mlp3-steps__list {
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
  counter-reset: mlp3step;
}
.mlp3-step + .mlp3-step { margin-block-start: var(--sp-6); }
.mlp3-step__title {
  margin: 0;
  color: var(--masar-blue);
  font-size: clamp(15px, 1.76cqw, 24px);      /* measured cap 15px */
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
}
.mlp3-step__text {
  margin: var(--sp-3) 0 0;
  color: var(--masar-text);
  font-size: clamp(15px, 1.6cqw, 22px);       /* measured cap 15px, pitch 25px */
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
}

/* ---------------------------------------------------------------------------
   5. FAQ (artboards 4 and 5, which are two states of ONE accordion)
   Photo on the start side: the man with the two oversized question marks on a
   blue panel. Title centred and the accordion on the end side, the open row
   brand blue with white text, the closed rows grey with centred blue labels.
   The rows themselves stay the theme's dynamic-data accordion, so the FAQ is
   still admin-editable; only its skin is the comp's.
   --------------------------------------------------------------------------- */
.mlp3-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}
@container mlp3col (min-width: 720px) {
  .mlp3-faq__inner { grid-template-columns: minmax(0, 38fr) minmax(0, 57fr); gap: 5cqw; }
}

/* Comp: panel 445x618, cutout 450x639 sitting 18px above the panel top and 3px
   below its bottom. 18/618 of the panel height is 4.0% of the panel width. */
.mlp3-faq__figure { padding-block: 4% 0.7%; }
.mlp3-faq__figure .mlp3-panel__photo { height: 103.4%; inset-block-end: -0.5%; }
@container mlp3col (min-width: 720px) {
  .mlp3-faq__figure .mlp3-panel__photo { inset-inline-start: 53.5%; }
}
.mlp3-faq__marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mlp3-faq__mark {
  position: absolute;
  color: var(--masar-surface);
  font-size: clamp(48px, 9.4cqw, 132px);
  line-height: 1;
  font-weight: 800;
}
.mlp3-faq__mark--one { inset-inline-start: 6%;  top: 4%; }
.mlp3-faq__mark--two { inset-inline-start: 80%; top: 20.7%; }

.mlp3-faq__body { min-width: 0; }
.mlp3-faq__body .mlp3__display { text-align: center; }
.mlp3-faq__accordion { margin-block-start: var(--sp-7); }

/* The accordion skin. Selectors are scoped under .mlp3-faq so nothing here can
   reach the accordions on the course, checkout or dashboard surfaces. */
.mlp3-faq .accordion,
.mlp3-faq .accordion-item,
.mlp3-faq .accordion-button,
.mlp3-faq .accordion-collapse,
.mlp3-faq .accordion-body {
  border-radius: var(--mb-r, 0px);
  border: 0;
}
/* frontend_style.css sets `.accordion-item{box-shadow:0 4px 40px rgba(0,0,0,.08)}`
   and `.accordion-item .accordion-button{color:#fff!important;padding:20px!important}`.
   The comp has neither a shadow nor white labels on the closed rows, and the
   colour is the one that matters: left alone it renders white on #bebebe, which
   is 1.9:1 and unreadable. `!important` is answered with `!important` here,
   scoped to .mlp3-faq so no other accordion on the site is touched. This is the
   same failure the LP2 pass hit with `.accordion-body{background:#fff}` painting
   white answers onto white. */
.mlp3-faq .accordion-item {
  margin-block-end: var(--sp-5);
  background: var(--mlp3-grey);
  box-shadow: none;
  overflow: hidden;
}
.mlp3-faq .accordion-item:last-child { margin-block-end: 0; }
.mlp3-faq .accordion-header { margin: 0; }

.mlp3-faq .accordion-button {
  width: 100%;
  padding: var(--sp-5) var(--sp-7) !important;
  background: var(--mlp3-grey);
  box-shadow: none;
  /* --masar-blue on the comp's #bebebe measures 4.36:1, which clears AA only
     while the label is large text. At the 390px floor it drops to 14px and
     fails. --masar-blue-deep on the same grey measures 7.22:1 and passes at
     every size, and it is still the comp's blue label on the comp's grey pill. */
  color: var(--masar-blue-deep) !important;
  font-size: clamp(14px, 1.6cqw, 22px);       /* measured cap 14px */
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}
.mlp3-faq .accordion-button .faq-title { width: 100%; text-align: center; }
/* The comp draws no chevron on either state, so none is added. The control is
   still a real button with aria-expanded, so it stays keyboard reachable.
   Both pseudo-elements are covered: Bootstrap draws its own on ::after and the
   vendor theme colours one on ::before. */
.mlp3-faq .accordion-button::after,
.mlp3-faq .accordion-button::before { content: none !important; display: none !important; }
.mlp3-faq .accordion-button:focus-visible { outline: 3px solid var(--masar-violet); outline-offset: -3px; }

/* The open row. Bootstrap keeps `.collapsed` on the CLOSED button, so the open
   state is the button WITHOUT that class, which is also the row the theme opens
   by default (_single_faq_v7 marks item 0 open). */
.mlp3-faq .accordion-item:has(> .accordion-collapse.show) { background: var(--masar-blue); }
.mlp3-faq .accordion-item:has(> .accordion-collapse.show) .accordion-button {
  background: var(--masar-blue);
  color: var(--masar-surface) !important;
  padding-block-end: var(--sp-2) !important;
  text-align: start;
}
.mlp3-faq .accordion-item:has(> .accordion-collapse.show) .accordion-button .faq-title { text-align: start; }

.mlp3-faq .accordion-collapse { background: transparent; }
/* frontend_style.css paints .accordion-body white, which put white answer text
   on white the last time this section shipped. Overridden explicitly here. */
.mlp3-faq .accordion-body {
  padding: 0 var(--sp-7) var(--sp-5);
  background: transparent;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(13px, 1.17cqw, 17px);
  line-height: 1.6;
}
.mlp3-faq .accordion-body :where(p, ul, ol) { margin: 0; color: inherit; }
.mlp3-faq .accordion-body :where(p) + :where(p) { margin-block-start: var(--sp-3); }

/* ---------------------------------------------------------------------------
   6. CTA BANNERS (artboard 7)
   Two cards side by side inside the column, 572 wide and 369 tall each with a
   22px gutter, the first a blue-to-cyan gradient and the second navy to brand
   blue. Each carries a cutout photo anchored to its end edge and clipped by the
   card, and a white call to action.
   --------------------------------------------------------------------------- */
.mlp3-banners__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}
@container mlp3col (min-width: 620px) {
  .mlp3-banners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.84cqw; }
}

.mlp3-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 30.75cqw, 400px);   /* comp 572 x 369 */
  padding: 8.7% 5% 8.7% 5.6%;
  border-radius: var(--mb-r, 0px);
  overflow: hidden;
}
.mlp3-banner--bac {
  background: linear-gradient(90deg, var(--masar-blue) 0%, var(--mlp3-cyan) 100%);
}
.mlp3-banner--formateur {
  background: linear-gradient(90deg, #05091f 0%, var(--masar-blue) 100%);
}

.mlp3-banner__content { position: relative; z-index: 2; width: 68%; }
.mlp3-banner__title {
  margin: 0;
  color: var(--masar-surface);
  font-size: clamp(20px, 2.93cqw, 40px);      /* measured cap 25px, pitch 40px */
  line-height: 1.16;
  font-weight: 800;
  text-transform: uppercase;
}
.mlp3-banner__subline {
  margin: var(--sp-5) 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(12.5px, 1.25cqw, 17px);    /* measured cap 11px, pitch 17px */
  line-height: 1.5;
}
.mlp3-banner__actions { margin-block-start: var(--sp-6); }

/* The photo is anchored to the card's end edge and CLIPPED by the card, which
   is what the comp does: nothing paints outside the two card rectangles, and
   the subject is cut by the card frame rather than floating over it. */
.mlp3-banner__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.mlp3-banner--bac .mlp3-banner__media       { width: 44.6%; }
.mlp3-banner--formateur .mlp3-banner__media { width: 49.8%; }
.mlp3-banner__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mb-r, 0px);
}
/* Each banner is clipped on a DIFFERENT edge, because the two photographs have
   opposite proportions and the comp cuts each one where it has room to spare.
   Measured on artboard 7:
     bac        photo 255x531 (0.481) in a window 255x363, so it is TALLER than
                its window and the comp cuts the BOTTOM, keeping the head.
     formateur  photo 364x359 (1.015) in a window 287x359, so it is WIDER than
                its window and the comp cuts the END edge, keeping the body.
   A single object-position cannot do both, and the default kept the top on a
   photo whose spare is horizontal. */
.mlp3-banner--bac .mlp3-banner__photo       { object-position: top center; }
.mlp3-banner--formateur .mlp3-banner__photo { object-position: center left; }
[dir="rtl"] .mlp3-banner--formateur .mlp3-banner__photo { object-position: center right; }

/* ---------------------------------------------------------------------------
   7. Narrow widths.
   The comp has one state and it is a desktop state, so nothing below
   re-composes it: the two-column sections stack in source order, which keeps
   every photo on the side the comp puts it (first), and the decorative icons
   move out of the copy's way rather than being deleted.
   --------------------------------------------------------------------------- */
@container mlp3col (max-width: 719px) {
  /* The panel is now the full column and is tall rather than wide, so the three
     panel icons move into its top and bottom padding bands where the comp's own
     clearance from the copy is preserved. Nothing is deleted. */
  .mlp3-hero__field { min-height: 0; align-items: center; }
  .mlp3-hero__icon { width: clamp(20px, 6cqw, 40px); }
  /* Stacked, the panel's top band is its own padding. Pin the pair inside that
     padding rather than at a share of the whole panel, or they land on the
     headline: measured 22px of overlap at 390 before this. */
  .mlp3-hero__icons--top { position: absolute; inset: 0; }
  .mlp3-hero__icon--graduate    { inset-inline-start: 4%;  top: var(--sp-5); }
  .mlp3-hero__icon--monitor     { inset-inline-start: 84%; top: var(--sp-5); }
  .mlp3-hero__icon--certificate { inset-inline-start: 4%;  bottom: var(--sp-5); top: auto; }
  .mlp3-hero__icon--globe       { inset-inline-start: 2%;  top: 20%; }
  .mlp3-hero__icon--lightbulb   { inset-inline-start: 84%; top: 8%; }
  .mlp3-hero__title { max-width: none; }
  .mlp3-hero__actions { justify-content: start; }
  .mlp3-hero__photo { width: 74%; }
  /* The medallion hangs off the panel's start edge, which at full-column width
     is the container's own edge; measured at 768 it left the viewport by 6px. */
  .mlp3-about__badge { inset-inline-start: 0; inset-block-end: -4%; }
  .mlp3-about__text,
  .mlp3-step__text,
  .mlp3-service__text { text-align: start; }
  /* The comp has no narrow state. Two columns of 68% and 46% inside one card
     cannot both hold their share below 720px, so the copy takes the card and the
     cutout steps behind it as a low-contrast backdrop rather than competing for
     the same band. Measured at 390: banner title on the faded photo still reads
     above 7:1 because the gradient, not the photo, is the ground. */
  .mlp3-banner__content { width: 100%; }
  .mlp3-banner__media { width: 52%; opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
  .mlp3 *, .mlp3 *::before, .mlp3 *::after { transition-duration: .01ms !important; }
}