/* ================================================================
   mze-vitrine-composants.css — primitives partagées des composants vitrine
   ================================================================
   Ces règles vivaient dans Mze.Web/wwwroot/css/mze-vitrine.css alors que le
   markup qu'elles habillent est émis par les composants de CETTE assembly.
   L'extraction du domaine vitrine (ADR-008) a rendu la dépendance visible :
   le banc de composants, qui ne charge pas la feuille de Mze.Web, rendait
   MzeCarteProduit en liens nus.

   PÉRIMÈTRE — n'entre ici que ce qui a PLUSIEURS consommateurs. Une règle à
   consommateur unique va dans le .razor.css de son composant : elle y est
   scopée, donc incapable de fuir sur le markup d'un autre.

   Consommatrices : Mze.Web (vitrine) et Mze.Bench (banc), via
       <link rel="stylesheet" href="_content/Mze.Vitrine.FrontEnd/css/mze-vitrine-composants.css" />

   Aucune valeur d'axe en dur : tout passe par les tokens --mze-*.
   ================================================================ */

/* ---------- Média de remplacement ----------
   Couche de BASE, pas alternative : un média référencé en base mais absent du
   disque laisserait sinon un cadre vide. L'image se pose dessus et le recouvre
   dès qu'elle est chargée.

   Émis par MzeCarteProduit, MzeCartePack, MzeTuileCollection (cette assembly)
   et par quatre sections éditoriales de Mze.Web — d'où sa place ici et non
   dans un .razor.css. */
.ph {
    background: var(--mze-accent-soft);
    color: var(--mze-accent-contrast);
    display: grid;
    place-items: center;
    font-family: var(--mze-font-tagline);
    font-size: var(--mze-text-size-4);
    width: 100%;
    height: 100%;
}

.ph[data-libelle]::after {
    /* Libellé du repli porté par le CSS, pas par le texte : sous une vraie image, un mot « photo »
       dans le HTML est lu par les robots comme du contenu de la page. */
    content: attr(data-libelle);
}

.ph--band {
    background: repeating-linear-gradient(135deg,
                var(--mze-accent-soft) 0 14px,
                color-mix(in srgb, var(--mze-accent) 26%, var(--mze-bg)) 14px 28px);
}

/* ---------- Pastille des cartes vitrine ----------
   RENOMMÉE depuis `.mze-badge`. L'ancien nom entrait en collision avec le
   composant générique MzeBadge, qui émet la même classe : une règle GLOBALE
   portant ce nom s'appliquait donc aussi à lui, partout où il apparaît. C'est
   la fuite décrite dans les notes de FEAT-SITE-004 — du CSS global qui reprend
   les classes d'un composant scopé l'écrase.

   Deux consommateurs (MzeCarteProduit, MzeCartePack) : la règle reste partagée,
   mais sous un nom qui n'appartient qu'à la vitrine. */
.mze-vitrine-pastille {
    display: inline-block;
    padding: var(--mze-space-1) var(--mze-space-2);
    font-size: var(--mze-text-size-6);
    font-weight: var(--mze-font-weight-bold);
    letter-spacing: .04em;
    border-radius: var(--mze-radius-sm);
}

.mze-vitrine-pastille--ok   { background: var(--mze-success); color: var(--mze-text-on-dark); }
.mze-vitrine-pastille--ko   { background: var(--mze-error);   color: var(--mze-text-on-dark); }
.mze-vitrine-pastille--soft { background: var(--mze-accent-soft); color: var(--mze-accent-contrast); }