/* B3 tâche 015 — mode Découverte (AC25.2, AC25.3).

   Transcrit de la maquette Découverte v4 (spec v3 du 03/08), portée par
   /mockups/recruiter/discovery : bandeau permanent, acte fermé, panneau des
   profils non exposés.

   Deux adaptations, toutes deux assumées et écrites :

   1. **L'échelle.** La source dessine ses écrans en miniature (titre de page à
      24 px là où l'écran réel est à 34 px, bandeau à 10,5 px). Les tailles sont
      remises à l'échelle du chrome réel dans le même rapport ; l'ordre des
      éléments, le dégradé sombre, la pastille et la pilule du bouton sont ceux
      de la source.

   2. **Les jetons.** Aucune couleur n'est écrite en dur : le design system a été
      payé par neuf dorés en circulation (`test/assets/design_system_test.rb`).
      Les dorés de la source sont donc rendus par --gold-*, --gold-fill et
      --on-gold, et pas recopiés. Conséquence visible et voulue : le
      texte de la pilule dorée est BLANC, comme partout ailleurs dans le produit
      (décision client sur --on-gold), et non l'encre sombre de la miniature.

   Cette feuille est déclarée dans TOKENISED_SHEETS : elle n'écrit aucun
   hexadécimal, et le garde-fou l'y tient. */

/* ── Bandeau permanent, sous la navigation ───────────────────────────────── */

/* #4268 (Tatianna 01/10) — dégradé expresso, plus de noir (`--ink`). */
.dc-banner {
  background: var(--espresso-fill);
  color: var(--n-100);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-5);
  font-size: 13px;
  line-height: 1.35;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}

.dc-banner .dc-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(196, 165, 89, 0.26);
  flex-shrink: 0;
}

.dc-banner b { font-weight: 600; }
.dc-banner .dc-banner-spacer { flex: 1; }

.dc-banner .dc-banner-cta {
  background: var(--gold-fill);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
  border: none;
  font-size: 12px;
  font-weight: 600;
  padding: 7px var(--sp-4);
  border-radius: var(--r-pill);
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--t);
}

.dc-banner .dc-banner-cta:hover { filter: brightness(1.05); }

/* ── Acte fermé : le motif et la sortie, jamais un bouton qui échoue ─────── */

.dc-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--n-50);
  border: 1px dashed var(--gold-400);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  color: var(--n-700);
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  transition: background var(--t), border-color var(--t);
}

.dc-lock:hover { background: var(--gold-50); border-color: var(--gold-500); }
.dc-lock svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--gold-500); }
.dc-lock .dc-lock-text { flex: 1; }
.dc-lock .dc-lock-out { font-weight: 600; color: var(--gold-500); white-space: nowrap; }

/* ── Ce que la borne n'a pas exposé ──────────────────────────────────────── */

.dc-hidden-panel {
  margin-top: 18px;
  background: linear-gradient(150deg, var(--gold-800) 0%, var(--ink) 100%);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-6);
  text-align: center;
  color: var(--n-100);
}

.dc-hidden-panel .dc-hidden-count {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--gold-200);
  line-height: 1.1;
}

.dc-hidden-panel .dc-hidden-label { font-size: 14px; font-weight: 600; margin-top: 2px; }

.dc-hidden-panel ul {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  text-align: left;
  display: inline-block;
}

.dc-hidden-panel li {
  font-size: 12.5px;
  color: var(--n-300);
  padding: 3px 0 3px var(--sp-4);
  position: relative;
}

.dc-hidden-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--gold-primary);
}

.dc-hidden-panel .dc-hidden-cta {
  display: inline-block;
  background: var(--gold-fill);
  color: var(--on-gold);
  text-shadow: var(--on-gold-shadow);
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px var(--sp-6);
  border-radius: var(--r-pill);
  margin-top: var(--sp-4);
  text-decoration: none;
}

/* Le volume du vivier sur le métier, quand la recherche n'a rien à cacher
   (R3-25.4). Une ligne, pas un panneau : il n'y a rien à débloquer. */
.dc-pool-note {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--n-500);
  text-align: center;
}

/* ── 390 px : la sortie reste atteignable au pouce (R3-MOB.48) ───────────── */

@media (max-width: 700px) {
  .dc-banner {
    flex-wrap: wrap;
    padding: var(--sp-3) 14px;
    gap: var(--sp-2);
  }

  .dc-banner .dc-banner-spacer { display: none; }
  .dc-banner .dc-banner-cta { width: 100%; text-align: center; padding: 11px var(--sp-4); }
  .dc-hidden-panel { padding: 22px var(--sp-4); }
  .dc-hidden-panel .dc-hidden-count { font-size: 27px; }
  .dc-hidden-panel .dc-hidden-cta { display: block; padding: 13px 18px; }
  .dc-lock { flex-wrap: wrap; }
}