/* =============================================================================
 * Hecteo - Utilitaires
 * Jeu volontairement restreint : tout ce qui est structurel appartient aux
 * composants. Ces classes couvrent les ajustements ponctuels.
 * ========================================================================== */

/* --- Texte ------------------------------------------------------------------- */
.h-t-2xs  { font-size: var(--h-font-size-2xs); }
.h-t-xs   { font-size: var(--h-font-size-xs); }
.h-t-sm   { font-size: var(--h-font-size-sm); }
.h-t-md   { font-size: var(--h-font-size-md); }
.h-t-base { font-size: var(--h-font-size-base); }
.h-t-lg   { font-size: var(--h-font-size-lg); }
.h-t-xl   { font-size: var(--h-font-size-xl); }
.h-t-2xl  { font-size: var(--h-font-size-2xl); }
.h-t-3xl  { font-size: var(--h-font-size-3xl); }
.h-t-4xl  { font-size: var(--h-font-size-4xl); }

.h-t-regular  { font-weight: var(--h-font-weight-regular); }
.h-t-medium   { font-weight: var(--h-font-weight-medium); }
.h-t-semibold { font-weight: var(--h-font-weight-semibold); }
.h-t-bold     { font-weight: var(--h-font-weight-bold); }

.h-t-display { font-family: var(--h-font-family-display); letter-spacing: var(--h-font-tracking-tight); }
.h-t-mono    { font-family: var(--h-font-family-mono); }
.h-t-num     { font-variant-numeric: tabular-nums; }

.h-t-start   { text-align: start; }
.h-t-center  { text-align: center; }
.h-t-end     { text-align: end; }
.h-t-upper   { text-transform: uppercase; letter-spacing: var(--h-font-tracking-wider); }
.h-t-nowrap  { white-space: nowrap; }
.h-t-balance { text-wrap: balance; }
.h-t-pretty  { text-wrap: pretty; }

.h-t-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h-t-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Couleurs de texte -------------------------------------------------------- */
.h-t-default  { color: var(--h-c-text); }
.h-t-muted    { color: var(--h-c-text-muted); }
.h-t-subtle   { color: var(--h-c-text-subtle); }
.h-t-brand    { color: var(--h-c-brand-text); }
.h-t-accent   { color: var(--h-c-accent-text); }
.h-t-success  { color: var(--h-c-success-text); }
.h-t-warning  { color: var(--h-c-warning-text); }
.h-t-danger   { color: var(--h-c-danger-text); }
.h-t-info     { color: var(--h-c-info-text); }
.h-t-inverse  { color: var(--h-c-text-inverse); }

