/* ============================================================================
   Page Articles — refonte éditoriale 2026
   ----------------------------------------------------------------------------
   Transposition de la maquette produit (hero éditorial, filtres par étape du
   parcours VEFA, 1 à la une + 2 secondaires, guides, grille, encart « piège »,
   CTA communauté).

   ⚠️ AUCUNE COULEUR EN DUR. La maquette définissait ses propres variables en
   hexadécimal (`--articles-blue: #3498db`, `--articles-page: #f4f7fa`…) qui
   tombent EXACTEMENT sur les tokens de marque de `website/css/tokens.css`.
   Elles sont donc ALIASÉES ci-dessous, pas recopiées : une évolution du design
   system se propage ici sans retoucher ce fichier. Même méthode que la refonte
   de la page profil (`--vcp-*`).

   L'ancienne feuille redéfinissait `--vefa-primary: #0d6efd` (le bleu Bootstrap)
   dans un `:root` GLOBAL — elle écrasait donc le bleu de marque sur toute page
   qui la chargeait. Supprimé.

   Deux écarts assumés vs la maquette, faute de token équivalent exact :
     · `--art-shadow`      : `--vefa-shadow-lg` au lieu de `0 10px 30px rgba(15,23,42,.08)`
     · `--art-shadow-soft` : `--vefa-shadow-md` au lieu de `0 2px 10px rgba(15,23,42,.06)`
   Différence imperceptible à l'œil, et l'alignement sur le design system prime.

   Les icônes sont en Font Awesome 6 (chargé globalement) et non en Lucide,
   absent du projet — convention déjà retenue sur la refonte du profil.
   ========================================================================== */

.vc-articles {
  /* ── Couleurs : alias sur les tokens de marque ── */
  --art-blue: var(--vefa-primary);
  --art-blue-dark: var(--vefa-primary-dark);
  --art-blue-deep: var(--vefa-primary-darker);
  --art-blue-soft: var(--vefa-primary-soft);
  --art-orange: var(--vefa-accent);
  --art-orange-dark: var(--vefa-accent-dark);
  --art-orange-soft: var(--vefa-accent-soft);
  --art-ink: var(--vefa-text);
  --art-ink-strong: var(--vefa-text-strong);
  --art-muted: var(--vefa-text-muted);
  --art-subtle: var(--vefa-text-subtle);
  --art-white: var(--vefa-bg);
  --art-soft: var(--vefa-bg-soft);
  --art-border: var(--vefa-border);
  --art-border-strong: var(--vefa-border-strong);
  --art-shadow: var(--vefa-shadow-lg);
  --art-shadow-soft: var(--vefa-shadow-md);
  --art-ring: var(--vefa-ring-focus);

  /* ── Typographie ──
     Serif éditoriale de la marque pour les titres, pile SYSTÈME pour les
     champs, filtres, boutons et métadonnées (exigence du cahier des charges).
     Les trois piles existent déjà en tokens globaux (`css/main.css`) — elles
     ne sont pas redéfinies ici. */
  --art-serif: var(--title-font-family, Georgia, serif);
  --art-serif-body: var(--body-font-family, Georgia, serif);
  --art-ui: var(--ui-font-family, sans-serif);

  font-family: var(--art-ui);
  color: var(--art-ink);

  /* Halos décoratifs de la maquette, posés sur le fond de page global
     (`--vefa-bg-page`, déjà appliqué au body par `surfaces.css`). */
  background:
    radial-gradient(circle at 8% 7%, var(--art-blue-soft), transparent 28%),
    radial-gradient(circle at 92% 9%, var(--art-orange-soft), transparent 25%);
}

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

/* Neutralise le reboot Bootstrap sur les éléments que la page restyle. */
.vc-articles h1,
.vc-articles h2,
.vc-articles h3,
.vc-articles p,
.vc-articles ol,
.vc-articles ul { margin: 0; }

.vc-articles ol,
.vc-articles ul { padding: 0; list-style: none; }

