/* ==========================================================================
   Bloc « Vitrine produit » — panneau sombre + mock-UI
   ========================================================================== */
.fsh-showcase {
  background: var(--c-surface);
  padding-block: 24px;
  padding-inline: clamp(12px, 3vw, 24px);
}
.fsh-showcase__panel {
  --notch-w: clamp(200px, 29%, 404px);
  --notch-h: clamp(52px, 5.55vw, 80px);
  position: relative;
  max-width: var(--container-wide);
  margin-inline: auto;
  background: var(--c-surface); /* fond clair : l'encoche + les coins sont clairs, aucun sombre ne peut « baver » */
  border-radius: var(--r-xl);
  padding: clamp(88px, 8.4vw, 120px) clamp(24px, 6.1vw, 88px) clamp(48px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 80px);
  overflow: hidden;
  isolation: isolate;
}
/* Le sombre est peint en 2 couches qui excluent l'encoche haut-droite, plus un
   congé au coin 4 (jonction barre/corps) :
   - barre haute gauche : coin 3 convexe arrondi ;
   - corps pleine largeur : coin 6 convexe arrondi ;
   - congé (__nc) : coin 4 CONCAVE lisse reliant la descente au corps. */
.fsh-showcase__panel::before { /* barre haute gauche (hauteur de l'encoche) */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: calc(100% - var(--notch-w));
  height: var(--notch-h);
  background: var(--c-dark);
  border-top-right-radius: var(--r-xl);      /* coin 3 : convexe */
  z-index: 0;
}
.fsh-showcase__panel::after { /* corps sombre (pleine largeur, sous l'encoche) */
  content: "";
  position: absolute;
  top: var(--notch-h); left: 0; right: 0; bottom: 0;
  background: var(--c-dark);
  border-top-right-radius: var(--r-xl);      /* coin 6 : convexe */
  z-index: 0;
}
.fsh-showcase__panel > .fsh-showcase__nc { /* coin 4 : congé CONCAVE lisse (relie la descente au corps) */
  display: block;
  position: absolute;
  left: calc(100% - var(--notch-w));
  top: calc(var(--notch-h) - var(--r-xl));
  width: var(--r-xl);
  height: var(--r-xl);
  background: radial-gradient(circle at top right, transparent var(--r-xl), var(--c-dark) calc(var(--r-xl) + 0.5px));
  z-index: 0;
}
.fsh-showcase__panel > * { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .fsh-showcase__panel { --notch-w: 0px; --notch-h: 0px; background: var(--c-dark); }
  .fsh-showcase__panel::before { border-radius: 0; }
  .fsh-showcase__panel::after { display: none; }
  .fsh-showcase__panel > .fsh-showcase__nc { display: none; }
}

/* Rectangle décoratif en filigrane (« Mask group ») */
.fsh-showcase__deco {
  position: absolute;
  left: 50%;
  bottom: clamp(120px, 16vw, 240px);
  width: 116%;
  aspect-ratio: 1619 / 664;
  transform: translateX(-50%);
  border: 1.16px solid rgba(161, 161, 161, 0.28);
  border-radius: 28px;
  pointer-events: none;
  z-index: 0;
}

