/**
 * Titres complets — visibilité et retour à la ligne (tout le projet)
 * Dernière couche globale (après responsive-* et shell-fix)
 */

/* —— Classes titre (alias historiques + design system) —— */
.card-header-hl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--gray-200);
  text-align: left;
}

.card-title-hl {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold, 700);
  color: var(--hl-blue);
  margin: 0;
  text-align: left;
}

.card-hl .card-header-hl {
  text-align: left;
}

/* —— Pas de troncature sur les titres de contenu —— */
.main-content .page-title-hl,
.main-content .page-header-hl h1,
.main-content .page-header-hl h2,
.dash-masthead h1,
.dash-section-title,
.dash-panel-head h2,
.dash-panel-head h3,
.dash-mod-card h3,
.page-header-promo h1,
.section-title,
.section-title-ultra,
.filters-section > h2,
.filters-section > h3,
.card-hl-title,
.card-title-hl,
.card-hl-header h1,
.card-hl-header h2,
.card-hl-header h3,
.card-header-hl h1,
.card-header-hl h2,
.card-header-hl h3,
.card-header-hl .card-title-hl,
.hero-section-ultra h1,
.hero-section-ultra h2,
.promo-workflow-hero h1,
.attendance-hero h1,
.mobile-card-title,
.item-card-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
  line-height: 1.3;
}

/* —— Layouts flex : la colonne titre ne doit pas être écrasée —— */
.page-header-hl,
.dash-masthead-inner,
.dash-masthead-title-row,
.card-hl-header,
.card-header-hl,
.card__titlebar,
.stock-summary-row-head,
.dash-panel-head,
.mobile-card-header {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
}

.page-header-hl > div:first-child,
.dash-masthead-inner > div:first-child:not(.dash-masthead-actions),
.card-header-hl > .card-title-hl,
.card-hl-header > .card-hl-title,
.card-header-hl > h2,
.card-header-hl > h3,
.dash-masthead-title-row h1 {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
}

.dash-masthead-title-row {
  width: 100%;
  max-width: 100%;
}

/* Sous-titres et fil d'Ariane */
.dash-masthead-sub,
.subtitle-hl,
.page-header-hl .subtitle-hl,
nav.app-breadcrumb {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.45;
}

/* Contraste titres principaux sur fond clair */
.main-content .page-title-hl,
.main-content .dash-masthead h1,
.main-content .dash-section-title,
.main-content .card-title-hl,
.main-content .card-hl-title {
  color: var(--hl-blue);
}

html[data-color-mode="dark"] .main-content .page-title-hl,
html[data-color-mode="dark"] .main-content .dash-section-title,
html[data-color-mode="dark"] .main-content .card-title-hl,
[data-theme="dark"] .main-content .page-title-hl,
[data-theme="dark"] .main-content .dash-section-title {
  color: var(--hl-blue-accent);
}

@media (max-width: 768px) {
  .card-title-hl,
  .card-hl-title,
  .page-title-hl,
  .dash-masthead h1 {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
  }
}