:root{--mj-accent:#8b1b1f;--mj-accent2:#b21e2a;--mj-accent-soft:rgba(139,27,31,.14)}
.mj-wrap{padding:1.25rem 0}
.mj-topbar{margin-bottom:.75rem}
.mj-back{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:900}

.mj-hero{border-radius:22px; padding:2rem; margin-bottom:1rem; background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02))}
.mj-hero--landing{padding:2.2rem}
.mj-hero__inner{display:flex; gap:1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mj-hero h1{margin:0 0 .5rem 0; letter-spacing:-.02em}
.mj-badges{display:flex; gap:.5rem; flex-wrap:wrap}
.mj-badge{display:inline-flex; align-items:center; padding:.35rem .6rem; border-radius:999px; background:rgba(0,0,0,.05); font-weight:800; font-size:.9rem}

.mj-choice__grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem}
@media (max-width: 992px){.mj-choice__grid{grid-template-columns:1fr}}
.mj-choice__card{border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:20px; padding:1.25rem; display:flex; flex-direction:column; gap:.5rem}
.mj-choice__card h2{margin:.25rem 0; font-weight:1000}
.mj-choice__card p{margin:0 0 .75rem 0; opacity:.85}
.mj-choice__icon{width:54px; height:54px; border-radius:16px; background:rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center}
.mj-choice__icon svg{width:30px; height:30px; color:rgba(0,0,0,.70)}
.mj-btn-wide{width:100%}

.mj-panel{margin-top:1rem}
.mj-grid{display:grid; grid-template-columns: 1.65fr .95fr; gap:1rem}
.mj-grid--discover{grid-template-columns: 1.2fr 1.4fr}
@media (max-width: 992px){.mj-grid,.mj-grid--discover{grid-template-columns:1fr}}

.mj-step{border:1px solid rgba(0,0,0,.08); background:#fff; border-radius:18px; padding:1rem; margin-bottom:1rem}
.mj-step__title{font-weight:1000; margin-bottom:.75rem}

.mj-options{display:flex; gap:.5rem; flex-wrap:wrap}
.mj-chip{border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:999px; padding:.45rem .75rem; font-weight:900; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.mj-chip:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.06)}
.mj-chip.is-active{border-color:rgba(139,27,31,.55); box-shadow:0 10px 20px var(--mj-accent-soft)}

.mj-toolbar{display:flex; gap:.75rem; align-items:center; justify-content:space-between; margin-bottom:.75rem}
.mj-counter{font-weight:1000; opacity:.75; white-space:nowrap}

.mj-products{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.75rem}
@media (max-width: 992px){.mj-products{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 576px){.mj-products{grid-template-columns: 1fr;}}

.mj-card{border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:.75rem; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; background:#fff}
.mj-card:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.08)}
.mj-card.is-active{border-color:rgba(25,135,84,.55); box-shadow:0 12px 34px rgba(25,135,84,.12)}
.mj-card.is-disabled{opacity:.55; pointer-events:none}
.mj-card__img{aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.04); display:flex; align-items:center; justify-content:center; margin-bottom:.5rem}
.mj-card__img img{width:100%; height:100%; object-fit:cover}
.mj-card__placeholder{width:60%; height:60%; border-radius:12px; background:rgba(0,0,0,.06)}
.mj-card__name{font-weight:1000; line-height:1.15; min-height:2.3em}
.mj-card__btn{margin-top:.5rem}

