/* Shortcodes de contenu RR : [rr_message], [rr_button]. Palette teal var(--color-primary, #040404) / or var(--color-accent, #dab455). */

/* ───────────── [rr_message] ───────────── */
.rr-message {
    display: flex;
    gap: .85rem;
    margin: 1.75rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 8px;
    line-height: 1.55;
}

.rr-message__icon {
    flex: 0 0 auto;
    line-height: 0;
    margin-top: .1rem;
}

.rr-message__content { min-width: 0; }

.rr-message__title {
    margin: 0 0 .3rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.rr-message__body > :first-child { margin-top: 0; }
.rr-message__body > :last-child  { margin-bottom: 0; }

/* Info + Conseil : couleur de marque */
.rr-message--info,
.rr-message--tip {
    background: rgba(var(--color-primary-rgb, 4, 4, 4), 0.05);
    border-color: rgba(var(--color-primary-rgb, 4, 4, 4), .25);
    color: var(--color-text, #000000);
}
.rr-message--info .rr-message__icon,
.rr-message--tip .rr-message__icon,
.rr-message--info .rr-message__title,
.rr-message--tip .rr-message__title { color: var(--color-primary, #040404); }

/* Attention : or */
.rr-message--warning {
    background: rgba(var(--color-accent-rgb, 218, 180, 85), 0.14);
    border-color: rgba(var(--color-accent-rgb, 218, 180, 85), .45);
    color: var(--color-accent-dark, #896a1e);
}
.rr-message--warning .rr-message__icon,
.rr-message--warning .rr-message__title { color: var(--color-accent-dark, #896a1e); }

/* Important : rouge */
.rr-message--danger {
    background: #fbecea;
    border-color: rgba(192, 57, 43, .3);
    color: #7c241b;
}
.rr-message--danger .rr-message__icon,
.rr-message--danger .rr-message__title { color: #c0392b; }

/* Succès : vert */
.rr-message--success {
    background: #eaf6ef;
    border-color: rgba(26, 122, 79, .3);
    color: #17563a;
}
.rr-message--success .rr-message__icon,
.rr-message--success .rr-message__title { color: #1a7a4f; }

/* ───────────── [rr_button] ───────────── */
.rr-button-wrap { margin: 1.5rem 0; }
.rr-button-wrap--left   { text-align: left; }
.rr-button-wrap--center { text-align: center; }
.rr-button-wrap--right  { text-align: right; }

.rr-button {
    display: inline-block;
    padding: .7rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.rr-button--large { padding: .9rem 2rem; font-size: 1.1rem; }

/* SPECIFICITE : les regles ci-dessous doublent la classe (.rr-button.rr-button--x)
   au lieu de la citer seule. Sans ca, la regle de lien du contenu du theme
   (`.page-body a`, specificite 0-1-1) l'emporte sur `.rr-button--primary`
   (0-1-0) et impose sa couleur au TEXTE du bouton : on obtenait du noir sur
   fond noir, et du gris sur gris au survol. Doubler la classe donne 0-2-0
   (et 0-3-0 avec :hover), ce qui passe devant sans avoir a citer une classe
   du theme depuis le plugin. */

/* Principal : noir plein, bascule sur l'or au survol.
   blanc sur noir = 20,5:1 ; noir sur or = 10,4:1. */
.rr-button.rr-button--primary {
    background: var(--color-primary, #040404);
    border-color: var(--color-primary, #040404);
    color: #fff;
}
.rr-button.rr-button--primary:hover,
.rr-button.rr-button--primary:focus-visible {
    background: var(--color-accent, #dab455);
    border-color: var(--color-accent, #dab455);
    color: var(--color-primary, #040404);
}

/* Or : l'inverse exact du principal. */
.rr-button.rr-button--gold {
    background: var(--color-accent, #dab455);
    border-color: var(--color-accent, #dab455);
    color: var(--color-primary, #040404);
}
.rr-button.rr-button--gold:hover,
.rr-button.rr-button--gold:focus-visible {
    background: var(--color-primary, #040404);
    border-color: var(--color-primary, #040404);
    color: var(--color-accent, #dab455);
}

/* Contour : se remplit au survol. */
.rr-button.rr-button--outline {
    background: transparent;
    border-color: var(--color-primary, #040404);
    color: var(--color-primary, #040404);
}
.rr-button.rr-button--outline:hover,
.rr-button.rr-button--outline:focus-visible {
    background: var(--color-primary, #040404);
    border-color: var(--color-primary, #040404);
    color: #fff;
}

/* Le focus clavier doit rester visible sur toutes les variantes. */
.rr-button:focus-visible {
    outline: 2px solid var(--color-accent-dark, #896a1e);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .rr-button { display: block; text-align: center; }
}