/* Étiquettes, statuts et placeholders (maquettes p7). Texte espresso sur les teintes : la couleur de statut passe par le fond et la bordure (contraste AA). */
.tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--espresso);
    font: 400 var(--fs-label)/1.4 var(--font-mono);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tag--accent {
    background-color: color-mix(in srgb, var(--orange) 18%, var(--papier));
    border-color: color-mix(in srgb, var(--orange) 55%, var(--papier));
}
.tag--success {
    background-color: color-mix(in srgb, var(--sauge) 14%, var(--papier));
    border-color: color-mix(in srgb, var(--sauge) 55%, var(--papier));
}
.tag--outline {
    border-color: var(--espresso);
    background-color: transparent;
}

/* Contenu réel à fournir : jamais de faux texte ni de faux chiffre à la place. */
.placeholder {
    display: grid;
    place-items: center;
    min-height: 72px;
    padding: var(--space-4);
    border: 1px dashed var(--color-border-control);
    border-radius: var(--radius-control);
    background: repeating-linear-gradient(135deg, var(--sable) 0 12px, color-mix(in srgb, var(--sable) 45%, var(--papier)) 12px 24px);
    color: var(--brun);
    font: 400 var(--fs-label)/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}
/* Visuel absent d'un vrai contenu (projet, article, jeu) : fond neutre, jamais le texte « placeholder ». */
.visual-blank {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    background-color: var(--sable);
    color: color-mix(in srgb, var(--brun) 45%, var(--sable));
}
.surface-dark .visual-blank {
    background-color: color-mix(in srgb, var(--papier) 6%, var(--nuit-2));
    color: color-mix(in srgb, var(--papier) 30%, var(--nuit-2));
}

/* Logo (site et admin), en HTML/CSS : bordure et texte natifs, donc nets à petite taille. Proportions identiques aux fichiers de public/assets/img/logos/. */
.logo {
    --logo-sub: var(--brun);
    display: inline-grid;
    justify-items: center;
    flex: none;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: 3px 6px 4px;
    border: 2px solid var(--orange);
    border-radius: 6px;
    color: inherit;
    line-height: 1;
    text-decoration: none;
}
.logo__bar {
    display: flex;
    gap: 2px;
    width: 100%;
    margin-bottom: 3px;
}
.logo__bar span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--orange);
}
.logo__bar .logo__dot {
    margin-left: auto;
}
.logo__name {
    font: 600 1.0625rem/1 var(--font-display);
    letter-spacing: 0.02em;
}
.logo__sub {
    color: var(--logo-sub);
    font: 500 0.5625rem/1.2 var(--font-body);
    letter-spacing: 0.18em;
}
.surface-dark .logo,
.admin-sidebar .logo {
    --logo-sub: var(--gris);
}

/* Variante Binagames : contour de manette (SVG, trait de 2 px comme la bordure de Binaweb) à la place du cadre ; le texte est positionné au pixel dans la manette. */
.logo--games {
    position: relative;
    display: block;
    width: 66px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.logo__pad {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--orange);
    stroke-width: 38;
    stroke-linejoin: round;
    overflow: visible;
}
.logo--games .logo__name,
.logo--games .logo__sub {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
}
.logo--games .logo__name {
    top: 9.8px;
    font-size: 17.7px;
}
.logo--games .logo__sub {
    top: 26.5px;
    font-size: 8.8px;
    line-height: 1;
}