/* ==========================================================================
   Divilogy Testimonials – Masonry Layout (stable, no shuffle)
   ========================================================================= */

/* Par défaut (avant JS) : pile en 1 colonne, zéro overflow */
.dv-testimonials__grid {
    display: block;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: clip;
    /* évite tout scroll horizontal accidentel */
}

/* Les cards en enfants directs (état initial) prennent toute la largeur */
.dv-testimonials__grid>.dv-testimonial-card {
    width: 100%;
    margin-bottom: 2rem;
}

/* Quand le JS est prêt, on active le layout masonry en colonnes réelles */
.dv-testimonials__grid.dv-masonry-ready {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    align-items: flex-start;
}

/* Colonnes réelles (1 → 2 → 3) */
.dv-testimonials__grid.dv-masonry-ready .dv-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* espace vertical entre cards */
    flex: 1 1 0;
    /* colonnes de même largeur */
    min-width: 0;
    /* évite overflow */
}

/* Gap responsive entre colonnes */
@media (max-width: 1024px) {
    .dv-testimonials__grid.dv-masonry-ready {
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .dv-testimonials__grid.dv-masonry-ready {
        gap: 1rem;
    }
}

/* Cards (communes) – on garde ton style premium */
.dv-testimonial-card {
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    padding: 2rem;
    transition: transform .2s ease, box-shadow .2s ease;
    will-change: transform;
}

.dv-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

/* Breakpoints (fluid + perf mobile-first) */
@media (max-width: 1024px) {
    .dv-testimonial-card {
        flex: 1 1 calc(50% - 1rem);
    }
}

@media (max-width: 640px) {
    .dv-testimonial-card {
        flex: 1 1 100%;
    }
}

/* --- HEADER (alignement premium) --- */
.dv-testimonial-card__header {
    display: flex;
    align-items: center;
    /* aligne verticalement logo/meta */
    gap: 1.2rem;
    margin-bottom: 1rem;
    min-height: 64px;
    /* garantit une ligne stable */
}

/* Bloc logo : flex container pour centrer verticalement le logo */
.dv-testimonial-card__brand {
    flex-shrink: 0;
    display: flex;
    /* pour centrer verticalement ET horizontalement */
    align-items: center;
    justify-content: center;
    width: 64px;
    /* taille max du logo */
    height: 64px;
}

/* Logo adaptable, sans déformation */
.dv-testimonial-card__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: transparent;
    border-radius: 0;
}

/* --- META --- */
.dv-testimonial-card__client {
    font-weight: 600;
    font-size: 1.125rem;
    color: #111827;
    line-height: 1.3;
    margin: 0;
}

/* --- CONTENT --- */
.dv-testimonial-card__text {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 0;
    display: block;
    /* important pour la stabilité */
}

/* --- ACCESSIBILITÉ VISUELLE --- */
@media (prefers-reduced-motion: reduce) {
    .dv-testimonial-card {
        transition: none;
    }
}

/* --- Bouton "voir plus / moins" --- */
.dv-testimonial-card__more {
    background: none;
    border: none;
    color: #25AD9D;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
    transition: color .25s ease;
    border-radius: 6px;
    /* arrondi léger pour focus visible */
    align-self: flex-start;
}

.dv-testimonial-card__more:hover {
    color: #1E907F;
}

/* Focus esthétique mais accessible */
.dv-testimonial-card__more:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 173, 157, 0.3);
}

/* ------------------------------------------------------------------
   Transition douce + fade-in vertical sur le toggle "voir plus / moins"
   (zéro shuffle : la carte garde sa place en flex)
------------------------------------------------------------------ */

.dv-testimonial-card__text-wrapper {
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.45s ease,
        transform 0.45s ease;
    /* on ne fixe pas max-height ici : géré par états ci-dessous */
}

/* ÉTAT COLLAPSÉ : hauteur fixe alignée sur ~8 lignes */
.dv-testimonial-card__text-wrapper.is-collapsed {
    /* 8 lignes ≈ line-height(1.6) * font-size(1rem) = 1.6rem * 8 = 12.8rem */
    max-height: 12.8rem;
}

/* Masque dégradé subtil quand tronqué (pas de "cut" visuel) */
.dv-testimonial-card__text-wrapper.is-collapsed::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 90%);
    pointer-events: none;
}

