/* ============================================================
   PAGE ARTICLES — liste d'articles
   Structure : .grid[data-grid="grid"] > .column.article-card
   Cohérent avec page-members.css (variables --column-*)
   ============================================================ */

/* ── Carte article ────────────────────────────────────────────── */

  .grid {
    --grid-row-gap:var(--space-m);
    --grid-column-gap:var(--space-m)

  }

.article-card {
  --column-border:               1px solid currentColor;
  --column-border-radius:        var(--radius-m, 0.75em);
  --column-box-shadow:           3px 3px 0 0 currentColor;
  --column-bg-color:             var(--body-background-color);
  --column-padding-block-start:  var(--space-m);
  --column-padding-block-end:    var(--space-m);
  --column-padding-inline-start: var(--space-m);
  --column-padding-inline-end:   var(--space-m);
  --column-hover-box-shadow:     5px 5px 0 0 currentColor;
  --column-hover-transform:      translate(-2px, -2px);

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: var(--space-xs);
  /* Empêche le scroll anchor de sauter lors du toggle vue cartes/liste */
  overflow-anchor: none;
}

/* ── Titre ────────────────────────────────────────────────────── */

.article-card__title {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-fine, 1.2);
  margin-block: 0;
}

/*
  .grid .column > * force position:relative + z-index:1 sur tous les enfants
  directs, dont .card__heading. En tant que flex item avec z-index≠auto,
  .card__heading crée un contexte d'empilement qui emprisonne le ::after
  à l'intérieur — celui-ci ne peut plus "monter" au-dessus des autres flex
  items (meta, badges) qui viennent après dans le DOM.

  Fix : position:static + z-index:auto.
  - position:static : le ::after se positionne sur .column, pas sur le <h3>
  - z-index:auto    : supprime le contexte d'empilement du flex item,
                      le ::after (z-index:2) participe directement au
                      contexte de .column et s'empile au-dessus de tout.

  Spécificité (0,2,0) + chargé après style.css → écrase .grid .column > *.
*/
.article-card .card__heading {
  position: static;
  z-index: auto;
}

.article-card__title a {
  color: inherit;
}

.article-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Méta : date + auteurs ────────────────────────────────────── */

.article-card__meta {
  font-size: var(--text-sm);
  opacity: 0.65;
  margin-block: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: baseline;
}

.article-card__authors::before {
  content: "— ";
}

/* ── Excerpt ──────────────────────────────────────────────────── */

.article-card__excerpt {
  font-size: var(--text-sm);
  opacity: 0.75;
  margin-block: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Badges ───────────────────────────────────────────────────── */

.article-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
}

/* Variantes — style de base uniforme, aucune surcharge */



/* ── Zone sticky des filtres ──────────────────────────────────── */

.articles-controls-region {
  position: sticky;
  top: var(--site-head-height, 0px);
  z-index: 90;
  padding-block: var(--space-xs);
  background-color: var(--site-head-bg, var(--body-background-color));
}

.articles-controls-region.is-stuck {
  padding-block-start: 0;
  border-block-end: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* Pas de sticky quand la grille tombe en 1 colonne :
   2×18rem (col-width) + 1rem (gap) + 2×1.625rem (wrapper-padding min) = 40.25rem → 43em avec marge */
@media (max-width: 43em) {
  .articles-controls-region {
    position: static;
  }

  .articles-controls-region.is-stuck {
    border-block-end: none;
  }

.articles-grid-header {
    margin-block-start: var(--space-2xs);
  }
}


.site-head.is-overlapped-by-articles-controls {
  box-shadow: none;
  border-bottom-color: transparent;
}

/* ── Filtres : une seule ligne flex wrap ──────────────────────── */

.articles-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-s);
}


.articles-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  align-items: center;
}

