/* ============================================================================
   W.O.L.F. — Composants de base
   Agence alexandalex.fr. S'appuie EXCLUSIVEMENT sur wolf-tokens.css.
   Aucune valeur codée en dur : tout passe par les variables --wolf-*.
   Réutilisable tel quel pour construire le futur site.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. RESET & BASE
   --------------------------------------------------------------------------- */
*, *::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);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wolf-font-display);
  font-weight: var(--wolf-weight-bold);
  line-height: var(--wolf-leading-tight);
  letter-spacing: var(--wolf-tracking-tight);
  margin: 0 0 var(--wolf-space-4);
  color: var(--wolf-color-text);
}
h1 { font-size: var(--wolf-text-5xl); letter-spacing: var(--wolf-tracking-tighter); }
h2 { font-size: var(--wolf-text-3xl); }
h3 { font-size: var(--wolf-text-2xl); }
h4 { font-size: var(--wolf-text-xl); }
h5 { font-size: var(--wolf-text-lg); }
h6 { font-size: var(--wolf-text-base); text-transform: uppercase; letter-spacing: var(--wolf-tracking-wider); }

p { margin: 0 0 var(--wolf-space-4); }

a {
  color: var(--wolf-color-accent-text);
  text-decoration-color: var(--wolf-color-accent-line);
  text-underline-offset: 0.18em;
  transition: color var(--wolf-duration-fast) var(--wolf-ease);
}
a:hover { color: var(--wolf-color-accent-hover); }

::selection { background: var(--wolf-color-accent); color: var(--wolf-color-accent-contrast); }

hr {
  border: 0;
  border-top: var(--wolf-border-hairline) solid var(--wolf-color-border);
  margin: var(--wolf-space-8) 0;
}

code, kbd, samp { font-family: var(--wolf-font-mono); font-size: 0.92em; }

/* Focus visible GLOBAL — a11y : anneau ambre + halo, jamais supprimé sans remplacement */
:focus-visible {
  outline: var(--wolf-border-thick) solid var(--wolf-color-focus);
  outline-offset: 2px;
  border-radius: var(--wolf-radius-sm);
}

/* Lien d'évitement (à réutiliser en tête de futures pages) */
.wolf-skip-link {
  position: absolute;
  left: var(--wolf-space-4);
  top: -100%;
  z-index: var(--wolf-z-toast);
  padding: var(--wolf-space-2) var(--wolf-space-4);
  background: var(--wolf-color-accent);
  color: var(--wolf-color-accent-contrast);
  border-radius: var(--wolf-radius-md);
  font-weight: var(--wolf-weight-semibold);
  transition: top var(--wolf-duration-normal) var(--wolf-ease);
}
.wolf-skip-link:focus { top: var(--wolf-space-4); }

/* ---------------------------------------------------------------------------
   1. MISE EN PAGE
   --------------------------------------------------------------------------- */
.wolf-container {
  width: 100%;
  max-width: var(--wolf-container-max);
  margin-inline: auto;
  padding-inline: var(--wolf-container-pad);
}
.wolf-container--wide { max-width: var(--wolf-container-wide); }

.wolf-stack > * + * { margin-top: var(--wolf-space-4); }
.wolf-cluster { display: flex; flex-wrap: wrap; gap: var(--wolf-space-3); align-items: center; }

/* ---------------------------------------------------------------------------
   2. EYEBROW / LABEL — libellé mono en capitales (usage : sur-titres, kickers)
   --------------------------------------------------------------------------- */
.wolf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-2);
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  font-weight: var(--wolf-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wider);
  color: var(--wolf-color-accent-text);
}
.wolf-eyebrow::before {
  content: "";
  width: var(--wolf-space-6);
  height: var(--wolf-border-thick);
  background: var(--wolf-color-accent);
}

/* ---------------------------------------------------------------------------
   3. LOGOTYPE
   --------------------------------------------------------------------------- */
