/* Spliff — Product Content (collapse + chevron) */

.spliff-pcontent {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

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

.spliff-pcontent__body {
    overflow: hidden;
    transition: max-height 0.4s ease;
    /* En mode "is-expanded" on retire la contrainte via la classe sur le wrapper */
}

.spliff-pcontent.is-collapsible.is-collapsed .spliff-pcontent__body {
    /* max-height est piloté par le control Elementor (défaut 150px) */
}

.spliff-pcontent.is-collapsible:not(.is-collapsed) .spliff-pcontent__body {
    max-height: none;
}

.spliff-pcontent__body > :first-child {
    margin-top: 0;
}

.spliff-pcontent__body > :last-child {
    margin-bottom: 0;
}

/* ─── Conteneur de clip (body + fade) ───
   Le body ET le fade sont enveloppés ici. Hauteur du conteneur = exactement
   celle du body visible (le fade est en position:absolute → 0 de hauteur
   ajoutée). Le bouton chevron est un FRÈRE de ce conteneur (en dehors), donc
   le fade s'aligne TOUJOURS sur le bas réel du texte, peu importe la hauteur
   du bouton (taille du chevron, padding, min-height héritée du thème…). */
.spliff-pcontent__clip {
    position: relative;
    width: 100%;
}

/* ─── Gradient de fade en bas (replié) ─── */
.spliff-pcontent__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* bas du conteneur de clip = bas réel du body visible */
    height: 60px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
    /* background piloté par le control Elementor (linear-gradient vers fade_color) */
}

.spliff-pcontent:not(.is-collapsed) .spliff-pcontent__fade,
.spliff-pcontent.no-fade .spliff-pcontent__fade {
    opacity: 0;
}

/* ─── Bouton de déroulage (toggle) ─── */
.spliff-pcontent__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #3D5BFF;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.spliff-pcontent__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ─── Override hover/focus/active hérité du thème ───
   Le wrapper reçoit `.spliff-pcontent--no-theme-hover` quand le toggle Elementor
   est activé (défaut). Spécificité boostée (2 classes + pseudo + descendant) pour
   l'emporter sur les CSS thème, même avec leur !important.
   Les controls Elementor (toggle_bg_hover, chevron_color_hover) gardent quand même
   leur priorité car ils sont chargés en CSS inline APRÈS ces règles statiques. */
.spliff-pcontent.spliff-pcontent--no-theme-hover .spliff-pcontent__toggle:hover,
.spliff-pcontent.spliff-pcontent--no-theme-hover .spliff-pcontent__toggle:focus,
.spliff-pcontent.spliff-pcontent--no-theme-hover .spliff-pcontent__toggle:active {
    background-color: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Chevron SVG conserve sa couleur même sous l'override (héritée de `color` du parent) */
.spliff-pcontent.spliff-pcontent--no-theme-hover .spliff-pcontent__toggle:hover .spliff-pcontent__chevron,
.spliff-pcontent.spliff-pcontent--no-theme-hover .spliff-pcontent__toggle:focus .spliff-pcontent__chevron,
.spliff-pcontent.spliff-pcontent--no-theme-hover .spliff-pcontent__toggle:active .spliff-pcontent__chevron {
    color: inherit !important;
}

.spliff-pcontent__chevron {
    transition: transform 0.35s ease;
}

.spliff-pcontent:not(.is-collapsed) .spliff-pcontent__chevron {
    transform: rotate(180deg);
}

/* ─── Pas d'overflow (contenu plus court que max-height) ───
   Le JS ajoute la classe `is-no-overflow` au wrapper si le contenu rentre
   intégralement dans la max-height configurée. On masque alors le bouton de
   déroulage + le fade car ils n'ont plus aucun sens, et on libère la
   contrainte de max-height pour afficher tout le texte. */
.spliff-pcontent.is-no-overflow .spliff-pcontent__toggle,
.spliff-pcontent.is-no-overflow .spliff-pcontent__fade {
    display: none !important;
}

.spliff-pcontent.is-no-overflow.is-collapsible .spliff-pcontent__body {
    max-height: none !important;
}

/* ─── Placeholder admin ─── */
.spliff-pcontent--placeholder {
    padding: 14px;
    background: #fff8e5;
    border: 1px dashed #d6b04a;
    color: #6c5410;
    border-radius: 6px;
}