/*
 * Index /yoga-pour/ — Hors du tapis
 * Variables CSS liées aux tokens de theme.json.
 */

:root {
  --yi-bg:           var(--wp--preset--color--yi-warm-white, #faf8f4);
  --yi-sand:         var(--wp--preset--color--yi-sand, #f5f0e8);
  --yi-sand-deep:    var(--wp--preset--color--yi-sand-deep, #e8dfd2);
  --yi-clay:         var(--wp--preset--color--yi-clay, #c4a882);
  --yi-earth:        var(--wp--preset--color--yi-earth, #6b5a45);
  --yi-charcoal:     var(--wp--preset--color--yi-charcoal, #2d2821);
  --yi-sage:         var(--wp--preset--color--yi-sage, #8a9a7b);
  --yi-font-display: var(--wp--preset--font-family--yi-display, 'Cormorant Garamond', Georgia, serif);
  --yi-font-body:    var(--wp--preset--font-family--yi-body, 'Outfit', -apple-system, sans-serif);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--yi-font-body); background: var(--yi-bg); color: var(--yi-charcoal); }
.wrap { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

.bc { font-size: .75rem; color: var(--yi-clay); margin-bottom: 28px; }
.bc a { color: var(--yi-sage); text-decoration: none; }
.bc span { margin: 0 4px; }

h1 { font-family: var(--yi-font-display); font-size: 1.7rem; font-weight: 500; color: var(--yi-charcoal); margin-bottom: 8px; }
.intro { font-size: .95rem; color: var(--yi-earth); margin-bottom: 28px; line-height: 1.6; }

/* Filtres */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter {
  font-family: var(--yi-font-body);
  font-size: .8rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--yi-sand-deep);
  background: #fff;
  color: var(--yi-earth);
  cursor: pointer;
  transition: all .15s;
}
.filter:hover { border-color: var(--yi-sage); color: var(--yi-sage); }
.filter.active { background: var(--yi-sage); border-color: var(--yi-sage); color: #fff; }

/* Grille */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media(max-width: 600px) { .cards { grid-template-columns: 1fr 1fr; } }
@media(max-width: 400px) { .cards { grid-template-columns: 1fr; } }

.rcard { background: #fff; border: 1.5px solid var(--yi-sand-deep); border-radius: 10px; padding: 16px; text-decoration: none; display: block; transition: border-color .15s; }
.rcard:hover { border-color: var(--yi-sage); }
.rcard.hidden { display: none; }
.rcard-title { font-size: .88rem; font-weight: 700; color: var(--yi-charcoal); margin-bottom: 5px; line-height: 1.3; }
.rcard-voix { font-size: .78rem; font-style: italic; color: var(--yi-earth); line-height: 1.4; }

.no-results { text-align: center; color: var(--yi-clay); font-size: .88rem; padding: 32px; display: none; }