.mj-right{position:relative}
.mj-summary{position:sticky; top:1rem; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:1rem; background:#fff}
.mj-summary h3{margin:0 0 .75rem 0}
.mj-summary__row{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.35rem 0}
.mj-summary__row strong{font-weight:1100}
.mj-divider{height:1px; background:rgba(0,0,0,.08); margin:.75rem 0}
.mj-summary__title{font-weight:1100; margin-bottom:.35rem}
.mj-list{margin:0; padding-left:1.1rem}
.mj-list li{margin:.25rem 0}
.mj-list--tight li{margin:.15rem 0}
.mj-hint{margin-top:.75rem; font-size:.92rem; opacity:.75}
.mj-error{margin-top:.75rem; color:#b02a37; font-weight:1000}
.mj-loading{padding:1rem; opacity:.8}

.mj-recipes{display:grid; gap:.75rem}
.mj-recipe{border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:1rem; background:#fff}
.mj-recipe__top{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.25rem}
.mj-recipe__title{font-weight:1100}
.mj-recipe__meta{opacity:.78; font-weight:800; font-size:.92rem}
.mj-recipe__note{margin:.25rem 0 .25rem 0; font-weight:800; opacity:.8}
.mj-mini{display:flex; gap:.35rem; margin:.5rem 0 .25rem 0}
.mj-mini img{width:34px; height:34px; border-radius:10px; object-fit:cover; background:rgba(0,0,0,.05)}
.mj-mini__ph{width:34px; height:34px; border-radius:10px; background:rgba(0,0,0,.06); display:inline-block}

.mj-wrap .btn-primary{background:linear-gradient(135deg,var(--mj-accent2),var(--mj-accent));border-color:var(--mj-accent)}
.mj-wrap .btn-primary:hover{filter:brightness(0.95)}
.mj-wrap .btn-outline-primary{color:var(--mj-accent);border-color:rgba(139,27,31,.55)}
.mj-wrap .btn-outline-primary:hover{background:var(--mj-accent);border-color:var(--mj-accent);color:#fff}
.mj-hero{background:linear-gradient(135deg, rgba(139,27,31,.10), rgba(0,0,0,.02))}

.mj-wrap .mj-radio{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;margin:0!important}
.mj-chip--radio{user-select:none}

/* mj-2025 refresh */
.mj-wrap{
  --mj-card-bg: rgba(255,255,255,.92);
  --mj-border: rgba(17,24,39,.08);
}
.mj-step, .mj-choice__card, .mj-summary, .mj-recipe{
  background: var(--mj-card-bg);
  border: 1px solid var(--mj-border);
  box-shadow: 0 12px 40px rgba(17,24,39,.06);
  backdrop-filter: blur(10px);
}
.mj-hero{
  box-shadow: 0 18px 60px rgba(139,27,31,.10);
}
.mj-chip{
  border-color: rgba(17,24,39,.12);
}
.mj-chip.is-active{
  transform: translateY(-1px);
}
.mj-step__title{
  letter-spacing: -.01em;
}
.mj-recipe__note{
  border-left: 3px solid var(--mj-accent);
  padding-left: .6rem;
}

/* ===== Landing 2025 cards ===== */
.mj-kicker{font-weight:1000;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;opacity:.72;margin-bottom:.35rem}
.mj-landing .mj-hero--landing{padding:2.2rem}
.mj-logoBadge{width:84px;height:84px;border-radius:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.75);border:1px solid rgba(17,24,39,.10);box-shadow:0 20px 60px rgba(17,24,39,.10);backdrop-filter:blur(10px)}
.mj-logoBadge__ring{width:60px;height:60px;border-radius:999px;border:2px solid rgba(139,27,31,.55);display:flex;align-items:center;justify-content:center}
.mj-logoBadge__ring span{font-weight:1200;color:var(--mj-accent);letter-spacing:-.02em}
.mj-card2025{border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.88);border-radius:24px;padding:18px;box-shadow:0 18px 60px rgba(17,24,39,.10);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.mj-card2025:before{content:"";position:absolute;inset:-60px -80px auto auto;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle, rgba(178,30,42,.22), rgba(178,30,42,0))}
.mj-card2025__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mj-ill{width:160px;max-width:44%;border-radius:18px;overflow:hidden;border:1px solid rgba(17,24,39,.08);background:rgba(255,255,255,.7)}
.mj-ill svg{display:block;width:100%;height:auto}
.mj-chipTitle{font-weight:1100;opacity:.82}
.mj-card2025 h2{margin:.15rem 0 .35rem 0;font-weight:1200;letter-spacing:-.02em}
.mj-card2025 p{margin:0 0 .9rem 0;opacity:.85;font-weight:650}
.mj-note2025{margin-top:14px}
.mj-note2025__inner{border:1px dashed rgba(139,27,31,.28);background:rgba(255,255,255,.72);border-radius:20px;padding:14px 16px;backdrop-filter:blur(10px)}
.mj-note2025__title{font-weight:1100;color:var(--mj-accent)}
.mj-note2025__text{opacity:.85;font-weight:650}

/* ===== Accordion (Découvrir) ===== */
.mj-acc{display:grid;gap:12px}
.mj-acc__item{border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.88);border-radius:20px;box-shadow:0 14px 45px rgba(17,24,39,.08);backdrop-filter:blur(10px);overflow:hidden}
.mj-acc__sum{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:1100}
.mj-acc__sum::-webkit-details-marker{display:none}
.mj-acc__sum small{opacity:.72;font-weight:850;white-space:nowrap}
.mj-acc__chev{opacity:.65;transition:transform .15s ease}
details[open] .mj-acc__chev{transform:rotate(180deg)}
.mj-acc__body{padding:0 16px 16px 16px}
.mj-acc__cta{border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.88);border-radius:20px;padding:16px;box-shadow:0 14px 45px rgba(17,24,39,.08);backdrop-filter:blur(10px)}

