/* ============================================================
   INFINY TITRES DIFFUSÉS — titres.css  v1.1
   ============================================================ */

.it-wrap {
  --it-accent: #1a1f8f;
  --it-cols:   5;
  --it-text:   #1a1a1a;
  --it-muted:  #666;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--it-text);
}

/* ── EN-TÊTE ── */
.it-header        { text-align:center; margin-bottom:36px; }
.it-main-title    { font-size:clamp(22px,4vw,34px); font-weight:800; color:var(--it-accent); margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em; }
.it-subtitle      { font-size:15px; color:var(--it-muted); margin:0; }
.it-empty         { text-align:center; color:var(--it-muted); padding:40px; }

/* ── GRILLE ── */
.it-grid {
  display:               grid;
  grid-template-columns: repeat(var(--it-cols), 1fr);
  gap:                   20px;
}

/* ── CARTE ── */
.it-card {
  background:  #fff;
  overflow:    hidden;
  transition:  transform .2s, box-shadow .2s;
  cursor:      default;
  position:    relative;
}
.it-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Cover carrée */
.it-card-cover {
  position:     relative;
  aspect-ratio: 1 / 1;
  overflow:     hidden;
  background:   #f0f0f0;
}
.it-card-cover img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .35s;
}
.it-card:hover .it-card-cover img { transform: scale(1.04); }

.it-cover-ph {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-size:40px; background:#f5f5f5;
}

/* Corps texte */
.it-card-body {
  padding:        10px 4px 36px;   /* espace en bas pour les boutons */
  position:       relative;
}
.it-card-title {
  font-size:      14px;
  font-weight:    700;
  color:          var(--it-text);
  margin-bottom:  4px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.it-card-artist {
  font-size:      14px;
  font-weight:    700;             /* gras */
  color:          var(--it-accent);
  margin-bottom:  4px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.it-card-time {
  font-size:            13px;
  color:                var(--it-muted);
  font-variant-numeric: tabular-nums;
}

/* ── BOUTONS LIENS (bas droite) ── */
.it-card-links {
  position:    absolute;
  bottom:      8px;
  right:       4px;
  display:     flex;
  gap:         5px;
  align-items: center;
}
.it-link-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          none;
  text-decoration: none;
  transition:      transform .15s, opacity .15s;
  opacity:         .75;
  flex-shrink:     0;
}
.it-link-btn:hover { opacity:1; transform:scale(1.15); }

/* YouTube — rouge */
.it-link-yt {
  background: #ff0000;
  color:      #fff;
}
.it-link-yt svg { width:13px; height:13px; }

/* iTunes — gradient Apple Music */
.it-link-it {
  background: linear-gradient(135deg, #fc3c44, #ff6a4a);
  color:      #fff;
}
.it-link-it svg { width:13px; height:13px; }

/* ── RESPONSIVE ── */
@media (max-width:1100px) { .it-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:860px)  { .it-grid { grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (max-width:580px)  {
  .it-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .it-card-body { padding:8px 2px 32px; }
  .it-card-title, .it-card-artist { font-size:13px; }
  .it-card-time { font-size:12px; }
}

/* ── ANIMATION NOUVEAUX TITRES ── */
@keyframes it-slide-in {
  from { opacity:0; transform:translateY(-16px) scale(.97); }
  to   { opacity:1; transform:translateY(0)     scale(1);   }
}
.it-card-new {
  animation: it-slide-in .45s cubic-bezier(.22,.68,0,1.2) both;
}