/* MBS "page a vie / avis fournisseur" V2 — ported from the validated Claude Design
   "Avis Roamic.dc.html" (direction 1B, hero pleine largeur). EVERY rule scoped under
   .mbs-avis-v2 so it can never collide with the Rehub theme. Poppins is loaded
   site-wide (OMGF). Desktop-first; <=768px overrides at the bottom. */

/* Preview-only full-width: these rules apply ONLY on a page that contains the
   [mbs_avis_v2] shortcode (via :has), so they can never affect other pages. They
   hide the Rehub sidebar + expand the content column so the design renders at its
   intended width instead of being squeezed into the theme's ~788px sidebar column. */
body:has(.mbs-avis-v2) aside.sidebar { display: none !important; }
body:has(.mbs-avis-v2) #content.main-side { width: 100% !important; max-width: 100% !important; float: none !important; }
body:has(.mbs-avis-v2) .rh-post-wrapper { max-width: 100% !important; }
body:has(.mbs-avis-v2) #content .entry-title,
body:has(.mbs-avis-v2) .rh-post-wrapper > h1:first-child { display: none !important; }

.mbs-avis-v2 { font-family: 'Poppins', system-ui, sans-serif; color: #0f172a; max-width: 920px; margin: 0 auto; padding: 0 20px; line-height: 1.5; }
.mbs-avis-v2 *, .mbs-avis-v2 *::before, .mbs-avis-v2 *::after { box-sizing: border-box; }
.mbs-avis-v2 a { color: #0284c7; text-decoration: none; }

/* ---- HERO ---- */
.mbs-avis-v2 .av-hero { background: transparent; padding: 12px 0 40px; text-align: center; margin: 0; }
.mbs-avis-v2 .av-bc { font-size: 12.5px; color: #94a3b8; font-weight: 500; display: flex; gap: 7px; align-items: center; justify-content: flex-start; margin-bottom: 22px; }
.mbs-avis-v2 .av-bc a { color: #94a3b8; }
.mbs-avis-v2 .av-bc .cur { color: #334155; font-weight: 600; }
.mbs-avis-v2 .av-verified { font-size: 13px; font-weight: 700; color: #059669; background: #ecfdf5; padding: 5px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.mbs-avis-v2 .av-logo { width: 78px; height: 78px; border-radius: 20px; background: #fff; border: 1px solid #e6eef6; box-shadow: 0 16px 32px -16px rgba(2,132,199,.55); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; overflow: hidden; }
.mbs-avis-v2 .av-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.mbs-avis-v2 .av-logo span { font-weight: 800; font-size: 18px; color: #0284c7; letter-spacing: -.02em; }
.mbs-avis-v2 .av-h1 { margin: 0 0 10px; font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; max-width: 760px; margin-left: auto; margin-right: auto; }
.mbs-avis-v2 .av-h1 .em { color: #0ea5e9; font-style: italic; }
.mbs-avis-v2 .av-rule { width: 92px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); margin: 4px auto 20px; }
.mbs-avis-v2 .av-ratingline { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 16px; flex-wrap: wrap; }
.mbs-avis-v2 .av-stars { color: #f4b740; letter-spacing: 2px; }
.mbs-avis-v2 .av-lead { margin: 0 auto 26px; font-size: 18px; line-height: 1.6; color: #334155; max-width: 620px; }
.mbs-avis-v2 .av-cta { display: inline-flex; align-items: center; gap: 10px; background: #dc2626; color: #fff; font-weight: 700; font-size: 18px; padding: 18px 40px; border-radius: 16px; box-shadow: 0 18px 34px -14px rgba(220,38,38,.65); transition: background .15s; }
.mbs-avis-v2 .av-cta:hover { background: #b91c1c; color: #fff; }
.mbs-avis-v2 .av-promo { display: inline-flex; align-items: center; gap: 13px; margin-top: 22px; background: #24365f; border: 1px solid #24365f; border-radius: 15px; padding: 11px 11px 11px 18px; font-size: 14.5px; color: #fff; box-shadow: 0 12px 26px -14px rgba(36,54,95,.55); transition: box-shadow .2s, transform .2s; }
.mbs-avis-v2 .av-promo:hover { color: #fff; box-shadow: 0 16px 32px -14px rgba(15,23,42,.7); transform: translateY(-2px); }
.mbs-avis-v2 .av-promo-chip { display: inline-flex; align-items: center; gap: 6px; background: #dc2626; color: #fff; font-weight: 700; font-size: 13.5px; padding: 9px 15px; border-radius: 11px; white-space: nowrap; }
.mbs-avis-v2 .av-byline { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; color: #64748b; margin: 20px 0 6px; }
.mbs-avis-v2 .av-byline img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; border: 2px solid #e0f2fe; }
.mbs-avis-v2 .av-byline b { color: #0f172a; }

/* ---- SECTIONS ---- */
.mbs-avis-v2 .av-section { margin-top: 46px; }
.mbs-avis-v2 .av-h2 { margin: 0 0 4px; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.mbs-avis-v2 .av-h2rule { width: 56px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); margin-bottom: 20px; }
.mbs-avis-v2 .av-prose { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #334155; }
.mbs-avis-v2 .av-prose:last-child { margin-bottom: 0; }

/* essentials */
.mbs-avis-v2 .av-ess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mbs-avis-v2 .av-ess-item { background: #fff; border: 1px solid #e8eef4; border-radius: 16px; padding: 20px 14px; text-align: center; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .2s, transform .2s, border-color .2s; }
.mbs-avis-v2 .av-ess-item:hover { box-shadow: 0 16px 30px -20px rgba(2, 132, 199, .4); transform: translateY(-3px); border-color: #bae6fd; }
.mbs-avis-v2 .av-ess-ic { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.mbs-avis-v2 .av-ess-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #0f172a; font-variant-numeric: tabular-nums; }
.mbs-avis-v2 .av-ess-l { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 4px; }

/* notes */
.mbs-avis-v2 .av-notes { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch; }
.mbs-avis-v2 .av-note-card { border: 1px solid #e0f2fe; background: #f8fbff; border-radius: 20px; padding: 26px 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 18px 36px -24px rgba(2, 132, 199, .4); }
.mbs-avis-v2 .av-note-lab { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #0284c7; margin-bottom: 10px; }
.mbs-avis-v2 .av-note-big { font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #0f172a; }
.mbs-avis-v2 .av-note-big span:last-child { font-size: 22px; color: #94a3b8; font-weight: 600; }
.mbs-avis-v2 .av-dist { border: 1px solid #eef2f6; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; background: #fff; }
.mbs-avis-v2 .av-dist-rows { display: flex; flex-direction: column; gap: 8px; }
.mbs-avis-v2 .av-dist-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.mbs-avis-v2 .av-dist-row .st { width: 34px; color: #64748b; font-weight: 600; }
.mbs-avis-v2 .av-dist-bar { flex: 1; height: 9px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.mbs-avis-v2 .av-dist-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f4b740, #fbd36b); border-radius: 99px; }
.mbs-avis-v2 .av-dist-row .pc { width: 38px; text-align: right; color: #94a3b8; }
.mbs-avis-v2 .av-dist-foot { border-top: 1px solid #f1f5f9; padding-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #334155; }
.mbs-avis-v2 .av-testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.mbs-avis-v2 .av-testi-card { border: 1px solid #eef2f6; border-radius: 16px; padding: 16px 18px; background: #fbfdff; }
.mbs-avis-v2 .av-testi-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #334155; }
.mbs-avis-v2 .av-testi-card .who { font-size: 12.5px; color: #94a3b8; font-weight: 600; }

/* pros/cons */
.mbs-avis-v2 .av-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mbs-avis-v2 .av-pros { border: 1px solid #d1fae5; background: #f0fdf9; border-radius: 18px; padding: 22px; }
.mbs-avis-v2 .av-cons { border: 1px solid #fee2e2; background: #fff6f6; border-radius: 18px; padding: 22px; }
.mbs-avis-v2 .av-pc h3 { font-weight: 800; font-size: 15px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.mbs-avis-v2 .av-pros h3 { color: #059669; }
.mbs-avis-v2 .av-cons h3 { color: #dc2626; }
.mbs-avis-v2 .av-pc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mbs-avis-v2 .av-pc li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: #334155; }
.mbs-avis-v2 .av-pros li .ic { color: #10b981; font-weight: 800; flex-shrink: 0; }
.mbs-avis-v2 .av-cons li .ic { color: #dc2626; font-weight: 800; flex-shrink: 0; }

/* steps */
.mbs-avis-v2 .av-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mbs-avis-v2 .av-step { display: flex; gap: 14px; border: 1px solid #eef2f6; border-radius: 16px; padding: 18px; background: #fff; }
.mbs-avis-v2 .av-step-n { width: 34px; height: 34px; border-radius: 999px; background: #e0f2fe; color: #0284c7; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.mbs-avis-v2 .av-step-t { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.mbs-avis-v2 .av-step-d { font-size: 14px; color: #64748b; line-height: 1.5; }

/* plans */
.mbs-avis-v2 .av-plans { border: 1px solid #eef2f6; border-radius: 18px; overflow: hidden; }
.mbs-avis-v2 .av-plans-head, .mbs-avis-v2 .av-plans-row { display: grid; grid-template-columns: 1.7fr 0.8fr 0.7fr 0.9fr; align-items: center; column-gap: 10px; }
.mbs-avis-v2 .av-plans-head { background: #f8fafc; padding: 13px 20px; font-size: 12px; font-weight: 700; color: #94a3b8; letter-spacing: .02em; }
.mbs-avis-v2 .av-plans-row { padding: 15px 20px; border-top: 1px solid #f1f5f9; font-size: 15px; }
.mbs-avis-v2 .av-plans-row .co { font-weight: 600; }
.mbs-avis-v2 .av-plans-row .mu { color: #64748b; }
.mbs-avis-v2 .av-plans-row .pr { text-align: left; color: #0284c7; font-weight: 700; }
.mbs-avis-v2 .av-pill { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #7dd3fc; color: #0284c7; font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 999px; background: #f0f9ff; transition: background .15s; }
.mbs-avis-v2 .av-pill:hover { background: #e0f2fe; color: #0369a1; }
.mbs-avis-v2 .av-pill:hover { background: #e0f2fe; color: #0284c7; }
.mbs-avis-v2 .av-pill-wrap { display: flex; justify-content: center; margin-top: 18px; }
.mbs-avis-v2 .av-pill-red { background: #dc2626; color: #fff; border-color: #dc2626; }
.mbs-avis-v2 .av-pill-red:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.mbs-avis-v2 .av-note-tag { font-size: 13px; font-weight: 500; color: #64748b; }
.mbs-avis-v2 .av-extnotes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.mbs-avis-v2 .av-extnote { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e6eef6; border-radius: 14px; padding: 15px 18px; box-shadow: 0 10px 22px -18px rgba(15,23,42,.35); }
.mbs-avis-v2 .av-extnote-head { display: flex; align-items: center; gap: 8px; }
.mbs-avis-v2 .av-extnote-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #f1f5f9; flex: none; }
.mbs-avis-v2 .av-extnote-ic svg { display: block; }
.mbs-avis-v2 .av-extnote-lab { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: .01em; }
.mbs-avis-v2 .av-extnote-score { font-size: 23px; color: #0f172a; line-height: 1; font-weight: 800; }
.mbs-avis-v2 .av-extnote-score b { font-weight: 800; }
.mbs-avis-v2 .av-extnote-count { font-size: 12px; color: #64748b; font-weight: 500; }
@media (max-width: 768px) {
  .mbs-avis-v2 .av-extnote { flex: 0 1 auto; padding: 11px 15px; box-shadow: none; }
  .mbs-avis-v2 .av-extnote-score { font-size: 19px; }
}
.mbs-avis-v2 .av-final { text-align: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px 24px; }
.mbs-avis-v2 .av-final-h { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 16px; }
.mbs-avis-v2 .av-final-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mbs-avis-v2 .av-final-links a { display: inline-flex; align-items: center; border: none; color: #fff; font-weight: 700; font-size: 14.5px; padding: 12px 24px; border-radius: 999px; background: #17264a; box-shadow: 0 12px 24px -14px rgba(23,38,74,.6); transition: filter .15s, transform .15s; }
.mbs-avis-v2 .av-final-links a:nth-child(even) { background: #dc2626; box-shadow: 0 12px 24px -14px rgba(220,38,38,.6); }
.mbs-avis-v2 .av-final-links a:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.1); }
.mbs-avis-v2 .av-promo-ticket { display: inline-flex; align-items: center; flex: none; }
.mbs-avis-v2 .av-promo-ticket svg { display: block; }
.mbs-avis-v2 .av-verdict-cta { display: flex; justify-content: center; margin-top: 22px; }
.mbs-avis-v2 .av-plans-empty { border: 1px solid #e0f2fe; background: linear-gradient(180deg, #f0f9ff, #fff); border-radius: 20px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mbs-avis-v2 .av-plans-empty .t { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.mbs-avis-v2 .av-plans-empty .s { font-size: 14.5px; color: #64748b; line-height: 1.55; margin-top: 6px; max-width: 460px; }

/* verdict */
.mbs-avis-v2 .av-verdict { border: 1px solid #e0f2fe; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -34px rgba(2,132,199,.5); }
.mbs-avis-v2 .av-verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #24365f; padding: 18px 24px; color: #fff; flex-wrap: wrap; }
.mbs-avis-v2 .av-verdict-head .ti { font-size: 18px; font-weight: 700; }
.mbs-avis-v2 .av-verdict-head .no { display: flex; align-items: center; gap: 8px; }
.mbs-avis-v2 .av-verdict-head .no b { font-size: 22px; }
.mbs-avis-v2 .av-verdict-body { padding: 24px; background: #fff; }
.mbs-avis-v2 .av-verdict-body > p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: #334155; }
.mbs-avis-v2 .av-verdict-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mbs-avis-v2 .av-verdict-cols h4 { margin: 0 0 12px; font-size: 14px; font-weight: 800; }
.mbs-avis-v2 .av-verdict-cols .for h4 { color: #059669; }
.mbs-avis-v2 .av-verdict-cols .not h4 { color: #dc2626; }
.mbs-avis-v2 .av-verdict-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mbs-avis-v2 .av-verdict-cols li { font-size: 14px; color: #334155; display: flex; gap: 9px; align-items: flex-start; }
.mbs-avis-v2 .av-vic { width: 20px; height: 20px; border-radius: 6px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.mbs-avis-v2 .for .av-vic { background: #ecfdf5; color: #10b981; }
.mbs-avis-v2 .not .av-vic { background: #fef2f2; color: #dc2626; }

/* alternatives */
.mbs-avis-v2 .av-alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mbs-avis-v2 .av-alt { border: 1px solid #eef2f6; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: #fff; color: inherit; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: box-shadow .2s, transform .2s, border-color .2s; }
.mbs-avis-v2 .av-alt:hover { box-shadow: 0 22px 40px -24px rgba(2,132,199,.45); transform: translateY(-3px); border-color: #bae6fd; color: inherit; }
.mbs-avis-v2 .av-alt-hd { display: flex; align-items: center; gap: 12px; }
.mbs-avis-v2 .av-alt-mono { width: 48px; height: 48px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef2f6; color: #334155; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mbs-avis-v2 .av-alt-mono img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mbs-avis-v2 .av-alt-name { font-weight: 800; font-size: 16px; }
.mbs-avis-v2 .av-alt-rate { font-size: 13px; color: #f4b740; font-weight: 600; }
.mbs-avis-v2 .av-alt-rate span { color: #94a3b8; font-weight: 500; }
.mbs-avis-v2 .av-alt-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: #0284c7; background: #f0f9ff; padding: 4px 10px; border-radius: 999px; }
.mbs-avis-v2 .av-alt-note { font-size: 13.5px; color: #64748b; line-height: 1.5; }
.mbs-avis-v2 .av-alt-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid #e0f2fe; background: #f0f9ff; color: #0284c7; font-weight: 700; font-size: 13.5px; padding: 11px 14px; border-radius: 12px; }

/* faq */
.mbs-avis-v2 .av-faq { display: flex; flex-direction: column; gap: 10px; }
.mbs-avis-v2 .av-faq-item { border: 1px solid #e8eef4; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.mbs-avis-v2 .av-faq-item.open { border-color: #bae6fd; box-shadow: 0 12px 28px -20px rgba(2, 132, 199, .32); }
.mbs-avis-v2 .av-faq-q { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; text-align: left; font-size: 15.5px; font-weight: 700; color: #0f172a; font-family: inherit; }
.mbs-avis-v2 .av-faq-q .sg { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #f0f9ff; color: #0ea5e9; font-size: 20px; font-weight: 400; flex-shrink: 0; line-height: 1; transition: transform .2s, background .2s; }
.mbs-avis-v2 .av-faq-item.open .sg { transform: rotate(45deg); background: #e0f2fe; }
.mbs-avis-v2 .av-faq-a { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: #475569; display: none; }
.mbs-avis-v2 .av-faq-item.open .av-faq-a { display: block; }

/* maillage */
.mbs-avis-v2 .av-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbs-avis-v2 .av-link { display: flex; align-items: center; gap: 14px; border: 1px solid #eef2f6; border-radius: 16px; padding: 16px 18px; background: #fff; color: inherit; transition: border-color .2s, background .2s; }
.mbs-avis-v2 .av-link:hover { border-color: #bae6fd; background: #f8fbff; color: inherit; }
.mbs-avis-v2 .av-link-ic { width: 38px; height: 38px; border-radius: 11px; background: #f0f9ff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.mbs-avis-v2 .av-link-t { display: block; font-weight: 700; font-size: 14.5px; }
.mbs-avis-v2 .av-link-s { display: block; font-size: 12.5px; color: #94a3b8; }
.mbs-avis-v2 .av-link-ar { width: 32px; height: 32px; border-radius: 999px; background: #f0f9ff; color: #0284c7; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; }

/* disclosure */
.mbs-avis-v2 .av-disc { margin: 30px 0 0; font-size: 12px; line-height: 1.6; color: #94a3b8; }

/* sticky CTA bar (revealed by JS on scroll) */
.mbs-avis-v2-sticky { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0; opacity: 0; transform: translateY(140%); transition: opacity .25s, transform .25s; pointer-events: none; z-index: 9990; }
.mbs-avis-v2-sticky.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mbs-avis-v2-sticky .in { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 92px); background: #24365f; border: none; border-radius: 0; box-shadow: 0 -6px 28px -12px rgba(15,23,42,.55); padding: clamp(11px, 1.4vw, 18px) clamp(16px, 4vw, 64px); width: 100%; color: #fff; text-decoration: none; cursor: pointer; }
.mbs-avis-v2-sticky .in:hover { color: #fff; }
.mbs-avis-v2-sticky .lft { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); min-width: 0; }
.mbs-avis-v2-sticky .lg { width: clamp(58px, 5.6vw, 78px); height: clamp(58px, 5.6vw, 78px); border-radius: 16px; background: #fff; border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mbs-avis-v2-sticky .lg img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.mbs-avis-v2-sticky .txt { min-width: 0; text-align: left; }
.mbs-avis-v2-sticky .l1 { font-weight: 800; font-size: clamp(20px, 2.15vw, 31px); line-height: 1.12; color: #fff; white-space: nowrap; }
.mbs-avis-v2-sticky .l1 .pname { font-weight: 800; }
.mbs-avis-v2-sticky .l1 .disc { font-weight: 900; font-size: 1.06em; margin-left: .55em; }
.mbs-avis-v2-sticky .mavec { display: none; }
.mbs-avis-v2-sticky .l2 { font-size: clamp(17px, 1.9vw, 26px); font-weight: 700; color: #fff; margin-top: 2px; white-space: nowrap; }
.mbs-avis-v2-sticky .nm { font-weight: 800; font-size: clamp(19px, 2vw, 27px); line-height: 1.1; color: #fff; }
.mbs-avis-v2-sticky .sub { font-size: clamp(16px, 1.85vw, 25px); font-weight: 700; color: #fff; margin-top: 3px; }
.mbs-avis-v2-sticky .sub .av-stars { color: #f59e0b; }
.mbs-avis-v2-sticky .code { display: inline-block; vertical-align: middle; background: rgba(255,255,255,.2); color: #fff; padding: 2px 12px; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: .3px; font-size: .95em; }
.mbs-avis-v2-sticky .bt { flex-shrink: 0; display: inline-flex; align-items: center; background: #dc2626; color: #fff; font-weight: 800; font-size: clamp(17px, 1.8vw, 22px); padding: clamp(13px, 1.4vw, 18px) clamp(28px, 3.2vw, 52px); border-radius: 14px; box-shadow: 0 12px 26px -8px rgba(220,38,38,.75); white-space: nowrap; }
.mbs-avis-v2-sticky .bt:hover { background: #b91c1c; color: #fff; box-shadow: 0 14px 30px -8px rgba(220,38,38,.85); }
/* Cas « affilie sans code » : nom en label majuscules (eyebrow) + CTA majuscule qui ressort, montant en accent ambre. */
.mbs-avis-v2-sticky .payg { text-align: left; min-width: 0; }
.mbs-avis-v2-sticky .payg .nm { display: block; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; font-size: clamp(12px, 1.15vw, 15px); color: #cbd5e1; line-height: 1; margin-bottom: 4px; }
.mbs-avis-v2-sticky .payg .cta { display: block; text-transform: uppercase; letter-spacing: .01em; font-weight: 900; font-size: clamp(20px, 2.15vw, 31px); line-height: 1.03; color: #fff; }
.mbs-avis-v2-sticky .payg .cta .amt { color: #fbbf24; }
@media (max-width: 640px) {
  .mbs-avis-v2-sticky .payg .nm { font-size: clamp(10px, 2.7vw, 13px); letter-spacing: .12em; margin-bottom: 2px; }
  .mbs-avis-v2-sticky .payg .cta { font-size: clamp(15px, 4.3vw, 22px); line-height: 1.1; }
  .mbs-avis-v2-sticky .in { justify-content: center; gap: clamp(10px, 2.6vw, 26px); padding: 8px clamp(11px, 3vw, 24px); }
  .mbs-avis-v2-sticky .lft { gap: clamp(9px, 2.3vw, 16px); }
  .mbs-avis-v2-sticky .lg { width: clamp(42px, 11vw, 60px); height: clamp(42px, 11vw, 60px); border-radius: 12px; }
  .mbs-avis-v2-sticky .rdc { display: none; }
  .mbs-avis-v2-sticky .davec { display: none; }
  .mbs-avis-v2-sticky .mavec { display: inline; }
  .mbs-avis-v2-sticky .l1 { font-size: clamp(14px, 4.3vw, 24px); white-space: nowrap; line-height: 1.15; }
  .mbs-avis-v2-sticky .l1 .disc { margin-left: .42em; font-size: 1.18em; }
  .mbs-avis-v2-sticky .l2 { font-size: clamp(12px, 3.6vw, 20px); white-space: nowrap; line-height: 1.15; margin-top: 3px; }
  .mbs-avis-v2-sticky .code { padding: 2px 10px; font-size: 1.1em; }
  .mbs-avis-v2-sticky .nm { font-size: clamp(16px, 4.3vw, 24px); }
  .mbs-avis-v2-sticky .sub { font-size: clamp(13px, 3.3vw, 19px); margin-top: 0; white-space: normal; line-height: 1.25; }
  .mbs-avis-v2-sticky .bt { font-size: clamp(11px, 3vw, 18px); padding: clamp(8px, 2.4vw, 14px) clamp(12px, 3.4vw, 26px); border-radius: 11px; box-shadow: 0 8px 18px -8px rgba(220,38,38,.7); }
}

/* ---- MOBILE (<=768px) ---- */
@media (max-width: 768px) {
  .mbs-avis-v2 { padding: 0 14px; }
  .mbs-avis-v2 .av-hero { padding: 20px 16px 28px; border-radius: 18px; }
  .mbs-avis-v2 .av-h1 { font-size: 26px; }
  .mbs-avis-v2 .av-lead { font-size: 14.5px; }
  .mbs-avis-v2 .av-cta { display: flex; justify-content: center; font-size: 16.5px; padding: 16px; width: 100%; }
  .mbs-avis-v2 .av-promo { display: flex; text-align: left; font-size: 12.5px; margin-top: 16px; }
  .mbs-avis-v2 .av-section { margin-top: 30px; }
  .mbs-avis-v2 .av-h2 { font-size: 20px; }
  .mbs-avis-v2 .av-ess { grid-template-columns: 1fr 1fr; }
  .mbs-avis-v2 .av-ess-v { font-size: 18px; }
  .mbs-avis-v2 .av-notes { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-testi { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-pc { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-steps { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-verdict-cols { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-alts { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-links { grid-template-columns: 1fr; }
  .mbs-avis-v2 .av-prose { font-size: 14.5px; }
  .mbs-avis-v2 .av-plans-head, .mbs-avis-v2 .av-plans-row { grid-template-columns: 1.3fr 1fr 1fr; }
  .mbs-avis-v2 .av-plans-head .h-days, .mbs-avis-v2 .av-plans-row .r-days { display: none; }
}

/* ============================================================================
   ROUND 2 (retours Etienne) — theme overrides + layout fixes.
   ============================================================================ */

/* #1 — kill the Rehub article "encadre" (framed card) + the theme page title,
   so the design sits flush like the promo pages. */
body:has(.mbs-avis-v2) .rh-post-wrapper,
body:has(.mbs-avis-v2) .rh-content,
body:has(.mbs-avis-v2) article.post {
  border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
body:has(.mbs-avis-v2) .rh-post-wrapper .entry-title,
body:has(.mbs-avis-v2) article.post > .title,
body:has(.mbs-avis-v2) h1.entry-title,
body:has(.mbs-avis-v2) .rh-post-wrapper > .title,
body:has(.mbs-avis-v2) .post-title { display: none !important; }

/* #10 — hide the Rehub author-bio box at the bottom. */
body:has(.mbs-avis-v2) .rh-author-box,
body:has(.mbs-avis-v2) .author-box,
body:has(.mbs-avis-v2) [class*="author-bio"],
body:has(.mbs-avis-v2) .about-author,
body:has(.mbs-avis-v2) .rh-authorbox { display: none !important; }

/* #2 — byline (Etienne photo) accents. */
.mbs-avis-v2 .av-byline .av-vsep { color: #cbd5e1; }
.mbs-avis-v2 .av-byline .av-vok { color: #059669; font-weight: 600; }

/* #3 — hero CTA + promo STACKED, full-width, centered. */
.mbs-avis-v2 .av-cta-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 470px; margin: 4px auto 0; }
.mbs-avis-v2 .av-cta-stack .av-cta { display: flex; justify-content: center; width: 100%; }
.mbs-avis-v2 .av-cta-stack .av-promo { display: flex; width: 100%; margin-top: 0; text-align: left; justify-content: center; align-items: center; gap: 16px; padding: 11px 16px; }
.mbs-avis-v2 .av-promo-lbl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 15.5px; }
@media (max-width: 768px) { .mbs-avis-v2 .av-promo-ticket { display: none; } }
.mbs-avis-v2 .av-promo-lbl b { color: #fff; }
.mbs-avis-v2 .av-promo-code { display: inline-block; background: rgba(255,255,255,.16); color: #fff; padding: 1px 8px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .4px; }

/* #6 — rich paragraphs (wpautop output) styled like .av-prose. */
.mbs-avis-v2 .av-rich p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #334155; }
.mbs-avis-v2 .av-rich p:last-child { margin-bottom: 0; }
.mbs-avis-v2 .av-rich b, .mbs-avis-v2 .av-rich strong { color: #0f172a; }
.mbs-avis-v2 .av-faq-a p { margin: 0 0 10px; }
.mbs-avis-v2 .av-faq-a p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .mbs-avis-v2 .av-rich p { font-size: 14.5px; }
}

/* #4 (round 4) — hide the Simple Author Box plugin box at the bottom (the real selectors). */
body:has(.mbs-avis-v2) .saboxplugin-wrap,
body:has(.mbs-avis-v2) .sabox-authors,
body:has(.mbs-avis-v2) .saboxplugin-desc { display: none !important; }

/* #5 (round 4) — essentials cards on mobile keep the icon + big value readable. */
@media (max-width: 768px) {
  .mbs-avis-v2 .av-ess-ic { width: 40px; height: 40px; font-size: 21px; }
  .mbs-avis-v2 .av-ess-item { padding: 16px 10px; }
}

/* #11 (round 6) — Etienne : le contenu doit etre CENTRE (la reserve de gouttiere
   le decalait a droite / hors du rail). On MASQUE le rail sponsors fixe du site
   sur les pages avis preview -> plus de chevauchement, contenu recentre normalement. */
body:has(.mbs-avis-v2) .mbs-sponsor-floating,
body:has(.mbs-avis-v2) .mbs-sponsor-stack { display: none !important; }
@media (min-width: 1024px) {
  .mbs-avis-v2 { max-width: 1080px; margin-left: auto; margin-right: auto; }
}

/* #12 (round 6) — « L'essentiel » : icone dans une pastille arrondie teintee
   (plus « design » qu'un emoji nu), + « Avis & notes » : colonne d'avis a droite
   (la note n'est affichee qu'UNE fois dans la carte de gauche). */
.mbs-avis-v2 .av-ess-ic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px; background: #f0f9ff; font-size: 24px; line-height: 1; }
.mbs-avis-v2 .av-note-sub { font-size: 13px; color: #64748b; }
.mbs-avis-v2 .av-note-method { font-size: 12px; color: #94a3b8; line-height: 1.5; margin-top: 12px; }
.mbs-avis-v2 .av-reviews-col { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
@media (max-width: 768px) {
  .mbs-avis-v2 .av-notes { grid-template-columns: 1fr; }
}

/* #13 (round 7, retours Etienne) */
/* L'essentiel : la tuile « Données » montre l'ecart (0,5 Go → illimité) — police
   reduite pour tenir sur une ligne, cohérente avec les autres tuiles. */
.mbs-avis-v2 .av-ess-v--range { font-size: 16px; line-height: 1.3; }
/* En-tete mobile : la byline « Vérifié par … · date » se cassait salement.
   -> retour a la ligne propre, séparateur masqué, date insécable. */
@media (max-width: 768px) {
  .mbs-avis-v2 .av-byline { flex-wrap: wrap; gap: 3px 8px; font-size: 12px; }
  .mbs-avis-v2 .av-byline .av-vsep { display: none; }
  .mbs-avis-v2 .av-byline .av-vok { white-space: nowrap; }
  .mbs-avis-v2 .av-ess-v--range { font-size: 14px; }
}

/* #14 (round 8, retours Etienne) */
/* B1 — discount du code promo mis en valeur dans le bandeau (le CODE reste caché derrière le clic). */
.mbs-avis-v2 .av-promo-disc { background: #dc2626; color: #fff; font-weight: 800; font-size: 13.5px; padding: 3px 10px; border-radius: 8px; margin-left: 4px; white-space: nowrap; }
.mbs-avis-v2 .av-promo-disc[hidden] { display: none; }
/* B2 — « Pays couverts » : accordeon replie par region + chips pays responsives. */
.mbs-avis-v2 .av-dest { display: flex; flex-direction: column; gap: 10px; }
.mbs-avis-v2 .av-dest-region { border: 1px solid #e8eef4; border-radius: 14px; overflow: hidden; background: #fff; }
.mbs-avis-v2 .av-dest-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.mbs-avis-v2 .av-dest-head .rg { font-weight: 700; font-size: 16px; color: #0f172a; }
.mbs-avis-v2 .av-dest-head .ct { font-size: 12.5px; color: #94a3b8; font-weight: 600; }
.mbs-avis-v2 .av-dest-head .sg { margin-left: auto; font-size: 22px; color: #0ea5e9; font-weight: 400; line-height: 1; transition: transform .2s; }
.mbs-avis-v2 .av-dest-region.open .sg { transform: rotate(45deg); }
.mbs-avis-v2 .av-dest-body { display: none; flex-wrap: wrap; gap: 7px; padding: 0 18px 18px; }
.mbs-avis-v2 .av-dest-region.open .av-dest-body { display: flex; }
.mbs-avis-v2 .av-dest-chip { font-size: 12.5px; color: #334155; background: #f1f5f9; border-radius: 8px; padding: 5px 11px; }
/* B4 — « Offres populaires » (cartes dynamiques, source /api/promo-ranking). */
.mbs-avis-v2 .av-pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .mbs-avis-v2 .av-pop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .mbs-avis-v2 .av-pop-grid { grid-template-columns: 1fr; } }
.mbs-avis-v2 .av-pop { display: flex; flex-direction: column; gap: 10px; border: 1px solid #e8eef4; border-radius: 16px; padding: 14px 16px; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
.mbs-avis-v2 .av-pop:hover { box-shadow: 0 16px 30px -20px rgba(2,132,199,.4); transform: translateY(-3px); border-color: #bae6fd; }
.mbs-avis-v2 .av-pop-top { display: flex; align-items: center; gap: 12px; }
.mbs-avis-v2 .av-pop-logo { width: 40px; height: 40px; border-radius: 11px; border: 1px solid #e6eef6; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mbs-avis-v2 .av-pop-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.mbs-avis-v2 .av-pop-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; color: #0f172a; }
.mbs-avis-v2 .av-pop-coderow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mbs-avis-v2 .av-pop-codelabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.mbs-avis-v2 .av-pop-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 13px; color: #0f172a; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 7px; padding: 2px 9px; }
.mbs-avis-v2 .av-pop-disc { background: #eff6ff; color: #2563eb; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.mbs-avis-v2 .av-pop-rating { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; color: #0f172a; }
.mbs-avis-v2 .av-pop-rating .av-stars { color: #f59e0b; font-size: 12.5px; letter-spacing: 1px; }
.mbs-avis-v2 .av-pop-rating b { font-weight: 800; }
.mbs-avis-v2 .av-pop-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: #dc2626; color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 14px; border-radius: 11px; transition: background .15s; }
.mbs-avis-v2 .av-pop:hover .av-pop-cta { background: #b91c1c; color: #fff; }

/* #15 (round 13) — sur MOBILE, le bandeau code promo du hero passe en COLONNE
   (label au-dessus, bouton pleine largeur en dessous, centre) — sinon « Code promo
   Yesim » se casse sur 3 lignes a cote du bouton. Placee en fin de fichier pour
   battre la regle desktop `.av-cta-stack .av-promo` (meme specificite). */
@media (max-width: 768px) {
  .mbs-avis-v2 .av-cta-stack .av-promo { flex-direction: column; align-items: stretch; gap: 10px; text-align: center; padding: 12px 14px; }
  .mbs-avis-v2 .av-cta-stack .av-promo .av-promo-lbl { justify-content: center; flex-wrap: wrap; }
  .mbs-avis-v2 .av-cta-stack .av-promo .av-promo-chip { width: 100%; justify-content: center; }
}