/* Spliff — Product Details V2 (Accordéon) */

.spliff-pdv2 {
    --pdv2-bg: #F4F4F4;
    --pdv2-text: #0F0F10;
    --pdv2-content: #1A1A1A;
    --pdv2-kicker: #A0A4AB;
    --pdv2-chevron: #3D5BFF;
    --pdv2-radius: 6px;
    --pdv2-gap: 12px;
    --pdv2-transition: 0.35s ease;

    width: 100%;
    box-sizing: border-box;
}

.spliff-pdv2 *,
.spliff-pdv2 *::before,
.spliff-pdv2 *::after {
    box-sizing: border-box;
}

.spliff-pdv2__kicker {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pdv2-kicker);
    margin: 0 0 14px 0;
}

.spliff-pdv2__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pdv2-gap);
}

.spliff-pdv2__item {
    background-color: var(--pdv2-bg);
    border-radius: var(--pdv2-radius);
    overflow: hidden;
}

/* ─── Séparateur entre items (mode "with-separator") ───
   Active une bordure inférieure sur chaque item sauf le dernier.
   Annule le fond et le radius pour un rendu de type "tableau".
   La couleur et l'épaisseur sont pilotées par les controls Elementor. */
.spliff-pdv2--with-separator .spliff-pdv2__list {
    gap: 0;
}

.spliff-pdv2--with-separator .spliff-pdv2__item {
    background-color: transparent;
    border-radius: 0;
}

.spliff-pdv2--with-separator .spliff-pdv2__item:not(:last-child) {
    border-bottom: 1px solid #E5E5E5;
}

.spliff-pdv2__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ─── Override hover/active hérités du thème ───
   Le wrapper reçoit `.spliff-pdv2--no-hover` ou `--no-active` quand les toggles
   Elementor sont désactivés. Spécificité boostée (2 classes + pseudo) pour
   l'emporter même sur les CSS thème avec !important. */
.spliff-pdv2.spliff-pdv2--no-hover .spliff-pdv2__head:hover,
.spliff-pdv2.spliff-pdv2--no-hover .spliff-pdv2__head:hover .spliff-pdv2__title,
.spliff-pdv2.spliff-pdv2--no-hover .spliff-pdv2__head:hover .spliff-pdv2__chevron {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:active,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus-visible,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:active .spliff-pdv2__title,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus .spliff-pdv2__title,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:active .spliff-pdv2__chevron,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus .spliff-pdv2__chevron {
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Chevron garde sa couleur native même sous --no-hover/--no-active */
.spliff-pdv2.spliff-pdv2--no-hover .spliff-pdv2__head:hover .spliff-pdv2__chevron,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:active .spliff-pdv2__chevron,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus .spliff-pdv2__chevron {
    color: var(--pdv2-chevron) !important;
}

/* Le TITRE garde SA couleur (var --pdv2-text) même sous --no-hover/--no-active.
   IMPORTANT : surtout PAS `color: inherit` ici — sinon le titre hérite la couleur
   survolée du thème (lien/bouton bleu/gris). On re-force donc sa propre couleur,
   exactement comme le chevron. (Vient APRÈS les règles inherit → l'emporte.) */
.spliff-pdv2.spliff-pdv2--no-hover .spliff-pdv2__head:hover .spliff-pdv2__title,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:active .spliff-pdv2__title,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus .spliff-pdv2__title,
.spliff-pdv2.spliff-pdv2--no-active .spliff-pdv2__head:focus-visible .spliff-pdv2__title {
    color: var(--pdv2-text) !important;
}

.spliff-pdv2__title {
    flex: 1 1 auto;
    color: var(--pdv2-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.spliff-pdv2__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 12px;
    color: var(--pdv2-chevron);
    transition: transform var(--pdv2-transition);
}

.spliff-pdv2__chevron svg {
    display: block;
    width: 100%;
    height: 100%;
}

.spliff-pdv2__item.is-open .spliff-pdv2__chevron {
    transform: rotate(180deg);
}

.spliff-pdv2__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--pdv2-transition);
}

.spliff-pdv2__item.is-open .spliff-pdv2__panel {
    max-height: var(--pdv2-panel-height, 1200px);
}

.spliff-pdv2__panel[hidden] {
    display: block;
    max-height: 0;
}

.spliff-pdv2__panel-inner {
    padding: 0;
    color: var(--pdv2-content);
    font-size: 13px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.spliff-pdv2__panel-inner > p {
    margin: 0 0 0.6em 0;
}

.spliff-pdv2__panel-inner > p:last-child {
    margin-bottom: 0;
}

.spliff-pdv2--placeholder {
    padding: 14px;
    background: #fff8e5;
    border: 1px dashed #d6b04a;
    color: #6c5410;
    border-radius: var(--pdv2-radius);
}

@media (max-width: 600px) {
    .spliff-pdv2__panel-inner {
        font-size: 12px;
    }
}