.vc-articles a { color: inherit; text-decoration: none; }

.vc-articles button,
.vc-articles input { font: inherit; }

/* Anneau de focus visible au clavier sur tout l'interactif de la page. */
.vc-articles a:focus-visible,
.vc-articles button:focus-visible,
.vc-articles input:focus-visible {
  outline: none;
  box-shadow: var(--art-ring);
  border-radius: var(--vefa-radius-md);
}

.articles-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.articles-main {
  width: min(var(--vefa-container-max), calc(100% - 32px));
  margin-inline: auto;
  padding: var(--vefa-space-7) 0 var(--vefa-space-8);
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */
.articles-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vefa-space-2);
  font-size: var(--vefa-fs-sm);
  color: var(--art-muted);
}

.articles-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--vefa-space-2);
  color: var(--art-subtle);
}

.articles-breadcrumb a { color: var(--art-muted); }
.articles-breadcrumb a:hover { color: var(--art-blue-deep); }
.articles-breadcrumb [aria-current="page"] { color: var(--art-ink); font-weight: var(--vefa-fw-semibold); }

/* ── Hero éditorial ─────────────────────────────────────────────────────── */
.articles-hero {
  max-width: 910px;
  margin: var(--vefa-space-6) auto var(--vefa-space-6);
  text-align: center;
}

.articles-eyebrow {
  margin-bottom: var(--vefa-space-3);
  color: var(--art-blue-deep);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.articles-hero h1 {
  max-width: 900px;
  margin: 0 auto var(--vefa-space-4);
  font-family: var(--art-serif);
  font-size: clamp(2.25rem, 6vw, 4.125rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: var(--vefa-fw-bold);
  color: var(--art-ink-strong);
  /* Le titre ne doit jamais être coupé : on autorise la césure plutôt que le
     débordement sur les écrans étroits. */
  overflow-wrap: break-word;
  /* Répartit le texte sur des lignes de longueur voisine. Sans lui, mesuré à
     1440 px : 885 px sur la 1re ligne et 117 px sur la 2e — « seul » restait
     seul. Le navigateur qui ne connaît pas la propriété l'ignore et retombe
     sur le rendu précédent. */
  text-wrap: balance;
}

.articles-hero-copy {
  max-width: 700px;
  margin: 0 auto var(--vefa-space-5);
  color: var(--art-muted);
  font-family: var(--art-serif-body);
  font-size: var(--vefa-fs-lg);
  line-height: var(--vefa-lh-normal);
}

/* ── Recherche ──────────────────────────────────────────────────────────── */
.articles-search {
  display: flex;
  align-items: center;
  gap: var(--vefa-space-3);
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 6px 6px 18px;
  background: var(--art-white);
  border: 1px solid var(--art-border-strong);
  border-radius: 14px;
  box-shadow: var(--art-shadow-soft);
}

.articles-search:focus-within {
  border-color: var(--art-blue);
  box-shadow: var(--art-ring), var(--art-shadow-soft);
}

.articles-search > i { flex: 0 0 auto; color: var(--art-muted); }

.articles-search-input {
  min-width: 0;
  flex: 1 1 auto;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--art-ink);
  font-size: var(--vefa-fs-base);
}

.articles-search-input::placeholder { color: var(--art-subtle); }

.articles-search-input:focus-visible { box-shadow: none; }

/* ⚠️ Scopé sous `.vc-articles` UNIQUEMENT pour la spécificité : le reset de
   liens `.vc-articles a { color: inherit }` pèse (0,1,1) et écrasait un
   `.articles-primary-action` nu à (0,1,0) — le texte des boutons rendus en
   `<a>` (« Retrouver mes voisins », « Voir tous les guides ») héritait donc de
   l'encre sombre du bloc parent au lieu du blanc. Le `<button>` de recherche,
   lui, restait blanc : le reset ne l'atteint pas. Ne pas « simplifier » en
   retirant le scope. */
.vc-articles .articles-primary-action,
.vc-articles .articles-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--vefa-radius-md);
  background: var(--art-orange);
  color: var(--vefa-text-on-primary);
  font-family: var(--art-ui);
  font-weight: var(--vefa-fw-bold);
  cursor: pointer;
  transition: background var(--vefa-duration-fast) var(--vefa-ease-out),
              transform var(--vefa-duration-fast) var(--vefa-ease-out);
}

