/* ============================================================
   Événement Slider — evenement-slider.css
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    --evs-gap: 1.25rem;
    --evs-radius: 0.75rem;
    --evs-accent: #1a6fc4;
    --evs-accent-hover: #145aa0;
    --evs-text: #1e2330;
    --evs-muted: #5a6478;
    --evs-bg-card: #ffffff;
    --evs-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --evs-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.14);
    --evs-transition: 0.3s ease;
}

/* ---------- Wrapper ---------- */
.evs-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 0;
}
/* Barre de filtres */
.evs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.evs-filter {
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
}
.evs-filter--active {
    background: var(--teal); 
    color: #fff;
}
.tag-btn {
	border: 1.5px solid var(--border);
	background: #fff;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 20px;
	cursor: pointer;
	transition: all .15s;
}
.tag-btn:hover {
	border-color: var(--teal);
	color: var(--teal-dark);
}
.tag-btn.evs-filter--active {
	background: var(--teal);
	border-color: var(--teal);
	color: #fff;
}
/* ---------- Track ---------- */
.evs-track-outer {
    overflow: hidden;
    width: 100%;
	padding: 20px 0;
}

.evs-track {
    display: flex;
    gap: var(--evs-gap);
    transition: transform var(--evs-transition);
    will-change: transform;
    align-items: stretch;
}

/* ---------- Slides ---------- */
.evs-slide {
    flex-shrink: 0;
    /* La largeur est calculée dynamiquement par le JS */
    box-sizing: border-box;
}
.evs-slide.post {
	min-height : 410px;
}
.evs-col {
    display: flex;
    flex-direction: column;
    gap: 20px;              /* espace vertical entre les rangées */
}
.evs-col > .evs-slide {
    width: 100%;            /* la largeur est portée par la colonne, définie en JS */
}
/* ---------- Card ---------- */
.evs-card {
    display: flex;
    flex-direction: column;
    height: 99%;
    background: var(--evs-bg-card);
    border-radius: var(--evs-radius);
    box-shadow: var(--evs-shadow);
    overflow: hidden;
    transition: box-shadow var(--evs-transition), transform var(--evs-transition);
}
/* Bandeau dans le coin gauche de la carte */
/*
.evs-card::before {
    
    position: relative;
    top: 20px;
    left: -60px;
    width: 180px;
	z-index: 10;

    background: #82b5d5;
    color: white;
    text-align: center;
    padding: 6px 0;
	font-size : 14px;
	border: 1px solid #82b5d5;
	
    transform: rotate(-45deg);
}
.evs-card.evenement::before {
	content: "Evénement";
}
.evs-card.post::before {
	content: "Article";
}
*/
.evs-card:hover {
    box-shadow: var(--evs-shadow-hover);
    transform: translateY(-3px);
}

/* ---------- Media ---------- */

.evs-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8edf4;
	display:flex;
	flex-direction:column;
	padding : 10px 10px 10px 100px;
	background-repeat:no-repeat;
	background-size: cover;
	background-position: left;
	border-radius : 10px;
	height : 70px;
	margin : 15px auto;
}

.evs-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.evs-card:hover .evs-card__img {
    transform: scale(1.04);
}

.evs-card__img--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dbe4f0 0%, #c4d0e5 100%);
}
/*Layout 3*/
   article.evs-card.layout-3 {
	   padding : 20px;
	   flex-direction:row;
	   column-gap: 10px;
   }
  .agenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  .agenda-card {
    background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm) !important; padding: 18px; display: flex; gap: 16px; align-items: flex-start;
    transition: all .2s;
  }
  .agenda-card:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-2px); }
  .agenda-date {
    flex-shrink: 0; width: 60px; height: 60px; text-align: center;
    background: var(--teal-pale); color: var(--teal-dark);
    border-radius: 12px; padding: 10px 6px; font-family: 'Nunito', sans-serif;
  }
  .agenda-date .day { font-size: 24px; font-weight: 800; line-height: 1; }
  .agenda-date .month { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-top: 2px; }
  .agenda-content h3 { margin: 0 0 4px; color: var(--ink); font-size: 15.5px; }
  .agenda-content p { margin: 0; color: var(--muted); font-size: 13.5px; }
  .agenda-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--teal-dark); font-weight: 600; }

/* ---------- Body ---------- */

.evs-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.25rem 1rem;
    gap: 0.5rem;
	justify-content: space-between;
}
.evs-card__body p {
	margin : 0;
}
.evs-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--evs-text);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.evs-card__dates,
.evs-card__lieu {
    font-size: 0.7rem;
    color: var(--evs-muted);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}
.evs-card__lieu div,.body1 div  {
	line-height : 1em;
}
.evs-icon {
    flex-shrink: 0;
    font-style: normal;
}
.evs-card__description {
    font-size: 0.875rem;
    color: var(--evs-muted);
    line-height: 1.5;
    flex: 1;
    /* Limite à 3 lignes avec ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evs-card__link {
    display: block;
    margin-top: 0.75rem;
    color: #47B385!important;
    border-radius: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    align-self: flex-end;
    transition: background var(--evs-transition), transform 0.15s ease;
	text-align : center
}

.evs-card__link:hover {
    color: #82b5d5!important;
    transform: translateX(2px);
}
.evs-card__tags.vide {
	opacity : 0;
}
/* ---------- Controls ---------- */
.evs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.evs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid #82b5d5 ;
    background: transparent;
    color: var(--evs-accent);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--evs-transition), color var(--evs-transition);
    line-height: 1;
    padding: 0;
}

.evs-btn:hover {
    background: #e9f2ef;
    color: #fff;
}

.evs-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ---------- Dots ---------- */
.evs-dots {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.evs-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: none;
    background: #c4cdd8;
    cursor: pointer;
    padding: 0;
    transition: background var(--evs-transition), transform var(--evs-transition);
}

.evs-dot--active {
    background: #82b5d5;
    transform: scale(1.35);
}

/* ---------- Empty state ---------- */
.evs-empty {
    text-align: center;
    color: var(--evs-muted);
    font-style: italic;
    padding: 2rem 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .evs-wrapper[data-posts-per-view] {
        /* Sur mobile on force 1 slide visible */
        --evs-ppv-override: 1;
    }
}