/* ============================================================================
 * Wolf Pack — wolf-alchimie.css
 * Styles de la philosophie alchimique (bloc accueil + page /manifeste).
 * 100 % tokens Wolf : lisible et conforme AA en thème sombre COMME en thème
 * clair. Chargé via $page_styles, en complément de wolf-site.css.
 * ========================================================================== */

/* --- Signature / baseline --------------------------------------------------
 * « Empowered by Wolf — valorise your life ». Ambre en texte = AA sur les deux
 * fonds (accent-text). Jamais en dégradé seul (le dégradé casse le contraste). */
.wolf-signature {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wolf-space-2);
  margin: var(--wolf-space-6) 0 0;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-medium);
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-accent-text);
}
.wolf-signature::before {
  content: "";
  align-self: center;
  width: var(--wolf-space-5);
  height: var(--wolf-border-thick);
  background: var(--wolf-color-accent);
}

/* --- Transmutation : le plomb devient l'or --------------------------------- */
.wolf-transmute {
  display: grid;
  gap: var(--wolf-space-4);
  align-items: stretch;
  margin: var(--wolf-space-8) 0 0;
  grid-template-columns: 1fr auto 1fr;
}
@media (max-width: 640px) {
  .wolf-transmute { grid-template-columns: 1fr; }
  .wolf-transmute__arrow { transform: rotate(90deg); justify-self: center; }
}
.wolf-transmute__pole {
  padding: var(--wolf-space-6);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
  background: var(--wolf-color-surface);
}
.wolf-transmute__pole--gold {
  border-color: var(--wolf-color-accent-line);
  background: var(--wolf-color-accent-soft);
}
.wolf-transmute__label {
  margin: 0 0 var(--wolf-space-2);
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wider);
  color: var(--wolf-color-text-subtle);
}
.wolf-transmute__pole--gold .wolf-transmute__label { color: var(--wolf-color-accent-text); }
.wolf-transmute__word {
  margin: 0;
  font-family: var(--wolf-font-display);
  font-size: var(--wolf-text-2xl);
  font-weight: var(--wolf-weight-bold);
  color: var(--wolf-color-text);
}
.wolf-transmute__arrow {
  align-self: center;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xl);
  color: var(--wolf-color-accent);
}

/* --- Secteurs & métiers : jetons ------------------------------------------- */
.wolf-sectors {
  list-style: none;
  margin: var(--wolf-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolf-space-2);
}
.wolf-sectors__item {
  display: inline-flex;
  align-items: center;
  padding: var(--wolf-space-1) var(--wolf-space-3);
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-text-muted);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border-strong);
  border-radius: var(--wolf-radius-pill);
}

/* --- Exemples d'expérience (soft skills) : liste cochée -------------------- */
.wolf-xp {
  list-style: none;
  margin: var(--wolf-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--wolf-space-3);
}
.wolf-xp__item {
  position: relative;
  padding-inline-start: var(--wolf-space-8);
  color: var(--wolf-color-text-muted);
}
.wolf-xp__item::before {
  content: "→";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-family: var(--wolf-font-mono);
  color: var(--wolf-color-accent-text);
}

/* --- Encadré RGPD (choix optionnel) ---------------------------------------- */
.wolf-optin {
  margin: var(--wolf-space-8) 0 0;
  padding: var(--wolf-space-6);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-inline-start: var(--wolf-border-heavy) solid var(--wolf-color-accent);
  border-radius: var(--wolf-radius-md);
  background: var(--wolf-color-bg-elevated);
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-sm);
}