.vc-articles .articles-primary-action:hover,
.vc-articles .articles-search-submit:hover {
  background: var(--art-orange-dark);
  color: var(--vefa-text-on-primary);
  transform: translateY(-1px);
}

/* ── Filtres par étape du parcours ──────────────────────────────────────── */
.articles-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--vefa-space-2);
  margin: var(--vefa-space-5) 0 var(--vefa-space-6);
}

.articles-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--vefa-space-2);
  /* 44px : cible tactile minimale recommandée. */
  min-height: 44px;
  padding: 0 var(--vefa-space-4);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-md);
  background: var(--art-white);
  color: var(--art-muted);
  font-weight: var(--vefa-fw-semibold);
  white-space: nowrap;
  transition: border-color var(--vefa-duration-fast) var(--vefa-ease-out),
              color var(--vefa-duration-fast) var(--vefa-ease-out),
              background var(--vefa-duration-fast) var(--vefa-ease-out);
}

.articles-filter:hover {
  border-color: var(--art-blue);
  color: var(--art-blue-deep);
}

.articles-filter[aria-current="page"] {
  border-color: var(--art-blue);
  background: var(--art-blue-soft);
  color: var(--art-blue-deep);
}

.articles-filter.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--art-soft);
}

.articles-filter.is-disabled:hover {
  border-color: var(--art-border);
  color: var(--art-muted);
}

.articles-filter-count {
  color: var(--art-subtle);
  font-size: var(--vefa-fs-xs);
  font-weight: var(--vefa-fw-semibold);
}

.articles-filter[aria-current="page"] .articles-filter-count { color: var(--art-blue); }

/* ── Critères actifs ────────────────────────────────────────────────────── */
.articles-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vefa-space-2);
  margin: calc(-1 * var(--vefa-space-4)) 0 var(--vefa-space-5);
}

.articles-results-count {
  color: var(--art-muted);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-semibold);
}

/* Une puce = un critère, retirable seul. */
.articles-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vefa-space-2);
  min-height: 36px;
  padding: 0 var(--vefa-space-3);
  border: 1px solid var(--art-blue);
  border-radius: var(--vefa-radius-pill);
  background: var(--art-blue-soft);
  color: var(--art-blue-deep);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-semibold);
  transition: background var(--vefa-duration-fast) var(--vefa-ease-out);
}

.articles-chip:hover { background: var(--art-white); color: var(--art-blue-deep); }
.articles-chip i { font-size: var(--vefa-fs-xs); opacity: 0.75; }
.articles-chip:hover i { opacity: 1; }

.articles-reset {
  color: var(--art-muted);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-semibold);
  text-decoration: underline;
}

.articles-reset:hover { color: var(--art-blue-deep); }

/* Croix d'effacement dans le champ de recherche. */
.articles-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--art-subtle);
  transition: background var(--vefa-duration-fast) var(--vefa-ease-out),
              color var(--vefa-duration-fast) var(--vefa-ease-out);
}

.articles-search-clear:hover {
  background: var(--art-soft);
  color: var(--art-ink);
}

