/* ============================================================================
   Wolf Pack — vitrine & fiche publique. Composants (consomme wolf-tokens.css).
   Dark-first, sobre/industriel. WCAG : focus visible, contrastes AA, cibles
   tactiles ≥ 44px, respect de prefers-reduced-motion (via les tokens).
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wolf-color-bg);
  color: var(--wolf-color-text);
  font-family: var(--wolf-font-body);
  font-size: var(--wolf-text-base);
  line-height: var(--wolf-leading-normal);
}

a { color: var(--wolf-color-accent-text); }
a:hover { color: var(--wolf-color-accent-hover); }

/* Focus visible — anneau non ambigu partout (a11y) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wolf-color-focus);
  outline-offset: 2px;
  border-radius: var(--wolf-radius-sm);
}

/* Lien d'évitement */
.wolf-skip {
  position: absolute;
  left: var(--wolf-space-2);
  top: -3rem;
  z-index: var(--wolf-z-toast);
  background: var(--wolf-color-accent);
  color: var(--wolf-color-accent-contrast);
  padding: var(--wolf-space-2) var(--wolf-space-4);
  font-weight: var(--wolf-weight-semibold);
  transition: top var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-skip:focus { top: var(--wolf-space-2); }

.wolf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.wolf-container {
  width: 100%;
  max-width: var(--wolf-container-max);
  margin-inline: auto;
  padding-inline: var(--wolf-container-pad);
}

/* ---------------------------------------------------------------- En-tête -- */
.wolf-header {
  position: sticky; top: 0; z-index: var(--wolf-z-header);
  background: color-mix(in srgb, var(--wolf-color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-header__bar {
  max-width: var(--wolf-container-wide);
  margin-inline: auto;
  padding: var(--wolf-space-3) var(--wolf-container-pad);
  display: flex; align-items: center; gap: var(--wolf-space-6);
  flex-wrap: wrap;
}
.wolf-brand {
  display: inline-flex; align-items: center; gap: var(--wolf-space-2);
  text-decoration: none; color: var(--wolf-color-text);
}
.wolf-brand__mark { color: var(--wolf-color-accent); flex: none; }
.wolf-brand__name {
  font-family: var(--wolf-font-display);
  font-weight: var(--wolf-weight-bold);
  letter-spacing: var(--wolf-tracking-tight);
  font-size: var(--wolf-text-lg);
}
.wolf-brand__tagline {
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-subtle);
  border-left: var(--wolf-border-hairline) solid var(--wolf-color-border-strong);
  padding-left: var(--wolf-space-2);
}
.wolf-nav { margin-inline-start: auto; }
.wolf-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--wolf-space-1); flex-wrap: wrap;
}
.wolf-nav__link {
  display: inline-block;
  padding: var(--wolf-space-2) var(--wolf-space-3);
  color: var(--wolf-color-text-muted);
  text-decoration: none;
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-medium);
}
.wolf-nav__link:hover { color: var(--wolf-color-text); }
.wolf-nav__link.is-current {
  color: var(--wolf-color-text);
  box-shadow: inset 0 -2px 0 var(--wolf-color-accent);
}
.wolf-langs { display: flex; gap: var(--wolf-space-1); }
.wolf-langs__link {
  padding: var(--wolf-space-1) var(--wolf-space-2);
  font-size: var(--wolf-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wide);
  text-decoration: none;
  color: var(--wolf-color-text-subtle);
  border: var(--wolf-border-hairline) solid transparent;
}
.wolf-langs__link:hover { color: var(--wolf-color-text); }
.wolf-langs__link.is-current {
  color: var(--wolf-color-accent-text);
  border-color: var(--wolf-color-accent-line);
}

.wolf-main { display: block; padding-block-end: var(--wolf-space-24); }

