/* 3 modèles de header proposés dans l'editeur (compact/stats restent geres
   pour compat, voir render-header.js), thème dark bento (voir blocks.css
   pour les variables --ulb-*) : cover/minimal restent volontairement
   horizontaux et compacts (point 7 de l'audit d'origine) ; stacked est le
   modèle centré/empilé, calqué sur le mockup, avec avatar/nom/bio/badge/
   stats personnalisées. Le CTA (.ulb-header__cta) est commun aux 3 modèles
   proposés — c'est le principal levier de conversion, voir render-header.js
   pour son contenu (page.headerStatsConfig, colonne header_stats_config). */

.ulb-header {
  position: relative;
  overflow: hidden;
  color: var(--ulb-text, #eceae4);
}

.ulb-header--compact, .ulb-header--stats, .ulb-header--minimal {
  max-height: 150px;
}

.ulb-header__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
}

/* CTA de base, commun aux 3 modeles (voir render-header.js, ctaHtml). Sur
   minimal/cover il est rendu SOUS la rangee identite (pas incruste dedans) :
   un titre/bio qui passe sur plusieurs lignes rendrait un bouton alligne au
   centre de la rangee visuellement ecrase contre le texte. Le modele stacked
   le recentre et l'espace via son propre modificateur plus bas. */
.ulb-header__cta {
  background: var(--ulb-green, #c8f135);
  color: #0a0a0e;
  border: none;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.ulb-header__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ulb-surface2, #18181f);
}
.ulb-header__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--ulb-text-dim, #908c86);
}

.ulb-header__title { font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: left; }
.ulb-header__desc { font-size: 0.8125rem; color: var(--ulb-text-dim, #908c86); margin-top: 0.125rem; text-align: left; }

/* --- Minimal : avatar + nom seuls --- */
.ulb-header--minimal .ulb-header__avatar { width: 32px; height: 32px; }
.ulb-header--minimal .ulb-header__row { padding: 0.625rem 1.25rem; }
.ulb-header--minimal .ulb-header__cta { margin: 0 1.25rem 0.75rem; }

/* --- Stats : identité + ligne de chiffres clés (analytics réelles), toujours horizontal --- */
.ulb-header__stats {
  display: flex;
  gap: 1.25rem;
  padding: 0 1.25rem 0.75rem;
}
.ulb-header__stat { display: flex; flex-direction: column; align-items: flex-start; }
.ulb-header__stat strong { font-size: 0.9375rem; line-height: 1; color: var(--ulb-green, #c8f135); }
.ulb-header__stat span { font-size: 0.6875rem; color: var(--ulb-text-dim, #908c86); text-transform: uppercase; letter-spacing: 0.02em; }

/* --- Couverture : image de fond, profondeur au scroll, texte incrusté en bas --- */
/* 240px (au lieu de 150px avant) : sur un cadre mobile ~400px de large, un
   bandeau de 150px donnait un ratio ~2.7:1, beaucoup trop large pour une
   photo normale (portrait ou carre) - "cover" devait alors zoomer/rogner
   tres fort pour remplir la bande, ne laissant voir qu'une fraction de
   l'image. 240px ramene le ratio a ~1.7:1, un rognage bien plus raisonnable. */
.ulb-header--cover { height: 240px; }
.ulb-header--cover .ulb-header__bg {
  position: absolute;
  /* Marge minimale, quasi nulle : le transform scale(1.15) applique en JS
     (voir attachScrollDepth dans scroll-depth.js) fournit deja ~18px de
     marge de chaque cote, largement suffisant pour le leger deplacement au
     scroll (translateY ±20px) - une marge CSS plus large ici ne ferait que
     rogner l'image inutilement en plus (voir le commentaire ci-dessus). */
  inset: -2%;
  background-size: cover;
  background-position: center;
  background-color: var(--ulb-surface2, #18181f);
  will-change: transform;
}
.ulb-header--cover .ulb-header__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.15) 65%);
}
.ulb-header--cover .ulb-header__row-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
}
.ulb-header--cover .ulb-header__desc { color: rgba(255, 255, 255, 0.85); }
.ulb-header--cover .ulb-header__cta { margin: 0 1.25rem 0.875rem; }

/* --- Stacked : centré/empilé (bento) --- */
.ulb-header--stacked {
  max-height: none;
  text-align: center;
  padding: 28px 20px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ulb-header--stacked .ulb-header__avatar {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  background: var(--ulb-green, #c8f135);
  color: #0a0a0e;
  font-size: 1.8rem;
}
.ulb-header--stacked .ulb-header__title { font-size: 1.2rem; font-weight: 700; text-align: center; }
.ulb-header--stacked .ulb-header__desc { font-size: 0.8rem; text-align: center; margin: 4px 0 12px; }
.ulb-header--stacked .ulb-header__badge {
  background: var(--ulb-green-glow, rgba(200, 241, 53, 0.15));
  color: var(--ulb-green, #c8f135);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  margin-bottom: 12px;
}
.ulb-header--stacked .ulb-header__stats-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 4px 0 12px;
}
.ulb-header--stacked .ulb-header__stat-custom { display: flex; flex-direction: column; align-items: center; }
.ulb-header--stacked .ulb-header__stat-custom strong { font-weight: 700; font-size: 1rem; color: var(--ulb-green, #c8f135); }
.ulb-header--stacked .ulb-header__stat-custom span { font-size: 0.6rem; color: var(--ulb-text-dim, #908c86); }
.ulb-header--stacked .ulb-header__cta { margin-top: 4px; }