/* ---- Blocs d'intro (texte) ---- */
.fsh-showcase__intro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 27px; }
.fsh-showcase__intro--steps { margin-top: clamp(24px, 6.4vw, 78px); }
.fsh-showcase__intro > .fsh-eyebrow--dark { margin-bottom: -11px; }
.fsh-showcase__title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h2-dark);
  line-height: 1.335;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 1016px;
}
.fsh-showcase__title--intro { max-width: 1016px; }
.fsh-showcase__body {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-dark-200);
  max-width: 620px;
}
.fsh-showcase__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- 3 cartes sombres ---- */
.fsh-showcase__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fsh-dark-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 380px;
  padding: 24px;
  background: var(--c-dark-card);
  border: 1px solid var(--c-dark-border);
  border-radius: var(--r-lg);
}
.fsh-dark-card__text { display: flex; flex-direction: column; gap: 12px; }
.fsh-dark-card__title { font-family: var(--font-sans); font-weight: 400; font-size: 20px; line-height: 1.1; color: #fff; }
.fsh-dark-card__body { font-size: var(--fs-body); line-height: 1.5; color: var(--c-dark-300); }
.fsh-dark-card .fsh-mock { margin-top: auto; }

/* ==========================================================================
   Composants mock-UI
   ========================================================================== */
.fsh-mock {
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fsh-mock__row { display: flex; align-items: center; gap: 10px; }
.fsh-mock__row--between { justify-content: space-between; }
.fsh-mock__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fsh-mock__meta { display: flex; flex-direction: column; gap: 2px; }
.fsh-mock__t { color: #fff; font-size: 13px; }
.fsh-mock__s { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 300; }
.fsh-mock__ico {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  color: var(--c-gold-bright);
  font-style: normal; font-size: 13px;
}
.fsh-mock__ico--gold { background: var(--c-gold); }
.fsh-mock__verse { color: var(--c-dark-100); font-size: 20px; line-height: 1.6; text-align: right; }
.fsh-mock__verse--center { text-align: center; }
.fsh-mock__verse--muted { color: var(--c-dark-100); border-top: 1px solid var(--c-dark-border); padding-top: 12px; text-align: right; }
.fsh-mock__verse-inline { font-size: 17px; color: var(--c-dark-100); }
.fsh-mock__hint { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 300; line-height: 1.6; }
.fsh-err { color: var(--c-error); }
.fsh-gold { color: var(--c-gold); }
.fsh-mark { color: rgba(255,255,255,.2); }

/* Micro / bouton rond doré */
.fsh-mic {
  display: inline-grid; place-items: center;
  background: var(--c-gold);
  border: 1px solid var(--c-gold-border);
  border-radius: 8px;
  color: #fff; flex: none;
}
.fsh-mic--sm { width: 30px; height: 30px; }
.fsh-mic--md { width: 34px; height: 34px; border-radius: 900px; }
.fsh-mic--lg { width: 48px; height: 48px; border-radius: 900px; }

/* Forme d'onde */
.fsh-wave { display: flex; align-items: center; gap: 1.5px; flex: 1 1 auto; overflow: hidden; }
.fsh-wave__bar { width: 1.6px; height: var(--h); background: rgba(255,255,255,.4); border-radius: 2px; flex: none; }
.fsh-wave--gold .fsh-wave__bar { background: var(--c-gold); opacity: .9; }
/* Portion « non lue » : atténuée (l'audio restant) */
.fsh-wave .fsh-wave__bar.is-dim,
.fsh-wave--gold .fsh-wave__bar.is-dim { background: rgba(255,255,255,.16); opacity: 1; }

/* Lecteur */
.fsh-player { display: flex; align-items: center; gap: 10px; }
.fsh-player__time { color: rgba(255,255,255,.8); font-family: var(--font-mono); font-size: 9px; letter-spacing: .15px; flex: none; }
.fsh-player--lg { gap: 14px; }
.fsh-player--boxed {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
  padding: 16px;
}
/* Carte 3 « support teacher » : deux bulles distinctes sur la carte */
.fsh-mock--stack { background: transparent; border: 0; padding: 0; gap: 10px; }
.fsh-teach-player {
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
  padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.fsh-teach-player__verse { text-align: center; color: var(--c-dark-100); font-size: 17px; }
.fsh-teach-player__controls { display: flex; align-items: center; gap: 10px; }
.fsh-mic--circle { width: 30px; height: 30px; border-radius: 900px; }
.fsh-player__controls { display: flex; align-items: center; gap: 10px; }
.fsh-mini-btn {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10);
  border: 0; border-radius: 900px;
  color: #fff; cursor: pointer;
}

/* Anneau de progression */
.fsh-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.fsh-ring__label { position: absolute; font-family: var(--font-mono); font-size: 9px; color: #fff; }

/* Puces mots */
.fsh-chips { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.fsh-chip {
  position: relative;
  display: inline-grid; place-items: center;
  min-width: 58px; height: 58px;
  padding: 0 12px;
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
  color: #fff;
  flex: none;
}
.fsh-chip.is-active { border-color: var(--c-gold); }
.fsh-chip .fsh-arabic { font-size: 18px; }
.fsh-chip--wave {
  min-width: 52px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1.6px, transparent 1.6px 5px);
  background-size: 60% 18px; background-position: center; background-repeat: no-repeat;
  border-style: dashed;
}
.fsh-chip__check {
  position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--c-gold); border-radius: 900px; color: #fff;
  border: 2px solid var(--c-dark-card);
}
.fsh-chip__check svg { width: 12px; height: 12px; }

/* Pills */
.fsh-pill-instant, .fsh-pill-dark {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 55px;
  font-size: 11px; color: #fff; flex: none;
}
.fsh-pill-instant { background: rgba(255,255,255,.10); }
.fsh-pill-instant svg, .fsh-pill-dark svg { color: var(--c-gold-bright); }
.fsh-pill-dark { background: var(--c-dark-card); border: 1px solid var(--c-dark-border); }

/* Ligne "pratique consistante" */
.fsh-mini-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
}
.fsh-mini-progress.is-active { background: #383838; border-color: #5a5a5a; }
.fsh-mini-progress__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); border-radius: 8px;
  color: var(--c-gold-bright);
}
.fsh-mini-progress__label { flex: 1 1 auto; color: #fff; font-size: 13px; line-height: 1.3; }

/* Comparaison */
.fsh-mock--compare { gap: 12px; }
.fsh-compare-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
}
.fsh-compare-row__meta { display: flex; flex-direction: column; gap: 1px; min-width: 118px; }
.fsh-dot { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 900px; color: #fff; }
.fsh-dot--ok { background: var(--c-gold); }
.fsh-dot--err { background: var(--c-error); }

/* Round / onglets */
.fsh-round {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.fsh-round__label { color: #fff; font-size: 13px; white-space: nowrap; }
.fsh-round__sep { width: 1px; align-self: stretch; background: var(--c-dark-border); }
.fsh-round__tabs { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: 1 1 auto; }
.fsh-round__tab { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.55); font-size: 13px; }
.fsh-round__tab.is-active { color: #fff; }
.fsh-round__n {
  width: 18px; height: 18px; display: grid; place-items: center;
  background: rgba(255,255,255,.10); border-radius: 900px;
  font-size: 10px; color: #fff;
}
.fsh-round__tab.is-active .fsh-round__n { background: var(--c-gold); }
.fsh-ring--sm svg { width: 30px; height: 30px; }
.fsh-ring--sm .fsh-ring__label { font-size: 7px; font-weight: 700; letter-spacing: -0.2px; }

/* AI Listens : entête soulignée + séparateur avant les chips */
.fsh-mock--analysis > .fsh-mock__row--between { padding-bottom: 12px; border-bottom: 1px solid var(--c-dark-border); }
.fsh-mock--analysis .fsh-chips { padding-top: 14px; border-top: 1px solid var(--c-dark-border); }

/* Track Your Progress : carte du milieu mise en avant, autres atténuées */
.fsh-mock--track { justify-content: center; gap: 8px; }
.fsh-mock--track .fsh-mini-progress:not(.is-active) { opacity: 0.4; }
.fsh-mock--track .fsh-mini-progress.is-active {
  background: #383838;
  border-color: #5a5a5a;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transform: scale(1.04);
  position: relative; z-index: 1;
}

/* ==========================================================================
   Parcours 6 étapes
   ========================================================================== */
.fsh-steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.fsh-steps__row { display: grid; gap: 24px; }
.fsh-steps__row--wl { grid-template-columns: 680.95fr 511.05fr; }
.fsh-steps__row--lw { grid-template-columns: 511.05fr 680.95fr; }

/* Chaque étape = UNE carte #262626 (402px) : mock en haut, texte À L'INTÉRIEUR en bas. */
.fsh-step {
  display: flex;
  flex-direction: column;
  min-height: 402px;
  background: var(--c-dark-card);
  border: 1px solid var(--c-dark-border);
  border-radius: 16px;
  padding: 24px;
}
.fsh-step > .fsh-mock {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  justify-content: flex-start;
}
.fsh-step__text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 20px 16px 4px;
}
.fsh-step__title { font-family: var(--font-sans); font-weight: 400; font-size: 20.11px; line-height: 1.1; color: #fff; }
.fsh-step__body { font-size: var(--fs-body); line-height: 1.5; color: var(--c-dark-300); max-width: 46ch; margin-inline: auto; }

/* « Open and recite » : contenu (Recite now + verset + micro + onde) dans une bulle #303030 */
.fsh-step > .fsh-mock--record {
  background: var(--c-dark-raised);
  border: 1px solid var(--c-dark-border);
  border-radius: 11px;
  padding: 20px;
  gap: 24px;
  justify-content: space-between;
  min-height: 224px;
}

.fsh-mock--record .fsh-mock__top { align-items: flex-start; }

/* ---- Anti-débordement ----
   Les items de grille/flex ont `min-width: auto` par défaut : une colonne
   `1fr` ne descend donc jamais sous la largeur min-content de son contenu.
   Les mocks (méta 118px, chips nowrap, ondes…) poussaient tout le panneau
   au-delà du viewport, et `overflow: hidden` coupait le contenu sur mobile.
   `min-width: 0` autorise la chaîne complète à rétrécir. */
.fsh-showcase__intro,
.fsh-showcase__cards,
.fsh-showcase__cards > *,
.fsh-steps,
.fsh-steps__row,
.fsh-steps__row > *,
.fsh-dark-card,
.fsh-step,
.fsh-mock,
.fsh-mock__row,
.fsh-mock__top,
.fsh-mock__meta,
.fsh-compare-row,
.fsh-compare-row__meta,
.fsh-player,
.fsh-player--boxed,
.fsh-player__controls,
.fsh-teach-player,
.fsh-teach-player__controls,
.fsh-mini-progress,
.fsh-mini-progress__label,
.fsh-round,
.fsh-round__tabs,
.fsh-chips { min-width: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .fsh-showcase__cards { grid-template-columns: 1fr; }
  .fsh-steps__row--wl,
  .fsh-steps__row--lw { grid-template-columns: 1fr; }
  .fsh-showcase__title, .fsh-showcase__title--intro { max-width: none; }
}
@media (max-width: 640px) {
  /* Les éléments qui imposaient une largeur fixe se relâchent */
  .fsh-compare-row__meta { min-width: 0; }
  .fsh-compare-row { gap: 10px; padding: 12px; }
  .fsh-chips { flex-wrap: wrap; gap: 8px; }
  .fsh-round__tabs { flex-wrap: wrap; gap: 10px 14px; justify-content: flex-start; }
  .fsh-round__sep { display: none; }
  .fsh-mock__verse { font-size: 18px; }
  .fsh-mock__verse-inline,
  .fsh-teach-player__verse { font-size: 15px; }
}
@media (max-width: 520px) {
  .fsh-showcase__actions .fsh-btn { flex: 1 1 auto; }
  .fsh-round__tabs { gap: 10px 12px; margin-left: 0; }
}

/* ---- Médias réels : screenshot d'app par étape + vidéo de démo ---- */
.fsh-mock--shot {
  padding: 0;
  overflow: hidden;
}
.fsh-mock--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.fsh-showcase__video {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--c-dark-card);
  border: 1px solid var(--c-dark-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fsh-showcase__video iframe,
.fsh-showcase__video video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}