/* ===========================
          PAGE TÉMOIGNAGES
   (styles partagés : .content-section
   dans css/index.css)
=========================== */

.tm-intro {
    text-align: center;
}

.tm-intro p {
    text-wrap: balance;
}

/* Conteneur large */
.tm-wide {
    width: 100%;
    max-width: 68.75rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.tm-block {
    padding-bottom: clamp(2.5rem, 6vw, 4.375rem);
}

.tm-block--last {
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* ===== TÉMOIGNAGES ===== */
.tm-quotes {
    /* grille : 3 cartes par ligne sur ordinateur, 2 sur tablette, 1 sur mobile.
       Les cartes d'une même ligne ont la même hauteur. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
    gap: 1.5rem;
}

.tm-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 3.125rem 1.625rem 1.5rem;
    background: rgb(251, 245, 234);
    border-radius: 1.25rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* grand guillemet décoratif */
.tm-quote::before {
    content: "\201C";
    position: absolute;
    top: 0.25rem;
    left: 1.25rem;
    font-family: var(--police-titre);
    font-size: 4.2rem;
    line-height: 1;
    color: #ff7800;
}

.tm-quote:hover {
    transform: translateY(-0.375rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.16);
}

.tm-quote blockquote {
    margin: 0 0 1.125rem;
}

.tm-quote blockquote p {
    font-family: var(--police-texte);
    font-size: clamp(1.02rem, calc(1.3vw * var(--taille-texte)), 1.12rem);
    font-style: italic;
    line-height: 1.55;
    color: #2b2b2b;
}

.tm-quote figcaption {
    /* nom et lien toujours en bas de la carte */
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding-top: 1rem;
    border-top: 0.125rem solid rgba(26, 74, 160, 0.15);
}

.tm-name {
    font-family: var(--police-titre);
    font-size: 1.1rem;
    color: #1a4aa0;
}

.tm-meta {
    font-family: var(--police-texte);
    font-size: 0.9rem;
    color: #666;
}

.tm-meta sup {
    line-height: 0;
}

/* lien vers le témoignage d'origine */
.tm-link {
    margin-top: 0.625rem;
    font-family: var(--police-texte);
    font-size: 0.95rem;
    font-weight: bold;
    color: #1a4aa0;
    text-decoration: none;
    transition: color 0.25s ease;
}

.tm-link::after {
    content: " \2197";
}

.tm-link:hover {
    color: #ff7800;
    text-decoration: underline;
}

/* ===========================
           RESPONSIVE
=========================== */

/* témoignage long : sur 2 colonnes quand la grille en a au moins 3 */
@media (min-width: 1000px) {
    .tm-quote--wide {
        grid-column: span 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-quote {
        transition: none;
    }

    .tm-quote:hover {
        transform: none;
    }
}