/* ============================================================================
   W.O.L.F. — Habillage du SOCLE (T2).
   Complète wolf-tokens.css + wolf-components.css. Consomme UNIQUEMENT les
   variables --wolf-* : aucune valeur codée en dur (hors media-queries).
   Contient : en-tête de site, sélecteur de langue, pied de page, hero,
   sections, et le MOTEUR DE MOSAÏQUE dense (« zéro blanc »).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. STRUCTURE GÉNÉRALE
   --------------------------------------------------------------------------- */
.wolf-site-header {
  position: sticky;
  top: 0;
  z-index: var(--wolf-z-header);
}
.wolf-header__end {
  display: flex;
  align-items: center;
  gap: var(--wolf-space-6);
}
.wolf-main { display: block; }
.wolf-main:focus { outline: none; }

/* ---------------------------------------------------------------------------
   2. SÉLECTEUR DE LANGUE (bouton drapeau + menu déroulant natif <details>)
   --------------------------------------------------------------------------- */
.wolf-langswitch { position: relative; display: inline-flex; align-items: center; gap: var(--wolf-space-2); }
.wolf-langswitch__direct { display: inline-flex; gap: var(--wolf-space-1, 4px); }

.wolf-langswitch__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-2);
  padding: var(--wolf-space-2) var(--wolf-space-3);
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  font-weight: var(--wolf-weight-medium);
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-text-muted);
  text-decoration: none;
  background: var(--wolf-color-surface-2);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
  cursor: pointer;
  list-style: none;                 /* masque le marqueur de <summary> */
  transition: border-color var(--wolf-duration-fast) var(--wolf-ease),
              color var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-langswitch__flag::-webkit-details-marker { display: none; }
.wolf-langswitch__flag:hover {
  color: var(--wolf-color-text);
  border-color: var(--wolf-color-accent-line);
}
/* Langue active mise en avant parmi les accès directs EN / FR. */
.wolf-langswitch__flag.is-current,
.wolf-langswitch__list a[aria-current="true"] {
  color: var(--wolf-color-accent-text);
  border-color: var(--wolf-color-accent-line);
}
.wolf-langswitch__emoji { font-size: 1.05em; line-height: 1; }

/* Petit chevron du bouton « Language ». */
.wolf-langswitch__chevron {
  width: 0; height: 0; margin-inline-start: 2px;
  border-inline: 3px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-langswitch__menu[open] .wolf-langswitch__chevron { transform: rotate(180deg); }

/* Menu déroulant (>2 langues) — repose sur l'élément natif <details>/<summary> */
.wolf-langswitch__menu { position: relative; }
.wolf-langswitch__list {
  position: absolute;
  top: calc(100% + var(--wolf-space-2));
  inset-inline-end: 0;
  min-width: 12rem;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--wolf-space-2);
  list-style: none;
  background: var(--wolf-color-bg-elevated);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
  box-shadow: var(--wolf-shadow-lg);
  z-index: var(--wolf-z-overlay);
}
.wolf-langswitch__list a {
  display: flex;
  align-items: center;
  gap: var(--wolf-space-3);
  padding: var(--wolf-space-2) var(--wolf-space-3);
  color: var(--wolf-color-text-muted);
  text-decoration: none;
  border-radius: var(--wolf-radius-sm);
  font-size: var(--wolf-text-sm);
}
.wolf-langswitch__list a:hover { background: var(--wolf-color-surface-2); color: var(--wolf-color-text); }
.wolf-langswitch__name { flex: 1 1 auto; }
.wolf-langswitch__tag {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-muted);
  letter-spacing: var(--wolf-tracking-wide);
}

/* ---------------------------------------------------------------------------
   3. BOUTON MENU MOBILE (masqué au-delà du point de rupture)
   --------------------------------------------------------------------------- */