/* ------------------------------------------------------------------ Hero -- */
.wolf-hero {
  background: var(--wolf-gradient-hero);
  border-bottom: var(--wolf-border-hairline) solid var(--wolf-color-border);
  padding-block: var(--wolf-space-16);
}
.wolf-hero--slim { padding-block: var(--wolf-space-12); }
.wolf-eyebrow {
  font-family: var(--wolf-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wider);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-accent-text);
  margin: 0 0 var(--wolf-space-2);
}
.wolf-hero__title {
  font-family: var(--wolf-font-display);
  font-weight: var(--wolf-weight-bold);
  letter-spacing: var(--wolf-tracking-tight);
  line-height: var(--wolf-leading-tight);
  font-size: clamp(var(--wolf-text-3xl), 5vw, var(--wolf-text-5xl));
  margin: 0 0 var(--wolf-space-4);
}
.wolf-hero__lead {
  max-width: 60ch;
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-md);
  margin: 0;
}

/* --------------------------------------------------------------- Filtres -- */
.wolf-filters { margin-block: var(--wolf-space-10) var(--wolf-space-6); }
.wolf-filters__set {
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  background: var(--wolf-color-surface);
  padding: var(--wolf-space-4);
  margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--wolf-space-4);
  align-items: end;
}
.wolf-field { display: flex; flex-direction: column; gap: var(--wolf-space-1); min-width: 12rem; }
.wolf-field--grow { flex: 1 1 18rem; }
.wolf-label {
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-medium);
  color: var(--wolf-color-text-muted);
}
.wolf-input {
  font: inherit;
  color: var(--wolf-color-text);
  background: var(--wolf-color-field-bg);
  border: var(--wolf-border-hairline) solid var(--wolf-color-field-border);
  border-radius: var(--wolf-radius-md);
  padding: var(--wolf-space-2) var(--wolf-space-3);
  min-height: 2.75rem;
}
.wolf-input::placeholder { color: var(--wolf-color-placeholder); }
.wolf-filters__actions { display: flex; gap: var(--wolf-space-2); align-items: end; }

/* --------------------------------------------------------------- Boutons -- */
.wolf-btn {
  display: inline-flex; align-items: center; gap: var(--wolf-space-2);
  min-height: 2.75rem;
  padding: var(--wolf-space-2) var(--wolf-space-5);
  font: inherit; font-weight: var(--wolf-weight-semibold);
  text-decoration: none; cursor: pointer;
  border: var(--wolf-border-hairline) solid transparent;
  border-radius: var(--wolf-radius-md);
  transition: background var(--wolf-duration-fast) var(--wolf-ease),
              color var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-btn--accent {
  background: var(--wolf-color-accent);
  color: var(--wolf-color-accent-contrast);
}
.wolf-btn--accent:hover { background: var(--wolf-color-accent-hover); color: var(--wolf-color-accent-contrast); }
.wolf-btn--ghost {
  background: transparent;
  color: var(--wolf-color-text);
  border-color: var(--wolf-color-border-strong);
}
.wolf-btn--ghost:hover { border-color: var(--wolf-color-accent-line); color: var(--wolf-color-text); }

.wolf-results-count {
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-sm);
  margin-block: var(--wolf-space-4);
}
.wolf-empty {
  padding: var(--wolf-space-12);
  text-align: center;
  color: var(--wolf-color-text-muted);
  border: var(--wolf-border-hairline) dashed var(--wolf-color-border-strong);
}

/* --------------------------------------------------------- Grille cartes -- */
.wolf-grid { list-style: none; margin: 0; padding: 0; }
.wolf-cards {
  display: grid;
  gap: var(--wolf-space-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.wolf-card {
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  background: var(--wolf-color-surface);
  transition: border-color var(--wolf-duration-fast) var(--wolf-ease),
              transform var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-card:hover { border-color: var(--wolf-color-border-strong); transform: translateY(-2px); }
.wolf-card__body {
  padding: var(--wolf-space-5);
  display: flex; flex-direction: column; gap: var(--wolf-space-3);
  height: 100%;
}
.wolf-card__head { display: flex; gap: var(--wolf-space-3); align-items: flex-start; }
.wolf-avatar {
  flex: none;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--wolf-color-accent-soft);
  color: var(--wolf-color-accent-text);
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  font-family: var(--wolf-font-display);
  font-weight: var(--wolf-weight-bold);
  font-size: var(--wolf-text-md);
}
.wolf-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: var(--wolf-text-xl); }
.wolf-card__id { min-width: 0; }
.wolf-card__name {
  font-family: var(--wolf-font-display);
  font-size: var(--wolf-text-md);
  font-weight: var(--wolf-weight-semibold);
  margin: 0 0 var(--wolf-space-1);
  display: flex; align-items: center; gap: var(--wolf-space-2);
}
.wolf-card__metier { margin: 0; color: var(--wolf-color-accent-text); font-size: var(--wolf-text-sm); }
.wolf-card__meta { margin: var(--wolf-space-1) 0 0; color: var(--wolf-color-text-subtle); font-size: var(--wolf-text-sm); }
.wolf-dot { margin-inline: var(--wolf-space-1); }
.wolf-card__bio { margin: 0; color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); }

