/* ==========================================================================
   MAURISHOPPING — thème visuel
   Toutes les couleurs hexadécimales du projet vivent ICI (variables).

   RTL : les insets physiques (left/right) ont été convertis en propriétés
   logiques (inset-inline-start/end). En arabe, Bootstrap RTL + dir="rtl"
   inversent flex/header. Complément : static/css/theme-rtl.css.
   ========================================================================== */

:root {
    /* Couleurs de marque */
    --color-primary: #1F2F43;      /* Bleu foncé — header, hero, textes de marque */
    --color-secondary: #FFB319;    /* Jaune/or — boutons d'action, accents, bordure footer */

    /* Couleurs secondaires */
    --color-grey-mid: #ADB5BD;     /* Texte et icônes secondaires */
    --color-grey-card: #F2F2F2;     /* Fond des cartes de catégories */
    --color-grey-light: #F8F9FA;    /* Fond de section claire */

    /* Texte */
    --color-text-dark: #212529;
    --color-text-white: #FFFFFF;
    --color-text-grey: #6C757D;

    /* Spécifique */
    --color-dark: #0F1721;         /* Fond du footer, presque noir */
    --color-border: #DEE2E6;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);

    /* Texte sur CTA : le blanc sur #FFB319 ~1.8:1 (échec WCAG). Le sombre ~8:1. */
    --color-on-secondary: var(--color-text-dark);

    /* Badges de catégories uniquement — accents distinctifs, hors palette de marque */
    --badge-1: #3B82F6;
    --badge-2: #10B981;
    --badge-3: #EF4444;
    --badge-4: #8B5CF6;
    --badge-5: #F97316;
    --badge-6: #06B6D4;

    --header-statsbar-h: 1.85rem;
    --header-topbar-h: 4.5rem;
    --header-navbar-h: 2.75rem;
    --header-height: calc(var(--header-statsbar-h) + var(--header-topbar-h) + var(--header-navbar-h));
    --radius-pill: 999px;
    --radius-md: 0.75rem;
    --font: "Almarai", sans-serif;

    /* Bannières de catégories (accueil) */
    --banner-blue: #2563EB;
    --banner-blue-dark: #1D4ED8;
    --banner-orange: #F97316;
    --banner-orange-dark: #C2410C;
    --banner-teal: #0E7490;
    --banner-teal-dark: #0B5B71;
}

@media (max-width: 991.98px) {
    :root {
        --header-statsbar-h: 1.6rem;
        --header-topbar-h: 3.75rem;
        --header-navbar-h: 0rem;
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--color-text-dark);
    background: var(--color-text-white);
    padding-top: var(--header-height);
    /* Filet de sécurité : empêche tout débordement horizontal résiduel (élément mal
       dimensionné, texte trop long) de créer un scroll latéral sur mobile. */
    overflow-x: hidden;
    max-width: 100vw;
}

body.admin-body {
    padding-top: 0;
    background: var(--color-grey-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 700;
    color: var(--color-primary);
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-secondary);
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border: 2px solid var(--color-secondary);
    border-radius: var(--radius-pill);
    font-weight: 700;
    padding: 0.55rem 1.35rem;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-cta:hover,
.btn-cta:focus {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    filter: brightness(0.95);
}

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
}

.btn-cta-outline:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-weight: 400;
    padding: 0.4rem 0.9rem;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-grey-light);
}

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.85rem;
}

.btn-danger-outline:hover {
    background: var(--color-grey-card);
    color: var(--color-text-dark);
}

.btn-cta-lg {
    padding: 0.7rem 1.75rem;
    font-size: 1.05rem;
}

.btn-cta-sm,
.btn-ghost.btn-sm,
.btn-danger-outline.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

.btn-light-outline {
    background: transparent;
    color: var(--color-text-white);
    border: 1px solid var(--color-text-white);
    border-radius: var(--radius-pill);
    font-weight: 700;
    padding: 0.4rem 1rem;
}

.btn-light-outline:hover {
    background: var(--color-text-white);
    color: var(--color-primary);
}

/* Harmonise les boutons Bootstrap restants avec le thème */
.btn-success,
.btn-warning {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
    border-radius: var(--radius-pill);
    font-weight: 700;
}

.btn-outline-success,
.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-pill);
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-white) !important;
}

.btn-outline-secondary,
.btn-outline-danger {
    color: var(--color-primary);
    border-color: var(--color-border);
    border-radius: var(--radius-pill);
}

.btn-outline-light {
    border-radius: var(--radius-pill);
}

.btn-link {
    color: var(--color-text-grey);
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    border-radius: var(--radius-pill);
    border-color: var(--color-border);
    padding: 0.6rem 1rem;
    color: var(--color-text-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 35%, transparent);
}

textarea.form-control {
    border-radius: var(--radius-md);
}

.form-panel {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
}

