.top10-header {margin-bottom: 4rem;}
.bloc-top10 h2 {font-size: clamp(2.4rem, 4vw, 4rem); margin: 0; text-align: center;}
.top10-grille {display: flex; flex-direction: column; gap: 4rem;}
.top10-placeholder {padding: 4rem; opacity: .4; font-size: 1.4rem;}

/* === ITEM — mobile : card avec image en haut === */
.top10-item {position: relative; border-radius: var(--border-radius); overflow: hidden;}
.top10-item-inner {display: flex; flex-direction: column; height: 100%; text-decoration: none;}


/* === IMAGE — mobile === */
.top10-image-wrap {position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; overflow: hidden; flex-shrink: 0;  border-radius: var(--border-radius); background-color: var(--couleur-background-light); background-image: url(/wp-content/themes/iwego-child/images/grappe-couleur.svg); background-repeat: no-repeat; background-size: 12rem; background-position: center; }
.top10-image {width: 100%; height: 100%; background-size: cover; background-position: center; background-color: var(--couleur-background-dark); transition: transform 500ms ease;}
.top10-item:hover .top10-image {transform: scale(1.06);}

/* === CONTENU — mobile === */
.top10-content {padding: 1.5rem; flex: 1;}
.top10-commune {font-size: 1.4rem; color: var(--couleur-texte-light); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem;}
.top10-commune i {color: var(--couleur-cta); font-size: 1.1rem;}
.top10-item h3 {font-family: var(--fontSecondaire); margin: 0 0 1.5rem; line-height: 1.25; transition: var(--transition-light);}
.top10-excerpt {font-size: 1.5rem; color: var(--couleur-texte-light); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}

@media (min-width: 768px) {
}

@media (min-width: 1025px) {
    .top10-grille {gap: 0;}
    .top10-item {border-radius: 0; overflow: visible;}
    .top10-item-inner {flex-direction: row; align-items: center; gap: 3rem; padding: 2.5rem 0;}
    .top10-item:nth-child(even) .top10-item-inner {flex-direction: row-reverse;}
    .top10-item:hover h3 {color: var(--couleur-cta);}

    /* Numéro dans le flux */
    .top10-rank {position: static; background: transparent; color: var(--couleur-cta); font-size: 5rem; padding: 0; border-radius: 0; width: 7rem; text-align: center; flex-shrink: 0;}
    .top10-item--hero .top10-rank {font-size: 7.5rem; width: 10rem;}

    /* Image taille fixe */
    .top10-image-wrap {width: 40rem; height: auto; aspect-ratio: 4 / 3;}

    /* Contenu texte */
    .top10-content {padding: 0; background: transparent; flex: 1; min-width: 0;}
    .top10-excerpt {-webkit-line-clamp: 4;}
}

@media (min-width: 1400px) {
    .top10-rank {font-size: 6rem; width: 9rem;}
    .top10-item--hero .top10-rank {font-size: 9rem; width: 12rem;}
    .top10-item-inner {column-gap: 8rem; padding: 3rem 0;}
    .top10-image-wrap {width: 45rem;}
    .top10-grille {row-gap: 4rem;}
    .top10-header {margin-bottom: 5rem; margin-top: 8rem;}
}


@media (min-width: 1800px) {
    .top10-item-inner {column-gap: 10rem;}
    .top10-image-wrap {width: 50rem;}
}

@media (min-width: 2200px) {
.top10-commune {font-size: 1.5rem;}
}