/* ── Média des cartes ───────────────────────────────────────────────────── */
/* ⚠️ Le média est positionné en ABSOLU dans un conteneur `relative` — surtout
   pas en `height: 100%`. Mesuré : un `<picture>` en `height: 100%` retombe sur
   `auto` dès que le conteneur est une grille dont l'élément n'est pas étiré
   (`place-items: center`), l'image reprend alors son ratio intrinsèque
   (387×221 au lieu de 387×150) et se fait rogner par le `overflow: hidden`.
   Le rendu RESSEMBLE à un recadrage correct, mais `object-fit` et surtout
   `object-position` — donc le cadrage choisi en base via
   `main_image_object_position` — ne s'appliquent jamais.
   C'est l'idiome déjà utilisé par l'ancienne feuille (`.vefa-article-image-wrapper`). */
.articles-feature-visual,
.articles-secondary-media,
.articles-guide-visual {
  position: relative;
  overflow: hidden;
}

.vc-articles picture,
.articles-media-fallback {
  position: absolute;
  inset: 0;
}

.vc-articles picture { display: block; }

.articles-media-img {
  display: block;
  width: 100%;
  height: 100%;
}

.articles-media-img.fit-cover { object-fit: cover; }
.articles-media-img.fit-contain { object-fit: contain; }

.articles-media-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--art-blue-soft), var(--art-soft));
  color: var(--art-blue);
  font-size: 2rem;
}

/* ── Article à la une ───────────────────────────────────────────────────── */
.articles-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  min-height: 340px;
  margin-bottom: var(--vefa-space-4);
  overflow: hidden;
  background: var(--art-white);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-xl);
  box-shadow: var(--art-shadow);
  transition: transform var(--vefa-duration-base) var(--vefa-ease-out),
              box-shadow var(--vefa-duration-base) var(--vefa-ease-out);
}

.articles-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--vefa-shadow-xl);
}

.articles-feature-visual {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--art-soft);
}

.articles-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--vefa-space-7);
}

.articles-feature-badge {
  align-self: flex-start;
  margin-bottom: var(--vefa-space-4);
  padding: 6px 9px;
  border-radius: var(--vefa-radius-sm);
  background: var(--art-blue);
  color: var(--vefa-text-on-primary);
  font-size: var(--vefa-fs-xs);
  font-weight: var(--vefa-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.articles-feature-title {
  margin-bottom: var(--vefa-space-3);
  font-family: var(--art-serif);
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: var(--vefa-fw-bold);
  color: var(--art-ink-strong);
}

.articles-feature-copy {
  margin-bottom: var(--vefa-space-5);
  color: var(--art-muted);
  font-family: var(--art-serif-body);
  font-size: 1.0625rem;
  line-height: var(--vefa-lh-normal);
}

.articles-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vefa-space-2);
  color: var(--art-muted);
  font-size: var(--vefa-fs-sm);
}

.articles-meta-category { color: var(--art-blue-deep); font-weight: var(--vefa-fw-bold); }

.articles-draft-badge {
  display: inline-block;
  margin-left: var(--vefa-space-2);
  padding: 2px 8px;
  border-radius: var(--vefa-radius-pill);
  background: var(--vefa-warning-soft);
  color: var(--vefa-warning);
  font-family: var(--art-ui);
  font-size: var(--vefa-fs-xs);
  font-weight: var(--vefa-fw-bold);
  vertical-align: middle;
}

/* ── Deux articles secondaires ──────────────────────────────────────────── */
.articles-secondary-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vefa-space-3);
  margin-bottom: var(--vefa-space-7);
}

.articles-secondary-link {
  display: flex;
  align-items: center;
  gap: var(--vefa-space-2);
  min-height: 86px;
  padding: 10px;
  background: var(--art-white);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-lg);
  box-shadow: var(--art-shadow-soft);
  transition: transform var(--vefa-duration-base) var(--vefa-ease-out),
              box-shadow var(--vefa-duration-base) var(--vefa-ease-out);
}

.articles-secondary-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--art-shadow);
}

.articles-secondary-media {
  display: block;
  align-self: stretch;
  width: 92px;
  flex: 0 0 92px;
  min-height: 66px;
  overflow: hidden;
  border-radius: var(--vefa-radius-md);
  background: var(--art-blue-soft);
  color: var(--art-blue);
}

