/* Option C v6 — rangées partagées (subgrid) : 1ers et 2es blocs des colonnes 2-3 alignés ; v4 — grille stricte 3 colonnes sous les 3 étiquettes ; seule animation : apparition successive des étiquettes */
#marketing .mlx{--G:24px;--P:16px;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--G);align-items:stretch}
#marketing .mlx-col{display:flex;flex-direction:column;min-width:0}
#marketing .mlx-tag{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 calc(var(--P) + 12px) 0 calc(var(--P) + 14px);box-sizing:border-box;color:#F5EFE3;font-family:"Fraunces",Georgia,serif;font-size:1.05rem;
 clip-path:polygon(0 0,calc(100% - var(--P)) 0,100% 50%,calc(100% - var(--P)) 100%,0 100%,var(--P) 50%)}
#marketing .mlx-tag b{font-weight:500}
#marketing .mlx-tag .ml-n{border-color:currentColor}
#marketing .mlx-col:nth-child(1) .mlx-tag{background:#4F7449;padding-left:14px;border-radius:10px 0 0 10px;clip-path:polygon(0 0,calc(100% - var(--P)) 0,100% 50%,calc(100% - var(--P)) 100%,0 100%)}
#marketing .mlx-col:nth-child(2) .mlx-tag{background:#2C5A3F}
#marketing .mlx-col:nth-child(3) .mlx-tag{background:#0D3924;border-radius:0 10px 10px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--P) 50%)}
#marketing .mlx-body{flex:1;display:flex;flex-direction:column;margin-top:22px}
#marketing .mlx .ml-offer{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:24px!important}
#marketing .mlx .ml-offer .sa-name{margin:12px 0 6px}
#marketing .mlx .ml-offer .pm{align-self:stretch;margin:6px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--bd)}
#marketing .mlx .ml-offer .mx-btn{margin-top:auto}
#marketing .mlx .ml-offer .mx-note{margin:12px 0 0}
#marketing .mlx-rows{margin:0;display:grid;gap:26px;align-content:start}
#marketing .mlx-rows>div{display:grid;grid-template-columns:40px 1fr;column-gap:12px;row-gap:8px}
#marketing .mlx-rows .ml-i{grid-row:span 2}
#marketing .mlx-rows dt{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.05rem;line-height:1.25;min-height:40px;display:flex;align-items:center;margin:0}
#marketing .mlx-rows dd{grid-column:2;margin:0;font-size:.93rem;color:var(--mu)}
@media(max-width:1100px){#marketing .mlx{--G:18px}#marketing .mlx-tag{font-size:.98rem}#marketing .mlx-rows>div{grid-template-columns:1fr}#marketing .mlx-rows .ml-i{grid-row:auto}#marketing .mlx-rows dd{grid-column:1}#marketing .mlx-rows dt{min-height:0}}
@media(max-width:800px){
 #marketing .mlx{grid-template-columns:minmax(0,1fr);row-gap:28px}
 #marketing .mlx-col .mlx-tag,#marketing .mlx-col:nth-child(n) .mlx-tag{clip-path:none;border-radius:10px;padding:0 14px}
 #marketing .mlx-body{margin-top:16px}
 #marketing .mlx-rows>div{grid-template-columns:40px 1fr}#marketing .mlx-rows .ml-i{grid-row:span 2}#marketing .mlx-rows dd{grid-column:2}#marketing .mlx-rows dt{min-height:40px}
}
/* v6 : grille 3 colonnes × 3 rangées (étiquette, bloc 1, bloc 2) partagées par subgrid ; carte prix sur les 2 rangées de services */
@media(min-width:801px){@supports (grid-template-rows:subgrid){
 #marketing .mlx{grid-template-rows:auto auto auto;row-gap:0}
 #marketing .mlx-col{display:grid;grid-row:span 3;grid-template-rows:subgrid}
 #marketing .mlx-col:nth-child(1) .mlx-body{grid-row:2 / span 2}
 #marketing .mlx-col:nth-child(n+2) .mlx-body,#marketing .mlx-col:nth-child(n+2) .mlx-rows{display:contents}
 #marketing .mlx-col:nth-child(n+2) .mlx-rows>div{align-self:start;align-content:start}
 #marketing .mlx-col:nth-child(n+2) .mlx-rows>div:first-child{grid-row:2;margin-top:22px}
 #marketing .mlx-col:nth-child(n+2) .mlx-rows>div:nth-child(2){grid-row:3;margin-top:26px}
}}
/* animation v6 : étiquettes 1 → 2 → 3 glissent depuis la gauche (40 px) avec fondu, 1s, courbe du site, 500 ms entre chacune ; contenu fixe */
@media (prefers-reduced-motion:no-preference){
 .mlx-js #marketing .mlx-tag{opacity:0;transform:translateX(-40px)}
 .mlx-js #marketing .mlx-col.on .mlx-tag{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
 .mlx-js #marketing .mlx-col.on:nth-child(2) .mlx-tag{--d:.5s}
 .mlx-js #marketing .mlx-col.on:nth-child(3) .mlx-tag{--d:1s}
}
@media(max-width:800px){.mlx-js #marketing .mlx-col.on:nth-child(n) .mlx-tag{--d:0s}}