/* MBS Hub "Meilleures eSIM" — page complète [mbs_esim_hub_page]. Design system avis
   V2 (mêmes tokens que avis-v2.css : Poppins, sky #0ea5e9 / navy #24365f / rouge CTA /
   or étoiles). Toutes les règles scopées sous .mbs-hub-page (jamais de collision avec
   le thème). Classes préfixées "hp-" pour ne jamais toucher aux classes des 3 widgets
   embarqués ([mbs_esim_hub]=.mbshub-*, [mbs_esim_usecases]=.mbsuc-*,
   [mbs_providers_listing_v2]=.mbspl-*) — CES TROIS-LÀ s'auto-stylent via leur propre
   <style> injecté en JS (provider-hub.js / provider-usecases.js / provider-list.js) :
   ce fichier ne les touche jamais et n'a pas à les redéfinir. Adapté de la maquette
   validée docs/hub-esim-widget.maquette-ref.html (repo Worker), même logique de
   scope + astuce body:has() que .mbs-avis-v2 (avis-v2.css). */

body:has(.mbs-hub-page) aside.sidebar { display: none !important; }
body:has(.mbs-hub-page) #content.main-side { width: 100% !important; max-width: 100% !important; float: none !important; }
body:has(.mbs-hub-page) .rh-post-wrapper { max-width: 100% !important; }
body:has(.mbs-hub-page) .mbs-sponsor-floating,
body:has(.mbs-hub-page) .mbs-sponsor-stack { display: none !important; }

/* #1 (retour Etienne) — kill le "cadre" Rehub : article.post/.rh-post-wrapper
   posent border+box-shadow+background+padding (confirmé en live via computed
   styles) qui encadrent visiblement toute la page. Même recette Round 2 que
   .mbs-avis-v2 (avis-v2.css) : neutraliser puis masquer les titres fantômes du
   thème (le vrai H1 designé vit dans .hp-h1, rendu plus bas). */
