.mcf-catalogue {
    --mcf-blue: #0d5fc7;
    --mcf-blue-dark: #0a3f8a;
    --mcf-red: #e2211c;
    --mcf-red-dark: #b91713;
    --mcf-bg: #f4f7fb;
    --mcf-border: #dfe5ee;
    --mcf-text: #1f2733;
    --mcf-text-muted: #5b6579;

    /* La classe "alignfull" (reconnue nativement par les thèmes à blocs WordPress,
       dont Twenty Twenty-Five) sort déjà le catalogue de la colonne de contenu étroite.
       Ce repli ne s'applique que si le thème actif ne gère pas alignfull. */
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;

    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--mcf-text);
}

.mcf-catalogue-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.mcf-filter-form {
    background: #fff;
    border: 1px solid var(--mcf-border);
    border-top: 4px solid var(--mcf-blue);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 28px;
    box-shadow: 0 4px 16px rgba(20, 40, 80, 0.07);
}

.mcf-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.mcf-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mcf-blue-dark);
    margin-bottom: 6px;
}

.mcf-field select,
.mcf-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mcf-border);
    border-radius: 6px;
    font-size: 14px;
    background-color: #fbfcfe !important;
    color: var(--mcf-text) !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: auto;
    -webkit-appearance: menulist;
}

/* Sécurité : le thème du site peut forcer une couleur de texte claire sur les
   champs de formulaire (texte tapé, options de liste, texte d'exemple), ce qui
   rend le contenu illisible (blanc sur blanc). On force nos propres couleurs
   avec !important pour passer au-dessus de ces règles globales du thème. */
.mcf-field select option {
    background-color: #fff !important;
    color: var(--mcf-text) !important;
}

.mcf-field input[type="text"]::placeholder {
    color: #93a0b5 !important;
    opacity: 1 !important;
}

/* Le remplissage automatique du navigateur (autofill) applique son propre fond
   (souvent sombre en mode sombre) que "background-color" seul ne peut pas
   surcharger : il faut passer par un box-shadow interne + forcer la couleur du
   texte affiché via -webkit-text-fill-color. */
.mcf-field input[type="text"]:-webkit-autofill,
.mcf-field input[type="text"]:-webkit-autofill:hover,
.mcf-field input[type="text"]:-webkit-autofill:focus,
.mcf-field input[type="text"]:autofill {
    -webkit-text-fill-color: var(--mcf-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #fbfcfe inset !important;
    box-shadow: 0 0 0 1000px #fbfcfe inset !important;
    caret-color: var(--mcf-text);
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.mcf-field select:hover,
.mcf-field input[type="text"]:hover {
    border-color: #b9c6db;
}

.mcf-field select:focus,
.mcf-field input[type="text"]:focus {
    outline: none !important;
    border-color: var(--mcf-blue);
    background-color: #fff !important;
    color: var(--mcf-text) !important;
    box-shadow: 0 0 0 3px rgba(13, 95, 199, 0.14);
}

.mcf-filter-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.mcf-btn {
    border: none;
    border-radius: 6px;
    padding: 13px 26px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.mcf-btn:active { transform: translateY(1px); }

.mcf-btn-primary {
    background: var(--mcf-red);
    color: #fff;
    box-shadow: 0 3px 10px rgba(226, 33, 28, 0.28);
}
.mcf-btn-primary:hover { background: var(--mcf-red-dark); }

.mcf-btn-secondary {
    background: #fff;
    color: var(--mcf-blue-dark);
    border: 1px solid var(--mcf-blue);
}
.mcf-btn-secondary:hover { background: #eef4fd; }

.mcf-results-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--mcf-text-muted);
    margin-bottom: 16px;
}

.mcf-no-results {
    background: #fff;
    border: 1px dashed var(--mcf-border);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    color: var(--mcf-text-muted);
}

.mcf-table-wrap {
    background: #fff;
    border: 1px solid var(--mcf-border);
    border-radius: 10px;
    overflow-x: auto;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.06);
}

.mcf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    white-space: nowrap;
}

.mcf-table thead th {
    background: var(--mcf-blue-dark);
    color: #fff;
    text-align: left;
    padding: 12px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
}

.mcf-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--mcf-border);
    color: var(--mcf-text);
    white-space: normal;
    vertical-align: middle;
}

.mcf-table tbody tr:hover {
    background: var(--mcf-bg);
}

.mcf-table tbody tr:last-child td {
    border-bottom: none;
}

.mcf-table-img {
    width: 90px;
    text-align: center;
}
.mcf-table-img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}
.mcf-img-placeholder-sm {
    display: block;
    color: #a4afc1;
    font-size: 10.5px;
    font-weight: 600;
}

.mcf-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 32px;
}
.mcf-page-btn {
    border: 1px solid var(--mcf-border);
    background: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--mcf-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mcf-page-btn:hover { background: var(--mcf-bg); border-color: #c7d5ea; }
.mcf-page-current {
    background: var(--mcf-blue);
    color: #fff;
    border-color: var(--mcf-blue);
}
.mcf-page-ellipsis {
    padding: 8px 4px;
    color: #9aa6b8;
}

.mcf-loading { opacity: 0.5; pointer-events: none; }

@media (max-width: 640px) {
    .mcf-catalogue-inner { padding: 0 16px; }
    .mcf-filter-actions { flex-direction: column; }
    .mcf-btn { width: 100%; }
}