/* ==========================================================================
   MenBarra — feuille de style front
   Palette : navy (structure) + rouge (action) + or (confiance/vérification).
   Tout est piloté par des variables CSS pour que le mode sombre (§105) se
   limite à redéfinir des tokens, jamais à dupliquer des règles.
   ========================================================================== */

:root {
    --mb-navy: #1d3557;
    --mb-navy-dark: #142944;
    --mb-red: #e63946;
    --mb-red-dark: #c1121f;
    --mb-gold: #f4b740;
    --mb-green: #2a9d8f;

    --mb-surface: #ffffff;
    --mb-bg: #f6f8fb;
    --mb-border: #e3e8ef;
    --mb-text: #1f2937;
    --mb-muted: #6b7280;
    --mb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);

    --mb-radius: 12px;
    --mb-radius-sm: 8px;
}

[data-bs-theme="dark"] {
    --mb-surface: #16202f;
    --mb-bg: #0d1621;
    --mb-border: #263449;
    --mb-text: #e5e9f0;
    --mb-muted: #9aa5b5;
    --mb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

body {
    background: var(--mb-bg);
    color: var(--mb-text);
}

.mb-main {
    min-height: 60vh;
    padding-bottom: 3rem;
}

@media (min-width: 1440px) {
    .container { max-width: 1400px; }
}

/* ===== Header ===== */
.mb-nav {
    background: var(--mb-surface);
    border-bottom: 1px solid var(--mb-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .2s ease;
}
.mb-nav.scrolled { box-shadow: var(--mb-shadow); }

.mb-brand {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--mb-navy);
    text-decoration: none;
}
[data-bs-theme="dark"] .mb-brand { color: #fff; }
.mb-brand span { color: var(--mb-red); }
.mb-brand:hover { color: var(--mb-navy-dark); }

.mb-tagline {
    font-size: .72rem;
    color: var(--mb-muted);
    letter-spacing: .3px;
}

.mb-nav .nav-link {
    font-size: .95rem;
    font-weight: 500;
    color: var(--mb-text);
    border-radius: var(--mb-radius-sm);
    padding: .45rem .75rem;
}
.mb-nav .nav-link:hover,
.mb-nav .nav-link.active { color: var(--mb-red); background: rgba(230, 57, 70, .07); }

/* Recherche */
.mb-search { position: relative; flex: 1 1 auto; min-width: 0; }
.mb-search .form-control {
    height: 44px;
    border-radius: var(--mb-radius);
    padding-inline-start: 40px;
    background: var(--mb-bg);
    border-color: var(--mb-border);
    color: var(--mb-text);
}
.mb-search .form-control:focus {
    background: var(--mb-surface);
    border-color: var(--mb-navy);
    box-shadow: 0 0 0 .2rem rgba(29, 53, 87, .12);
}
.mb-search-btn {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    /* Blanc sur --mb-red ne donne que 4,17:1 — sous AA pour ce corps de texte.
     * Le marine passe à 12,36:1 et laisse le rouge aux appels à l'action. */
    background: var(--mb-navy);
    color: #fff;
    height: 34px;
    min-width: 44px;
    padding-inline: .8rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.mb-search-btn:hover { background: var(--mb-navy-dark); }
.mb-hero .mb-search-btn { height: 42px; }
.mb-search .form-control { padding-inline-end: 5.5rem; }

.mb-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    color: var(--mb-muted);
    pointer-events: none;
}
@media (min-width: 992px) { .mb-search { max-width: 460px; } }

.mb-icon-btn {
    width: 42px; height: 42px;
    display: inline-grid; place-items: center;
    border-radius: var(--mb-radius-sm);
    color: var(--mb-text);
    border: 1px solid transparent;
    background: transparent;
    position: relative;
}
.mb-icon-btn:hover { background: var(--mb-bg); color: var(--mb-red); }
.mb-icon-badge {
    position: absolute; top: 2px; inset-inline-end: 2px;
    font-size: 10px; padding: 2px 5px; line-height: 1;
}

/* ===== Boutons ===== */
.btn-mb-primary {
    background: var(--mb-red);
    border-color: var(--mb-red);
    color: #fff;
    font-weight: 600;
    border-radius: var(--mb-radius-sm);
}
.btn-mb-primary:hover { background: var(--mb-red-dark); border-color: var(--mb-red-dark); color: #fff; }

.btn-mb-navy {
    background: var(--mb-navy);
    border-color: var(--mb-navy);
    color: #fff;
    font-weight: 600;
    border-radius: var(--mb-radius-sm);
}
.btn-mb-navy:hover { background: var(--mb-navy-dark); border-color: var(--mb-navy-dark); color: #fff; }

.btn-mb-outline {
    border: 1px solid var(--mb-border);
    color: var(--mb-text);
    background: var(--mb-surface);
    font-weight: 600;
    border-radius: var(--mb-radius-sm);
}
.btn-mb-outline:hover { border-color: var(--mb-navy); color: var(--mb-navy); }

/* ===== Cartes ===== */
.mb-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.mb-card:hover { transform: translateY(-3px); box-shadow: var(--mb-shadow); }

.mb-card-media {
    aspect-ratio: 4 / 3;
    background: var(--mb-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.mb-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mb-card-media .fa-image { font-size: 2rem; color: var(--mb-border); }

.mb-card-body { padding: .85rem; }
.mb-card-title {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mb-text);
    text-decoration: none;
}
.mb-card-title:hover { color: var(--mb-red); }

.mb-price { font-size: 1.05rem; font-weight: 700; color: var(--mb-navy); }
[data-bs-theme="dark"] .mb-price { color: #fff; }
.mb-price-original { font-size: .78rem; color: var(--mb-muted); }

/* ===== Badges métier ===== */
.mb-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 600;
    padding: .25rem .5rem;
    border-radius: 999px;
    line-height: 1;
}
.mb-badge-verified { background: rgba(42, 157, 143, .12); color: var(--mb-green); }
/* #b47c04 tombait à 3,27:1 sur son propre fond pâle — sous le seuil AA. */
.mb-badge-gold     { background: rgba(244, 183, 64, .16); color: #8a5f00; }
.mb-badge-tunisia  { background: rgba(230, 57, 70, .1); color: var(--mb-red); }
.mb-badge-abroad   { background: rgba(29, 53, 87, .1); color: var(--mb-navy); }
.mb-badge-ondemand { background: rgba(107, 114, 128, .12); color: var(--mb-muted); }
[data-bs-theme="dark"] .mb-badge-abroad { background: rgba(255, 255, 255, .1); color: #cbd5e1; }
[data-bs-theme="dark"] .mb-badge-gold   { color: var(--mb-gold); }

/* ===== Sections ===== */
.mb-section { padding: 2.25rem 0; }
.mb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.mb-section-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.mb-section-link { font-size: .875rem; font-weight: 600; color: var(--mb-red); text-decoration: none; }
.mb-section-link:hover { text-decoration: underline; }

/* ===== Hero ===== */
.mb-hero {
    background: linear-gradient(135deg, var(--mb-navy) 0%, var(--mb-navy-dark) 55%, #0d1f38 100%);
    color: #fff;
    padding: 3.5rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.mb-hero::after {
    content: '';
    position: absolute;
    inset-inline-end: -80px;
    top: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 57, 70, .35), transparent 68%);
}
.mb-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.2; }
.mb-hero p { color: rgba(255, 255, 255, .82); font-size: 1.02rem; }
.mb-hero .mb-search .form-control { background: #fff; color: #1f2937; border-color: transparent; height: 52px; }

/* Les 4 modèles MenBarra (§121) */
.mb-model-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--mb-radius);
    padding: 1rem;
    height: 100%;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: background .15s ease;
}
.mb-model-card:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mb-model-card i { font-size: 1.3rem; color: var(--mb-gold); }
.mb-model-card h3 { font-size: .98rem; font-weight: 700; margin: .55rem 0 .25rem; }
.mb-model-card p { font-size: .82rem; color: rgba(255, 255, 255, .75); margin: 0; }

/* ===== Barre de confiance ===== */
.mb-counters {
    background: var(--mb-surface);
    border-block: 1px solid var(--mb-border);
    padding: 1.1rem 0;
}
.mb-counter-value { font-size: 1.5rem; font-weight: 800; color: var(--mb-navy); line-height: 1; }
[data-bs-theme="dark"] .mb-counter-value { color: #fff; }
.mb-counter-label { font-size: .78rem; color: var(--mb-muted); }

/* ===== Catégories & pays ===== */
.mb-tile {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    padding: 1rem .75rem;
    text-align: center;
    text-decoration: none;
    color: var(--mb-text);
    display: block;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease;
}
.mb-tile:hover { border-color: var(--mb-red); transform: translateY(-2px); color: var(--mb-red); }
.mb-tile i { font-size: 1.5rem; color: var(--mb-navy); }
[data-bs-theme="dark"] .mb-tile i { color: var(--mb-gold); }
.mb-tile-label { font-size: .85rem; font-weight: 600; margin-top: .5rem; display: block; }
.mb-tile-count { font-size: .72rem; color: var(--mb-muted); }
/* Puce pays.
 *
 * Les tuiles affichaient un émoji drapeau (U+1F1F9 U+1F1F3…). Windows ne
 * livre aucun glyphe de drapeau : Chrome, Edge et Firefox y rendent deux
 * lettres dans des carrés, pas un drapeau. Le code ISO rend la même
 * information, à l'identique sur toutes les plateformes, et c'est déjà le
 * vocabulaire du filtre `?pays=`.
 */
.mb-country-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: .3rem .5rem;
    border-radius: var(--mb-radius-sm);
    background: rgba(29, 53, 87, .08);
    color: var(--mb-navy);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] .mb-country-chip { background: rgba(255, 255, 255, .1); color: var(--mb-gold); }
.mb-tile:hover .mb-country-chip { background: rgba(230, 57, 70, .12); color: var(--mb-red); }

/* ===== États vides ===== */
.mb-empty {
    background: var(--mb-surface);
    border: 1px dashed var(--mb-border);
    border-radius: var(--mb-radius);
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--mb-muted);
}
.mb-empty i { font-size: 2rem; opacity: .5; margin-bottom: .5rem; display: block; }

/* ===== Confiance (§4 du motif « place de marché ») =====
 *
 * La promesse de MenBarra n'est pas le catalogue, c'est le recours : vendeur
 * vérifié, fiche contrôlée, argent gardé jusqu'à réception, litige arbitré.
 * La page l'affirmait en une phrase du bandeau et ne l'expliquait nulle part.
 */
.mb-trust { background: var(--mb-surface); border-block: 1px solid var(--mb-border); }
.mb-trust-item { display: flex; gap: .85rem; align-items: flex-start; }
.mb-trust-item i {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(42, 157, 143, .12);
    /* --mb-green sur sa propre pastille ne donne que 2,92:1. */
    color: #1f7a6f;
    font-size: 1rem;
}
[data-bs-theme="dark"] .mb-trust-item i { color: var(--mb-green); }
.mb-trust-item h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .2rem; }
.mb-trust-item p { font-size: .84rem; color: var(--mb-muted); margin: 0; line-height: 1.5; }

/* ===== Footer ===== */
.mb-footer {
    background: var(--mb-navy-dark);
    color: rgba(255, 255, 255, .78);
    padding: 2.5rem 0 1.25rem;
}
.mb-footer h4 { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: .85rem; }
.mb-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .875rem; }
.mb-footer a:hover { color: var(--mb-gold); }
.mb-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 1.75rem;
    padding-top: 1rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

/* ===== Back-office ===== */
.mb-admin { display: flex; min-height: 100vh; }
.mb-sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--mb-navy-dark);
    color: rgba(255, 255, 255, .8);
    padding: 1rem 0;
}
.mb-sidebar a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem 1.1rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .9rem;
}
.mb-sidebar a:hover, .mb-sidebar a.active { background: rgba(255, 255, 255, .08); color: #fff; }
.mb-sidebar a i { width: 18px; text-align: center; }
.mb-sidebar-heading {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
    padding: 1rem 1.1rem .35rem;
}
.mb-admin-content { flex: 1 1 auto; min-width: 0; background: var(--mb-bg); }
@media (max-width: 991.98px) {
    .mb-admin { display: block; }
    .mb-sidebar { width: 100%; flex: none; }
}

/* ===== Back-office : listes et écrans de revue =====
 *
 * `.mb-card` est d'abord une carte du catalogue : elle se soulève au survol
 * pour signaler qu'on peut cliquer dessus. En back-office elle ne sert que de
 * panneau, et ce mouvement fait sauter les tableaux sous le curseur — on le
 * neutralise ici plutôt que de dupliquer la classe.
 */
.mb-admin .mb-card { transition: none; }
.mb-admin .mb-card:hover { transform: none; box-shadow: var(--mb-shadow); }

/* Tuile-compteur cliquable : elle filtre la liste ET dit quel filtre est actif.
 * Sans l'état `active`, on ne sait plus ce qu'on regarde après deux clics. */
.mb-stat {
    display: block;
    padding: .7rem .85rem;
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-sm);
    background: var(--mb-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.mb-stat:hover { border-color: var(--mb-navy); color: inherit; }
.mb-stat .mb-stat-label {
    font-size: .74rem;
    color: var(--mb-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.mb-stat .mb-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}
.mb-stat.active {
    border-color: var(--mb-navy);
    box-shadow: inset 3px 0 0 var(--mb-navy);
    background: rgba(29, 53, 87, .05);
}
.mb-stat.active .mb-stat-value { color: var(--mb-navy); }
[data-bs-theme="dark"] .mb-stat.active {
    border-color: var(--mb-gold);
    box-shadow: inset 3px 0 0 var(--mb-gold);
    background: rgba(244, 183, 64, .08);
}
[data-bs-theme="dark"] .mb-stat.active .mb-stat-value { color: var(--mb-gold); }

/* Tableaux : en-tête discret, ligne survolée, chiffres alignés. */
.mb-admin .table > thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mb-muted);
    border-bottom-color: var(--mb-border);
    white-space: nowrap;
}
.mb-admin .table > tbody > tr:hover > * { background: rgba(29, 53, 87, .035); }
[data-bs-theme="dark"] .mb-admin .table > tbody > tr:hover > * { background: rgba(255, 255, 255, .04); }
.mb-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Vignette de liste, et son substitut quand la fiche n'a pas de photo. */
.mb-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--mb-radius-sm);
    object-fit: cover;
    background: var(--mb-bg);
    border: 1px solid var(--mb-border);
}
.mb-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--mb-muted);
}