.wolf-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
  cursor: pointer;
}
.wolf-nav-toggle__bar,
.wolf-nav-toggle__bar::before,
.wolf-nav-toggle__bar::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--wolf-color-text);
  transition: transform var(--wolf-duration-fast) var(--wolf-ease),
              opacity var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-nav-toggle__bar { position: relative; }
.wolf-nav-toggle__bar::before { position: absolute; top: -6px; }
.wolf-nav-toggle__bar::after  { position: absolute; top: 6px; }
.wolf-nav-toggle[aria-expanded="true"] .wolf-nav-toggle__bar { background: transparent; }
.wolf-nav-toggle[aria-expanded="true"] .wolf-nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.wolf-nav-toggle[aria-expanded="true"] .wolf-nav-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   4. HERO
   --------------------------------------------------------------------------- */
.wolf-hero {
  background: var(--wolf-gradient-hero);
  border-bottom: var(--wolf-border-hairline) solid var(--wolf-color-border);
  /* Hero resserré (96/64 → 48/40px) : moins de vide vertical, entrée plus dense. */
  padding-block: var(--wolf-space-12) var(--wolf-space-10);
}
.wolf-hero__title {
  font-size: clamp(2.5rem, 7vw, var(--wolf-text-6xl));
  max-width: 18ch;
  margin-top: var(--wolf-space-4);
}
.wolf-hero__subtitle {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-md);
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-accent-text);
  margin-top: var(--wolf-space-3);
}
.wolf-hero__lead {
  font-size: var(--wolf-text-lg);
  color: var(--wolf-color-text-muted);
  max-width: 56ch;
}
.wolf-hero__lead + .wolf-hero__lead { margin-top: var(--wolf-space-4); font-size: var(--wolf-text-base); }
.wolf-hero__actions { margin-top: var(--wolf-space-8); }
.wolf-hero--error { text-align: center; }
.wolf-hero--error .wolf-hero__title,
.wolf-hero--error .wolf-hero__lead { margin-inline: auto; }
.wolf-hero--error .wolf-hero__actions { justify-content: center; }

/* --- ACCUEIL — hero COMPACT, CENTRÉ + hiérarchie à 4 niveaux (nom / devise /
   intitulé / accroche). Collé au header (vide vertical réduit), tout centré et
   proportionné. Portée limitée à `.wolf-hero--home` : les autres heros intacts. --- */
.wolf-hero--home {
  /* Contenu collé EN HAUT : vide vertical divisé par ~3 vs le hero standard (96/64 → 32/24). */
  padding-block: var(--wolf-space-8) var(--wolf-space-6);
  text-align: center;
}
/* Chaque niveau est ramené sous une largeur de lecture et centré (boîte + texte). */
.wolf-hero--home .wolf-hero__title,
.wolf-hero--home .wolf-hero__motto,
.wolf-hero--home .wolf-hero__role,
.wolf-hero--home .wolf-hero__lead { margin-inline: auto; }
.wolf-hero--home .wolf-hero__badges,
.wolf-hero--home .wolf-hero__actions { justify-content: center; }
/* Niveau 1 — NOM (« Wolf Agency ») : réduit (~30→38px), visible mais pas démesuré. */
.wolf-hero--home .wolf-hero__title {
  font-size: clamp(1.875rem, 3.4vw, var(--wolf-text-3xl));
  max-width: 24ch;
  margin-top: var(--wolf-space-3);
}
/* Niveau 2 — DEVISE (« Help the world get better »), ambre, juste sous le nom. */
.wolf-hero--home .wolf-hero__motto {
  font-family: var(--wolf-font-display);
  font-size: var(--wolf-text-xl);
  font-weight: var(--wolf-weight-semibold);
  line-height: var(--wolf-leading-snug);
  color: var(--wolf-color-accent-text);
  margin-top: var(--wolf-space-2);
  max-width: 44ch;
}
/* Niveau 3 — INTITULÉ (Architect & Designer…), mono discret. */
.wolf-hero--home .wolf-hero__role {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-md);
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-text-muted);
  margin-top: var(--wolf-space-2);
  max-width: 52ch;
}
/* Niveau 4 — ACCROCHE : punchy, mesurée pour la lecture, centrée. */
.wolf-hero--home .wolf-hero__lead { font-size: var(--wolf-text-md); margin-top: var(--wolf-space-4); max-width: 62ch; }
.wolf-hero--home .wolf-hero__badges { margin-top: var(--wolf-space-4); }
.wolf-hero--home .wolf-hero__actions { margin-top: var(--wolf-space-6); }

