/* ============================================================
   Dr Sarra Gattoussi, styles dédiés au blog
   Chargé uniquement sur l'index blog et les articles.
   Ne touche pas à styles.css (édité en parallèle).
   Réutilise les tokens et composants existants.
   ============================================================ */

/* ---------- Index : grille + rail de filtres ---------- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* Empêche une colonne de s'étirer à la largeur de son contenu
   (sinon le rail de filtres fait déborder toute la page sur mobile). */
.blog-layout > * { min-width: 0; }
.blog-rail { position: sticky; top: 104px; }
.blog-rail .eyebrow { margin-bottom: 16px; }
.blog-filters {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.blog-filter {
  appearance: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 11px 16px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.blog-filter:hover { color: var(--ink); border-color: var(--taupe); }
.blog-filter[aria-pressed="true"] {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
}
.blog-filter .blog-filter-n {
  font-weight: 400;
  opacity: .65;
  margin-left: 4px;
}

/* Carte masquée par le filtre */
.blog-card[hidden] { display: none !important; }

/* Vignette : vraie photo en plein cadre, repli sur l'iris si absente */
.blog-card-media { position: relative; }
.blog-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Date sur les cartes */
.blog-card-date {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.blog-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* Message quand un filtre ne renvoie rien */
.blog-empty {
  display: none;
  padding: 48px 8px;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
}
.blog-empty.is-on { display: block; }

@media (max-width: 880px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-rail { position: static; order: -1; }
  /* Filtres en chips qui reviennent à la ligne : tout reste visible,
     pas de scroll horizontal masqué (patientèle âgée). */
  .blog-filters {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .blog-filter { white-space: nowrap; flex: 0 0 auto; padding: 9px 14px; font-size: 13.5px; }
}

/* ---------- Article : photo principale en tête ---------- */
.article-head { max-width: 70ch; }
.article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.article-meta .r-k {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 700;
}
.article-meta time { font-size: 13px; color: var(--muted); }
.article-readtime { font-size: 13px; color: var(--muted); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--taupe); }

.article-hero {
  position: relative;
  margin: clamp(26px, 4vw, 44px) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sage-soft);
  border: 1px solid var(--rule);
}
.article-hero-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.article-hero-ph svg { width: 240px; height: auto; opacity: .8; }
.article-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-hero figcaption {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: 18px 20px 14px;
  width: 100%;
  font-size: 12.5px;
  color: var(--ivory);
  background: linear-gradient(to top, rgba(42,39,36,.66), rgba(42,39,36,0));
}

/* ---------- Bandeau auteur (fin d'article) ---------- */
.author-band { padding-block: clamp(20px, 4vw, 48px); }
.author-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(24px, 4vw, 44px);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.author-card .foliage {
  position: absolute;
  top: -30px; right: -20px;
  width: 200px; height: 260px;
  opacity: .1;
  pointer-events: none;
}
.author-portrait {
  position: relative;
  z-index: 1;
  align-self: end;
}
.author-portrait img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(42, 39, 36, .12));
}
.author-body {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(24px, 4vw, 44px);
}
.author-body .eyebrow { color: var(--terracotta); }
.author-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  margin: 10px 0 0;
  color: var(--ink);
}
.author-spec {
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 52ch;
  line-height: 1.55;
}
.author-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 640px) {
  .author-card { grid-template-columns: 1fr; text-align: center; }
  .author-portrait { width: 190px; margin: 0 auto; align-self: center; }
  .author-body { padding-bottom: clamp(20px, 5vw, 32px); }
  .author-spec { margin-inline: auto; }
  .author-actions { justify-content: center; }
  .article-meta { justify-content: flex-start; }
}