.articles-secondary-media.is-orange {
  background: var(--art-orange-soft);
  color: var(--art-orange);
}

.articles-secondary-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--vefa-space-4);
}

.articles-secondary-kicker {
  color: var(--art-blue-deep);
  font-size: var(--vefa-fs-xs);
  font-weight: var(--vefa-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.articles-secondary-title {
  color: var(--art-ink-strong);
  font-family: var(--art-serif);
  font-size: 1.1875rem;
  line-height: var(--vefa-lh-snug);
  font-weight: var(--vefa-fw-bold);
}

.articles-secondary-link > i { flex: 0 0 auto; margin-right: var(--vefa-space-2); color: var(--art-muted); }

/* ── En-tête de section ─────────────────────────────────────────────────── */
.articles-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vefa-space-5);
  margin-bottom: var(--vefa-space-4);
}

.articles-section-heading {
  font-family: var(--art-serif);
  font-size: var(--vefa-fs-2xl);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: var(--vefa-fw-bold);
  color: var(--art-ink-strong);
}

.articles-see-all {
  color: var(--art-blue-deep);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-bold);
  white-space: nowrap;
}

.articles-see-all:hover { text-decoration: underline; }

/* ── Grille de guides ───────────────────────────────────────────────────── */
.articles-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vefa-space-4);
  margin-bottom: var(--vefa-space-6);
}

.articles-guide {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  overflow: hidden;
  background: var(--art-white);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-lg);
  box-shadow: var(--art-shadow-soft);
  transition: transform var(--vefa-duration-base) var(--vefa-ease-out),
              box-shadow var(--vefa-duration-base) var(--vefa-ease-out);
}

.articles-guide:hover {
  transform: translateY(-3px);
  box-shadow: var(--art-shadow);
}

.articles-guide-visual {
  height: 150px;
  flex: 0 0 150px;
  background: var(--art-soft);
  color: var(--art-blue);
}

.articles-guide-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--vefa-space-4);
}

.articles-guide-kicker {
  margin-bottom: 7px;
  color: var(--art-blue-deep);
  font-size: var(--vefa-fs-xs);
  font-weight: var(--vefa-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.articles-guide-title {
  margin-bottom: var(--vefa-space-2);
  font-family: var(--art-serif);
  font-size: 1.375rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: var(--vefa-fw-bold);
  color: var(--art-ink-strong);
}

.articles-guide-copy {
  margin-bottom: var(--vefa-space-3);
  color: var(--art-muted);
  font-family: var(--art-serif-body);
  font-size: var(--vefa-fs-sm);
  line-height: var(--vefa-lh-normal);
}

.articles-guide-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vefa-space-2);
  margin-top: auto;
  color: var(--art-muted);
  font-size: var(--vefa-fs-xs);
}

/* ── État vide ──────────────────────────────────────────────────────────── */
.articles-empty {
  display: grid;
  justify-items: center;
  gap: var(--vefa-space-3);
  margin: var(--vefa-space-3) 0 var(--vefa-space-6);
  padding: var(--vefa-space-7);
  background: var(--art-white);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-lg);
  text-align: center;
  color: var(--art-muted);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.articles-pagination { margin: var(--vefa-space-6) 0; }

.articles-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vefa-space-2);
}

.articles-pagination a,
.articles-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--vefa-space-3);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-md);
  background: var(--art-white);
  color: var(--art-muted);
  font-weight: var(--vefa-fw-semibold);
}

.articles-pagination a:hover { border-color: var(--art-blue); color: var(--art-blue-deep); }

.articles-pagination .is-current {
  border-color: var(--art-blue);
  background: var(--art-blue);
  color: var(--vefa-text-on-primary);
}

