/* Modèle de rubrique WE BJJ, mobile d'abord. */
.wbj-rub { background: #fff; }
body.wbj-rubrique .site-content > .keydesign-container { margin-top: 0; }
.wbj-rub [hidden] { display: none !important; }
.wbj-rhead { padding-top: 14px; }
.wbj-rhead h1 { font-size: 34px; line-height: 40px; letter-spacing: -.9px; margin: 6px 0 8px; }
.wbj-rintro { font-size: 15.5px; line-height: 25px; max-height: 50px; overflow: hidden; }
.wbj-rintro.is-open { max-height: none; }
.wbj .wbj-rintro p { margin: 0 0 10px; }
.wbj .wbj-rintro a { color: var(--wbj-ink); font-weight: 500; background: linear-gradient(transparent 68%, rgba(233,187,113,.55) 68%); }
.wbj .wbj-rmore { background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--wbj-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.wbj-rflt { position: sticky; top: var(--wbj-head, 70px); z-index: 20; background: #fff; padding-top: 12px; padding-bottom: 10px; margin-top: 10px; border-bottom: 1px solid var(--wbj-line); }
.wbj-rrow { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.wbj-rrow::-webkit-scrollbar { display: none; }
.wbj-rrow + .wbj-rrow { margin-top: 8px; }
.wbj .wbj-chipb { flex: 0 0 auto; display: inline-flex; gap: 8px; align-items: center; background: var(--wbj-cream); border: 0; border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 11.5px; line-height: 16px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 500; color: var(--wbj-ink); cursor: pointer; transition: background .15s; }
.wbj-chipb i, .wbj-lv i { width: 20px; height: 7px; border-radius: 3px; display: inline-block; }
.wbj-chipb small { font-size: 11px; opacity: .6; letter-spacing: 0; }
.wbj .wbj-chipb.is-on { background: var(--wbj-ink); color: #fff; }
.wbj .wbj-chipt { background: #fff; box-shadow: inset 0 0 0 1.5px var(--wbj-line); text-transform: none; letter-spacing: 0; font-size: 13.5px; padding: 11px 13px; }
.wbj .wbj-chipt.is-on { background: var(--wbj-violet); color: #fff; box-shadow: none; }

.wbj-rbody { padding-top: 16px; }
.wbj .wbj-resume { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--wbj-ink); border-radius: 10px; padding: 10px 12px 10px 10px; color: #fff; margin: 0 0 20px; }
.wbj-resume-im { width: 64px; height: 64px; border-radius: 6px; background: #3a3d40 center/cover; }
.wbj-resume small, .wbj-rbridge small { display: block; font-size: 10.5px; line-height: 14px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--wbj-sand); font-weight: 600; }
.wbj-resume b { font-size: 14px; line-height: 18px; font-weight: 600; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wbj-resume .wbj-strip-go { background: var(--wbj-sand); color: var(--wbj-ink); border-radius: 7px; padding: 15px 13px 14px; font-size: 12.5px; line-height: 14px; font-weight: 700; text-transform: uppercase; }
.wbj .wbj-rcount { font-size: 13px; line-height: 18px; color: var(--wbj-muted); margin: 0 0 12px; }
.wbj-start { background: var(--wbj-cream); border-radius: 10px; padding: 18px 16px 8px; margin: 0 0 8px; }
.wbj-start h2 { font-size: 22px; line-height: 27px; letter-spacing: -.45px; margin: 4px 0 8px; }
.wbj .wbj-st { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #ebe5d8; align-items: start; color: var(--wbj-text); }
.wbj .wbj-st:first-of-type { border-top: 0; }
.wbj-st-n { font-family: "DM Serif Text", serif; font-size: 18px; line-height: 1; border: 1.5px solid var(--wbj-violet); color: var(--wbj-violet); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
.wbj-st b { display: block; font-family: "DM Serif Text", serif; font-weight: 400; font-size: 17px; line-height: 22px; color: var(--wbj-ink); }

.wbj .wbj-rfeat { display: block; color: var(--wbj-text); padding-bottom: 8px; }
.wbj-rfeat .wbj-im { aspect-ratio: 16 / 9; margin-bottom: 12px; }
.wbj-rfeat h2 { font-size: 25px; line-height: 31px; letter-spacing: -.55px; margin: 6px 0 6px; }
.wbj .wbj-rfeat p { margin: 0 0 6px; font-size: 15px; line-height: 24px; }
.wbj .wbj-rc { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--wbj-line); align-items: center; color: var(--wbj-text); }
.wbj-rc .wbj-im { aspect-ratio: 4 / 3; }
.wbj-rc h3 { font-size: 17.5px; line-height: 23px; letter-spacing: -.3px; margin: 4px 0 4px; }
.wbj-rc:hover h3, .wbj-rfeat:hover h2 { color: var(--wbj-vdark); }
.wbj-lv { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; line-height: 16px; color: var(--wbj-muted); }
.wbj-lv i { width: 16px; height: 6px; }
.wbj .wbj-meta { font-size: 13px; line-height: 18px; }

.wbj-rlist { padding-bottom: 64px; }
.wbj .wbj-rbridge { display: block; position: relative; margin: 12px 0; background: var(--wbj-ink); border-radius: 10px; padding: 20px 16px 16px; color: #fff; }
.wbj-rbridge b { display: block; font-family: "DM Serif Text", serif; font-weight: 400; font-size: 21px; line-height: 26px; margin: 4px 0 6px; color: #fff; }
.wbj .wbj-rbridge p { margin: 0 0 14px; font-size: 14px; line-height: 22px; color: rgba(255,255,255,.78); }
.wbj .wbj-rbridge .wbj-btn { display: flex; width: 100%; font-size: 14px; padding: 15px 18px 14px; margin-top: 8px; }
.wbj-rbridge .wbj-badge { top: -10px; right: 14px; }
.wbj-rnews { margin: 12px 0; background: var(--wbj-cream); border-radius: 10px; padding: 18px 16px; }
.wbj-rnews b { display: block; font-family: "DM Serif Text", serif; font-weight: 400; font-size: 21px; line-height: 26px; color: var(--wbj-ink); margin: 0 0 10px; }
.wbj .wbj-rempty { margin: 24px 0; font-size: 15px; }
.wbj .wbj-rempty button { background: none; border: 0; font: inherit; font-weight: 600; text-decoration: underline; color: var(--wbj-ink); cursor: pointer; padding: 0; }
.wbj-rlist [data-wbj-more] { margin-top: 16px; cursor: pointer; }

.wbj-rband { background: var(--wbj-violet); color: #fff; padding-top: 28px; padding-bottom: 28px; margin-top: 16px; }
.wbj .wbj-rband .wbj-cat { color: #fff; }
.wbj .wbj-rband h2 { color: #fff; font-size: 25px; line-height: 31px; letter-spacing: -.55px; margin: 4px 0 14px; }
/* La rangée de produits n'était stylée que dans la feuille des articles : sur une rubrique, les cartes prenaient toute la largeur. */
.wbj-rband .wbj-mid-row { display: flex; gap: 10px; overflow-x: auto; margin-right: -20px; padding: 0 20px 4px 0; scrollbar-width: none; scroll-snap-type: x mandatory; }
.wbj-rband .wbj-mid-row::-webkit-scrollbar { display: none; }
.wbj .wbj-rband .wbj-mid-row .wbj-prod { flex: 0 0 58%; scroll-snap-align: start; }
.wbj-rband .wbj-pcta { padding: 14px 10px 13px; }
.wbj .wbj-rband .wbj-btn { display: flex; width: 100%; margin-top: 16px; }
.wbj-rband .wbj-prod h3 { font-size: 16.5px; line-height: 21px; }

@media (min-width: 900px) {
    .wbj-rhead { padding-top: 56px; }
    .wbj-rhead .wbj-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; }
    .wbj-rhead h1 { font-size: 58px; line-height: 66px; letter-spacing: -1.566px; margin: 8px 0 0; }
    .wbj-rintro { font-size: 17px; line-height: 29px; max-height: none; }
    .wbj .wbj-rmore { display: none !important; }
    .wbj-rflt { margin-top: 28px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--wbj-line); }
    .wbj-rflt .wbj-wrap { display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: center; }
    .wbj-rrow { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 10px; }
    .wbj-rrow + .wbj-rrow { margin-top: 0; padding-left: 28px; border-left: 1px solid var(--wbj-line); }
    .wbj-rbody { padding-top: 40px; }
    .wbj .wbj-resume { max-width: 560px; }
    .wbj-rtop { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
    .wbj-rtop:has(.wbj-rside:empty), .wbj-rtop:not(:has(.wbj-rside)) { grid-template-columns: minmax(0, 760px); }
    .wbj-rfeat .wbj-im { margin-bottom: 20px; }
    .wbj-rfeat h2 { font-size: 36px; line-height: 43px; letter-spacing: -.97px; margin: 10px 0 10px; }
    .wbj .wbj-rfeat p { font-size: 16px; line-height: 28px; }
    .wbj .wbj-rside .wbj-rc { grid-template-columns: 168px minmax(0, 1fr); gap: 20px; padding: 0 0 22px; margin: 0 0 22px; border-top: 0; border-bottom: 1px solid var(--wbj-line); }
    .wbj .wbj-rside .wbj-rc:last-child { border-bottom: 0; }
    .wbj-rside .wbj-rc h3 { font-size: 21px; line-height: 27px; letter-spacing: -.45px; margin: 6px 0 6px; }
    .wbj-start { padding: 28px 32px 16px; margin-bottom: 32px; max-width: 760px; }
    .wbj-start h2 { font-size: 28px; line-height: 34px; }
    .wbj-rlist { padding-top: 48px; padding-bottom: 96px; }
    .wbj-rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
    .wbj .wbj-rgrid .wbj-rc { display: block; padding: 0; border: 0; }
    .wbj-rgrid .wbj-rc .wbj-im { aspect-ratio: 16 / 10; margin-bottom: 14px; }
    .wbj-rgrid .wbj-rc h3 { font-size: 21px; line-height: 27px; letter-spacing: -.45px; margin: 6px 0 6px; }
    .wbj .wbj-rbridge { margin: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
    .wbj-rbridge b { font-size: 28px; line-height: 34px; }
    .wbj .wbj-rbridge .wbj-btn { display: inline-flex; width: auto; }
    .wbj-rnews { margin: 0; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
    .wbj-rnews b { font-size: 26px; line-height: 32px; }
    .wbj-rnews .wbj-form { display: grid; }
    .wbj-rlist [data-wbj-more] { width: auto; display: flex; margin: 48px auto 0; }
    .wbj-rband { padding-top: 56px; padding-bottom: 64px; margin-top: 48px; }
    .wbj .wbj-rband h2 { font-size: 40px; line-height: 48px; letter-spacing: -1.08px; margin: 8px 0 28px; }
    .wbj-rband .wbj-mid-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; overflow: visible; margin-right: 0; padding: 0; }
    .wbj .wbj-rband .wbj-mid-row .wbj-prod { flex: none; }
    .wbj .wbj-rband .wbj-btn { display: inline-flex; width: auto; margin-top: 28px; }
}