/* ============================================================
   TOUTA100F — Feuille de style premium
   Police : pile système raffinée (aucune dépendance réseau)
   ============================================================ */

:root {
    /* Couleurs issues du logo « TOUT À 1000F » */
    --primary-color: #FD8406;   /* Orange (anneau + « 1000F ») */
    --primary-dark:  #d96f00;   /* Orange foncé (survol) */
    --primary-light: #fff3e6;   /* Orange très clair (fonds) */
    --secondary-color: #1A1A1A; /* Noir du badge */
    --secondary-light: #2c2c2c;
    --accent-color: #d32f2f;    /* Rouge réservé aux alertes */

    --bg-color: #f6f7f9;
    --surface: #ffffff;
    --text-main: #1d2129;
    --text-muted: #6b7280;
    --border: rgba(16, 24, 40, 0.07);

    /* Rayons */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --card-radius: 18px;

    /* Ombres douces en couches */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 4px 8px -4px rgba(16, 24, 40, .06);
    --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18), 0 8px 16px -8px rgba(16, 24, 40, .08);
    --shadow-primary: 0 8px 22px -6px rgba(253, 132, 6, .45);
}

/* ---------- Base & typographie ---------- */
body {
    background-color: var(--bg-color);
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-main);
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 80px;
}
html { scroll-behavior: smooth; }

h1, h2, h3, h4, h5, h6, .fw-bold, .fw-bolder { letter-spacing: -0.022em; }
.display-5, .display-6 { letter-spacing: -0.03em; }
.text-muted { color: var(--text-muted) !important; }

::selection { background: rgba(253, 132, 6, 0.22); }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8ccd2; border-radius: 10px; border: 3px solid var(--bg-color); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

/* Anneaux de focus accessibles */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible {
    outline: 3px solid rgba(253, 132, 6, 0.40);
    outline-offset: 2px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(253, 132, 6, 0.15);
}

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--border);
}

/* ---------- Boutons ---------- */
.btn {
    border-radius: 50rem;
    padding: 0.55rem 1.45rem;
    font-weight: 600;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s, background .25s, filter .25s;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    box-shadow: var(--shadow-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -6px rgba(253, 132, 6, .55);
    filter: brightness(1.04);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--primary-dark); border-color: var(--primary-color); }
.btn-outline-primary:hover { background: var(--primary-color); border-color: var(--primary-color); }
.btn-dark { background: var(--secondary-color); border-color: var(--secondary-color); }
.btn-dark:hover { background: #000; border-color: #000; transform: translateY(-2px); }
.btn-warning { background: linear-gradient(135deg, #ffb648, var(--primary-color)); border: none; color: #1a1a1a; }

/* ---------- Cartes ---------- */
.card {
    border-radius: var(--card-radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    transition: box-shadow .3s ease, transform .3s ease;
}
.rounded-4 { border-radius: var(--radius-lg) !important; }

/* ---------- Cartes d'annonces ---------- */
.ad-card {
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
}
.ad-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg) !important;
}
.ad-image-container {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eef1f4;
    overflow: hidden;
}
.ad-image-container::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0) 45%);
    opacity: 0;
    transition: opacity .35s ease;
}
.ad-card:hover .ad-image-container::after { opacity: 1; }
.ad-image-container img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ad-card:hover .ad-image-container img { transform: scale(1.06); }

/* Indicateur « plusieurs photos » — pilule en bas à droite de l'image */
.ad-multi-badge {
    position: absolute;
    bottom: 10px; right: 10px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0, 0, 0, .60);
    color: #fff;
    font-size: .72rem; font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 30px;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.ad-price-badge {
    position: absolute;
    top: 12px; right: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 30px;
    box-shadow: 0 6px 14px rgba(253, 132, 6, .40);
    letter-spacing: .3px;
    z-index: 3;
    font-size: .9rem;
}

/* Onglets connexion */
.nav-pills .nav-link.active {
    background-color: #fff !important;
    color: var(--primary-dark) !important;
    box-shadow: var(--shadow-sm);
}

/* ---------- Menu mobile ---------- */
.mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -4px 20px rgba(16, 24, 40, .06);
}

