#mf-portal{position:fixed;inset:0;z-index:2147483000;display:none;align-items:flex-start;justify-content:center;
  padding:clamp(16px,4vw,56px) clamp(16px,4vw,48px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:rgba(4,9,4,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:Arial,sans-serif;color:#f4f6f3;
  opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1);-webkit-font-smoothing:antialiased}
#mf-portal::before{display:none}
#mf-portal.mf-in{opacity:1}
.mf-portal-inner{position:relative;width:100%;max-width:1060px;margin:auto;text-align:center}
.mf-portal-logo{height:44px;width:auto;margin:0 auto clamp(18px,3vw,30px);display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.mf-portal-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#b6f24a;
  display:inline-flex;align-items:center;gap:.7em}
.mf-portal-eyebrow::before,.mf-portal-eyebrow::after{content:"";width:2em;height:1px;background:currentColor;opacity:.6}
.mf-portal-h{font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.15rem,1.3rem+3.7vw,4.1rem);line-height:1.02;letter-spacing:-.02em;margin:.4em 0 .32em}
.mf-portal-h .g{color:#59ab6e;position:relative;white-space:nowrap}
.mf-portal-h .dot{color:#ff2d8e}
.mf-portal-sub{color:#aeb8b0;font-size:clamp(1rem,.95rem+.35vw,1.22rem);line-height:1.55;max-width:54ch;margin:0 auto}
.mf-portal-doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,4.2vw,52px);text-align:left}
.mf-door{position:relative;isolation:isolate;border-radius:22px;padding:clamp(22px,2.5vw,34px);
  background:rgba(4,12,4,.82);
  border:1px solid rgba(255,255,255,.10);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;gap:15px;
  transform:translateY(20px);opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .55s cubic-bezier(.22,1,.36,1),
             border-color .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),background .4s ease}
