/* Design system Tastellers — COMPOSANTS PARTAGÉS.

   À quoi ça sert
   --------------
   Les mêmes 8 composants sont recopiés dans des dizaines de feuilles de page, chacune
   avec son propre préfixe et ses propres valeurs en dur : `chip` apparaît dans 33
   feuilles, `empty` dans 25, un bouton doré dans 18, le badge « Vérifié » dans 17,
   la pastille « brique à venir » dans 15, la pastille de dispo dans 12, le fond de
   modale dans 12, la languette de match dans 6. Chaque recopie a dérivé, et chaque
   dérive est devenue un ticket « pas pixel perfect ».

   Ce fichier pose la version unique. Les définitions de référence viennent des
   maquettes validées :
     app/views/mockups/shared/ds/_btn.html.erb        → bouton
     app/views/mockups/shared/ds/_badge.html.erb      → badge
     app/views/mockups/shared/ds/_chip.html.erb       → chip
     app/views/mockups/shared/_availability_marker    → pastille de disponibilité
     app/views/mockups/shared/_match_badge            → niveau de match
     app/views/mockups/shared/_talent_card_styles     → badge Vérifié, languette de
                                                        match, chips, bouton doré

   Convention de nommage
   ---------------------
   Préfixe `tsds-` (Tastellers Design System), volontairement neutre et non utilisé
   ailleurs dans le produit. Motif : les noms courts déjà en circulation (`chip`,
   `verified`, `empty`, `btn-gold`, `c-*`, `ts-*`) sont pris par des feuilles de page
   et par les composants réels `.ts-avail` / `.tsm-badge` (availability.css,
   ai_score.css). Un préfixe neuf garantit qu'ajouter ce fichier ne change AUCUN
   rendu existant : rien ne le consomme encore.

   Migration
   ---------
   Ce fichier est le socle. Les feuilles de page ne sont PAS nettoyées ici : la
   migration se fait ensuite feuille par feuille, en remplaçant la définition locale
   par la classe `tsds-*`. Voir test/assets/design_tokens_test.rb, dont la liste de
   feuilles non migrées doit décroître à chaque passe.

   Toutes les couleurs viennent de design_tokens.css. Aucune valeur hexadécimale
   dorée en dur ici, à l'exception du dégradé « métal » du badge Vérifié, documenté
   plus bas. */