/* ===== Mix Ton Juice 2026 (mj2) ===== */
.mj2-wrap{max-width:1100px;margin:0 auto;padding:22px 14px}
.mj2-hero{border:1px solid rgba(17,24,39,.10);border-radius:28px;overflow:hidden;
  background: url('../img/landing_bg.png') center/cover no-repeat;
  box-shadow: 0 22px 70px rgba(17,24,39,.10);
}
.mj2-hero__inner{padding:28px 26px;background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));backdrop-filter: blur(10px)}
.mj2-brand{font-weight:1000;letter-spacing:.22em;text-transform:uppercase;color:#7a0f16;opacity:.9}
.mj2-title{font-weight:1100;letter-spacing:-.03em;margin:.2rem 0 .2rem 0}
.mj2-sub{max-width:62ch;margin:0;opacity:.88;font-weight:650}
.mj2-choice{margin-top:18px}
.mj2-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 920px){.mj2-cards{grid-template-columns:1fr}}
.mj2-card{border:1px solid rgba(17,24,39,.10);border-radius:26px;overflow:hidden;background:rgba(255,255,255,.90);
  box-shadow: 0 18px 60px rgba(17,24,39,.10);
}
.mj2-card__media{height:220px;background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#f7f3f3;}
.mj2-card--create .mj2-card__media{background-image:url('../img/card_create.png');}
.mj2-card--discover .mj2-card__media{background-image:url('../img/card_discover.png');}
.mj2-card__body{padding:16px 16px 18px 16px}
.mj2-card__kicker{font-weight:900;color:#7a0f16;opacity:.9}
.mj2-card__title{margin:.15rem 0 .45rem 0;font-weight:1100;letter-spacing:-.02em}
.mj2-card__text{margin:0 0 .85rem 0;opacity:.88;font-weight:650}
.mj2-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:14px;
  text-decoration:none;font-weight:1000;border:1px solid transparent;
  background:linear-gradient(135deg,#b21e2a,#8b1b1f);color:#fff;box-shadow:0 14px 40px rgba(139,27,31,.18)
}
.mj2-btn:hover{filter:brightness(.97)}
.mj2-link{display:inline-block;margin-top:10px;text-decoration:none;font-weight:900;color:#7a0f16;opacity:.9}
.mj2-help{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px}
.mj2-btn--ghost{background:rgba(255,255,255,.9);color:#7a0f16;border-color:rgba(139,27,31,.25);box-shadow:none}
.mj2-tip{opacity:.80;font-weight:700;text-align:center}

/* Discover grid */
.mj2-top{margin-bottom:10px}
.mj2-back{font-weight:900;text-decoration:none;color:#7a0f16}
.mj2-head{border:1px solid rgba(17,24,39,.10);border-radius:22px;overflow:hidden;
  background: url('../img/discover_bg.png') center/cover no-repeat;
  box-shadow: 0 18px 60px rgba(17,24,39,.08);
}
.mj2-head__inner{padding:18px 18px;background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));backdrop-filter: blur(10px)}
.mj2-head__badge{font-weight:1000;letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;opacity:.8;color:#7a0f16}
.mj2-head__title{margin:.2rem 0 .2rem 0;font-weight:1100;letter-spacing:-.02em}
.mj2-head__sub{margin:0;opacity:.86;font-weight:650}

.mj2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:14px;align-items:start}
@media (max-width: 980px){.mj2-grid{grid-template-columns:1fr}}
.mj2-acc{display:grid;gap:12px}
.mj2-acc__item{border:1px solid rgba(17,24,39,.10);border-radius:18px;background:rgba(255,255,255,.90);
  box-shadow:0 14px 45px rgba(17,24,39,.06);overflow:hidden}
.mj2-acc__sum{list-style:none;cursor:pointer;padding:14px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:1000}
.mj2-acc__sum::-webkit-details-marker{display:none}
.mj2-acc__left{display:inline-flex;align-items:center;gap:10px}
.mj2-acc__chev{width:20px;height:20px;border-radius:999px;border:1px solid rgba(17,24,39,.12);
  background:rgba(255,255,255,.8);position:relative}
.mj2-acc__chev:before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:2px solid rgba(122,15,22,.75);border-bottom:2px solid rgba(122,15,22,.75);transform:translate(-50%,-60%) rotate(45deg);transition:transform .15s ease}
details[open] .mj2-acc__chev:before{transform:translate(-50%,-35%) rotate(225deg)}
.mj2-acc__body{padding:0 14px 14px 14px}
.mj2-hint{margin-top:8px;opacity:.78;font-weight:650}

.mj2-cta{border:1px solid rgba(17,24,39,.10);border-radius:18px;background:rgba(255,255,255,.90);padding:14px;box-shadow:0 14px 45px rgba(17,24,39,.06)}
.mj2-btnWide{width:100%;border-radius:14px;padding:12px 14px;font-weight:1000;background:linear-gradient(135deg,#b21e2a,#8b1b1f);border-color:transparent}
.mj2-recipes__card{border:1px solid rgba(17,24,39,.10);border-radius:18px;background:rgba(255,255,255,.90);padding:14px;box-shadow:0 14px 45px rgba(17,24,39,.06)}
.mj2-recipes__card h3{margin:0 0 8px 0;font-weight:1100}

/* Icons */
.mj2-ico{width:26px;height:26px;border-radius:999px;background:rgba(178,30,42,.16);border:1px solid rgba(178,30,42,.22);display:inline-block;position:relative}
.mj2-ico:after{content:"";position:absolute;inset:6px;border-radius:999px;border:2px solid rgba(122,15,22,.65)}
.mj2-ico--snow{background:rgba(90,165,255,.12);border-color:rgba(90,165,255,.18)}
.mj2-ico--snow:after{border-color:rgba(52,120,255,.55)}
.mj2-ico--glass{background:rgba(255,198,90,.12);border-color:rgba(255,198,90,.22)}
.mj2-ico--glass:after{border-color:rgba(255,160,40,.55)}
.mj2-ico--star{background:rgba(255,110,170,.12);border-color:rgba(255,110,170,.18)}
.mj2-ico--star:after{border-color:rgba(240,70,140,.55)}
.mj2-ico--avoid{background:rgba(110,110,110,.10);border-color:rgba(110,110,110,.18)}
.mj2-ico--avoid:after{border-color:rgba(90,90,90,.55)}

/* Ensure chips look like the mock */
.mj2-wrap .mj-chip{border-radius:999px;padding:9px 12px}

/* Card media polish */
.mj2-card__media{height:220px;background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#f7f3f3;}
.mj2-card__media:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.55));
  pointer-events:none;
}
.mj2-card{transition:transform .15s ease, box-shadow .15s ease}
.mj2-card:hover{transform:translateY(-2px);box-shadow:0 22px 70px rgba(17,24,39,.14)}

/* ===== Builder (Créer) in mj2 style ===== */
.mj2-head--builder{background: url('../img/discover_bg.png') center/cover no-repeat;}
.mj2-grid--builder{grid-template-columns:1.1fr .9fr;}
@media (max-width: 980px){.mj2-grid--builder{grid-template-columns:1fr}}

.mj2-flavorTop{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.mj2-search{flex:1;min-width:0;border-radius:14px}
.mj2-counter{font-weight:900;opacity:.75;white-space:nowrap}

.mj2-flavorGrid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}
@media (max-width: 980px){.mj2-flavorGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width: 520px){.mj2-flavorGrid{grid-template-columns:1fr;}}

.mj2-flavorCard{
  border:1px solid rgba(17,24,39,.10);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 45px rgba(17,24,39,.06);
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mj2-flavorCard:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(17,24,39,.10)}
.mj2-flavorCard.is-selected{border-color:rgba(139,27,31,.35);box-shadow:0 20px 60px rgba(139,27,31,.14)}
.mj2-flavorMedia{aspect-ratio:1/1;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.mj2-flavorMedia img{width:100%;height:100%;object-fit:cover;display:block}
.mj2-flavorBody{padding:10px 12px}
.mj2-flavorTitle{font-weight:1000;letter-spacing:-.01em}
.mj2-flavorMeta{opacity:.72;font-weight:700;font-size:.92rem;margin-top:2px}

.mj2-summarySide .mj2-summaryCard h3{margin-bottom:10px}
.mj2-summaryRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(17,24,39,.06)}
.mj2-summaryRow:last-of-type{border-bottom:none}
.mj2-summaryKey{font-weight:950;opacity:.80}
.mj2-summaryKey--big{margin-top:10px}
.mj2-summaryVal{font-weight:900;color:#7a0f16}
.mj2-divider{height:1px;background:rgba(17,24,39,.08);margin:12px 0}
.mj2-selected{margin:8px 0 14px 0;padding-left:18px}
.mj2-btnWide--success{background:linear-gradient(135deg,#2e7d32,#43a047);border-color:transparent}

.mj2-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.mj2-more{border-radius:14px;font-weight:900}
.mj2-pageinfo{opacity:.75;font-weight:700}
@media (max-width:520px){.mj2-pager{flex-direction:column;align-items:stretch}.mj2-pageinfo{text-align:center}}

.mj2-category{max-width:280px;border-radius:14px}
@media (max-width:520px){.mj2-category{max-width:100%}}

/* Scroll panel for flavors */
.mj2-flavorGrid{max-height:520px;overflow:auto;padding-right:6px}
@media (max-width:980px){.mj2-flavorGrid{max-height:none;overflow:visible;padding-right:0}}
.mj2-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:900;color:#7a0f16;background:linear-gradient(135deg, rgba(139,27,31,.14), rgba(17,24,39,.06));}
.mj2-flavorCard.is-disabled{opacity:.45;pointer-events:none}