/* ==========================================================================
   Projéta - Composants
   --------------------------------------------------------------------------
   Boutons, liens, tags, champs, titres en surimpression, cartels.
   ========================================================================== */

/* --- Titres en surimpression ------------------------------------------------
   Le texte n'existe qu'UNE fois dans le DOM (référencement, copié-collé) :
   le calque bleu décalé est un ::after généré depuis data-double - le
   contenu généré n'est ni indexé ni sélectionnable. Le ::after porte
   width:100% pour wrapper aux mêmes points que le rose (gère le mobile).
   Décalage réglable via --off. */

.titre-pop { position: relative; display: inline-block; }
/* Le couple d'encres vient de la page : --titre-bottom pour le texte,
   --titre-top pour le calque décalé, --titre-blend pour la fusion du
   calque du dessus (multiply = transparent, normal = opaque) - voir
   les combos par encre dans tokens.css. */
.titre-pop > span { color: var(--titre-bottom, var(--rose)); mix-blend-mode: multiply; }
.titre-pop::after {
  content: attr(data-double);
  position: absolute;
  left: calc(-1 * var(--off));
  top: calc(-1 * var(--off));
  width: 100%;
  color: var(--titre-top, var(--bleu));
  mix-blend-mode: var(--titre-blend, multiply);
  pointer-events: none;
}

/* Variante sur fond noir : les calques passent en screen */
.titre-pop--nuit > span { mix-blend-mode: screen; }
.titre-pop--nuit::after { mix-blend-mode: screen; }

/* --- Hirondelle (repère de calage rond + croix) --------------------------------
   Masque monochrome comme le logo : le background donne la couleur.
   Sert au séparateur « traits de coupe » et aux puces de listes. */
.hirondelle {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: var(--hirondelle) center / contain no-repeat;
  mask: var(--hirondelle) center / contain no-repeat;
}

/* --- Boutons (pill, trait 2px, hover translate) ------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 13px var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  border: var(--trait);
  padding: 13px 20px;
  border-radius: var(--rayon-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s;
  background: transparent;
  color: var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); }

.btn--encre  { background: var(--ink);   color: var(--jaune); }
.btn--bleu   { background: var(--bleu);  color: #fff; }
.btn--jaune  { background: var(--jaune); color: var(--ink); }
.btn--rose   { background: var(--rose);  color: #fff; }
.btn--vert   { background: var(--vert);  color: #fff; }
.btn--rouge  { background: var(--rouge); color: #fff; }
.btn--contour:hover { background: var(--ink); color: var(--paper); }

.btn--petit { padding: 9px 15px; font-size: 12px; }

.btn[disabled], .btn--epuise {
  background: var(--paper-alt);
  color: var(--ink);
  opacity: .4;
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn--epuise:hover { transform: none; }

/* Séparateur fin dans un bouton (« Panier | 25 € ») */
.btn__sep { width: 1px; height: 12px; background: currentColor; opacity: .4; }

/* --- Liens décorés --------------------------------------------------------------- */

.lien-pop {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--bleu);
  text-decoration: none;
  text-shadow: var(--off) var(--off) 0 var(--rose);
}
.lien-jaune {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--jaune);
}
.lien-souligne {
  color: var(--bleu);
  text-decoration: none;
  border-bottom: 2px solid var(--rose);
}

/* Soulignés d'encre (tags du héro : sans algo / sans IA / fait main) */
/* La couleur du soulignement vient du panel (--souligne, posée en
   inline par le template - tags du hero de l'accueil). */
.souligne { border-bottom: 2px solid var(--souligne, var(--rose)); }

/* --- Tags & filtres ----------------------------------------------------------------- */

.tag {
  font: 400 11px var(--font-mono);
  border: 1.5px solid var(--ink);
  padding: 7px 12px;
  border-radius: var(--rayon-pill);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
a.tag,
button.tag {
  cursor: pointer;
}
.tag--actif {
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Tag plein : pour hiérarchiser (ex. réseau : les collectifs du site
   pèsent plus lourd que les partenaires extérieurs en contour). */
.tag--plein {
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
}
.tag--plein:hover { color: var(--jaune); }

.badge {
  font: 700 10px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--rose);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
}
.badge--signal {
  background: var(--jaune);
  color: var(--ink);
  border: var(--trait);
}

/* --- Champs de formulaire -------------------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: 7px; }

.champ label {
  font: 700 10px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.champ input,
.champ textarea,
.champ select {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--paper);
  border: var(--trait);
  border-radius: var(--rayon-chip);
  padding: 12px 14px;
  color: var(--ink);
}

/* --- Cartel (l'étiquette sous chaque pièce, comme en expo) ------------------------------------- */

.cartel { display: flex; flex-direction: column; gap: 12px; }

/* Le titre de la pièce mène (produit, groupe, ticket) ; l'artiste (ou
   l'intitulé secondaire) passe dessous, plus discret. */
.cartel__titre {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
}
.cartel__artiste {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  opacity: .75;
  margin-top: 2px;
}
.cartel__meta {
  font: 400 11px var(--font-mono);
  letter-spacing: .06em;
  opacity: .6;
  margin-top: 6px;
}

/* --- Bandeaux d'annonce ---------------------------------------------------------
   Messages site entiers sous la barre (vacances, code promo…),
   fermables individuellement - voir le snippet bandeaux.php.
   Empilés si plusieurs. */

.bandeau {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 52px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font: 700 13px var(--font-mono);
}
.bandeau + .bandeau { border-top: 1px solid var(--paper); }

/* Encres au choix - le jaune est le seul fond clair : texte encre */
.bandeau--bleu  { background: var(--bleu); }
.bandeau--rose  { background: var(--rose); }
.bandeau--vert  { background: var(--vert); }
.bandeau--rouge { background: var(--rouge); }
.bandeau--jaune { background: var(--jaune); color: var(--ink); }

.bandeau__texte { color: inherit; text-decoration: none; }
a.bandeau__texte:hover { text-decoration: underline; text-underline-offset: 3px; }

.bandeau__fermer {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  opacity: .7;
}
.bandeau__fermer:hover { opacity: 1; }