/* =====================================================================
   Extension Membres & blog communautaire — site public
   S'appuie sur les variables du thème (site.css). Préfixe : mbr-. Mobile d'abord, RTL natif.
   ===================================================================== */

/* --------------------------------------------------------------- avatars */
.mbr-av { --s: 44px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
  background: var(--c-surface-alt); box-shadow: 0 0 0 2px #fff, 0 6px 16px -8px rgba(var(--c-navy-rgb), .5); }
.mbr-av img { width: 100%; height: 100%; object-fit: cover; }
.mbr-av--txt { background: linear-gradient(135deg, hsl(var(--h) 55% 46%), hsl(calc(var(--h) + 40) 60% 36%)); color: #fff; font-family: var(--f-head); font-weight: 800; letter-spacing: .02em; font-size: calc(var(--s) * .38); line-height: 1; }
.mbr-av--sm { --s: 34px; }
.mbr-av--md { --s: 46px; }
.mbr-av--lg { --s: 72px; }
.mbr-av--xl { --s: 88px; box-shadow: 0 0 0 4px #fff, 0 16px 34px -16px rgba(var(--c-navy-rgb), .6); }
.mbr-av--xxl { --s: clamp(104px, 18vw, 148px); box-shadow: 0 0 0 6px #fff, 0 26px 50px -24px rgba(var(--c-navy-rgb), .6); }

/* --------------------------------------------------------------- en-tête : entrée Compte */
.mbr-acc__login { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 13px; border-radius: 14px; border: 1.5px solid var(--c-line);
  background: var(--c-surface); color: var(--c-navy); font-weight: 700; text-decoration: none; transition: border-color .2s, background .2s; }
.mbr-acc__login:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.mbr-acc__login span { display: none; }
@media (min-width: 1180px) { .mbr-acc__login span { display: inline; } }
.mbr-acc { position: relative; }
.mbr-acc__btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px 0 5px; border-radius: 999px; border: 1.5px solid var(--c-line);
  background: var(--c-surface); color: var(--c-navy); font-weight: 700; cursor: pointer; list-style: none; transition: border-color .2s; }
[dir="rtl"] .mbr-acc__btn { padding: 0 5px 0 10px; }
.mbr-acc__btn::-webkit-details-marker { display: none; }
.mbr-acc__btn:hover, .mbr-acc[open] .mbr-acc__btn { border-color: var(--c-primary); }
.mbr-acc__btn .mbr-av { box-shadow: none; }
.mbr-acc__name { display: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1180px) { .mbr-acc__name { display: inline; } }
.mbr-acc__chev { width: 16px; height: 16px; transition: transform .2s; }
.mbr-acc[open] .mbr-acc__chev { transform: rotate(180deg); }
.mbr-acc__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60; width: min(290px, calc(100vw - 32px)); padding: 8px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(var(--c-navy-rgb), .45); animation: mbr-pop .18s ease; }
@keyframes mbr-pop { from { opacity: 0; transform: translateY(-6px); } }
.mbr-acc__who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--c-line); }
.mbr-acc__who strong { display: block; color: var(--c-navy); line-height: 1.25; }
.mbr-acc__who small { display: block; color: var(--c-muted); font-size: .82rem; overflow-wrap: anywhere; }
.mbr-acc__menu ul { list-style: none; margin: 0; padding: 0; }
.mbr-acc__menu a, .mbr-acc__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 11px; border: 0; background: none;
  color: var(--c-text); font-weight: 600; text-decoration: none; cursor: pointer; text-align: start; }