body:has(.mbs-hub-page) .rh-post-wrapper,
body:has(.mbs-hub-page) .rh-content,
body:has(.mbs-hub-page) article.post {
  border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
body:has(.mbs-hub-page) .rh-post-wrapper .entry-title,
body:has(.mbs-hub-page) article.post > .title,
body:has(.mbs-hub-page) h1.entry-title,
body:has(.mbs-hub-page) .rh-post-wrapper > .title,
body:has(.mbs-hub-page) .post-title { display: none !important; }

/* Cutover live FR/EN (round 18) — les pages hub LIVE (contrairement aux
   brouillons preview, sur le gabarit rehub par défaut) tournent sur un
   gabarit CUSTOM ("esim-page-*") absent des sélecteurs ci-dessus : il rend
   lui-même the_title() dans .esim-page-title, doublant le H1 du hub avec
   l'ANCIEN titre (post_title, pré-cutover). strip_theme_h1() (côté PHP)
   ne couvre que le H1 fantôme du thème rehub, pas celui d'un gabarit custom.
   BALAYAGE COMPLET (round 18, 2e passe) du gabarit "esim-page-*" — capture
   écran pleine page (haut + milieu + bas jusqu'au footer) sur la page LIVE
   FR : SEULS deux éléments visibles à lui appartenaient en dehors de
   .mbs-hub-page — le H1 ci-dessus ET l'image à la une (.esim-featured-image,
   le featured_image de l'ANCIEN article, ex. bateau/logos fournisseurs)
   affichée juste au-dessus du hero du hub. Vérifié explicitement absents sur
   ce gabarit (contrairement au gabarit rehub par défaut) : extrait/chapô,
   meta (catégorie/date), tags, boutons de partage, articles liés, zone
   commentaires — aucune de ces classes n'existe dans le HTML rendu. Le seul
   "breadcrumb" de la page est le BreadcrumbList JSON-LD (invisible, hors
   scope CSS). L'encart auteur Simple Author Box (juste avant le footer) est
   déjà masqué par la règle générique #3 plus bas (confirmé en capture —
   n'apparaît pas entre la fin du hub et le footer). */
body:has(.mbs-hub-page) .esim-page-title,
body:has(.mbs-hub-page) .esim-featured-image { display: none !important; }

/* #3 (round 2, retour Etienne) — Simple Author Box du thème (encart bleu "Etienne" +
   réseaux) toujours affiché en fin de page : le retrait du bloc bio custom (.hp-author,
   fix #6 round 1) ne touchait PAS ce plugin tiers, qui s'injecte tout seul après le
   contenu. Mêmes sélecteurs QUE avis-v2.css #4/#10 (round 4), déjà éprouvés en live. */
body:has(.mbs-hub-page) .saboxplugin-wrap,
body:has(.mbs-hub-page) .sabox-authors,
body:has(.mbs-hub-page) .saboxplugin-desc,
body:has(.mbs-hub-page) .rh-author-box,
body:has(.mbs-hub-page) .author-box,
body:has(.mbs-hub-page) [class*="author-bio"],
body:has(.mbs-hub-page) .about-author,
body:has(.mbs-hub-page) .rh-authorbox { display: none !important; }

/* Conteneur propre du hub, centré, largeur fixe ~920px (maquette validée
   docs/hub-esim-widget.maquette-ref.html .hubwrap) — PAS de bump plus large à
   1024px : c'était la cause du décalage visuel hero centré / corps de texte qui
   semblait mal aligné (la colonne s'élargissait à 1080px alors que le hero reste
   contraint par ses propres max-width en ch). */
.mbs-hub-page { font-family: 'Poppins', system-ui, sans-serif; color: #0f172a; max-width: 920px; margin: 0 auto; padding: 0 20px; line-height: 1.5; }
.mbs-hub-page *, .mbs-hub-page *::before, .mbs-hub-page *::after { box-sizing: border-box; }
.mbs-hub-page a { color: #0284c7; text-decoration: none; }

/* ---- HERO ---- */
.mbs-hub-page .hp-hero { text-align: center; padding: 12px 0 26px; }
.mbs-hub-page .hp-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-hub-page .hp-h1 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; max-width: 18ch; margin-inline: auto; }
.mbs-hub-page .hp-h1 .hp-em { color: #0ea5e9; font-style: normal; }
.mbs-hub-page .hp-rule { width: 88px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); margin: 2px auto 22px; }
.mbs-hub-page .hp-lead { margin: 0 auto 22px; font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.65; color: #334155; max-width: 66ch; }
.mbs-hub-page .hp-byline { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; color: #64748b; flex-wrap: wrap; }
.mbs-hub-page .hp-byline img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; border: 2px solid #e0f2fe; }
.mbs-hub-page .hp-byline b { color: #0f172a; }
.mbs-hub-page .hp-byline .hp-sep { color: #cbd5e1; }

/* ---- SECTIONS ---- */
.mbs-hub-page .hp-section { margin-top: 50px; }
.mbs-hub-page .hp-h2 { margin: 0 0 4px; font-size: clamp(21px, 3.2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.mbs-hub-page .hp-h2rule { width: 54px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); margin: 8px 0 18px; }
.mbs-hub-page .hp-h3 { font-size: 17px; font-weight: 800; color: #0f172a; margin: 22px 0 6px; }
/* #3 (round 5, retour Etienne : "toujours aéré, pas 5 lignes d'affilée") — rythme
   vertical augmenté entre paragraphes (14px -> 20px), en plus des textes coupés
   côté PHP (content_fr()/render()). */
.mbs-hub-page .hp-prose { font-size: clamp(15px, 2.1vw, 16px); line-height: 1.72; color: #334155; margin: 0 0 20px; max-width: 74ch; }
.mbs-hub-page .hp-prose:last-child { margin-bottom: 0; }
.mbs-hub-page .hp-prose b { color: #0f172a; }

/* ---- widget shell (juste de l'air autour des 3 shortcodes embarqués) ---- */
.mbs-hub-page .hp-embed { margin-top: 8px; }

/* #5 round 1 / #4 round 5 (retour Etienne) — DÉCISION DESIGN : ne pas centrer
   les longs paragraphes (illisible sur plusieurs lignes) ; à la place, centrer
   les COURTES intros de section (1-3 lignes, juste après le H2) pour une
   impression d'ensemble équilibrée, et garder les longs paragraphes/listes
   alignés à gauche (mais aérés, cf. #3 juste au-dessus). .hp-section-uc (module
   "selon votre profil", round 1) et .hp-section-ctr (annuaire, round 5)
   partagent ce traitement — même règle, deux sections qui le méritent. */
.mbs-hub-page .hp-section-uc .hp-h2,
.mbs-hub-page .hp-section-ctr .hp-h2 { text-align: center; }
.mbs-hub-page .hp-section-uc .hp-h2rule,
.mbs-hub-page .hp-section-ctr .hp-h2rule { margin-left: auto; margin-right: auto; }
.mbs-hub-page .hp-section-uc > .hp-prose,
.mbs-hub-page .hp-section-ctr > .hp-prose { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
.mbs-hub-page .hp-section-uc .hp-h3 { text-align: center; }

/* ---- METHOD ---- */
.mbs-hub-page .hp-axes { margin: 0 0 22px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.mbs-hub-page .hp-axes li { font-size: 14px; line-height: 1.55; color: #334155; padding-left: 20px; position: relative; }
.mbs-hub-page .hp-axes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 99px; background: #0ea5e9; }
.mbs-hub-page .hp-axes b { color: #0f172a; }

/* #4a (retour Etienne : "on peut mieux présenter la liste") — les 6 axes de la
   méthode passent de puces brutes à des mini-cartes numérotées. Modificateur
   scopé à CETTE liste : la liste "profils" (region/durée, plus bas dans la page)
   réutilise .hp-axes seul et n'est pas concernée. */
.mbs-hub-page .hp-method-axes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mbs-hub-page .hp-method-axes li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 14px 16px; padding-left: 16px; }
.mbs-hub-page .hp-method-axes li::before { content: none; }
.mbs-hub-page .hp-axnum { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #eff6ff; color: #0284c7; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.mbs-hub-page .hp-method-axes b { display: block; }
.mbs-hub-page .hp-axd { display: block; color: #64748b; margin-top: 2px; }

/* Round 7 (retour Etienne) : cadre extérieur (fond/bordure/ombre/padding) retiré
   -- l'infographie flotte directement sur la page, plus impactante -- et
   l'ensemble grossi (barres, pourcentages, score, carte "Exemple concret").
   Structure inchangée : barres à gauche, exemple concret à droite. */
.mbs-hub-page .hp-method { display: grid; grid-template-columns: 1fr .82fr; gap: 34px; align-items: center; }
.mbs-hub-page .hp-crit { margin-bottom: 22px; }
.mbs-hub-page .hp-crit:last-child { margin-bottom: 0; }
.mbs-hub-page .hp-crit-head { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-bottom: 9px; color: #334155; }
.mbs-hub-page .hp-crit-head .hp-sw { width: 15px; height: 15px; border-radius: 4px; flex: none; }
.mbs-hub-page .hp-crit-head b { color: #0f172a; font-weight: 800; }
.mbs-hub-page .hp-crit-head .hp-desc { color: #64748b; }
.mbs-hub-page .hp-crit-head .hp-w { margin-left: auto; font-weight: 800; color: #0f172a; font-size: 18px; }
.mbs-hub-page .hp-crit-bar { height: 13px; border-radius: 99px; background: #e9eef5; overflow: hidden; }
.mbs-hub-page .hp-crit-bar i { display: block; height: 100%; border-radius: 99px; }

.mbs-hub-page .hp-example { background: #f8fbff; border: 1px solid #e0f2fe; border-radius: 18px; padding: 26px; }
.mbs-hub-page .hp-ex-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; margin-bottom: 14px; }
.mbs-hub-page .hp-exhead { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.mbs-hub-page .hp-exhead .hp-logo { width: 48px; height: 48px; font-size: 17px; border-radius: 13px; object-fit: contain; background: #fff; border: 1px solid #e6eef6; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #0284c7; flex: none; }
.mbs-hub-page .hp-exhead .hp-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.mbs-hub-page .hp-exhead .hp-nm { font-weight: 800; color: #0f172a; font-size: 17px; }
.mbs-hub-page .hp-exhead .hp-big { margin-left: auto; font-size: 32px; font-weight: 800; color: #0f172a; line-height: 1; }
.mbs-hub-page .hp-exhead .hp-big span { font-size: 14px; color: #94a3b8; font-weight: 600; }
.mbs-hub-page .hp-exbar { display: grid; grid-template-columns: 152px 1fr 36px; gap: 12px; align-items: center; font-size: 13.5px; margin-bottom: 11px; color: #64748b; }
.mbs-hub-page .hp-exbar .hp-t { height: 12px; border-radius: 99px; background: #e6eef6; overflow: hidden; }
.mbs-hub-page .hp-exbar .hp-t i { display: block; height: 100%; border-radius: 99px; }
.mbs-hub-page .hp-exbar .hp-n { text-align: right; font-weight: 800; color: #0f172a; font-size: 15px; }
.mbs-hub-page .hp-example .hp-cap { margin: 16px 0 0; font-size: 13px; color: #64748b; line-height: 1.55; }

/* ---- GUIDE (5 étapes) ---- */
.mbs-hub-page .hp-guide { display: flex; flex-direction: column; gap: 4px; }
.mbs-hub-page .hp-step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid #eef2f6; }
.mbs-hub-page .hp-step:last-child { border-bottom: none; }
.mbs-hub-page .hp-step-n { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eff6ff; color: #0284c7; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.mbs-hub-page .hp-step h3 { margin: 2px 0 6px; font-size: 16px; font-weight: 800; color: #0f172a; }
.mbs-hub-page .hp-step p, .mbs-hub-page .hp-step ul { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: #334155; }
.mbs-hub-page .hp-step p:last-child, .mbs-hub-page .hp-step ul:last-child { margin-bottom: 0; }
.mbs-hub-page .hp-step ul { padding-left: 18px; }
.mbs-hub-page .hp-step li { margin-bottom: 3px; }
.mbs-hub-page .hp-step a { font-weight: 600; }

/* ---- eSIM vs SIM ---- */
.mbs-hub-page .hp-cmp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e8eef4; border-radius: 16px; overflow: hidden; font-size: 14px; }
.mbs-hub-page .hp-cmp th, .mbs-hub-page .hp-cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid #eef2f6; }
.mbs-hub-page .hp-cmp thead th { background: #fbfdff; font-weight: 800; color: #0f172a; font-size: 13px; }
.mbs-hub-page .hp-cmp thead th:nth-child(2) { color: #0ea5e9; }
.mbs-hub-page .hp-cmp td:first-child { font-weight: 600; color: #0f172a; width: 26%; }
.mbs-hub-page .hp-cmp tbody tr:last-child td { border-bottom: none; }
.mbs-hub-page .hp-cmp .hp-esim { background: #f8fbff; }
.mbs-hub-page .hp-cmp td .hp-v { display: inline-flex; align-items: center; gap: 9px; text-align: left; }
.mbs-hub-page .hp-cmp .hp-ind { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; flex: none; }
.mbs-hub-page .hp-cmp .hp-ind.hp-ok { background: #dcfce7; color: #059669; }
.mbs-hub-page .hp-cmp .hp-ind.hp-no { background: #fef2f2; color: #ef4444; }
/* #5 (round 5, retour Etienne : "pas juste une simple liste") — mini-cartes 2
   colonnes, même langage visuel que .hp-method-axes (icône en pastille + label
   gras + description) — ⚠ remplace le numéro, teinte rouge (avertissement). */
.mbs-hub-page .hp-cons-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mbs-hub-page .hp-cons-grid li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 14px 16px; }
.mbs-hub-page .hp-cons-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff6f6; color: #dc2626; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.mbs-hub-page .hp-cons-grid b { display: block; color: #0f172a; }
.mbs-hub-page .hp-cons-d { display: block; color: #64748b; margin-top: 2px; font-size: 14px; line-height: 1.6; }

/* ---- FAQ ---- */
.mbs-hub-page .hp-faq { border: 1px solid #e8eef4; border-radius: 16px; overflow: hidden; background: #fff; }
.mbs-hub-page .hp-faq details { border-bottom: 1px solid #eef2f6; }
.mbs-hub-page .hp-faq details:last-child { border-bottom: none; }
.mbs-hub-page .hp-faq summary { padding: 16px 18px; font-weight: 700; color: #0f172a; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.mbs-hub-page .hp-faq summary::-webkit-details-marker { display: none; }
.mbs-hub-page .hp-faq summary .hp-pm { color: #0ea5e9; font-weight: 800; font-size: 20px; width: 16px; flex: none; text-align: center; }
.mbs-hub-page .hp-faq summary .hp-pm::before { content: "+"; }
.mbs-hub-page .hp-faq details[open] summary .hp-pm::before { content: "\2013"; }
.mbs-hub-page .hp-faq .hp-a { padding: 0 18px 18px 46px; color: #334155; font-size: 14px; line-height: 1.65; }

/* ---- AUTHOR ---- */
/* #6 (retour Etienne) — bloc bio visible retiré (la byline hero + le schema
   Person JSON-LD suffisent) : plus de markup .hp-author dans class-esim-hub-page
   .php -> CSS retirée aussi, jamais de règle morte. */

/* ---- CTA DE FIN ---- */
/* #7 (round 5, retour Etienne : "le texte à la fin je l'enlèverais" + "un CTA
   vers comparateur/home/codes promo") — remplace le paragraphe de conclusion.
   2 boutons rouges primaires (DA page, même rouge que les CTA des 3 widgets
   embarqués) vers 2 destinations distinctes. */
.mbs-hub-page .hp-cta-block { background: #fff; border: 1px solid #e8eef4; border-radius: 20px; padding: 40px 24px; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.mbs-hub-page .hp-cta-title { margin: 0 0 22px; font-size: clamp(19px, 2.6vw, 23px); font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.mbs-hub-page .hp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mbs-hub-page .hp-cta-btn { display: inline-flex; align-items: center; justify-content: center; background: #dc2626; color: #fff; font-weight: 700; font-size: 15px; padding: 15px 28px; border-radius: 12px; text-decoration: none; box-shadow: 0 12px 24px -12px rgba(220,38,38,.55); transition: background .15s, transform .15s; }
.mbs-hub-page .hp-cta-btn:hover { background: #b91c1c; color: #fff; transform: translateY(-2px); }

/* ---- RESPONSIVE ---- */
@media (max-width: 860px) {
  .mbs-hub-page .hp-axes { grid-template-columns: 1fr; }
  .mbs-hub-page .hp-cons-grid { grid-template-columns: 1fr; }
  .mbs-hub-page .hp-method { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  .mbs-hub-page .hp-section { margin-top: 42px; }
  .mbs-hub-page .hp-exbar { grid-template-columns: 128px 1fr 34px; }
}
@media (max-width: 480px) {
  .mbs-hub-page { padding: 0 14px; }
  .mbs-hub-page .hp-cmp { border: 0; }
  .mbs-hub-page .hp-cmp thead { display: none; }
  .mbs-hub-page .hp-cmp tbody tr { display: block; border: 1px solid #e8eef4; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
  /* #3 (retour Etienne, "le texte à gauche, problème d'alignement") — le vrai bug
     n'était visible qu'en mobile : justify-content:space-between + text-align:right
     poussait la valeur tout au bord droit, loin de son label. Le libellé garde une
     largeur fixe et la valeur suit juste à côté, alignée à gauche (desktop déjà
     correct, non touché). */
  .mbs-hub-page .hp-cmp td { display: flex; align-items: center; gap: 12px; width: auto; border-bottom: 1px solid #eef2f6; text-align: left; }
  .mbs-hub-page .hp-cmp td:first-child { width: auto; background: #fbfdff; font-weight: 800; text-align: left; }
  .mbs-hub-page .hp-cmp .hp-esim { background: #fff; }
  .mbs-hub-page .hp-cmp td:not(:first-child)::before { content: attr(data-label); color: #94a3b8; font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 108px; line-height: 1.3; }
  .mbs-hub-page .hp-cta-block { padding: 32px 18px; }
  .mbs-hub-page .hp-cta-btns { flex-direction: column; }
  .mbs-hub-page .hp-cta-btn { width: 100%; }
}