.form-narrow {
    max-width: 32rem;
    margin-inline: auto;
}

.form-narrow-lg {
    max-width: 40rem;
}

.qty-input {
    width: 5rem;
}

.page-title {
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.muted {
    color: var(--color-text-grey);
}

/* --------------------------------------------------------------------------
   Header boutique (fixe)
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1030;
    /* min-height, pas height : si une traduction plus longue, un repli de police ou
       un zoom navigateur rend le contenu plus haut que prévu, le header grandit au
       lieu de déborder sous sa propre boîte et de chevaucher le contenu de <main>. */
    min-height: var(--header-height);
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   Barre de fréquentation (connectés / invités / visites 24h) — tout en haut
   du header, au-dessus de la barre de recherche.
   -------------------------------------------------------------------------- */

.header-statsbar {
    min-height: var(--header-statsbar-h);
    background: var(--color-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-statsbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    min-height: var(--header-statsbar-h);
    padding-block: 0.2rem;
}

.header-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 400;
    white-space: nowrap;
}

.header-stat i {
    color: var(--color-secondary);
    font-size: 0.78rem;
}

.header-stat strong {
    color: var(--color-text-white);
    font-weight: 700;
}

.header-stat-label {
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 575.98px) {
    .header-statsbar-inner {
        gap: 0.65rem;
    }

    .header-stat-label {
        display: none;
    }
}

.header-topbar {
    min-height: var(--header-topbar-h);
    background: var(--color-dark);
}

.header-topbar-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-topbar-h);
    padding-block: 0.4rem;
}

.header-navbar {
    min-height: var(--header-navbar-h);
    background: var(--color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.header-navbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--header-navbar-h);
}

.site-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
    background: var(--color-text-white);
    border-radius: 0.5rem;
    padding: 0.15rem 0.3rem;
}

.site-logo {
    height: 46px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

.site-logo-link--footer .site-logo {
    height: 64px;
    max-width: 200px;
}

.site-logo-link:hover {
    opacity: 0.92;
}

@media (max-width: 991.98px) {
    .site-logo {
        height: 36px;
        max-width: 120px;
    }

    .site-logo-link--footer .site-logo {
        height: 52px;
        max-width: 160px;
    }
}

.header-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-grey-mid);
    color: var(--color-text-white);
    border-radius: 0.4rem;
    width: 2.5rem;
    height: 2.5rem;
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
}

.header-nav .nav-link {
    color: var(--color-text-white);
    font-weight: 400;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
}

.header-nav .nav-link:hover,
.header-nav .nav-link.show {
    color: var(--color-secondary);
}

.header-nav .dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.header-searchbar {
    align-items: stretch;
    flex: 1 1 32rem;
    max-width: 34rem;
    min-width: 0;
    background: var(--color-text-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.header-searchbar-category {
    position: relative;
    flex: 0 0 auto;
    max-width: 11rem;
    display: flex;
    align-items: stretch;
}

.header-searchbar-category .form-select {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-inline-start: 2.3rem;
    padding-inline-end: 1.75rem;
    padding-block: 0.6rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    color: var(--color-text-dark);
    font-size: 0.85rem;
}

.header-searchbar-icon,
.header-searchbar-caret {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-grey);
}

.header-searchbar-icon {
    inset-inline-start: 0.75rem;
}

.header-searchbar-caret {
    inset-inline-end: 0.65rem;
    font-size: 0.75rem;
}

.header-searchbar-divider {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    margin-block: 0.6rem;
    background: var(--color-border);
}

.header-searchbar-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--color-text-dark);
}

.header-searchbar-input:focus {
    box-shadow: none;
    color: var(--color-text-dark);
}

.header-searchbar-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border: 0;
    padding-inline: 1.35rem;
    flex: 0 0 auto;
    font-weight: 700;
    cursor: pointer;
}

.header-searchbar-submit:hover {
    filter: brightness(0.95);
}

.header-searchbar--mobile {
    display: flex;
    /* .header-collapse est en colonne (flex-direction: column) : le `flex: 1 1 32rem`
       hérité de .header-searchbar y dimensionne la HAUTEUR (axe principal), pas la
       largeur, ce qui gonflait démesurément la barre de recherche dans le menu
       burger. On neutralise ce flex-basis et on repasse en dimensionnement explicite. */
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
}

.header-icon-link {
    position: relative;
    color: var(--color-text-white);
    font-size: 1.25rem;
    text-decoration: none;
    padding: 0.25rem;
}

.header-icon-link:hover {
    color: var(--color-secondary);
}

.cart-badge,
.admin-notif-badge {
    position: absolute;
    top: -0.2rem;
    inset-inline-end: -0.45rem;
    min-width: 1.1rem;
    font-size: 0.65rem;
    background: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}

.header-add-btn {
    white-space: nowrap;
}

.header-login {
    color: var(--color-text-white);
    text-decoration: none;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
}

