/* Portrait classique (position_image = false, mode par défaut sur la home) */
.testimonials__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px;
    flex-direction: column;
    /* Marge de securite : la carte n'avait aucun padding, le portrait et le
       texte venaient donc toucher la bordure de 6px. */
    padding: 15px;
    border-radius: var(--border-radius-lg);
    background: var(--white);
    border: 6px solid var(--color-primary-tint);

    @media (min-width: 576px) {
        flex-direction: row;
        /* stretch et non center : le portrait recoit ainsi une hauteur
           definie (celle de la ligne flex, imposee par le contenu), ce qui
           permet a son img height:100% de se resoudre. Le centrage vertical
           du texte est repris par .testimonials__content (margin-block). */
        align-items: stretch;
    }

    .testimonials__portrait {
        flex: 0 0 auto;
        width: 100%;
        max-width: 180px;

        @media (min-width: 576px) {
            width: 180px;
        }

        img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 12px;
            height: 100%;
        }
    }

    .testimonials__content {
        /* Centrage vertical du texte, maintenant que la carte etire ses
           enfants. Les marges auto ne centrent que sur l'axe transversal :
           en colonne (mobile, ou .testimonials__trigger < 992px) la carte
           n'a pas d'espace libre, la regle est donc inerte -- pas besoin de
           la conditionner a un breakpoint. */
        margin-block: auto;

        .testimonials__quote {
            font-family: var(--title-font);
            font-style: italic;
            font-size: 20px;
            line-height: 1.4;
            color: var(--color-secondary);
            margin: 0 0 12px;

            @media (min-width: 992px) {
                font-size: 24px;
            }
        }

        .testimonials__author {
            .testimonials__nom {
                font-weight: var(--semibold);
                color: var(--color-secondary);
            }

            .testimonials__poste {
                opacity: .5;
            }
        }
    }
}

/* Disposition titre/intro/bouton à gauche, slider à droite -- cf. home
   Lovable, Testimonials. Rendu par défaut du layout (plus de variante
   figée par identifiant_bloc). */
