/* 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; }

/* ═══════════════════════════════════════════════════════════════════════════
   2 bis. Marqueur de segment du TALENT  —  .tsds-segment
   B3 tâche 051, note Private / Hospitality v1.2 du 09/09 (bloc 04).
   Pastille TEXTE, sans icône : c'est la règle, pas un oubli. L'aubergine
   #220A38 est la couleur de la famille Private déjà posée sur les marqueurs
   d'établissement (.est-hbadge--private-household & co, establishment.css) :
   une seule famille, une seule couleur, des deux côtés de la place de marché.
   Hospitality n'a aucune classe ici — il n'affiche rien.
   ═══════════════════════════════════════════════════════════════════════════ */
.tsds-segment {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: 5px;
  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;
  white-space: nowrap;
}
.tsds-segment--private { background: #220A38; border: 1px solid #220A38; color: #fff; }
/* Variante des cartes de liste, où la ligne d'identité est plus serrée. */
.tsds-segment--sm { height: 17px; padding: 0 6px; font-size: 8.5px; letter-spacing: .5px; }

/* 2 ter. Talent EN VEILLE, vu par une Maison en contact — .tsds-standby
   #4708 (Colin 09/10). Ardoise des icônes de navigation : un état, pas une
   alerte. Le gabarit (shared/_standby_badge) décide QUAND elle s'affiche. */
.tsds-standby {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 var(--sp-2);
  border-radius: 999px;
  background: var(--nav-ic-slate-bg);
  color: var(--nav-ic-slate);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.tsds-standby svg { width: 11px; height: 11px; flex-shrink: 0; }
.tsds-standby--sm { height: 18px; padding: 0 7px; font-size: 10px; }
.tsds-standby--sm svg { width: 10px; height: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   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; }

/* ── Repli d'un texte long : « Lire la suite » ─────────────────────────────
   B3 tâche 057 — AC42.4 / R3-42.6. Un `<details>` natif, zéro JavaScript :
   le texte replié reste DANS la page (copiable, cherchable, lu par un lecteur
   d'écran), il est seulement refermé. On ne coupe rien côté serveur.
   Le triangle par défaut du navigateur est remplacé par un signe qui suit
   l'état, et la zone cliquable reste un vrai `<summary>` (clavier compris). */
.ts-fold { margin-top: var(--sp-3); }
.ts-fold > summary.ts-fold-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--gold-deep, #8B7355);
  font-size: 13px;
  font-weight: 600;
}
.ts-fold > summary.ts-fold-more::-webkit-details-marker { display: none; }
.ts-fold > summary.ts-fold-more::after { content: "▾"; font-size: 11px; }
.ts-fold[open] > summary.ts-fold-more::after { content: "▴"; }
.ts-fold > summary.ts-fold-more:hover { text-decoration: underline; }
.ts-fold > summary.ts-fold-more:focus-visible { outline: 2px solid var(--gold-500, #B8912A); outline-offset: 2px; }
.ts-fold > p { margin-top: var(--sp-3); }

/* Retour Tatianna 01/10 (#4245) — l'entrée « Vérifier mon identité » devient
   un bouton de formulaire (POST vers la session du prestataire) : le <form>
   s'efface, le bouton garde exactement la boîte du lien qu'il remplace. */
.iv-entry-form{display:contents}
button.td2-step-cta,button.ig-lock-cta{font-family:inherit;cursor:pointer;border:0}
button.ig-lock-cta{width:100%}