.header-login:hover {
    color: var(--color-secondary);
}

.lang-switcher {
    margin: 0;
}

@media (max-width: 991.98px) {
    .header-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: -1;
    }

    .header-collapse {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--color-primary);
        padding: 1rem;
        display: none;
        flex-direction: column;
        gap: 0.5rem;
        box-shadow: var(--shadow-md);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
    }

    .header-collapse.show {
        display: flex;
    }

    .header-collapse .header-nav,
    .header-collapse .header-actions-mobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .header-collapse .nav-link,
    .header-collapse .header-login {
        color: var(--color-text-white);
        padding: 0.65rem 0.5rem;
    }

    .header-collapse .header-add-btn {
        display: inline-flex;
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Bandeau publications mises en avant
   -------------------------------------------------------------------------- */

.promo-banner {
    background: var(--color-primary);
    border-bottom: 3px solid var(--color-secondary);
}

.promo-banner .carousel,
.promo-banner .carousel-inner,
.promo-banner .carousel-item {
    height: 72px;
}

.promo-banner-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 72px;
    padding: 0 3.25rem 0 1rem;
    color: var(--color-text-white);
    text-decoration: none;
}

.promo-banner-link:hover {
    color: var(--color-secondary);
}

.promo-banner-link img {
    width: 88px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.35rem;
    flex-shrink: 0;
    background: var(--color-dark);
}

.promo-banner-title {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-banner .carousel-control-prev,
.promo-banner .carousel-control-next {
    width: 2.75rem;
    height: 2.75rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 1;
    background: var(--color-dark);
    border-radius: 50%;
}

.promo-banner .carousel-control-prev {
    inset-inline-start: 0.4rem;
}

.promo-banner .carousel-control-next {
    inset-inline-end: 0.4rem;
}

.promo-banner .carousel-control-prev:hover,
.promo-banner .carousel-control-next:hover {
    background: var(--color-secondary);
}

.promo-banner .carousel-control-prev:hover .carousel-control-prev-icon,
.promo-banner .carousel-control-next:hover .carousel-control-next-icon {
    filter: invert(1);
}

@media (max-width: 575.98px) {
    .promo-banner .carousel,
    .promo-banner .carousel-inner,
    .promo-banner .carousel-item,
    .promo-banner-link {
        height: 64px;
    }

    .promo-banner-link {
        padding-inline: 3rem;
        gap: 0.5rem;
    }

    .promo-banner-link img {
        width: 72px;
        height: 48px;
    }

    .promo-banner-title {
        font-size: 0.85rem;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background-color: var(--color-dark);
    background-image: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 70%);
    color: var(--color-text-white);
    padding: 4.5rem 0;
    min-height: 22rem;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 18px,
            rgba(255, 255, 255, 0.035) 18px,
            rgba(255, 255, 255, 0.035) 19px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 28px,
            rgba(255, 255, 255, 0.02) 28px,
            rgba(255, 255, 255, 0.02) 29px
        );
    pointer-events: none;
}

.hero--photo {
    background-image:
        var(--hero-photo),
        linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 70%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero--photo::before {
    display: none;
}

.hero--photo::after {
    opacity: 1;
    background:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color-dark) 45%, transparent) 0%,
            color-mix(in srgb, var(--color-dark) 70%, transparent) 100%
        );
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-inner {
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
}

.hero-title {
    color: var(--color-text-white);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.25;
    margin-bottom: 1.5rem;
    animation: mauri-fade-in-up 0.6s ease both;
}

.hero-title-dot {
    color: var(--color-secondary);
}

.hero-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    animation: mauri-fade-in-up 0.6s ease 0.15s both;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--color-dark) 55%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-text-white);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.hero-badge i {
    color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   Barre de recherche (catalogue)
   -------------------------------------------------------------------------- */

.search-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    background: var(--color-text-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.search-bar .search-submit {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border: 0;
    padding: 0.85rem 1.35rem;
    font-weight: 700;
    flex: 0 0 auto;
    min-width: 9.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
}

.search-bar .search-submit:hover {
    filter: brightness(0.95);
}

.search-bar .form-select,
.search-bar .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.search-category {
    position: relative;
    flex: 0 1 16rem;
    max-width: 16rem;
    min-width: 10rem;
    display: flex;
    align-items: stretch;
}

.search-category .form-select {
    width: 100%;
    padding-inline-start: 2.35rem;
    padding-inline-end: 2rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
    background-color: transparent;
}

.search-category-icon,
.search-category-caret,
.search-query-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-grey);
}

.search-category-icon {
    inset-inline-start: 0.85rem;
}

.search-category-caret {
    inset-inline-end: 0.75rem;
    font-size: 0.8rem;
}

.search-divider {
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    margin-block: 0.65rem;
    background: var(--color-border);
}

