.profile-author__img {
    max-width: 80px;
    height: auto;
    border-radius: 8px;
}

.btn-checkout {
    font-size: 1.1rem;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
}
/* Hauteur commune pour image + bouton */
.align-box {
    height: 70px; /* ou ajuste selon ton design */
}

/* Image reste carrée */
.square-img-wrapper {
    width: 70px; /* même que la hauteur ci-dessus */
    height: 70px;
    flex-shrink: 0; /* évite qu’elle se rétrécisse */
}

.square-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* coupe ou remplit sans déformer */
    border-radius: 6px;
}

.description-wrapper {
    position: relative;
}

/* Zone avec texte déroulable */
.description-content {
    overflow: hidden;
    transition: max-height 0.4s ease, filter 0.3s ease;
}

/* Fallback pour la version repliée */
.description-content.collapsed {
    max-height: 0;
}

/* Fade-out en bas (optionnel mais très UX-friendly) */
.description-fade {
    content: "";
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    height: 60px; /* ↓ Réduit de 60px à 30px */
    background: linear-gradient(to bottom, rgba(255,255,255,0.24), rgba(255,255,255,0.8)); /* ↓ Opacité plus douce */
    pointer-events: none;
    z-index:0;
    display: none;
}

.toggle-chip{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(86,27,81,.25);
  box-shadow:0 .25rem .5rem rgba(0,0,0,.06);
  color:#561B51;font-size:1.25rem;font-weight:700;line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.toggle-chip::before{content:"+";}
.toggle-chip[aria-expanded="true"]::before{content:"−";}
.toggle-chip:hover{transform:translateY(-1px);box-shadow:0 .6rem 1.2rem rgba(0,0,0,.1);border-color:rgba(86,27,81,.45);}
.toggle-chip:focus{outline:0;box-shadow:0 0 0 .2rem rgba(86,27,81,.2);}

.toggle-description {
    font-weight: normal;
    color: inherit; /* hérite la couleur du texte environnant */
    font-size: 1rem; /* même taille que les <p> */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.toggle-description:focus {
    outline: none;
}
.toggle-description,
.toggle-chip{position:relative;z-index:2;}

/* 📱 Mobile : texte invisible */
@media (max-width: 767.98px) {
    .description-content.collapsed {
        max-height: 0;
    }
    .toggle-description {
        display: inline-block;
    }
    .description-fade {
        display: none;
    }


}
/* 📱 Tablette : 240px max */
@media (min-width: 768px) and (max-width: 991.98px) {
    .description-content.collapsed {
        max-height: 0px;
    }
    .toggle-description {
        display: inline-block;
    }
    .description-fade {
        display: none;
    }
}
/* 📱 Tablette :  */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .description-content.collapsed {
        max-height: 120px;
    }
    .toggle-description {
        display: inline-block;
    }
    .description-fade {
        display: none;
    }
}
/* 🖥️ Desktop large : 300px max */
@media (min-width: 1200px) {
    .description-content.collapsed {
        max-height: 180px;
    }

    .toggle-description {
        display: inline-block;
    }

    .description-fade {
        display: block;
    }
}