/**
 * SDC AtelierMetaRow — styles scoped.
 *
 * Pas d @layer (regle absolue 10 du CLAUDE.md du theme : le starterkit_theme
 * stable9 charge des rules hors layer qui battent toute rule dans un layer,
 * peu importe la specificite).
 *
 * Pas de !important. Pas de classes Tailwind. Tokens design via CSS vars.
 *
 * Affichage : ligne unique sur >= sm (icone + label + valeur), passe en
 * stack sur tres petit ecran (< 360px) pour preserver la lisibilite.
 */

.previensmoi-atelier-meta-row {
  margin: 0;
  padding: var(--previensmoi-space-2) 0;
  font-family: var(--previensmoi-font-sans);
  color: var(--previensmoi-color-ink-700);
  border-bottom: 1px solid var(--previensmoi-color-paper-200);
}

.previensmoi-atelier-meta-row:last-child {
  border-bottom: 0;
}

.previensmoi-atelier-meta-row__row {
  display: flex;
  align-items: baseline;
  gap: var(--previensmoi-space-3);
  flex-wrap: wrap;
}

.previensmoi-atelier-meta-row__icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--previensmoi-color-primary-600);
  line-height: 0;
}

.previensmoi-atelier-meta-row__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.previensmoi-atelier-meta-row__label {
  flex: 0 0 auto;
  font-size: var(--previensmoi-fontsize-sm);
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-ink-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.previensmoi-atelier-meta-row__label::after {
  content: ' :';
}

.previensmoi-atelier-meta-row__value {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--previensmoi-fontsize-base);
  color: var(--previensmoi-color-ink-800);
  word-break: break-word;
}

/* Variante emphasis — pour les places restantes critiques ou la date proche. */
.previensmoi-atelier-meta-row--emphasis .previensmoi-atelier-meta-row__value {
  font-weight: var(--previensmoi-fontweight-semibold);
  color: var(--previensmoi-color-primary-700);
}