.h-t-gradient {
  background: linear-gradient(120deg, var(--h-color-primary-500), var(--h-color-lime-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Fonds -------------------------------------------------------------------- */
.h-bg-app     { background-color: var(--h-c-bg-app); }
.h-bg-surface { background-color: var(--h-c-bg-surface); }
.h-bg-alt     { background-color: var(--h-c-bg-surface-alt); }
.h-bg-sunken  { background-color: var(--h-c-bg-sunken); }
.h-bg-brand   { background-color: var(--h-c-brand); color: var(--h-c-on-brand); }
.h-bg-subtle  { background-color: var(--h-c-brand-subtle); }

.h-bg-mesh {
  background-image:
    radial-gradient(at 12% 8%, color-mix(in srgb, var(--h-color-primary-400) 22%, transparent) 0, transparent 55%),
    radial-gradient(at 88% 12%, color-mix(in srgb, var(--h-color-lime-300) 20%, transparent) 0, transparent 50%),
    radial-gradient(at 50% 95%, color-mix(in srgb, var(--h-color-primary-200) 25%, transparent) 0, transparent 55%);
}

/* --- Bordures et rayons ------------------------------------------------------- */
.h-border      { border: 1px solid var(--h-c-border); }
.h-border-top   { border-top: 1px solid var(--h-c-border); }
.h-border-bottom { border-bottom: 1px solid var(--h-c-border); }
.h-border-none { border: 0; }

.h-r-sm   { border-radius: var(--h-radius-sm); }
.h-r-md   { border-radius: var(--h-radius-md); }
.h-r-lg   { border-radius: var(--h-radius-lg); }
.h-r-xl   { border-radius: var(--h-radius-xl); }
.h-r-2xl  { border-radius: var(--h-radius-2xl); }
.h-r-full { border-radius: var(--h-radius-full); }

/* --- Ombres -------------------------------------------------------------------- */
.h-sh-none { box-shadow: none; }
.h-sh-xs   { box-shadow: var(--h-shadow-xs); }
.h-sh-sm   { box-shadow: var(--h-shadow-sm); }
.h-sh-md   { box-shadow: var(--h-shadow-md); }
.h-sh-lg   { box-shadow: var(--h-shadow-lg); }
.h-sh-xl   { box-shadow: var(--h-shadow-xl); }
.h-sh-brand { box-shadow: var(--h-shadow-brand); }

/* --- Espacements (echelle restreinte : 0 a 8) ---------------------------------- */
.h-m-0 { margin: 0; }
.h-mt-1 { margin-top: var(--h-space-1); }
.h-mt-2 { margin-top: var(--h-space-2); }
.h-mt-3 { margin-top: var(--h-space-3); }
.h-mt-4 { margin-top: var(--h-space-4); }
.h-mt-6 { margin-top: var(--h-space-6); }
.h-mt-8 { margin-top: var(--h-space-8); }
.h-mb-1 { margin-bottom: var(--h-space-1); }
.h-mb-2 { margin-bottom: var(--h-space-2); }
.h-mb-3 { margin-bottom: var(--h-space-3); }
.h-mb-4 { margin-bottom: var(--h-space-4); }
.h-mb-6 { margin-bottom: var(--h-space-6); }
.h-mb-8 { margin-bottom: var(--h-space-8); }
.h-mi-auto { margin-inline: auto; }

.h-p-0 { padding: 0; }
.h-p-2 { padding: var(--h-space-2); }
.h-p-3 { padding: var(--h-space-3); }
.h-p-4 { padding: var(--h-space-4); }
.h-p-5 { padding: var(--h-space-5); }
.h-p-6 { padding: var(--h-space-6); }
.h-p-8 { padding: var(--h-space-8); }

.h-gap-1 { gap: var(--h-space-1); }
.h-gap-2 { gap: var(--h-space-2); }
.h-gap-3 { gap: var(--h-space-3); }
.h-gap-4 { gap: var(--h-space-4); }
.h-gap-5 { gap: var(--h-space-5); }
.h-gap-6 { gap: var(--h-space-6); }
.h-gap-8 { gap: var(--h-space-8); }

/* --- Affichage ------------------------------------------------------------------ */
.h-block   { display: block; }
.h-inline  { display: inline; }
.h-iblock  { display: inline-block; }
.h-flex    { display: flex; }
.h-iflex   { display: inline-flex; }
.h-grid-d  { display: grid; }
.h-none    { display: none; }

.h-items-start   { align-items: flex-start; }
.h-items-center  { align-items: center; }
.h-items-end     { align-items: flex-end; }
.h-justify-start { justify-content: flex-start; }
.h-justify-center { justify-content: center; }
.h-justify-end   { justify-content: flex-end; }
.h-justify-between { justify-content: space-between; }
.h-col     { flex-direction: column; }
.h-wrap    { flex-wrap: wrap; }
.h-grow    { flex: 1 1 auto; }
.h-shrink-0 { flex: 0 0 auto; }

.h-w-full { width: 100%; }
.h-h-full { height: 100%; }
.h-relative { position: relative; }

.h-overflow-auto   { overflow: auto; }
.h-overflow-hidden { overflow: hidden; }

/* --- Icones --------------------------------------------------------------------- */
.h-icon {
  display: inline-block;
  width: var(--h-size-icon-md);
  height: var(--h-size-icon-md);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  vertical-align: -0.15em;
}

.h-icon--xs { width: var(--h-size-icon-xs); height: var(--h-size-icon-xs); }
.h-icon--sm { width: var(--h-size-icon-sm); height: var(--h-size-icon-sm); }
.h-icon--lg { width: var(--h-size-icon-lg); height: var(--h-size-icon-lg); }
.h-icon--xl { width: var(--h-size-icon-xl); height: var(--h-size-icon-xl); }

/* --- Affichage selon le theme ---------------------------------------------------- */
/* .h-only-light : visible en theme clair ; .h-only-dark : visible en theme sombre.
   Utile pour les visuels qui existent en deux versions (logos, illustrations). */
.h-only-dark { display: none; }

[data-theme='dark'] .h-only-light { display: none; }
[data-theme='dark'] .h-only-dark  { display: revert; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .h-only-light { display: none; }
  :root:not([data-theme='light']) .h-only-dark  { display: revert; }
}

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .h-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .h-hide-desktop { display: none !important; }
}