/* Default Theme - ads
   Les variables sont dans templates/components/theme_critical.css.twig (inliné dans le HTML)
   Ce fichier ne contient que les ajustements non critiques. */

/* ── Annuaire des prestataires ─────────────────────────────────────────── */
.directory-monogram {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--lbc-blue, #000080), var(--lbc-turquoise, #00ced1));
    text-transform: uppercase;
    user-select: none;
}

.directory-monogram-lg {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    font-size: 2rem;
}

.directory-monogram[data-slug=""] {
    background: var(--lbc-border, #eee);
}

.directory-masked {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
}

.directory-description {
    line-height: 1.7;
    color: var(--lbc-text, #1a1a1a);
}

.directory-card {
    border: 1px solid var(--lbc-border, #e5e7eb);
    border-radius: var(--lbc-radius-lg, 20px);
    box-shadow: var(--lbc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.07));
    transition: transform var(--lbc-speed, 0.22s) var(--lbc-ease, ease),
                box-shadow var(--lbc-speed, 0.22s) var(--lbc-ease, ease),
                border-color var(--lbc-speed, 0.22s) var(--lbc-ease, ease);
}

.directory-card:hover,
.directory-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--lbc-shadow-lg, 0 18px 40px -12px rgba(15, 23, 42, 0.22)) !important;
    border-color: color-mix(in srgb, var(--lbc-orange, #f56b2a) 30%, var(--lbc-border, #e5e7eb));
}

.directory-card h3 a {
    color: inherit;
}

.directory-card h3 a:hover {
    color: var(--lbc-blue, #000080);
}

@media (max-width: 575.98px) {
    .directory-monogram-lg {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }
}

.directory-photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-bottom: 1px solid var(--lbc-border, #e5e7eb);
}

.directory-cover {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--lbc-radius-lg, 20px);
    box-shadow: var(--lbc-shadow, 0 4px 16px rgba(15, 23, 42, 0.08));
}

.photo-credit {
    font-size: 0.75rem;
    color: var(--lbc-text-light, #999);
}

.photo-credit a {
    color: var(--lbc-text-muted, #666);
}

.credit-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--lbc-radius-sm, 8px);
    border: 1px solid var(--lbc-border, #e5e7eb);
    transition: transform var(--lbc-speed, 0.22s) var(--lbc-ease, ease);
}

.credit-thumb:hover {
    transform: scale(1.04);
}

.directory-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 14px;
    background: var(--lbc-surface, #fff);
    border: 1px solid var(--lbc-border, #e5e7eb);
    padding: 6px;
}