/* ── Encart « Le piège que personne ne mentionne » ──────────────────────── */
.articles-warning {
  display: flex;
  align-items: center;
  gap: var(--vefa-space-4);
  margin: var(--vefa-space-5) 0 var(--vefa-space-4);
  padding: var(--vefa-space-5) var(--vefa-space-5);
  background: linear-gradient(90deg, var(--art-orange-soft), var(--art-white));
  border: 1px solid var(--art-orange);
  border-radius: var(--vefa-radius-lg);
  color: var(--art-orange);
  transition: transform var(--vefa-duration-base) var(--vefa-ease-out);
}

.articles-warning:hover { transform: translateY(-2px); }

.articles-warning > i { flex: 0 0 auto; font-size: 1.5rem; }

.articles-warning-content { min-width: 0; flex: 1 1 auto; }

.articles-warning-title {
  margin-bottom: 5px;
  font-family: var(--art-serif);
  font-size: 1.4375rem;
  letter-spacing: -0.02em;
  font-weight: var(--vefa-fw-bold);
  color: var(--art-ink-strong);
}

.articles-warning-copy {
  color: var(--art-muted);
  font-family: var(--art-serif-body);
  line-height: var(--vefa-lh-snug);
}

.articles-warning-arrow { flex: 0 0 auto; }

/* ── Zone secondaire : tags & catégories ────────────────────────────────── */
.articles-tags {
  margin: var(--vefa-space-6) 0 0;
  padding-top: var(--vefa-space-5);
  border-top: 1px solid var(--art-border);
}

.articles-tags-title {
  margin-bottom: var(--vefa-space-3);
  color: var(--art-muted);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.articles-tags-list { display: flex; flex-wrap: wrap; gap: var(--vefa-space-2); }

.articles-tag {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--vefa-space-4);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-pill);
  background: var(--art-white);
  color: var(--art-muted);
  font-size: var(--vefa-fs-sm);
  font-weight: var(--vefa-fw-medium);
  transition: border-color var(--vefa-duration-fast) var(--vefa-ease-out),
              color var(--vefa-duration-fast) var(--vefa-ease-out);
}

.articles-tag:hover { border-color: var(--art-blue); color: var(--art-blue-deep); }

.articles-tag.is-active {
  border-color: var(--art-blue);
  background: var(--art-blue-soft);
  color: var(--art-blue-deep);
}

/* Au doigt, TOUS les contrôles secondaires passent à la cible tactile
   recommandée. Mesuré avant correctif à 375 px : puces 36 px, thèmes 38 px,
   « Voir tous les guides » 21 px, liens du fil d'Ariane 17 px — ces deux
   derniers étaient sous le minimum AA de 24 px, pas seulement sous les 44. */
@media (pointer: coarse) {
  .articles-chip,
  .articles-tag { min-height: 44px; }

  .articles-see-all,
  .articles-breadcrumb a,
  .articles-breadcrumb [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── CTA communauté ─────────────────────────────────────────────────────── */
.articles-community {
  display: grid;
  grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: var(--vefa-space-6);
  margin-top: var(--vefa-space-6);
  padding: var(--vefa-space-6) var(--vefa-space-7);
  overflow: hidden;
  background: var(--vefa-gradient-hero);
  border: 1px solid var(--art-border);
  border-radius: var(--vefa-radius-xl);
}

.articles-community-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 152px;
  color: var(--art-blue);
}

.articles-community-building {
  display: grid;
  place-items: center;
  width: 120px;
  height: 126px;
  border-radius: 20px 20px 8px 8px;
  background: var(--art-blue-soft);
  border: 1px solid var(--art-border);
  font-size: 2.5rem;
}

.articles-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 42px;
  border-radius: var(--vefa-radius-lg);
  background: var(--art-white);
  border: 1px solid var(--art-border);
  box-shadow: var(--art-shadow-soft);
}

.articles-bubble.is-left { left: 8%; top: 30px; color: var(--art-blue); }
.articles-bubble.is-right { right: 6%; top: 58px; color: var(--art-orange); }