.testimonials {
    .container {
        /* 2 blocs seulement (titre/intro + slider) : flex suffit, pas besoin
           de grid. .wrapper_title est fluide, .wrapper_slider est capé à
           740px (équivalent de l'ancien minmax(0,740px)). */
        @media (min-width: 992px) {
            display: flex;
            align-items: center;
            gap: 60px;

            .wrapper_title {
                flex: 1 1 0;
                min-width: 0;
            }

            .wrapper_slider {
                flex: 0 1 740px;
                min-width: 0;
            }
        }
    }

    /* Titre + bouton regroupés (colonne de gauche, à côté du slider) --
       cf. lovable/src/components/home/Testimonials.tsx : titre puis bouton
       en dessous, même bloc flex-col. */
    .wrapper_title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .section__title {
        margin: 0;
        max-width: none;
        text-align: left;

        p {
            margin: 0;
        }
    }

    /* Slider "dots only" (classe slider_dots posée par builder/testimonials.php
       + js/_slider.js) : pas de flèches précédent/suivant -- conforme à
       lovable/src/components/home/Testimonials.tsx, qui règle explicitement
       arrows:false sur ce slider précis (aucune flèche dans la source à
       reproduire). Piste "diapositives adjacentes visibles et estompées" +
       pagination sous forme de barres, calquées sur lovable/src/styles.css
       (règles .naturea-slider) et les classes Tailwind du composant. */
    .wrapper_slider.slider_dots {
        /* Bleed horizontal des diapositives adjacentes ("aperçu estompé") --
           n'a de sens qu'en layout 2 colonnes desktop (.testimonials .container
           passe en flex uniquement >=992px, cf. règle plus haut). En dessous,
           une seule colonne pleine largeur (data-per-page="1" partout sur le
           site) : overflow:hidden redevient le comportement standard attendu.
           Sans ce garde, ce bloc restait "overflow:visible" à toutes les
           largeurs -- vérifié en navigateur réel (Chrome, DevTools) que ça ne
           produit pas de débordement visible en usage normal, mais ça reste
           un état actif sans utilité <992px (une seule diapositive affichée)
           et un risque latent (ex. pendant une transition Splide type:"loop",
           un clone adjacent peut déborder de .wrapper_slider et chevaucher
           .wrapper_title juste au-dessus). Correctif bug client "chevauchement
           wrapper_title/wrapper_slider <992px" du 2026-09-09, cf.
           project_status.md. */
        @media (min-width: 992px) {
            overflow: visible;

            /* Le debord ne doit s'ouvrir qu'a DROITE. A gauche se trouve
               .wrapper_title : avec overflow:visible sur les deux boites, rien
               n'ecretait la diapositive sortante, qui passait par-dessus le
               titre pendant la translation. clip-path inset() a valeur negative
               n'ouvre que le cote voulu ; les 20px verticaux laissent passer
               les contours de focus de la pagination. Complete le passage en
               type:"slide" cote JS (js/_slider.js), qui supprime les clones
               de gauche a la source. */
            clip-path: inset(-20px -100vw -20px 0);

            .splide__track {
                overflow: visible;
            }
        }

        /* Diapositives adjacentes estompees plutot que masquees -- cf.
           lovable/src/styles.css : .naturea-slider .splide__slide { opacity: .16 }.
           A 0, la carte disparaissait completement puis reapparaissait, ce qui
           accentuait le decalage de timing.
           Duree et courbe identiques au deplacement Splide (speed: 600,
           cubic-bezier(0.22, 1, 0.36, 1), cf. js/_slider.js) : les deux
           mouvements se superposent au lieu de s'enchainer.
           .is-current est posee des l'evenement `move` par js/_slider.js ; la
           .is-active native de Splide n'arrive qu'apres le deplacement. */
        .splide__slide {
            opacity: .16;
            transform: scale(.96);
            transition:
                opacity .6s cubic-bezier(0.22, 1, 0.36, 1),
                transform .6s cubic-bezier(0.22, 1, 0.36, 1);

            &.is-current {
                opacity: 1;
                transform: scale(1);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .splide__slide {
                transform: none;
                transition-duration: .01ms;

                &.is-current {
                    transform: none;
                }
            }
        }

        .splide__pagination {
            position: static;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 40px;
            padding: 0;
        }

        .splide__pagination__page {
            border: 0;
            cursor: pointer;
            padding: 0;
            height: 4px;
            width: 80px;
            border-radius: 2px;
            background: var(--color-secondary-muted);
            opacity: .32;
            transition: opacity .3s ease;

            &.is-active {
                opacity: 1;
                margin: 0 20px;
            }
        }
    }
}

/* =====================================================================
   MODALE TÉMOIGNAGE — extension du 2026-09-09 (champs optionnels
   temoignages_texte_long / temoignages_video / temoignages_modal_image,
   cf. acf-json/group_632b1eefd15eb.json et builder/testimonials.php).
   N'affecte que les témoignages qui renseignent ces champs -- sans impact
   sur les témoignages "simples" déjà en place (ex. home, page 383).
   Calqué sur lovable/src/components/pourquoi-naturea/PourquoiTestimonials.tsx.
   L'ouverture/fermeture (fade + scale) est pilotée par GSAP, cf.
   js/sections_builder/testimonials.js -- ce fichier ne pose que l'état
   initial/caché (attribut [hidden]) et l'habillage visuel.
   ===================================================================== */

.testimonials__trigger {
    /* Doit rester un pass-through visuel : imbriqué à l'intérieur de
       .testimonials__item (cf. builder/testimonials.php et project_status.md,
       fix slider Splide du 2026-09-09), il reprend donc à l'identique le
       display flex + gap + flex-direction de .testimonials__item pour que
       .testimonials__portrait/.testimonials__content restent alignés côte à
       côte comme si le bouton n'existait pas. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 24px;
    flex-direction: column;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;

    /* Reste en colonne (portrait au-dessus du contenu) tant que la fenêtre
       est < 992px -- delà, la carte a moins de largeur disponible (le
       slider passe lui-même sous le titre, cf. .testimonials .container
       ci-dessus) donc le mode ligne serré ne convient plus. Ne passe en
       ligne qu'à partir de 992px, contrairement à .testimonials__item (576px)
       qui reste inchangé pour ne pas affecter les témoignages simples (home). */
    @media (min-width: 992px) {
        flex-direction: row;
        align-items: stretch;
    }
}

.testimonials__portrait {
    position: relative;
}

.testimonials__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-secondary) 35%, transparent);

    &::after {
        content: '';
        display: block;
        width: 56px;
        height: 56px;
        border-radius: var(--border-radius-full);
        background: var(--color-primary);
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>') center / 22px no-repeat;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>') center / 22px no-repeat;
        background-color: var(--white);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}