.search-query {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.search-query .form-control {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-end: 2.5rem;
}

.search-query-icon {
    inset-inline-end: 1rem;
}

.search-bar .search-price {
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
    min-width: 0;
}

.search-bar .form-control + .form-control,
.search-bar .form-select + .form-control {
    border-inline-start: 1px solid var(--color-border);
}

@media (max-width: 479.98px) {
    .hero {
        min-height: 18rem;
        padding: 2.5rem 0;
    }

    .hero-badge {
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
    }

    .search-bar,
    .search-bar--filters {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .search-bar .search-submit {
        min-width: 0;
        width: 100%;
        border-radius: 0;
    }

    .search-category {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
        border-top: 1px solid var(--color-border);
    }

    .search-divider {
        width: auto;
        height: 1px;
        margin-block: 0;
        margin-inline: 0.85rem;
        flex: 0 0 1px;
        align-self: stretch;
    }

    .search-bar .search-price {
        max-width: none;
        flex: 1 1 auto;
        border-top: 1px solid var(--color-border);
    }

    .search-query .form-control {
        border-top: 1px solid var(--color-border);
    }
}

@media (min-width: 480px) and (max-width: 991.98px) {
    .search-bar--filters {
        flex-wrap: wrap;
        border-radius: var(--radius-md);
    }

    .search-bar--filters .search-query {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   Sections vitrine
   -------------------------------------------------------------------------- */

.section-block {
    padding: 3rem 0;
}

.section-block--light {
    background: var(--color-grey-light);
}

.section-heading {
    text-align: center;
    margin-bottom: 2rem;
}

.section-heading h2 {
    margin-bottom: 0.4rem;
}

.section-heading p {
    color: var(--color-text-grey);
    margin: 0;
}

/* Cartes catégories / produits */
.cat-card,
.listing-card {
    background: var(--color-grey-card);
    border: 0;
    border-radius: var(--radius-md);
    overflow: visible;
    height: 100%;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    --cat-media-h: 160px;
}

.listing-card {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    overflow: visible;
}

.cat-card-media,
.listing-card-media {
    height: var(--cat-media-h);
    background: var(--color-grey-light);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    position: relative;
}

.listing-card-media {
    border-radius: 0;
}

.cat-card-media img,
.listing-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-card-placeholder,
.listing-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-mid);
    font-size: 2.5rem;
    background: var(--color-grey-light);
}

.cat-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--color-text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: -1.5rem auto 0.75rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-md);
    border: 3px solid var(--color-text-white);
}

.cat-card > .cat-badge {
    position: absolute;
    top: var(--cat-media-h);
    inset-inline-end: 1.15rem;
    transform: translateY(-50%);
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.05rem;
    border: 4px solid var(--color-grey-card);
    box-shadow: none;
}

.cat-grid > [class*="col"]:nth-child(6n+1) .cat-badge { background: var(--badge-1); }
.cat-grid > [class*="col"]:nth-child(6n+2) .cat-badge { background: var(--badge-2); }
.cat-grid > [class*="col"]:nth-child(6n+3) .cat-badge { background: var(--badge-3); }
.cat-grid > [class*="col"]:nth-child(6n+4) .cat-badge { background: var(--badge-4); }
.cat-grid > [class*="col"]:nth-child(6n+5) .cat-badge { background: var(--badge-5); }
.cat-grid > [class*="col"]:nth-child(6n+6) .cat-badge { background: var(--badge-6); }

.product-grid > [class*="col"]:nth-child(6n+1) .cat-badge { background: var(--badge-1); }
.product-grid > [class*="col"]:nth-child(6n+2) .cat-badge { background: var(--badge-2); }
.product-grid > [class*="col"]:nth-child(6n+3) .cat-badge { background: var(--badge-3); }
.product-grid > [class*="col"]:nth-child(6n+4) .cat-badge { background: var(--badge-4); }
.product-grid > [class*="col"]:nth-child(6n+5) .cat-badge { background: var(--badge-5); }
.product-grid > [class*="col"]:nth-child(6n+6) .cat-badge { background: var(--badge-6); }

.cat-card-body,
.listing-card-body {
    padding: 1.15rem 1.15rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cat-card-body {
    padding-top: 1.65rem;
}

.listing-card-body {
    text-align: start;
    padding: 1.15rem;
}

.listing-card > .cat-badge + .listing-card-body {
    padding-top: 0;
}

.cat-card-body h3,
.listing-card-body h3 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.cat-card-body p,
.listing-card-body p {
    color: var(--color-text-grey);
    font-size: 0.9rem;
    flex: 1;
}

.listing-price {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0.35rem 0 0.75rem;
}

/* Isole les montants (chiffres + "UM") du réordonnancement bidi en RTL. */
.mru-amount {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}

.listing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.badge-vendu {
    background: var(--color-text-dark);
    color: var(--color-text-white);
}

.badge-archive {
    background: var(--color-grey-card);
    color: var(--color-text-grey);
    border: 1px solid var(--color-border);
}

.cat-card-body .btn-cta,
.listing-card-body .btn-cta {
    width: 100%;
    margin-top: auto;
}

.cat-children {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    text-align: start;
}

/* --------------------------------------------------------------------------
   Grille de catégories (icônes) — accueil
   -------------------------------------------------------------------------- */

.icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    height: 100%;
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem 0.75rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-text-dark);
}