.mbr-acc__menu a:hover, .mbr-acc__menu button:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.mbr-acc__menu .ic { color: var(--c-primary); }
.mbr-acc__menu form { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-line); }
.mbr-acc__menu form button { color: #B42318; }
.mbr-acc__menu form .ic { color: currentColor; }
.hdr-solid .mbr-acc__btn, .hdr-navy .mbr-acc__btn, .hdr-solid .mbr-acc__login, .hdr-navy .mbr-acc__login { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }

/* --------------------------------------------------------------- messages */
.mbr-alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; margin-bottom: 18px; font-weight: 600; font-size: .95rem; border: 1px solid transparent; }
.mbr-alert .ic { margin-top: 3px; }
.mbr-alert--success { background: color-mix(in srgb, var(--c-secondary) 10%, #fff); border-color: color-mix(in srgb, var(--c-secondary) 25%, transparent); color: color-mix(in srgb, var(--c-secondary) 70%, #000); }
.mbr-alert--error { background: #FEF3F2; border-color: #FECDCA; color: #B42318; }
.mbr-alert--warning { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); color: var(--c-navy); }
.mbr-alert--info { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.mbr-toast { position: fixed; z-index: 120; inset-inline: 16px; bottom: 20px; margin-inline: auto; max-width: 460px; display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 18px; border-radius: 18px; background: var(--c-navy); color: #fff; font-weight: 600; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); animation: mbr-toast .35s ease; }
.mbr-toast > .ic { color: var(--c-accent); width: 22px; height: 22px; }
.mbr-toast span { flex: 1; }
.mbr-toast__x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.mbr-toast.is-hiding { opacity: 0; transform: translateY(14px); transition: .3s; }
@keyframes mbr-toast { from { opacity: 0; transform: translateY(18px); } }
.mbr-muted { color: var(--c-muted); font-size: .9rem; margin: 0; }
.mbr-center { text-align: center; }
.mbr-pad { padding: clamp(18px, 3vw, 26px); }
.mbr-empty-line { padding: 22px; border-radius: var(--r-sm); background: var(--c-surface-alt); color: var(--c-muted); text-align: center; margin: 0 0 24px; }

/* --------------------------------------------------------------- connexion / inscription */
.mbr-auth { position: relative; padding-block: clamp(28px, 6vw, 72px) clamp(48px, 8vw, 96px);
  background: radial-gradient(700px 340px at 100% 0%, color-mix(in srgb, var(--c-aqua) 45%, transparent), transparent 65%), linear-gradient(180deg, #fff, var(--c-surface-alt)); }
.mbr-auth__grid { display: grid; gap: 28px; align-items: stretch; }
@media (min-width: 960px) { .mbr-auth__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); max-width: 1080px; } }
.mbr-auth__card { position: relative; z-index: 1; padding: clamp(24px, 4.5vw, 44px); border-radius: calc(var(--r) * 1.2); background: #fff; border: 1px solid var(--c-line);
  box-shadow: 0 40px 90px -56px rgba(var(--c-navy-rgb), .7); }
.mbr-auth--solo .mbr-auth__card { max-width: 520px; margin-inline: auto; }
.mbr-auth__title { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); margin-bottom: 8px; }
.mbr-auth__lead { color: var(--c-muted); margin-bottom: 24px; }
.mbr-auth__icon { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border-radius: 30%; background: var(--c-primary-soft); color: var(--c-primary); }
.mbr-auth__icon .ic { width: 28px; height: 28px; }
.mbr-auth__switch { margin: 22px 0 0; text-align: center; color: var(--c-muted); }
.mbr-auth__switch a { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mbr-auth__card .btn--block { margin-top: 6px; }
.mbr-inline-form { margin-top: 12px; }
.mbr-auth__aside { position: relative; display: none; overflow: hidden; border-radius: calc(var(--r) * 1.2); color: #fff;
  background: radial-gradient(420px 300px at 15% 10%, rgba(255,255,255,.18), transparent 60%), linear-gradient(150deg, var(--c-primary), var(--c-navy)); }
@media (min-width: 960px) { .mbr-auth__aside { display: block; } }
.mbr-auth__aside-in { position: relative; z-index: 1; padding: 48px 44px 80px; }
.mbr-auth__aside img { filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); margin-bottom: 16px; }
.mbr-auth__brand { font-family: 'Outfit', var(--f-head); font-weight: 800; letter-spacing: .12em; color: var(--c-aqua); margin-bottom: 26px; }
.mbr-auth__brand span { font-family: 'El Messiri', serif; letter-spacing: 0; margin-inline-end: 6px; }
.mbr-auth__aside h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); max-width: 360px; }
.mbr-auth__aside ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.mbr-auth__aside li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: rgba(255,255,255,.92); }
.mbr-auth__aside li .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.14); color: var(--c-accent); }
.mbr-auth__wall { position: absolute; inset-inline: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, var(--c-aqua) 0 50%, var(--c-mint) 50%); opacity: .9; }
.mbr-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.mbr-label-row label { margin: 0 !important; }
.mbr-label-row a { font-size: .88rem; font-weight: 600; }
.mbr-label { display: block; font-weight: 700; color: var(--c-navy); margin-bottom: 7px; font-size: .95rem; }

