/* ================================================
   KREMLIMPRO EVENTS - CSS COMPLET
   Fichier : /wp-content/themes/votre-theme/css/kremlimpro-events.css
   ================================================ */
/* Styles css krem_eventCategoryList */
.div0 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	background-color: #ededefff;
}

/* Div1 superposés */
.div1 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

/* Div2 horizontaux (responsive) */
.div2-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: 100%;
}

.div2 {
/* 	min-height: 100px; */
	padding: 10px;
}

.div2:nth-child(1) {
	max-width: 250px;
	flex:1 1;
/* 	background-color: #ffcccc; */
}

.div2:nth-child(2) {
/* 	background-color: #ccffcc; */
	flex:1 1;
}
.div2:nth-child(3) {
/* 	background-color: #ccffcc; */
	flex:1 1;
}

/* Div3 avec 3 Div4 superposés */
.div3 {
	display: flex;
	flex-direction: column;
/* 	gap: 5px; */
	height: 100%;
}

.div4 {
	display: flex;
/* 	min-height: 50px; */
/* 	padding: 5px; */
}

.div4:nth-child(1) { 
/* 	background-color: #cceeff; */
/* 	padding: 0.5rem 0.75rem; */
}
.div4:nth-child(2) {
	flex: 1;
/* 	background-color: #ffccff; */
	padding: 0.5rem 0.75rem;
}
.div4:nth-child(3) { background-color: #ffffcc; }

/* Div5 horizontaux (responsive) */
.div5-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.div5 {
	flex: 1;
	min-height: 100px;
	padding: 10px;
}

.div5:first-child {
	background-color: #e6e6fa;
}

.div5:last-child {
	background-color: #f0e68c;
}

/* Forcer .div2 à prendre toute la largeur disponible */
.em-accordion .div2-container {
    width: 100% !important; /* Surcharge les styles existants */
}

.em-accordion .div2:nth-child(2) {
    flex: 1 !important; /* Prend toute la largeur */
    width: 100% !important; /* Redondant mais utile */
    min-width: 0 !important; /* Empêche les débordements */
    box-sizing: border-box !important; /* Inclut padding/border dans la largeur */
}

/* Supprimer les marges/paddings indésirables */
.em-accordion summary,
.em-accordion details,
.em-accordion .div2-container, 
.em-accordion .div2 {
    padding: 0 !important;
    margin: 0 !important;
}
.em-item-image {
    width: auto !important;
    max-width: 100% !important;
}


/* Responsive design */
@media (max-width: 600px) {
	.div2-container, .div5-container {
		flex-direction: column;
	}
}

/* ============================================================
   SLIDER — Layout + Animation
   ============================================================ */

.kremlimpro-slider-wrapper {
    position:   relative;
    width:      100%;
    overflow:   hidden;
}

/* Le track est un flex HORIZONTAL — les cartes côte à côte */
.kremlimpro-slider-track {
    display:    flex;
    flex-direction: row;        /* ← LIGNE, pas colonne */
    gap:        0;
    width:      100%;
    position:   relative;
    min-height: 80px;           /* évite le collapse pendant l'anim */
}

/* Carte cachée = hors flux, invisible */
.kremlimpro-event-slide.kremlimpro-hidden {
    display:    none;
}

/* Carte visible = dans le flux, prend 100% */
.kremlimpro-event-slide.kremlimpro-visible {
    display:    block;
    width:      100%;
}

/* Carte en animation (hors flux absolu) */
.kremlimpro-event-slide.krem-animating {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    display:    block;
    z-index:    10;
}

/* ============================================================
   CONTRÔLES — boutons + dots SUR UNE LIGNE
   ============================================================ */

.kremlimpro-slider-controls {
    display:        flex;
    flex-direction: row;        /* ← LIGNE */
    align-items:    center;
    justify-content: center;
    gap:            12px;
    margin-top:     10px;
}

.kremlimpro-dots {
    display:        flex;
    flex-direction: row;        /* ← LIGNE */
    align-items:    center;
    gap:            8px;
}

.kremlimpro-dot {
    width:          10px;
    height:         10px;
    border-radius:  2px;
    background:     #cccccc;
    border:         none;
    cursor:         pointer;
    padding:        0;
    display:        inline-block;
    transition:     background 0.2s ease, transform 0.2s ease;
}

.kremlimpro-dot.active {
    background:     #e84747;
    transform:      scaleX(1.8);
}

/* Boutons Prev / Next */
.kremlimpro-prev,
.kremlimpro-next {
    background:     #ededef;
    border:         1px solid #cccccc;
    border-radius:  4px;
    padding:        4px 12px;
    cursor:         pointer;
    font-weight:    700;
    font-size:      1.3em;
    color:          #333333;
    line-height:    1;
    transition:     background 0.2s ease, color 0.2s ease;
}

.kremlimpro-prev:hover,
.kremlimpro-next:hover {
    background:     #e84747;
    color:          #ffffff;
    border-color:   #e84747;
}

.kremlimpro-prev:disabled,
.kremlimpro-next:disabled {
    opacity:        0.3;
    cursor:         not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .kremlimpro-event-details {
        flex-direction: column;
        gap: 10px;
    }
}
/* ============================================================
   KREMLIMPRO SLIDER — CSS COMPLET
   Fichier : /wp-content/themes/dynamico-child02/css/kremlimpro-slider.css
   ============================================================ */

/* ============================================================
   WRAPPER & TRACK
   ============================================================ */
.kremlimpro-slider-wrapper {
    position:   relative;
    width:      100%;
    overflow:   hidden;
}

.kremlimpro-slider-track {
    display:        flex;
    flex-direction: row;
    width:          100%;
    position:       relative;
    min-height:     80px;
}

/* ============================================================
   SLIDES
   ============================================================ */
.kremlimpro-event-slide.kremlimpro-hidden {
    display: none;
}

.kremlimpro-event-slide.kremlimpro-visible {
    display: block;
    width:   100%;
}

.kremlimpro-event-slide.krem-animating {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    display:  block;
    z-index:  10;
}

/* ============================================================
   CONTRÔLES — boutons + dots sur une ligne
   ============================================================ */
.kremlimpro-slider-controls {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin-top:      10px;
}

.kremlimpro-dots {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    gap:             6px;
}

.kremlimpro-dot {
    width:           10px;
    height:          10px;
    border-radius:   50%;
    background:      #cccccc;
    cursor:          pointer;
    transition:      background 0.2s ease, transform 0.2s ease;
}

.kremlimpro-dot.active {
    background:      #e84747;
    transform:       scale(1.3);
}

.kremlimpro-prev,
.kremlimpro-next {
    background:      #ffffff;
    border:          1px solid #cccccc;
    border-radius:   50%;
    width:           32px;
    height:          32px;
    font-size:       18px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s ease,
                     border-color 0.2s ease,
                     color 0.2s ease;
}

.kremlimpro-prev:hover,
.kremlimpro-next:hover {
    background:      #e84747;
    border-color:    #e84747;
    color:           #ffffff;
}

.kremlimpro-prev:disabled,
.kremlimpro-next:disabled {
    opacity:         0.3;
    cursor:          default;
    pointer-events:  none;
}

/* ============================================================
   CARTE ÉVÉNEMENT — lien + div0
   ============================================================ */
.kremlimpro-event-link {
    text-decoration: none;
    color:           inherit;
    display:         block;
    cursor:          pointer;
}

.kremlimpro-event-div0 {
    display:         flex;
    flex-direction:  column;
    gap:             8px;
    border:          2px solid #000000;
    border-radius:   0 0 6px 6px !important;
    padding:         12px;
    background:      #ffffff;
    transition:      transform 0.2s ease,
                     box-shadow 0.2s ease,
                     border-color 0.2s ease;
}

.kremlimpro-event-link:hover .kremlimpro-event-div0 {
    transform:       translateY(-3px);
    box-shadow:      0 6px 16px rgba(0, 0, 0, 0.15);
    border-color:    #e84747;
}

/* ============================================================
   NOM ÉVÉNEMENT
   ============================================================ */
.kremlimpro-event-name {
    font-size:       16px;
    font-weight:     bold;
    color:           #2c3e50;
    text-align:      center;
}

/* ============================================================
   LIGNE DÉTAILS — 3 colonnes
   ============================================================ */
.kremlimpro-event-details {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
}

/* ============================================================
   CALENDRIER SVG
   ============================================================ */
.kremlimpro-event-calendar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            1;
}

.kremlimpro-event-calendar img {
    height:          50px;
    width:           auto;
}

/* ============================================================
   DATE — jour / mois
   ============================================================ */
.kremlimpro-event-date {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    flex:            1;
    gap:             2px;
    line-height:     1;
}

.kremlimpro-day {
    font-size:       48px;
    font-weight:     700;
    color:           #e84747;
    text-decoration: none;
    line-height:     1;
}

.kremlimpro-month {
    font-size:       30px;
    font-weight:     600;
    color:           #2c3e50;
    text-decoration: none;
    line-height:     1;
    text-transform:  capitalize;
}

/* ============================================================
   LOGO KREMLIMPRO
   ============================================================ */
.kremlimpro-event-logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            1;
}

.kremlimpro-event-logo img {
    height:          50px;
    width:           auto;
}