/* ============================================================
   Netalys – Carrousel Témoignages (thème + overrides Splide)
   ============================================================ */

/* ── Variables ── */
.netalys-carrousel {
    --nc-gap: 0.5rem;
    --nc-card-bg: #fff;
    --nc-card-radius: 0.5rem;
    --nc-card-shadow: 0 2px 14px rgb(0 0 0 / 0.08);
    --nc-card-padding: 1.25rem;
    --nc-card-box-padding: 0.375rem;
    --nc-text-color: #374151;
    --nc-author-color: #111827;
    --nc-star-on: #DFBA69;
    --nc-star-off: #d1d5db;
    --nc-btn-color: #374151;
    --nc-btn-hover-bg: #374151;
    --nc-btn-hover-fg: #fff;
    --nc-dot-color: #6b7280;
    --nc-dot-active: #374151;
    --nc-focus-ring: #2563eb;
}

/* ── Piste : hauteur uniforme des slides ── */
.netalys-carrousel .splide__list {
    align-items: stretch;
}

.netalys-carrousel .splide__slide {
    /* Assure que la carte occupe toute la hauteur de la slide */
    display: flex;
    padding: var(--nc-card-box-padding);
}

/* ── Carte témoignage ── */
.netalys-temoignage {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--nc-card-padding);
    background: var(--nc-card-bg);
    border-radius: var(--nc-card-radius);
    box-shadow: var(--nc-card-shadow);
}

/* ── Étoiles ── */
.netalys-temoignage__note {
    display: flex;
    gap: 0.2rem;
    margin-block-end: 0.875rem;
    line-height: 1;
}

.netalys-etoile--pleine {
    color: var(--nc-star-on);
}

.netalys-etoile--vide {
    color: var(--nc-star-off);
}

/* ── Blockquote ── */
.netalys-temoignage__blockquote {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: none; /* reset navigateur */
}

.netalys-temoignage__contenu {
    flex: 1;
}

.netalys-temoignage__contenu p {
    margin-block-start: 0;
    font-style: italic;
    color: var(--nc-text-color);
    line-height: 1.7;
}

.netalys-temoignage__contenu p:last-child {
    margin-block-end: 0;
}

/* ── Auteur ── */
.netalys-temoignage__auteur {
    display: block;
    margin-block-start: 1rem;
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--nc-author-color);
}

.netalys-temoignage__auteur::before {
    content: "— ";
}

/* ══════════════════════════════════════════════════════════════
   Overrides Splide — Flèches
   ══════════════════════════════════════════════════════════════ */

/*
 * Splide génère ses flèches avec .splide__arrow.
 * On les reskin sans toucher à leur logique aria.
 */
.netalys-carrousel .splide__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 2px solid var(--nc-btn-color);
    border-radius: 50%;
    color: var(--nc-btn-color);
    opacity: 1;
    transition: background-color 200ms ease, color 200ms ease;
}

.netalys-carrousel .splide__arrow svg {
    fill: currentColor;
    width: 1.1rem;
    height: 1.1rem;
}

.netalys-carrousel .splide__arrow:hover:not(:disabled),
.netalys-carrousel .splide__arrow:focus-visible:not(:disabled) {
    background-color: var(--nc-btn-hover-bg);
    color: var(--nc-btn-hover-fg);
}

.netalys-carrousel .splide__arrow:focus-visible {
    outline: 3px solid var(--nc-focus-ring);
    outline-offset: 3px;
}

.netalys-carrousel .splide__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Position des flèches (sous le carrousel, centrées) ── */
.netalys-carrousel .splide__arrows {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-block: 1rem;
}

.netalys-carrousel .splide__arrow--prev {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════
   Overrides Splide — Pagination (dots)
   ══════════════════════════════════════════════════════════════ */

.netalys-carrousel .splide__pagination {
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding: 0;
    /* Splide ajoute position:absolute sur .splide__pagination ; on override */
    position: static;
    transform: none;
    bottom: auto;
}

.netalys-carrousel .splide__pagination__page {
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    background: transparent;
    border: 2px solid var(--nc-dot-color);
    border-radius: 50%;
    opacity: 1;
    transition: background-color 200ms, border-color 200ms;
}

.netalys-carrousel .splide__pagination__page.is-active {
    background-color: var(--nc-dot-active);
    border-color: var(--nc-dot-active);
    transform: none; /* Splide scale() par défaut — on désactive */
}

.netalys-carrousel .splide__pagination__page:focus-visible {
    outline: 3px solid var(--nc-focus-ring);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    /* Les breakpoints perPage sont gérés par Splide JS */
}

/* ══════════════════════════════════════════════════════════════
   Respect du mouvement réduit (RGAA 13.8 / WCAG 2.3.3)
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .netalys-carrousel .splide__track {
        transition: none !important;
    }

    .netalys-carrousel .splide__slide {
        transition: none !important;
    }
}