.icon-card:hover {
    color: var(--color-text-dark);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.icon-card-badge {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    color: var(--color-text-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.icon-grid > [class*="col"]:nth-child(8n+1) .icon-card-badge { background: var(--badge-1); }
.icon-grid > [class*="col"]:nth-child(8n+2) .icon-card-badge { background: var(--badge-2); }
.icon-grid > [class*="col"]:nth-child(8n+3) .icon-card-badge { background: var(--badge-3); }
.icon-grid > [class*="col"]:nth-child(8n+4) .icon-card-badge { background: var(--badge-4); }
.icon-grid > [class*="col"]:nth-child(8n+5) .icon-card-badge { background: var(--badge-5); }
.icon-grid > [class*="col"]:nth-child(8n+6) .icon-card-badge { background: var(--badge-6); }
.icon-grid > [class*="col"]:nth-child(8n+7) .icon-card-badge { background: var(--badge-1); }

.icon-card--all {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.icon-card--all .icon-card-badge {
    background: var(--color-secondary) !important;
    color: var(--color-on-secondary);
}

.icon-card--all:hover {
    color: var(--color-text-white);
}

.icon-card-label {
    font-weight: 700;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Annonces vedettes (slider) + favoris sur carte
   -------------------------------------------------------------------------- */

.listing-slider {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 0.35rem 1rem;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
}

.listing-slide {
    flex: 0 0 auto;
    width: 17rem;
    scroll-snap-align: start;
}

.listing-card--v2 .listing-card-media {
    position: relative;
}

.listing-badge-featured {
    position: absolute;
    inset-block-start: 0.65rem;
    inset-inline-end: 0.65rem;
    z-index: 2;
    background: var(--badge-3);
    color: var(--color-text-white);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
}

.listing-favorite {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-start: 0.55rem;
    z-index: 2;
}

.listing-favorite form {
    margin: 0;
}

.listing-favorite .favorite-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    border: 0;
    background: color-mix(in srgb, var(--color-text-white) 90%, transparent);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.listing-favorite .favorite-toggle-btn:hover {
    background: var(--color-text-white);
    color: var(--badge-3);
}

.listing-card-category {
    color: var(--color-text-grey);
    font-size: 0.82rem;
    margin: 0 0 0.15rem;
}

.listing-location {
    color: var(--color-text-grey);
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Bannières de catégories populaires
   -------------------------------------------------------------------------- */

.cat-banner {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 9rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.cat-banner-media {
    flex: 0 0 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    font-size: 2.5rem;
    color: var(--color-text-white);
}

.cat-banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-banner-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.25rem 1.35rem;
    color: var(--color-text-white);
}

.cat-banner-title {
    font-weight: 700;
    font-size: 1.15rem;
}

.cat-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.cat-banner--blue {
    background: linear-gradient(135deg, var(--banner-blue) 0%, var(--banner-blue-dark) 100%);
}

.cat-banner--orange {
    background: linear-gradient(135deg, var(--banner-orange) 0%, var(--banner-orange-dark) 100%);
}

.cat-banner--teal {
    background: linear-gradient(135deg, var(--banner-teal) 0%, var(--banner-teal-dark) 100%);
}

/* --------------------------------------------------------------------------
   Bandeau statistiques
   -------------------------------------------------------------------------- */

.stats-band {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--banner-blue-dark) 100%);
    padding: 2.75rem 0;
}

.stat-item {
    color: var(--color-text-white);
}

.stat-item i {
    font-size: 1.9rem;
    color: var(--color-secondary);
    display: block;
    margin-bottom: 0.6rem;
}

.stat-item p {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Avantages */
.perk {
    text-align: center;
    padding: 1rem;
}

.perk-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.perk h3 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.perk p {
    color: var(--color-text-grey);
    font-size: 0.9rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Bandeau CTA (avant footer)
   -------------------------------------------------------------------------- */

.cta-band {
    background: var(--color-dark);
    padding: 1.75rem 0;
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cta-band-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.cta-band-brand p {
    margin: 0;
    color: var(--color-grey-mid);
    font-size: 0.9rem;
    max-width: 14rem;
}

.cta-band-action {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-band-title {
    margin: 0;
    color: var(--color-text-white);
    font-weight: 700;
    font-size: 1.15rem;
}

@media (max-width: 479.98px) {
    .cta-band-inner,
    .cta-band-brand,
    .cta-band-action {
        flex-direction: column;
        text-align: center;
    }

    .cta-band-brand p {
        max-width: none;
    }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .cta-band-inner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--color-dark);
    color: var(--color-text-white);
    border-top: 5px solid var(--color-secondary);
    padding: 2.5rem 0 1.5rem;
    margin-top: auto;
}

.site-footer a {
    color: var(--color-grey-mid);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-secondary);
}

.footer-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
}

.footer-col:first-child {
    flex: 1 1 16rem;
}

.footer-col:last-child {
    flex: 0 1 14rem;
}

.footer-col p {
    color: var(--color-grey-mid);
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.footer-zone {
    margin-top: 0.75rem !important;
}

.footer-heading {
    color: var(--color-text-white);
    font-size: 1rem;
    margin: 0.35rem 0 0.85rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li + li {
    margin-top: 0.4rem;
}

.footer-copy {
    text-align: center;
    color: var(--color-grey-mid);
    font-size: 0.8rem;
    margin: 2rem 0 0;
}

.footer-grid--v2 {
    flex-wrap: wrap;
}

.footer-grid--v2 .footer-col {
    flex: 1 1 12rem;
}

.footer-grid--v2 .footer-col-brand {
    flex: 1 1 18rem;
}

.footer-store-badges {
    margin-top: 1rem;
}

.footer-store-soon-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.footer-store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Applications mobiles pas encore publiées : boutons visibles mais non cliquables. */
.footer-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 479.98px) {
    .footer-grid {
        flex-direction: column;
        gap: 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

.page-wrap {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
}

.stars {
    color: #f5a623;
    letter-spacing: 0.05em;
}

.negotiate-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.negotiation-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 28rem;
    overflow-y: auto;
    padding: 1rem;
    background: var(--color-grey-light);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.negotiation-bubble {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
}

.negotiation-bubble--admin {
    align-self: flex-start;
}

.negotiation-bubble--user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--color-secondary) 15%, var(--color-text-white));
}

.negotiation-bubble-meta {
    font-size: 0.75rem;
    color: var(--color-text-grey);
    margin-bottom: 0.2rem;
}

.negotiation-bubble-price {
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    margin-top: 0.25rem;
}

.negotiation-price-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.negotiation-price-banner .current-price {
    font-size: 1.5rem;
    font-weight: 700;
}

.catalog-sidebar {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}

.catalog-sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.catalog-sidebar-title i {
    color: var(--color-secondary);
    font-size: 0.95rem;
}

.catalog-sidebar-group {
    margin-bottom: 1.25rem;
}

.catalog-sidebar-group:last-of-type {
    margin-bottom: 0;
}

.catalog-sidebar-group .form-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-grey);
    margin-bottom: 0.5rem;
}

.catalog-sidebar-group .form-select {
    border-color: var(--color-border);
    box-shadow: none;
}

.catalog-sidebar-group .form-select:focus {
    border-color: var(--color-primary);
}

.catalog-sidebar-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--color-grey-light);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-grey);
    text-decoration: none;
}