/* champ mot de passe + jauge */
.mbr-pw { position: relative; }
.mbr-pw input { padding-inline-end: 54px !important; }
.mbr-pw__eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 0; background: none; color: var(--c-muted); cursor: pointer; }
.mbr-pw__eye:hover, .mbr-pw__eye[aria-pressed="true"] { color: var(--c-primary); background: var(--c-primary-soft); }
.mbr-meter { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.mbr-meter__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 140px; flex: none; }
.mbr-meter__bar i { height: 6px; border-radius: 6px; background: var(--c-line); transition: background .25s; }
.mbr-meter__label { font-size: .84rem; color: var(--c-muted); font-weight: 600; }
.mbr-meter[data-score="1"] i:nth-child(-n+1) { background: #D92D20; }
.mbr-meter[data-score="2"] i:nth-child(-n+2) { background: #F79009; }
.mbr-meter[data-score="3"] i:nth-child(-n+3) { background: color-mix(in srgb, var(--c-secondary) 80%, #fff); }
.mbr-meter[data-score="4"] i { background: var(--c-secondary); }

/* --------------------------------------------------------------- espace membre */
.mbr-hero { position: relative; overflow: hidden; padding-block: clamp(30px, 5vw, 56px) clamp(64px, 8vw, 92px);
  background: radial-gradient(760px 340px at 100% 0%, color-mix(in srgb, var(--c-aqua) 55%, transparent), transparent 65%), linear-gradient(180deg, #fff, var(--c-surface-alt)); }
.mbr-hero__deco { position: absolute; inset-inline-end: -70px; top: -70px; width: 280px; height: 280px; border-radius: 34%; background: conic-gradient(from 200deg, var(--c-aqua), var(--c-mint), var(--c-aqua)); opacity: .2; transform: rotate(18deg); }
.mbr-hero__in { position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
.mbr-hero__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 6px; }
.mbr-hero .eyebrow { margin-bottom: .5em; }
.mbr-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--c-muted); font-weight: 600; }
.mbr-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-size: .82rem; font-weight: 700; }
@media (max-width: 560px) { .mbr-hero .mbr-av--xl { --s: 64px; } }

.mbr-account { position: relative; display: grid; gap: 22px; margin-top: -48px; padding-bottom: clamp(48px, 8vw, 96px); }
@media (min-width: 960px) { .mbr-account { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } }
.mbr-side { position: relative; z-index: 2; padding: 8px; border-radius: var(--r); background: #fff; border: 1px solid var(--c-line); box-shadow: 0 24px 50px -36px rgba(var(--c-navy-rgb), .6); }
@media (min-width: 960px) { .mbr-side { position: sticky; top: 100px; } }
.mbr-side ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mbr-side ul::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .mbr-side ul { flex-direction: column; overflow: visible; } }
.mbr-side__link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px; border-radius: 12px; border: 0; background: none; color: var(--c-text);
  font: inherit; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.mbr-side__link .ic { color: var(--c-muted); }
.mbr-side__link:hover { background: var(--c-surface-alt); color: var(--c-navy); }
.mbr-side__link.is-active { background: var(--c-primary); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--c-primary-rgb), .9); }
.mbr-side__link.is-active .ic { color: #fff; }
.mbr-side__out { display: none; }
@media (min-width: 960px) { .mbr-side__out { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-line); } .mbr-side__out .mbr-side__link { color: #B42318; } .mbr-side__out .ic { color: currentColor; } }
.mbr-main { position: relative; z-index: 1; display: grid; gap: 22px; min-width: 0; }
@media (max-width: 959px) { .mbr-main { margin-top: 0; } }

.mbr-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r);
  background: linear-gradient(120deg, var(--c-navy), color-mix(in srgb, var(--c-primary) 85%, var(--c-navy))); color: rgba(255,255,255,.85); box-shadow: 0 28px 60px -40px rgba(var(--c-navy-rgb), .9); }
.mbr-welcome h2 { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: 4px; }
.mbr-welcome p { margin: 0; max-width: 520px; }
.mbr-welcome .btn--primary { --bg: var(--c-accent); --fg: var(--c-navy); }

.mbr-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .mbr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mbr-stats li { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--c-line); }
.mbr-stats strong { font-family: var(--f-head); font-size: 1.8rem; line-height: 1.1; color: var(--c-navy); }
.mbr-stats__small { font-size: 1rem !important; line-height: 1.6 !important; }
.mbr-stats li > span:last-child { color: var(--c-muted); font-size: .86rem; font-weight: 600; }
.mbr-stats__ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; margin-bottom: 6px; background: var(--c-primary-soft); color: var(--c-primary); }
.mbr-stats__ic--amber { background: #FEF0C7; color: #B54708; }
.mbr-stats__ic--navy { background: color-mix(in srgb, var(--c-navy) 10%, #fff); color: var(--c-navy); }
.mbr-stats__ic--gold { background: var(--c-accent-soft); color: color-mix(in srgb, var(--c-accent) 60%, var(--c-navy)); }

.mbr-progress, .mbr-teaser { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r-sm); background: #fff; border: 1.5px dashed color-mix(in srgb, var(--c-primary) 40%, transparent); color: var(--c-text); text-decoration: none; transition: border-color .2s, transform .2s; }
.mbr-progress:hover, .mbr-teaser:hover { border-color: var(--c-primary); transform: translateY(-1px); color: var(--c-text); }
.mbr-progress > span:nth-child(2), .mbr-teaser > span:nth-child(2) { flex: 1; }
.mbr-progress strong, .mbr-teaser strong { display: block; color: var(--c-navy); }
.mbr-progress small, .mbr-teaser small { color: var(--c-muted); }
.mbr-progress > .ic, .mbr-teaser > .ic { color: var(--c-primary); }
.mbr-progress__ring { --p: 0; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--c-primary) calc(var(--p) * 1%), var(--c-line) 0); }
.mbr-progress__ring b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: .78rem; color: var(--c-navy); }
.mbr-teaser { border-style: solid; background: linear-gradient(90deg, var(--c-accent-soft), #fff); border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); }
.mbr-teaser__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-accent); color: var(--c-navy); flex: none; }

