/* =====================================================================
   Héros B « L'écran en direct, en vitrine » (accueil / magasin XM).
   Préfixe xhero- uniquement. Jetons recopiés de xm-store.css (le héros
   est hors de .xm-root) : crème, encre #2E1A47, mauve #6D28D9, rouge
   d'action #E11D48, lignes #E7DECF ; Montserrat (titres) / Inter.
   La coquille du lecteur (.hero-visual, .visual-container,
   .carousel-*) est stylée ici SOUS .xhero : hero-styles.css retiré.
   ===================================================================== */
.xhero {
  --xh-cream: #FAF7F2;
  --xh-surface: #FFFCF8;
  --xh-line: #E7DECF;
  --xh-line-strong: #D9CDB9;
  --xh-ink: #2E1A47;
  --xh-muted: #5b4d6e;
  --xh-mauve: #6D28D9;
  --xh-mauve-soft: #F4EEFA;
  --xh-red: #E11D48;
  --xh-red-dark: #BE123C;
  --xh-shadow: 0 1px 2px rgba(46, 26, 71, .06), 0 4px 12px rgba(46, 26, 71, .06);
  --xh-focus: 0 0 0 3px #FFFCF8, 0 0 0 5px #6D28D9;
  background: var(--xh-cream);
  color: var(--xh-ink);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.xhero *, .xhero *::before, .xhero *::after { box-sizing: border-box; }

.xhero__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "text screen" "text facts";
  column-gap: 56px;
  row-gap: 16px;
  align-items: center;
}
.xhero__text { grid-area: text; align-self: center; }
.xhero__screen { grid-area: screen; }
.xhero__facts { grid-area: facts; }

/* ---- Texte ---- */
.xhero .xhero__eyebrow {
  margin: 0 0 12px;
  font: 700 12.5px/1.4 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--xh-mauve);
}
.xhero .xhero__title {
  margin: 0;
  font-family: 'Montserrat', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--xh-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.xhero .xhero__lead {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--xh-muted);
}