/* Nom masqué (public) : effet « flouté » PUREMENT décoratif — la donnée réelle
   n'est jamais dans le HTML ; on floute un nom d'usage non identifiant. */
.wolf-name-masked {
  filter: blur(4px);
  user-select: none;
  color: var(--wolf-color-text-subtle);
}
.wolf-lock { color: var(--wolf-color-accent-text); display: inline-flex; }

/* Tags / chips */
.wolf-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wolf-space-2); }
.wolf-tag {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wide);
  padding: var(--wolf-space-1) var(--wolf-space-2);
  background: var(--wolf-color-surface-2);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  color: var(--wolf-color-text-muted);
  border-radius: var(--wolf-radius-pill);
}
.wolf-tag--soft, .wolf-tags--soft .wolf-tag { background: transparent; color: var(--wolf-color-text-subtle); }

.wolf-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--wolf-space-2);
  font-weight: var(--wolf-weight-semibold);
  text-decoration: none;
  padding-block: var(--wolf-space-2);
}
.wolf-card__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ Pagination -- */
.wolf-pager { margin-top: var(--wolf-space-10); }
.wolf-pager__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--wolf-space-1); align-items: center;
}
.wolf-pager__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: var(--wolf-space-2) var(--wolf-space-3);
  text-decoration: none;
  color: var(--wolf-color-text-muted);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  background: var(--wolf-color-surface);
}
.wolf-pager__link:hover { color: var(--wolf-color-text); border-color: var(--wolf-color-border-strong); }
.wolf-pager__link.is-current {
  color: var(--wolf-color-accent-contrast);
  background: var(--wolf-color-accent);
  border-color: var(--wolf-color-accent);
  font-weight: var(--wolf-weight-bold);
}
.wolf-pager__status { margin-top: var(--wolf-space-3); color: var(--wolf-color-text-subtle); font-size: var(--wolf-text-sm); }

/* --------------------------------------------------------------- Fiche ---- */
.wolf-profil { padding-block-start: var(--wolf-space-10); }
.wolf-back { margin: 0 0 var(--wolf-space-6); }
.wolf-back a { text-decoration: none; font-weight: var(--wolf-weight-medium); }
.wolf-back a:hover { text-decoration: underline; }
.wolf-profil__card {
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  background: var(--wolf-color-surface);
  padding: var(--wolf-space-8);
}
.wolf-profil__head {
  display: flex; gap: var(--wolf-space-5); align-items: center;
  padding-bottom: var(--wolf-space-6);
  border-bottom: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-profil__name {
  font-family: var(--wolf-font-display);
  font-size: clamp(var(--wolf-text-2xl), 4vw, var(--wolf-text-4xl));
  margin: var(--wolf-space-1) 0;
  line-height: var(--wolf-leading-tight);
}
.wolf-profil__meta { display: flex; flex-wrap: wrap; gap: var(--wolf-space-3); align-items: center; margin: var(--wolf-space-2) 0 0; color: var(--wolf-color-text-muted); }
.wolf-profil__grid {
  display: grid; gap: var(--wolf-space-8);
  grid-template-columns: 1fr;
  padding-top: var(--wolf-space-6);
}
@media (min-width: 52rem) {
  .wolf-profil__grid { grid-template-columns: 2fr 1fr; }
}
.wolf-profil__section { margin-bottom: var(--wolf-space-8); }
.wolf-h3 {
  font-family: var(--wolf-font-display);
  font-size: var(--wolf-text-lg);
  margin: 0 0 var(--wolf-space-3);
  padding-bottom: var(--wolf-space-2);
  border-bottom: var(--wolf-border-hairline) solid var(--wolf-color-border);
}

/* Badges & disponibilité */
.wolf-badge {
  display: inline-flex; align-items: center; gap: var(--wolf-space-1);
  font-size: var(--wolf-text-xs);
  padding: var(--wolf-space-1) var(--wolf-space-2);
  border-radius: var(--wolf-radius-pill);
  font-weight: var(--wolf-weight-medium);
}
.wolf-badge--ok { background: var(--wolf-color-success-soft); color: var(--wolf-color-success); }
.wolf-badge--lock { background: var(--wolf-color-accent-soft); color: var(--wolf-color-accent-text); }

/* Timeline parcours */
.wolf-timeline { list-style: none; margin: 0; padding: 0; }
.wolf-timeline__item {
  padding-left: var(--wolf-space-5);
  border-left: var(--wolf-border-thick) solid var(--wolf-color-accent-line);
  margin-bottom: var(--wolf-space-5);
}
.wolf-timeline__when { font-family: var(--wolf-font-mono); font-size: var(--wolf-text-xs); color: var(--wolf-color-text-subtle); margin: 0; }
.wolf-timeline__title { font-size: var(--wolf-text-md); margin: var(--wolf-space-1) 0; }
.wolf-timeline__detail { margin: 0; color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); }