/* Signaux d'une ligne : tout ce qui mérite un regard, au même endroit.
 * Éparpillés dans quatre colonnes, ils se lisaient un par un. */
.mb-signal {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: 999px;
    white-space: nowrap;
}
.mb-signal-blocking { background: rgba(230, 57, 70, .12); color: var(--mb-red); }
.mb-signal-warn     { background: rgba(244, 183, 64, .18); color: #8a5f00; }
.mb-signal-info     { background: rgba(29, 53, 87, .09); color: var(--mb-navy); }
[data-bs-theme="dark"] .mb-signal-warn { color: var(--mb-gold); }
[data-bs-theme="dark"] .mb-signal-info { background: rgba(255, 255, 255, .08); color: var(--mb-text); }

/* Ancienneté dans la file : c'est la mesure qui dit quoi traiter d'abord. */
.mb-age-fresh { color: var(--mb-muted); }
.mb-age-warn  { color: #8a5f00; font-weight: 600; }
.mb-age-late  { color: var(--mb-red); font-weight: 700; }
[data-bs-theme="dark"] .mb-age-warn { color: var(--mb-gold); }

/* Colonne de décision : elle doit rester atteignable pendant qu'on lit la
 * fiche, sinon chaque vérification impose un aller-retour de scroll. */
@media (min-width: 992px) {
    .mb-sticky-col { position: sticky; top: 1rem; }
}

/* Galerie de revue : une image principale lisible plutôt que six vignettes. */
.mb-review-hero {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--mb-bg);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-sm);
}
.mb-review-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--mb-radius-sm);
    border: 2px solid var(--mb-border);
    display: block;
}
.mb-review-thumb.is-primary { border-color: var(--mb-red); }

/* Ligne de fait : libellé à gauche, valeur à droite, sans grille Bootstrap
 * qui casse dès que le libellé est long. */
.mb-facts { display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; gap: .35rem .75rem; }
.mb-facts dt { font-weight: 400; color: var(--mb-muted); font-size: .82rem; }
.mb-facts dd { margin: 0; font-size: .85rem; }

/* Pièce jointe attendue par la catégorie : fournie ou manquante, même liste. */
.mb-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem;
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-sm);
}
.mb-doc-row.is-missing { border-color: rgba(230, 57, 70, .45); background: rgba(230, 57, 70, .05); }

/* Fil de modération. */
.mb-timeline { list-style: none; margin: 0; padding-inline-start: 1rem; border-inline-start: 2px solid var(--mb-border); }
.mb-timeline li { position: relative; padding-bottom: .9rem; }
.mb-timeline li:last-child { padding-bottom: 0; }
.mb-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1rem - 1px - .275rem);
    top: .3rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--mb-border);
}
.mb-timeline li:first-child::before { background: var(--mb-navy); }