.articles-community-title {
  margin-bottom: var(--vefa-space-3);
  font-family: var(--art-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: var(--vefa-fw-bold);
  color: var(--art-ink-strong);
}

.articles-community-copy {
  max-width: 600px;
  margin-bottom: var(--vefa-space-5);
  color: var(--art-muted);
  font-family: var(--art-serif-body);
  font-size: 1.0625rem;
  line-height: var(--vefa-lh-normal);
}

/* ============================================================================
   Responsive — mêmes points de rupture que la maquette (800px, 620px).
   ========================================================================== */
@media (max-width: 800px) {
  .articles-main { padding-top: var(--vefa-space-6); }

  .articles-feature { grid-template-columns: 1fr; }
  .articles-feature-visual { min-height: 260px; }
  .articles-feature-content { padding: var(--vefa-space-6); }

  .articles-guides { grid-template-columns: 1fr; }

  /* En dessous de 3 colonnes, la carte bascule en ligne : visuel à gauche,
     texte à droite — plus dense qu'un empilement vertical sur tablette.
     Le visuel n'a plus de hauteur propre : il s'étire sur la hauteur de la
     rangée, imposée par la colonne de texte. */
  .articles-guide { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 170px; }
  .articles-guide-visual { height: auto; }
}

@media (max-width: 620px) {
  .articles-main {
    width: min(100% - 20px, var(--vefa-container-max));
    padding: var(--vefa-space-5) 0 var(--vefa-space-7);
  }

  .articles-hero { margin-bottom: var(--vefa-space-5); text-align: left; }
  .articles-hero h1 { font-size: clamp(2.125rem, 11vw, 3.25rem); }
  .articles-hero-copy { font-size: 1.0625rem; }

  /* Le champ occupe toute la largeur et le bouton passe dessous.
     ⚠️ Le bouton est poussé à la ligne par `flex-basis: 100%`, pas par une
     largeur calculée sur le champ : la croix d'effacement s'intercale entre
     les deux et toute arithmétique en dur se décalerait dès qu'elle apparaît. */
  .articles-search { align-items: center; flex-wrap: wrap; padding: 10px; }
  .articles-search-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .articles-search-submit { flex: 0 0 100%; width: 100%; margin-top: var(--vefa-space-2); }

  .articles-filters { justify-content: flex-start; margin-bottom: var(--vefa-space-6); }
  .articles-active-filters { justify-content: flex-start; }

  .articles-feature { border-radius: var(--vefa-radius-lg); }
  .articles-feature-visual { min-height: 220px; }
  .articles-feature-content { padding: var(--vefa-space-5); }
  .articles-feature-title { font-size: 2rem; }

  .articles-secondary-row { grid-template-columns: 1fr; margin-bottom: var(--vefa-space-6); }

  .articles-section-head { align-items: flex-start; flex-direction: column; gap: var(--vefa-space-2); }
  .articles-section-heading { font-size: 1.8125rem; }

  .articles-guide { display: flex; min-height: 0; }
  .articles-guide-visual { height: 124px; flex: 0 0 124px; }

  /* Le résumé disparaît des cartes au mobile. Deux raisons qui vont dans le
     même sens : la maquette n'en met pas (kicker + titre + durée seulement),
     et c'est le plus gros poste de hauteur de la page — mesuré, les deux
     grilles pèsent 2 366 px sur 5 676, dont 65 px de résumé par carte.
     Le titre et la durée de lecture suffisent à décider d'ouvrir. */
  .articles-guide-copy { display: none; }

  .articles-guides { gap: var(--vefa-space-3); margin-bottom: var(--vefa-space-5); }

  .articles-warning { align-items: flex-start; padding: var(--vefa-space-4); }
  .articles-warning-title { font-size: 1.3125rem; }
  .articles-warning-arrow { display: none; }

  .articles-community { grid-template-columns: 1fr; padding: var(--vefa-space-6) var(--vefa-space-5); }
  .articles-community-visual { min-height: 132px; }
  .articles-primary-action { width: 100%; }
}