/* Panneau contact + liste de définitions */
.wolf-panel {
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  background: var(--wolf-color-bg-elevated);
  padding: var(--wolf-space-5);
  position: sticky; top: 5rem;
}
.wolf-deflist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--wolf-space-2) var(--wolf-space-4); }
.wolf-deflist dt { color: var(--wolf-color-text-subtle); font-size: var(--wolf-text-sm); }
.wolf-deflist dd { margin: 0; word-break: break-word; }
.wolf-panel__cv { margin: var(--wolf-space-5) 0 0; }

/* Appel à l'action « Devenez client » (fiche floutée) */
.wolf-cta-lock {
  margin-block: var(--wolf-space-6);
  padding: var(--wolf-space-6);
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  background: var(--wolf-color-accent-soft);
}
.wolf-cta-lock__title { font-family: var(--wolf-font-display); font-size: var(--wolf-text-xl); margin: var(--wolf-space-2) 0; }
.wolf-cta-lock__text { color: var(--wolf-color-text-muted); max-width: 60ch; }
.wolf-cta-lock__actions { margin-block: var(--wolf-space-4); }
.wolf-cta-lock__why summary { cursor: pointer; color: var(--wolf-color-accent-text); font-weight: var(--wolf-weight-medium); }
.wolf-cta-lock__why p { color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); max-width: 60ch; }

.wolf-notice { padding-block: var(--wolf-space-16); }
.wolf-notice h1 { margin-top: 0; }

/* ------------------------------------------------------------- Pied ------- */
.wolf-footer {
  border-top: var(--wolf-border-hairline) solid var(--wolf-color-border);
  background: var(--wolf-color-surface-inset);
  padding-block: var(--wolf-space-12);
}
.wolf-footer__inner {
  max-width: var(--wolf-container-max);
  margin-inline: auto;
  padding-inline: var(--wolf-container-pad);
  display: flex; flex-direction: column; gap: var(--wolf-space-4);
}
.wolf-footer__note { color: var(--wolf-color-text-muted); max-width: 60ch; margin: 0; }
.wolf-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wolf-space-5); }
.wolf-footer__nav a { color: var(--wolf-color-text-muted); text-decoration: none; }
.wolf-footer__nav a:hover { color: var(--wolf-color-text); text-decoration: underline; }
.wolf-footer__privacy, .wolf-footer__rights { color: var(--wolf-color-text-subtle); font-size: var(--wolf-text-sm); margin: 0; max-width: 70ch; }

/* Le flou décoratif reste, mais sans mouvement pour les préférences réduites. */
@media (prefers-reduced-motion: reduce) {
  .wolf-card:hover { transform: none; }
}