.wolf-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-3);
  text-decoration: none;
  color: var(--wolf-color-text);
}
.wolf-logo__mark {
  width: 34px;
  height: 34px;
  color: var(--wolf-color-accent);   /* le SVG hérite via currentColor */
  flex: none;
}
.wolf-logo__word {
  font-family: var(--wolf-font-display);
  font-weight: var(--wolf-weight-bold);
  font-size: var(--wolf-text-lg);
  letter-spacing: 0.14em;
  line-height: 1;
}
.wolf-logo__word .wolf-logo__dot { color: var(--wolf-color-accent); }
.wolf-logo__sub {
  display: block;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  font-weight: var(--wolf-weight-regular);
  letter-spacing: var(--wolf-tracking-wider);
  text-transform: uppercase;
  color: var(--wolf-color-text-subtle);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   4. NAVIGATION / EN-TÊTE
   --------------------------------------------------------------------------- */
.wolf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wolf-space-6);
  /* En-tête sobre et compact : aplat charbon plein (pas de flou décoratif), filet net. */
  padding: var(--wolf-space-3) var(--wolf-container-pad);
  background: var(--wolf-color-bg);
  border-bottom: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-nav { display: flex; align-items: center; gap: var(--wolf-space-6); }
.wolf-nav__link {
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-medium);
  color: var(--wolf-color-text-muted);
  text-decoration: none;
  padding: var(--wolf-space-2) 0;
  position: relative;
  transition: color var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-nav__link:hover,
.wolf-nav__link[aria-current="page"] { color: var(--wolf-color-text); }
.wolf-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: var(--wolf-border-thick);
  background: var(--wolf-color-accent);
}

/* ---------------------------------------------------------------------------
   5. BOUTONS
   --------------------------------------------------------------------------- */
.wolf-btn {
  --_pad-y: var(--wolf-space-3);
  --_pad-x: var(--wolf-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wolf-space-2);
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--wolf-font-body);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-semibold);
  letter-spacing: var(--wolf-tracking-wide);
  line-height: 1;
  border: var(--wolf-border-thick) solid transparent;
  border-radius: var(--wolf-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--wolf-duration-fast) var(--wolf-ease),
              border-color var(--wolf-duration-fast) var(--wolf-ease),
              color var(--wolf-duration-fast) var(--wolf-ease),
              transform var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-btn:active { transform: translateY(1px); }
.wolf-btn:disabled,
.wolf-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Tailles */
.wolf-btn--sm { --_pad-y: var(--wolf-space-2); --_pad-x: var(--wolf-space-4); font-size: var(--wolf-text-xs); }
.wolf-btn--lg { --_pad-y: var(--wolf-space-4); --_pad-x: var(--wolf-space-8); font-size: var(--wolf-text-base); }

/* Primaire — ambre plein, texte anthracite (contraste ~9.3:1) */
.wolf-btn--primary {
  background: var(--wolf-color-accent);
  color: var(--wolf-color-accent-contrast);
  border-color: var(--wolf-color-accent);
}
.wolf-btn--primary:hover { background: var(--wolf-color-accent-hover); border-color: var(--wolf-color-accent-hover); }
.wolf-btn--primary:active { background: var(--wolf-color-accent-press); border-color: var(--wolf-color-accent-press); }

/* Secondaire — contour, fond transparent */
.wolf-btn--secondary {
  background: transparent;
  color: var(--wolf-color-text);
  border-color: var(--wolf-color-border-strong);
}
.wolf-btn--secondary:hover { border-color: var(--wolf-color-accent); color: var(--wolf-color-accent-text); }

/* Fantôme — minimal */
.wolf-btn--ghost {
  background: transparent;
  color: var(--wolf-color-text-muted);
  border-color: transparent;
}
.wolf-btn--ghost:hover { background: var(--wolf-color-surface-2); color: var(--wolf-color-text); }

/* Danger */
.wolf-btn--danger {
  background: transparent;
  color: var(--wolf-color-danger);
  border-color: var(--wolf-color-danger);
}
.wolf-btn--danger:hover { background: var(--wolf-color-danger-soft); }

/* ---------------------------------------------------------------------------
   6. CARTES / ENCARTS & MOSAÏQUE
   --------------------------------------------------------------------------- */
