/* ============================================================
   ADSGI · ADS GLOBAL INVEST — WEBSITE V2
   components.css — Composants réutilisables (Design System)
   WEB-FE-MASTER-01 §4.1 · tokens via variables.css (jamais redéfinis)
   Module complémentaire à global.css — sans duplication de règle.
   ============================================================ */

/* ---------- Eyebrow (sur-titre capitales espacées, Gold) ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--sp-sm);
}

/* ---------- Badge / étiquette de classification ---------- */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 2px var(--sp-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: var(--white);
}
.tag--gold   { border-color: var(--gold); color: var(--gold-deep); }
.tag--navy   { border-color: var(--navy); color: var(--navy); }

/* ---------- Notice / disclaimer institutionnel ---------- */
.notice {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  border-left: 3px solid var(--gold);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--mist);
  border-radius: var(--radius);
}

/* ---------- Tableau institutionnel sobre ---------- */
.table-inst {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
}
.table-inst th,
.table-inst td {
  text-align: left;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--line);
}
.table-inst th {
  font-family: var(--font-head);
  color: var(--navy);
  background: var(--paper);
}

/* ---------- État de validation de formulaire ---------- */
.field-error {
  color: #9a2c2c;
  font-size: 13px;
  margin-top: var(--sp-xs);
}
.form-status {
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--sp-md);
  border-radius: var(--radius);
}
.form-status--ok    { background: #eef6ef; color: #2c5a32; border: 1px solid #cfe4d2; }
.form-status--error { background: #fbeeee; color: #9a2c2c; border: 1px solid #efcfcf; }

/* ---------- Signalétique de couche DealRoom ---------- */
.layer-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.layer-flag--public       { color: var(--ink-soft); }
.layer-flag--showcase     { color: var(--gold-deep); }
.layer-flag--institutional{ color: var(--navy); }