/* Barre d'onglets */
.acf-tab-group {
    border-bottom: 1px solid #d0d4da;
    display: flex;
    gap: 4px;
    padding-left: 0;
}

/* Base commune */
.acf-tab-group li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    border: 1px solid transparent;
    border-bottom: none;
    color: #1d2327;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

/* Couleurs pastelles par onglet (1 → 10) */
.acf-tab-group li:nth-child(1) a { background: #ffe3ea !important; }
.acf-tab-group li:nth-child(2) a { background: #fff1d0 !important; }
.acf-tab-group li:nth-child(3) a { background: #e2f7c9 !important; }
.acf-tab-group li:nth-child(4) a { background: #d7f0ff !important; }
.acf-tab-group li:nth-child(5) a { background: #e6e0ff !important; }
.acf-tab-group li:nth-child(6) a { background: #ffdff3 !important; }
.acf-tab-group li:nth-child(7) a { background: #dde6ff !important; }
.acf-tab-group li:nth-child(8) a { background: #ddfff1 !important; }
.acf-tab-group li:nth-child(9) a { background: #ffe6d1 !important; }
.acf-tab-group li:nth-child(10) a { background: #f0f0ff !important; }

/* Hover + actif */
.acf-tab-group li a:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}



/* Onglet actif : même couleur mais plus soutenue */
.acf-tab-group li:nth-child(1).active a { background: #ffcad8 !important; }
.acf-tab-group li:nth-child(2).active a { background: #ffe0a3 !important; }
.acf-tab-group li:nth-child(3).active a { background: #c9f1a2 !important; }
.acf-tab-group li:nth-child(4).active a { background: #bfe4ff !important; }
.acf-tab-group li:nth-child(5).active a { background: #d3c7ff !important; }
.acf-tab-group li:nth-child(6).active a { background: #ffbfdc !important; }
.acf-tab-group li:nth-child(7).active a { background: #c2d3ff !important; }
.acf-tab-group li:nth-child(8).active a { background: #c3ffe3 !important; }
.acf-tab-group li:nth-child(9).active a { background: #ffd1a6 !important; }
.acf-tab-group li:nth-child(10).active a { background: #dad9ff !important; }

.acf-tab-group li.active a {
    border-color: #374151;           /* très foncé */
    border-width: 3px;
    border-style: solid;
    border-bottom: none;
    margin-bottom: -2px;             /* compense l’épaisseur */
    color: #000;
    box-shadow: 0 0 0 2px rgba(55,65,81,.2); /* halo autour de l’onglet */
    transform: translateY(-2px);     /* remonte un peu l’onglet actif */
    z-index: 2;
}


/* Enlever le fond gris natif d’ACF sur la barre */
.acf-tab-wrap,
.acf-tab-group {
    background: transparent !important;
}

/* S’assurer qu’il n’y a pas de fond sur le li lui-même */
.acf-tab-group li {
    background: transparent !important;
}