.catalog-sidebar-reset:hover {
    background: var(--color-border);
    color: var(--color-text-dark);
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.catalog-toolbar-count {
    color: var(--color-text-grey);
    font-size: 0.9rem;
}

.catalog-sort {
    min-width: 12rem;
}

@media (max-width: 991.98px) {
    .catalog-sidebar {
        position: static;
        margin-bottom: 1.5rem;
    }
}

.alerts-wrap {
    padding-top: 1.25rem;
}

.surface-card {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.product-gallery img {
    max-height: 420px;
    object-fit: cover;
    width: 100%;
}

.product-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    margin-top: 0.75rem;
    padding-block: 0.15rem;
    max-width: 100%;
}

.product-thumb {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-grey-light);
}

.product-thumb.active {
    border-color: var(--color-secondary);
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-videos,
.product-media-videos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    max-width: 100%;
}

.product-media-videos {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.product-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 420px;
    background: var(--color-dark);
    border-radius: var(--radius-md);
}

.product-media-form {
    max-width: 100%;
}

.product-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.product-media-item img {
    display: block;
    width: 100%;
    height: 7.5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.product-media-item button,
.product-media-video-item button {
    width: 100%;
    margin-top: 0.35rem;
}

.media-pill {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-white);
    background: color-mix(in srgb, var(--color-primary) 82%, transparent);
}

.media-pill-video {
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
}

.media-pill-photos {
    inset-block-end: 0.5rem;
    inset-inline-end: 0.5rem;
}

.product-placeholder {
    height: 280px;
    background: var(--color-grey-card);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-mid);
    font-size: 3rem;
    overflow: hidden;
}

.product-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attr-table th {
    width: 40%;
    color: var(--color-primary);
}

.pub-cover {
    object-fit: cover;
    height: 100%;
    min-height: 140px;
}

