/* Marketing web — mobile (≤800px) : 3 étapes groupées en rangée chevron, boîtes ensuite (aperçu local) */
@media(max-width:800px){
 html body #marketing .mlx{--P:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;column-gap:3px;row-gap:0}
 html body #marketing .mlx>.mlx-col{display:contents}
 html body #marketing .mlx-col .mlx-tag{grid-row:1;flex-direction:column;justify-content:center;gap:4px;min-height:76px;padding:8px calc(var(--P) + 4px) 8px calc(var(--P) + 6px);font-size:.86rem;line-height:1.15;text-align:center}
 html body #marketing .mlx-col:nth-child(1) .mlx-tag{grid-column:1;border-radius:10px 0 0 10px;padding-left:8px;clip-path:polygon(0 0,calc(100% - var(--P)) 0,100% 50%,calc(100% - var(--P)) 100%,0 100%)}
 html body #marketing .mlx-col:nth-child(2) .mlx-tag{grid-column:2;border-radius:0;clip-path:polygon(0 0,calc(100% - var(--P)) 0,100% 50%,calc(100% - var(--P)) 100%,0 100%,var(--P) 50%)}
 html body #marketing .mlx-col:nth-child(3) .mlx-tag{grid-column:3;border-radius:0 10px 10px 0;padding-right:8px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--P) 50%)}
 html body #marketing .mlx-col .mlx-tag .ml-n{width:24px;height:24px;font-size:.8rem}
 html body #marketing .mlx-col .mlx-body{grid-column:1 / -1;margin-top:18px;position:relative;padding-left:14px;border-left:3px solid var(--sc,#4F7449)}
 html body #marketing .mlx-col:nth-child(1) .mlx-body{grid-row:2;margin-top:22px;--sc:#4F7449}
 html body #marketing .mlx-col:nth-child(2) .mlx-body{grid-row:3;--sc:#2C5A3F}
 html body #marketing .mlx-col:nth-child(3) .mlx-body{grid-row:4;--sc:#0D3924}
 html body #marketing .mlx-col:nth-child(n+2) .mlx-body,html body #marketing .mlx-col:nth-child(n+2) .mlx-rows{display:grid}
 html body #marketing .mlx-col:nth-child(n+2) .mlx-rows>div{grid-row:auto!important;margin-top:0!important}
 html body #marketing .mlx-col .mlx-body::before{content:attr(data-step);display:block;margin:0 0 10px;font:600 .78rem/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sc)}
 .mlx-js #marketing .mlx-col.on:nth-child(1) .mlx-tag{--d:0s}
 .mlx-js #marketing .mlx-col.on:nth-child(2) .mlx-tag{--d:.45s}
 .mlx-js #marketing .mlx-col.on:nth-child(3) .mlx-tag{--d:.9s}
}
@media(max-width:800px){html[data-theme=dark] body #marketing .mlx-col .mlx-body{--sc:#8DBF5A!important}}
@media(max-width:800px) and (prefers-color-scheme:dark){html:not([data-theme=light]) body #marketing .mlx-col .mlx-body{--sc:#8DBF5A!important}}

@media (max-width:800px){html body #marketing .mlx .mlx-col .mlx-body{border-left:0!important;padding-left:0!important}html body #marketing .mlx .mlx-col .mlx-body::before{content:none!important;display:none!important}}

/* Étiquettes animées en séquence (mobile) */
@media (max-width:800px) and (prefers-reduced-motion:no-preference){
html body #marketing .mlx .mlx-col .mlx-tag{animation:me-flow 3.6s ease-in-out infinite;will-change:transform,filter}
html body #marketing .mlx .mlx-col:nth-child(1) .mlx-tag{animation-delay:.2s}
html body #marketing .mlx .mlx-col:nth-child(2) .mlx-tag{animation-delay:1.4s}
html body #marketing .mlx .mlx-col:nth-child(3) .mlx-tag{animation-delay:2.6s}
html body #marketing .mlx .mlx-col .mlx-tag .ml-n{animation:me-num 3.6s ease-in-out infinite;animation-delay:inherit}
html body #marketing .mlx .mlx-col:nth-child(1) .mlx-tag .ml-n{animation-delay:.2s}
html body #marketing .mlx .mlx-col:nth-child(2) .mlx-tag .ml-n{animation-delay:1.4s}
html body #marketing .mlx .mlx-col:nth-child(3) .mlx-tag .ml-n{animation-delay:2.6s}
}
@keyframes me-flow{0%,40%,100%{transform:translateY(0);filter:brightness(1)}15%{transform:translateY(-4px);filter:brightness(1.35)}}
@keyframes me-num{0%,40%,100%{background:transparent;color:inherit}15%{background:#F5EFE3;color:#0D3924}}
