/* ════════════════════════════════════════════════════════════════════
   MISE EN AVANT DE LA MÉDAILLE

   Un encart réutilisable (partiels/promo-medaille.php), même bloc sur
   plusieurs pages, ton adapté par variante. Nom distinct de « .medaille »
   (le dessin gravé), pour ne pas se marcher dessus.
   ════════════════════════════════════════════════════════════════════ */

.promo-medaille {
    display: flex;
    align-items: center;
    gap: var(--r4);
    margin: var(--r5) 0;
    padding: var(--r4) var(--r5);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--arrondi-large, 12px);
}

.promo-medaille__visuel { flex: none; }
.promo-medaille__anneau { stroke: var(--or); }
.promo-medaille__disque { fill: var(--or); }
.promo-medaille__qr     { fill: var(--fond); }

.promo-medaille__texte { flex: 1 1 auto; }

.promo-medaille__titre {
    margin: 0 0 4px;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--texte);
}

.promo-medaille__phrase {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--texte-doux);
}

.promo-medaille__cta {
    flex: none;
    white-space: nowrap;
}

/* Sur mobile : on empile, le bouton passe pleine largeur. */
@media (max-width: 34rem) {
    .promo-medaille {
        flex-direction: column;
        align-items: flex-start;
    }

    .promo-medaille__cta {
        align-self: stretch;
        text-align: center;
    }
}