.pagination .page-link {
    color: var(--color-primary);
    border-color: var(--color-border);
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

.badge.text-bg-warning {
    background: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
}

.badge.text-bg-success,
.badge.text-bg-info,
.badge.text-bg-primary {
    background: var(--color-primary) !important;
    color: var(--color-text-white) !important;
}

.badge.text-bg-secondary,
.badge.text-bg-light {
    background: var(--color-grey-card) !important;
    color: var(--color-text-dark) !important;
}

.badge-role-admin {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}

.badge-role-user {
    background: var(--color-grey-mid);
    color: var(--color-text-dark);
}

.badge-role-seller {
    background: var(--color-primary);
    color: var(--color-on-primary, var(--color-text-white));
}

.table {
    --bs-table-bg: var(--color-text-white);
}

/* --------------------------------------------------------------------------
   Admin dashboard
   -------------------------------------------------------------------------- */

.admin-topbar {
    background: var(--color-primary);
}

.admin-topbar .site-logo {
    height: 40px;
    max-width: 140px;
}

.admin-sidebar,
.admin-offcanvas {
    width: 240px;
    min-height: calc(100vh - 56px);
    background: var(--color-dark);
}

.admin-offcanvas {
    min-height: 100vh;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-grey-mid);
    padding: 0.7rem 1.25rem;
    text-decoration: none;
}

.admin-nav-count {
    margin-inline-start: auto;
    background: var(--color-secondary) !important;
    color: var(--color-on-secondary) !important;
    font-size: 0.7rem;
}

.admin-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-grey-light);
}

.admin-nav-link:hover,
.admin-nav-link.active {
    background: color-mix(in srgb, var(--color-secondary) 18%, transparent);
    color: var(--color-text-white);
}

.admin-main {
    min-width: 0;
}

.order-contact-card {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.order-contact-identity {
    flex: 1 1 16rem;
}

.order-contact-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.order-contact-address {
    color: var(--color-text-grey);
}

.order-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    direction: ltr;
}

.order-call-btn i {
    font-size: 1.5rem;
}

.order-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    direction: ltr;
}

.order-phone-link:hover {
    text-decoration: underline;
}

.order-price-changed {
    color: var(--color-text-grey);
    text-decoration: line-through;
    font-size: 0.8rem;
    display: block;
}

.admin-stat {
    background: var(--color-text-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.admin-stat .display-6 {
    color: var(--color-primary);
    font-weight: 700;
}

.gallery-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.admin-image-preview {
    display: block;
    width: auto;
    max-width: 220px;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.category-sort-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-sort-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.category-sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-grey-mid);
    font-size: 1.25rem;
    line-height: 1;
    cursor: grab;
    flex-shrink: 0;
}

.category-sort-handle:hover,
.category-sort-handle:focus-visible {
    color: var(--color-primary);
    background: var(--color-grey-light);
}

.category-sort-handle:active {
    cursor: grabbing;
}

.category-sort-thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-grey-light);
    border: 1px solid var(--color-border);
}

.category-sort-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-sort-info {
    flex: 1 1 10rem;
    min-width: 0;
}

.category-sort-actions {
    flex: 0 1 auto;
}

.category-sort-children {
    padding-inline-start: 1rem;
}

.category-sort-ghost {
    opacity: 0.45;
}

.category-sort-chosen {
    border-color: var(--color-secondary);
}

.category-sort-drag {
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   Mouvement & micro-interactions (boutique)
   -------------------------------------------------------------------------- */

@keyframes mauri-fade-in-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mauri-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mauri-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@keyframes mauri-heartbeat {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.3); }
    55% { transform: scale(0.95); }
}

main {
    animation: mauri-fade-in-up 0.45s ease both;
}

/* Révélation au défilement : IntersectionObserver ajoute .is-visible (static/js/reveal.js).
   Sans JS ou navigateur ancien, le contenu reste visible (voir <noscript>/fallback JS). */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal:nth-child(n+6) { transition-delay: 0.3s; }

.listing-card,
.cat-card,
.surface-card,
.form-panel,
.negotiation-price-banner,
.order-contact-card,
.trust-item,
.perk {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.listing-card:hover,
.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.perk:hover,
.trust-item:hover {
    transform: translateY(-3px);
}

.btn-cta,
.btn-cta-outline,
.btn-ghost,
.btn-danger-outline,
.btn {
    transition: filter 0.15s ease, transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta:active,
.btn-cta-outline:active,
.btn-ghost:active,
.btn-danger-outline:active,
.btn:active {
    transform: scale(0.96);
}

.header-icon-link,
.social-icon-link {
    transition: transform 0.2s ease, color 0.2s ease;
}

.header-icon-link:hover {
    transform: translateY(-2px);
}

/* Badge panier / notifications : petit "pop" quand le compteur change (cart.js/notifications). */
.cart-badge.is-updated {
    animation: mauri-pop 0.4s ease;
}

/* Coeur favori : anime au clic (product_detail.html). */
.favorite-toggle-btn i.bi-heart-fill {
    animation: mauri-heartbeat 0.5s ease;
}

/* Sélecteur de langue — bascule pilule FR/AR, sans JS. */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    padding: 0.2rem;
    gap: 0.15rem;
}

.lang-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-white);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.lang-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lang-toggle-btn.active {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}