/* ---------------------------------------------------------------------------
   5. SECTIONS
   --------------------------------------------------------------------------- */
/* Rythme vertical resserré, façon documentation technique (64 → 40px ; en-tête 40 → 24). */
.wolf-section { padding-block: var(--wolf-space-10); }
.wolf-section__head { max-width: 60ch; margin-bottom: var(--wolf-space-6); }
.wolf-section__head h2 { margin-top: var(--wolf-space-3); }
.wolf-section__lead { color: var(--wolf-color-text-muted); font-size: var(--wolf-text-md); }

/* ACCUEIL — sections encore plus denses (40 → 32px), en-têtes compacts. */
.wolf-section--home { padding-block: var(--wolf-space-8); }
.wolf-section--home .wolf-section__head { margin-bottom: var(--wolf-space-5); }

/* PRODUITS PHARES — section remontée JUSTE sous le hero : padding minimal (haut
   collé au hero) pour ne PAS rouvrir de vide, en-tête compact. Sans cette règle
   la section retomberait sur `.wolf-section` (64px) et recréerait le trou. */
.wolf-section--flagship { padding-block: var(--wolf-space-6) var(--wolf-space-10); }
.wolf-section--flagship .wolf-section__head { margin-bottom: var(--wolf-space-6); }
/* Deux cartes phares de TAILLE ÉGALE, côte à côte, hauteurs alignées : on quitte
   le mode colonnes « gazette » pour une vraie grille 2 colonnes (retombe à 1 sur
   mobile). Zéro blanc : les tuiles remplissent toute la hauteur de leur cellule. */
.wolf-flagship-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wolf-grid-gutter);
}
.wolf-flagship-grid .wolf-gazette__item { margin: 0; break-inside: auto; }
.wolf-flagship-grid .wolf-gazette__item > .wolf-tile { height: 100%; }
@media (max-width: 640px) {
  .wolf-flagship-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   6. MOTEUR DE MOSAÏQUE DENSE — « casse-tête », ZÉRO BLANC.
   Grille à colonnes égales + lignes de hauteur fixe. `grid-auto-flow: dense`
   comble automatiquement les interstices : quel que soit l'assortiment de
   tailles, aucune zone blanche ne subsiste. L'ordre du DOM reste l'ordre logique
   (les cellules sont des role="listitem" ; navigation clavier préservée).
   --------------------------------------------------------------------------- */
.wolf-mosaic--dense {
  display: grid;
  grid-template-columns: repeat(var(--wolf-mosaic-cols, 4), minmax(0, 1fr));
  grid-auto-rows: var(--wolf-mosaic-row, 156px);
  grid-auto-flow: dense;
  gap: var(--wolf-grid-gutter);
}
/* Nombre de colonnes du grand écran, via CLASSE (surchargée par les
   media-queries plus bas — ce qu'un style inline empêcherait). */
.wolf-mosaic--cols-2 { --wolf-mosaic-cols: 2; }
.wolf-mosaic--cols-3 { --wolf-mosaic-cols: 3; }
.wolf-mosaic--cols-4 { --wolf-mosaic-cols: 4; }
/* Cellule = enfant direct de la grille ; porte la portée (span). */
.wolf-mosaic__cell { display: flex; }
.wolf-mosaic__cell[data-col="2"] { grid-column: span 2; }
.wolf-mosaic__cell[data-row="2"] { grid-row: span 2; }
/* La tuile remplit toute sa cellule → pas de blanc interne. */
.wolf-mosaic__cell > .wolf-tile { flex: 1; width: 100%; }

/* Image de fond décorative optionnelle (scrim déjà géré par .wolf-tile). */
.wolf-tile--media {
  background-image:
    linear-gradient(180deg, transparent 20%, rgba(6, 7, 8, 0.9)),
    var(--wolf-tile-media);
  background-size: cover;
  background-position: center;
}
/* Encart mis en avant : filet ambre. */
.wolf-tile--accent { border-color: var(--wolf-color-accent-line); box-shadow: var(--wolf-shadow-glow); }
.wolf-tile__text { color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); margin-top: var(--wolf-space-2); }

