/* ==================================================
   BLOC — TÉMOIGNAGES & AVIS GOOGLE

   Fond violet, deux colonnes : les témoignages recueillis
   par Virages à gauche sur des cartes translucides, la
   fiche Google à droite sur une carte blanche opaque.
================================================== */

.temoignages {
    background: var(--v-violet-500);
}

/* --------------------------------------------------
   L'ENTÊTE COMMUNE, SUR FOND VIOLET

   Le bloc se fabriquait la sienne. Il prend maintenant
   `.v-entete` comme la grille d'articles et la grille de
   personnes — d'où ces trois règles : le composant est
   dessiné pour un fond clair, et sur le violet ni le
   titre ni le lien ne se verraient.
-------------------------------------------------- */

.temoignages .v-entete__texte {
    max-width: 700px;
}

/* Sur le violet, le surtitre passe au jaune vif et le titre au blanc. */
.temoignages .v-eyebrow {
    color: var(--v-jaune-vif);
}

.temoignages .v-titre {
    color: var(--v-texte-inverse);
}

/* Le lien « voir tout » devient un bouton contouré de blanc.

   `.v-entete__lien` est un lien de texte en violet d'action : sur un
   fond violet, il disparaît purement et simplement. La variante blanche
   du bouton est celle que le thème réserve aux fonds de couleur pleine,
   et c'est aussi ce qui donne enfin du poids à la seule sortie du bloc.
   Les valeurs sont celles de `.v-bouton` et `.v-bouton--blanc` : on ne
   peut pas les ajouter en classe, l'entête est rendue par un helper
   commun à cinq blocs. */
.temoignages .v-entete__lien {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid var(--v-blanc);
    border-radius: var(--v-radius-pill);
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--v-blanc);
    transition: background 0.2s ease;
}

.temoignages .v-entete__lien:hover,
.temoignages .v-entete__lien:focus-visible {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------
   COLONNE GAUCHE — témoignages du site
-------------------------------------------------- */

.temoignages__site {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

/* Blanc à 8 % : la carte se détache du violet sans l'écraser. */
.temoignages__vedette,
.temoignages__simple {
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--v-radius-xl);
}

.temoignages__vedette {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px;
}

.temoignages__portrait {
    flex: 0 0 auto;
    width: 178px;
    height: 178px;
    border-radius: var(--v-radius-pill);
    overflow: hidden;
}

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

.temoignages__vedette-texte {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Les citations courtes sont regroupées : sans conteneur, on ne peut
   pas les passer en grille quand le bloc occupe toute la largeur. */
.temoignages__secondaires {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.temoignages__simple {
    padding: 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.temoignages__citation {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 1.25rem;
    line-height: 1.45;
    color: #faf8f4;
}

.temoignages__citation--petite {
    font-size: 1rem;
    color: var(--v-texte-inverse);
}

/* Un nom de personne, pas un surtitre.

   Il était en 13 px, 600, MAJUSCULES, interlettré à 0,06em — le
   traitement que le thème réserve aux surtitres de section, appliqué ici
   à « Marie D., reconvertie en 2023 ». `mur_temoignages`, le bloc frère,
   écrit ses auteurs en casse normale : les deux blocs de témoignages se
   contredisaient sur la même page. Le jaune reste, c'est la couleur du
   bloc sur le violet. */
.temoignages__auteur {
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-jaune-vif);
}

.temoignages__simple .temoignages__auteur {
    font-size: 0.75rem;
}

/* --------------------------------------------------
   SANS PANNEAU GOOGLE — pleine largeur

   Le bloc n'avait qu'un seul emploi — l'accueil, où le panneau Google
   occupe le tiers restant — et sa colonne était donc en col-lg-8 quoi
   qu'il arrive. Posé sans panneau, il laissait un tiers de page vide à
   sa droite. Il tient maintenant toute la largeur : la vedette s'étale,
   et les citations courtes passent en grille.
-------------------------------------------------- */

/* La citation vedette reste lisible : au-delà d'une soixantaine de
   caractères par ligne, l'œil perd le début de la ligne suivante. */
.temoignages--pleine .temoignages__vedette-texte {
    max-width: 62ch;
}

.temoignages--pleine .temoignages__secondaires {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.temoignages--pleine .temoignages__simple {
    height: 100%;
}

/* --------------------------------------------------
   COLONNE DROITE — panneau Google
-------------------------------------------------- */

.temoignages__google {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 22px;
    background: var(--v-blanc);
    border-radius: var(--v-radius-xl);
}

.temoignages__google-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.temoignages__google-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--v-radius-pill);
    background: var(--v-turquoise-100);
    font-family: var(--v-font-titre);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--v-texte-titre);
}

.temoignages__google-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.temoignages__google-note strong {
    font-family: var(--v-font-titre);
    font-size: 2.125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--v-texte-titre);
}

.temoignages__google-detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.temoignages__etoiles {
    color: var(--v-orange);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

.temoignages__google-volume {
    font-family: var(--v-font-corps);
    font-size: 0.75rem;
    color: var(--v-texte-meta);
}

/* Chaque avis recopié : cartouche turquoise clair. */
.temoignages__avis {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 12px 14px;
    background: var(--v-turquoise-100);
    border-radius: var(--v-radius-md);
}

.temoignages__avis .temoignages__etoiles {
    font-size: 0.6875rem;
}

/* 11,5 px dans une carte blanche, à côté de citations à 20 px et d'un
   corps de page à 14 : le panneau se lisait comme une note de bas de
   page, et c'est ce décalage qu'on voyait avant de savoir le nommer. */
.temoignages__avis blockquote {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-corps);
}

.temoignages__avis figcaption {
    font-family: var(--v-font-corps);
    font-size: 0.6875rem;
    color: var(--v-texte-meta);
}

.temoignages__google-lien {
    margin-top: auto;
    font-family: var(--v-font-corps);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--v-action);
    text-decoration: none;
}

.temoignages__google-lien:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .temoignages__vedette {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    .temoignages__portrait {
        width: 96px;
        height: 96px;
    }
    .temoignages__citation { font-size: 1.0625rem; }
    .temoignages__simple { padding: 16px 20px; }
}

@media (max-width: 575px) {
    /* La note Google à 34 px prenait la moitié de la largeur pour trois
       caractères, et poussait « sur 5 » à la ligne. */
    .temoignages__google-note strong {
        font-size: 1.75rem;
    }
}