/* ============================================================
   TÉMOIGNAGES — étoiles + texte + nom.
   Reprend l'UI du site : palette crème, bordures douces,
   radius 18px, hover discret, Manrope (corps).
   ============================================================ */

.temoignages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.temoignage-card {
    margin: 0;
    padding: 1.9rem 1.7rem;
    background: rgba(255, 253, 250, 0.55);
    border: 1px solid var(--border, rgba(43, 36, 32, 0.12));
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.temoignage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(43, 36, 32, 0.08);
}

.temoignage-stars { display: flex; gap: 0.25rem; }
.temoignage-stars .star {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--accent, #B5784E);
    stroke-width: 1.4;
    opacity: 0.4;
}
.temoignage-stars .star.filled {
    fill: var(--accent, #B5784E);
    stroke: var(--accent, #B5784E);
    opacity: 1;
}

.temoignage-texte {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.75;
    font-style: italic;
    color: var(--text-sec, #5a5248);
    flex: 1;
}
.temoignage-texte::before { content: '«\00a0'; color: var(--accent, #B5784E); }
.temoignage-texte::after  { content: '\00a0»'; color: var(--accent, #B5784E); }

.temoignage-auteur {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink, #2B2420);
}
.temoignage-soin {
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-mut, #8a8075);
}

@media (max-width: 768px) {
    .temoignages-grid { gap: 1rem; margin-top: 1.8rem; }
    .temoignage-card { padding: 1.5rem 1.3rem; }
}

/* ===== CTA de fin de section (bouton contact) =====
   Styles .btn/.btn-fill embarqués (scopés) : la section s'affiche sur des
   pages dont le CSS ne définit pas ces classes (service, about, page). */
.temoignages-cta { text-align: center; margin-top: 2.5rem; }
.temoignages-cta .btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.85rem 2rem;
    font-family: var(--body, 'Manrope', sans-serif); font-size: 0.88rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: all 0.3s; border: none;
    text-decoration: none;
    transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
}
.temoignages-cta .btn-fill {
    background: var(--accent, #47433A); color: white;
    position: relative; overflow: hidden; isolation: isolate;
}
/* Glow curseur — même recette que .btn-fill (le spotlight délégué pose --mx/--my) */
.temoignages-cta .btn-fill::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
        var(--mocha, #9C7558) 30%, #684226 90%);
    opacity: 0; transition: opacity 0.35s ease;
    pointer-events: none; mix-blend-mode: lighten;
}
.temoignages-cta .btn-fill::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%),
        rgb(255 241 214 / 55%) 0%, #9c755878 25%, #9c755824 95%);
    opacity: 0; transition: opacity 0.35s ease;
    pointer-events: none; mix-blend-mode: plus-lighter;
}
.temoignages-cta .btn-fill:hover::before,
.temoignages-cta .btn-fill:hover::after { opacity: 1; }
.temoignages-cta .btn-fill:hover {
    box-shadow: 0 6px 22px rgba(255, 200, 130, 0.32), 0 0 40px rgba(255, 224, 170, 0.25);
}