.mbr-cols { display: grid; gap: 22px; }
@media (min-width: 1100px) { .mbr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mbr-panel { border-radius: var(--r); background: #fff; border: 1px solid var(--c-line); box-shadow: 0 20px 44px -38px rgba(var(--c-navy-rgb), .55); min-width: 0; }
.mbr-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(18px, 3vw, 26px); border-bottom: 1px solid var(--c-line); }
.mbr-panel__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.08rem; }
.mbr-panel__head h2 .ic { color: var(--c-primary); }
.mbr-panel__head a { font-weight: 700; font-size: .9rem; }
.mbr-panel__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px clamp(18px, 3vw, 26px); border-top: 1px solid var(--c-line); background: var(--c-surface-alt); border-radius: 0 0 var(--r) var(--r); }
.mbr-list, .mbr-notifs, .mbr-quick { list-style: none; margin: 0; padding: 6px 0; }
.mbr-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px clamp(18px, 3vw, 26px); border-bottom: 1px solid var(--c-line); }
.mbr-list li:last-child { border-bottom: 0; }
.mbr-list__title { font-weight: 700; color: var(--c-navy); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbr-list__title:hover { color: var(--c-primary); }
.mbr-list small { grid-column: 1 / -1; color: var(--c-muted); font-size: .84rem; }
.mbr-list__quote { font-style: italic; }
.mbr-notifs li { display: flex; gap: 12px; padding: 12px clamp(18px, 3vw, 26px); }
.mbr-notifs__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: var(--c-primary-soft); color: var(--c-primary); }
.mbr-notifs a, .mbr-notifs strong { font-weight: 700; color: var(--c-navy); text-decoration: none; }
.mbr-notifs p { margin: 2px 0; color: var(--c-muted); font-size: .9rem; }
.mbr-notifs small { color: var(--c-muted); font-size: .8rem; }
.mbr-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px clamp(18px, 3vw, 26px); }
.mbr-quick a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-alt); color: var(--c-navy); font-weight: 650; text-decoration: none; font-size: .93rem; }
.mbr-quick a:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.mbr-quick .ic { color: var(--c-primary); }
.mbr-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 20px; text-align: center; color: var(--c-muted); }
.mbr-empty p { margin: 0; }
.mbr-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 30%; background: var(--c-surface-alt); color: var(--c-primary); }
.mbr-empty--big { padding: clamp(36px, 6vw, 60px) 20px; }
.mbr-empty--big h3 { margin: 6px 0 0; }

