/* Verbatims (modèle de la maquette) : grande carte, guillemets taillés dans le coin, l'essentiel en gras */
.vq { position: relative; overflow: hidden; border-radius: 36px; padding: 92px 36px 32px; margin-top: 48px; max-width: 560px; }
.vq blockquote strong { font-weight: 700; }
.vq::before { content: '\201D'; position: absolute; right: 16px; top: -.2em; font: 800 250px/1 'BG'; letter-spacing: -.06em; }
.vq blockquote { font: 400 clamp(19px, 1.5vw, 22px)/1.32 'BG'; letter-spacing: -.012em; text-wrap: pretty; }
.vq figcaption { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.vq figcaption i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 18px 'BG'; font-style: normal; flex: none; }
.vq figcaption b { display: block; font: 700 16px 'BG'; }
.vq figcaption span { font: 500 13.5px/1.35 'IN'; }
.vq-v { background: var(--violet); color: #fff; }
.vq-v::before { color: var(--jaune); }
.vq-v figcaption i { background: var(--orange); color: #fff; }
.vq-v figcaption span { color: #E4D7F4; } .vq-v figcaption b { color: #fff; }
.vq-y { background: var(--jaune); color: var(--violet); }
.vq-y::before { color: var(--orange); }
.vq-y figcaption i { background: var(--violet); color: #fff; }
.vq-w { background: #fff; color: var(--violet); box-shadow: 0 2px 4px rgba(42,15,82,.05), 0 24px 50px rgba(42,15,82,.10); }
.vq-w::before { color: var(--orange); }
.vq-w figcaption i { background: var(--violet); color: #fff; }
.vq-w figcaption span, .vq-y figcaption span { color: #4A3A66; }
/* Téléphone : même carte, guillemets et marges à la taille de l écran (le texte gagne de la largeur) */
@media (max-width: 600px) { .vq { padding: 64px 24px 26px; border-radius: 30px; } .vq::before { font-size: 180px; right: 12px; } .vq figcaption { margin-top: 24px; } }