/* ===========================================================
   T&T - Fade-out conditionnel "LIRE PLUS / LIRE MOINS" sur CATÉGORIE
   Pilote par JS via classes .fade-active + .is-collapsed/.is-expanded
   Seuil = >=800 mots (cf category-read-more.js)
   Hauteur visible : 600px desktop / 500px tablet / 400px mobile
   Pattern cohérent avec le fade-out fiches produit (cf product-savoirfiche.css)
   =========================================================== */

.cat-savoir-wrapper.fade-active.is-collapsed {
    max-height: 400px !important;
    overflow: hidden !important;
    position: relative !important;
}
@media (min-width: 768px) {
    .cat-savoir-wrapper.fade-active.is-collapsed {
        max-height: 500px !important;
    }
}
@media (min-width: 1024px) {
    .cat-savoir-wrapper.fade-active.is-collapsed {
        max-height: 600px !important;
    }
}

.cat-savoir-wrapper.fade-active.is-collapsed::after {
    content: '' !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 160px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 30%,
        rgba(255,255,255,0.75) 60%,
        rgba(255,255,255,0.95) 85%,
        rgba(255,255,255,1) 100%
    ) !important;
}
@media (min-width: 1024px) {
    .cat-savoir-wrapper.fade-active.is-collapsed::after {
        height: 240px !important;
    }
}

.cat-savoir-wrapper.fade-active.is-expanded {
    max-height: none !important;
    overflow: visible !important;
}
.cat-savoir-wrapper.fade-active.is-expanded::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Bouton existant .ipoint-read-more-global : visible seulement quand le JS l'active */
.ipoint-read-more-global {
    display: none;
}
.ipoint-read-more-global.is-active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 30px auto !important;
    padding: 12px 30px !important;
    background: #ffffff !important;
    color: #11382d !important;
    border: 1px solid #11382d !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.ipoint-read-more-global.is-active:hover {
    background: #11382d !important;
    color: #ffffff !important;
}
.ipoint-read-more-global svg {
    transition: transform 0.25s ease !important;
}
.ipoint-read-more-global[aria-expanded="true"] svg {
    transform: rotate(180deg) !important;
}
@media (max-width: 480px) {
    .ipoint-read-more-global.is-active {
        width: 90% !important;
        margin: 25px auto !important;
    }
}