.wolf-card {
  background: var(--wolf-color-surface);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
  padding: var(--wolf-space-6);
  transition: border-color var(--wolf-duration-normal) var(--wolf-ease),
              transform var(--wolf-duration-normal) var(--wolf-ease),
              box-shadow var(--wolf-duration-normal) var(--wolf-ease);
}
.wolf-card--interactive { cursor: pointer; }
.wolf-card--interactive:hover {
  border-color: var(--wolf-color-accent-line);
  transform: translateY(-1px);
  box-shadow: var(--wolf-shadow-md);
}
.wolf-card__title { font-family: var(--wolf-font-display); font-size: var(--wolf-text-lg); margin: var(--wolf-space-3) 0 var(--wolf-space-2); }
.wolf-card__text { color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); margin: 0; }

/* Mosaïque : grille responsive « masonry-like » régulière */
.wolf-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--wolf-grid-gutter);
}
.wolf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 180px;
  padding: var(--wolf-space-5);
  /* Îlot « média » toujours sombre (scrim cinématique) : les tuiles gardent un
     traitement foncé dans les DEUX thèmes. On redéfinit localement les tokens
     de couleur pour que le contenu reste lisible même en thème clair (a11y). */
  --wolf-color-text:          var(--wolf-ink-050);
  --wolf-color-text-muted:    var(--wolf-ink-200);
  --wolf-color-accent:        var(--wolf-amber-500);
  --wolf-color-accent-text:   var(--wolf-amber-400);
  --wolf-color-surface-2:     var(--wolf-ink-750);
  --wolf-color-border:        var(--wolf-ink-700);
  --wolf-color-border-strong: var(--wolf-ink-600);
  --wolf-color-success:       var(--wolf-green-500);
  --wolf-color-success-soft:  rgba(61, 214, 140, 0.16);
  color: var(--wolf-ink-050);
  /* Aplat charbon plein — pas de dégradé gratuit. Le scrim n'apparaît que sur
     les tuiles à média (.wolf-tile--media), où il reste fonctionnel (lisibilité). */
  background: var(--wolf-ink-850);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
  overflow: hidden;
  transition: border-color var(--wolf-duration-normal) var(--wolf-ease),
              transform var(--wolf-duration-normal) var(--wolf-ease);
}
.wolf-tile:hover { border-color: var(--wolf-color-accent-line); transform: translateY(-1px); }
.wolf-tile__eyebrow { margin-bottom: var(--wolf-space-2); }
.wolf-tile__title { font-family: var(--wolf-font-display); font-size: var(--wolf-text-xl); margin: 0; }
.wolf-tile__meta { display: flex; gap: var(--wolf-space-2); margin-top: var(--wolf-space-3); }
.wolf-tile--tall { min-height: 320px; }

/* ---------------------------------------------------------------------------
   7. BADGES
   --------------------------------------------------------------------------- */
.wolf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-1);
  padding: 0.28em 0.7em;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  font-weight: var(--wolf-weight-medium);
  letter-spacing: var(--wolf-tracking-wide);
  line-height: 1;
  border-radius: var(--wolf-radius-sm);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border-strong);
  color: var(--wolf-color-text-muted);
  background: var(--wolf-color-surface-2);
  white-space: nowrap;
}
.wolf-badge--accent   { color: var(--wolf-color-accent-text);  border-color: var(--wolf-color-accent-line); background: var(--wolf-color-accent-soft); }
.wolf-badge--success  { color: var(--wolf-color-success); border-color: color-mix(in srgb, var(--wolf-color-success) 45%, transparent); background: var(--wolf-color-success-soft); }
.wolf-badge--danger   { color: var(--wolf-color-danger);  border-color: color-mix(in srgb, var(--wolf-color-danger) 45%, transparent);  background: var(--wolf-color-danger-soft); }
.wolf-badge--info     { color: var(--wolf-color-info);    border-color: color-mix(in srgb, var(--wolf-color-info) 45%, transparent);    background: var(--wolf-color-info-soft); }
.wolf-badge--solid    { color: var(--wolf-color-accent-contrast); background: var(--wolf-color-accent); border-color: var(--wolf-color-accent); }

/* Badge timecode « 1:15–1:50 » : tabular-nums pour l'alignement */
.wolf-badge--timecode { font-variant-numeric: tabular-nums; }