/* statuts */
.mbr-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.mbr-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mbr-status--draft { background: #F2F4F7; color: #475467; }
.mbr-status--pending { background: #FEF0C7; color: #B54708; }
.mbr-status--approved { background: #D1FADF; color: #027A48; }
.mbr-status--rejected { background: #FEE4E2; color: #B42318; }

/* formulaires de l'espace */
.mbr-form .form__row { gap: 0 18px; }
.mbr-avatar-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--c-line); }
.mbr-file { position: relative; overflow: hidden; }
.mbr-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mbr-file:focus-within { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.mbr-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .9rem; color: var(--c-muted); cursor: pointer; }
.mbr-check input { accent-color: var(--c-primary); width: 18px; height: 18px; }
.mbr-prefix { display: flex; align-items: stretch; }
.mbr-prefix span { display: grid; place-items: center; padding-inline: 14px; border: 1.5px solid var(--c-line); border-inline-end: 0; border-radius: 14px 0 0 14px; background: #fff; color: var(--c-muted); font-weight: 700; }
[dir="rtl"] .mbr-prefix span { border-radius: 0 14px 14px 0; }
.mbr-prefix input { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }
.mbr-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 0; }
.mbr-dl dt { color: var(--c-muted); font-weight: 600; }
.mbr-dl dd { margin: 0; font-weight: 700; color: var(--c-navy); }

/* --------------------------------------------------------------- mes articles */
.mbr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: s; }
@media (min-width: 720px) { .mbr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mbr-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--c-line); font-weight: 650; font-size: .92rem; color: var(--c-navy); }
.mbr-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 800; font-size: .85rem; flex: none; }
.mbr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .mbr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mbr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mbr-card { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 20px 44px -36px rgba(var(--c-navy-rgb), .6); transition: transform .2s, box-shadow .2s; }
.mbr-card:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -36px rgba(var(--c-navy-rgb), .7); }
.mbr-card__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(180deg, var(--c-aqua-soft) 0 60%, var(--c-mint-soft) 60%); }
.mbr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mbr-card__ph { display: grid; place-items: center; height: 100%; color: var(--c-primary); opacity: .5; }
.mbr-card__ph .ic { width: 40px; height: 40px; }
.mbr-card__media .mbr-status { position: absolute; top: 12px; inset-inline-start: 12px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); }
.mbr-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.mbr-card__body h3 { font-size: 1.12rem; margin: 0; }
.mbr-card__body h3 a { color: var(--c-navy); text-decoration: none; }
.mbr-card__body h3 a:hover { color: var(--c-primary); }
.mbr-card__meta { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--c-muted); font-size: .84rem; font-weight: 600; }
.mbr-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.mbr-iconbtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--c-line); background: #fff; color: var(--c-muted); cursor: pointer; }
.mbr-iconbtn:hover { color: #B42318; border-color: #FDA29B; background: #FEF3F2; }
.mbr-note { display: flex; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: #FEF3F2; color: #912018; font-size: .88rem; }
.mbr-note .ic { flex: none; margin-top: 3px; }

/* --------------------------------------------------------------- rédaction */
.mbr-back { margin: 0; }
.mbr-back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.mbr-statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--c-line); color: var(--c-muted); font-size: .93rem; }
.mbr-statusbar .btn { margin-inline-start: auto; }
.mbr-review-note { padding: 16px 18px; border-radius: 14px; background: var(--c-accent-soft); border-inline-start: 4px solid var(--c-accent); }
.mbr-review-note strong { display: flex; align-items: center; gap: 8px; color: var(--c-navy); margin-bottom: 6px; }
.mbr-review-note p { margin: 0; }
.mbr-editor-form { display: grid; gap: 22px; }
@media (min-width: 1100px) { .mbr-editor-form { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .mbr-editor-side { position: sticky; top: 100px; } }
.mbr-title-input { font-family: var(--f-head) !important; font-size: 1.35rem !important; font-weight: 700; color: var(--c-navy) !important; }
.mbr-rte { border: 1.5px solid var(--c-line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.mbr-rte:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }
.mbr-rte__bar { position: sticky; top: 76px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-line); background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-radius: 15px 15px 0 0; }
.mbr-rte__bar button { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; border: 0; background: none; color: var(--c-navy); cursor: pointer; font-weight: 800; font-family: var(--f-head); }
.mbr-rte__bar button:hover { background: var(--c-surface-alt); }
.mbr-rte__bar button.is-on { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.mbr-rte__sep { width: 1px; height: 22px; margin-inline: 4px; background: var(--c-line); }
.mbr-rte__area { min-height: 340px; padding: 18px 20px; outline: none; font-size: 1.05rem; }
.mbr-rte__area:empty::before { content: attr(data-placeholder); color: var(--c-muted); pointer-events: none; }
.mbr-rte__area a { text-decoration: underline; }
.mbr-rte__foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--c-line); font-size: .8rem; color: var(--c-muted); }
.mbr-rte__saved { display: inline-flex; align-items: center; gap: 4px; color: var(--c-secondary); }
.mbr-rte:not([hidden]) + textarea { display: none; }
.mbr-drop { position: relative; display: grid; place-items: center; gap: 6px; min-height: 150px; padding: 14px; border-radius: 16px; border: 2px dashed var(--c-line); background: var(--c-surface-alt); color: var(--c-muted); font-weight: 650; text-align: center; cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
.mbr-drop:hover, .mbr-drop.is-over { border-color: var(--c-primary); background: var(--c-primary-soft); }
.mbr-drop:focus-within { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.mbr-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mbr-drop__preview:not(:empty) { position: absolute; inset: 0; }
.mbr-drop__preview img { width: 100%; height: 100%; object-fit: cover; }
.mbr-drop__preview:not(:empty) + .mbr-drop__txt { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--c-navy); align-self: end; }
.mbr-editor-actions { display: grid; gap: 10px; margin-top: 8px; }
.mbr-preview-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.mbr-lead { font-size: 1.12rem; color: var(--c-muted); }
.mbr-preview-cover { width: 100%; border-radius: var(--r-sm); margin-bottom: 20px; }

/* --------------------------------------------------------------- sous un article : étiquettes, auteur */
.mbr-byline { display: grid; gap: 22px; margin-top: 36px; }
.mbr-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mbr-tags a { display: inline-block; padding: 6px 13px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 700; font-size: .86rem; text-decoration: none; transition: .2s; }
.mbr-tags a:hover { background: var(--c-primary); color: #fff; }
.mbr-author-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: var(--r); background: linear-gradient(135deg, var(--c-surface-alt), #fff); border: 1px solid var(--c-line); }
.mbr-author-card__eyebrow { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); }
[dir="rtl"] .mbr-author-card__eyebrow { letter-spacing: 0; }
.mbr-author-card__name { margin: 2px 0 6px; font-family: var(--f-head); font-weight: 800; font-size: 1.2rem; color: var(--c-navy); }
.mbr-author-card__bio { margin: 0 0 8px; color: var(--c-muted); }

/* --------------------------------------------------------------- commentaires */
.mbr-comments { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--c-line); margin-bottom: clamp(40px, 6vw, 72px); }
.mbr-comments__title { display: flex; align-items: center; gap: 10px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.mbr-comments__title .ic { color: var(--c-primary); }
.mbr-count { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding-inline: 8px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: .95rem; }
.mbr-thread { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 18px; }
.mbr-thread--replies { margin: 14px 0 0; padding-inline-start: clamp(20px, 6vw, 58px); border-inline-start: 2px solid var(--c-line); gap: 14px; }
.mbr-cmt { display: flex; gap: 14px; scroll-margin-top: 110px; }
.mbr-cmt:target .mbr-cmt__main { box-shadow: 0 0 0 3px var(--c-accent); }
.mbr-cmt__main { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 4px 18px 18px 18px; background: #fff; border: 1px solid var(--c-line); transition: box-shadow .3s; }
[dir="rtl"] .mbr-cmt__main { border-radius: 18px 4px 18px 18px; }
.mbr-cmt--reply .mbr-cmt__main { background: var(--c-surface-alt); }
.mbr-cmt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.mbr-cmt__name { font-weight: 800; color: var(--c-navy); text-decoration: none; }
a.mbr-cmt__name:hover { color: var(--c-primary); }
.mbr-cmt__date { color: var(--c-muted); font-size: .82rem; }
.mbr-cmt__body { overflow-wrap: anywhere; }
.mbr-cmt__reply { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .86rem; font-weight: 700; text-decoration: none; }
.mbr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.mbr-badge--staff { background: var(--c-navy); color: #fff; }
.mbr-badge--staff .ic { width: .95em; height: .95em; color: var(--c-accent); }
.mbr-cform { padding: clamp(20px, 3.5vw, 32px); border-radius: calc(var(--r) * 1.1); background: #fff; border: 1px solid var(--c-line); box-shadow: 0 30px 70px -50px rgba(var(--c-navy-rgb), .6); scroll-margin-top: 110px; }
.mbr-cform__title { font-size: 1.25rem; }
.mbr-cform__replying { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 650; font-size: .92rem; }
.mbr-cform__replying[hidden] { display: none; }
.mbr-cform__replying a { margin-inline-start: auto; font-weight: 700; }
.mbr-cform__as { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--c-muted); font-weight: 600; }
.mbr-cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mbr-cform__foot .mbr-muted { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------- pages publiques */
.mbr-author__in { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 4vw, 36px); position: relative; }
.mbr-author__in > div { flex: 1; min-width: 240px; }
.mbr-author__handle { margin: -8px 0 12px; color: var(--c-primary); font-weight: 700; }
.mbr-author__facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.mbr-author__facts li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-weight: 650; font-size: .9rem; color: var(--c-navy); }
.mbr-author__facts .ic { color: var(--c-primary); }
.mbr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; color: var(--c-muted); font-weight: 600; }
.mbr-pager a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--c-line); font-weight: 700; text-decoration: none; }
.mbr-pager a:hover { border-color: var(--c-primary); }

