/* =========================================================================
   BestClip · calque sombre néon violet
   -------------------------------------------------------------------------
   Sastik « automation-saas » livre un hero noir puis un corps blanc. On garde
   le hero tel quel et on bascule tout le reste sur le même noir, en reprenant
   le violet du template (#9451F5) comme accent.

   Règles de tenue de ce fichier :
   1. On surcharge, on ne réécrit pas. Aucune règle de main.css n'est modifiée,
      ce qui rend la mise à jour de la template possible sans conflit.
   2. Chaque bloc porte le nom de la section concernée, dans l'ordre de la page.
   3. `!important` est réservé aux propriétés que main.css pose avec une
      spécificité supérieure. Il est commenté quand il n'est pas évident.
   ========================================================================= */

:root {
  --bc-bg: #09070c;
  --bc-bg-2: #0c0912;
  --bc-surface: rgba(255, 255, 255, 0.028);
  --bc-surface-2: rgba(255, 255, 255, 0.05);
  --bc-border: rgba(148, 81, 245, 0.2);
  --bc-border-soft: rgba(255, 255, 255, 0.08);
  --bc-border-strong: rgba(148, 81, 245, 0.42);
  --bc-heading: #ffffff;
  --bc-text: rgba(233, 226, 245, 0.62);
  --bc-accent: #9451f5;
  --bc-accent-soft: rgba(148, 81, 245, 0.14);
  --bc-glow: 0 0 0 1px rgba(148, 81, 245, 0.2), 0 18px 60px -30px rgba(148, 81, 245, 0.75);
}

/* -------------------------------------------------------------------------
   1. Fond global et couleurs de base
   ---------------------------------------------------------------------- */

.bc-dark.automation-saas {
  --color-body: var(--bc-bg);
  --color-heading: var(--bc-heading);
  --color-default: var(--bc-text);
  --color-primary: var(--bc-accent);
  background-color: var(--bc-bg);
  color: var(--bc-text);
}

.bc-dark .body_wrap,
.bc-dark .as-body-inner {
  background-color: var(--bc-bg);
}

/* Les titres de section sont posés en dur à #1e0442 (violet quasi noir). */
.bc-dark .sec-title--three .title,
.bc-dark .sec-title .title,
.bc-dark h1,
.bc-dark h2,
.bc-dark h3,
.bc-dark h4 {
  color: var(--bc-heading);
}

.bc-dark .sec-title--three .content {
  color: rgba(233, 226, 245, 0.7);
}

/* Surtitre encadré : dégradé blanc + halo clair dans la template. */
.bc-dark .sec-title--three .sub-title span {
  color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(180deg, rgba(148, 81, 245, 0.24) 0%, rgba(148, 81, 245, 0.08) 100%);
  box-shadow:
    0 0 0 1px rgba(148, 81, 245, 0.35),
    0 4px 24px -6px rgba(148, 81, 245, 0.55);
}

/* Les chevrons du surtitre, les filets latéraux et les séparateurs sont DÉJÀ
   dessinés en lavande clair (#e3d3fa / #ebdcfe) : ils sont faits pour du blanc
   mais ils ressortent parfaitement sur du noir. Les inverser, comme je l'avais
   fait d'abord, les transforme en vert olive sale. On ne touche donc qu'à
   l'opacité, et on les teinte légèrement vers l'accent. */
/* Les chevrons sont rendus en masque plutôt qu'en <img> : c'est le seul moyen
   de les teindre. Le PNG d'origine est lavande quasi blanc, aucune chaîne de
   `filter` ne le ramène proprement au violet de la marque.

   Piège : ce PNG ne s'éteint pas en transparence, il s'éteint EN BLANC. Ses
   coins restent donc opaques, et utilisé seul comme masque il dessine un
   rectangle sur fond noir. On compose son alpha avec un dégradé radial qui
   tombe à zéro avant les bords : la forme est préservée, la boîte disparaît. */