#mf-portal.mf-in .mf-door{transform:translateY(0);opacity:1}
#mf-portal.mf-in .mf-door.d1{transition-delay:.10s,.10s,0s,0s,0s}
#mf-portal.mf-in .mf-door.d2{transition-delay:.18s,.18s,0s,0s,0s}
.mf-door::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;transform:scaleX(.0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mf-door.d1::before{background:#b6f24a}
.mf-door.d2::before{background:#59ab6e}
.mf-door:hover{transform:translateY(-7px);box-shadow:0 34px 70px rgba(0,0,0,.5);
  background:rgba(4,12,4,.92)}
.mf-door.d1:hover{border-color:rgba(182,242,74,.55)}
.mf-door.d2:hover{border-color:rgba(89,171,110,.6)}
.mf-door:hover::before{transform:scaleX(1)}
.mf-door:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(182,242,74,.4)}
.mf-badge{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.5em .85em;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#dfe6df;background:rgba(0,0,0,.25)}
.mf-door.d1 .mf-badge{color:#c9f77e;border-color:rgba(182,242,74,.35)}
.mf-door.d2 .mf-badge{color:#7fd196;border-color:rgba(89,171,110,.4)}
.mf-door h3{font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem+1.3vw,2.15rem);line-height:1.03;letter-spacing:-.01em;margin:.1em 0 0;color:#fff}
.mf-door p.lead{color:#b6bfb7;font-size:.99rem;line-height:1.5;margin:0}
.mf-ticks{list-style:none;margin:.2em 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:.6em}
.mf-ticks li{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.55em;color:#d7ddd7;font-size:.94rem;line-height:1.4}
.mf-ticks li img{width:22px;height:22px;flex:none;object-fit:contain}
.mf-door-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:1.02rem;padding:.95em 1.4em;border-radius:999px;
  border:0;cursor:pointer;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),background .3s ease}
.mf-door.d1 .mf-door-cta{background:#b6f24a;color:#0b1a06;box-shadow:0 12px 30px rgba(150,214,50,.28)}
.mf-door.d2 .mf-door-cta{background:#59ab6e;color:#04210f;box-shadow:0 12px 30px rgba(54,115,71,.32)}
.mf-door:hover .mf-door-cta{transform:translateY(-2px)}
.mf-door .mf-door-cta .ar{transition:transform .32s cubic-bezier(.22,1,.36,1);font-size:1.1em;font-weight:900;line-height:1}
.mf-door:hover .mf-door-cta .ar{transform:translateX(5px)}
.mf-foot{font-size:.78rem;color:#8b948c;letter-spacing:.02em;margin:-.2em 0 0}
@media(max-width:820px){.mf-portal-doors{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  #mf-portal,.mf-door,.mf-door::before,.mf-door-cta,.mf-door .ar{transition:none!important}
  .mf-door{transform:none!important;opacity:1!important}
}
/* --- v2 : header visible au-dessus, ancrage haut, couleurs vert(wholesale)/rose(shop) --- */
#mf-portal{align-items:flex-start}
.mf-portal-inner{margin:0 auto}
.mf-portal-logo{display:none}
.mf-portal-eyebrow{color:#59ab6e}
.mf-portal-h .g{color:#59ab6e}
.mf-portal-h .dot{color:#ec3f7e}
.mf-door.d1::before{background:#59ab6e}
.mf-door.d2::before{background:#ec3f7e}
.mf-door.d1:hover{border-color:rgba(89,171,110,.6)}
.mf-door.d2:hover{border-color:rgba(236,63,126,.6)}
.mf-door.d1 .mf-badge{color:#7fd196;border-color:rgba(89,171,110,.4)}
.mf-door.d2 .mf-badge{color:#f79ac0;border-color:rgba(236,63,126,.4)}
.mf-door.d1 .mf-door-cta{background:#59ab6e;color:#04210f;box-shadow:0 12px 30px rgba(54,115,71,.34)}
.mf-door.d2 .mf-door-cta{background:#ec3f7e;color:#2a0410;box-shadow:0 12px 30px rgba(236,63,126,.34)}
/* header reste au-dessus de l'overlay + icones grisees/desactivees tant qu'aucun choix */
html.mf-portal-lock #header,html.mf-portal-lock #mfs-header-mobile{z-index:2147483001!important}
html.mf-portal-lock #header .pos-search,
html.mf-portal-lock #header .pos-search__toggle,
html.mf-portal-lock #header .pos-search-wrapper,
html.mf-portal-lock #header .pos-account,
html.mf-portal-lock #header .blockcart,
html.mf-portal-lock #header .main-menu,
html.mf-portal-lock #header .pos-menu-horizontal,
html.mf-portal-lock #header .icon-drop-mobile,
html.mf-portal-lock .mfs-menu-header,
html.mf-portal-lock #mfs-burger-btn,
html.mf-portal-lock #mfs-burger-btn-mobile,
html.mf-portal-lock #mfs-search-btn-mobile,
html.mf-portal-lock #mfs-account-mobile,
html.mf-portal-lock #mfs-cart-mobile{
  pointer-events:none!important;opacity:.32!important;filter:grayscale(1) brightness(.9)!important;
  transition:opacity .3s ease,filter .3s ease;
}
/* --- v3 : vert vif B2B #afe347, lisibilite intro, dim icones uniforme --- */
#mf-portal::before{display:none}
.mf-portal-eyebrow{color:#afe347;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.mf-portal-h{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.5)}
.mf-portal-h .g{color:#afe347}
.mf-portal-h .dot{color:#ec3f7e}
.mf-portal-sub{color:#dbe1db;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.62)}
.mf-door.d1::before{background:#afe347}
.mf-door.d1:hover{border-color:rgba(175,227,71,.6)}
.mf-door.d1 .mf-badge{color:#d3f088;border-color:rgba(175,227,71,.4)}
.mf-door.d1 .mf-door-cta{background:#afe347;color:#12250a;box-shadow:0 12px 30px rgba(140,190,40,.36)}
/* icones header : neutralise le cumul d'opacite sur conteneurs, garde le blocage */
html.mf-portal-lock #header .pos-search,
html.mf-portal-lock #header .pos-search__toggle,
html.mf-portal-lock #header .pos-search-wrapper,
html.mf-portal-lock #header .pos-account,
html.mf-portal-lock #header .blockcart,
html.mf-portal-lock #header .main-menu,
html.mf-portal-lock #header .pos-menu-horizontal,
html.mf-portal-lock #header .icon-drop-mobile,
html.mf-portal-lock .mfs-menu-header,
html.mf-portal-lock #mfs-search-btn-mobile,
html.mf-portal-lock #mfs-account-mobile,
html.mf-portal-lock #mfs-cart-mobile{opacity:1!important;filter:none!important;pointer-events:none!important}
/* dim uniforme applique UNE seule fois sur les glyphes/boutons feuilles */
html.mf-portal-lock #header [class*="icon-rt-"],
html.mf-portal-lock #header .cart-products-count,
html.mf-portal-lock #mfs-burger-btn,
html.mf-portal-lock #mfs-burger-btn-mobile,
html.mf-portal-lock #mfs-search-btn-mobile svg,
html.mf-portal-lock #mfs-account-mobile svg,
html.mf-portal-lock #mfs-cart-mobile svg{opacity:.42!important;filter:grayscale(1) brightness(.85)!important;pointer-events:none!important}
/* --- v4 : grisage IDENTIQUE desktop/mobile (reset total puis dim unique par groupe) --- */
html.mf-portal-lock #header [class*="icon-rt-"],
html.mf-portal-lock #header .cart-products-count,
html.mf-portal-lock #header .pos-search,
html.mf-portal-lock #header .pos-search__toggle,
html.mf-portal-lock #header .pos-search-wrapper,
html.mf-portal-lock #header .pos-account,
html.mf-portal-lock #header .blockcart,
html.mf-portal-lock #header .main-menu,
html.mf-portal-lock #header .pos-menu-horizontal,
html.mf-portal-lock #header .icon-drop-mobile,
html.mf-portal-lock #mfs-account-mobile,
html.mf-portal-lock #mfs-account-mobile svg,
html.mf-portal-lock #mfs-cart-mobile,
html.mf-portal-lock #mfs-cart-mobile svg,
html.mf-portal-lock #mfs-search-btn-mobile,
html.mf-portal-lock #mfs-search-btn-mobile svg,
html.mf-portal-lock #mfs-burger-btn-mobile{opacity:1!important;filter:none!important}
/* blocage clic sur tout le header (desktop + mobile) */
html.mf-portal-lock #header a,
html.mf-portal-lock #header button,
html.mf-portal-lock #header [data-toggle],
html.mf-portal-lock #mfs-header-mobile a,
html.mf-portal-lock #mfs-header-mobile button,
html.mf-portal-lock #mfs-burger-btn{pointer-events:none!important}
/* dim visuel : UNE seule fois, sur le conteneur de chaque groupe d'icone */
html.mf-portal-lock .elementor-widget-posSearch,
html.mf-portal-lock .elementor-widget-posAccount,
html.mf-portal-lock .elementor-widget-posCart,
html.mf-portal-lock #mfs-left-mobile,
html.mf-portal-lock #mfs-right-mobile,
html.mf-portal-lock #mfs-burger-btn{opacity:.42!important;filter:grayscale(1) brightness(.85)!important;transition:opacity .3s ease,filter .3s ease}
/* --- v5 : cartes visuelles (image produit) + bandeau reassurance graffiti --- */
.mf-portal-inner{max-width:1160px}
.mf-portal-doors{align-items:stretch}
.mf-door{flex-direction:row;align-items:stretch;gap:clamp(14px,1.8vw,26px);padding:clamp(16px,1.9vw,24px)}
.mf-door-media{flex:0 0 40%;position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;
  border-radius:16px;overflow:hidden;min-height:240px;padding:14px 12px 0;
  background:radial-gradient(125% 92% at 30% 12%,rgba(175,227,71,.16),transparent 62%),#0b1307}
.mf-door.d2 .mf-door-media{background:radial-gradient(125% 92% at 30% 12%,rgba(236,63,126,.18),transparent 62%),#160812}
.mf-door-media img{width:100%;height:auto;max-height:280px;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.55));transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mf-door:hover .mf-door-media img{transform:translateY(-5px) scale(1.035)}
.mf-door-scribble{position:absolute;top:10px;left:12px;z-index:2;font-family:"Oswald","Arial Narrow",sans-serif;
  font-weight:700;text-transform:uppercase;font-size:.72rem;line-height:1.02;letter-spacing:.03em;
  color:rgba(255,255,255,.34);transform:rotate(-7deg);pointer-events:none}
.mf-door.d1 .mf-door-scribble{color:rgba(175,227,71,.42)}
.mf-door.d2 .mf-door-scribble{color:rgba(236,63,126,.5)}
.mf-door-body{flex:1;display:flex;flex-direction:column;gap:13px;min-width:0}
.mf-door-body .mf-badge{align-self:flex-start}
.mf-portal-reass{margin-top:clamp(24px,3.2vw,40px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);text-align:left}
.mf-pr-item{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09)}
.mf-pr-item img{width:46px;height:46px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.mf-pr-t{margin:0;font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:.02em;font-size:.88rem;color:#fff;line-height:1.1}
.mf-pr-s{margin:.2em 0 0;font-size:.8rem;color:#98a198;line-height:1.35;font-family:Arial,sans-serif}
@media(max-width:900px){
  .mf-door{flex-direction:column}
  .mf-door-media{flex:none;min-height:200px}
  .mf-portal-reass{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.mf-portal-reass{grid-template-columns:1fr}}
.mf-portal-tagline{margin:clamp(40px,5vw,64px) auto 0;display:flex;align-items:center;justify-content:center;gap:1em;
  font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:#7c857c}
.mf-portal-tagline::before,.mf-portal-tagline::after{content:"";width:clamp(34px,6vw,72px);height:1px;
  background:currentColor;opacity:.45}
@media(max-width:480px){.mf-portal-tagline{letter-spacing:.24em}.mf-portal-tagline::before,.mf-portal-tagline::after{width:26px}}
/* --- v6 : fond graffiti MAGIC FARMERS (image entiere, sans voile) --- */
#mf-portal{background:rgba(4,9,4,.80)}
#mf-portal::before{display:none}
#mf-portal::after{content:none}
.mf-portal-inner{position:relative;z-index:2}
/* --- v7 : cartes neon (cible image 1) --- */
.mf-door{border-width:1.5px;border-radius:20px;overflow:visible;
  background:radial-gradient(130% 120% at 18% 0%,rgba(255,255,255,.055),rgba(255,255,255,.012) 60%),rgba(6,10,5,.55)}
.mf-door.d1{border-color:rgba(175,227,71,.85);box-shadow:0 0 22px rgba(140,220,45,.26),inset 0 0 34px rgba(140,220,45,.10)}
.mf-door.d2{border-color:rgba(236,63,126,.85);box-shadow:0 0 22px rgba(236,63,126,.28),inset 0 0 34px rgba(236,63,126,.11)}
.mf-door.d1:hover{border-color:#c4f56a;box-shadow:0 0 34px rgba(150,230,50,.42),inset 0 0 42px rgba(140,220,45,.14),0 28px 56px rgba(0,0,0,.45)}
.mf-door.d2:hover{border-color:#ff62a4;box-shadow:0 0 34px rgba(236,63,126,.46),inset 0 0 42px rgba(236,63,126,.16),0 28px 56px rgba(0,0,0,.45)}
.mf-door::before{display:none}
/* media : image + fumee directement sur la carte, sans panneau interne */
.mf-door-media{background:none!important;border-radius:0;min-height:0;padding:0;overflow:visible;
  flex:0 0 43%;align-items:flex-end}
.mf-door-media img{max-height:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.mf-door:hover .mf-door-media img{transform:translateY(-3px) scale(1.02)}
/* scribble retail facon graffiti rose */
.mf-door.d2 .mf-door-scribble{top:6px;left:6px;font-style:italic;font-size:clamp(1rem,.8rem+.7vw,1.35rem);
  line-height:.96;color:#ff62a4;opacity:1;letter-spacing:.01em;transform:rotate(-8deg);
  text-shadow:0 0 12px rgba(236,63,126,.55),0 2px 2px rgba(0,0,0,.5)}
/* badge neon + icone */
.mf-door .mf-badge{display:inline-flex;align-items:center;gap:.5em;background:rgba(0,0,0,.4);border-width:1.5px;text-align:center}
.mf-door .mf-badge svg{flex:none;align-self:flex-start;margin-top:.15em}
.mf-door .mf-badge svg{width:1.15em;height:1.15em;flex:none}
.mf-door.d1 .mf-badge{color:#cdf58a;border-color:rgba(175,227,71,.7);box-shadow:0 0 12px rgba(150,220,45,.22)}
.mf-door.d2 .mf-badge{color:#ff9ac6;border-color:rgba(236,63,126,.7);box-shadow:0 0 12px rgba(236,63,126,.26)}
/* titre : mot accent colore */
.mf-door.d1 h3 .hl{color:#b6f24a}
.mf-door.d2 h3 .hl{color:#ff62a4}
/* CTA glow */
.mf-door.d1 .mf-door-cta{box-shadow:0 8px 22px rgba(150,220,45,.38),0 0 18px rgba(150,220,45,.28)}
.mf-door.d2 .mf-door-cta{box-shadow:0 8px 22px rgba(236,63,126,.4),0 0 18px rgba(236,63,126,.3)}
@media(max-width:900px){.mf-door-media{flex:none;align-items:center}}
/* --- v8 : compaction desktop (tout tient sans scroll @100%) --- */
@media(min-width:901px){
  #mf-portal{padding-bottom:18px}
  .mf-portal-eyebrow{font-size:.68rem;letter-spacing:.2em}
  .mf-portal-h{font-size:clamp(1.9rem,1.2rem+2vw,2.9rem);margin:.22em 0 .18em}
  .mf-portal-sub{font-size:.98rem;line-height:1.42;max-width:50ch}
  .mf-portal-doors{margin-top:16px;gap:18px}
  .mf-door{padding:15px 18px;gap:16px}
  .mf-door-body{gap:8px}
  .mf-door-media{flex:0 0 37%}
  .mf-door .mf-badge{font-size:.62rem;padding:.42em .7em}
  .mf-door h3{font-size:clamp(1.35rem,1rem+.9vw,1.8rem)}
  .mf-door p.lead{font-size:.9rem;line-height:1.38}
  .mf-ticks{gap:.4em}
  .mf-ticks li{font-size:.86rem}
  .mf-door-cta{padding:.78em 1.3em;font-size:.96rem}
  .mf-foot{font-size:.73rem}
  .mf-portal-reass{margin-top:16px;gap:14px}
  .mf-pr-item{padding:11px 14px;gap:11px}
  .mf-pr-item img{width:40px;height:40px}
  .mf-pr-t{font-size:.84rem}
  .mf-pr-s{font-size:.75rem}
  .mf-portal-tagline{margin-top:36px}
}
/* --- v9 : mobile - carte rose au-dessus + images plus basses (sans crop) --- */
@media(max-width:820px){
  .mf-door.d2{order:-1}
}
@media(max-width:900px){
  .mf-door-media{min-height:0}
  .mf-door-media img{width:auto;max-width:100%;max-height:240px;margin:0 auto;display:block}
}
/* --- v10 : fond mobile portrait (cover) + reassurance 2x2 --- */
@media(max-width:820px){
  #mf-portal::before{display:none}
}
@media(max-width:600px){
  .mf-portal-reass{grid-template-columns:1fr 1fr;gap:12px}
  .mf-pr-item{flex-direction:column;text-align:center;gap:9px;padding:16px 10px}
  .mf-pr-item>div{text-align:center}
}
/* --- v11 : cartes côte à côte sur mobile --- */
@media(max-width:820px){
  .mf-portal-doors{grid-template-columns:1fr 1fr;gap:10px}
  .mf-door.d2{order:0}
  .mf-door{padding:12px 10px;gap:8px}
  .mf-door-media{min-height:0}
  .mf-door-media img{max-height:130px}
  .mf-door-body{gap:7px}
  .mf-badge{font-size:.56rem;letter-spacing:.06em;padding:.28em .55em;gap:.35em;white-space:nowrap}
  .mf-door-body .mf-badge{align-self:center}
  .mf-door h3{font-size:1.15rem;text-align:center}
  .mf-portal-tagline{margin-top:18px}
  .mf-door .lead{display:none}
  .mf-ticks{gap:6px}
  .mf-ticks li{font-size:.82rem;gap:7px;line-height:1.3}
  .mf-ticks li img{width:15px;height:15px}
  .mf-ticks li:last-child{display:none}
  .mf-door-cta{font-size:.82rem;padding:.65em .9em}
}

/* --- v12 : léger dézoom iPhone (≤480px) sans casser le rendu --- */
@media(max-width:480px){
  #mf-portal{padding-left:10px;padding-right:10px;padding-bottom:10px;overflow-x:hidden}
  .mf-portal-inner{overflow:hidden;width:100%}
  .mf-door{min-width:0}
  .mf-portal-h{font-size:1.75rem;margin:.18em 0 .14em}
  .mf-portal-sub{font-size:.87rem;line-height:1.32}
  .mf-portal-doors{margin-top:10px;gap:8px}
  .mf-door{padding:10px 9px}
  .mf-door-media img{max-height:110px}
  .mf-portal-tagline{margin-top:12px;font-size:.65rem}
}