/* =====================================================================
   LE LABO — tutos.css  (liste des tutoriels, calée sur "Les tutos")
   ===================================================================== */

.tutos-page { padding-block: 56px 80px; }

/* En-tête : titre + sous-titre à gauche, recherche à droite */
.tutos-head { max-width: var(--w-nav); margin: 0 auto 28px; padding-inline: var(--space-5); display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--space-5); }
.tutos-head h1 { font-size: var(--h2); }
.tutos-head p { margin-top: 14px; }
.tutos-search { width: 418px; max-width: 100%; align-self: center; position: relative; }
.tutos-search input { width: 100%; height: 39px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; padding: 0 18px 0 44px; font-family: var(--font-body); font-size: var(--t-base); box-shadow: var(--shadow-btn); }
.tutos-search input::placeholder { color: var(--ink); }
.tutos-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; color: var(--ink); }

/* Filtres (pills) */
.tutos-filters { max-width: var(--w-nav); margin: 0 auto 24px; padding-inline: var(--space-5); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.filter-pill { min-height: 39px; padding: 7px 18px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: var(--t-base); box-shadow: var(--shadow-btn); cursor: pointer; }
.filter-pill.is-active { background: var(--ink); color: #fff; }
.filter-pill[disabled] { background: var(--gray-light); cursor: not-allowed; box-shadow: none; }

/* Titre de section d'univers */
.tutos-section-title { max-width: var(--w-nav); margin: 8px auto 20px; padding-inline: var(--space-5); font-size: var(--h3); color: var(--accent-strong); }

/* Grille de cartes (3 colonnes, 416px, gap 49) */
.tutos-grid { max-width: var(--w-nav); margin: 0 auto; padding-inline: var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Carte tuto */
.tuto-card { width: 100%; height: 577px; display: flex; flex-direction: column; padding: 24px 29px; border: 2px solid var(--ink); border-radius: 40px; background: #fff; box-shadow: var(--shadow-soft); }
.tuto-card.is-done { background: var(--accent); }
.tuto-card__univ { font-family: var(--font-display); font-size: 20px; color: #000; }
.tuto-card__thumb { width: 100%; height: 202px; border-radius: 16px; object-fit: cover; margin-top: 16px; border: 2px solid var(--ink); }
.tuto-card__title { font-family: var(--font-display); font-size: var(--h4); color: #000; line-height: 1.1; margin-top: 18px; }
.tuto-card__desc { font-size: var(--t-base); color: #000; margin-top: 10px; }
.tuto-card__foot { margin-top: auto; }
/* .tuto-progress : style partagé dans style.css */
.tuto-card__btns { display: flex; gap: 12px; }
.tuto-card__btns .btn { flex: 1; }

.tutos-empty { text-align: center; color: var(--gray); padding: 60px 0; }

@media (max-width: 1100px) { .tutos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px) {
  .tutos-head { grid-template-columns: 1fr; }
  .tutos-search { width: 100%; }
  .tutos-grid { grid-template-columns: 1fr; }
  .tuto-card { max-width: 460px; margin-inline: auto; }
}