/* ---------------------------------------------------------------------------
   7. PIED DE PAGE
   --------------------------------------------------------------------------- */
.wolf-footer {
  /* Pied sobre et compact : moins de vide au-dessus (96 → 48) et à l'intérieur (64/32 → 40/24). */
  margin-top: var(--wolf-space-12);
  padding-block: var(--wolf-space-10) var(--wolf-space-6);
  background: var(--wolf-color-surface-inset);
  border-top: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wolf-space-8);
  align-items: flex-start;
}
.wolf-footer__brand { max-width: 42ch; }
.wolf-footer__note { color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); margin-top: var(--wolf-space-3); }
.wolf-footer__nav { display: flex; flex-wrap: wrap; gap: var(--wolf-space-5); }
.wolf-footer__link {
  color: var(--wolf-color-text-muted);
  text-decoration: none;
  font-size: var(--wolf-text-sm);
}
.wolf-footer__link:hover { color: var(--wolf-color-text); }
.wolf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wolf-space-3);
  margin-top: var(--wolf-space-6);
  padding-top: var(--wolf-space-5);
  border-top: var(--wolf-border-hairline) solid var(--wolf-color-border-subtle);
  color: var(--wolf-color-text-subtle);
  font-size: var(--wolf-text-xs);
}

/* ---------------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .wolf-mosaic--dense { --wolf-mosaic-cols: 3; }
}
@media (max-width: 720px) {
  /* Navigation repliée en menu mobile */
  .wolf-nav-toggle { display: inline-flex; order: 3; }
  .wolf-header__end {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--wolf-space-4);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--wolf-duration-normal) var(--wolf-ease);
  }
  .wolf-header__end.is-open { max-height: 80vh; }
  .wolf-nav { flex-direction: column; align-items: flex-start; gap: var(--wolf-space-2); }
  .wolf-langswitch { align-self: flex-start; }

  .wolf-mosaic--dense { --wolf-mosaic-cols: 2; --wolf-mosaic-row: 150px; }
}
@media (max-width: 460px) {
  /* Un seul rang : les portées 2 colonnes retombent à 1 → toujours zéro blanc. */
  .wolf-mosaic--dense { --wolf-mosaic-cols: 1; grid-auto-rows: auto; }
  .wolf-mosaic__cell[data-col="2"] { grid-column: span 1; }
  .wolf-mosaic__cell[data-row="2"] { grid-row: span 1; }
}

/* ============================================================================
   T3 — ACCUEIL : gazette d'encarts PLEINS + panneaux de contenu.
   Complète le §6 (moteur grid dense). Consomme uniquement les tokens --wolf-*.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   T3.1 HERO — accroche agence : badges de signature + effet de levier.
   --------------------------------------------------------------------------- */