.lang-toggle-btn.active:hover {
    background: var(--color-secondary);
}

/* Champs de formulaire avec icône (auth, etc.) — logique RTL via inset-inline. */
.input-icon-group {
    position: relative;
}

.input-icon-group > .form-control {
    padding-inline-start: 2.75rem;
}

.input-icon-group > i {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-grey);
    pointer-events: none;
}

/* Pages d'authentification (connexion / inscription / OTP). */
.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - 14rem);
    padding-block: 2.5rem;
}

.auth-card {
    background: var(--color-text-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    width: 100%;
    max-width: 27rem;
    animation: mauri-fade-in-up 0.5s ease both;
}

.auth-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-secondary) 25%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-inline: auto;
    margin-bottom: 1rem;
}

.auth-card .page-title {
    text-align: center;
    margin-bottom: 0.35rem;
}

.auth-card .muted {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Boutons avec spinner de chargement (static/js/forms.js). */
.btn-loading {
    pointer-events: none;
    opacity: 0.85;
}

.btn-loading .spinner-border {
    width: 0.9rem;
    height: 0.9rem;
    border-width: 0.15em;
}

/* Messages flash avec icône + légère entrée. */
.alert {
    animation: mauri-fade-in-up 0.35s ease both;
}

/* États vides — icône + texte, plus accueillant qu'une simple ligne grise. */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-grey);
    animation: mauri-fade-in 0.4s ease both;
}

.empty-state i {
    display: block;
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
    color: var(--color-grey-mid);
}

.empty-state p {
    margin-bottom: 1rem;
}

/* Champ mot de passe avec bouton "afficher" (static/js/password-toggle.js). */
.password-toggle-btn {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--color-text-grey);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: var(--color-primary);
}

.has-password-toggle .form-control {
    padding-inline-end: 2.75rem;
}

/* --------------------------------------------------------------------------
   Bouton flottant "Ajouter une annonce" — visible sur toutes les pages,
   suit le scroll. `inset-inline-end` (plutôt que `right`) place le bouton à
   droite en LTR et bascule automatiquement à gauche en RTL (arabe), sans
   règle [dir="rtl"] séparée à maintenir.
   -------------------------------------------------------------------------- */

.fab-add-listing {
    position: fixed;
    bottom: 25px;
    inset-inline-end: 25px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0.9rem 1.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.fab-add-listing i {
    font-size: 1.05rem;
}

.fab-add-listing:hover,
.fab-add-listing:focus {
    color: var(--color-on-secondary);
    filter: brightness(0.96);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 3px 8px rgba(0, 0, 0, 0.16);
}

.fab-add-listing:active {
    transform: scale(0.96);
}

/* Mobile : bouton compact (icône seule) pour ne pas gêner la lecture du contenu. */
@media (max-width: 575.98px) {
    .fab-add-listing {
        bottom: 16px;
        inset-inline-end: 16px;
        padding: 0.8rem;
        border-radius: 50%;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.14);
    }

    .fab-add-listing span {
        display: none;
    }

    .fab-add-listing i {
        font-size: 1.2rem;
    }
}

/* Le bouton flottant partage le coin bas de `#toastContainer` (Bootstrap) :
   on relève les toasts au-dessus pour éviter tout chevauchement visuel. */
#toastContainer {
    margin-bottom: 4.5rem;
}

/* --------------------------------------------------------------------------
   Onglet flottant "Boîte à idées" — bord opposé au FAB "Ajouter une annonce"
   (inset-inline-start : gauche en LTR, droite en RTL) pour ne rien recouvrir.
   -------------------------------------------------------------------------- */

.feedback-fab {
    position: fixed;
    top: 60%;
    inset-inline-start: 0;
    transform: translateY(-50%);
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-primary);
    color: var(--color-text-white);
    border: 0;
    border-start-end-radius: var(--radius-pill);
    border-end-end-radius: var(--radius-pill);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    padding: 0.65rem 1rem 0.65rem 0.85rem;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, filter 0.15s ease, padding-inline-start 0.15s ease;
}

.feedback-fab i {
    font-size: 1.05rem;
}

.feedback-fab:hover,
.feedback-fab:focus {
    color: var(--color-text-white);
    filter: brightness(1.15);
    padding-inline-start: 1.1rem;
}

@media (max-width: 575.98px) {
    .feedback-fab span {
        display: none;
    }

    .feedback-fab {
        padding: 0.7rem;
        border-start-end-radius: 50%;
        border-end-end-radius: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}