/* --------------------------------------------------------------- pied de page : lettre d'information */
.mbr-nl { scroll-margin-top: 110px; }
.mbr-nl__text { margin: 0 0 14px; color: rgba(255,255,255,.75); font-size: .93rem; }
.mbr-nl__row { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); transition: border-color .2s; }
.mbr-nl__row:focus-within { border-color: var(--c-aqua); }
.mbr-nl__row input { flex: 1; min-width: 0; height: 44px; padding-inline: 16px; border: 0; background: transparent; color: #fff; font: inherit; }
.mbr-nl__row input::placeholder { color: rgba(255,255,255,.55); }
.mbr-nl__row input:focus { outline: none; }
.mbr-nl__btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--c-accent); color: var(--c-navy); cursor: pointer; transition: transform .2s; }
.mbr-nl__btn:hover { transform: scale(1.06); }
.mbr-nl__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .8rem; color: rgba(255,255,255,.7); cursor: pointer; }
.mbr-nl__consent input { margin-top: 3px; accent-color: var(--c-aqua); }
.mbr-nl__msg { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; font-weight: 600; font-size: .9rem; }
.mbr-nl__msg--ok { background: rgba(255,255,255,.12); color: #fff; }
.mbr-nl__msg--ok .ic { color: var(--c-accent); }
.mbr-nl__msg--err { background: rgba(254, 228, 226, .15); color: #FECDCA; }

@media print { .mbr-acc, .mbr-acc__login, .mbr-cform, .mbr-toast, .mbr-nl { display: none !important; } }