/* Header geometry, emitted after the design's own styles so it wins on
     equal specificity.

     #feNavWrap is the page's content column (max-width:1200px; margin:0 auto;
     padding:0 32px — the same recipe every content section uses) and a flex
     row holding [hamburger] [navbar] — the FR/EN switch lives inside the
     navbar pill itself now (#feNavBar > .fe-nav-tools), matching Design.
     Because the wrapper's content box *is* the content column's inner box at
     every width, all the geometry below falls out of flex layout: no
     arithmetic, no vw, so nothing depends on scrollbar width.

     Above the breakpoint the hamburger is display:none, leaving the navbar as
     the only in-flow flex item — so it spans the content column exactly.

     At the breakpoint the hamburger joins the flex row. The navbar pill no
     longer stretches to fill the column (that's #feNavBar's own flex:1 1
     auto, overridden below to flex:0 1 auto) — with .fe-nav-links gone,
     stretching it just put a big empty gap between the logo and the
     login/CTA links via the pill's own justify-content:space-between.
     Instead the pill shrinks to its own content, and the pair
     [hamburger] [navbar] is centered as one compact group in the content
     column via #feNavWrap{justify-content:center}.

     The inline nav links are hidden at the same breakpoint: once the hamburger
     is there, it is what owns navigation (a sidebar will hold the links), and
     keeping both would double up and overflow the shrunken pill. The design's
     own `@media (max-width:1080px)` rule for .fe-nav-links is now subsumed by
     this one and left untouched.

     !important is needed only where the design sets the property inline
     (#feNavBar's own justify-content:space-between). #feNavWrap has no
     inline justify-content and #feNavBar has no inline flex, so that override
     needs none. */
  #feHamburger{display:none;}
  #feNavBar{flex:1 1 auto;min-width:0;}
  @media (max-width:1440px){
    .fe-nav-links{display:none !important;}
    #feHamburger{display:flex;}
    #feNavWrap{justify-content:center;}
    #feNavBar{flex:0 1 auto;justify-content:flex-start !important;}
    #feLogo{padding-right:28px;}
  }

  /* bug fix (homepage only): the "Pourquoi Fleetenergies" scrollytelling
     section (#why) pins its content with position:sticky + a hard
     height:100vh + overflow:hidden on the inner wrapper, while a scroll
     listener drives a truck/progress-bar animation and reveals 3 cards as
     the user scrolls through the section's 240vh height. `.fe-grid-3`
     already collapses those 3 cards from a row to a single stacked column at
     max-width:900px (see the design's own rule above) — but stacked cards
     need much more vertical space than one row, so below that width the
     content is taller than the fixed 100vh box. Centered inside an
     overflow:hidden box (justify-content:center), the excess gets clipped
     equally off the TOP and the BOTTOM — exactly the reported symptom.

     Merely loosening height/overflow doesn't fix it: position:sticky glues
     the box's top edge to the viewport while "stuck", so any part of a
     taller-than-viewport box below the fold would be permanently
     unreachable during the pinned phase regardless (scrolling during that
     phase moves through the *section*, not the box's own overflow) — the
     content would just be inaccessible in a different way, not visible.

     So below the same breakpoint the grid already uses, drop the pin
     entirely: unstick the wrapper and let content flow at its natural
     height, and force the cards to their fully-revealed end state (the
     scroll-driven reveal never gets to run without the pin, so without this
     they would stay permanently dimmed at the JS's default rest style). The
     truck/road progress bar is left alone — it is decorative, not content,
     and resting at its start position on mobile is a reasonable fallback.

     The wrapper's own padding was `0 5vw` (relying on the removed
     justify-content:center + fixed 100vh box for vertical breathing room) —
     with that gone, add explicit top/bottom padding matching the 72px
     vertical rhythm already used by the design's own sections (compare the
     "resources" section's `padding:72px 32px 150px` and the footer's
     `padding:72px 32px 0`). */
  @media (max-width:900px){
    #why{height:auto !important;}
    #why > div{position:static !important;height:auto !important;overflow:visible !important;
      padding-top:72px !important;padding-bottom:72px !important;}
    #why [data-card]{opacity:1 !important;transform:none !important;}
  }

  /* bug fix (homepage only): the "La plateforme" section's 3 solution cards
     (Fleet Performance / Transport Intelligence / Fuel Trace) sit in a
     [data-cards] flex row with flex-wrap:nowrap — each card is flex:1 1 0
     with max-width:420px, so above ~900px they share the row nicely, but
     below it three squeezed, min-width:0 cards just get uncomfortably
     narrow instead of wrapping (nowrap is doing exactly what it says).
     Below the same breakpoint the rest of this page's card grids already
     collapse to one per row (`.fe-grid-3`, `.fe-grid-2`, etc.) — stack these
     the same way: switch the row to a column and let each card use the full
     available width instead of its 420px desktop cap. `[data-cards]
     [data-card]` (not a bare `[data-card]`) keeps this from also touching
     the 3 differently-purposed `[data-card]` elements in the unrelated
     "Pourquoi" scene above. */
  @media (max-width:900px){
    [data-cards]{flex-direction:column !important;align-items:stretch !important;}
    /* flex:1 1 0 is what shares width equally in the desktop row — flipped to
       a column, that same flex-basis:0 applies to HEIGHT instead, and since
       [data-cards] has no fixed height for flex-grow to distribute, every
       card collapses to 0px tall. flex:none lets each card size to its own
       content height instead, as intended once stacked. */
    [data-cards] [data-card]{max-width:100% !important;flex:none !important;}
    /* the audience-pill list (Transporteurs/Télématiciens/Constructeurs etc.)
       inside each card stacks vertically at every width today; lay the pills
       out in a row instead once the card itself is full-width (stacked
       above), wrapping so it never overflows the card on narrow phones. */
    .fe-aud-pills{flex-direction:row !important;flex-wrap:wrap;justify-content:center;}
  }

  /* Mobile side menu (see build_mobile_nav()): "Se connecter" / FR-EN switch /
     "Demander une démo" only need to live in the panel once the top navbar's
     own copies have hidden themselves — reuse that exact same 900px
     breakpoint the navbar itself uses for .fe-nav-tools (which #feLangSwitch
     now lives inside), so the two never disagree about when they should
     show. Both lang-switch copies share the existing .fe-lang class, so the
     already-wired-up click handler (in LANG_I18N_JS, one shared
     `document.querySelectorAll('.fe-lang')`) drives both without any new
     JS — clicking either copy re-syncs both to the same language, so
     there's never a mismatch between the two. */
  @media (max-width:900px){
    #feMobileNavTools{display:flex !important;}
    #feMobileLangSwitch{display:flex !important;}
  }

  /* bug fix (homepage only): the hero's trust-badge row (GLEC Framework /
     ISO 14083 / CSRD · ESRS / ISO 27001 / European Commission) is
     flex-wrap:nowrap, so it never reflows — it just keeps growing to its
     full intrinsic width (~580-820px depending on locale) regardless of
     how narrow its column gets. Nothing constrains that width until the
     hero <section>'s own overflow:hidden (there for the aurora blur decor)
     silently clips whatever doesn't fit — "European Commission" and often
     "ISO 27001" were rendering entirely off-screen with no way to see them.
     No breakpoint needed: flex-wrap:wrap reflows fluidly at any width, only
     pushing items to a new line once they no longer fit — the border-left
     dividers still read fine since same-line items stay adjacent. row-gap
     adds breathing room between wrapped lines (the design had no vertical
     gap since nothing used to wrap). */
  .fe-trust-badges{flex-wrap:wrap !important;row-gap:10px;}

  /* bug fix (homepage only): the hero's 6-stat KPI row (véhicules connectés
     / ordres de transport / points de donnée / typologies véhicules /
     typologies carburant / Chauffeurs) is also flex-wrap:nowrap, same root
     cause and same fix as the trust-badge row above — it just kept growing
     past its column's width, clipped by the hero's overflow:hidden. Unlike
     the trust badges, this row is a fixed 6 items, so instead of a fluid
     JS-measured wrap, lay it out as a 3-column CSS grid below the usual
     900px breakpoint — a clean 3-over-3, no runtime measurement needed.
     nth-child(4) is always the first item of row 2 in a 3-column grid,
     so it's the one item whose border-left (a divider against its row-1
     neighbour, not row-2's) needs to go — a static rule works here, unlike
     the trust badges' unpredictable wrap points. */
  @media (max-width:900px){
    .fe-stats-row{display:grid !important;grid-template-columns:repeat(3,1fr);row-gap:24px !important;}
    .fe-stats-row > [data-reveal]:nth-child(4){border-left:0 !important;}
  }

  /* requested: the hero's 2 CTA buttons ("Demander une démo" / "Voir par
     métier") center as a group once the hero collapses to a single column
     below 900px. Desktop (left-aligned, under the left text column) is
     unaffected. */
  @media (max-width:900px){
    .fe-hero-ctas{justify-content:center !important;}
  }

  /* requested: the hero's headline + paragraph(s) + trust-badge row also
     center below 900px on all 3 pages, matching the CTA buttons above so
     the whole single-column hero reads as one centered block. text-align
     handles the h1 (full-width box, no override needed), the profile
     dropdown pill on fleet-performance/transport-intelligence (inline-block,
     centers like any inline content) and the inline text inside each
     paragraph — but a paragraph's own box is a block with its own
     max-width (540-560px depending on page) and zero left/right margin by
     default, so text-align on the ancestor doesn't move the box itself;
     only the left/right margins are overridden (!important, since each
     page's inline style already sets margin's left/right component via its
     own shorthand) so each page's own top margin is left untouched. The
     trust-badge-style rows are flex containers, so centering their items
     as a group needs justify-content, not text-align. Desktop (left-
     aligned) is unaffected on all 3 pages. */
  @media (max-width:900px){
    .fe-hero-text{text-align:center;}
    .fe-hero-text p{margin-left:auto !important;margin-right:auto !important;}
    .fe-hero-text .fe-trust-badges,.fe-hero-text .fe-hero-badges{justify-content:center;}
  }

  /* requested: give the hero mockup wrapper (fleet-performance.html and,
     reusing the same class/value, transport-intelligence.html) left/right
     padding that matches the screen width once the hero collapses to a
     single column below 900px, so the screenshot no longer bleeds off
     both viewport edges. % padding is relative to the same containing-
     block width as fleet-performance's image's own -11%/122% bleed math,
     so 11% each side is the exact value that cancels it back out there
     (with a small residual inset, since the padding also shrinks the
     wrapper's own content box, which is in turn the image's own
     percentage basis) — transport-intelligence's own bleed is -10%/120%,
     close enough that reusing the same 11% still fully cancels it, just
     with a touch more residual inset. Desktop (the bleed is intentional
     there) is unaffected on both pages. */
  @media (max-width:900px){
    .fe-hero-mockup{padding-left:11%;padding-right:11%;}
  }

  /* requested: the final CTA section's own left-column text ("Repartez
     avec votre potentiel chiffré...") also centers below 900px, once its
     .fe-grid-2 collapses to a single column and the form card stacks
     underneath — same reasoning/technique as the hero text above (margin
     auto override on the paragraph, justify-content on the button row).
     Desktop (left-aligned, beside the form) is unaffected. */
  @media (max-width:900px){
    .fe-cta-final-text{text-align:center;}
    .fe-cta-final-text p{margin-left:auto !important;margin-right:auto !important;}
    .fe-cta-final-text > div{justify-content:center;}
  }

  /* bug fix: on very narrow phones (~468px and below), the fleet-performance
     /transport-intelligence hero column overflows past the right edge of
     the screen. Root cause: .fe-hero-grid's single 1fr track (below 900px)
     still respects each grid item's default min-width:auto, which resolves
     to the item's min-content size — and the profile-audience dropdown
     button (#feProfBtn, "Pour transporteurs, télématiciens et
     constructeurs" / "Pour chargeurs, logisticiens, 3PL et RTTVP") is
     explicitly white-space:nowrap, so its un-wrappable single-line width
     (~404px) becomes that min-content floor. The 1fr track can shrink to
     fit any viewport EXCEPT below that floor, so once viewport width -
     section padding drops under ~468px the column simply can't shrink any
     further and spills over. min-width:0 removes the floor at the grid-item
     level; letting the button's label wrap below the same width it stops
     fitting on one line removes the floor at its actual source, rather
     than just moving the overflow from the column onto the button itself
     (!important since the button's own inline style already sets
     white-space:nowrap). */
  .fe-hero-text{min-width:0;}
  @media (max-width:480px){
    #feProfBtn{white-space:normal !important;}
  }

  /* requested: fleet-performance.html's .fe-grid-flow (the 5-card "Sources
     -> Résultats" pipeline row) stacks to a single column below 520px,
     narrower than its own existing 2-column breakpoint (900px, in the
     page's own <style>). Emitted after that rule, so equal specificity +
     !important on both means source order decides — this wins below 520px,
     the original 2-column rule still wins between 520-900px. */
  @media (max-width:520px){
    .fe-grid-flow{grid-template-columns:1fr !important;}
  }

  /* requested: transport-intelligence.html's .fe-grid-why (Marché Carbone/
     Trajectoire SBTI/... 4-card row) stacks to a single column below
     520px — narrower than its own existing 2-column breakpoint (900px,
     in the page's own <style>). Same source-order-wins reasoning as
     .fe-grid-flow above: emitted after that rule, so it wins below 520px
     while the original 2-column rule still wins between 520-900px. Each
     item is its own bordered/shadowed card (no shared dividers), so no
     divider bookkeeping is needed here, just the column collapse. */
  @media (max-width:520px){
    .fe-grid-why{grid-template-columns:1fr !important;}
  }

  /* requested: same treatment for the "Comment ça marche" section's own
     4-card row (Sources/Onboarding/...) — stacks to a single column below
     520px, same reasoning as .fe-grid-why above. Each item is its own
     bordered/shadowed card, no divider bookkeeping needed. */
  @media (max-width:520px){
    .fe-how-cards{grid-template-columns:1fr !important;}
  }

  /* requested: transport-intelligence.html's Fleet Performance/Fuel Trace
     cross-link cards stack to a single column below 620px — a wider
     breakpoint than the other card-grid collapses above since each card
     already carries real paragraph copy (not just a title), so it needs
     more room per column before squeezing hurts readability. */
  @media (max-width:620px){
    .fe-crosslink-cards{grid-template-columns:1fr !important;}
  }

  /* requested: qui-sommes-nous.html's "Our story" timeline (.qs-time)
     items stack to a single column below 620px. The page's own two
     native rules for this class collide: an earlier @media
     (max-width:900px) block sets grid-template-columns:1fr, but a
     *later* @media (max-width:1100px) block also matches at any width
     below 900px and sets repeat(2,1fr) — same specificity, later in
     source order wins, so .qs-time never actually reaches 1 column at
     any width. Emitted after both (same source-order-wins reasoning as
     .fe-grid-why above), so this one wins below 620px specifically. */
  @media (max-width:620px){
    .qs-time{grid-template-columns:1fr !important;}
  }

  /* requested: qui-sommes-nous.html's "Écosystème et partenaires" grid
     (6 tiles, desktop repeat(6,1fr)) collapses to 3 columns (2 rows of 3)
     below 900px and 2 columns below 480px. */
  @media (max-width:900px){
    .qs-ecosystem-grid{grid-template-columns:repeat(3,1fr) !important;}
  }
  @media (max-width:480px){
    .qs-ecosystem-grid{grid-template-columns:repeat(2,1fr) !important;}
  }

  /* requested: fleet-performance.html's "Résultats clients" 4-stat row
     (STEF/Saint-Gobain numbers) becomes a 2-over-2 grid below 900px —
     same technique as the homepage's .fe-stats-row: nth-child(3) is
     always the first item of row 2 in a 2-column grid, so its border-left
     (a divider against its row-1 neighbour, not row-2's) needs to go.
     requested next: a horizontal divider between the two rows too, echoing
     the existing vertical ones (same color/width), split evenly into a
     padding-bottom on row 1's items and a matching padding-top on row 2's
     (12px + 12px = the original 24px row-gap, now the line itself instead
     of empty space).
     requested again: the horizontal and vertical dividers shouldn't cross
     at the grid's center — a plain border-top spanning each full-width
     item would meet nth-child(4)'s full-height border-left right at that
     corner. Fixed with ::before/::after pseudo-elements instead of actual
     borders, each inset 16px short of the crossing point, leaving a small
     gap where the two lines would otherwise touch.
     requested again: row 1's vertical divider (a full-height border-left
     on nth-child(2)) was longer than row 2's (a pseudo-element already
     inset at the crossing point) — and the horizontal ones were too long.
     requested again: rather than an arbitrary fixed length, size every
     divider off each item's own already-declared padding instead — the
     content box, not a made-up number. Horizontally, every item has
     padding:0 26px, so each horizontal arm insets 26px from its own left
     and right (spanning exactly its content width; the two arms' 26px+26px
     insets are what leaves the center gap). Vertically, row 1's items
     have padding-bottom:12px and row 2's have padding-top:12px (added
     above for the row spacing) — nth-child(2)'s arm insets 12px from its
     own bottom, nth-child(4)'s insets 12px from its own top, so each
     spans exactly down to/from where its own content ends, and their
     12px+12px insets form the vertical gap at the crossing. */
  @media (max-width:900px){
    .fe-client-stats{grid-template-columns:repeat(2,1fr) !important;row-gap:0;}
    .fe-client-stats > div{position:relative;}
    .fe-client-stats > div:nth-child(1),.fe-client-stats > div:nth-child(2){padding-bottom:12px !important;}
    .fe-client-stats > div:nth-child(3),.fe-client-stats > div:nth-child(4){padding-top:12px !important;}
    .fe-client-stats > div:nth-child(2){border-left:0 !important;}
    .fe-client-stats > div:nth-child(3){border-left:0 !important;}
    .fe-client-stats > div:nth-child(4){border-left:0 !important;}
    .fe-client-stats > div:nth-child(2)::after{content:'';position:absolute;left:0;top:0;bottom:12px;width:1px;background:rgba(163,230,53,0.18);}
    .fe-client-stats > div:nth-child(4)::after{content:'';position:absolute;left:0;top:12px;bottom:0;width:1px;background:rgba(163,230,53,0.18);}
    .fe-client-stats > div:nth-child(3)::before,
    .fe-client-stats > div:nth-child(4)::before{content:'';position:absolute;top:0;height:1px;left:26px;right:26px;background:rgba(163,230,53,0.18);}
  }

  /* requested: keep .fe-client-stats as a 2x2 grid all the way down (no
     stacking to 1 column), and instead shrink the big value numbers
     (34px, white-space:nowrap) so they actually fit their half-width
     column below 520px — without this, each item's min-content (the
     nowrap number) floors the grid's own track width past its available
     space, and the grid silently overflows its rounded card (clipped by
     nothing, so numbers/labels spill past the card's right edge instead
     of wrapping). "jusqu'à " is a separate inline span at its own smaller
     18px, scaled down to match. */
  @media (max-width:520px){
    .fe-client-stats > div > div:first-child{font-size:22px !important;}
    .fe-client-stats > div:nth-child(4) > div:first-child > span{font-size:12px !important;}
  }

  /* requested: the "Preuves chiffrées" mini-stats row (12 000+/136 Md/18
     ans/30 000+), same treatment as .fe-client-stats just above — it's
     already 2x2 below 900px via the page's own base rule
     (.fe-grid-4{grid-template-columns:repeat(2,1fr) !important;}). Same
     gap-in-the-middle horizontal+vertical divider technique, sized off
     each item's own padding — but this row's padding is asymmetric by
     design (nth-child(1)/(4) are flush against the row's own outer edges:
     0 left / 0 right respectively, 28px on every inner gutter instead of
     fe-client-stats' uniform 26px), so each inset below matches its own
     item rather than reusing one shared number. Divider color
     (rgba(245,251,247,0.1)) matches this row's own original border-left,
     not the green used in the client-stats card.
     requested: below 900px, columns 1 (nth-child(1)/(3)) and 2
     (nth-child(2)/(4)) each hug their OWN outer edge — no left padding
     on the left column, no right padding on the right column — instead
     of matching each other's original inner-gutter inset. nth-child(1)/
     (4) already had 0 there by design (the 4-col desktop row's own flush
     outer edges); nth-child(2)/(3) get the same 0 explicitly overridden
     here, since their original 28px was an inner-gutter value that no
     longer applies once they're on the outside of a 2-column layout. */
  @media (max-width:900px){
    .fe-mini-stats > div{position:relative;}
    .fe-mini-stats > div:nth-child(1),.fe-mini-stats > div:nth-child(2){padding-bottom:12px !important;}
    .fe-mini-stats > div:nth-child(3),.fe-mini-stats > div:nth-child(4){padding-top:12px !important;}
    .fe-mini-stats > div:nth-child(2){padding-right:0 !important;}
    .fe-mini-stats > div:nth-child(3){padding-left:0 !important;}
    .fe-mini-stats > div:nth-child(2){border-left:0 !important;}
    .fe-mini-stats > div:nth-child(3){border-left:0 !important;}
    .fe-mini-stats > div:nth-child(4){border-left:0 !important;}
    .fe-mini-stats > div:nth-child(2)::after{content:'';position:absolute;left:0;top:4px;bottom:12px;width:1px;background:rgba(245,251,247,0.1);}
    .fe-mini-stats > div:nth-child(4)::after{content:'';position:absolute;left:0;top:12px;bottom:4px;width:1px;background:rgba(245,251,247,0.1);}
    .fe-mini-stats > div:nth-child(3)::before{content:'';position:absolute;top:0;height:1px;left:0;right:28px;background:rgba(245,251,247,0.1);}
    .fe-mini-stats > div:nth-child(4)::before{content:'';position:absolute;top:0;height:1px;left:28px;right:0;background:rgba(245,251,247,0.1);}
  }

  /* requested: shrink the mini-stats row's big numbers (44px on fp, 40px
     on ti) below 520px so they fit their half-width column, same
     reasoning as .fe-client-stats above. :first-of-type rather than
     :first-child because ti's items prepend an icon <span> before the
     value <div> (fp's don't) — :first-of-type still finds the value div
     as "the first div among this item's children" on both pages. */
  @media (max-width:520px){
    .fe-mini-stats > div > div:first-of-type{font-size:28px !important;}
  }

  /* requested: the Point.P-style case-study cards' big numbers (each
     card's 2nd child div: −13,2 %/6,1 M€/379 230/85 % on fp,
     −22,2 %/−23,1/... on ti — font-size varies per card, 24-32px) all
     become a uniform 24px below 420px, so the largest ones (32px) don't
     crowd their card at phone widths. */
  @media (max-width:420px){
    .fe-casestudy-cards > div > div:nth-child(2){font-size:24px !important;}
  }

  /* requested: this one fe-pad instance (the "Preuves chiffrées" section,
     tagged fe-pad-flush above) keeps zero left/right padding at every
     width, overriding the shared .fe-pad mobile rule that would otherwise
     force 22px onto it below 900px like every other fe-pad. Scoped to this
     instance only — all other fe-pad sections are untouched. */
  .fe-pad-flush{padding-left:0 !important;padding-right:0 !important;}

  /* requested: transport-intelligence's "Preuves chiffrées" dark card
     (fe-proof-box) gets a fluid left/right padding instead of a fixed
     88px, so it hugs the section edge more closely and doesn't crush the
     mini-stats grid's content down to a sliver on narrow phones. Same
     clamp() reasoning as fleet-performance's analogous section: shrinks
     smoothly with the viewport down to 20px, caps back at the original
     88px once there's room (already true above ~1467px, since 6vw only
     exceeds 88px past that width). Top/bottom (104px) untouched — only
     asked about the content feeling too narrow, not the section's
     height. */
  .fe-proof-box{padding-left:clamp(20px,6vw,88px) !important;padding-right:clamp(20px,6vw,88px) !important;}

  /* requested: the "logos wall" section's left/right padding (40px at every
     other width) narrows to 16px below 620px, so its white card doesn't eat
     into the tile grid's own breathing room on small phones. Top/bottom
     padding (52px) is untouched — only asked for left/right. */
  @media (max-width:620px){
    .fe-logos-wall{padding-left:16px !important;padding-right:16px !important;}
  }

  /* requested: the "Pourquoi Fleetenergies" comparison table's first
     ("Critère") column hides below 620px, and each row's criterion label
     reappears as a bold heading above the value in both remaining cells
     (stamped as data-crit — see add_criterion_data_attrs above). The
     other two columns' widths (38%+38%=76% of table-layout:fixed) are
     bumped to 50/50 so they still fill the table once the first is gone.
     Cells default to vertical-align:middle (the browser's table default,
     never overridden by the export), which was harmless side-by-side at
     3 equal-content columns but now that a row's two cells often hold
     different amounts of text, the shorter one was centering within the
     shared row height instead of starting at the same top edge as the
     taller one — overridden to top for this breakpoint only. The two
     content column headers (th:nth-child(2)/(3)) have their own inline
     vertical-align:bottom for the same reason it worked with 3 equal
     columns — overridden to top here too, since dropping the first
     column can make one header wrap to more lines than the other. */
  @media (max-width:620px){
    .fe-compare-table th:first-child,
    .fe-compare-table td:first-child{display:none !important;}
    .fe-compare-table th:nth-child(2),.fe-compare-table th:nth-child(3){width:50% !important;vertical-align:top !important;}
    .fe-compare-table tbody td{vertical-align:top !important;}
    .fe-compare-table tbody td[data-crit]::before{
      content:attr(data-crit);display:block;font-weight:700;color:#0c1f15;margin-bottom:6px;
    }
  }

  /* bug fix (homepage only): the final CTA's "form card" (Échanger avec un
     expert) and "alt card" (Voir la plateforme en démo) sit in a
     .fe-grid-2, which already collapses to one column below 900px — that
     part was already responsive. But the form itself (.fe-cta-form) has its
     OWN nested 2-column grid for the input fields (Nom/Email, Entreprise/
     Vous êtes), with nothing collapsing IT — at narrow widths it kept
     forcing ~500px of width regardless of the card's actual size, pushing
     the whole CTA section (and everything alongside it) past the viewport
     edge. Nothing scrolls to reveal the overflow because the hero's
     overflow:hidden (for the aurora decor) silently clips it instead — the
     same failure mode as the trust-badge row and the KPI stats row above.
     Reuse the same 620px breakpoint as the logos wall for consistency. */
  @media (max-width:620px){
    .fe-cta-form{grid-template-columns:1fr !important;}
  }

  /* Footer, all 6 pages. 2026-08-28 resync: marketing simplified the
     footer to a plain 3-column .fe-foot-grid (logo+description, Produits,
     Société) — already carries its own class in the Claude Design source,
     no per-page variants and no stacked-blocks-per-column alignment problem
     left to solve (that was the old 5/4-column layout's issue; this one
     has a single block per column). Just needs the standard collapse. */
  @media (max-width:900px){
    .fe-foot-grid{grid-template-columns:1fr !important;}
    .fe-foot-grid > div:first-child{
      display:flex;flex-direction:column;align-items:center;text-align:center;
    }
  }