/* ================================================================
   Post Content Expandable – Styles front-end
   ================================================================ */

/* ── Wrapper global ── */
.pce-wrapper {
    position: relative;
}

/* ── Zone de contenu ── */
.pce-content-outer {
    position: relative;
    overflow: hidden;
    /* max-height géré exclusivement par le JS via style inline */
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quand le contenu est déplié : max-height injecté par JS avec la vraie hauteur */

/* ── Overlay de flou ── */
.pce-fade-overlay {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--pce-fade-height, 80px);
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--pce-fade-color, #ffffff) 100%
    );
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* Affiche l'overlay uniquement quand le wrapper a la classe pce-fade-enabled
   ET que le contenu est encore tronqué */
.pce-fade-enabled .pce-fade-overlay {
    display: block;
}

/* Masque le flou quand le contenu est étendu */
.pce-fade-enabled .pce-content-outer.pce-expanded .pce-fade-overlay {
    opacity: 0;
    pointer-events: none;
}

/* ── Bouton ── */
.pce-toggle-wrap {
    /* margin-top géré par le contrôle Elementor via selector */
}

.pce-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: #1D72D2;
    color: #fff;
    line-height: 1.4;
    text-decoration: none;
    vertical-align: middle;
    /* padding, border-radius, shadow : gérés par contrôles Elementor */
    /* transition : gérée par contrôle Elementor */
}

.pce-toggle-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ── Icônes dans le bouton ── */
.pce-btn-icon {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    line-height: 1;
}

.pce-btn-icon i,
.pce-btn-icon svg {
    display: block;
}

/* ── Utilitaire caché ── */
.pce-hidden {
    display: none !important;
}

/* ── Masquer le bouton si le contenu ne dépasse pas la hauteur max
   (géré dynamiquement par JS, mais on prévoit la classe CSS) ── */
.pce-toggle-wrap.pce-btn-hidden {
    display: none;
}

/* ── Accessibilité : réduction de mouvement ── */
@media (prefers-reduced-motion: reduce) {
    .pce-content-outer {
        transition: none;
    }
    .pce-fade-overlay {
        transition: none;
    }
}