.wolf-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wolf-space-3);
  margin-top: var(--wolf-space-5);
}
.wolf-hero__buildrun {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-medium);
  letter-spacing: var(--wolf-tracking-wide);
  padding: var(--wolf-space-2) var(--wolf-space-4);
  color: var(--wolf-color-accent-contrast);
  background: var(--wolf-color-accent);
  border-radius: var(--wolf-radius-pill);
}
.wolf-hero__buildrun b { font-weight: var(--wolf-weight-bold); }
.wolf-ratio {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wolf-space-3);
  padding: var(--wolf-space-2) var(--wolf-space-4);
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  border-radius: var(--wolf-radius-pill);
  background: var(--wolf-color-accent-soft);
}
.wolf-ratio__value {
  font-family: var(--wolf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--wolf-text-md);
  font-weight: var(--wolf-weight-medium);
  color: var(--wolf-color-accent-text);
}
.wolf-ratio__caption {
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-muted);
}

/* ---------------------------------------------------------------------------
   T3.2 GAZETTE — colonnes façon journal, ZÉRO BLANC à contenu variable.
   Multi-colonnes CSS : chaque encart (`break-inside: avoid`) s'empile au plus
   serré. Le nombre de colonnes est piloté par une variable (surchargée par les
   media-queries), jamais par un style inline.
   --------------------------------------------------------------------------- */
.wolf-gazette {
  column-count: var(--wolf-gazette-cols, 3);
  column-gap: var(--wolf-grid-gutter);
}
.wolf-gazette--cols-2 { --wolf-gazette-cols: 2; }
.wolf-gazette--cols-3 { --wolf-gazette-cols: 3; }
.wolf-gazette--cols-4 { --wolf-gazette-cols: 4; }

.wolf-gazette__item {
  break-inside: avoid;          /* la carte ne se coupe jamais entre 2 colonnes */
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--wolf-grid-gutter);
}
.wolf-gazette__item > .wolf-tile { width: 100%; }

/* Carte pleine largeur (rythme / tête de rubrique). */
.wolf-gazette__item--feature {
  column-span: all;
  -webkit-column-span: all;
  margin-bottom: var(--wolf-grid-gutter);
}

/* Variante DENSE (accueil) — mosaïque resserrée : gouttières et interlignes de
   cartes réduits (24px → 16px), padding d'encart plus compact. Encarts imbriqués
   sans grands trous. Portée : `.wolf-gazette--tight` (n'affecte pas les autres pages). */
.wolf-gazette--tight { column-gap: var(--wolf-space-4); }
.wolf-gazette--tight .wolf-gazette__item,
.wolf-gazette--tight .wolf-gazette__item--feature { margin-bottom: var(--wolf-space-4); }
.wolf-gazette--tight .wolf-tile { padding: var(--wolf-space-5); }

/* ---------------------------------------------------------------------------
   T3.3 PANNEAU DE CONTENU — la tuile devient un encart LISIBLE (texte réel).
   On garde l'îlot sombre premium des tuiles (défini au §6 de components), mais
   aligné en haut, sans scrim média, avec une typographie de lecture.
   --------------------------------------------------------------------------- */
.wolf-gazette .wolf-tile {
  justify-content: flex-start;
  min-height: 0;
  padding: var(--wolf-space-5);              /* encart compact (24 → 20px) */
  background: var(--wolf-ink-850);           /* surface plate, lisible, sombre dans les 2 thèmes */
  overflow: visible;                         /* le contenu n'est jamais rogné */
}
.wolf-gazette .wolf-tile--accent { background: var(--wolf-ink-800); }

/* Carte pleine largeur : passe le corps en 2 colonnes internes pour aérer. */
.wolf-gazette__item--feature .wolf-tile__body { columns: 22rem 2; column-gap: var(--wolf-space-8); }
.wolf-gazette__item--feature .wolf-tile__title { font-size: var(--wolf-text-2xl); }

.wolf-tile__body {
  margin-top: var(--wolf-space-3);
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-base);
  line-height: var(--wolf-leading-relaxed);
}
.wolf-tile__body > p { margin: 0 0 var(--wolf-space-3); }
.wolf-tile__body > p:last-child { margin-bottom: 0; }
.wolf-tile__body strong { color: var(--wolf-color-text); font-weight: var(--wolf-weight-semibold); }

