/* ==========================================================================
   Section Avis clients - 4 cards de témoignages avec étoiles dorées.
   Reproduction de A_Avis (design_handoff_museaux/direction-a.jsx).
   ========================================================================== */

.mdm-avis {
    padding: var(--m-space-xxl) var(--m-page-padding);
    background: rgba(253, 236, 239, .4); /* var(--m-cream-2) à 40% */
}

.mdm-avis__inner {
    max-width: var(--m-container);
    margin-inline: auto;
}

.mdm-avis__header {
    text-align: center;
    margin-bottom: 48px;
}

.mdm-avis__eyebrow {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 22px;
    color: var(--m-gold);
    margin-bottom: 6px;
}

.mdm-avis__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); /* 28 → 48px */
    color: var(--m-ink);
    margin: 0;
    line-height: 1.05;
}

/* - Grid 4 cards (utilise sur la page /avis/ qui liste tous les avis) - */
.mdm-avis__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* - Carrousel home : 4 cards visibles, navigation manuelle, scroll-snap - */
.mdm-avis__carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.mdm-avis__track {
    flex: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 4); /* 4 cards visibles, gap inclus */
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 0;
    /* Cacher la scrollbar mais garder le scroll fonctionnel (mobile swipe + clavier fleches) */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;  /* laisse de l'air au box-shadow des cards */
}

.mdm-avis__track::-webkit-scrollbar { display: none; }

.mdm-avis__track .mdm-review-card {
    scroll-snap-align: start;
    /* scroll-snap-stop:always pour bien s'arreter sur chaque card en
       defilement card-par-card (1 clic = 1 card). */
    scroll-snap-stop: always;
    margin: 0;
}

/* Boutons de navigation lateraux */
.mdm-avis__nav {
    flex-shrink: 0;
    align-self: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(74, 56, 50, .2);
    background: #fff;
    color: var(--m-ink);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease,
                opacity .15s ease, transform .15s ease;
    box-shadow: 0 2px 6px -2px rgba(74, 56, 50, .2);
    padding: 0;
}

.mdm-avis__nav:hover {
    background: var(--m-ink);
    color: var(--m-cream);
    border-color: var(--m-ink);
    transform: scale(1.05);
}

.mdm-avis__nav[disabled] {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

.mdm-avis__nav--prev svg { transform: rotate(180deg); }

/* Lien « voir tous les avis » sous le carrousel */
.mdm-avis__see-all {
    text-align: center;
    margin-top: 28px;
}

.mdm-avis__see-all-link {
    font-family: var(--m-font-body);
    font-size: 14px;
    color: var(--m-ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color .15s ease, border-color .15s ease;
}

.mdm-avis__see-all-link:hover {
    color: var(--m-gold);
    border-bottom-color: var(--m-gold);
}

/* - Card témoignage - */
.mdm-review-card {
    position: relative;
    background: #fff;
    padding: 24px;
    border-radius: 6px;
    box-shadow: var(--m-paper-shadow);
}

.mdm-review-card:nth-child(4n+1) { transform: rotate(-.6deg); }
.mdm-review-card:nth-child(4n+2) { transform: rotate(.8deg); }
.mdm-review-card:nth-child(4n+3) { transform: rotate(-.4deg); }
.mdm-review-card:nth-child(4n+4) { transform: rotate(.5deg); }

/* Splash blob coloré flouté en haut-droite (couleur via inline style) */
.mdm-review-card__splash {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    filter: blur(6px);
    opacity: .7;
    pointer-events: none;
}

/* Ligne d'étoiles dorées (5 étoiles 13px, gap 2) */
.mdm-stars {
    display: flex;
    gap: 2px;
    line-height: 0; /* évite l'espace sous les SVG */
}

.mdm-review-card__quote {
    font-family: var(--m-font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--m-ink);
    line-height: 1.5;
    margin: 14px 0;
}

.mdm-review-card__author {
    border-top: 1px dashed rgba(74, 56, 50, .15);
    padding-top: 10px;
    font-family: var(--m-font-hand);
    font-size: 20px;
    color: var(--m-ink);
    line-height: 1;
}

.mdm-review-card__animal {
    font-family: var(--m-font-body);
    font-size: 12px;
    color: var(--m-ink-2);
    font-style: italic;
}

/* - Responsive - */
@media (max-width: 1024px) {
    .mdm-avis__grid { grid-template-columns: 1fr 1fr; }
    .mdm-avis__track { grid-auto-columns: calc((100% - 40px) / 3); }
}

@media (max-width: 700px) {
    .mdm-avis__track { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 500px) {
    .mdm-avis__track { grid-auto-columns: 85%; }
    .mdm-avis__nav { display: none; } /* sur mobile : swipe natif suffit */
}

@media (max-width: 600px) {
    .mdm-avis { padding: var(--m-space-xl) var(--m-space); }
    .mdm-avis__grid { grid-template-columns: 1fr; gap: 16px; }
}