.bc-vactor {
  width: 46px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-block;
  background-color: var(--bc-accent);
  opacity: 0.78;
  -webkit-mask-size: contain, 100% 100%;
  mask-size: contain, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.bc-vactor--left {
  -webkit-mask-image: url("/assets/img/shape/mask-sub-vactor.png"),
    radial-gradient(closest-side ellipse at 68% 50%, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: url("/assets/img/shape/mask-sub-vactor.png"),
    radial-gradient(closest-side ellipse at 68% 50%, #000 62%, rgba(0, 0, 0, 0) 100%);
}
.bc-vactor--right {
  -webkit-mask-image: url("/assets/img/shape/mask-sub-vactor02.png"),
    radial-gradient(closest-side ellipse at 32% 50%, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: url("/assets/img/shape/mask-sub-vactor02.png"),
    radial-gradient(closest-side ellipse at 32% 50%, #000 62%, rgba(0, 0, 0, 0) 100%);
}

.bc-dark .as-body-inner .as-site-line .line {
  background: var(--bc-bg);
}
.bc-dark .as-body-inner .as-site-line .line img,
.bc-dark .sec-line-shape img {
  opacity: 0.16;
  filter: none;
}

/* -------------------------------------------------------------------------
   2. Header
   ---------------------------------------------------------------------- */

.bc-dark .header-area.is-sticky .xb-header.stricky-fixed {
  background: rgba(9, 7, 12, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bc-border);
}

.bc-dark .main-menu > ul > li > a {
  color: rgba(255, 255, 255, 0.72);
}
.bc-dark .main-menu > ul > li > a:hover,
.bc-dark .main-menu > ul > li.active > a {
  color: #fff;
}

.bc-header-login {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}
.bc-header-login:hover {
  color: #fff;
}

.bc-mobile-cta {
  padding: 24px 20px 0;
}

/* -------------------------------------------------------------------------
   3. Mur de vidéos (preuve produit)
   ---------------------------------------------------------------------- */

.bc-videowall-track {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.bc-videowall-track ul {
  gap: 18px;
  display: flex;
  align-items: stretch;
}
.bc-videowall-track li {
  flex: 0 0 auto;
}

/* Le dégradé de bord évite la coupure nette du ruban. */
.bc-videowall-track::before,
.bc-videowall-track::after {
  content: "";
  top: 0;
  z-index: 2;
  width: 14%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bc-bg) 0%, rgba(9, 7, 12, 0) 100%);
}
.bc-videowall-track::after {
  right: 0;
  transform: scaleX(-1);
}
.bc-videowall-track::before {
  left: 0;
}

.bc-videowall-card {
  width: 208px;
  height: 370px;
  max-width: none;
  border: 1px solid var(--bc-border);
  box-shadow: var(--bc-glow);
}
.bc-videowall-card::before {
  display: none; /* le voile bas de la carte témoignage n'a pas lieu d'être ici */
}

.bc-videowall-caption {
  font-size: 14px;
  margin-top: 26px;
  color: rgba(233, 226, 245, 0.42);
}

@media (max-width: 767px) {
  .bc-videowall-card {
    width: 152px;
    height: 270px;
  }
}

/* -------------------------------------------------------------------------
   4. Problèmes
   ---------------------------------------------------------------------- */

.bc-dark .as-problem-item {
  border-color: var(--bc-border);
  background: var(--bc-surface);
}
.bc-dark .as-problem-item .xb-item--list {
  background: rgba(255, 84, 84, 0.055);
}
.bc-dark .as-problem-item .xb-item--list li {
  color: rgba(233, 226, 245, 0.78);
}

/* -------------------------------------------------------------------------
   5. Solutions
   ---------------------------------------------------------------------- */

.bc-dark .as-solution-item::before {
  background-color: rgba(148, 81, 245, 0.1);
}
.bc-dark .as-solution-item:not(:last-child),
.bc-dark .as-solution-item:nth-child(odd),
.bc-dark .as-solution-item:nth-child(3) {
  border-color: var(--bc-border);
}
.bc-dark .as-solution-item .xb-item--icon {
  background: var(--bc-accent-soft);
}
.bc-dark .as-solution-item:hover .xb-item--icon {
  background: rgba(148, 81, 245, 0.3);
}

/* -------------------------------------------------------------------------
   6. Étapes (comment ça marche)
   ---------------------------------------------------------------------- */

/* Les fonds de carte sont des PNG pastel dessinés pour du blanc. Assombris et
   teintés, ils redeviennent des halos colorés sur noir. */
.bc-dark .as-work-item .xb-item--inner {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
}
.bc-dark .as-work-item .xb-item--inner .shape--1 img {
  opacity: 0.42;
  mix-blend-mode: screen;
}
.bc-dark .as-work-item .xb-item--inner .shape--2 img,
.bc-dark .as-work-item .xb-item--inner .shape--3 img {
  opacity: 0.35;
}
.bc-dark .as-work-item .xb-item--content {
  color: rgba(233, 226, 245, 0.66);
}

/* -------------------------------------------------------------------------
   7. Fonctionnalités
   ---------------------------------------------------------------------- */

.bc-dark .as-feature-item {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  box-shadow: 0 24px 70px -50px rgba(148, 81, 245, 0.9);
}
.bc-dark .as-feature-item .xb-item--inner {
  background: transparent;
}
.bc-dark .as-feature-item .xb-item--bg img {
  opacity: 0.5;
  mix-blend-mode: screen;
}
.bc-dark .as-feature-item .xb-item--content {
  color: rgba(233, 226, 245, 0.62);
}

/* -------------------------------------------------------------------------
   8. Les deux moteurs (ex-« introduction »)
   ---------------------------------------------------------------------- */

.bc-dark .as-asintroduction-item .xb-item--inner {
  border-color: var(--bc-border);
  background: var(--bc-surface);
}
.bc-dark .as-asintroduction-item .xb-item--img {
  background: rgba(148, 81, 245, 0.08);
}
.bc-dark .as-asintroduction-item .xb-item--img .img {
  background: var(--bc-surface-2);
}
.bc-dark .as-asintroduction-item .xb-item--img.blure-shadow,
.bc-dark .as-asintroduction-item .xb-item--img.blure-shadow::before,
.bc-dark .as-asintroduction-item .xb-item--img.blure-shadow::after {
  background: #120c1b;
}
.bc-dark .as-asintroduction-item .xb-item--tag {
  color: #fff;
}
.bc-dark .as-asintroduction-item .xb-item--tag span {
  color: #fff;
  background: #170f22;
}

/* Le médaillon central, blanc dans la template. */
.bc-dark .as-security-logo,
.bc-dark .as-security-logo.main-logo {
  border-color: var(--bc-border);
  background: rgba(148, 81, 245, 0.06);
}
.bc-dark .as-security-logo span {
  background: #120c1b;
  border-color: var(--bc-border);
}
.bc-dark .as-security-logo.main-logo span,
.bc-dark .as-security-logo.main-logo span::before {
  border-color: var(--bc-border-strong);
}

.bc-dark .introduction .blur-shape img {
  opacity: 0.4;
  mix-blend-mode: screen;
}

/* -------------------------------------------------------------------------
   9. Tarifs
   ---------------------------------------------------------------------- */

/* La section est déjà sombre (#1b0042). On l'aligne sur le noir de la page
   pour éviter la bande violette qui cassait la continuité. */
.bc-dark .pricing[data-bg-color] {
  background-color: #0d0619 !important;
}

.bc-dark .as-pricing-item {
  padding: 30px;
  border: 1px solid var(--bc-border);
  background: rgba(255, 255, 255, 0.022);
  border-radius: 20px;
}
.bc-dark .as-pricing-item.pro-item {
  padding: 12px 12px 30px;
  border-color: transparent;
}

/* Ligne non incluse : croix, jamais une coche grise. Une coche grise se lit
   « inclus mais discret » et détruit la démonstration de la grille. */
.bc-dark .as-pricing-item .xb-item--list li.is-excluded {
  opacity: 0.45;
}
.bc-dark .as-pricing-item .xb-item--list li .bc-cross {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  border-radius: 100px;
  display: inline-block;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.bc-dark .as-pricing-item.pro-item .xb-item--list li .bc-cross {
  color: rgba(34, 0, 83, 0.55);
  background: rgba(34, 0, 83, 0.1);
}

.bc-pricing-note {
  font-size: 14px;
  margin: 44px auto 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.42);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   10. Témoignages
   ---------------------------------------------------------------------- */

.bc-dark .as-testimonail-item {
  border-color: var(--bc-border);
  background: var(--bc-surface);
}
.bc-dark .as-testimonail-item .xb-item--content {
  color: rgba(233, 226, 245, 0.66);
}
.bc-dark .as-testimonail-item .xb-item--content span {
  color: #fff;
}
.bc-dark .as-testimonail-item .xb-item--desig {
  color: rgba(233, 226, 245, 0.42);
}
.bc-dark .as-testimonail-video {
  border: 1px solid var(--bc-border);
}

/* -------------------------------------------------------------------------
   11. Bandeau de confiance
   ---------------------------------------------------------------------- */

.bc-dark .as-security-bottom::before {
  background: linear-gradient(90deg, var(--bc-bg) 32.83%, rgba(9, 7, 12, 0));
}
.bc-dark .as-security-bottom::after {
  background: linear-gradient(90deg, rgba(9, 7, 12, 0) 0%, var(--bc-bg) 32.83%);
}
.bc-dark .as-security-bottom ul li {
  color: rgba(233, 226, 245, 0.6);
}
.bc-dark .as-security-bottom ul li img {
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
   12. FAQ
   ---------------------------------------------------------------------- */

.bc-dark .as-faq-wrapper {
  background: linear-gradient(359deg, rgba(148, 81, 245, 0.07) 0%, rgba(9, 7, 12, 0) 100%);
}
.bc-dark .as-faq .accordion_box .block {
  border-top-color: var(--bc-border);
}
.bc-dark .as-faq .accordion_box .block .acc-btn {
  color: rgba(255, 255, 255, 0.86);
}
.bc-dark .as-faq .accordion_box .block .acc-btn .arrow {
  border-color: var(--bc-border);
}
.bc-dark .as-faq .accordion_box .block .acc-btn .arrow::before {
  color: rgba(255, 255, 255, 0.6);
}
.bc-dark .as-faq .accordion_box .block.active-block .acc-btn {
  color: #fff;
}
.bc-dark .as-faq .accordion_box .block.active-block .acc-btn .arrow {
  background: var(--bc-accent-soft);
}
.bc-dark .as-faq .accordion_box .block.active-block .acc-btn .arrow::before {
  color: #fff;
}
.bc-dark .as-faq .accordion_box .block .content p {
  color: rgba(233, 226, 245, 0.62);
}

.bc-dark .as-faq-contact .xb-item--inner {
  border-color: var(--bc-border);
  background: rgba(255, 255, 255, 0.028);
}
.bc-dark .as-faq-contact .xb-item--logo {
  background: rgba(148, 81, 245, 0.08);
}
.bc-dark .as-faq-contact .xb-item--logo span,
.bc-dark .as-faq-contact .xb-item--logo span::before {
  border-color: var(--bc-border);
}
/* Le titre est un dégradé noir → violet clippé sur le texte : illisible ici. */
.bc-dark .as-faq-contact .xb-item--title {
  background: linear-gradient(157deg, #ffffff 20%, #b98cff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bc-dark .as-faq-contact .xb-item--mail {
  color: rgba(233, 226, 245, 0.42);
}
.bc-dark .as-faq-contact .xb-item--mail a {
  color: #fff;
}

/* -------------------------------------------------------------------------
   13. CTA final, preuve sociale, footer
   ---------------------------------------------------------------------- */

.bc-dark .cta[data-bg-color] {
  background-color: #0d0619 !important;
}
.bc-dark .cta .sec-title--three .content {
  color: rgba(255, 255, 255, 0.68);
}

.bc-dark .as-brand-content .xb-item--title span {
  color: var(--bc-accent);
}
.bc-dark .as-brand-content .xb-item--review {
  color: rgba(255, 255, 255, 0.5);
}
.bc-dark .as-brand-list img {
  opacity: 0.42;
  filter: grayscale(1) brightness(2.4);
  transition: opacity 0.3s ease;
}
.bc-dark .as-brand-list li:hover img {
  opacity: 0.8;
}

.bc-footer-logo {
  display: inline-block;
  margin-bottom: 22px;
}
.bc-footer-baseline {
  max-width: 380px;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
  color: rgba(233, 226, 245, 0.55);
}
.bc-footer-cta {
  margin-bottom: 8px;
}

.bc-dark .as-footer-bottom p,
.bc-dark .as-footer-bottom a {
  color: rgba(233, 226, 245, 0.45);
}
.bc-dark .as-footer-bottom a:hover {
  color: #fff;
}
.bc-dark .as-footer-bottom p a + a {
  margin-left: 18px;
}
.bc-dark .widget-list li a {
  color: rgba(233, 226, 245, 0.55);
}
.bc-dark .widget-list li a:hover {
  color: #fff;
}

/* -------------------------------------------------------------------------
   14. Confort de lecture
   ---------------------------------------------------------------------- */

/* Halo violet sur le focus clavier : sans ça, l'anneau par défaut disparaît
   sur fond noir et la page devient inutilisable au clavier. */
.bc-dark a:focus-visible,
.bc-dark button:focus-visible,
.bc-dark .acc-btn:focus-visible {
  outline: 2px solid var(--bc-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .bc-dark .updown,
  .bc-dark .updown-2,
  .bc-dark .rotateanim,
  .bc-dark .scaleX {
    animation: none !important;
  }
}

/* =========================================================================
   PASSE 2 · corrections relevées au rendu (21/08/2026)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typographie française
   -------------------------------------------------------------------------
   Sastik pose `text-transform: capitalize` sur les titres et une partie des
   textes : c'est la capitalisation anglaise. En français elle produit
   « Ton Idée Devient Une Vidéo », qui est une faute, pas un style. On la
   coupe partout et on ne la rétablit nulle part.
   ---------------------------------------------------------------------- */
.bc-dark h1,
.bc-dark h2,
.bc-dark h3,
.bc-dark h4,
.bc-dark h5,
.bc-dark h6,
.bc-dark p,
.bc-dark li,
.bc-dark a,
.bc-dark span,
.bc-dark .title,
.bc-dark .content,
.bc-dark .sub-title span,
.bc-dark .acc-btn,
.bc-dark .thm-btn .text,
.bc-dark .xb-item--title,
.bc-dark .xb-item--content,
.bc-dark .footer-widget-title,
.bc-dark .widget-list li a {
  text-transform: none;
}

/* Le hero garde le rendu « verre dépoli » de la template mais son titre y
   perdait trop de densité sur fond noir. */
.bc-dark .hero-area--three .xb-hero-content .title {
  color: #fff;
}

/* -------------------------------------------------------------------------
   Étapes : les fonds pastel de carte viraient à la barre grise
   ---------------------------------------------------------------------- */
.bc-dark .as-work-item .xb-item--inner .shape--1 img {
  opacity: 0.18;
}

/* -------------------------------------------------------------------------
   Tarifs : la carte mise en avant reprend son fond clair
   -------------------------------------------------------------------------
   Ma règle générique `.bc-dark .as-pricing-item` a la même spécificité que
   `.as-pricing-item.pro-item` de main.css et arrive après : elle écrasait le
   dégradé clair. Résultat, un texte #220053 sur fond sombre, illisible. La
   carte claire au milieu de deux cartes sombres est justement ce qui fait
   ressortir l'offre recommandée : on la restaure explicitement.
   ---------------------------------------------------------------------- */
.bc-dark .as-pricing-item.pro-item {
  background: linear-gradient(152deg, #fff 0%, #e6d5ff 34.86%, #c49ff9 100%);
  box-shadow: 0 40px 90px -40px rgba(148, 81, 245, 0.8);
}
.bc-dark .as-pricing-item.pro-item .xb-item--list li {
  color: #220053;
}
.bc-dark .as-pricing-item.pro-item .xb-item--content {
  color: rgba(6, 0, 13, 0.75);
  border-color: rgba(6, 0, 13, 0.28);
}

/* -------------------------------------------------------------------------
   Témoignages
   -------------------------------------------------------------------------
   Piège de la template : `.as-testimonail-content` est une GRILLE à deux
   colonnes, et `marquee` / `marquee2` sont des défilements VERTICAUX
   (translateY). Les deux `.as-testimonail-inner` sont donc des colonnes qui
   montent et descendent, pas des rubans horizontaux. Passer le conteneur en
   flex, comme le laisse croire le nom « marquee », écrase toute la section.
   On ne touche donc pas à la disposition, seulement aux couleurs.

   Les fondus haut et bas sont peints en #fffefe pour un fond blanc : il faut
   les repeindre dans les deux sens, sinon un voile clair mange les cartes.
   ---------------------------------------------------------------------- */
.bc-dark .as-testimonail-content::before {
  background: linear-gradient(180deg, var(--bc-bg) 0%, rgba(9, 7, 12, 0) 84%);
}
.bc-dark .as-testimonail-content::after {
  background: linear-gradient(180deg, rgba(9, 7, 12, 0) 0%, var(--bc-bg) 60.58%);
}

/* Le halo violet de fond est prévu à 50 % d'opacité sur blanc : sur noir il
   délave toute la zone. */
.bc-dark .as-testimonials-inner::before {
  background: rgba(148, 81, 245, 0.16);
}

.bc-dark .as-testimonail-item {
  border-color: var(--bc-border);
  background: var(--bc-surface);
}
.bc-dark .as-testimonail-item .xb-item--content {
  color: rgba(233, 226, 245, 0.66);
}
.bc-dark .as-testimonail-item .xb-item--content span {
  color: #fff;
}
.bc-dark .as-testimonail-item .xb-item--desig {
  color: rgba(233, 226, 245, 0.42);
}
.bc-dark .as-testimonail-item .xb-item--name {
  color: #fff;
}
.bc-dark .as-testimonail-item .xb-item--author img {
  width: 44px;
  height: 44px;
  border-radius: 100px;
}
.bc-dark .as-testimonail-video {
  border: 1px solid var(--bc-border);
}

/* -------------------------------------------------------------------------
   FAQ : les pastilles de flèche restaient blanc plein
   -------------------------------------------------------------------------
   Le bloc porte `xb-faq as-faq` : la règle `.xb-faq … .arrow` de main.css
   impose un fond blanc que la variante `as-faq` ne recouvre pas.
   ---------------------------------------------------------------------- */
.bc-dark .xb-faq.as-faq .accordion_box .block .acc-btn .arrow {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--bc-border);
}
.bc-dark .xb-faq.as-faq .accordion_box .block .acc-btn .arrow::before {
  color: rgba(255, 255, 255, 0.7);
}
.bc-dark .xb-faq.as-faq .accordion_box .block .acc-btn {
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
}
.bc-dark .xb-faq.as-faq .accordion_box .block.active-block .acc-btn {
  color: #fff;
  background: transparent;
}
.bc-dark .xb-faq.as-faq .accordion_box .block.active-block .acc-btn .arrow {
  background: rgba(148, 81, 245, 0.28);
  border-color: var(--bc-border-strong);
}
.bc-dark .xb-faq.as-faq .accordion_box .block.active-block .acc-btn .arrow::before {
  color: #fff;
}

/* -------------------------------------------------------------------------
   CTA final : le texte passait par-dessus le visage de la vidéo
   ---------------------------------------------------------------------- */
.bc-dark .cta .cta-bg-video::after {
  content: "";
  inset: 0;
  position: absolute;
  background:
    linear-gradient(90deg, #0d0619 0%, rgba(13, 6, 25, 0.94) 38%, rgba(13, 6, 25, 0.55) 70%, rgba(13, 6, 25, 0.86) 100%),
    linear-gradient(180deg, rgba(13, 6, 25, 0.7) 0%, rgba(13, 6, 25, 0.18) 45%, rgba(13, 6, 25, 0.8) 100%);
}
.bc-dark .cta .as-cta-inner {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
   Preuve sociale : bloc centré, sans bandeau de logos
   ---------------------------------------------------------------------- */
.bc-dark .as-brand-content .xb-item--title {
  font-size: 26px;
  line-height: 1.35;
  max-width: 620px;
  margin: 0 auto 10px;
}
.bc-dark .as-brand-content .xb-item--review {
  color: rgba(255, 255, 255, 0.5);
}
.bc-brand-platforms {
  font-size: 14px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.32);
}

/* =========================================================================
   PASSE 3 · mobile
   ========================================================================= */

/* -------------------------------------------------------------------------
   Grille tarifaire : la carte qu'on vend passe en tête sur mobile
   -------------------------------------------------------------------------
   Empilée dans l'ordre du tableau, la PREMIÈRE carte vue sur un téléphone est
   Creator, l'offre plancher : on ancre sur le prix le plus bas et il faut
   faire défiler pour atteindre celle qu'on vend. Sous 992 px, la carte mise
   en avant monte donc en tête, puis le palier haut, et le plancher ferme.
   Au-delà, la lecture gauche-droite reprend et l'oeil tombe au milieu, là où
   la carte mise en avant est posée depuis le 23/09.

   On cible `:has(.pro-item)` et non un `nth-child` : le rang de la carte mise
   en avant vient des données (`featured` dans `site.ts`) et peut bouger. Une
   position écrite en dur ici se désynchroniserait en silence. Sans support de
   `:has()`, tout retombe à `order: 3` et l'ordre du tableau s'applique : la
   grille reste juste, elle n'est plus réordonnée.
   ---------------------------------------------------------------------- */
@media (max-width: 991px) {
  .bc-dark .as-pricing-inner > .row {
    flex-direction: column;
  }
  .bc-dark .as-pricing-inner > .row > [class*="col-"] {
    order: 3;
  }
  .bc-dark .as-pricing-inner > .row > [class*="col-"]:last-child {
    order: 2;
  }
  .bc-dark .as-pricing-inner > .row > [class*="col-"]:has(.pro-item) {
    order: 1;
  }
}

/* -------------------------------------------------------------------------
   Footer : les trois colonnes débordaient sous 480 px
   ---------------------------------------------------------------------- */
@media (max-width: 575px) {
  /* La template pose une grille de 3 colonnes fixes (`repeat(3, 1fr)`) qui
     déborde à 390 px : la colonne « Légal » sortait de l'écran. Deux colonnes
     tiennent, et les libellés ne se coupent plus. */
  .bc-dark .as-footer-widget-wrap {
    gap: 34px 24px;
    grid-template-columns: repeat(2, 1fr);
  }
  .bc-dark .as-footer-bottom {
    gap: 10px;
    text-align: center;
    flex-direction: column;
  }
  .bc-dark .as-footer-bottom p a + a {
    margin-left: 12px;
  }
}

/* Le titre de preuve sociale respirait mal en petite largeur. */
@media (max-width: 575px) {
  .bc-dark .as-brand-content .xb-item--title {
    font-size: 22px;
  }
}

/* =========================================================================
   PASSE 4 · poids de page
   -------------------------------------------------------------------------
   Font Awesome Pro a été retiré : 633 Ko de CSS et 1 Mo de police pour deux
   glyphes seulement (le chevron de l'accordéon et la flèche « retour en
   haut »). La flèche est passée en SVG inline dans le layout ; le chevron est
   redessiné ici en masque SVG, ce qui garde la transition et la rotation
   pilotées par `main.css`.
   ========================================================================= */

.bc-dark .xb-faq .accordion_box .block .acc-btn .arrow::before {
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  -webkit-mask: var(--bc-chevron) center / contain no-repeat;
  mask: var(--bc-chevron) center / contain no-repeat;
}

:root {
  --bc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* `color` pilote désormais la teinte du chevron via `background-color`. */
.bc-dark .xb-faq.as-faq .accordion_box .block .acc-btn .arrow::before {
  color: rgba(255, 255, 255, 0.7);
}
.bc-dark .xb-faq.as-faq .accordion_box .block.active-block .acc-btn .arrow::before {
  color: #fff;
}


/* =========================================================================
   PASSE 5 · décors clairs restants sur fond noir
   ========================================================================= */

/* -------------------------------------------------------------------------
   Rayons de la section « solutions »
   -------------------------------------------------------------------------
   `line-shape.png` est un faisceau de rais verticaux qui s'éteignent vers le
   bas, dessiné pour un fond blanc. Posé tel quel sur du noir, il devient une
   dalle grise à bord franc, juste au-dessus du surtitre. En `screen` à faible
   opacité il redevient ce qu'il est censé être : une lueur. Le masque efface
   la coupure nette du haut.
   ---------------------------------------------------------------------- */
.bc-dark .as-solution-shape img {
  opacity: 0.22;
  filter: blur(14px);
  mix-blend-mode: screen;
  /* Le dégradé part de zéro et ne culmine qu'aux trois quarts : sans ça, la
     coupure haute de l'image reste lisible comme une arête. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 55%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 55%, #000 100%);
}

/* Même traitement pour les lignes de liaison des cartes « étapes », qui sont
   du même gris clair. */
.bc-dark .as-work-item .xb-item--inner .shape--2 img,
.bc-dark .as-work-item .xb-item--inner .shape--3 img {
  opacity: 0.3;
  mix-blend-mode: screen;
}


/* =========================================================================
   PASSE 6 · les barres des cartes « étapes » et le menu mobile
   ========================================================================= */

/* -------------------------------------------------------------------------
   Bandes colorées sous les cartes d'étapes
   -------------------------------------------------------------------------
   `pro-bg01..03.png` sont des bandes OPAQUES (violet, orange, vert) dessinées
   pour terminer une carte blanche. Sur du noir, aucune opacité ne les sauve :
   elles restent des barres à bord franc. On les floute jusqu'à ce qu'il n'en
   reste que la couleur, ce qui rend l'intention d'origine — une lueur qui
   teinte le bas de la carte — au lieu d'un aplat.
   ---------------------------------------------------------------------- */
.bc-dark .as-work-item .xb-item--inner .shape--1 img {
  opacity: 0.34;
  transform: scale(1.1, 0.8);
  filter: blur(40px) saturate(2.4);
  mix-blend-mode: screen;
  /* Le flou seul laisse un coeur opaque : le masque efface aussi le bord bas,
     sinon la lueur se rappuie sur l'arête de la carte et redevient une barre. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
}

/* -------------------------------------------------------------------------
   Menu mobile
   -------------------------------------------------------------------------
   Le panneau latéral est peint en blanc par la template alors que ses liens
   héritent de `--color-heading`, passé au blanc par le thème sombre : les
   entrées étaient invisibles, blanc sur blanc. C'est la régression la plus
   grave du calque, elle rendait la navigation mobile inutilisable.
   ---------------------------------------------------------------------- */
.bc-dark .xb-header-menu {
  background: #0d0a13;
  border-right: 1px solid var(--bc-border);
}
.bc-dark .xb-header-menu-backdrop {
  background-color: rgba(4, 2, 8, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bc-dark .xb-menu-primary li a {
  color: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.bc-dark .xb-menu-primary li > a:hover {
  color: var(--bc-accent);
}
.bc-dark .xb-menu-close {
  background-color: rgba(255, 255, 255, 0.06);
}
.bc-dark .xb-close {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}
.bc-dark .xb-close::before,
.bc-dark .xb-close::after {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Le bouton du panneau se retrouvait sur deux lignes, et l'effet de survol
   `data-split-link` empilait sa copie du libellé par-dessus. On l'empêche de
   passer à la ligne et on le laisse prendre la largeur du panneau. */
.bc-mobile-cta {
  padding: 28px 0 0;
}
.bc-mobile-cta .thm-btn {
  width: 100%;
  justify-content: center;
}
.bc-mobile-cta .thm-btn .text {
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Bandeau de confiance sur petit écran
   -------------------------------------------------------------------------
   Les fondus latéraux font 80 px de chaque côté : sur 390 px de large ils
   mangent 40 % du ruban et aucune mention n'est lisible en entier. On les
   resserre et on réduit l'espacement pour qu'au moins une mention tienne.
   ---------------------------------------------------------------------- */
@media (max-width: 575px) {
  .bc-dark .as-security-bottom::before,
  .bc-dark .as-security-bottom::after {
    width: 36px;
  }
  .bc-dark .as-security-bottom ul {
    gap: 18px;
    margin-right: 18px;
  }
  .bc-dark .as-security-bottom ul li {
    font-size: 14px;
  }
}

/* Le badge « RECOMMANDÉ » de la carte phare était une pastille grise cerclée :
   elle se lisait comme une étiquette neutre alors que c'est l'argument de la
   grille. On la remplit à l'accent. */
.bc-dark .as-pricing-item.pro-item .xb-item--content {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #a06ef7 0%, #7b3ce8 100%);
  letter-spacing: 0.06em;
}

/* =========================================================================
   PASSE 7 · bascule mensuel / annuel
   -------------------------------------------------------------------------
   Le composant vient de la démo Fintech de la template (`pricing_toggle_btn`,
   `switch_btn`, `pricing_block`) et son comportement est déjà dans `main.js`.
   Seules ses couleurs sont à reprendre : il est dessiné en vert menthe pour
   un fond clair.
   ========================================================================= */

.bc-dark .pricing_toggle_btn {
  gap: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
}
.bc-billing-label {
  gap: 8px;
  transition: color 0.25s ease;
}

/* La classe `active` du rail veut dire « annuel » : on éclaire le libellé qui
   correspond à l'état courant plutôt que les deux à la fois. */
.bc-dark .pricing_toggle_btn .bc-billing-label:first-child {
  color: #fff;
}
.bc-dark .pricing_toggle_btn:has(.switch_btn.active) .bc-billing-label:first-child {
  color: rgba(255, 255, 255, 0.45);
}
.bc-dark .pricing_toggle_btn:has(.switch_btn.active) .bc-billing-label:last-child {
  color: #fff;
}
.bc-dark .pricing_toggle_btn .bc-billing-label:last-child {
  color: rgba(255, 255, 255, 0.45);
}

.bc-dark .pricing_toggle_btn .switch_btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(148, 81, 245, 0.4);
}
.bc-dark .pricing_toggle_btn .switch_btn::before {
  background: linear-gradient(180deg, #c69bff 0%, #7b3ce8 100%);
  box-shadow: 0 2px 12px rgba(148, 81, 245, 0.7);
}

.bc-billing-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
  color: #d9c4ff;
  background: rgba(148, 81, 245, 0.18);
  border: 1px solid rgba(148, 81, 245, 0.45);
}

/* Le basculement des deux blocs de prix est piloté par `main.js` via la classe
   `active` sur `.pricing_block`. On ne redéfinit que ce que la template ne
   couvre pas : ici les blocs sont des <div>, pas les éléments qu'elle visait. */
.bc-dark .pricing_block .pricing_amount_monthly {
  display: block;
}
.bc-dark .pricing_block .pricing_amount_yearly {
  display: none;
}
.bc-dark .pricing_block.active .pricing_amount_monthly {
  display: none;
}
.bc-dark .pricing_block.active .pricing_amount_yearly {
  display: block;
}

@media (max-width: 575px) {
  .bc-dark .pricing_toggle_btn {
    gap: 10px;
    font-size: 15px;
    flex-wrap: wrap;
  }
  .bc-billing-badge {
    font-size: 11px;
    padding: 4px 9px;
  }
}

/* =========================================================================
   PASSE 8 · hero
   ========================================================================= */

/* -------------------------------------------------------------------------
   Titre
   -------------------------------------------------------------------------
   La template clippe un dégradé sur le texte, avec un violet terne (#665184)
   aux deux extrémités. Sur fond noir la première ligne vire au gris et le
   titre perd sa force. On garde le principe du dégradé, on remonte les
   extrémités vers un lavande clair. `color` seul ne peut rien ici :
   `-webkit-text-fill-color: transparent` l'emporte.
   ---------------------------------------------------------------------- */
.bc-dark .hero-area--three .xb-hero-content .sec-title .title {
  background: linear-gradient(134deg, #cbb8ec 0%, #ffffff 44%, #ffffff 64%, #bda2e6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------------------
   Badge de preuve
   ---------------------------------------------------------------------- */
.xb-item--breadcrumd .bc-badge-thumbs {
  gap: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  vertical-align: middle;
}
.xb-item--breadcrumd .bc-badge-thumbs img {
  width: 22px;
  height: 22px;
  max-width: none;
  border-radius: 100px;
  border: 1.5px solid #1a1324;
  object-fit: cover;
}
.xb-item--breadcrumd .bc-badge-thumbs img + img {
  margin-left: -8px;
}
.bc-dark .hero-area--three .xb-hero-content .xb-item--breadcrumd {
  gap: 0;
  padding: 5px 16px 5px 6px;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(148, 81, 245, 0.3);
}

@media (max-width: 575px) {
  .xb-item--breadcrumd .bc-badge-thumbs img {
    width: 18px;
    height: 18px;
  }
}

/* =========================================================================
   PASSE 9 · cartes « fonctionnalités »
   -------------------------------------------------------------------------
   `fea-bg-shape01..05.png` sont des halos pastel prévus pour une carte
   blanche. À 50 % en `screen` sur du noir, ils transformaient les cinq cartes
   en aplats lavande clairs, la seule zone de la page qui restait en mode
   jour. On les ramène au rang de lueur : la carte redevient sombre et le
   violet ne fait plus que la teinter par le haut.
   ========================================================================= */
.bc-dark .as-feature-item .xb-item--bg img {
  opacity: 0.22;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
}
.bc-dark .as-feature-item {
  background: linear-gradient(180deg, rgba(148, 81, 245, 0.09) 0%, rgba(255, 255, 255, 0.02) 60%);
}
.bc-dark .as-feature-item .xb-item--title {
  color: #fff;
}
.bc-dark .as-feature-item .xb-item--content {
  color: rgba(233, 226, 245, 0.6);
}

/* =========================================================================
   PASSE 10 · hero, cartes flottantes
   -------------------------------------------------------------------------
   Les deux cartes flottantes de la template sont des vignettes discrètes
   posées aux angles du visuel principal. Nos panneaux régénérés remplissent
   toute leur boîte, si bien qu'ils recouvraient le tableau de bord au lieu de
   l'encadrer. On les ramène à leur rôle d'accent, plus petits et repoussés
   vers les bords, avec un halo qui les décolle du fond.
   ========================================================================= */
.bc-dark .hero-area--three .xb-hero-content .xb-item--img .img {
  top: -2%;
  left: -4%;
  max-width: 330px;
}
.bc-dark .hero-area--three .xb-hero-content .xb-item--img .img--2 {
  top: -6%;
  right: -3%;
  left: auto;
  max-width: 330px;
}
.bc-dark .hero-area--three .xb-hero-content .xb-item--img .img img {
  filter: drop-shadow(0 24px 60px rgba(148, 81, 245, 0.45));
}
/* Le visuel principal reste au-dessus du fond mais sous les deux accents. */
.bc-dark .hero-area--three .xb-hero-content .xb-item--img > img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 40px 90px rgba(0, 0, 0, 0.6));
}

@media (max-width: 1199px) {
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img .img,
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img .img--2 {
    max-width: 230px;
  }
}
/* Sous 992 px les accents se superposent au tableau de bord sans place pour
   respirer : on ne garde que le visuel principal. */
@media (max-width: 991px) {
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img .img,
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img .img--2 {
    display: none;
  }
}

/* =========================================================================
   PASSE 11 · section moteurs
   -------------------------------------------------------------------------
   La rangée de pastilles d'outils est posée en absolu PAR-DESSUS le visuel du
   Clipper : dans la template elle survolait un fond quasi vide, chez nous elle
   masque le panneau de découpe. On la descend sur l'arête basse de la carte,
   où elle se lit comme une barre d'outils flottante au lieu d'un cache.
   ========================================================================= */
.bc-dark .as-asintroduction-item .xb-item--img.shadow-img {
  margin-top: 14px;
  padding-bottom: 46px;
}
.bc-dark .as-asintroduction-item .xb-item--img.shadow-img .apps-img {
  top: auto;
  bottom: 0;
  width: 78%;
  left: 50%;
  transform: translateX(-50%);
}
.bc-dark .as-asintroduction-item .xb-item--img.shadow-img .apps-img img {
  filter: drop-shadow(0 10px 26px rgba(148, 81, 245, 0.55));
}
/* La rotation continue de la template n'a aucun sens sur une barre d'outils. */
.bc-dark .as-asintroduction-item .apps-img .rotateanim {
  animation: none;
}

/* =========================================================================
   PASSE 12 · lisibilité du visuel de hero sur mobile
   -------------------------------------------------------------------------
   Réduit à 390 px de large, le tableau de bord devient une vignette où plus
   rien n'est lisible. On le laisse déborder par la droite : le conteneur du
   hero est déjà en `overflow: hidden`, donc la page ne défile pas
   latéralement, et l'interface se lit comme une vraie capture.
   ========================================================================= */
@media (max-width: 767px) {
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img > img {
    width: 168%;
    max-width: none;
    margin-left: -6%;
  }
}

/* =========================================================================
   PASSE 13 · les damiers d'angle de la template
   -------------------------------------------------------------------------
   `corner-shape1/2/03/04/05/06.png` sont des damiers dont un carré sur deux
   est BLANC PUR (255,254,254) et l'autre presque noir. Dessinés pour une page
   claire, ils y passent pour un motif discret. Posés sur notre noir, ils se
   lisent exactement comme une image dont la transparence a échoué : le damier
   gris/blanc que montrent les éditeurs d'image. Deux d'entre eux tombent au
   pire endroit possible, le bas de la grille tarifaire et le haut du CTA
   final, c'est-à-dire les deux instants où la page demande de l'argent.
   On supprime le damier et on garde son rôle : marquer l'angle. À sa place,
   une lueur violette diffuse, qui va dans le sens du reste de la page.
   ========================================================================= */
.bc-dark .as-sec-shape .shape img {
  display: none;
}
.bc-dark .as-sec-shape .shape {
  width: 190px;
  height: 190px;
  pointer-events: none;
}
.bc-dark .as-sec-shape .shape::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(148, 81, 245, 0.42) 0%, rgba(148, 81, 245, 0.14) 45%, rgba(148, 81, 245, 0) 72%);
  filter: blur(6px);
}
@media (max-width: 991px) {
  .bc-dark .as-sec-shape .shape {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================================
   PASSE 14 · le néon, partout où l'oeil s'arrête
   -------------------------------------------------------------------------
   La page était sombre mais plate : le violet servait de couleur, pas de
   lumière. Chaque surface active émet désormais vraiment, avec un coeur clair
   qui retombe en halo. Le rendu visé est celui d'une enseigne allumée, pas
   d'un aplat violet.
   ========================================================================= */

/* --- Boutons primaires : coeur clair, reflet sur l'arête haute, halo --- */
.bc-dark .thm-btn--gradient2:not(.bg_white) {
  box-shadow:
    0 0 0 1px rgba(201, 162, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 10px 26px -10px rgba(148, 81, 245, 0.85),
    0 18px 60px -22px rgba(148, 81, 245, 0.75);
  transition: box-shadow 0.32s ease, transform 0.32s ease;
}
.bc-dark .thm-btn--gradient2:not(.bg_white):hover,
.bc-dark .thm-btn--gradient2:not(.bg_white):focus-visible {
  box-shadow:
    0 0 0 1px rgba(201, 162, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 30px -8px rgba(148, 81, 245, 1),
    0 26px 80px -20px rgba(168, 110, 255, 0.9);
  transform: translateY(-1px);
}
/* Le bouton clair reste clair, mais il pose sa propre lumière sur le noir. */
.bc-dark .thm-btn--gradient2.bg_white {
  box-shadow:
    0 10px 30px -12px rgba(255, 255, 255, 0.3),
    0 20px 70px -30px rgba(168, 110, 255, 0.7);
}

/* --- Hero : une aurore derrière le titre, pas un fond noir --- */
.bc-dark .hero-area--three .as-hero-shape .shape--1 img,
.bc-dark .hero-area--three .as-hero-shape .shape--2 img {
  opacity: 0.85;
}
.bc-dark .hero-area--three .as-hero-container::before {
  content: "";
  position: absolute;
  top: -18%;
  left: 50%;
  width: min(1500px, 130%);
  height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(148, 81, 245, 0.34) 0%, rgba(123, 60, 232, 0.16) 38%, rgba(9, 7, 12, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
/* Le tableau de bord du hero est la promesse produit : on l'allume. */
.bc-dark .hero-area--three .xb-hero-content .xb-item--img > img {
  filter:
    drop-shadow(0 40px 90px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 60px rgba(148, 81, 245, 0.42));
}

/* --- Mur de vidéos : chaque carte a son liseré allumé --- */
.bc-dark .bc-videowall-card {
  box-shadow:
    0 0 0 1px rgba(168, 110, 255, 0.28),
    0 18px 50px -24px rgba(148, 81, 245, 0.85);
}

/* --- CTA final : la section entière respire le violet --- */
.bc-dark .cta .as-cta-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 22% 50%, rgba(148, 81, 245, 0.3) 0%, rgba(123, 60, 232, 0.12) 42%, rgba(9, 7, 12, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.bc-dark .cta .as-cta-inner {
  position: relative;
  z-index: 2;
}

/* --- Surtitres encadrés : le halo devient une vraie source --- */
.bc-dark .sec-title--three .sub-title span {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 30px -6px rgba(148, 81, 245, 0.8);
}

/* =========================================================================
   PASSE 15 · fonctionnalités : de la lumière, pas un voile gris
   -------------------------------------------------------------------------
   La passe 9 avait déjà baissé les halos pastel de la template. Le problème
   restant n'était plus leur intensité mais leur NATURE : un pastel posé en
   `screen` sur du noir donne un gris uniforme, et les cinq cartes lisaient
   comme la seule zone délavée d'une page par ailleurs très contrastée. On
   coupe le pastel et on rend la teinte au violet de la marque, en lumière
   dirigée : le corps de la carte redevient noir, le haut s'allume.
   ========================================================================= */
.bc-dark .as-feature-item .xb-item--bg img {
  opacity: 0.14;
  filter: saturate(0.35) brightness(0.8);
}
.bc-dark .as-feature-item {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(168, 110, 255, 0.16) 0%, rgba(148, 81, 245, 0.05) 45%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 24px 70px -46px rgba(148, 81, 245, 0.9);
}
.bc-dark .as-feature-item:hover {
  border-color: rgba(168, 110, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 26px 80px -40px rgba(168, 110, 255, 0.95);
}
/* Les trois petites cartes n'ont pas la même hauteur de visuel : sans socle
   commun, leurs titres ne s'alignaient pas d'une carte à l'autre. */
@media (min-width: 992px) {
  .bc-dark .as-feature-item:not(.large-item) .xb-item--inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .bc-dark .as-feature-item:not(.large-item) .xb-item--img {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
  }
}

/* =========================================================================
   PASSE 16 · les bas de cartes qui ne tombaient pas au même endroit
   -------------------------------------------------------------------------
   Trois défauts d'alignement, tous dus au même réflexe de la template :
   égaliser la carte extérieure sans égaliser ce qu'elle contient.
   ========================================================================= */

/* Problèmes : la troisième liste a une puce plus courte que les deux autres,
   son panneau s'arrêtait 26 px plus haut. Bord bas en dents de scie. */
.bc-dark .as-problem-item {
  display: flex;
  flex-direction: column;
}
.bc-dark .as-problem-item .xb-item--list {
  flex: 1 1 auto;
}

/* Moteurs : les deux colonnes ne démarrent pas à la même hauteur, la seconde
   carte de droite tombait 47 px plus bas que celle de gauche. */
@media (min-width: 992px) {
  .bc-dark .as-asintroduction-item {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .bc-dark .as-asintroduction-item .xb-item--img {
    margin-top: auto;
  }
}

/* =========================================================================
   PASSE 17 · le seul texte de la page sous le seuil de contraste
   -------------------------------------------------------------------------
   La ligne des plateformes de la preuve sociale était posée à 32 %
   d'opacité sur noir, soit un rapport de 2,1:1 : sous le minimum WCAG de 4,5
   et, plus concrètement, illisible sur un écran de portable en extérieur.
   C'est la ligne qui nomme TikTok, Reels et Shorts, donc celle qui dit au
   visiteur que l'outil sert à ce qu'il vient chercher.
   ========================================================================= */
.bc-brand-platforms {
  color: rgba(233, 226, 245, 0.72);
}

/* =========================================================================
   PASSE 18 · étapes : la teinte orange et la teinte verte
   -------------------------------------------------------------------------
   Les trois cartes « comment ça marche » portent les teintes de la template
   (`clr-pink`, `clr-light-cream`, `clr-green`). Sur fond clair elles se lisent
   comme un code couleur ; sur notre noir, la deuxième vire à l'orange brûlé et
   la troisième au vert, deux couleurs qui n'existent nulle part ailleurs sur
   la page. Trois cartes, trois marques différentes. On garde la variation,
   mais à l'intérieur du violet : de l'améthyste au lilas.
   ========================================================================= */
.bc-dark .as-work-item .xb-item--inner .shape--1 img {
  filter: saturate(0.28) hue-rotate(238deg) brightness(0.92);
}
.bc-dark .as-work-item .xb-item--inner.clr-light-cream .shape--1 img {
  filter: saturate(0.3) hue-rotate(255deg) brightness(0.85);
}
.bc-dark .as-work-item .xb-item--inner.clr-green .shape--1 img {
  filter: saturate(0.32) hue-rotate(212deg) brightness(0.88);
}
/* Le grand chiffre suivait la même teinte que le halo. */
.bc-dark .as-work-item .xb-item--inner .xb-item--number {
  color: rgba(201, 162, 255, 0.92);
  text-shadow: 0 0 34px rgba(148, 81, 245, 0.55);
}
.bc-dark .as-work-item .xb-item--inner.clr-light-cream .xb-item--number {
  color: rgba(216, 186, 255, 0.92);
}
.bc-dark .as-work-item .xb-item--inner.clr-green .xb-item--number {
  color: rgba(178, 150, 255, 0.92);
}

/* =========================================================================
   PASSE 19 · la page raccourcie de treize sections à neuf
   -------------------------------------------------------------------------
   Deux blocs ont changé de place et ont besoin de leur habillage propre.
   ========================================================================= */

/* Le ruban de promesses, désormais collé sous la grille tarifaire. Il n'a plus
   ni titre ni bouton : c'est une bande de rappel, elle doit se lire vite et ne
   pas se disputer l'attention avec les prix qu'elle vient de commenter. */
.bc-dark .bc-trustband {
  border-top: 1px solid rgba(148, 81, 245, 0.16);
  background: linear-gradient(180deg, rgba(148, 81, 245, 0.05) 0%, rgba(9, 7, 12, 0) 100%);
}
.bc-dark .bc-trustband .as-security-bottom ul li {
  font-size: 15px;
  opacity: 0.9;
}

/* Les chiffres de preuve sociale, en pied de CTA final. */
.bc-cta-proof {
  margin-top: 26px;
  font-size: 15px;
  color: rgba(233, 226, 245, 0.62);
}
.bc-cta-proof span {
  color: #c9a2ff;
  font-weight: 600;
}

/* =========================================================================
   PASSE 20 · fonctionnalités : le halo pastel coupé à la source
   -------------------------------------------------------------------------
   La passe 15 baissait l'opacité du halo de la template sans toucher à son
   `mix-blend-mode: screen`, posé en passe 9. Or `screen` est justement ce qui
   transformait ce pastel en film gris uniforme : à 14 % il éclaircissait
   encore tout le corps de la carte. On retire l'image ; le dégradé radial de
   la passe 15 fait déjà le travail, en violet et dirigé depuis le haut.
   ========================================================================= */
.bc-dark .as-feature-item .xb-item--bg {
  display: none;
}
/* Les trois petites cartes portent des visuels de hauteurs différentes. Une
   hauteur de socle FIXE (et non un minimum) est la seule façon de faire
   tomber leurs trois titres sur la même ligne. */
@media (min-width: 992px) {
  .bc-dark .as-feature-item:not(.large-item) .xb-item--img {
    flex: 0 0 auto;
    height: 260px;
    min-height: 0;
  }
  .bc-dark .as-feature-item:not(.large-item) .xb-item--img img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
  }
}

/* =========================================================================
   PASSE 21 · compression verticale
   -------------------------------------------------------------------------
   Retirer quatre sections a raccourci le tunnel, mais celles qui restent
   respiraient encore comme une page de présentation : 135 px de marge haute
   et 120 px de marge basse par section, soit près de 1'000 px de vide sur la
   seule page d'accueil. Un visiteur qui doit faire douze écrans avant le
   bouton d'achat n'arrive pas au bouton d'achat.
   On resserre les marges de section et les blocs les plus hauts, sans jamais
   toucher aux interlignes du texte : c'est le vide ENTRE les blocs qu'on
   récupère, pas le confort de lecture.
   ========================================================================= */
@media (min-width: 992px) {
  .bc-dark .solution { padding-top: 90px; padding-bottom: 70px; }
  .bc-dark .work,
  .bc-dark .feature,
  .bc-dark .testimonial { padding-top: 85px; padding-bottom: 75px; }
  .bc-dark .as-introduction-wrapper { padding-top: 85px; padding-bottom: 75px; }
  .bc-dark .as-faq-wrapper { padding-top: 85px; padding-bottom: 75px; }
  .bc-dark .sec-title--three.mb-50 { margin-bottom: 34px; }
  .bc-dark .as-solution-btn.mt-60 { margin-top: 38px; }
}

/* Les trois cartes « étapes » pesaient 1'860 px à elles seules, presque un
   sixième de la page pour trois phrases. Le visuel de chaque carte y était
   affiché à sa taille naturelle, quelle que soit la hauteur que ça imposait. */
@media (min-width: 992px) {
  .bc-dark .as-work-item .xb-item--inner {
    padding-top: 42px;
    padding-bottom: 42px;
  }
  .bc-dark .as-work-item .xb-item--img img {
    max-height: 280px;
    width: auto;
  }
  .bc-dark .as-work-item + .as-work-item {
    margin-top: 26px;
  }
  .bc-dark .as-work-item .xb-item--number {
    line-height: 1;
  }
}

/* Le schéma des deux moteurs réservait 415 px de haut au tracé pointillé
   central, dont l'essentiel était du vide entre les quatre cartes. */
@media (min-width: 992px) {
  .bc-dark .as-introduction-logo .xb-item--line svg {
    height: 300px;
  }
  .bc-dark .as-introduction-inner .as-asintroduction-item + .as-asintroduction-item {
    margin-top: 22px;
  }
}

/* Les deux colonnes d'avis défilent : leur hauteur est un réglage, pas une
   contrainte. Trois cartes visibles suffisent à faire lire le défilement. */
@media (min-width: 992px) {
  .bc-dark .as-testimonail-content {
    max-height: 620px;
  }
}

/* =========================================================================
   PASSE 22 · compression, second tour
   -------------------------------------------------------------------------
   Après la passe 21 la page tenait encore 11'226 px. La mesure au navigateur
   dit où part la hauteur : le visuel de chaque carte « étape » s'affiche à
   324 px, les cartes cumulent une marge basse de 50 px ET une marge haute de
   26 px (76 px de vide entre deux cartes), et le tableau de bord du hero est
   précédé de 137 px de rien. On reprend ces vides-là, un par un.
   ========================================================================= */
@media (min-width: 992px) {
  /* 324 px de visuel pour une carte qui tient en trois lignes de texte. */
  .bc-dark .as-work-item .xb-item--img,
  .bc-dark .as-work-item .xb-item--img img {
    max-height: 232px;
  }
  /* Deux marges qui s'additionnent au lieu de se fondre. */
  .bc-dark .as-work-item {
    margin-bottom: 0;
  }
  .bc-dark .as-work-item + .as-work-item {
    margin-top: 24px;
  }
  .bc-dark .work .sec-title {
    margin-bottom: 36px;
  }

  /* Le hero pousse son tableau de bord 137 px sous les boutons. */
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img {
    padding-top: 76px;
  }

  /* Quatre colonnes de trois lignes dans un bloc de 340 px de haut. */
  .bc-dark .as-solution-item {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  /* Le défilement des avis se lit sur trois cartes, pas sur quatre. */
  .bc-dark .as-testimonail-content {
    max-height: 540px;
  }
}

/* =========================================================================
   PASSE 23 · « comment ça marche » passe en trois colonnes
   -------------------------------------------------------------------------
   C'était le bloc le plus lourd de la page : 1'681 px, presque deux écrans,
   pour dire trois phrases. La template empile trois cartes pleine largeur,
   texte à gauche et visuel à droite, et la hauteur vient du texte, pas de
   l'image : la rogner ne rendait rien.
   Trois colonnes règlent les deux problèmes d'un coup. La hauteur tombe à un
   tiers, et surtout la section redevient ce qu'elle prétend être : un procédé
   en trois temps, qu'on embrasse d'un seul regard au lieu de le dérouler en
   trois scrolls. Sous 992 px on revient à la pile, une colonne de 400 px ne
   tient pas sur un téléphone.
   ========================================================================= */
@media (min-width: 992px) {
  .bc-dark .as-work-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .bc-dark .as-work-item,
  .bc-dark .as-work-item + .as-work-item {
    margin: 0;
    height: 100%;
  }
  .bc-dark .as-work-item .xb-item--inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px 30px 0;
    text-align: left;
  }
  .bc-dark .as-work-item .xb-item--holder {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .bc-dark .as-work-item .xb-item--number {
    font-size: 62px;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
  }
  .bc-dark .as-work-item .xb-item--title {
    font-size: 24px;
  }
  /* Le visuel se cale en bas de carte et déborde sous l'arête : les trois
     panneaux se lisent alors comme posés dans la carte, pas collés dedans. */
  .bc-dark .as-work-item .xb-item--img {
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: auto;
    padding-top: 26px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-height: none;
  }
  .bc-dark .as-work-item .xb-item--img img {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    object-position: bottom;
    inset: auto;
    transform: none;
  }
}

/* =========================================================================
   PASSE 24 · les deux dernières fuites de la palette claire
   -------------------------------------------------------------------------
   Deux règles de la template résistaient encore, et pour la même raison :
   elles agissent par un canal que nos surcharges ne touchaient pas.

   1. `.as-feature-inner::before` est un aplat de 1'216 × 765 px en
      rgba(192,152,248,0.5) flouté à 120 px, posé DERRIÈRE les cartes. Sur la
      démo blanche c'est une ombre colorée ; chez nous c'est le voile lavande
      qui a survécu aux passes 9, 15 et 20 : elles réglaient l'image de fond
      des cartes, jamais ce pseudo-élément de la grille. On garde le principe
      d'un halo derrière les cartes, mais en violet de marque et à un tiers de
      l'opacité.

   2. Les grands chiffres 01/02/03 ne sont pas colorés par `color` mais par un
      dégradé clippé sur le texte, avec `-webkit-text-fill-color: transparent`.
      Une surcharge de `color` ne pouvait donc rien : le 02 restait orange
      brûlé et le 03 vert. On remplace le dégradé lui-même.
   ========================================================================= */
.bc-dark .as-feature-inner::before {
  background: rgba(148, 81, 245, 0.17);
  filter: blur(150px);
}
/* Le liseré de 8 px autour de chaque carte est un `background: white` de la
   template : il dessinait un cadre clair sur chacune des cinq cartes. */
.bc-dark .as-feature-item {
  background-color: transparent;
}

.bc-dark .as-work-item .clr-pink .xb-item--number,
.bc-dark .as-work-item .clr-light-cream .xb-item--number,
.bc-dark .as-work-item .clr-green .xb-item--number {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bc-dark .as-work-item .clr-pink .xb-item--number {
  background-image: linear-gradient(180deg, #c9a2ff 0%, #f1e6ff 94%);
}
.bc-dark .as-work-item .clr-light-cream .xb-item--number {
  background-image: linear-gradient(180deg, #a86eff 0%, #ece0ff 94%);
}
.bc-dark .as-work-item .clr-green .xb-item--number {
  background-image: linear-gradient(180deg, #7b3ce8 0%, #ddd0ff 94%);
}

/* =========================================================================
   PASSE 25 · avis : trois témoignages posés, plus de ruban
   -------------------------------------------------------------------------
   Le défilement a disparu du markup (voir Testimonials.astro) : il reste à
   donner à la colonne la tenue d'une pile, et à faire ressortir le résultat
   chiffré, qui est ce que le visiteur cherche dans un avis.
   ========================================================================= */
.bc-testimonial-stat {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #c9a2ff;
  border-radius: 999px;
  background: rgba(148, 81, 245, 0.16);
  box-shadow: inset 0 0 0 1px rgba(168, 110, 255, 0.34), 0 0 24px -8px rgba(148, 81, 245, 0.9);
}

/* =========================================================================
   PASSE 26 · CTA final : on ferme au centre
   -------------------------------------------------------------------------
   Le bloc était aligné à gauche sur toute la largeur de la page, laissant
   700 px de noir vide à droite : la vidéo de fond censée l'occuper est
   quasiment invisible sur notre thème. Or c'est la dernière demande de la
   page, et les huit sections qui la précèdent sont toutes centrées. Un
   dernier écran décentré et à moitié vide se lit comme une maquette
   inachevée, exactement là où il faut inspirer confiance.
   ========================================================================= */
.bc-dark .cta .as-cta-inner,
.bc-dark .cta .xb-item--inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.bc-dark .cta .xb-item--btn {
  justify-content: center;
}
.bc-dark .cta .sec-title--three .content {
  margin-left: auto;
  margin-right: auto;
}
.bc-dark .cta .as-cta-wrapper::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(148, 81, 245, 0.32) 0%, rgba(123, 60, 232, 0.13) 44%, rgba(9, 7, 12, 0) 74%);
}

/* =========================================================================
   PASSE 27 · les vides résiduels
   ========================================================================= */
/* Les quatre colonnes « ce que BestClip fait à ta place » tiennent en trois
   lignes de texte dans un bloc qui en réservait le double. */
@media (min-width: 992px) {
  .bc-dark .as-solution-item {
    padding-bottom: 24px;
  }
  .bc-dark .as-solution-item .xb-item--content {
    margin-bottom: 0;
  }
}
/* Le bouton « retour en haut » (`.xb-backtotop`) est en position fixe et se
   posait sur le texte des cartes sur les largeurs de téléphone, où il ne reste
   aucune marge à droite du contenu. On le rapproche du coin. */
@media (max-width: 991px) {
  .bc-dark .xb-backtotop {
    right: 10px;
    bottom: 14px;
    transform: scale(0.85);
  }
}

/* =========================================================================
   PASSE 28 · le troisième avis était coupé, et le CTA flottait
   -------------------------------------------------------------------------
   La colonne des avis héritait de la hauteur de la carte vidéo voisine, que
   la rangée centre verticalement, et `overflow: hidden` (posé pour masquer le
   défilement du ruban) rognait ce qui dépassait. Le ruban n'existe plus : la
   colonne doit maintenant prendre la hauteur de ses trois cartes, et la
   rangée s'aligner en haut plutôt qu'au centre.
   ========================================================================= */

/* Le CTA final réservait 712 px pour 532 px de contenu : 180 px de noir sous
   le dernier bouton de la page, juste avant le pied. */
.bc-dark .cta .as-cta-wrapper {
  padding-top: 96px;
  padding-bottom: 96px;
}
.bc-dark .cta .as-cta-inner {
  min-height: 0;
}

/* =========================================================================
   PASSE 29 · tarifs : rendre visible la copy qui dormait
   ========================================================================= */
.bc-plan-tag {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(233, 226, 245, 0.55);
}
.bc-plan-caption {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #4a1d8f;
}

/* =========================================================================
   PASSE 30 · le troisième avis, coupé sur téléphone aussi
   -------------------------------------------------------------------------
   La passe 28 a libéré la colonne des avis à partir de 992 px, mais le
   `overflow: hidden` posé pour masquer l'ancien défilement s'applique à
   toutes les largeurs. Sur téléphone la section s'arrêtait donc après le
   deuxième témoignage : Marc R. n'existait plus. Trois avis dont un invisible,
   c'est la même perte que la duplication qu'on vient de retirer.
   ========================================================================= */

/* =========================================================================
   PASSE 31 · hero : les deux cartes flottantes coupées inégalement
   -------------------------------------------------------------------------
   La template les décale de -4 % à gauche et -3 % à droite, deux valeurs
   proches mais appliquées à une boîte plus large que la fenêtre. En 1440,
   celle de gauche dépassait de 8 px et celle de droite de 101 : le hero
   penchait, et la carte de droite perdait la moitié de son onde sonore, sans
   que rien ne dise que c'était voulu. Un même retrait des deux côtés rétablit
   la symétrie, et le débordement redevient un parti pris lisible.
   ========================================================================= */
@media (min-width: 992px) {
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img {
    max-width: 1271px;
    margin-left: auto;
    margin-right: auto;
  }
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img .img {
    left: -6%;
    right: auto;
  }
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img .img--2 {
    left: auto;
    right: -6%;
  }
}

/* =========================================================================
   PASSE 32 · direction artistique : ce que font trendtrack, limova, agentova
   -------------------------------------------------------------------------
   Les trois références envoyées par Nuno partagent un système, relevé au
   navigateur sur leurs pages réelles plutôt que de mémoire :

     fond            rgb(1,8,8) · rgb(7,4,1) · rgb(9,10,11)   → noir NEUTRE
     carte           rgba(255,255,255,0.04) à 0.08            → blanc, pas teinté
     rayon           28 à 32 px                               → nous : 15 à 20
     bordure         absente, ou 1px rgba(255,255,255,0.04)
     conteneur       1280 à 1360 px

   L'écart n'est pas dans la quantité de lumière, c'est dans sa RÉPARTITION.
   Chez eux l'accent ne sert que trois choses : un mot du titre, le bouton
   principal, une icône. Tout le reste est du blanc à faible opacité sur du
   noir neutre. Chez nous le violet teintait le fond de chaque section, le fond
   de chaque carte, chaque bordure et chaque halo : à force d'être partout il
   ne désignait plus rien, et la page paraissait molle là où la leur paraît
   nette. On garde la lumière (Nuno l'a demandée, et leurs boutons en ont
   autant), on lui rend juste son exclusivité.

   Ce bloc est volontairement en fin de fichier : il vient après toutes les
   passes précédentes et les neutralise là où elles teintaient.
   ========================================================================= */

/* --- 1. Le noir redevient neutre --------------------------------------- */
:root {
  --bc-bg: #0a0a0c;
  --bc-bg-2: #101013;
  --bc-surface: rgba(255, 255, 255, 0.04);
  --bc-surface-2: rgba(255, 255, 255, 0.06);
  --bc-border: rgba(255, 255, 255, 0.07);
  --bc-border-soft: rgba(255, 255, 255, 0.05);
  --bc-radius: 28px;
}

/* --- 2. Toutes les cartes parlent la même langue ----------------------- */
.bc-dark .as-problem-item,
.bc-dark .as-work-item .xb-item--inner,
.bc-dark .as-feature-item,
.bc-dark .as-asintroduction-item .xb-item--inner,
.bc-dark .as-faq-contact .xb-item--inner,
.bc-dark .as-testimonail-item,
.bc-dark .as-pricing-item:not(.pro-item) {
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-border);
  background: var(--bc-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bc-dark .as-feature-item .xb-item--inner,
.bc-dark .as-pricing-item:not(.pro-item) .xb-item--holder {
  background: transparent;
}
/* Le survol est le seul moment où une carte se teinte : c'est une réponse à
   un geste, donc une information, pas une décoration. */
.bc-dark .as-work-item .xb-item--inner:hover,
.bc-dark .as-feature-item:hover,
.bc-dark .as-asintroduction-item .xb-item--inner:hover,
.bc-dark .as-pricing-item:not(.pro-item):hover {
  border-color: rgba(168, 110, 255, 0.34);
  background: rgba(255, 255, 255, 0.055);
}

/* --- 3. Les fonds de section redeviennent du noir ---------------------- */
.bc-dark .as-feature-inner::before,
.bc-dark .as-work-item .xb-item--inner .shape,
.bc-dark .as-feature-item .xb-item--bg,
.bc-dark .as-solution-shape,
.bc-dark .as-pricing-shape,
.bc-dark .blur-shape,
.bc-dark .as-blur-shape,
.bc-dark .blur-bottom-shape {
  display: none;
}
.bc-dark .pricing,
.bc-dark .cta {
  background-color: var(--bc-bg) !important; /* posé en `data-bg-color` inline */
}

/* --- 4. L'accent ne sert plus qu'à trois choses ------------------------ */
/* a) le bouton principal — il garde toute sa lumière */
/* b) un mot du titre : déjà en place sur le CTA final */
/* c) les icônes et les pastilles */
.bc-dark .as-solution-item .xb-item--icon {
  background: rgba(148, 81, 245, 0.13);
  border: 1px solid rgba(168, 110, 255, 0.22);
}
/* Les halos de section, eux, retombent à un niveau où ils éclairent sans
   colorer : un seul par section, au lieu d'un par élément. */
.bc-dark .hero-area--three .as-hero-container::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(148, 81, 245, 0.26) 0%, rgba(123, 60, 232, 0.09) 40%, rgba(10, 10, 12, 0) 70%);
}
.bc-dark .as-sec-shape .shape::before {
  background: radial-gradient(circle at center, rgba(148, 81, 245, 0.2) 0%, rgba(148, 81, 245, 0) 70%);
}

/* --- 5. Le conteneur s'aligne sur le leur ------------------------------ */
@media (min-width: 1400px) {
  .bc-dark .container {
    max-width: 1280px;
  }
}

/* =========================================================================
   PASSE 33 · les deux briques nouvelles, et la ligne de base des étapes
   ========================================================================= */

/* --- Rangée de faits du hero : des pastilles, en ligne ------------------ */
.bc-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 38px;
  padding: 0;
}
.bc-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(8px);
}
.bc-hero-chips li img {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

/* --- La capture du hero dans son cadre ---------------------------------
   Chez les trois références, la capture n'est jamais posée nue sur le fond :
   elle est tenue par un cadre à gros rayon qui la sépare de la page. C'est ce
   cadre qui fait « produit » plutôt que « image collée ». */
.bc-hero-frame {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 50px 120px -60px rgba(148, 81, 245, 0.85);
}
.bc-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* --- Étapes : un socle de visuel de hauteur FIXE ------------------------
   Les trois captures ont des proportions très différentes (425×363, 738×220,
   480×343). Posées à leur taille naturelle en haut de carte, elles décalaient
   les trois numéros de 30 px les uns des autres : les cartes se lisaient comme
   trois blocs mal alignés au lieu d'une séquence. Une hauteur fixe rend aux
   trois « 01 02 03 » leur ligne commune, qui est tout l'intérêt de la
   disposition en colonnes. */
@media (min-width: 992px) {
  .bc-dark .as-work-item .xb-item--inner {
    padding: 26px 28px 30px;
  }
  .bc-dark .as-work-item .xb-item--img {
    order: -1;
    height: 210px;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }
  .bc-dark .as-work-item .xb-item--img img {
    max-height: 176px;
    max-width: 88%;
    width: auto;
    object-fit: contain;
  }
  .bc-dark .as-work-item .xb-item--number {
    font-size: 40px;
    margin-bottom: 2px;
  }
  .bc-dark .as-work-item .xb-item--holder {
    margin-top: 0;
  }
}
@media (max-width: 991px) {
  .bc-dark .as-work-item .xb-item--img {
    order: -1;
    margin-bottom: 22px;
  }
}

/* Reste de la disposition empilée : la passe 23 posait `margin-top: auto` sur
   le visuel pour le coller au bas de la carte. Maintenant que le visuel est
   PASSÉ EN HAUT, cette marge automatique absorbe l'espace libre au profit du
   bloc de texte, qui se retrouve poussé vers le bas dans la carte dont le
   texte est le plus court. Résultat mesuré : le « 03 » tombait 26 px sous le
   « 01 » et le « 02 ». La séquence doit se lire sur une ligne. */
@media (min-width: 992px) {
  .bc-dark .as-work-item .xb-item--inner {
    justify-content: flex-start;
  }
  .bc-dark .as-work-item .xb-item--inner .xb-item--img,
  .bc-dark .as-work-item .xb-item--inner .xb-item--holder {
    margin-top: 0;
  }
}

/* =========================================================================
   PASSE 34 · la grille se met d'équerre
   -------------------------------------------------------------------------
   Trois défauts qui se voient tous pour la même raison : rien n'oblige deux
   cartes voisines à faire la même hauteur, donc leurs bords bas tombent où le
   texte les laisse. Sur les pages de référence, chaque rangée forme un bloc
   rectangulaire net ; c'est la première chose qui donne l'impression de
   « carré », avant toute question de couleur.
   ========================================================================= */

/* --- Fonctionnalités : les rangées s'égalisent ------------------------- */
@media (min-width: 992px) {
  .bc-dark .as-feature-inner .row {
    align-items: stretch;
  }
  .bc-dark .as-feature-inner .row > [class*="col-"] {
    display: flex;
  }
  .bc-dark .as-feature-item {
    width: 100%;
  }
  /* Le texte se cale en bas de carte : les trois descriptions partagent alors
     une ligne de base, quel que soit le nombre de lignes de chacune. */
  .bc-dark .as-feature-item .xb-item--holder {
    margin-top: auto;
  }
}

/* --- Moteurs : les deux colonnes partent de la même hauteur ------------ */
@media (min-width: 992px) {
  .bc-dark .as-introduction-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 100%;
  }
  .bc-dark .as-introduction-inner .as-asintroduction-item {
    flex: 1 1 0;
    margin: 0;
  }
  .bc-dark .as-introduction-inner .as-asintroduction-item .xb-item--inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .bc-dark .as-asintroduction-item .xb-item--img {
    margin-top: auto;
  }
}

/* --- Surtitres : une pastille, sans les chevrons de la template --------
   `bc-vactor` dessine deux paires de chevrons de part et d'autre du libellé.
   C'est l'ornement le plus daté de la page, répété huit fois, et il n'ajoute
   aucune information. Les trois références posent un simple libellé court, en
   petites capitales ou en pastille discrète. On garde la pastille, on retire
   les ailerons. */
.bc-dark .bc-vactor {
  display: none;
}
.bc-dark .sec-title--three .sub-title span {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  border: 1px solid rgba(168, 110, 255, 0.3);
  background: rgba(148, 81, 245, 0.12);
  box-shadow: none;
}

/* =========================================================================
   PASSE 35 · tarifs d'équerre, et le fantôme du CTA
   ========================================================================= */

/* --- Les trois cartes tarifaires font la même hauteur -------------------
   Mesuré : 550, 576 et 601 px. Trois hauteurs différentes veut dire trois
   boutons « Choisir » à trois hauteurs différentes, donc trois appels à
   l'action qui ne se comparent plus d'un coup d'oeil. C'est la seule grille
   de la page où l'alignement a une conséquence directe sur la décision. */
@media (min-width: 992px) {
  /* `align-items-lg-start` est un utilitaire Bootstrap, donc posé en
     `!important` : c'est le seul endroit du fichier où il faut répondre sur
     le même registre pour pouvoir étirer la rangée. */
  .bc-dark .as-pricing-inner .row {
    align-items: stretch !important;
  }
  .bc-dark .as-pricing-inner .row > [class*="col-"] {
    display: flex;
  }
  .bc-dark .as-pricing-item {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .bc-dark .as-pricing-item .xb-item--holder {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  /* Le bouton se colle en bas : les trois tombent sur la même ligne. */
  .bc-dark .as-pricing-item .xb-item--btn {
    margin-top: auto;
  }
  .bc-dark .as-pricing-item .xb-item--list {
    margin-bottom: 26px;
  }
}

/* --- CTA final : le rectangle qui restait ------------------------------
   La vidéo de fond est retirée du markup, mais son conteneur et le voile
   qui l'assombrissait sont posés par la template en CSS, sans elle : il en
   restait un rectangle mat, plus clair que le noir de la page et coupé net
   sur son bord droit, exactement l'aspect d'une image qui n'a pas fini de
   charger. La section est un aplat, plus son halo, rien d'autre. */
.bc-dark .cta .cta-bg-video,
.bc-dark .cta .as-cta-wrapper > .bg_img,
.bc-dark .cta .as-cta-wrapper::before {
  display: none !important;
}
.bc-dark .cta,
.bc-dark .cta .as-cta-wrapper,
.bc-dark .cta .as-cta-inner {
  background-color: #0a0a0c !important; /* `data-bg-color` est posé en ligne */
  background-image: none;
}
.bc-dark .cta .as-cta-wrapper {
  background-color: transparent !important;
}
.bc-dark .cta .as-cta-inner {
  background-color: transparent !important;
}

/* =========================================================================
   PASSE 36 · le cadre du hero sur téléphone
   -------------------------------------------------------------------------
   La passe 12 faisait déborder la capture du hero par la droite (168 % de
   large) pour qu'on distingue encore quelque chose en 390 px. Tant que
   l'image était posée nue, ce débordement se lisait comme un parti pris.
   Maintenant qu'elle est tenue par un cadre, c'est le CADRE qui se retrouve
   coupé : un rectangle dont le bord droit n'existe pas, ce qui ne ressemble
   plus à une intention mais à un dépassement. On rend la capture entière à
   son cadre. Elle est plus petite, mais complète et fermée, ce que font les
   trois pages de référence sur téléphone.
   ========================================================================= */
@media (max-width: 767px) {
  .bc-dark .hero-area--three .xb-hero-content .xb-item--img > img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  /* Le cadre lui-même mesurait 605 px pour une fenêtre de 390 et démarrait à
     -50 : la template lui donne une largeur propre, plus large que la colonne.
     Tant que l'image était nue on ne le voyait pas ; le cadre, lui, se voit. */
  .bc-dark .hero-area--three .xb-hero-content .bc-hero-frame {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 6px;
    border-radius: 20px;
  }
  .bc-hero-frame {
    padding: 6px;
    border-radius: 20px;
  }
  .bc-hero-frame img {
    border-radius: 15px;
  }
  .bc-hero-chips {
    margin: 24px 0 30px;
  }
  .bc-hero-chips li {
    padding: 8px 13px;
    font-size: 13px;
  }
}

/* =========================================================================
   PASSE 37 · le ruban de promesses reprend du corps
   -------------------------------------------------------------------------
   Posé sous la grille tarifaire, il s'était tellement aminci qu'il passait
   pour une bordure. C'est pourtant le seul endroit de la page où les six
   garanties se lisent d'affilée, à l'instant précis où le visiteur vient de
   voir un prix à quatre chiffres. Il lui faut la présence d'une bande, pas
   celle d'un filet.
   ========================================================================= */
.bc-dark .bc-trustband {
  padding-top: 30px;
  padding-bottom: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.bc-dark .bc-trustband .as-security-bottom ul li {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}
.bc-dark .bc-trustband .as-security-bottom ul li img {
  opacity: 1;
}
/* Les deux voiles latéraux doivent fondre vers le fond RÉEL de la bande,
   sinon on voit deux rectangles plus sombres à ses extrémités. */
.bc-dark .bc-trustband .as-security-bottom::before {
  background: linear-gradient(90deg, #0c0c0e 20%, rgba(12, 12, 14, 0));
}
.bc-dark .bc-trustband .as-security-bottom::after {
  background: linear-gradient(90deg, rgba(12, 12, 14, 0) 0%, #0c0c0e 80%);
}

/* =========================================================================
   PASSE 38 · le hero occupe la hauteur de l'écran, sans jamais couper
   -------------------------------------------------------------------------
   La capture partie, la section s'arrêtait au pixel près sous les deux
   boutons : mesuré au navigateur, il restait EXACTEMENT 0 px d'air sous eux
   sur les six formats testés. Un bloc de texte qui finit sur son dernier
   élément ne se lit pas comme un écran, il se lit comme une découpe.

   Trois choses à ne pas refaire ici, chacune payée par une mesure :

   1. `min-height`, JAMAIS `height`. En 360 × 640 le contenu du hero mesure
      déjà 702 px, et 698 px en téléphone paysage (844 × 390). Une hauteur
      FIXE de 100 % y couperait le bouton principal, c'est-à-dire la seule
      chose que la page a à vendre. Avec `min-height`, la section prend
      l'écran quand elle y tient et pousse vers le bas quand elle n'y tient
      pas. On ne perd jamais le CTA.

   2. `svh` avant tout, `vh` en repli. Sur iOS Safari, `100vh` vaut la hauteur
      de la fenêtre BARRE D'ADRESSE MASQUÉE : au chargement, quand la barre
      est encore là, un hero en `100vh` dépasse de ~90 px et pousse les
      boutons sous la ligne de flottaison. `100svh` est la petite fenêtre,
      celle qui est réellement visible tout le temps. On ne prend pas `dvh` :
      il se recalcule pendant le défilement et fait sauter la mise en page à
      chaque apparition de la barre.

   3. Le centrage vit sur le CONTENEUR, pas sur la section. Les décors
      (`.as-hero-shape`, `.as-sec-shape`) sont des enfants de la section et
      leurs `.shape` sont en absolu : ils deviennent des éléments flex de
      hauteur nulle et ne pèsent pas sur le centrage. Vérifié avant d'écrire
      cette règle, c'est ce qui permet le flex ici sans toucher aux halos.

   Le `padding-top: 222px` de la template ne sert plus : il poussait le
   contenu sous le header dans une mise en page qui coulait du haut. On
   centre maintenant dans l'espace RESTANT, donc le haut ne réserve que la
   hauteur du header (78 px mesurés) plus son air.
   ========================================================================= */
.bc-dark .hero-area--three {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.bc-dark .hero-area--three .as-hero-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 110px;
}

/* Écran haut : on desserre. Le contenu fait 513 px sur PC ; sous 1080 px de
   fenêtre il reste 447 px de marge, largement de quoi respirer davantage. */
@media (min-width: 992px) and (min-height: 900px) {
  .bc-dark .hero-area--three .as-hero-container {
    padding-top: 150px;
    padding-bottom: 130px;
  }
}

/* Téléphone : le header n'y mesure que 29 px, inutile de réserver 120. */
@media (max-width: 767px) {
  .bc-dark .hero-area--three .as-hero-container {
    padding-top: 92px;
    padding-bottom: 82px;
  }
}

/* Fenêtre BASSE (téléphone paysage, petit portable) : le contenu ne tiendra
   pas, quoi qu'on fasse. On récupère le peu qu'on peut sur les espacements
   plutôt que de laisser la page s'étirer pour rien. */
@media (max-height: 700px) {
  .bc-dark .hero-area--three .as-hero-container {
    padding-top: 88px;
    padding-bottom: 56px;
  }
  .bc-hero-chips {
    margin: 20px 0 26px;
  }
}

/* =========================================================================
   RÉALISATIONS · le rail de vidéos, et le trio du CTA final
   -------------------------------------------------------------------------
   Section propre à BestClip : rien de Sastik ici, donc rien à surcharger.
   Elle vit quand même dans ce fichier, parce que c'est la seule feuille du
   dépôt qui nous appartienne et que scinder le style en deux mécanismes
   coûterait plus cher que les quelques lignes gagnées.

   Direction assumée : une pellicule bord à bord sur le noir, et le violet
   réservé aux trois vignettes qui jouent réellement. L'accent ne décore pas,
   il dit où regarder. Une grille de trois cartes centrées dirait l'inverse :
   que tout se vaut, et qu'il n'y en a que trois.

   Zéro décalage de mise en page : la carte a une largeur fixe et le cadre un
   `aspect-ratio`, donc la hauteur du rail est connue avant le premier poster.
   ========================================================================= */

.bc-dark .bc-showcase {
  padding: 130px 0 120px;
  background-color: var(--bc-bg);
}
/* =========================================================================
   PASSE 34 · hero calqué sur Trendtrack, VSL verticale sous le bouton
   -------------------------------------------------------------------------
   Même disposition que la référence : badge, titre en deux temps avec la
   promesse en couleur, sous-titre court et gris, pastilles, UN bouton, puis
   la vidéo tenue dans un cadre à double bord, en 16:9 : la VSL est tournée
   en paysage.
   ========================================================================= */

/* --- Titre : la promesse porte la couleur ------------------------------
   Le h1 clippe déjà un dégradé lavande sur son texte. Le span doit clipper
   le SIEN, sinon il hérite du fond transparent et disparaît. */
.bc-dark .hero-area--three .xb-hero-content .sec-title .title .bc-hero-accent {
  background: linear-gradient(100deg, #b98cff 0%, #9451f5 45%, #c7a4ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* --- Le médaillon TikTok glissé dans le titre --------------------------
   La taille est en `em` : elle suit le titre à toutes les largeurs sans une
   seule règle de reprise, et 0,95em la cale sur la hauteur de capitale.

   Mesuré plutôt que supposé : le h1 fait 170 px à 0,82em comme à 1em. La
   pastille NE POUSSE PAS l'interligne, parce que le titre porte un
   `line-height` fixe qui absorbe la boîte de l'image. On peut donc la
   dimensionner à l'oeil, pas sous la contrainte du gabarit.

   `vertical-align` en em négatif plutôt que `middle` : `middle` aligne sur
   l'axe des minuscules et faisait flotter la pastille trop haut entre deux
   capitales.

   Elle ne porte AUCUN `background-clip` : le dégradé clippé du titre ne vaut
   que pour `.bc-hero-accent`, et une image n'hérite pas de
   `-webkit-text-fill-color`. Si un jour le h1 entier passe en dégradé clippé,
   c'est ici qu'il faudra neutraliser le fill.
   --------------------------------------------------------------------- */
.bc-dark .hero-area--three .xb-hero-content .sec-title .title .bc-hero-title-icon {
  width: 0.95em;
  height: 0.95em;
  max-width: none;
  display: inline-block;
  vertical-align: -0.17em;
  border-radius: 50%;
  /* Le rond est noir sur fond noir : sans ce liseré il flotte sans contour. */
  box-shadow: 0 0 0 1px rgba(233, 226, 245, 0.16);
}

.bc-br-lg { display: none; }
@media (min-width: 992px) {
  .bc-br-lg { display: inline; }
}

/* --- Sous-titre : court, gris, deux lignes au maximum sur PC ------------ */
.bc-dark .hero-area--three .xb-hero-content .xb-item--content {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(233, 226, 245, 0.66);
}

/* --- La VSL -------------------------------------------------------------- */
.bc-vsl {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.bc-vsl-frame {
  position: relative;
  width: min(1100px, 100%);
  padding: 10px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 60px 140px -60px rgba(148, 81, 245, 0.9);
}
.bc-vsl-video,
.bc-vsl-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  background: #0f0b16;
  object-fit: cover;
}

/* Lecteur Vidalytics : mêmes coins que la vidéo maison, fond sombre le temps
   du chargement. */
.bc-vsl-embed {
  border-radius: 26px;
  overflow: hidden;
  background: #0f0b16;
}

/* Emplacement réservé : un vrai écran éteint, pas un trou. */
.bc-vsl-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(148, 81, 245, 0.28) 0%, rgba(148, 81, 245, 0) 60%),
    linear-gradient(180deg, #151020 0%, #0c0913 100%);
  border: 1px solid rgba(148, 81, 245, 0.18);
}
.bc-vsl-placeholder-play,
.bc-vsl-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding-left: 4px;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(148, 81, 245, 0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 10px rgba(148, 81, 245, 0.12), 0 20px 50px -20px rgba(148, 81, 245, 0.9);
}
.bc-vsl-placeholder-note {
  font-size: 13px;
  color: rgba(233, 226, 245, 0.55);
}

/* Bouton de lecture : visible seulement quand la vidéo est à l'arrêt
   (mouvement réduit, lecture automatique refusée). */
.bc-vsl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.bc-vsl-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.bc-vsl-frame.bc-is-playing .bc-vsl-play {
  opacity: 0;
  pointer-events: none;
}

/* « Activer le son », en haut à droite comme chez Trendtrack. */
.bc-vsl-sound {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 9, 18, 0.55);
  backdrop-filter: blur(10px);
  transition: background 0.2s ease;
}
.bc-vsl-sound:hover { background: rgba(148, 81, 245, 0.55); }
.bc-vsl-sound .bc-vsl-ico-sound { display: none; }
.bc-vsl-sound[aria-pressed="true"] .bc-vsl-ico-sound { display: inline; }
.bc-vsl-sound[aria-pressed="true"] .bc-vsl-ico-muted { display: none; }
.bc-vsl-sound:focus-visible,
.bc-vsl-play:focus-visible {
  outline: 2px solid #c7a4ff;
  outline-offset: 3px;
}

/* La vidéo dépasse de l'écran sous le bouton, comme la référence : le
   visiteur la voit commencer et descend pour la regarder. On retire donc la
   grosse marge basse du hero, qui ne centrait plus rien. */
.bc-dark .hero-area--three .as-hero-container {
  padding-bottom: 90px;
}

@media (max-width: 575px) {
  .bc-vsl { margin-top: 44px; }
  .bc-vsl-frame {
    padding: 6px;
    border-radius: 20px;
  }
  .bc-vsl-video,
  .bc-vsl-placeholder { border-radius: 15px; }
  .bc-vsl-sound { top: 12px; right: 12px; padding: 6px 10px; font-size: 12px; }
  .bc-vsl-placeholder-play,
  .bc-vsl-play { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-vsl-play,
  .bc-vsl-sound { transition: none; }
  .bc-vsl-play:hover { transform: translate(-50%, -50%); }
}

/* -------------------------------------------------------------------------
   La sortie de section (`SectionCta`)
   -------------------------------------------------------------------------
   Cinq sections finissaient sans bouton. Elles en portent une chacune, avec
   le MÊME libellé, donc il fallait que la page ne se lise pas comme une
   bannière répétée cinq fois : c'est le rôle de la ligne d'accroche, qui
   rattache le bouton à l'argument que la section vient de tenir.

   Le bloc réutilise `.as-solution-btn` de la template (marge et animation
   déjà câblées) : on ne style ici que la ligne.
   ---------------------------------------------------------------------- */

.bc-dark .bc-section-cta-lead {
  margin: 0 auto 20px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(233, 226, 245, 0.62);
}

@media (max-width: 767px) {
  .bc-dark .bc-section-cta-lead {
    margin-bottom: 16px;
    font-size: 15px;
  }
}

/* =========================================================================
   PASSE 40 · les 40 clips (24/09)
   -------------------------------------------------------------------------
   Un seul gabarit de cadre pour toute la page (`.bc-clip`), toujours en
   9:16 comme les fichiers : aucun recadrage, nulle part.
   ========================================================================= */
.bc-dark .bc-clip {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--bc-bg-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Miniature de la première frame (12x21, posée en ligne par Clip.astro) :
   le cadre montre la scène avant même que le poster arrive. Agrandie telle
   quelle elle se pixelise ; floutée sur un pseudo-élément, elle devient une
   aquarelle de la scène. Le poster, puis la vidéo, la recouvrent. */
.bc-dark .bc-clip::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  background: var(--bc-lq, none) center / cover no-repeat;
  filter: blur(12px) saturate(1.15);
  pointer-events: none;
}
.bc-dark .bc-clip video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bc-dark .bc-clip-meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 40px 14px 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 7, 12, 0) 0%, rgba(9, 7, 12, 0.85) 100%);
}
.bc-dark .bc-clip-tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  color: #e6dbff;
  background-color: rgba(148, 81, 245, 0.28);
  border: 1px solid rgba(168, 110, 255, 0.45);
  text-transform: none;
}
.bc-dark .bc-clip-name {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* --- Le mur : deux rangées qui se croisent ------------------------------ */
.bc-dark .bc-showcase { padding: 110px 0 100px; overflow: hidden; }
.bc-dark .bc-wall {
  position: relative;
  margin: 50px 0 34px;
  padding: 30px 0;
}
.bc-dark .bc-wall-row {
  overflow: hidden;
  width: 112%;
  margin-left: -6%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.bc-dark .bc-wall-row--left { transform: rotate(-2.5deg); }
.bc-dark .bc-wall-row--right { transform: rotate(2.5deg); margin-top: 18px; }
.bc-dark .bc-wall-track {
  display: flex;
  width: max-content;
  animation: bc-wall-left 110s linear infinite;
}
.bc-dark .bc-wall-row--right .bc-wall-track { animation-name: bc-wall-right; }
/* L'espace est porté par la carte, pas par `gap` : sinon la copie arrive
   décalée d'un intervalle et la boucle saute. */
.bc-dark .bc-wall-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bc-dark .bc-wall-card {
  flex: 0 0 auto;
  width: 220px;
  margin-right: 16px;
}
@keyframes bc-wall-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bc-wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.bc-dark .bc-showcase-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.bc-dark .bc-showcase-note {
  margin: 0;
  max-width: 420px;
  font-size: 15px;
  color: rgba(233, 226, 245, 0.62);
}

@media (max-width: 767px) {
  .bc-dark .bc-showcase { padding: 80px 0 70px; }
  .bc-dark .bc-wall { margin: 34px 0 24px; padding: 18px 0; }
  .bc-dark .bc-wall-card { width: 132px; margin-right: 10px; }
  .bc-dark .bc-wall-row--right { margin-top: 10px; }
  .bc-dark .bc-wall-track { animation-duration: 80s; }
  .bc-dark .bc-clip { border-radius: 12px; }
  .bc-dark .bc-clip-meta { padding: 26px 8px 8px; gap: 4px; }
  .bc-dark .bc-clip-tag { font-size: 9px; padding: 3px 6px; }
  .bc-dark .bc-clip-name { font-size: 12px; }
  .bc-dark .bc-showcase-foot { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-dark .bc-wall-track { animation: none; }
  .bc-dark .bc-wall-row { overflow-x: auto; }
  .bc-dark .bc-wall-list[aria-hidden="true"] { display: none; }
}

/* --- Carte « Dix styles » : trois clips en éventail ---------------------- */
.bc-dark .as-feature-item .bc-fea-clips {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 6px;
}
.bc-dark .bc-fea-clips .bc-clip {
  width: 96px;
  margin: 0 -6px;
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
.bc-dark .bc-fea-clips .bc-clip:nth-child(1) { transform: rotate(-6deg) translateY(8px); }
.bc-dark .bc-fea-clips .bc-clip:nth-child(2) { transform: translateY(-6px); z-index: 2; width: 108px; border-color: rgba(168, 110, 255, 0.5); }
.bc-dark .bc-fea-clips .bc-clip:nth-child(3) { transform: rotate(6deg) translateY(8px); }

/* --- CTA final : cinq clips en éventail ---------------------------------- */
.bc-dark .bc-cta-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}
.bc-dark .bc-cta-strip li { width: 140px; margin: 0 -10px; }
.bc-dark .bc-cta-strip li:nth-child(1) { transform: rotate(-10deg) translateY(26px); }
.bc-dark .bc-cta-strip li:nth-child(2) { transform: rotate(-5deg) translateY(6px); z-index: 1; }
.bc-dark .bc-cta-strip li:nth-child(3) { transform: translateY(-6px); z-index: 2; }
.bc-dark .bc-cta-strip li:nth-child(4) { transform: rotate(5deg) translateY(6px); z-index: 1; }
.bc-dark .bc-cta-strip li:nth-child(5) { transform: rotate(10deg) translateY(26px); }
.bc-dark .bc-cta-strip .bc-clip {
  border-color: rgba(148, 81, 245, 0.4);
  box-shadow: 0 24px 60px -28px rgba(148, 81, 245, 0.8);
}
@media (max-width: 575px) {
  .bc-dark .bc-cta-strip li { width: 84px; margin: 0 -8px; }
}

/* --- Avis : les proportions de la template --------------------------------
   Deux passes avaient plafonné les colonnes à 620 puis 540 px sous une vidéo
   de 691 px, et la marge négative de la template collait les cartes à la
   vidéo. On rend la hauteur, on rend l'air. */
@media (min-width: 992px) {
  .bc-dark .as-testimonail-content { max-height: none; }
  .bc-dark .as-testimonail-wrap { height: 691px; margin-left: 0; padding-left: 28px; }
}

/* --- Icône TikTok du titre : penchée vers la droite ---------------------- */
.bc-dark .hero-area--three .xb-hero-content .sec-title .title .bc-hero-title-icon {
  width: 1.08em;
  height: auto;
  vertical-align: -0.2em;
  border-radius: 0;
  box-shadow: none;
  transform: rotate(12deg);
  filter: drop-shadow(0 10px 24px rgba(148, 81, 245, 0.45));
}

/* --- Colonnes verticales : le volume ----------------------------------------
   Le mouvement vient de la template (`marquee-first` / `marquee-2`), on n'en
   règle que la vitesse. Fondus haut et bas : la colonne entre et sort du
   cadre au lieu d'être tranchée. */
.bc-dark .bc-cols-section {
  padding: 110px 0 100px;
  background: radial-gradient(60% 40% at 50% 0%, rgba(148, 81, 245, 0.18) 0%, rgba(148, 81, 245, 0) 70%), var(--bc-bg);
  overflow: hidden;
}
.bc-dark .bc-cols-section .title span {
  background: linear-gradient(90deg, #c9a2ff 0%, #9451f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bc-dark .bc-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  height: 760px;
  margin-top: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.bc-dark .bc-cols-col { min-width: 0; }
.bc-dark .bc-cols-col--2,
.bc-dark .bc-cols-col--4 { margin-top: -140px; }
.bc-dark .bc-cols .marquee-2,
.bc-dark .bc-cols .marquee-first { animation-duration: 90s; }
.bc-dark .bc-cols-col--3 .marquee-2 { animation-duration: 110s; }
.bc-dark .bc-cols-col--2 .marquee-first { animation-duration: 100s; }
.bc-dark .bc-cols-item { padding-bottom: 18px; }
.bc-dark .bc-cols .bc-clip { border-radius: 20px; }

@media (max-width: 991px) {
  .bc-dark .bc-cols { grid-template-columns: repeat(3, 1fr); height: 640px; }
  .bc-dark .bc-cols-col--4 { display: none; }
}
@media (max-width: 575px) {
  .bc-dark .bc-cols-section { padding: 80px 0 70px; }
  .bc-dark .bc-cols { grid-template-columns: repeat(2, 1fr); gap: 10px; height: 560px; }
  .bc-dark .bc-cols-col--3 { display: none; }
  .bc-dark .bc-cols-item { padding-bottom: 10px; }
  .bc-dark .bc-cols .bc-clip { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-dark .bc-cols .marquee-2,
  .bc-dark .bc-cols .marquee-first { animation: none; }
}

/* --- Témoignages vidéo · créateurs (05/10/2026) ---------------------------
   Deux cartes larges : le lecteur Vidalytics en 9:16 d'un côté, le profil
   TikTok vérifiable de l'autre (abonnés, j'aime, vidéos les plus vues).
   Le lecteur change de côté d'une carte à l'autre sur ordinateur. Aucun
   filet : les cartes se détachent par leur fond et leur ombre, comme les
   fonctionnalités. Le halo de section vient de « Passe sans filets ». */
.bc-dark .bc-vt { padding: 110px 0 100px; }

/* Les trois chiffres cumulés : de la typo, pas des pastilles. */
.bc-dark .bc-cr-stats {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 88px);
}
.bc-dark .bc-cr-stats li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bc-dark .bc-cr-stats strong {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(180deg, #ffffff 30%, #c9a8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bc-dark .bc-cr-stats span { margin-top: 10px; font-size: 14px; color: var(--bc-text); }

.bc-dark .bc-cr-list { display: grid; gap: 32px; max-width: 1000px; margin: 64px auto 0; }

.bc-dark .bc-cr-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: 24px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  isolation: isolate;
}
/* Lueur violette derrière le lecteur, qui suit son côté. */
.bc-dark .bc-cr-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(420px 520px at 18% 50%, rgba(148, 81, 245, 0.2), transparent 70%);
  pointer-events: none;
}
.bc-dark .bc-cr-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.bc-dark .bc-cr-card:nth-child(even) .bc-cr-player { order: 2; }
.bc-dark .bc-cr-card:nth-child(even) .bc-cr-body { padding: 12px 0 12px 24px; }
.bc-dark .bc-cr-card:nth-child(even)::before {
  background: radial-gradient(420px 520px at 82% 50%, rgba(148, 81, 245, 0.2), transparent 70%);
}

.bc-dark .bc-cr-player {
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(192, 152, 248, 0.22), 0 40px 80px -36px rgba(148, 81, 245, 0.7);
}

.bc-dark .bc-cr-body { padding: 12px 24px 12px 0; min-width: 0; }

.bc-dark .bc-cr-head { display: flex; align-items: center; gap: 16px; }
.bc-dark .bc-cr-avatar {
  flex: none;
  width: 68px;
  height: 68px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8bcff 0%, #9451f5 55%, #5b1fd1 100%);
}
.bc-dark .bc-cr-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bc-bg);
}
.bc-dark .bc-cr-head h3 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.bc-dark .bc-cr-handle {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  color: #c9b2f7;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bc-dark .bc-cr-handle:hover { color: #fff; }

.bc-dark .bc-cr-bio { margin: 20px 0 0; font-size: 17px; line-height: 1.55; color: var(--bc-text); max-width: 44ch; }

.bc-dark .bc-cr-kpis { display: flex; gap: 48px; margin: 28px 0 0; }
.bc-dark .bc-cr-kpis div { display: flex; flex-direction: column-reverse; }
.bc-dark .bc-cr-kpis dt { margin-top: 8px; font-size: 14px; font-weight: 400; color: var(--bc-text); }
.bc-dark .bc-cr-kpis dd {
  margin: 0;
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.bc-dark .bc-cr-label {
  margin: 34px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(233, 226, 245, 0.5);
}
.bc-dark .bc-cr-top {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 460px;
}
.bc-dark .bc-cr-top a { display: block; border-radius: 14px; overflow: hidden; }
.bc-dark .bc-cr-top img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 424;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bc-dark .bc-cr-top a:hover img { transform: scale(1.04); }
.bc-dark .bc-cr-top a:focus-visible,
.bc-dark .bc-cr-link:focus-visible,
.bc-dark .bc-cr-handle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.bc-dark .bc-cr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(148, 81, 245, 0.16);
  color: #e5d6ff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.bc-dark .bc-cr-link:hover { background: rgba(148, 81, 245, 0.3); color: #fff; }
.bc-dark .bc-cr-link svg { transition: transform 0.2s ease; }
.bc-dark .bc-cr-link:hover svg { transform: translate(2px, -2px); }

@media (max-width: 991px) {
  .bc-dark .bc-vt { padding: 80px 0 70px; }
  .bc-dark .bc-cr-list { margin-top: 48px; gap: 24px; }
  .bc-dark .bc-cr-card,
  .bc-dark .bc-cr-card:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 16px 16px 28px; border-radius: 28px; }
  .bc-dark .bc-cr-card:nth-child(even) .bc-cr-player { order: 0; }
  .bc-dark .bc-cr-player { width: 100%; max-width: 340px; margin: 0 auto; }
  .bc-dark .bc-cr-body,
  .bc-dark .bc-cr-card:nth-child(even) .bc-cr-body { padding: 0 8px; }
  .bc-dark .bc-cr-card::before,
  .bc-dark .bc-cr-card:nth-child(even)::before { background: radial-gradient(360px 420px at 50% 22%, rgba(148, 81, 245, 0.22), transparent 70%); }
  .bc-dark .bc-cr-top { max-width: none; }
}
@media (max-width: 575px) {
  .bc-dark .bc-cr-stats { gap: 18px; margin-top: 36px; }
  .bc-dark .bc-cr-stats strong { font-size: 30px; }
  .bc-dark .bc-cr-stats span { font-size: 12.5px; max-width: 11ch; }
  .bc-dark .bc-cr-head h3 { font-size: 26px; }
  .bc-dark .bc-cr-avatar { width: 58px; height: 58px; }
  .bc-dark .bc-cr-bio { font-size: 16px; }
  .bc-dark .bc-cr-kpis { gap: 36px; }
  .bc-dark .bc-cr-top { gap: 8px; }
  .bc-dark .bc-cr-top a { border-radius: 10px; }
  .bc-dark .bc-cr-link { display: flex; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-dark .bc-cr-top img,
  .bc-dark .bc-cr-link svg { transition: none; }
}

/* Avis sur téléphone : les fondus de la template (349 et 372 px) sont réglés
   pour deux colonnes. Sur une seule, ils éteignaient la moitié des cartes. */
@media (max-width: 991px) {
  .bc-dark .as-testimonail-content::before { height: 110px; }
  .bc-dark .as-testimonail-content::after { height: 150px; bottom: -20px; }
  .bc-dark .as-testimonail-wrap { height: 560px; }
}

/* Dix clips par rangée : la boucle doit rester plus large que l'écran, même
   sur un 27 pouces, sinon un trou apparaît avant que la copie n'arrive. */
@media (min-width: 1800px) {
  .bc-dark .bc-wall-card { width: 280px; margin-right: 20px; }
}

/* Tarifs : la liste suit le prix. Le bloc prix était étiré (`flex: 1`) pour
   remplir la carte, ce qui creusait un vide entre le montant et la liste sur
   les deux cartes latérales. Seul le bouton reste poussé en bas. */
@media (min-width: 992px) {
  .bc-dark .as-pricing-item .xb-item--holder { flex: 0 0 auto; margin-bottom: 24px; }
  .bc-dark .as-pricing-item:not(.pro-item) .xb-item--list { margin-top: 0; }
  .bc-dark .as-pricing-item.pro-item .xb-item--holder { margin-bottom: 0; }
}

/* CTA final : la template réserve 200 px en haut pour sa vidéo de fond (qu'on
   n'affiche pas) et une hauteur minimale de 712 px. Sans la vidéo, ce n'est
   que du vide avant la dernière demande. */
.bc-dark .cta .as-cta-wrapper { min-height: 0; padding-top: 80px; padding-bottom: 80px; }
.bc-dark .cta .xb-item--inner { padding-top: 0; }
@media (max-width: 767px) {
  .bc-dark .cta .as-cta-wrapper { padding-top: 60px; padding-bottom: 60px; }
}

/* Mur piloté en JS (bc-video.js) : la vitesse suit le défilement de la page.
   L'animation CSS ne reste que comme repli si le script ne tourne pas. */
.bc-dark .bc-wall.is-driven .bc-wall-track { animation: none; will-change: transform; }

/* --- Interface TikTok sur les clips -------------------------------------- */
.bc-dark .bc-tt { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%); }
.bc-dark .bc-tt-rail { position: absolute; right: 8px; bottom: 16px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bc-dark .bc-tt-rail svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.bc-dark .bc-tt-avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #fff;
  background: url(/assets/img/brand-bestclip/logo-mark.svg) center/60% no-repeat, #1b1022; margin-bottom: 6px; }
.bc-dark .bc-tt-avatar span { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 15px; height: 15px;
  border-radius: 50%; background: #fe2c55; font-size: 12px; line-height: 15px; text-align: center; font-weight: 700; }
.bc-dark .bc-tt-disc { width: 26px; height: 26px; border-radius: 50%; border: 5px solid #222;
  background: radial-gradient(circle, #9451f5 0 35%, #111 36%); animation: bc-spin 4s linear infinite; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
.bc-dark .bc-tt-meta { position: absolute; left: 12px; right: 48px; bottom: 14px; }
.bc-dark .bc-tt-meta p { margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); line-height: 1.3; }
.bc-dark .bc-tt-handle { font-size: 14px; font-weight: 700; margin-bottom: 4px !important; }
.bc-dark .bc-tt-caption { font-size: 12.5px; }
.bc-dark .bc-tt-caption span { font-weight: 600; }
.bc-dark .bc-tt-sound { font-size: 11.5px; opacity: .9; margin-top: 5px !important; white-space: nowrap; overflow: hidden; }
@media (max-width: 767px) {
  .bc-dark .bc-tt-rail { right: 5px; bottom: 10px; gap: 7px; }
  .bc-dark .bc-tt-rail svg { width: 15px; height: 15px; }
  .bc-dark .bc-tt-avatar { width: 20px; height: 20px; margin-bottom: 3px; }
  .bc-dark .bc-tt-avatar span { width: 11px; height: 11px; font-size: 9px; line-height: 11px; bottom: -6px; }
  .bc-dark .bc-tt-disc { width: 18px; height: 18px; border-width: 3px; }
  .bc-dark .bc-tt-meta { left: 7px; right: 28px; bottom: 9px; }
  .bc-dark .bc-tt-handle { font-size: 10.5px; margin-bottom: 2px !important; }
  .bc-dark .bc-tt-caption { font-size: 9.5px; }
  .bc-dark .bc-tt-sound { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bc-dark .bc-tt-disc { animation: none; } }

/* Avis : le clip de gauche porte l'interface TikTok (Clip.astro). Le cadre de
   la template (hauteur fixe 691, voile, légende) laisse place au 9:16 exact. */
.bc-dark .as-testimonail-video.bc-testi-clip { height: auto; border: 0; background: none; overflow: visible; }
.bc-dark .as-testimonail-video.bc-testi-clip::before { content: none; }
.bc-dark .bc-testi-clip .bc-clip { border-radius: 20px; }

/* Avis : le halo de la template est un rectangle flou (filter: blur) posé
   dans un conteneur `o-hidden`. Le débord du flou est coupé net aux bords du
   conteneur, ce qui dessinait un panneau plus clair derrière la vidéo. Un
   dégradé radial n'a pas de débord, donc pas de coupe. */
.bc-dark .as-testimonials-inner::before {
  filter: none;
  background: radial-gradient(closest-side, rgba(148, 81, 245, 0.18), rgba(148, 81, 245, 0));
}

/* --- Footer : mot-symbole lumineux derrière le bas du footer ------------
   Comme la référence : les liens et le copyright passent AU-DESSUS du grand
   « BestClip.io » qui monte depuis le bas. Le cadre noir du footer devient
   transparent pour laisser voir la lueur. */
.bc-dark .footer.bc-footer-art { position: relative; overflow: hidden; background-color: #0a0714 !important; padding-bottom: 0 !important; }
.bc-dark .bc-footer-art .as-footer-wrapper { position: relative; z-index: 2; background: transparent !important; border-color: rgba(168, 110, 255, 0.14) !important; }
/* Le cadre noir est un ::before de la template : on le rend translucide,
   la lueur du mot-symbole passe dessous. */
.bc-dark .bc-footer-art .as-footer-wrapper::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.15) 100%) !important; }
.bc-dark .bc-footer-wordmark {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 2400 / 720;
  margin-top: -22vw;
  background: url(/assets/img/brand-bestclip/footer-wordmark.webp) center bottom / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .bc-dark .bc-footer-wordmark { margin-top: -20vw; }
}

/* Footer façon référence : pas de cadre ni de pilule. Fond ouvert, un filet
   fin au-dessus du copyright, le mot-symbole qui monte derrière. */
.bc-dark .bc-footer-art .as-footer-wrapper { border: 0 !important; box-shadow: none !important; }
.bc-dark .bc-footer-art .as-footer-wrapper::before { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.bc-dark .bc-footer-art .as-footer-bottom {
  background: transparent !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(168, 110, 255, 0.18);
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}
.bc-dark .bc-footer-art .as-footer-bottom p { color: rgba(233, 226, 245, 0.62); }

/* Avis sur mobile : le clip ne prend plus tout l'écran, il se pose centré et
   compact au-dessus des témoignages. */
@media (max-width: 991px) {
  .bc-dark .as-testimonail-video.bc-testi-clip { max-width: 230px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .bc-dark .as-testimonail-video.bc-testi-clip { max-width: 200px; }
}

/* =========================================================================
   Mobile : rythme vertical resserré (retours du 25/09)
   Les paddings de la template (100 à 145 px) sont calibrés pour desktop ; sur
   un téléphone ils creusaient des écrans entiers de vide entre sections.
   ========================================================================= */
@media (max-width: 767px) {
  .bc-dark .as-body-inner.mb-120 { margin-bottom: 40px !important; }
  .bc-dark .as-body-inner.mt-120 { margin-top: 40px !important; }
  .bc-dark .pt-135, .bc-dark .pt-145, .bc-dark .pt-120, .bc-dark .pt-110 { padding-top: 56px !important; }
  .bc-dark .pb-120, .bc-dark .pb-50 { padding-bottom: 48px !important; }
  .bc-dark .as-pricing-container { padding-top: 56px !important; padding-bottom: 56px !important; }
  .bc-dark .bc-showcase, .bc-dark .bc-cols-section, .bc-dark .bc-vt { padding-top: 56px !important; padding-bottom: 48px !important; }
  .bc-dark .sec-title { margin-bottom: 28px !important; }
  .bc-dark .sec-title.mb-40, .bc-dark .sec-title.mb-45 { margin-bottom: 24px !important; }
  .bc-dark .bc-section-cta.mt-60, .bc-dark .bc-section-cta { margin-top: 28px !important; }
  .bc-dark .bc-section-cta-lead { margin-bottom: 14px; }
  .bc-dark .as-testimonials-inner .row.mt-none-30 > [class*="col-"] { margin-top: 16px !important; }
  .bc-dark .as-testimonail-wrap { height: 480px; }
  .bc-dark .bc-wall { margin: 24px 0 16px; }
  .bc-dark .bc-cols { height: 520px; }
}

/* Logo de l'en-tête sur mobile : 34 px de haut, lisible à côté du burger. */
@media (max-width: 991px) {
  .bc-dark .xb-header-logo img,
  .bc-dark .xb-logo-mobile img { height: 34px !important; width: auto !important; max-width: none; }
}

/* Photos du badge : toujours des ronds parfaits (elles s'écrasaient en ovale
   sur mobile quand la pastille se resserrait). */
.bc-dark .bc-badge-thumbs img {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.bc-dark .xb-item--breadcrumd .bc-badge-thumbs { display: inline-flex; flex: 0 0 auto; }
.bc-dark .xb-item--breadcrumd .bc-badge-thumbs img { width: 24px !important; min-width: 24px; height: 24px !important; flex-shrink: 0; }

/* Mobile, 2e passe : les cartes suivent leur contenu. */
@media (max-width: 767px) {
  .bc-dark .as-hero-container { padding-bottom: 36px !important; }
  .bc-dark .as-work-item .xb-item--inner,
  .bc-dark .as-feature-item .xb-item--inner { min-height: 0 !important; height: auto !important; justify-content: flex-start !important; }
  .bc-dark .as-work-item .xb-item--img { margin-bottom: 14px !important; }
  .bc-dark .as-work-item .xb-item--number { line-height: 1; margin-bottom: 6px; }
  .bc-dark .as-feature-item .xb-item--img { height: auto !important; min-height: 0 !important; margin-bottom: 16px !important; }
  .bc-dark .as-feature-item .xb-item--img img { max-height: 200px; width: auto; }
  .bc-dark .as-feature-item.large-item .xb-item--img { margin-bottom: 16px !important; }
  .bc-dark .as-feature-item .xb-item--holder { margin-top: 0 !important; }
  .bc-dark .bc-trustband { padding-top: 14px !important; padding-bottom: 14px !important; }
  .bc-dark .as-body-inner.mb-120 { margin-bottom: 16px !important; }
  .bc-dark .bc-cols-section { padding-bottom: 32px !important; }
}
@media (max-width: 767px) {
  /* Carte « Voix » : la template réserve ~110 px au-dessus de la pastille. */
  .bc-dark .as-feature-item .xb-item--img.btn-img { padding: 12px 0 4px !important; margin-top: 0 !important; }
}
@media (max-width: 767px) {
  /* Bandeau défilant : la template ajoute 20/50 px de marge au ruban. */
  .bc-dark .bc-trustband .as-security-bottom { margin: 0 !important; }
  .bc-dark .bc-trustband { padding-top: 18px !important; padding-bottom: 18px !important; }
  /* Avis : moins d'air entre le titre, le clip et le bouton. */
  .bc-dark .testimonial .sec-title { margin-bottom: 16px !important; }
  .bc-dark .testimonial .bc-section-cta { margin-top: 12px !important; }
}

/* =========================================================================
   PASSE SANS FILETS (25/09/2026)

   Plus aucun trait pour séparer ou encadrer : ni rails latéraux, ni doubles
   filets entre sections, ni liseré autour des cartes. Une section se
   reconnaît à trois choses, comme sur les landings SaaS de référence :
   1. un rythme vertical généreux et identique partout ;
   2. un halo d'ambiance FONDU, centré assez bas pour qu'il soit nul au bord
      de la section (sinon on recrée un trait par la lumière) ;
   3. des cartes qui se détachent par la surface et l'ombre, pas par le cadre.

   Les contours de focus clavier restent : ce sont une information, pas un
   décor.
   ========================================================================= */

/* --- 0. Les filets de la template, au cas où un composant les remettrait -- */
.bc-dark .as-site-line,
.bc-dark .sec-line-shape {
  display: none !important;
}

/* --- 1. Rythme et halos ---------------------------------------------------
   Le halo est un fond (background-image), pas un pseudo-élément : plusieurs
   sections utilisent déjà ::before/::after. Ses rayons verticaux sont
   inférieurs à la position de son centre, donc il s'éteint avant le bord. */
.bc-dark .bc-showcase,
.bc-dark .work,
.bc-dark .feature,
.bc-dark .bc-vt,
.bc-dark .bc-cols-section,
.bc-dark .testimonial,
.bc-dark .faq-section {
  --bc-halo-x: 50%;
  --bc-halo-a: 0.10;
  background-color: transparent;
  background-image: radial-gradient(
    min(760px, 90vw) 300px at var(--bc-halo-x) 320px,
    rgba(148, 81, 245, var(--bc-halo-a)) 0%,
    rgba(148, 81, 245, 0) 100%
  );
  background-repeat: no-repeat;
}
/* Alternance gauche / droite / centre : l'œil sent qu'on change de chapitre
   sans qu'aucune ligne ne le lui dise. */
.bc-dark .work { --bc-halo-x: 18%; }
.bc-dark .feature { --bc-halo-x: 82%; --bc-halo-a: 0.08; }
.bc-dark .bc-cols-section { --bc-halo-x: 50%; --bc-halo-a: 0.12; }
.bc-dark .testimonial { --bc-halo-x: 20%; }
.bc-dark .faq-section { --bc-halo-x: 80%; --bc-halo-a: 0.08; }

.bc-dark .work,
.bc-dark .feature,
.bc-dark .testimonial {
  padding-top: clamp(88px, 10vw, 150px);
  padding-bottom: clamp(72px, 8vw, 120px);
}
.bc-dark .bc-cols-section {
  padding-top: clamp(88px, 10vw, 150px);
  padding-bottom: clamp(72px, 8vw, 120px);
}
.bc-dark .faq-section { padding-bottom: 0; }
.bc-dark .as-faq-wrapper {
  background: none;
  margin: 0;
  padding-top: clamp(88px, 10vw, 150px);
  padding-bottom: clamp(72px, 8vw, 120px);
}
.bc-dark .pricing { margin-top: clamp(24px, 4vw, 48px); }

/* --- 2. Les cartes : surface + ombre, zéro liseré ------------------------ */
.bc-dark .as-problem-item,
.bc-dark .as-work-item .xb-item--inner,
.bc-dark .as-feature-item,
.bc-dark .as-asintroduction-item .xb-item--inner,
.bc-dark .as-faq-contact .xb-item--inner,
.bc-dark .as-testimonail-item,
.bc-dark .as-pricing-item:not(.pro-item),
.bc-dark .as-testimonail-video,
.bc-videowall-card {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, box-shadow 0.45s ease;
}
.bc-dark .as-work-item .xb-item--inner:hover,
.bc-dark .as-feature-item:hover,
.bc-dark .as-asintroduction-item .xb-item--inner:hover,
.bc-dark .as-pricing-item:not(.pro-item):hover {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 40px 80px -40px rgba(148, 81, 245, 0.55);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bc-dark .as-work-item .xb-item--inner:hover,
  .bc-dark .as-feature-item:hover,
  .bc-dark .as-pricing-item:not(.pro-item):hover {
    transform: translateY(-6px);
  }
}
/* Projecteur qui suit le curseur (variables posées par bc-motion.js). */
.bc-dark [data-bc-spot] { position: relative; isolation: isolate; }
.bc-dark [data-bc-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(420px circle at var(--bc-mx, 50%) var(--bc-my, 50%), rgba(168, 110, 255, 0.16), transparent 60%);
}
.bc-dark [data-bc-spot]:hover::after { opacity: 1; }

/* Vignettes, images d'étape, cadres : l'ombre les détache du noir. */
.bc-dark .bc-clip,
.bc-dark .as-work-item .xb-item--img,
.bc-hero-frame,
.bc-vsl-frame {
  border-color: transparent !important;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.95), 0 0 0 0 transparent;
}
.bc-vsl-frame {
  box-shadow: 0 40px 120px -40px rgba(148, 81, 245, 0.55), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

/* --- 3. Pastilles et badges : un aplat teinté, pas un contour ------------ */
.bc-dark .sec-title--three .sub-title span,
.bc-hero-chips li,
.bc-dark .hero-area--three .xb-hero-content .xb-item--breadcrumd,
.bc-billing-badge,
.bc-dark .bc-clip-tag,
.bc-dark .as-solution-item .xb-item--icon,
.bc-dark .pricing_toggle_btn .switch_btn {
  border-color: transparent !important;
}
.bc-dark .sec-title--three .sub-title span {
  background: rgba(148, 81, 245, 0.16);
  color: #d9c4ff;
}
.bc-hero-chips li { background: rgba(255, 255, 255, 0.06); }
.bc-dark .hero-area--three .xb-hero-content .xb-item--breadcrumd { background: rgba(148, 81, 245, 0.14); }
.bc-billing-badge { background: rgba(148, 81, 245, 0.22); }
.bc-dark .pricing_toggle_btn .switch_btn { background: rgba(148, 81, 245, 0.28); }

/* --- 4. Grille tarifaire -------------------------------------------------- */
.bc-dark .as-pricing-inner {
  border: 0 !important;
  background: transparent !important;
  /* La template coupe ce conteneur (`overflow: hidden`) pour contenir une
     tache floue qu'on masque déjà. Il coupait surtout la lueur de la carte
     Pro, 50 px sous elle : une bande d'ombre à bord franc. */
  overflow: visible !important;
}

/* --- 5. Ruban de promesses : bande sans bords, fondu aux extrémités ------ */
.bc-dark .bc-trustband {
  border: 0 !important;
  background: transparent;
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.bc-dark .bc-trustband .as-security-bottom {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* --- 6. FAQ : des lignes-surfaces espacées au lieu de filets ------------- */
.bc-dark .as-faq .accordion_box .block {
  border-top: 0 !important;
  margin-bottom: 10px;
  padding-left: 22px;
  padding-right: 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.3s ease;
}
.bc-dark .as-faq .accordion_box .block:hover,
.bc-dark .as-faq .accordion_box .block.active-block {
  background: rgba(255, 255, 255, 0.055);
}
.bc-dark .as-faq .accordion_box .block .acc-btn .arrow {
  border-color: transparent !important;
  background: rgba(148, 81, 245, 0.18);
}

/* --- 7. En-tête et pied -------------------------------------------------- */
.bc-dark .header-area.is-sticky .xb-header.stricky-fixed {
  border-bottom: 0;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.bc-dark .xb-header-menu { border-right: 0; }
.bc-dark .bc-footer-art .as-footer-bottom { border-top: 0; }

/* --- 8. Apparition au défilement (classes posées par bc-motion.js) -------
   Rien n'est masqué sans JavaScript : l'état caché n'existe que sous
   `html.bc-motion`, que le script pose lui-même. */
html.bc-motion [data-bc-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.8s ease;
  transition-delay: calc(var(--bc-i, 0) * 90ms);
  will-change: opacity, transform;
}
html.bc-motion [data-bc-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Barre de progression de lecture, fine, en haut de l'écran. */
.bc-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--bc-p, 0));
  background: linear-gradient(90deg, #7b3cf0, #c7a4ff);
}
@media (prefers-reduced-motion: reduce) {
  html.bc-motion [data-bc-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .bc-progress { display: none; }
}

/* --- 9. Plus aucune bande à bord franc ------------------------------------
   Trois fonds s'arrêtaient net et dessinaient un trait sans en être un :
   le faisceau violet du hero (`.shape--5`, coupé par l'`overflow: hidden`
   du conteneur), et les aplats #0d0619 des tarifs et du CTA final. Le hero
   s'éteint maintenant sur ses 90 derniers pixels (la VSL finit au-dessus),
   et les deux bandes deviennent une nappe de lumière qui meurt avant leurs
   bords. Les lueurs d'angle (`.as-sec-shape`) marquaient justement ces
   bords : sans bord, elles n'ont plus de rôle. */
.bc-dark .as-sec-shape {
  display: none;
}
.bc-dark .hero-area--three .as-hero-container {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
}
.bc-dark .pricing[data-bg-color],
.bc-dark .cta[data-bg-color] {
  background-color: transparent !important;
  background-image: radial-gradient(
    ellipse 70% 48% at 50% 50%,
    rgba(58, 18, 120, 0.55) 0%,
    rgba(40, 10, 84, 0.28) 45%,
    rgba(10, 10, 12, 0) 100%
  );
  background-repeat: no-repeat;
}
.bc-dark .cta[data-bg-color] {
  background-image: radial-gradient(
    ellipse 60% 55% at 50% 45%,
    rgba(58, 18, 120, 0.6) 0%,
    rgba(40, 10, 84, 0.25) 50%,
    rgba(10, 10, 12, 0) 100%
  );
}

/* Rythme un cran plus serré : l'air sépare, le vide perd le lecteur. */
.bc-dark .work,
.bc-dark .feature,
.bc-dark .testimonial,
.bc-dark .bc-cols-section {
  padding-top: clamp(72px, 8vw, 128px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
.bc-dark .as-faq-wrapper {
  padding-top: clamp(72px, 8vw, 128px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
/* Téléphone : la VSL finit à 36 px du bas du hero, le fondu doit tenir dedans. */
@media (max-width: 767px) {
  .bc-dark .hero-area--three .as-hero-container {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
  }
}

/* =========================================================================
   CTA VIVANTS (26/09/2026)

   Le survol de la template (SplitText de main.js) faisait glisser le libellé
   dans un masque rectangulaire : sur une pilule, les lettres étaient coupées
   en carré. Il est débranché (Btn.astro) et remplacé par un survol qui suit
   l'arrondi du bouton, parce que tout est clippé par la pilule elle-même :
   - un reflet lumineux traverse le bouton (au survol, et seul toutes les
     6 s au repos, pour que l'œil y revienne) ;
   - le bouton se soulève et sa lueur monte ;
   - les étincelles tournent ;
   - à l'appui, il s'enfonce légèrement.
   ========================================================================= */
.bc-dark .thm-btn--gradient2 {
  isolation: isolate;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.bc-dark .thm-btn--gradient2 .inner {
  position: relative;
  z-index: 2;
}
/* Le roulement des lettres de la template (SplitText, main.js) est GARDÉ :
   Enzo l'aime. Ce qui était moche, c'est son masque : `.inner` coupe en
   rectangle (`overflow: hidden`) au ras des lettres, et les accents qui
   montent étaient tranchés net. On fond ses bords, À L'INTÉRIEUR du cadre
   d'origine : les lettres s'évanouissent au lieu d'être coupées. Surtout
   pas d'air en plus : essayé le 26/09, le libellé roulé restait visible en
   fantôme au-dessus une fois l'animation finie. */
.bc-dark .thm-btn .inner {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5px, #000 calc(100% - 4px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 5px, #000 calc(100% - 4px), transparent 100%);
}
.bc-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}
.bc-sheen::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-18deg);
}
.bc-dark .thm-btn--gradient2.bg_white .bc-sheen::before {
  background: linear-gradient(100deg, rgba(148, 81, 245, 0) 0%, rgba(148, 81, 245, 0.28) 50%, rgba(148, 81, 245, 0) 100%);
}
.bc-dark .thm-btn--gradient2 .arrow img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .bc-sheen::before {
    animation: bc-sheen-idle 6s ease-in-out infinite;
  }
  .bc-dark .thm-btn--gradient2:hover .bc-sheen::before,
  .bc-dark .thm-btn--gradient2:focus-visible .bc-sheen::before {
    animation: bc-sheen-pass 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .bc-dark .thm-btn--gradient2:hover,
  .bc-dark .thm-btn--gradient2:focus-visible {
    transform: translateY(-3px) scale(1.02);
  }
  .bc-dark .thm-btn--gradient2:hover .arrow img,
  .bc-dark .thm-btn--gradient2:focus-visible .arrow img {
    transform: rotate(90deg) scale(1.2);
  }
  .bc-dark .thm-btn--gradient2:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.12s;
  }
}
@keyframes bc-sheen-idle {
  0%, 78% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes bc-sheen-pass {
  from { transform: translateX(-160%) skewX(-18deg); }
  to { transform: translateX(320%) skewX(-18deg); }
}

/* --- Retour en haut : la même pilule lumineuse que les CTA --------------- */
.bc-dark .xb-backtotop .scroll {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(145deg, #b27bff 0%, #8a3dfa 45%, #5d14d8 100%);
  box-shadow:
    0 0 0 1px rgba(201, 162, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 26px -8px rgba(148, 81, 245, 0.95),
    0 18px 50px -18px rgba(168, 110, 255, 0.8);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.bc-dark .xb-backtotop .scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: -1;
}
.bc-dark .xb-backtotop .scroll svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .bc-dark .xb-backtotop .scroll:hover,
  .bc-dark .xb-backtotop .scroll:focus-visible {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
      0 0 0 1px rgba(201, 162, 255, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 14px 32px -8px rgba(148, 81, 245, 1),
      0 26px 70px -18px rgba(168, 110, 255, 0.95);
  }
  .bc-dark .xb-backtotop .scroll:hover svg,
  .bc-dark .xb-backtotop .scroll:focus-visible svg {
    transform: translateY(-3px);
  }
}
.bc-dark .xb-backtotop .scroll:hover { margin-bottom: 0; }

/* =========================================================================
   Finitions navigateur : sélection, barre de défilement, curseurs
   -------------------------------------------------------------------------
   La barre se dessine en deux voies exclusives. Dès que `scrollbar-color`
   est posé, Chrome 121+ ignore les pseudo-éléments ::-webkit-scrollbar et
   perd le dégradé. On réserve donc la propriété standard aux navigateurs qui
   ne connaissent PAS les pseudo-éléments (Firefox), et Chrome, Edge et Safari
   reçoivent la version dessinée. Les rails qui posent `scrollbar-width: none`
   restent invisibles dans les deux voies.
   ========================================================================= */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  accent-color: var(--bc-accent);
  -webkit-tap-highlight-color: rgba(148, 81, 245, 0.18);
}

/* Texte surligné : violet plein, lisible sur le noir comme sur les cartes. */
::selection {
  background: rgba(148, 81, 245, 0.55);
  color: #fff;
  text-shadow: 0 0 18px rgba(201, 162, 255, 0.55);
}
/* Un média sélectionné avec le texte ne se couvre pas d'un voile. */
img::selection,
video::selection,
svg::selection {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: rgba(148, 81, 245, 0.6) var(--bc-bg);
    scrollbar-width: thin;
  }
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: var(--bc-bg);
}
::-webkit-scrollbar-track {
  box-shadow: inset 1px 0 0 rgba(148, 81, 245, 0.12);
}
/* Bordure transparente + padding-box : la poignée flotte, fine, au milieu
   de la gouttière au lieu de la remplir. */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b47cff 0%, #9451f5 55%, #6d2fd6 100%) padding-box;
  border: 3px solid transparent;
  border-radius: 99px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d2adff 0%, #a970ff 55%, #8443ec 100%) padding-box;
  border-width: 2px;
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #e6d2ff 0%, #b98aff 100%) padding-box;
  border-width: 2px;
}
::-webkit-scrollbar-button {
  display: none;
}

/* Un double clic sur un CTA ne surligne pas son libellé. */
.bc-dark .thm-btn,
.bc-dark button,
.bc-dark [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}
.bc-dark button:not(:disabled),
.bc-dark [role="button"],
.bc-dark summary,
.bc-dark .acc-btn {
  cursor: pointer;
}
.bc-dark button:disabled {
  cursor: not-allowed;
}

/* Contour clavier violet partout où la section n'en dessine pas déjà un.
   Spécificité nulle : chaque contour déjà dessiné garde la main. */
:where(.bc-dark :focus-visible) {
  outline: 2px solid #b47cff;
  outline-offset: 3px;
}

/* Les images ne se traînent pas en fantôme hors de la page. */
.bc-dark img {
  -webkit-user-drag: none;
}

/* Titres équilibrés, paragraphes sans mot orphelin en dernière ligne. */
.bc-dark h1,
.bc-dark h2,
.bc-dark h3 {
  text-wrap: balance;
}
.bc-dark p {
  text-wrap: pretty;
}

/* --- Carte mise en avant agrandie (05/10/2026) ------------------------------
   Studio porte le badge « LE PLUS RENTABLE » : sur ordinateur, sa carte
   dépasse les deux autres, comme sur le paywall de l'app. */
@media (min-width: 992px) {
  .bc-dark .as-pricing-item.pro-item {
    position: relative;
    z-index: 2;
    transform: scale(1.06);
    box-shadow: 0 0 0 2px rgba(192, 152, 248, 0.9), 0 0 70px rgba(148, 81, 245, 0.5), 0 40px 90px -40px rgba(148, 81, 245, 0.8);
  }
}

/* --- Offre vendue à l'année seulement (05/10/2026) --------------------------
   En mensuel (`.pricing_block` sans `.active`), Creator se grise et son
   bouton devient « Annuel seulement », qui bascule la grille en annuel. */
.bc-dark .bc-annual-only-ui { display: none; }
.bc-dark .pricing_block.bc-annual-only:not(.active) .bc-annual-only-ui { display: block; }
.bc-dark .pricing_block.bc-annual-only:not(.active) .xb-item--btn { display: none; }
.bc-dark .pricing_block.bc-annual-only:not(.active) .xb-item--holder,
.bc-dark .pricing_block.bc-annual-only:not(.active) .xb-item--list {
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.bc-dark .bc-annual-btn {
  width: 100%;
  min-height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bc-dark .bc-annual-btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.bc-dark .bc-annual-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bc-dark .bc-annual-note { margin: 12px 0 0; text-align: center; font-size: 14px; color: rgba(233, 226, 245, 0.6); }

/* --- Annuel affiché au mois (05/10/2026) ------------------------------------
   Mensuel barré en ancre, équivalent mensuel en grand, montant débité en
   clair, économie en pastille verte. */
.bc-dark .bc-price-anchor {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}
.bc-dark .bc-price-billed { margin: 8px 0 0; font-size: 14px; color: rgba(233, 226, 245, 0.65); }
.bc-dark .bc-price-savings {
  display: inline-flex;
  margin: 12px 0 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
  font-size: 13px;
  font-weight: 600;
}
.bc-dark .as-pricing-item.pro-item .bc-price-anchor { color: rgba(255, 255, 255, 0.5); }

/* Nom de l'offre mise en avant, en tête du cartouche (05/10/2026). La pastille
   de la template, en bas, faisait doublon et ne se lisait pas. */
.bc-dark .as-pricing-item.pro-item .bc-featured-name {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}
.bc-dark .as-pricing-item.pro-item .xb-item--text_box { display: none; }