/* =============================================================================
 * SERIGRAPHIE-BOUTIQUE — Motif halftone signature v0.2.0
 * =============================================================================
 * Usage : appliquer les classes .sb-halftone-* sur des éléments pour obtenir
 * le motif de points sérigraphique, signature visuelle native du métier.
 *
 * Règles d'usage (cf principe P2 du moodboard) :
 * - TOUJOURS monochrome (jamais multicolore)
 * - Opacité maximale 8% pour les backgrounds
 * - Jamais plein écran sans contraste
 * - Responsive : densité réduite sur mobile pour éviter le moiré
 *
 * Classes disponibles :
 * - .sb-halftone-subtle       → fond très discret (3-4% opacité)
 * - .sb-halftone-default      → fond standard (8% opacité)
 * - .sb-halftone-accent       → pattern affirmé pour transitions (40% opacité)
 * - .sb-halftone-inverted     → version claire sur fond foncé
 *
 * Modifier de taille : .sb-halftone--sm, --md (défaut), --lg
 * Modifier de direction : .sb-halftone--gradient-bottom, --gradient-right
 * =============================================================================
 */

/* ---------------------------------------------------------------------------
 * Base — tous les halftones partagent la même architecture de fond
 * ------------------------------------------------------------------------- */
[class*="sb-halftone-"] {
  position: relative;
}

[class*="sb-halftone-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    currentColor var(--_dot-radius, 1.5px),
    transparent calc(var(--_dot-radius, 1.5px) + 0.5px)
  );
  background-size: var(--_grid, 12px) var(--_grid, 12px);
  opacity: var(--_opacity, 0.08);
  pointer-events: none;
}

/* Force currentColor = encre par défaut */
[class*="sb-halftone-"] {
  color: var(--sb-color-ink);
}

/* ---------------------------------------------------------------------------
 * Intensités
 * ------------------------------------------------------------------------- */
.sb-halftone-subtle::before {
  --_opacity: 0.04;
}

.sb-halftone-default::before {
  --_opacity: 0.08;
}

.sb-halftone-accent::before {
  --_opacity: 0.4;
}

.sb-halftone-full::before {
  --_opacity: 1;
}

/* Version inversée : points clairs sur fond sombre */
.sb-halftone-inverted {
  color: var(--sb-color-paper);
}

.sb-halftone-inverted::before {
  --_opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * Tailles de dots
 * ------------------------------------------------------------------------- */
.sb-halftone--xs::before {
  --_dot-radius: 1px;
  --_grid: 8px;
}

.sb-halftone--sm::before {
  --_dot-radius: 1.5px;
  --_grid: 10px;
}

/* default (md) : pas de modifier, les valeurs par défaut s'appliquent */

.sb-halftone--lg::before {
  --_dot-radius: 2.5px;
  --_grid: 16px;
}

.sb-halftone--xl::before {
  --_dot-radius: 3.5px;
  --_grid: 22px;
}

/* ---------------------------------------------------------------------------
 * Gradients de masquage — pour créer des transitions progressives
 * Ex : halftone qui se densifie vers le bas d'un hero
 * ------------------------------------------------------------------------- */
.sb-halftone--gradient-bottom::before {
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
}

.sb-halftone--gradient-top::before {
  -webkit-mask-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
}

.sb-halftone--gradient-right::before {
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.2) 70%,
    transparent 100%
  );
}

.sb-halftone--gradient-diagonal::before {
  -webkit-mask-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
}

/* ---------------------------------------------------------------------------
 * Usages prédéfinis (shortcuts composites)
 * ------------------------------------------------------------------------- */

/* Hero background : halftone diagonal qui se dissipe */
.sb-halftone-hero {
  position: relative;
}
.sb-halftone-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--sb-color-ink);
  background-image: radial-gradient(
    circle,
    currentColor 1.5px,
    transparent 2px
  );
  background-size: 18px 18px;
  opacity: 0.05;
  pointer-events: none;
}

/* Footer background : halftone dense mais discret */
.sb-halftone-footer {
  position: relative;
  overflow: hidden;
}
.sb-halftone-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--sb-color-paper);
  background-image: radial-gradient(
    circle,
    currentColor 1px,
    transparent 1.5px
  );
  background-size: 8px 8px;
  opacity: 0.05;
  pointer-events: none;
}

/* Divider : ligne horizontale de dots */
.sb-halftone-divider {
  display: block;
  width: 100%;
  height: 8px;
  border: none;
  background-image: radial-gradient(
    circle,
    var(--sb-color-graphite) 1px,
    transparent 1.5px
  );
  background-size: 12px 8px;
  background-repeat: repeat-x;
  background-position: center;
  margin: var(--sb-sp-6) 0;
}

/* ---------------------------------------------------------------------------
 * Responsive — réduction de la densité sur mobile pour éviter le moiré
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  [class*="sb-halftone-"]::before {
    --_grid: 14px;
  }
  .sb-halftone-hero::before {
    background-size: 22px 22px;
  }
}

/* ---------------------------------------------------------------------------
 * Accessibility — respect du mode reduced-motion (pas d'animation ici mais
 * on prévoit pour les futures variations animées)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class*="sb-halftone-"]::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * SVG helper — pour les cas où on veut un halftone en inline SVG plutôt que
 * en pseudo-élément (ex. décoration dans un logo, dans une illustration)
 * ------------------------------------------------------------------------- */
.sb-halftone-svg {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* Utilisation recommandée :
 *
 * <div class="sb-halftone-default sb-halftone--md sb-halftone--gradient-bottom">
 *   ... contenu ...
 * </div>
 *
 * Le contenu reste net au-dessus, le pattern est généré en ::before derrière.
 * Opacity, taille dots, gradient de masquage sont tous configurables.
 */