/* ── Référents Locaux — styles ─────────────────────────────────────────────
   Design sobre et fonctionnel, compatible avec n'importe quel thème WP.
   Les variables CSS permettent de surcharger facilement depuis le thème.
   ─────────────────────────────────────────────────────────────────────── */

#rl-app {
    --rl-accent:      #2563eb;
    --rl-accent-dark: #1d4ed8;
    --rl-bg:          #f8fafc;
    --rl-border:      #e2e8f0;
    --rl-text:        #1e293b;
    --rl-muted:       #64748b;
    --rl-radius:      6px;
    --rl-gap:         1rem;

    font-family: inherit;
    color: var(--rl-text);
    max-width: 600px;
}

/* ── Formulaire ─────────────────────────────────────────────────────────── */

#rl-form {
    display: flex;
    flex-direction: column;
    gap: var(--rl-gap);
}

.rl-fields {
    display: flex;
    gap: var(--rl-gap);
    flex-wrap: wrap;
}

.rl-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
    min-width: 140px;
}

.rl-field label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--rl-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rl-field input {
    padding: .6rem .8rem;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    font-size: 1rem;
    color: var(--rl-text);
    background: #fff;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

.rl-field input:focus {
    outline: none;
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

#rl-submit {
    align-self: flex-start;
    padding: .65rem 1.6rem;
    background: var(--rl-accent);
    color: #fff;
    border: none;
    border-radius: var(--rl-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

#rl-submit:hover,
#rl-submit:focus {
    background: var(--rl-accent-dark);
    outline: none;
}

/* ── Zone de résultats ──────────────────────────────────────────────────── */

#rl-result {
    margin-top: 1.5rem;
}

.rl-loading,
.rl-none {
    color: var(--rl-muted);
    font-style: italic;
}

/* ── Carte référent ─────────────────────────────────────────────────────── */

.rl-card {
    background: var(--rl-bg);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}

.rl-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .75rem;
    color: var(--rl-text);
}

.rl-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.rl-details li {
    font-size: .95rem;
    color: var(--rl-text);
}

.rl-label {
    display: inline-block;
    min-width: 100px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--rl-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: .4rem;
}

.rl-details a {
    color: var(--rl-accent);
    text-decoration: none;
}

.rl-details a:hover {
    text-decoration: underline;
}