/**
 * avis.css — Section Avis
 */

/* -------------------------
   Section
------------------------- */


.section-avis {
    position: relative;
    /* pas d'overflow: hidden — compatible shapes adjacentes */
    background-color: var(--color-bg);
    padding-block: var(--section-padding-y);
    margin: auto;
    padding-inline: var(--container-padding);
}

/* -------------------------
   Inner layout — mobile : colonne
------------------------- */
.section-avis__inner {
    max-width: var(--container-max-width-xl);
    position: relative;
    z-index: var(--z-above); /* au-dessus des shapes des sections adjacentes */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: auto;
    padding-inline: var(--section-padding-x);
    gap:var(--space-sm);
}

.section-avis .shapes {
    height: calc(100% + 150px); /* étend le conteneur 150px sous la section → dans valeur-chiffres */
    overflow: visible;
    z-index: var(--z-base);     /* passe au-dessus du fond de valeur-chiffres (non positionné) */
}

/* -------------------------
   Titre
------------------------- */
.section-avis__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-7xl);
    font-weight: var(--font-weight-black);
    margin-bottom: 20px;
    text-transform: uppercase;

}

/* -------------------------
   Carousel Splide
------------------------- */
.section-avis__carousel {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.section-avis__carousel .splide__track {
    width: 100%;
    overflow: hidden;
}

/* Neutraliser le flex par défaut de la liste Splide */
.section-avis__carousel .section-avis__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-avis__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
    

/* -------------------------
   Carte
------------------------- */
.section-avis__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    box-shadow: var(--shadow-md);
    height: auto;
}

.section-avis__card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

}

.section-avis__card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-avis__card-name {
    font-family: var(--font-secondary);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-black);
    color: var(--color-blue);
    margin: 0;
}

.section-avis__card-role {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    color: var(--color-gray-dark);
    font-style: italic;
}

.section-avis__card-photo {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.section-avis__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-avis__card-text {
    all: unset;
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    color: var(--color-black);
    line-height: var(--line-height-loose);
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-avis__card--expanded .section-avis__card-text {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* -------------------------
   Toggle "Lire la suite"
------------------------- */
.section-avis__card-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-avis__card-toggle:hover {
    color: var(--color-blue-dark);
}

/* -------------------------
   Dots custom
------------------------- */
.section-avis__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
    margin-top: var(--space-md);
    list-style: none;
}

button.section-avis__dot {
    display: block;
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: var(--radius-full);
    padding: 0;
    cursor: pointer;
    transition: none;
    -webkit-appearance: none;
    appearance: none;
}

button.section-avis__dot.is-active {
    background-color: var(--color-black);
}

/* -------------------------
   CTA
------------------------- */
.section-avis__cta {
    align-self: center;
}

/* -------------------------
   Tablette 768px
------------------------- */

/* -------------------------
   Desktop 1024px
------------------------- */
/* -------------------------
   Desktop 1024px
------------------------- */