/* ============================================================
   AstonLegacy — revue.css
   PAGE LA REVUE — page-articles.php

   REFONTE éditoriale N&B + design system MUTUALISÉ :
     • indicateur glissant filtres/tri → .al-seg__ind (sliding-indicator.js)
     • CTA carte                       → .al-link (al_link())
     • entrée cartes                   → reveal.js ([data-al-reveal])
     • « Charger plus »                → .al-btn--gooey-white
   Ce fichier ne porte donc QUE le spécifique Revue : tokens N&B,
   hero, pilules (habillage verre), grille à rythme, cartes.

   Or « selon la situation » (WCAG) :
     - FOND CLAIR  → --color-gold-deep (#7A5E16) : AA
     - FOND SOMBRE (scrim image) → --color-gold (#C9A84C)
   Variables globales (palette, gold, verre) : style.css
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS N&B + base (page-scopée par l'enqueue)
   ------------------------------------------------------------ */
body {
  --bg:        #EFF0EF;
  --rv-gold:   var(--color-gold-deep, #7A5E16);   /* fil doré profond (AA sur clair) */

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-nb);
  font-weight: 400;
  line-height: 1.5;
}
body h1, body h2, body h3 { font-family: var(--font-nb); color: var(--ink); line-height: 1; }
body p  { color: var(--muted); font-weight: 400; }
body a  { color: inherit; }
body em { font-style: normal; color: inherit; }
body strong { color: var(--ink); }

/* Conteneur centré commun */
.rev-shell { max-width: 1640px; margin: 0 auto; padding: 0 5vw; }

/* ------------------------------------------------------------
   2. HERO — en-tête typographique clair (épuré).
   On annule le calc(100svh) imposé par style.css à .rev-hero.
   Eyebrow = composant DS .eyebrow. Titre = scramble (revue.js).
   ------------------------------------------------------------ */
.rev-hero {
  height: auto;
  min-height: 0;
  background: none;
  overflow: visible;
  padding: calc(var(--admin-h, 0px) + 104px) 0 46px;
  border-bottom: 1px solid var(--line-soft);
}
.rev-hero .eyebrow { margin-bottom: 16px; animation: al-rise 0.8s var(--spring-soft) both 0.05s; }
.rev-hero__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(46px, 7vw, 96px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--ink);
  animation: al-rise 0.85s var(--spring-soft) both 0.12s;
}
.rev-hero__sub {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  color: var(--muted);
  animation: al-rise 0.9s var(--spring-soft) both 0.2s;
}

/* ------------------------------------------------------------
   3. FILTRES — segmented control en verre clair.
   Habillage verre = recette commune (style.css : .rev-cats__inner).
   Indicateur glissant = .al-seg__ind (module partagé, posé par revue.js).
   .rev-cat--on = état actif (couleur/graisse) ; le fond plein n'est que le
   REPLI sans JS — neutralisé sous html.al-js (la capsule porte la pilule).
   ------------------------------------------------------------ */
.rev-cats { display: flex; justify-content: flex-start; margin: 30px 0 0; }
.rev-cats__inner {
  position: relative;                /* contexte de la capsule .al-seg__ind */
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border-radius: 999px;
  max-width: 100%;
  overflow-x: auto;                  /* scroll horizontal sur mobile (géré par l'indicateur) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rev-cats__inner::-webkit-scrollbar { display: none; }
/* sheen diagonal discret */
.rev-cats__inner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0; opacity: 0.07;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(130% 90% at 50% -30%, rgba(255,255,255,0.30), rgba(255,255,255,0) 62%);
}

.rev-cat {
  position: relative;
  z-index: 1;                        /* au-dessus de la capsule .al-seg__ind */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-nb);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease, background 0.45s var(--spring), box-shadow 0.45s var(--spring);
}
.rev-cat .ti { font-size: 16px; line-height: 1; color: var(--subtle); transition: color 0.3s ease; }
.rev-cat__label { line-height: 1; }
.rev-cat__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rv-gold);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.45s var(--spring);
}
.rev-cat:hover { color: var(--ink); }
.rev-cat:hover .ti { color: var(--muted); }
.rev-cat--on, .rev-cat--on:hover { color: var(--ink); font-weight: 600; }
.rev-cat--on .ti { color: var(--ink); }
.rev-cat--on .rev-cat__dot { opacity: 1; transform: scale(1); }
.rev-cat:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* REPLI sans JS : pastille pleine sous l'actif (sinon la capsule porte tout) */
html:not(.al-js) .rev-cat--on {
  background: #fff;
  box-shadow: 0 5px 16px -5px rgba(19, 21, 20, 0.3);
}

/* ------------------------------------------------------------
   4. SOUS-BARRE — compteur + tri (mini segmented control verre)
   Même indicateur partagé (.al-seg__ind).
   ------------------------------------------------------------ */
