autonomes, aucune modification des sections existantes. */ const MG_SOCIAL_BASE = "../../assets/img/social/"; const MG_REV_IMG_BASE = "../../assets/img/social/reviews/"; /* masonry + clamp — injecté une fois (media queries impossibles en style inline) */ (function () { if (document.getElementById("mg-rev-style")) return; const st = document.createElement("style"); st.id = "mg-rev-style"; st.textContent = ` .mg-rev-masonry { column-count: 2; column-gap: 12px; } @media (min-width: 720px) { .mg-rev-masonry { column-count: 3; } } @media (min-width: 1000px) { .mg-rev-masonry { column-count: 4; } } @media (min-width: 1240px) { .mg-rev-masonry { column-count: 5; } } .mg-rev-card { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 12px; } .mg-rev-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .mg-rev-card:hover { border-color: var(--mg-kb-accent, #39d7f7) !important; } /* fiche : colonne (photo bandeau haut) en mobile → rangée photo|texte dès 860px. height explicite + overflow hidden : height:100% d'une dans un conteneur max-height se résout en taille intrinsèque → l'image débordait sur le texte (bug mobile 2026-07-07). */ @media (min-width: 860px) { .mg-rev-modal-body { flex-direction: row !important; } .mg-rev-modal-img { height: auto !important; max-width: 52%; flex: 1 1 52% !important; min-height: 340px; } } `; document.head.appendChild(st); })(); function MgStars({ n, size }) { return ( {"★".repeat(n)} {"★".repeat(5 - n)} ); } /* ── Ancre de note dans la BuyBox (Tian 2026-07-07) : ★ 4,9 · N avis, clic → scroll vers #avis en bas de page (même pattern que la ligne d'étoiles Loox sous le titre produit sur melgeek.com). Passé via BuyBox ratingSlot. ── */ function RatingAnchor({ product = "centauri", target = "avis" }) { const data = (window.MG_REVIEWS || {})[product]; if (!data) return null; const go = (e) => { e.preventDefault(); const el = document.getElementById(target); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; return ( {data.avg} · {data.count} avis ); } /* ── Tech Review — vidéos créateurs ── */ function TechReviews({ product = "centauri" }) { const vids = (window.MG_TECH_VIDEOS || {})[product] || []; if (!vids.length) return null; const DS = window.MelGeekFrDesignSystem_7cf6d5 || {}; const Eyebrow = DS.Eyebrow; return (

{Eyebrow ? Tech Review : null}

Testé par les créateurs

Les mêmes vidéos que met en avant MelGeek : tests indépendants et parties jouées au clavier. Le clic ouvre YouTube dans un nouvel onglet.

{vids.map((v) => (

{v.channel} {v.title} ))}

); } /* ── Fiche détail d'un avis (modal, portal → body : ancêtres transform piègent position:fixed) ── */ function ReviewLightbox({ data, index, onClose }) { const [idx, setIdx] = React.useState(index); const items = data.items; const r = items[Math.min(idx, items.length - 1)]; React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowRight") setIdx(i => Math.min(i + 1, items.length - 1)); if (e.key === "ArrowLeft") setIdx(i => Math.max(i - 1, 0)); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); }; }, [items.length, onClose]); if (!r) return null; /* flèches dans le pied de fiche (les flèches latérales absolues chevauchaient le texte) */ const navBtn = (disabled) => ({ width: "34px", height: "34px", borderRadius: "50%", border: "1px solid var(--mg-border, #ddd)", background: "transparent", color: disabled ? "var(--mg-ink-300, #ccc)" : "var(--mg-ink-700, #333)", fontSize: "15px", cursor: disabled ? "default" : "pointer", flex: "0 0 auto", }); return ReactDOM.createPortal( , document.body ); } /* ── Avis clients vérifiés — layout Loox/melgeek.com : en-tête centré + distribution + masonry photo, clic → fiche ── */ function ReviewsSection({ product = "centauri", productLabel = "" }) { const data = (window.MG_REVIEWS || {})[product]; const [openAt, setOpenAt] = React.useState(null); if (!data || !data.items || !data.items.length) return null; const DS = window.MelGeekFrDesignSystem_7cf6d5 || {}; const Eyebrow = DS.Eyebrow; const dist = data.dist || {}; return (

{/* En-tête centré, même construction que le widget Loox de melgeek.com */}

{Eyebrow ? Avis vérifiés{productLabel ? " — " + productLabel : ""} : null}

{data.avg}

sur 5 · {data.count} avis

{data.dist ? (

{[5, 4, 3, 2, 1].map((s) => (

{s} ★ {dist[s] || 0}

))}

) : null}

Voir les {data.count} avis sur melgeek.com ↗

{/* Grille masonry compacte (photos d'abord) — clic = fiche détail */}

{data.items.map((r, i) => ( ))}

Avis collectés via Loox auprès d'acheteurs vérifiés sur melgeek.com, la boutique internationale MelGeek (mêmes claviers, layout US). Traduits de l'anglais sauf mention ; texte original dans la fiche. Note et total constatés le {(window.MG_REVIEWS || {}).updated || "7 juillet 2026"}.

{openAt != null && setOpenAt(null)} />}

); } /* ── Visuel officiel « Dans la boîte » — s'insère DANS la section existante, au-dessus de la liste ── */ function BoxVisual({ src, alt, caption }) { return (

); } window.TechReviews = TechReviews; window.ReviewsSection = ReviewsSection; window.ReviewLightbox = ReviewLightbox; window.BoxVisual = BoxVisual; window.MgStars = MgStars; window.RatingAnchor = RatingAnchor;