@media screen and (max-width: 4000px) {
  
    /* Thèmes pour mobile 
    body[data-theme="green"] .jabs-item {
        border-top: 6px solid var(--backg) !important;
    }
    
    body[data-theme="orange"] .jabs-item {
        border-top: 6px solid var(--backg) !important;
    }
    
    body[data-theme="red"] .jabs-item {
        border-top: 6px solid var(--backg) !important;
    }
    
    body[data-theme="black"] .jabs-item {
        border-top: 6px solid var(--backg) !important;
    }
    
    body[data-theme="bleu"] .jabs-item {
        border-top: 6px solid var(--backg) !important;
    }
    
    body[data-theme="purple"] .jabs-item {
        border-top: 6px solid var(--backg) !important;
    }*/
}

/* ==================== BASE STYLES ==================== */
.jabs-accordion {
    margin-top: -20px;
}

/* Élément accordion */
.jabs-item {
    border: 2px solid #d0d0d0;
   
    margin-bottom: 8px;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ==================== THÈMES COULEURS - FORCÉS ==================== */
/* Thème Green */
body[data-theme="green"] .jabs-item {
   border-left: 6px solid var(--jabs) !important;
}

/* Thème Orange */
body[data-theme="orange"] .jabs-item {
   border-left: 6px solid var(--jabs) !important;
}

/* Thème Red */
body[data-theme="red"] .jabs-item {
   border-left: 6px solid var(--jabs);
}

/* Thème Black */
body[data-theme="black"] .jabs-item {
    border-left: 6px solid var(--jabs) !important;
}

/* Thème Bleu */
body[data-theme="blue"] .jabs-item {
    border-left: 6px solid var(--jabs) !important;
}

/* Thème Purple */
body[data-theme="purple"] .jabs-item {
    border-left: 6px solid var(--jabs) !important;
}

/* Thème par défaut si aucun thème n'est défini */
body:not([data-theme]) .jabs-item {
    border-left: 6px solid #999999 !important;
}



/* ==================== THÈMES COULEURS - FORCÉS ==================== */
/* Thème Green */
body[data-theme="green"] .jabs-item.active {
   border-top: 6px solid var(--jabs) !important;
    border-left: 0.5px solid #cecece !important;
}

/* Thème Orange */
body[data-theme="orange"] .jabs-item.active {
   border-top: 6px solid var(--jabs) !important;
 border-left: 0.5px solid #cecece !important;
}

/* Thème Red */
body[data-theme="red"] .jabs-item.active {
   border-top: 6px solid var(--jabs);
   border-left: 0.5px solid #cecece !important;
}

/* Thème Black */
body[data-theme="black"] .jabs-item.active {
    border-top: 6px solid var(--jabs) !important;
    border-left: 0.5px solid #cecece !important;
}

/* Thème Bleu */
body[data-theme="blue"] .jabs-item.active {
   border-top: 6px solid var(--jabs) !important;
   border-left: 0.5px solid #cecece !important;
}

/* Thème Purple */
body[data-theme="purple"] .jabs-item.active {
    border-top: 6px solid var(--jabs) !important;
    border-left: 0.5px solid #cecece !important;
}

/* Thème par défaut si aucun thème n'est défini */
body:not([data-theme]) .jabs-item.active {
    border-top: 6px solid #999999 !important;
    border-left: 0.5px solid #cecece !important;
}




/* En-tête accordion */
.jabs-header {
    padding: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
  background: #f4f4f4;
    transition: background 0.3s ease;
}

.jabs-header:hover {
    background: #a9bbb747;
}

/* Titre */
.jabs-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* Flèche */
.jabs-arrow {
    position: absolute;
    right: 25px;
    transition: transform 0.4s ease;
}

.jabs-item.active .jabs-arrow {
    transform: rotate(180deg);
}

/* Contenu */
.jabs-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.jabs-item.active .jabs-content {
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    
}

.jabs-body {
    padding: 0px;
    color: #555;
}


/* ==================== MOBILE FIRST (320px+) ==================== */
@media screen and (max-width: 480px) {
    .jabs-accordion {
        margin-top: -10px;

     width: 135vw;;
    }
    
    .jabs-item {
        border-radius: 12px;
        /*margin-bottom: 10px;
        border-width: 1.5px;*/
      
    }
    
    
    
    .jabs-header {
        padding: 15px 12px;
    }
    
    .jabs-title {
        font-size: 15px;
        padding-right: 30px;
    }
    
    .jabs-arrow {
        right: 12px;
        font-size: 14px;
    }
    
    .jabs-body {
        padding: 0px;
        font-size: 14px;
    }
}

/* ==================== TABLETTES (481px - 768px) ==================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .jabs-accordion {
        margin-top: -15px;
    }
    
    .jabs-item {
        border-radius: 16px;
        margin-bottom: 10px;
    }
    
    .jabs-header {
        padding: 20px 18px;
    }
    
    .jabs-title {
        font-size: 16px;
    }
    
    .jabs-arrow {
        right: 18px;
    }
    
    .jabs-body {
        padding: 0px;
        font-size: 15px;
    }
}

/* ==================== PC / DESKTOP (769px+) ==================== */
@media screen and (min-width: 769px) {
    .jabs-accordion {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .jabs-item {
        margin-bottom: 12px;
    }
    
    .jabs-header {
        padding: 15px 30px;
    }
    
    .jabs-title {
        font-size: 19px;
    }
    
    .jabs-arrow {
        right: 30px;
        font-size: 18px;
    }
    
    .jabs-body {
        padding: 0px;
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ==================== GRANDS ÉCRANS (1200px+) ==================== */
@media screen and (min-width: 1200px) {
    .jabs-accordion {
        max-width: 1100px;
    }
    
    .jabs-item {
        border-radius: 22px;
    }
    
    .jabs-header {
        padding: 15px 35px;
    }
    
    .jabs-title {
        font-size: 20px;
    }
    
    .jabs-body {
        padding: 0px;
        font-size: 17px;
    }
}