/* ==================================================================
   motifs.css, l'identité visuelle de chaque booster.

   La couleur seule ne suffit pas à distinguer un sachet Rock d'un
   sachet Jazz sans lire l'étiquette. Chaque genre reçoit donc sa propre
   trame de fond, imprimée sur la feuille, en plus de son emblème.
   Tout est en dégradés CSS : aucune image.
   ================================================================== */

.pack-motif {
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Mix Mondial, orbites concentriques */
.pat-orbit .pack-motif {
  background: repeating-radial-gradient(circle at 50% 34%,
    rgba(255,255,255,.22) 0 1px, transparent 1px 13px);
}

/* Pop, pastilles régulières, façon pois */
.pat-dots .pack-motif {
  background: radial-gradient(rgba(255,255,255,.3) 1.6px, transparent 1.7px);
  background-size: 15px 15px;
}

/* Rap, barres verticales massives */
.pat-bars .pack-motif {
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.2) 0 5px, transparent 5px 17px);
}

/* Rock, zigzags d'amplificateur */
.pat-zigzag .pack-motif {
  background:
    repeating-linear-gradient(56deg, rgba(255,255,255,.2) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-56deg, rgba(255,255,255,.2) 0 2px, transparent 2px 13px);
}

/* Électro, grille de circuit */
.pat-grid .pack-motif {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 15px);
}

/* Dance, ondes */
.pat-waves .pack-motif {
  background: repeating-radial-gradient(ellipse 60% 22% at 50% 120%,
    rgba(255,255,255,.24) 0 2px, transparent 2px 16px);
}

/* R&B, soie diagonale douce */
.pat-silk .pack-motif {
  background: repeating-linear-gradient(28deg,
    rgba(255,255,255,.22) 0 1px, transparent 1px 9px);
  opacity: .38;
}

/* Soul & Funk, soleil rayonnant */
.pat-rays .pack-motif {
  background: repeating-conic-gradient(from 0deg at 50% 32%,
    rgba(255,255,255,.26) 0deg 3deg, transparent 3deg 11deg);
}

/* Jazz, sillons irréguliers de vinyle */
.pat-scratch .pack-motif {
  background:
    repeating-linear-gradient(97deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(83deg, rgba(0,0,0,.2) 0 1px, transparent 1px 19px);
}

/* Classique, colonnes cannelées */
.pat-columns .pack-motif {
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.26) 0 2px,
    rgba(0,0,0,.14) 2px 4px,
    transparent 4px 22px);
}

/* Metal, chevrons agressifs */
.pat-chevron .pack-motif {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.24) 0 3px, transparent 3px 14px);
}

/* Films & Jeux, perforations de pellicule */
.pat-film .pack-motif {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.3) 0 8px, transparent 8px 18px) left / 10px 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.3) 0 8px, transparent 8px 18px) right / 10px 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px);
}

/* Reggae, bandes horizontales larges */
.pat-bands .pack-motif {
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,.22) 0 6px, transparent 6px 24px);
}

/* Latino, carreaux */
.pat-tiles .pack-motif {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 12px);
}

/* L'emblème reprend la même famille de formes que la trame. */
.win-mark { font-size: 2.4em; }
.pat-columns .win-mark,
.pat-film .win-mark { font-size: 2em; }