/* ---------- Footer premium (sombre) ---------- */
.site-footer {
    background: var(--secondary-color);
    color: #b9c0c9;
    border-top: 3px solid var(--primary-color);
}
.site-footer h5, .site-footer h6 { color: #fff; }
.site-footer a { color: #b9c0c9; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--primary-color); }
.site-footer .btn-light { background: rgba(255, 255, 255, .08); border: none; color: #fff; }
.site-footer .btn-light:hover { background: var(--primary-color); color: #fff; }
.site-footer hr { border-color: rgba(255, 255, 255, .12); }

/* ---------- Skeletons (chargement) ---------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e7ebef;
}
.skeleton::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-card { border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.skel-img { aspect-ratio: 4 / 3; }
.skel-line { height: 12px; border-radius: 7px; margin: 10px 14px; }

/* ---------- Toasts ---------- */
.toast-stack {
    position: fixed;
    top: 84px; right: 18px;
    z-index: 1090;
    display: flex; flex-direction: column; gap: 12px;
    max-width: 360px;
    pointer-events: none;
}
.toast-premium {
    pointer-events: auto;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 12px;
    border-left: 4px solid var(--primary-color);
    transform: translateX(130%);
    opacity: 0;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s;
    font-size: .92rem;
}
.toast-premium.show { transform: none; opacity: 1; }
.toast-premium.success { border-left-color: #16a34a; }
.toast-premium.danger { border-left-color: #dc2626; }
.toast-premium .ti { font-size: 1.1rem; }

/* ---------- Animations d'entrée ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .5s cubic-bezier(.2, .8, .2, 1) both; }

/* États vides */
.empty-state { color: var(--text-muted); }
.empty-state i { color: #cdd3da; }

/* ---------- Galerie / Lightbox (fiche annonce) ---------- */
.ad-gallery-main img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ad-gallery-main:hover img { transform: scale(1.03); }
.ad-thumb { transition: outline .15s ease, transform .15s ease; }
.ad-thumb.active { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.ad-thumb:hover { transform: translateY(-2px); }

.lightbox {
    position: fixed; inset: 0;
    background: rgba(10, 12, 16, .95);
    z-index: 1100;
    display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; animation: fadeUp .25s ease both; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.lb-close, .lb-prev, .lb-next {
    position: absolute;
    background: rgba(255, 255, 255, .10);
    color: #fff; border: none; cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
    display: flex; align-items: center; justify-content: center;
}
.lb-close { top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; font-size: 1.4rem; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--primary-color); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
.lb-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(255, 255, 255, .14); padding: 6px 16px; border-radius: 30px; font-size: .88rem; }

/* Emplacements photo verrouillés (wizard publication) : débloqués dans l'ordre de remplissage */
.photo-slot-locked {
    opacity: .45;
    pointer-events: none;
}

/* Carrousel accueil : hauteur +10% (cropper 1200×440) */
#homeCarousel .carousel-item img {
    aspect-ratio: 1200 / 440;
    object-fit: cover;
}

/* Bannière pages intérieures : hauteur +10% (cropper 1200×198) */
.banner-img-interior {
    aspect-ratio: 1200 / 198;
    object-fit: cover;
}

/* Pub inter-annonce : hauteur +10% (annonceur 900×374, bannière locale 728×154) */
.inter-ad-sponsored-img {
    aspect-ratio: 900 / 374;
    object-fit: cover;
}
.inter-ad-local-img {
    aspect-ratio: 728 / 154;
    object-fit: cover;
}

/* Hero slider (carrousel) d'une annonce multi-images */
.ad-hero-carousel .carousel-control-prev, .ad-hero-carousel .carousel-control-next { width: 11%; opacity: 0; transition: opacity .2s ease; }
.ad-hero-carousel:hover .carousel-control-prev, .ad-hero-carousel:hover .carousel-control-next { opacity: 1; }
.ad-hero-carousel .carousel-control-prev-icon, .ad-hero-carousel .carousel-control-next-icon { background-color: rgba(0, 0, 0, .5); border-radius: 50%; padding: 16px; background-size: 42%; }
.ad-hero-carousel .carousel-indicators { margin-bottom: .6rem; }
.ad-hero-carousel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.ad-hero-carousel .carousel-item { transition: transform .5s ease-in-out; }

/* Pastille « prix fixe » */
.price-pill { display: inline-block; background: var(--primary-light); color: var(--primary-dark); font-weight: 700; font-size: .75rem; padding: 4px 12px; border-radius: 30px; letter-spacing: .02em; }

/* ============================================================
   MODE SOMBRE  (active via <html data-bs-theme="dark">)
   ============================================================ */
[data-bs-theme="dark"] {
    --bg-color: #121316;
    --surface: #1c1e22;
    --text-main: #e8eaed;
    --text-muted: #9aa1a9;
    --border: rgba(255, 255, 255, 0.09);
    --primary-light: #2a2118;
    color-scheme: dark;
}
[data-bs-theme="dark"] body { background-color: var(--bg-color); color: var(--text-main); }
[data-bs-theme="dark"] .navbar { background: rgba(24, 26, 30, 0.82) !important; border-bottom-color: var(--border); }
[data-bs-theme="dark"] .navbar.navbar-scrolled { background: rgba(24, 26, 30, 0.95) !important; }
[data-bs-theme="dark"] .navbar-light .navbar-brand,
[data-bs-theme="dark"] .navbar .nav-link { color: var(--text-main); }
[data-bs-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .ad-image-container,
[data-bs-theme="dark"] .skeleton { background: #2a2d33; }
[data-bs-theme="dark"] .skel-card { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .text-dark { color: var(--text-main) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; color: var(--text-main); }
[data-bs-theme="dark"] .bg-light { background-color: #24262b !important; color: var(--text-main); }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top { border-color: var(--border) !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #24262b; border-color: var(--border); color: var(--text-main); }
[data-bs-theme="dark"] .form-control::placeholder { color: #6b7280; }
[data-bs-theme="dark"] .input-group-text { background-color: #24262b; border-color: var(--border); color: var(--text-muted); }
[data-bs-theme="dark"] .mobile-bottom-nav { background: rgba(24, 26, 30, 0.92) !important; }
[data-bs-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--text-main); }
[data-bs-theme="dark"] .dropdown-item:hover { background: #2a2d33; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; color: var(--text-main); }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table > thead { --bs-table-bg: #24262b; color: var(--text-main); }
[data-bs-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .toast-premium { background: #0f1012; }
/* Le footer reste volontairement sombre (déjà on-brand) */

/* Annonces mises en avant (boost « featured ») */
.ad-featured {
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 12px 28px -8px rgba(253, 132, 6, 0.45) !important;
}
.featured-badge {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff; font-weight: 700; font-size: .72rem;
    padding: 4px 11px; border-radius: 30px;
    box-shadow: 0 4px 10px rgba(253, 132, 6, .4);
    letter-spacing: .3px;
}
.featured-badge i { margin-right: 4px; }

/* Extrait de description sur les cartes (limité à 2 lignes en grille, 3 en liste) */
.card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.ad-list .card-excerpt { -webkit-line-clamp: 3; line-clamp: 3; }

/* Annonces « À la une » (boost premium spotlight, prioritaire sur featured) */
.ad-spotlight {
    border: 2px solid #6f42c1 !important;
    box-shadow: 0 14px 32px -8px rgba(111, 66, 193, 0.55) !important;
}
.spotlight-badge {
    background: linear-gradient(135deg, #7d3cff, #b14bff) !important;
    box-shadow: 0 4px 12px rgba(125, 60, 255, .5) !important;
    animation: spotlight-pulse 2s ease-in-out infinite;
}
@keyframes spotlight-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(125, 60, 255, .5); }
    50% { box-shadow: 0 4px 18px rgba(125, 60, 255, .85); }
}

/* Vue liste du catalogue (switch grille/liste) */
.ad-list { flex-direction: row; align-items: stretch; }
.ad-list .ad-list-img { width: 160px; min-width: 160px; aspect-ratio: 1; }
.ad-list .card-body { padding-top: .9rem; padding-bottom: .9rem; }
@media (max-width: 575.98px) {
    .ad-list .ad-list-img { width: 110px; min-width: 110px; }
    .ad-list .card-title { font-size: 1rem; }
}

/* Splash de lancement PWA */
.pwa-splash {
    position: fixed; inset: 0; z-index: 2000;
    background: var(--secondary-color);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .5s ease;
}
.pwa-splash img { max-width: 74%; max-height: 60%; object-fit: contain; border-radius: 16px; }
.pwa-splash .splash-name { color: #fff; font-weight: 800; letter-spacing: -.02em; margin-top: 16px; font-size: 1.5rem; }
.pwa-splash .splash-spinner { margin-top: 24px; width: 30px; height: 30px; border: 3px solid rgba(255, 255, 255, .22); border-top-color: var(--primary-color); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pwa-splash.hide { opacity: 0; pointer-events: none; }
.splash-done .pwa-splash { display: none !important; }

/* Bouton bascule de thème */
.theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
.theme-toggle:hover { color: var(--primary-color); border-color: var(--primary-color); }

@media (prefers-reduced-motion: reduce) {
    *, *::after, *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}