/* Séparateur visible uniquement quand le groupe est sur la même ligne que le précédent */
.articles-filter-group.is-inline {
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

/* ── Pills (tags + langue) ────────────────────────────────────── */

/* Surcharge des variables badge pour la taille des pills */
.filter-btn {
  --badge-padding-inline: var(--space-s);
  --badge-font-size:      var(--text-sm);
}



/* ── Reset (croix) ────────────────────────────────────────────── */


/* ── Recherche (non sticky) ───────────────────────────────────── */

.articles-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* z-index > articles-controls-region (90) pour que le focus ring
     ne soit pas masqué par le background de la région sticky */
  position: relative;
  z-index: 91;
}

.articles-search .search-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Override du style global .input pour cette page */
.articles-search :is(.input:has([type='search'])) {
  flex: 0 1 auto;
  inline-size: clamp(12rem, 28vw, 22rem);
  max-inline-size: 100%;
  gap: var(--space-2xs);
  padding: 3px var(--space-s);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 9999px;
  background: transparent;
  font-size: var(--text-sm);
  color: inherit;
  transition: border-color 120ms ease;
}

.articles-search :is(.input:has([type='search'])):focus-within {
  border-color: color-mix(in srgb, currentColor 60%, transparent);
  outline: none;
}

.articles-search :is(.input:has([type='search'])) input {
  background: transparent;
  color: inherit;
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Checkbox "titres uniquement" */
.articles-search .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  opacity: 0.6;
  cursor: pointer;
}

/* ── Info résultats de recherche ──────────────────────────────── */

.articles-query-info {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  opacity: 0.7;
  margin-block: 0;
}

.articles-query-info .filter-reset {
  margin-inline-start: 0;
  opacity: 0.6;
}

/* ── En-tête de grille (toggle vue) ───────────────────────────── */

.articles-grid-header {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--space-s);
}

/* ── Toggle vue — styles de base dans view-toggle.css (bundle) ── */

/* ── Vue liste ─────────────────────────────────────────────────── */
/* Base (conteneur, séparateur, hover, container query) → list-view.css */

/* Surcharges spécifiques magazine */
.articles-grid[data-view="list"] .article-card {
  --column-border:               none;
  --column-border-radius:        0;
  --column-box-shadow:           none;
  --column-padding-block-start:  var(--space-3xs);
  --column-padding-block-end:    var(--space-3xs);
  --column-padding-inline-start: 0;
  --column-padding-inline-end:   0;
  --column-hover-box-shadow:     none;
  --column-hover-transform:      none;

  gap: var(--space-2xs);
  padding-inline-start: var(--space-s);
  padding-inline-end: var(--space-2xs);
}

.articles-grid[data-view="list"] .article-card__title {
  font-size: var(--text-base);
  flex: 1;
  min-width: 0;
}

.articles-grid[data-view="list"] .article-card__meta {
  flex: none;
}

.articles-grid[data-view="list"] .article-card__excerpt {
  display: none;
}

.articles-grid[data-view="list"] .article-card__badges {
  display: none;
}

/* Alignement baseline + meta nowrap sur écrans larges */
@container (min-width: 36rem) {
  .articles-grid[data-view="list"] .article-card {
    align-items: baseline;
  }

  .articles-grid[data-view="list"] .article-card__meta {
    white-space: nowrap;
  }
}

/* Soulignement du titre au hover */
.articles-grid[data-view="list"] .article-card:has(:hover) .article-card__title a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Filtre auteur actif ──────────────────────────────────────── */

.articles-filter-author {
  font-size: var(--text-sm);
  opacity: 0.8;
}

/* Auteur cliquable sur la page article */
a.meta-author {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: opacity 120ms ease;
}

a.meta-author:hover {
  opacity: 0.7;
}

/* ── Grille ───────────────────────────────────────────────────── */

.articles-grid {
  --column-min-size: 20rem;
  --grid-vertical-alignment: stretch;
}

.articles-grid[data-view="list"] {
  display: flex;
  flex-direction: column;
}