/* Mention de droits « © » */
.wolf-badge--copyright { text-transform: none; letter-spacing: var(--wolf-tracking-normal); }

/* ---------------------------------------------------------------------------
   8. CHAMPS DE FORMULAIRE
   --------------------------------------------------------------------------- */
.wolf-field { display: flex; flex-direction: column; gap: var(--wolf-space-2); }
.wolf-label {
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-medium);
  color: var(--wolf-color-text);
}
.wolf-label__req { color: var(--wolf-color-accent-text); margin-inline-start: 2px; }

.wolf-input, .wolf-textarea, .wolf-select {
  width: 100%;
  padding: var(--wolf-space-3) var(--wolf-space-4);
  font-family: var(--wolf-font-body);
  font-size: var(--wolf-text-base);
  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);
  transition: border-color var(--wolf-duration-fast) var(--wolf-ease),
              box-shadow var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-textarea { min-height: 120px; resize: vertical; }
.wolf-input::placeholder, .wolf-textarea::placeholder { color: var(--wolf-color-placeholder); }
.wolf-input:focus-visible, .wolf-textarea:focus-visible, .wolf-select:focus-visible {
  outline: none;
  border-color: var(--wolf-color-focus);
  box-shadow: 0 0 0 3px var(--wolf-color-focus-halo);
}
.wolf-input[aria-invalid="true"], .wolf-textarea[aria-invalid="true"] {
  border-color: var(--wolf-color-danger);
}
.wolf-help  { font-size: var(--wolf-text-xs); color: var(--wolf-color-text-subtle); }
.wolf-error { font-size: var(--wolf-text-xs); color: var(--wolf-color-danger); }

/* ---------------------------------------------------------------------------
   9. UTILITAIRES visuellement masqués (a11y) — labels pour lecteurs d'écran
   --------------------------------------------------------------------------- */
.wolf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   10. RESPONSIVE — points de rupture principaux
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  h1 { font-size: var(--wolf-text-4xl); }
  h2 { font-size: var(--wolf-text-2xl); }
  .wolf-header { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   11. LICENCE & EXERGUES (charte AGPL) — signature morale open source
   --------------------------------------------------------------------------- */
/* Bouton de section centré (lien licence / texte AGPL). */
.wolf-section__cta { margin-top: var(--wolf-space-6); }

/* Lien de licence dans le pied de page (tampon AGPL + mention charte). */
.wolf-footer__license {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-2);
  margin-top: var(--wolf-space-2);
  text-decoration: none;
  color: var(--wolf-color-text-muted);
}
.wolf-footer__license:hover .wolf-footer__license-text { color: var(--wolf-color-text); }
.wolf-footer__license-text {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  letter-spacing: var(--wolf-tracking-wide);
}

/* Encart des deux exergues sacrées — présence forte, sobre et digne. */
.wolf-exergues__eyebrow { display: block; text-align: center; margin-bottom: var(--wolf-space-6); }
.wolf-exergues__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wolf-space-5);
}
.wolf-exergue {
  position: relative;
  margin: 0;
  padding: var(--wolf-space-8) var(--wolf-space-6);
  text-align: center;
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  border-radius: var(--wolf-radius-lg);
  background: var(--wolf-color-accent-soft);
}
.wolf-exergue__glyph {
  display: block;
  font-size: var(--wolf-text-2xl);
  color: var(--wolf-color-accent-text);
  margin-bottom: var(--wolf-space-4);
  line-height: 1;
}
.wolf-exergue__quote {
  margin: 0 0 var(--wolf-space-4);
  font-family: var(--wolf-font-display);
  font-size: var(--wolf-text-xl);
  line-height: 1.4;
  color: var(--wolf-color-text);
  text-wrap: balance;
}
.wolf-exergue__cite {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-text-muted);
}
@media (max-width: 720px) {
  .wolf-exergues__grid { grid-template-columns: minmax(0, 1fr); }
}

/* TAMPON « ETHICS AS CODE » — styles déplacés 100% INLINE dans inc/header.php
   (immunité au cache CDN Gandi). Plus aucune règle .wolf-tampon-ethics ici. */