/* Liste d'arguments / garanties — puce ambre nette. */
.wolf-tile__points {
  list-style: none;
  margin: var(--wolf-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--wolf-space-2);
}
.wolf-tile__points > li {
  position: relative;
  padding-inline-start: var(--wolf-space-5);
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-sm);
  line-height: var(--wolf-leading-snug);
}
.wolf-tile__points > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: var(--wolf-space-3);
  height: var(--wolf-border-thick);
  background: var(--wolf-color-accent);
}

/* Emplacements À COMPLÉTER (coordonnées de don, etc.) — mono, jamais devinés. */
.wolf-tile__slots {
  margin: var(--wolf-space-4) 0 0;
  display: grid;
  gap: var(--wolf-space-2);
}
.wolf-tile__slot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wolf-space-2) var(--wolf-space-3);
}
.wolf-tile__slot dt {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--wolf-tracking-wide);
  color: var(--wolf-color-text-subtle);
  min-width: 4rem;
}
.wolf-tile__slot dd {
  margin: 0;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-accent-text);
  padding: 2px var(--wolf-space-2);
  border: var(--wolf-border-hairline) dashed var(--wolf-color-accent-line);
  border-radius: var(--wolf-radius-sm);
  background: var(--wolf-color-accent-soft);
}

/* Pied de carte : appel à l'action vers la page dédiée + mention discrète. */
.wolf-tile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wolf-space-3);
  margin-top: var(--wolf-space-5);
  padding-top: var(--wolf-space-4);
  border-top: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-2);
  font-family: var(--wolf-font-body);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-semibold);
  color: var(--wolf-color-accent-text);
  text-decoration: none;
}
.wolf-tile__cta-arrow { transition: transform var(--wolf-duration-fast) var(--wolf-ease); }
.wolf-tile--interactive:hover .wolf-tile__cta-arrow,
.wolf-tile__cta:hover .wolf-tile__cta-arrow { transform: translateX(3px); }
.wolf-tile__note {
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-subtle);
}

/* Un titre d'encart de contenu respire un peu plus que dans la grille dense. */
.wolf-gazette .wolf-tile__title { font-size: var(--wolf-text-xl); }
.wolf-gazette .wolf-tile__text {
  color: var(--wolf-color-text);
  font-size: var(--wolf-text-md);
  margin-top: var(--wolf-space-2);
}

/* ---------------------------------------------------------------------------
   T3.4 RESPONSIVE gazette — 4/3 → 2 → 1. Points de contrôle 1600/1200/768/380.
   Jamais une seule colonne avant le mobile étroit ; jamais de trou.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .wolf-gazette--cols-4 { --wolf-gazette-cols: 3; }
}
@media (max-width: 900px) {
  .wolf-gazette--cols-3,
  .wolf-gazette--cols-4 { --wolf-gazette-cols: 2; }
}
@media (max-width: 560px) {
  .wolf-gazette { --wolf-gazette-cols: 1; }
  .wolf-gazette__item--feature .wolf-tile__body { columns: auto; }
}

/* ---------------------------------------------------------------------------
   T5 SOURCES — liste de citations réglementaires (page SANCTUS).
   Bloc semantique <ol> : chaque source = un lien primaire daté + un statut
   (préliminaire / définitif). Zéro décoration superflue ; lisible clavier.
   --------------------------------------------------------------------------- */