/* Empêche la coupure horizontale en fin de ligne */
.dv-testimonial-card__text {
    margin: 0;
    display: block;
    line-height: 1.6;
}

/* ÉTAT ÉTENDU : hauteur large + léger slide-up façon Framer */
.dv-testimonial-card__text-wrapper.is-expanded {
    max-height: 2000px;
    /* suffisant pour avis longs */
    opacity: 1;
    transform: translateY(-0.4rem);
}

/* Masque dégradé subtil quand tronqué (pas de "cut" visuel) */
.dv-testimonial-card__text-wrapper:not(.is-expanded)::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 90%);
    pointer-events: none;
}

/* Réduction des animations pour accessibilité */
@media (prefers-reduced-motion: reduce) {
    .dv-testimonial-card__text-wrapper {
        transition: none;
    }
}

/* ==========================================================================
   Rendu visuel des étoiles (pure CSS, accessible, léger)
   ========================================================================= */

/* Container de la note */
.dv-testimonial-card__rating {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /* <— clé pour éviter le wrap */
    line-height: 1;
    letter-spacing: 2px;
    color: #D1D5DB;
    font-family: Arial, sans-serif;
    /* ou ta stack système */
    width: max-content;
    /* garde la ligne sur une seule ligne */
}

.dv-testimonial-card__rating::before,
.dv-testimonial-card__rating::after {
    content: "★★★★★";
    display: block;
    line-height: 1;
    font-size: inherit;
}

/* couche verte “pleine” (inchangé, juste robuste) */
.dv-testimonial-card__rating::after {
    position: absolute;
    top: 0;
    left: 0;
    color: #25AD9D;
    overflow: hidden;
    width: 0;
    pointer-events: none;
    transition: width .25s ease;
}

/* Texte "4/5" caché visuellement mais lu par les lecteurs d'écran */
.dv-testimonial-card__rating-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Dynamique via data-attribute */
.dv-testimonial-card__rating[data-note="1"]::after {
    width: 20%;
}

.dv-testimonial-card__rating[data-note="2"]::after {
    width: 40%;
}

.dv-testimonial-card__rating[data-note="3"]::after {
    width: 60%;
}

.dv-testimonial-card__rating[data-note="4"]::after {
    width: 80%;
}

.dv-testimonial-card__rating[data-note="5"]::after {
    width: 100%;
}

/* garde le 3/5 lisible pour les lecteurs d'écran */
.dv-testimonial-card__rating-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Divilogy – Micro-reveal premium (fallback + scroll-driven)
   ========================================================================= */

/* 1) Fallback universel (stagger on-load) */
@keyframes dv-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {

    /* Animation par défaut (au premier paint), très légère */
    .dv-col>.dv-testimonial-card {
        opacity: 0.001;
        /* évite flash avant animation */
        animation: dv-fade-up .6s cubic-bezier(.22, .61, .36, 1) both;
        will-change: transform, opacity;
    }

    /* Stagger élégant (cycle de 6) */
    .dv-col>.dv-testimonial-card:nth-child(6n + 1) {
        animation-delay: .00s;
    }

    .dv-col>.dv-testimonial-card:nth-child(6n + 2) {
        animation-delay: .06s;
    }

    .dv-col>.dv-testimonial-card:nth-child(6n + 3) {
        animation-delay: .12s;
    }

    .dv-col>.dv-testimonial-card:nth-child(6n + 4) {
        animation-delay: .18s;
    }

    .dv-col>.dv-testimonial-card:nth-child(6n + 5) {
        animation-delay: .24s;
    }

    .dv-col>.dv-testimonial-card:nth-child(6n + 6) {
        animation-delay: .30s;
    }
}

/* 2) Upgrade auto : Scroll-Driven Animations (Chrome/Safari récents) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        /* On annule le stagger on-load et on anime à l'entrée dans le viewport */
        .dv-col>.dv-testimonial-card {
            opacity: 0.001;
            animation: dv-fade-up 1s cubic-bezier(.22, .61, .36, 1) both;
            animation-timeline: view(block);
            /* timeline liée au viewport */
            animation-range: entry 0% cover 35%;
            /* démarre à l'entrée, finit à 35% de couverture */
            animation-delay: 0s;
            /* pas de delay, c’est le scroll qui pilote */
        }
    }
}

/* Sécurité accessibilité */
@media (prefers-reduced-motion: reduce) {
    .dv-col>.dv-testimonial-card {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}