/* ---- Boutons (même gabarit que .xm-btn) ---- */
.xhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.xhero a.xhero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 10px;
  font: 600 16px/1.2 'Inter', sans-serif;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.xhero a.xhero__btn--primary { background: var(--xh-red); color: #fff; box-shadow: 0 1px 2px rgba(190, 18, 60, .25); }
.xhero a.xhero__btn--primary:hover { background: var(--xh-red-dark); color: #fff; }
.xhero a.xhero__btn--ghost { background: #fff; color: var(--xh-ink); border-color: var(--xh-line-strong); box-shadow: var(--xh-shadow); }
.xhero a.xhero__btn--ghost svg { color: var(--xh-mauve); }
.xhero a.xhero__btn--ghost:hover { border-color: var(--xh-mauve); color: var(--xh-ink); }
.xhero a:focus-visible { outline: none; box-shadow: var(--xh-focus); }

/* ---- L'écran 43 po ---- */
.xhero__screen { margin: 0; display: flex; flex-direction: column; align-items: center; }
.xhero__bezel {
  width: 100%;
  padding: 10px;
  background: #16121c;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #2a2333 inset, 0 2px 4px rgba(46, 26, 71, .08), 0 18px 40px rgba(46, 26, 71, .16);
}
.xhero .hero-visual { position: relative; width: 100%; }
.xhero .visual-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #190544;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.xhero .visual-container::before,
.xhero .visual-container::after { content: none; }
.xhero .carousel-wrapper { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.xhero .carousel-track { position: relative; width: 100%; height: 100%; }
.xhero .carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.xhero .carousel-slide.active { opacity: 1; }
/* La légende sous l'écran dit déjà « En direct » : pas de pastille dans l'image. */
.xhero .xtr-player-live .xtr-player-live__badge { display: none; }
.xhero__stand {
  width: 92px; height: 18px;
  background: linear-gradient(#2a2333, #16121c);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

/* Légende = petite carte xm sous le pied */
.xhero__cap {
  width: 100%;
  margin-top: 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid var(--xh-line);
  border-radius: 12px;
  box-shadow: var(--xh-shadow);
  font-size: 14.5px; line-height: 1.4; color: var(--xh-ink);
}
.xhero__cap strong { font-weight: 700; }
.xhero__cap-live { display: inline-flex; align-items: center; gap: 8px; }
.xhero__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--xh-red);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .14);
  animation: xheroPulse 1.8s ease-in-out infinite;
}
@keyframes xheroPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .xhero__dot { animation: none; } .xhero .carousel-slide { transition: none; } }
.xhero__cap-off { display: none; color: var(--xh-muted); }
/* Repli : le direct n'a pas chargé (xtr-player-live--off) → on ne prétend plus au direct. */
.xhero__screen:has(.xtr-player-live--off) .xhero__cap-live { display: none; }
.xhero__screen:has(.xtr-player-live--off) .xhero__cap-off { display: inline; }
.xhero a.xhero__cap-link {
  color: var(--xh-mauve); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 24px;
}
.xhero a.xhero__cap-link:hover { color: #5B21B6; }

/* ---- Barre de faits (style cartes du magasin) ---- */
.xhero ul.xhero__bar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr 1.7fr;
  background: #fff;
  border: 1px solid var(--xh-line);
  border-radius: 16px;
  box-shadow: var(--xh-shadow);
  overflow: hidden;
}
.xhero__fact { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xhero__fact + .xhero__fact { border-left: 1px solid var(--xh-line); }
.xhero__num {
  font: 800 26px/1.1 'Montserrat', 'Inter', sans-serif; color: var(--xh-ink); letter-spacing: -.01em;
  white-space: nowrap;
}
.xhero__num small { font: 700 14px/1 'Inter', sans-serif; color: var(--xh-muted); letter-spacing: 0; }
.xhero__lbl { font-size: 13.5px; line-height: 1.35; color: var(--xh-muted); }
.xhero__fine { font-size: 12px; color: var(--xh-muted); }
.xhero .xhero__trust {
  margin: 28px 0 0; max-width: 34em; display: flex; gap: 8px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.45; color: var(--xh-muted);
}
.xhero__trust svg { flex: none; margin-top: 1px; color: var(--xh-mauve); }

/* ---- Tablette ---- */
@media (max-width: 1023px) {
  .xhero__in { column-gap: 32px; padding: 36px 24px 36px; }
  .xhero ul.xhero__bar { grid-template-columns: 1fr 1fr; }
  .xhero__fact:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--xh-line); }
}

/* ---- Téléphone : texte, boutons, écran, faits ---- */
@media (max-width: 767px) {
  .xhero__in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "screen" "facts";
    row-gap: 24px;
    padding: 24px 16px 28px;
  }
  .xhero .xhero__eyebrow { font-size: 12px; letter-spacing: .1em; margin-bottom: 10px; }
  .xhero .xhero__title { font-size: 30px; }
  .xhero .xhero__lead { font-size: 16px; margin-top: 12px; }
  .xhero__actions { flex-direction: column; gap: 10px; margin-top: 20px; }
  .xhero a.xhero__btn { width: 100%; min-height: 50px; }
  .xhero__bezel { padding: 7px; border-radius: 11px; }
  .xhero__stand { width: 64px; height: 12px; }
  .xhero__cap { padding: 8px 14px 4px; row-gap: 0; font-size: 14px; }
  .xhero__cap-live { min-height: 32px; }
  .xhero a.xhero__cap-link { min-height: 44px; }
  .xhero ul.xhero__bar { grid-template-columns: 1fr 1fr; }
  .xhero__fact { padding: 12px 14px; }
  .xhero__num { font-size: 24px; }
  .xhero .xhero__trust { font-size: 14px; margin-top: 16px; }
}