.wolf-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wolf-space-3);
  counter-reset: wolf-src;
}
.wolf-sources__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wolf-space-2) var(--wolf-space-3);
  padding: var(--wolf-space-4) var(--wolf-space-5);
  background: var(--wolf-color-surface-2);
  border: 1px solid var(--wolf-color-border-subtle);
  border-radius: var(--wolf-radius-md);
}
.wolf-sources__item::before {
  counter-increment: wolf-src;
  content: counter(wolf-src);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-subtle);
  font-variant-numeric: tabular-nums;
  min-width: 1.5ch;
}
.wolf-sources__link {
  font-weight: var(--wolf-weight-medium);
  color: var(--wolf-color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wolf-sources__link:hover { color: var(--wolf-color-accent-text); }
.wolf-sources__desc { color: var(--wolf-color-text-muted); font-size: var(--wolf-text-sm); }
.wolf-sources__date {
  color: var(--wolf-color-text-subtle);
  font-size: var(--wolf-text-xs);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}

/* Aside « Sources » sous la mosaïque DSA — respiration + filet discret. */
.wolf-section__aside { margin-top: var(--wolf-space-6); }
.wolf-section__aside > .wolf-section__lead { margin-bottom: var(--wolf-space-5); }
.wolf-section__aside .wolf-sources { margin-bottom: var(--wolf-space-5); }

/* Bandeau CTA de fin de page — carte accent centrée, largeur mesurée. */
.wolf-section--cta .wolf-tile--cta {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
.wolf-section--cta .wolf-tile--cta .wolf-tile__text,
.wolf-section--cta .wolf-tile--cta .wolf-tile__body { margin-inline: auto; }
.wolf-section--cta .wolf-tile--cta .wolf-hero__actions { justify-content: center; margin-top: var(--wolf-space-6); }

/* ============================================================================
   T6 — ÉTUDE DE CAS : la PREUVE du protocole. Trois composants dédiés, tokens
   uniquement : galerie de MAQUETTES (emplacements réservés), TABLEAU de bord
   « réel vs estimé », et bandeau LIEN vers le site en ligne.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   T6.1 SITELINK — bandeau vers le site en production (lien externe mis en avant).
   Filet ambre, l'URL en mono, un bouton d'action à droite ; passe à la colonne
   sur mobile. Décoratif mais 100 % lien réel et accessible.
   --------------------------------------------------------------------------- */
.wolf-sitelink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wolf-space-6);
  padding: var(--wolf-space-8);
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  border-radius: var(--wolf-radius-lg);
  background: var(--wolf-color-accent-soft);
  box-shadow: var(--wolf-shadow-glow);
}
.wolf-sitelink__body { max-width: 60ch; }
.wolf-sitelink__eyebrow {
  display: inline-block;
  margin-bottom: var(--wolf-space-2);
}
.wolf-sitelink__title { margin: 0 0 var(--wolf-space-2); font-size: var(--wolf-text-xl); }
.wolf-sitelink__text { color: var(--wolf-color-text-muted); margin: 0 0 var(--wolf-space-4); }
.wolf-sitelink__url {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-md);
  color: var(--wolf-color-accent-text);
  letter-spacing: var(--wolf-tracking-wide);
  word-break: break-all;
}
.wolf-sitelink__aside { display: flex; flex-direction: column; gap: var(--wolf-space-2); }
.wolf-sitelink__note {
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-subtle);
  max-width: 28ch;
}

/* ---------------------------------------------------------------------------
   T6.2 SHOTS — galerie de MAQUETTES / captures. Chaque case est un emplacement
   RÉSERVÉ (cadre pointillé + libellé) tant qu'aucune capture n'est fournie ; une
   vraie image se dépose via --wolf-shot-media sans toucher au gabarit. Grille
   fluide (auto-fill), ratio d'image constant → aucune case vide, aucun trou.
   --------------------------------------------------------------------------- */
.wolf-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--wolf-grid-gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wolf-shot { margin: 0; }
.wolf-shot__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--wolf-radius-md);
  overflow: hidden;
  border: 1px dashed var(--wolf-color-accent-line);
  background:
    var(--wolf-shot-media, none),
    repeating-linear-gradient(
      135deg,
      var(--wolf-color-surface-2) 0,
      var(--wolf-color-surface-2) 12px,
      var(--wolf-color-surface-inset) 12px,
      var(--wolf-color-surface-inset) 24px
    );
  background-size: cover, auto;
  background-position: center, center;
}
/* Quand une vraie capture est fournie (--wolf-shot-media défini), le cadre
   devient plein : trait continu, plus de badge « emplacement ». */
