/* ============================================================
   Styles pour le shortcode [liste_evenements]
   Fichier : /plugins/list_cpt/liste-evenements.css
============================================================ */

.se-prochains-wrap {
    width: 100%;
    box-sizing: border-box;
}
.se-prochains-inner {
    max-width: 1650px;
    margin: 0 auto;
}
.se-prochains-inner h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--bleu, #152E49);
}

/* Liste */
.se-prochains-list {
    border-top: 1px solid #152E49;
    margin-top: 60px;
}
.se-prochain-item {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 0;
    border-bottom: 1px solid #152E49;
    text-decoration: none;
    color: inherit;
}
.se-prochain-item:hover { opacity: 0.8; }



@media (max-width: 1000px) {
    .se-prochains-list{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 20px;
  }
    
  .se-prochain-item  {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 700px) {
    .se-prochains-list{
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    gap: 20px;
  }
}


/* Image */
.se-prochain-image {
    flex-shrink: 0;
    width: 210px;
    height: 150px;
    border-radius: 14px;
    overflow: hidden;
    background: #ddd;
}
.se-prochain-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Infos */
.se-prochain-info {
    flex: 1;
}
.se-prochain-info h3 {
    margin: 0 0 8px;
    color: var(--bleu, #152E49);
}
.se-prochain-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vert, #00AD79);
}
.se-prochain-meta img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

/* Flèche droite */
.se-prochain-arrow {
    flex-shrink: 0;
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    margin-bottom: 0 !important;
}

/* Message si liste vide */
.se-prochains-empty {
    text-align: center;
    color: var(--bleu, #152E49);
    padding: 40px 0;
}

@media (max-width: 600px) {
    .se-prochain-image { width: 100px; height: 80px; }
    .se-prochain-arrow { width: 44px; height: 44px; }
}