/* =====================================================
   rank.css — Pages de classement (média gauche + texte droite)
   ===================================================== */

/* --- Conteneur général --- */
#rank_content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* --- Titre H1 --- */
.container_title {
  margin: 1.25rem 0 1.75rem;
}

.container_title h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 0.5rem;
}

.rank-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-muted, #555);
  margin: 0;
}

/* --- Liste des items --- */
.container_items {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* --- Section individuelle (rank_section) ---
   Grille 2 colonnes : [media | title + content]
   Ordre DOM : title → content → media
   CSS order inverse le rendu visuel
   -------------------------------------------- */
.rank_section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media title"
    "media content";
  gap: 0 2rem;
  border-top: 2px solid var(--color-primary, #e63946);
  padding-top: 1.5rem;
}

.section_title  { grid-area: title; }
.section_content { grid-area: content; }
.section_media  { grid-area: media; }

/* --- Titre H2 --- */
.section_title h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 1rem;
}

.section_title h2 span {
  color: var(--color-primary, #e63946);
  margin-right: 0.3em;
}

/* --- Contenu texte --- */
.section_content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sc_text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text, #1a1a1a);
}

.sc_text p {
  margin: 0;
}

.sc_text a {
  color: var(--color-primary, #e63946);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc_text a:hover {
  text-decoration: none;
}

/* --- Bloc média --- */
.section_media {
  align-self: start;
}

.media_content {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Image simple */
.media_content > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Vidéo native */
.media_content > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #000;
}

/* --- YouTube lazy embed --- */
.media_video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.media_video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.media_video:hover img {
  opacity: 0.85;
}

/* Bouton play */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: none; /* le clic est sur .media_video */
  transition: transform 0.15s ease;
}

.media_video:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

.play-btn svg {
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* iframe injectée par rank.js */
.media_video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* --- Responsive tablette --- */
@media (max-width: 768px) {
  .rank_section {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "content";
    gap: 1rem 0;
  }
}

/* --- Responsive mobile --- */
@media (max-width: 600px) {
  #rank_content {
    padding: 0 1rem 2rem;
  }

  .container_title {
    margin: 1rem 0 1.25rem;
  }

  .container_items {
    gap: 2rem;
  }
}