.rev-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 26px 0 6px; }
.rev-bar__count { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--subtle); font-weight: 600; }
.rev-bar__count strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 5px; }
.rev-bar__sort {
  position: relative;                /* contexte de la capsule */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  /* ombre resserrée (variante de la recette commune) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,0.14),
    0 2px 40px -14px rgba(19,21,20,0.3);
}
.rev-sort {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: var(--font-nb);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.rev-sort:hover { color: var(--ink); }
.rev-sort--on { color: var(--ink); font-weight: 600; }
.rev-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html:not(.al-js) .rev-sort--on { background: #fff; box-shadow: 0 5px 16px -5px rgba(19, 21, 20, 0.3); }

/* ------------------------------------------------------------
   5. GRILLE — rythme éditorial : lead (2 col) + spotlights (2 col)
   périodiques, le reste en 1 col. grid-auto-flow:dense comble les
   trous laissés par les cartes larges. Entrée en cascade = reveal.js.
   ------------------------------------------------------------ */
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 22px;
  margin: 22px 0 0;
}
@media (max-width: 1024px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  {
  .rev-grid { grid-template-columns: 1fr; gap: 18px; }
  .rev-cat, .rev-sort { min-height: 40px; }   /* confort tactile */

  /* Filtres : plus petits + PASSAGE À LA LIGNE (au lieu du scroll horizontal)
     → tout rentre toujours. La capsule glissante est 1D (incompatible multi-ligne) :
     on l'éteint pour les cats, et l'actif porte alors son propre fond. */
  .rev-cats { justify-content: center; }
  .rev-cats__inner { flex-wrap: wrap; overflow-x: visible; justify-content: center; gap: 6px; border-radius: 20px; }
  .rev-cat { padding: 6px 11px; font-size: 11.5px; gap: 6px; }
  .rev-cat .ti { font-size: 14px; }
  .rev-cats__inner .al-seg__ind { display: none; }
  .rev-cat--on { background: #fff; box-shadow: 0 4px 14px -5px rgba(19, 21, 20, 0.3); }
}

.rev-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--line-soft),
    0 18px 44px -30px rgba(19, 21, 20, 0.45);
  transition: transform 0.5s var(--spring-soft), box-shadow 0.5s ease;
}
.rev-card:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 34px 70px -30px rgba(19, 21, 20, 0.5);
}

/* — cartes larges (posées par revue.js sur la vue courante) — */
.rev-card--lead,
.rev-card--spot { grid-column: span 2; }
@media (max-width: 768px) {
  .rev-card--lead,
  .rev-card--spot { grid-column: span 1; }
}

/* — Visuel — */
.rev-card__img {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e7e8e7;
  text-decoration: none;
}
.rev-card--lead .rev-card__img { aspect-ratio: 16 / 10; }
.rev-card--spot .rev-card__img { aspect-ratio: 21 / 9; }
.rev-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.96);   /* repos désaturé (langage home) */
  transform: scale(1.02);
  transition: filter 0.85s ease, transform 1.2s var(--spring-soft);
}
.rev-card:hover .rev-card__img img { filter: none; transform: scale(1); }
.rev-card__img-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--subtle); font-size: 26px;
  background: linear-gradient(135deg, #f3f4f3, #e4e6e4);
}
.rev-card__img-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,9,9,0.42) 0%, rgba(8,9,9,0) 46%);
}

/* pastille catégorie — verre clair */
.rev-card__badge {
  position: absolute; top: 13px; left: 14px; z-index: 2;
  font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
          backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* numéro — sur le visuel (fond sombre possible) */
.rev-card__num {
  position: absolute; top: 13px; right: 15px; z-index: 2;
  font-size: 12px; font-weight: 700; color: #fff; opacity: 0.85;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* — Corps — */
.rev-card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.rev-card--lead .rev-card__body { padding: 24px 26px 26px; }

.rev-card__meta {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--subtle); font-variant-numeric: tabular-nums;
}
.rev-card__dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rv-gold); flex-shrink: 0; }
.rev-card__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; color: var(--ink); }
.rev-card--lead .rev-card__title { font-size: clamp(24px, 2.4vw, 32px); }
.rev-card--spot .rev-card__title { font-size: clamp(20px, 1.8vw, 24px); }
.rev-card__title a { color: inherit; text-decoration: none; }
.rev-card__excerpt {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted);
  /* remplit l'espace dispo de la carte (les cartes d'une rangée s'égalisent en
     hauteur → plus de place = plus de texte) ; le surplus est rogné en fondu. */
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
          mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.rev-card--lead .rev-card__excerpt { font-size: 14px; }

/* CTA = composant DS .al-link (classe extra .rev-card__more pour le layout) */
.rev-card__more { margin-top: auto; padding-top: 4px; font-size: 11px; }

/* liseré doré qui se révèle en bas au survol */
.rev-card__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rv-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--spring-soft);
}
.rev-card:hover .rev-card__bar { transform: scaleX(1); }

/* ------------------------------------------------------------
   6. PAGINATION — « Charger plus » (composant DS .al-btn--gooey-white)
   ------------------------------------------------------------ */
.rev-more-wrap { display: flex; justify-content: center; padding: 46px 0 96px; }
.rev-more[hidden] { display: none; }
@media (max-width: 480px) { .rev-more-wrap { padding: 36px 0 64px; } }

/* ------------------------------------------------------------
   7. MOUVEMENT RÉDUIT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rev-hero .eyebrow,
  .rev-hero__title,
  .rev-hero__sub { animation: none; }
  .rev-card,
  .rev-card__img img,
  .rev-card__bar,
  .rev-cat,
  .rev-sort,
  .rev-cat__dot { transition: none; }
  .rev-card:hover { transform: none; }
  .rev-card:hover .rev-card__img img { transform: scale(1); }
}