/* ============================================================
   tractoshop_search — homepage.css  v1.0.8
   Hero, reassurance, pills marques & grille catégories
   v1.0.8 : cards avatar supprimées → pills texte plein-nom
   ============================================================ */

/* ── Hero ── */
.tss-hero {
  background: linear-gradient(135deg, #1A64B7 0%, #0d3d7a 100%);
  padding: 0;
  overflow: hidden;
  position: relative;
}

.tss-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.tss-hero__content {
  flex: 1;
  color: white;
  max-width: 580px;
}

.tss-hero__title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 14px;
  letter-spacing: -.5px;
}

.tss-hero__subtitle {
  font-size: 16px;
  opacity: .85;
  margin: 0 0 24px;
  line-height: 1.6;
}

.tss-hero__badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tss-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  color: white;
  font-weight: 500;
  backdrop-filter: blur(4px);
}

.tss-hero__image {
  flex-shrink: 0;
  width: 220px;
  opacity: .85;
}

.tss-hero__tractor-svg {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .tss-hero__image { display: none; }
  .tss-hero__inner { padding: 36px 16px 30px; }
}

/* ── Reassurance ── */
.tss-reassurance {
  background: white;
  border-bottom: 1px solid #dde3ec;
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.tss-reassurance__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  border-right: 1px solid #dde3ec;
  flex: 1;
  justify-content: center;
  transition: background .15s;
}

.tss-reassurance__item:last-child { border-right: none; }
.tss-reassurance__item:hover { background: #f5f7fa; }
.tss-reassurance__icon { font-size: 20px; flex-shrink: 0; }

@media (max-width: 767px) {
  .tss-reassurance { flex-wrap: wrap; }
  .tss-reassurance__item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid #dde3ec; }
}

/* ── Titres de section ── */
.tss-section-title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 24px;
  line-height: 1.25;
}

.tss-section-title__accent { color: #1A64B7; }

/* ── Sections wrapper ── */
.tss-brands-section,
.tss-cats-section {
  padding: 48px 0;
}

.tss-cats-section { background: #f5f7fa; }

/* ═══════════════════════════════════════════════════════════
   PILLS MARQUES — v1.0.8 (remplace la grille avec avatars)
   Affiche le nom complet de chaque marque en pill cliquable.
   ═══════════════════════════════════════════════════════════ */

.tss-brands-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tss-brand-pill {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid #dde3ec;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #2d3a52;
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s, color .16s, background .16s, box-shadow .16s, transform .14s;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.tss-brand-pill:hover {
  border-color: #1A64B7;
  color: #1A64B7;
  background: #eef3fb;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(26,100,183,.15);
  transform: translateY(-2px);
}

@media (max-width: 575px) {
  .tss-brand-pill { font-size: 13px; padding: 7px 16px; }
}

/* ── Grille catégories ── */
.tss-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.tss-cat-card {
  background: white;
  border: 1px solid #dde3ec;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  color: #1a1a2e;
  font-size: 13px;
  font-weight: 500;
  transition: all .16s;
}

.tss-cat-card:hover {
  border-color: #5EB229;
  color: #5EB229;
  text-decoration: none;
  background: #edf7e3;
}

.tss-cat-card__icon { font-size: 18px; flex-shrink: 0; }
.tss-cat-card__name { flex: 1; }

.tss-cat-card__arrow {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .14s, transform .14s;
  color: #5EB229;
}

.tss-cat-card:hover .tss-cat-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 575px) {
  .tss-cats-grid { grid-template-columns: 1fr 1fr; }
}