:root {
  /* Dégradé « métal brossé » du badge Vérifié, repris tel quel de
     mockups/shared/_talent_card_styles.html.erb (--ts-round). Il est plus mat que
     --gold-fill : c'est ce qui donne au badge son aspect estampillé sur la photo. */
  --gold-metal: linear-gradient(135deg,#C1A866,#DAC994 55%,#B8994F);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. Bouton doré  —  .tsds-btn-gold
   Réf : mockups/shared/ds/_btn (variant "gold") + _talent_card_styles (.ts-btn.gold)
   Texte BLANC sur doré, avec l'ombre de lisibilité (règle de marque).
   La classe est doublée dans le sélecteur pour repasser devant les resets
   `.page-x a { color: inherit }` que plusieurs pages posent, sans !important.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 38px;
  padding: 0 var(--sp-5);
  border: none;
  border-radius: var(--r-sm);
  background: var(--gold-fill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(163,133,67,.30);
  transition: filter var(--t), box-shadow var(--t), transform var(--t);
}
.tsds-btn-gold.tsds-btn-gold {
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
}
.tsds-btn-gold:hover { filter: brightness(1.04); }
.tsds-btn-gold svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Variante compacte (cards, barres d'action) */
.tsds-btn-gold--sm { height: 32px; padding: 0 var(--sp-3); font-size: 10px;
                     letter-spacing: .03em; text-transform: uppercase;
                     border-radius: 10px; }
.tsds-btn-gold--sm svg { width: 12px; height: 12px; }

/* Contrepartie sobre du bouton doré (bordure dorée, fond blanc) */
.tsds-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 38px; padding: 0 var(--sp-5);
  border: 1px solid var(--gold-200); border-radius: var(--r-sm);
  background: var(--n-0); color: var(--gold-700);
  font-family: inherit; font-size: 13px; font-weight: 700;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.tsds-btn-outline:hover { background: var(--gold-50); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. Badge « Vérifié »  —  .tsds-verified
   Réf : _talent_card_styles (.ts-card-vbadge)
   EXCEPTION validée à la règle « texte blanc sur doré » (retour Tatianna #2619) :
   ce badge garde une écriture foncée sur son fond doré. L'encre est figée à
   #242424, la variante canonique parmi les 4 en circulation.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: 5px;
  background: var(--gold-metal);
  color: #242424;               /* exception #2619 : encre foncée sur doré */
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-style: normal;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
/* Le « T » Tastellers, servi en SVG (règle projet : pas d'emoji) */
.tsds-verified::before {
  content: "";
  width: 9px; height: 11px; flex-shrink: 0;
  background: url("/images/verified-t.svg") no-repeat center/contain;
}
/* Posé en surimpression sur une photo de card */
.tsds-verified--overlay { position: absolute; top: 12px; right: 12px; z-index: 3; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. Chip / pastille de catégorisation  —  .tsds-chip
   Réf : mockups/shared/ds/_chip + _talent_card_styles (.ts-card-chip)
   Défaut : contour neutre. Modificateur --gold pour les chips de spécialité.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-pill);
  background: var(--n-0);
  color: var(--n-500);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.tsds-chip--gold {
  border-color: var(--gold-200);
  background: var(--gold-50);
  color: var(--gold-700);
  font-weight: 600;
}
.tsds-chip--green {
  border-color: var(--green-200);
  background: var(--green-50);
  color: var(--green);
  font-weight: 600;
}
/* Chip cliquable (filtres) : même boîte, état sélectionné doré */
.tsds-chip--action { cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); }
.tsds-chip--action:hover { border-color: var(--gold-200); background: var(--gold-50); color: var(--gold-700); }
.tsds-chip--action.is-on { border-color: var(--gold-200); background: var(--gold-50); color: var(--gold-700); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. Pastille de disponibilité  —  .tsds-avail
   Réf : mockups/shared/_availability_marker (mêmes 4 états, mêmes couleurs).
   Le point prend la couleur du texte : une seule déclaration par état.
   Les couleurs orange/rouge sont propres à ce composant (pas de jeton : elles
   n'existent nulle part ailleurs dans la charte).
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.tsds-avail__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tsds-avail--md { font-size: 12.5px; }
.tsds-avail--md .tsds-avail__dot { width: 7px; height: 7px; }
.tsds-avail--now     { color: var(--green); }   /* Disponible */
.tsds-avail--soon    { color: var(--amber); }        /* Sous 2 semaines / en recherche */
.tsds-avail--later   { color: #B4442F; }        /* Sous 1 mois */
.tsds-avail--unknown { color: var(--n-500); }   /* Sur demande */

/* ═══════════════════════════════════════════════════════════════════════════
   5. Languette de match  —  .tsds-match-tab
   Réf : _talent_card_styles (.ts-card-mtab, retours #1904 / #1905).
   Conteneur seul : il pose la pastille de match à cheval sur la couture
   photo / fiche, collée au bord droit et tranchée. Le badge lui-même reste
   le composant réel `.tsm-badge` (ai_score.css).
   Le parent doit être en position:relative et la photo en overflow:visible.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-match-tab {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 4;
  display: inline-flex;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(30,28,24,.20);
}
.tsds-match-tab > * {
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  border-right: none;
  padding-right: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Pastille « brique à venir »  —  .tsds-soon
   Marque une fonctionnalité annoncée mais pas encore livrée. Version parchemin
   (la plus répandue dans le produit : fond crème, encre dorée, opacité réduite).
   Variante --dark pour les poses sur photo ou sur fond sombre.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-pill);
  background: var(--gold-50);
  color: var(--gold-600);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  opacity: .8;
}
.tsds-soon--dark {
  background: #1C1A17;
  border-color: rgba(196,165,89,.35);
  color: #E8D49A;
  opacity: 1;
}
/* Posée en surimpression (coin d'une card désactivée) */
.tsds-soon--overlay { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 3; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Fond de modale  —  .tsds-modal-backdrop
   Voile plein écran. `.is-open` l'affiche ; sans classe d'état il est
   transparent et ne capte pas les clics, ce qui permet de l'animer.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(44,44,44,.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}
.tsds-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
/* Modales natives <dialog> : même voile */
.tsds-modal::backdrop { background: rgba(44,44,44,.32); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. État vide  —  .tsds-empty
   Encadré centré avec icône ronde, titre et texte d'explication. Sert aux
   listes sans résultat (shortlist, candidatures, offres sauvegardées…).
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-empty {
  padding: 56px var(--sp-6);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-lg);
  background: var(--n-0);
  color: var(--n-500);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.tsds-empty__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto var(--sp-3);
  border: 1px solid var(--gold-200);
  border-radius: 14px;
  background: var(--gold-50);
  color: var(--gold-500);
}
.tsds-empty__icon svg { width: 22px; height: 22px; }
.tsds-empty__title {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--n-900);
  font-size: 16px;
  font-weight: 700;
}
.tsds-empty__action { margin-top: var(--sp-4); }

/* ── Erreur de validation d'un champ ──────────────────────────────────────
   Rendue au ras du champ concerné (shared/_field_errors), jamais en tête de
   page : une erreur qu'on doit aller chercher n'est pas lue. */
.ds-field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: var(--sp-2);
  color: var(--amber-strong);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}
.ds-field-error svg { flex-shrink: 0; margin-top: 2px; }