.wolf-shot--filled .wolf-shot__frame { border-style: solid; border-color: var(--wolf-color-border-subtle); }
.wolf-shot--filled .wolf-shot__placeholder { display: none; }
.wolf-shot__placeholder {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  letter-spacing: var(--wolf-tracking-wider);
  text-transform: uppercase;
  color: var(--wolf-color-text-subtle);
  padding: var(--wolf-space-2) var(--wolf-space-3);
  border-radius: var(--wolf-radius-pill);
  background: color-mix(in srgb, var(--wolf-color-surface-inset) 80%, transparent);
}
.wolf-shot__label {
  position: absolute;
  top: var(--wolf-space-3);
  left: var(--wolf-space-3);
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  font-weight: var(--wolf-weight-medium);
  color: var(--wolf-color-accent-contrast);
  background: var(--wolf-color-accent);
  padding: var(--wolf-space-1, 4px) var(--wolf-space-3);
  border-radius: var(--wolf-radius-pill);
}
.wolf-shot__caption {
  margin-top: var(--wolf-space-3);
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-muted);
}

/* ---------------------------------------------------------------------------
   T6.3 LEDGER — le tableau « temps réel vs estimation classique ». Deux cartes
   (réel / estimé) encadrant le RATIO, verdict au centre. Colonnes sur grand
   écran, empilé sur mobile (réel → ratio → estimé, l'ordre logique du DOM).
   --------------------------------------------------------------------------- */
.wolf-ledger {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wolf-grid-gutter);
  align-items: stretch;
}
.wolf-ledger__col { display: flex; }
.wolf-ledger__col > .wolf-tile { width: 100%; }
.wolf-ledger__ratio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--wolf-space-3);
  padding: var(--wolf-space-8);
  border: var(--wolf-border-hairline) solid var(--wolf-color-accent-line);
  border-radius: var(--wolf-radius-lg);
  background: var(--wolf-color-accent-soft);
  box-shadow: var(--wolf-shadow-glow);
}
.wolf-ledger__value {
  font-family: var(--wolf-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--wolf-text-3xl);
  font-weight: var(--wolf-weight-bold);
  line-height: 1;
  color: var(--wolf-color-accent-text);
}
.wolf-ledger__caption {
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-muted);
  max-width: 22ch;
}
.wolf-ledger__body {
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-subtle);
  max-width: 30ch;
}

@media (min-width: 900px) {
  /* réel | RATIO | estimé — le verdict au centre, encadré par les deux mesures. */
  .wolf-ledger { grid-template-columns: 1fr minmax(14rem, 0.85fr) 1fr; }
}

/* Bandeau sitelink : bascule en colonne quand la place manque. */
@media (max-width: 640px) {
  .wolf-sitelink { flex-direction: column; align-items: flex-start; }
  .wolf-sitelink__aside { width: 100%; }
}

/* PATCH accueil : coller le hero plus haut (reduire le vide au-dessus) */
.wolf-hero--home { padding-top: 1.2rem !important; padding-bottom: 2rem !important; }

/* FIX sous-titre role multilingue : pas de coupe orpheline, largeur maitrisee */
.wolf-hero--home .wolf-hero__role { max-width: 46ch; margin-inline: auto; text-wrap: balance; word-break: normal; overflow-wrap: normal; }

/* FIX sous-titre role multilingue : pas de coupe orpheline, largeur maitrisee */
.wolf-hero--home .wolf-hero__role { max-width: 46ch; margin-inline: auto; text-wrap: balance; word-break: normal; overflow-wrap: normal; }