.testimonials__more {
    display: inline-block;
    margin-top: 4px;
    font-size: 15px;
    line-height: 20px;
    color: var(--color-primary);
}

.testimonial-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    background: color-mix(in srgb, var(--color-secondary) 60%, transparent);
    backdrop-filter: blur(4px);
    opacity: 0;

    @media (min-width: 768px) {
        padding: 60px 20px;
    }

    &[hidden] {
        display: none;
    }
}

.testimonial-modal__panel {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: auto;
    border-radius: 24px;
    background: var(--white);
    padding: 24px;
    transform: scale(.96);

    @media (min-width: 992px) {
        padding: 40px;
    }
}

.testimonial-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    border: 0;
    background: var(--color-primary-tint);
    color: var(--color-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 22px;
    line-height: 1;

    &:hover {
        background: var(--color-primary);
        color: var(--white);
    }
}

.testimonial-modal__video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: var(--color-secondary);

    img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .7;
    }

    .testimonial-modal__play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
            content: '';
            display: block;
            width: 64px;
            height: 64px;
            border-radius: var(--border-radius-full);
            background-color: var(--color-primary);
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>') center / 26px no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>') center / 26px no-repeat;
        }
    }
}

.testimonial-modal__image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
}

.testimonial-modal__intro {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.testimonial-modal__quote {
    margin: 0;
    font-family: var(--title-font);
    font-style: italic;
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-secondary);

    @media (min-width: 992px) {
        font-size: 26px;
        line-height: 32px;
    }
}

.testimonial-modal__author {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-primary);
}

.testimonial-modal__text {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    p {
        margin: 0;
        color: var(--color-secondary);
        opacity: .8;
    }
}

.testimonials__item {
    &.bg_img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 16px;
        background-size: cover;
        background-position: center;
        padding: 40px;
        position: relative;
        text-align: left;
        justify-content: end;
        padding: 35px;
        border-radius: var(--border-radius);

        @media (min-width: 992px) {
            padding: 100px;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            border-radius: var(--border-radius);
            background: linear-gradient(90deg, rgba(154, 92, 255, 0.35) 0%, rgba(72, 41, 155, 1) 100%);

            @media (min-width: 992px) {
                background: linear-gradient(90deg, rgba(154, 92, 255, 0) 0%, rgba(72, 41, 155, 1) 100%);
                padding: 100px;
            }
        }

        .testimonials__quote,
        .testimonials__author span {
            color: var(--white);
        }

        .testimonials__content {
            position: relative;
            z-index: 1;

            @media (min-width: 992px) {
                max-width: 400px;
            }

            .testimonials__quote {
                font-size: 28px;
                font-style: normal;
                line-height: 32px;
                font-weight: 700;
                border-bottom: 1px solid var(--color-secondary-muted);
                padding-bottom: 15px;
            }

            .testimonials__author {
                color: var(--white);

                .testimonials__nom {
                    font-weight: 700;
                }

                .testimonials__poste {
                    opacity: 0.5;
                }
            }
        }
    }
}