/* ============================================================
   H2B V63 — surfaces légèrement transparentes + fondus universels
   Téléphone / tablette / ordinateur
   ============================================================ */
:root{
  --h2b-surface-alpha:.78;
  --h2b-row-alpha:.66;
  --h2b-fade-core:58%;
  --h2b-fade-mid:76%;
  --h2b-fade-edge:100%;
}

/* Les grandes bandes/cartes laissent voir l'arrière-plan sans sacrifier la lisibilité. */
.topbar,
.tabs,
.section-tabs,
.admin-section-tabs,
.member-section-tabs,
.card,
.auth-card,
.panel,
.stat-card,
.profile-card,
.dues-card,
.registration-group,
.public-registration-info,
.local-seo-summary,
.public-visitor-counter,
.home-upcoming-box,
.home-attendance-box,
.leaderboard-card,
.competition-event-card,
.document-card,
.family-existing-item,
.member-family-item,
.subform-box,
.free-trial-admin-panel,
.free-trial-request-card,
.shop-product-card,
.shop-order-card,
.shop-size-admin-box,
.shop-bank-info,
.shop-preorder-notice,
.v62-athlete-card{
  background:linear-gradient(180deg,rgba(12,17,23,.82),rgba(4,7,11,.74))!important;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

/* Bandes/lignes de contenu : légèrement plus transparentes encore. */
.competition-card,
.upcoming-item,
.tracking-item,
.attendance-member-row,
.leaderboard-row,
.public-member-result,
.money-row>div,
.switch-row,
.responsive-table tr,
.shop-size-stock-item,
.shop-existing-photo-card,
.notification-row,
.v62-result-row,
.table-wrap,
tbody tr,
th{
  background-color:rgba(6,13,20,var(--h2b-row-alpha))!important;
}

/* Les barres d'onglets restent lisibles, mais le fond passe légèrement derrière. */
.section-tabs,.admin-section-tabs,.member-section-tabs,.tabs{
  background:rgba(5,10,16,.70)!important;
}
.section-tab.active,.tab.active{
  background:rgba(238,238,238,.91)!important;
}

/* Champs : juste assez transparents pour rester cohérents avec les bandes. */
input,select,textarea{
  background-color:rgba(7,15,23,.82)!important;
}

/* ============================================================
   Fondu universel des médias principaux — aucun media query :
   le même principe est appliqué sur téléphone, tablette et PC.
   ============================================================ */
.h2b-page-background-item,
.h2b-bg-preview-media,
.site-watermark,
.auth-hero .brand-logo-large,
.login-intro>img,
.club-photo img,
.club-photo-video-player,
.fighter-profile-bg-video,
.fighter-profile-bg-video-club,
.fighter-video-screensaver video,
.ondemand-thumb img,
.ondemand-player-stage>img:not(.ondemand-watermark),
.ondemand-player-stage>video,
.shop-product-media img,
.shop-product-card-image img,
.shop-modal-images img,
.shop-admin-product-thumb img,
.shop-existing-photo-preview img,
.shop-image-admin-item img,
.hero-photo-video img,
.hero-photo-video video{
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0,#000 var(--h2b-fade-core),rgba(0,0,0,.92) 67%,rgba(0,0,0,.55) var(--h2b-fade-mid),transparent var(--h2b-fade-edge))!important;
  mask-image:radial-gradient(ellipse at center,#000 0,#000 var(--h2b-fade-core),rgba(0,0,0,.92) 67%,rgba(0,0,0,.55) var(--h2b-fade-mid),transparent var(--h2b-fade-edge))!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
}

/* Le visuel capuche possède aussi une copie floutée via ::before :
   on la laisse diffuse pour éviter toute bordure dure autour du visuel principal. */
.login-intro::before{
  opacity:.42!important;
  filter:grayscale(100%) blur(20px) brightness(.22)!important;
}

/* Les petits éléments fonctionnels restent nets. */
.attendance-mini-avatar,
.member-mini-avatar img,
.brand-logo-small,
.ondemand-watermark,
.h2b-notification-badge{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Zone de placement : le geste ne doit jamais être intercepté par le texte. */
.h2b-bg-preview{
  touch-action:none!important;
  overscroll-behavior:contain;
  user-select:none;
  -webkit-user-select:none;
}
.h2b-bg-preview-content{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.h2b-bg-preview-media{
  touch-action:none!important;
  cursor:grab;
  will-change:left,top,transform;
}
.h2b-bg-preview.is-dragging,
.h2b-bg-preview-media.is-dragging{cursor:grabbing!important}
html.h2b-bg-dragging,html.h2b-bg-dragging body{
  overscroll-behavior:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}