/* Motif signature — étoile à 8 branches (zellige / mashrabiya, artisanat de Fès).
   Un seul motif décliné partout : texture ambiante du hero, séparateurs de
   section, gravure au dos de la carte fidélité, micro-"puce" sur la carte.

   docs/plans/promos-et-identite-visuelle.md, Lot 9, partie 2, item 3 : le
   motif était PEINT en or dans le data: URI (non recolorable par token).
   Converti en masque monochrome + background-color ordinaire — le motif
   suit désormais la palette partout, sans duplication de fichier. */

:root {
  /* Unité de motif encodée en SVG — deux carrés superposés (un tourné 45°)
     formant l'étoile à 8 branches, tracé fin. Noir plein : c'est un MASQUE,
     la couleur finale vient de `background-color` à chaque usage, l'opacité
     de la CSS de chaque usage (jamais bakée dans le SVG). */
  --zellige-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='black' stroke-width='0.75'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3C/g%3E%3C/svg%3E");
}

.zellige-texture {
  position: absolute;
  inset: 0;
  background-color: var(--gold-ink);
  -webkit-mask-image: var(--zellige-mask);
  mask-image: var(--zellige-mask);
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: 0.1;
  pointer-events: none;
}

/* Séparateur de section : ligne fine avec une étoile isolée au centre */
.zellige-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin: 0 auto;
  max-width: 640px;
  padding: 0 var(--space-md);
}

.zellige-divider::before,
.zellige-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold));
}

.zellige-divider::after { background: linear-gradient(90deg, var(--line-gold), transparent); }

.zellige-divider__mark {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  background-color: var(--gold-ink);
  -webkit-mask-image: var(--zellige-mask);
  mask-image: var(--zellige-mask);
  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;
  -webkit-mask-position: -49px -49px; /* recentre sur une étoile unique de l'unité 120px */
  mask-position: -49px -49px;
  opacity: 0.9;
}
/* Feuille d'or en coussin derrière l'étoile (Lot 12, docs/plans/promos-et-
   identite-visuelle.md) — matière décorative très discrète. */
.zellige-divider__mark::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  background-image: image-set(
    url('/assets/img/texture-marbre-or-1.avif') type('image/avif'),
    url('/assets/img/texture-marbre-or-1.webp') type('image/webp')
  );
  background-size: cover;
  opacity: 0.16;
}

/* Ornement de coin (footer) */
.zellige-corner {
  width: 60px;
  height: 60px;
  background-color: var(--gold-ink);
  -webkit-mask-image: var(--zellige-mask);
  mask-image: var(--zellige-mask);
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
  -webkit-mask-position: -30px -30px;
  mask-position: -30px -30px;
  opacity: 0.4;
}