/* B3 tâche 053 — l'écran de vérification d'identité (talent et voie Private).

   Reprise des mesures de la modale de vérification du dashboard talent
   (`/mockups/talent/dashboard`, bloc `.td2-verif-*`) : mêmes rayons, mêmes
   tailles de texte, mêmes espacements. Les classes sont préfixées `iv-` parce
   que l'écran vit ici sur une PAGE, pas dans la modale ; la tâche 055 posera le
   même markup dans la modale du dashboard.

   Feuille entièrement tokenisée : aucune couleur écrite en dur, y compris hors
   de la famille or (`test/assets/design_system_test.rb`, liste TOKENISED_SHEETS).
   C'est ce garde-fou qui a payé les 9 dorés et les 4 rouges en circulation. */

.iv-page {
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-16);
}

.iv-card {
  background: var(--n-0);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 440px;
  padding: var(--sp-6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}

/* ── En-tête d'un état « il y a quelque chose à faire » ───────────────────── */

.iv-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--n-900);
  margin: 0 0 var(--sp-2);
}

.iv-sub {
  font-size: 13px;
  color: var(--n-500);
  line-height: 1.55;
  margin: 0 0 var(--sp-5);
}

.iv-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--n-500);
  margin: 0 0 var(--sp-2);
}

/* ── Les pièces acceptées : une information, plus un choix ────────────────── */

.iv-doc {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--n-200);
  background: var(--n-0);
  margin-bottom: var(--sp-2);
}

.iv-doc-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--n-900);
}

.iv-doc-desc {
  display: block;
  font-size: 12px;
  color: var(--n-500);
  margin-top: 1px;
}

/* ── La note de confidentialité ───────────────────────────────────────────── */

.iv-note {
  display: flex;
  gap: var(--sp-2);
  font-size: 11.5px;
  color: var(--n-500);
  line-height: 1.5;
  margin: var(--sp-4) 0;
}

.iv-note svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Les états centrés (en cours, vérifié, refusé) ────────────────────────── */

.iv-center {
  text-align: center;
  padding: var(--sp-1) 0;
}

.iv-center h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--n-900);
  margin: 0 0 var(--sp-2);
}

.iv-center p {
  font-size: 13px;
  color: var(--n-500);
  margin: 0 0 var(--sp-5);
  line-height: 1.5;
}

.iv-reason {
  color: var(--n-700);
  font-weight: 600;
}

.iv-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
}

.iv-icon svg { width: 26px; height: 26px; }

.iv-icon.is-gold  { background: var(--gold-50);  color: var(--gold-700); }
.iv-icon.is-green { background: var(--green-50); color: var(--green); }
.iv-icon.is-red   { background: var(--red-50);   color: var(--red); }

/* ── Ce que la vérification ouvre ─────────────────────────────────────────── */

.iv-unlocks {
  background: var(--gold-50);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: left;
}

.iv-unlocks-kicker {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 var(--sp-3);
}

.iv-unlock-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--n-900);
  padding: var(--sp-1) 0;
}

.iv-unlock-row svg {
  width: 15px;
  height: 15px;
  color: var(--green);
  flex-shrink: 0;
}

/* ── Les actions ──────────────────────────────────────────────────────────── */

.iv-actions { display: flex; gap: var(--sp-3); }

.iv-btn {
  flex: 1;
  height: 42px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.iv-btn-gold {
  background: var(--gold-fill);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
}

.iv-btn-block {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: var(--r-md);
  background: var(--gold-fill);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

/* Mobile 390 px : la carte occupe la largeur, les gouttières restent. */
@media (max-width: 480px) {
  .iv-page { padding: var(--sp-5) var(--sp-3) var(--sp-12); }
  .iv-card { padding: var(--sp-5) var(--sp-4); }
}

/* ── B3 tâche 052 — le refus rendu AVANT le clic (AC39.6) ──────────────────

   Le même encart partout où un acte d'engagement est fermé : la fiche d'offre,
   la fiche d'une Maison, le détail d'une proposition reçue, la carte Offre du
   board, le composeur de la messagerie, la carte d'une étape. Il remplace le
   bouton, il ne s'ajoute pas à côté : un bouton qui échoue après le clic est
   exactement ce que la garde évite.

   Il vit dans cette feuille et pas dans une septième, parce que c'est le même
   sujet que l'écran de vérification, et parce que `stylesheet_link_tag :app`
   sert toutes les feuilles produit : l'encart s'affiche donc partout sans
   qu'une page ait à déclarer quoi que ce soit. Feuille tokenisée : aucune
   couleur en dur.

   Retours Tatianna 01/10 (#4252, #4255). Les sélecteurs portent un cran de
   spécificité de plus que le nom de classe seul : deux feuilles de page
   remettent tout à zéro avant lui (`.page-job-listing *` sur la fiche d'offre,
   `.te-page button` dans l'aperçu de l'Explorer). Sur la fiche d'offre,
   l'encart perdait ainsi son padding et l'icône collait au titre ; dans
   l'aperçu, le bouton perdait son fond. Le bouton est une action à faire :
   même ambre que les pastilles « à traiter » du tableau de bord talent. */

div.ig-lock {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
}

.ig-lock .ig-lock-icon {
  display: flex;
  color: var(--gold-600);
  flex-shrink: 0;
}

.ig-lock .ig-lock-icon svg {
  width: 18px;
  height: 18px;
}

.ig-lock .ig-lock-text {
  flex: 1 1 200px;
  min-width: 0;
}

.ig-lock .ig-lock-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--n-900);
  margin: 0 0 var(--sp-1);
  line-height: 1.4;
}

.ig-lock .ig-lock-body {
  font-size: 12px;
  color: var(--n-700);
  line-height: 1.5;
  margin: 0;
}

.ig-lock .ig-lock-cta {
  flex: 1 1 100%;
  display: block;
  text-align: center;
  padding: 11px var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--amber-strong);
  color: var(--on-gold);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t);
}

.ig-lock .ig-lock-cta:hover {
  background: var(--amber);
}