/* --- Vendors via @import (simple & rapide) --- */
/* NB: ça reste plusieurs requêtes réseau, mais 1 seul <link> dans le HTML. */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* --- Ton CSS personnalisé (extrait de <style> …) --- */
:root{
  --primary-color:#FF6B6B;
  --secondary-color:#4ECDC4;
  --accent-color:#FFE66D;
  --dark-color:#292F36;
  --light-color:#F7FFF7;
}
body{font-family:'Poppins',sans-serif;background:#f8f9fa;color:var(--dark-color)}
.navbar{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.navbar-brand{font-weight:700;color:var(--primary-color)!important}
.page-hero{background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));color:#fff;border-radius:0 0 20px 20px;padding:28px 0;margin-bottom:18px}
.card-soft{background:#fff;border:0;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.form-control:focus,.form-select:focus{border-color:var(--secondary-color);box-shadow:0 0 0 .2rem rgba(78,205,196,.25)}
.btn-primary{background:var(--primary-color);border-color:var(--primary-color)}
.btn-primary:hover{background:#ff5252;border-color:#ff5252}
.tag{font-size:.75rem;padding:.25rem .55rem;border-radius:999px;background:#f1f3f5;font-weight:600}
.helper{font-size:.85rem;color:#6c757d}


/* ===========================
   MES ANNONCES — cartes & UI
   =========================== */

/* Badge "Brouillon" / accent */
.badge-accent{
  background: var(--accent-color);
  color:#333;
  font-weight:700;
  border:1px solid rgba(0,0,0,.08);
}

/* Carte annonce */
.ad-card{
  background:#fff;
  border:none;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ad-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

/* Image */
.ad-image{
  width:100%;
  height:200px;           /* rapport visuel homogène */
  object-fit:cover;
  display:block;
}

/* Titre / prix / localisation */
.ad-title{font-weight:600;color:var(--dark-color)}
.ad-price{font-weight:700;color:var(--primary-color);font-size:1.1rem}
.ad-location{color:#6c757d}

/* Badges flottants sur l’image */
.ad-badge{
  position:absolute;
  top:10px;left:10px;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.75rem;
}

/* Boutons compacts dans la carte */
.ad-actions .btn{padding:.3rem .55rem}

/* Pagination aux couleurs du thème */
.pagination .page-link{color:var(--dark-color)}
.pagination .page-link:hover{
  color:#fff;
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}
.pagination .page-item.active .page-link{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}
.pagination .page-item.disabled .page-link{color:#adb5bd}

/* Petite cohérence visuelle pour les boutons clairs */
.btn-light:hover{background:#f1f3f5;border-color:#e9ecef}

/* ===========================
   DASHBOARD — KPI & variantes
   =========================== */

/* KPI cards */
.kpi{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.1rem; border-radius:16px;
  background:#fff; border:1px dashed rgba(0,0,0,.08);
}
.kpi .icon{
  width:42px; height:42px; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:12px; background:var(--light-color);
  color:var(--primary-color);
}
.kpi .value{ font-size:1.3rem; font-weight:800 }

/* Dashboard : image de carte plus compacte
   Choisis UNE des 2 options ci-dessous */

/* Option A (recommandée) : ajouter une classe utilitaire sur l’img */
.ad-image--sm{ height:180px !important; }

/* Option B (alternative) : si tu mets class="dashboard" sur <body> */
/* body.dashboard .ad-image{ height:180px; } */

/* ===========================
   ADMIN — Forfaits
   =========================== */

/* Table lisible et alignée */
.table th,
.table td{
  vertical-align: middle;
}

/* Case à cocher "Meilleur forfait" aux couleurs du thème */
.form-check-input:checked{
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Pagination (utilise les règles globales déjà posées) */
/* rien à ajouter si tu as déjà le bloc .pagination du global */


/* ===========================
   Flash messages (optionnel)
   =========================== */
.flash-stack { max-width: 1080px; margin: 1rem auto; }
.flash-stack .alert { margin-bottom: .5rem; }


/* ===========================
   EDIT ANNONCE — styles
   =========================== */

/* Vignettes des photos existantes */
.thumb{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:10px;
}

/* Liste d’autocomplete (pays / ville) */
.autocomplete-list{
  position:absolute;
  z-index:1056;
  max-height:220px;
  overflow:auto;
  width:100%;
}

/* ===========================
   DELETE ANNONCE — styles
   =========================== */

/* Vignette rectangulaire pour l’aperçu */
.thumb--rect{
  width:140px;
  height:100px;
  object-fit:cover;
  border-radius:10px;
}


/* ===========================
   AUTH / LOGIN
   =========================== */

/* Carte du formulaire d'auth */
.auth-card{
  background:#fff;
  border:0;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* Liens d’accent (Créer un compte / MDP oublié) */
.link-accent{
  color:var(--primary-color);
  text-decoration:none;
}
.link-accent:hover{
  color:#ff5252;                 /* même hover que .btn-primary */
  text-decoration:underline;
}

/* Case “se souvenir de moi” aux couleurs du thème (si pas déjà défini) */
.form-check-input:checked{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}

/* Petit confort pour l’input group des champs */
.input-group-text.bg-white{
  background:#fff !important;
}


/* ===========================
   INSCRIPTION — compléments
   =========================== */

/* Liste d’avantages à puces (icônes alignées) */
.feature-list{ list-style:none; padding:0; margin:0 0 1rem 0; }
.feature-list li{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.5rem;
}

/* Encadré "Bonus de bienvenue" */
.bonus-box{
  background:#f8fafc;                  /* plus doux que .bg-light */
  border:1px dashed rgba(0,0,0,.08);
  border-radius:16px;
  padding:1rem;
}

/* Illustration latérale (optionnel : ombre douce) */
.auth-illustration{
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* Alerte dans cartes d’auth : éviter trop d’écart sous le titre */
.auth-card .alert{ margin-top:.25rem; }



/* ===========================
   HOME / INDEX
   =========================== */

/* HERO */
.hero-section{
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color:#fff;
  padding:56px 0;
}
.hero-title{ font-weight:800; line-height:1.1; }
.hero-subtitle{ opacity:.95; }
.hero-section .btn-outline-light{
  color:#fff; border-color:rgba(255,255,255,.85);
}
.hero-section .btn-outline-light:hover{
  background:#fff; color:var(--primary-color);
}

/* Titres de sections */
.section-title{ font-weight:800; margin-bottom:1rem; }

/* Cartes Catégories */
.category-card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:1rem; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.category-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.10); }
.category-icon{
  width:56px; height:56px; margin:0 auto .5rem;
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--light-color); color:var(--primary-color); font-size:1.25rem;
}

/* Blocs "Comment ça marche" */
.feature-box{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:1.25rem; text-align:center; height:100%;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.feature-icon{
  width:64px; height:64px; margin:0 auto .5rem;
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--light-color); color:var(--primary-color); font-size:1.4rem;
}

/* Section CTA (remplace le style inline) */
.cta-gradient{ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color:#fff; }

/* Back-to-top */
.back-to-top{
  position:fixed; right:16px; bottom:16px; z-index:1055;
  width:42px; height:42px; border-radius:999px;
  background:#fff; color:var(--primary-color);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .2s ease;
}
.back-to-top.active{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--primary-color); color:#fff; }

/* Harmonisation du thème pour .btn-outline-primary */
.btn-outline-primary{ color:var(--primary-color); border-color:var(--primary-color); }
.btn-outline-primary:hover{ background:var(--primary-color); border-color:var(--primary-color); color:#fff; }


/* ===========================
   CATEGORIES — compléments
   =========================== */

/* Compteur sous le titre */
.category-count{
  font-size:.875rem;
  color:#6c757d;
}

/* Liste des sous-catégories */
.subcategory-list{
  list-style:none;
  padding-left:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;   /* 1 colonne sur mobile */
  gap:.25rem .75rem;
}
@media (min-width: 992px){
  .subcategory-list{ grid-template-columns:repeat(2,1fr); } /* 2 colonnes sur lg+ */
}
.subcategory-list li a{
  color:var(--dark-color);
  text-decoration:none;
}
.subcategory-list li a:hover{
  color:var(--primary-color);
  text-decoration:underline;
}

/* Micro-anim sur l’icône de catégorie (complète le JS ou le remplace) */
.category-icon{ transition: transform .18s ease; }
.category-card:hover .category-icon{ transform:scale(1.08); }

/* Sidebar cartes */
.card.shadow-sm .card-header{
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Form radio/checkbox aux couleurs du thème (si pas déjà global) */
.form-check-input:checked{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}


/* ===========================
   LISTE ANNONCES — filtres & UI
   =========================== */

/* Carte filtres (sidebar) */
.filters-card{
  border:0;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.filters-card .card-header{
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-weight:700;
}

/* Inputs dans les filtres */
.filters-card .form-label{ font-weight:600; }
.input-group-text.bg-white{ background:#fff !important; } /* cohérence input-group */

/* Checkbox / radio aux couleurs du thème (si pas déjà posé) */
.form-check-input:checked{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}

/* Barre résultats (optionnel) */
.results-bar .badge{ vertical-align:middle; }

/* Harmonisation de la pagination (si bloc global absent ici, sinon inutile)
.pagination .page-link{ color:var(--dark-color); }
.pagination .page-link:hover{
  color:#fff; background-color:var(--primary-color); border-color:var(--primary-color);
}
.pagination .page-item.active .page-link{
  background-color:var(--primary-color); border-color:var(--primary-color);
}
.pagination .page-item.disabled .page-link{ color:#adb5bd; } */



/* ===========================
   ANNONCE — page détail
   =========================== */

/* Carrousel d'images */
.ad-carousel .carousel-item img{
  object-fit: cover;
  width: 100%;
  height: 480px;
}
@media (max-width: 768px){
  .ad-carousel .carousel-item img{ height: 260px; }
}

/* Prix + méta */
.price{ font-size:1.6rem; font-weight:800; color:var(--primary-color); }
.meta small{ color:#6c757d; }

/* Bouton WhatsApp */
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1ebe57; color:#fff; }

/* Bloc anti-arnaque */
.anti-scam{
  border-left:5px solid #ffc107;
  background:#fff8e1;
  border-radius:14px;
}

/* Utilitaires */
.text-preline{ white-space: pre-line; }
.no-underline, .no-underline a{ text-decoration:none; color:inherit; }
.no-underline a:hover{ text-decoration:underline; }
.container-1180{ max-width:1180px; }


/* ===========================
   ABONNEMENT — plans & statuts
   =========================== */

/* Conteneur large spécifique */
.container-1100{ max-width:1100px; }

/* KPI (réutilisé du dashboard) */
.kpi{
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.1rem; border-radius:16px;
  background:#fff; border:1px dashed rgba(0,0,0,.08);
}
.kpi .icon{
  width:42px; height:42px; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:12px; background:var(--light-color);
  color:var(--primary-color);
}

/* Carte de plan */
.plan{
  transition:transform .18s ease, box-shadow .18s ease;
}
.plan:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
.plan .price{
  font-size:1.4rem; font-weight:800; line-height:1;
  color:var(--primary-color);
}
/* Texte de description du plan */
.plan-desc{ color:#6c757d; font-size:.95rem; }
.plan p:last-child{ margin-bottom:0; } /* au cas où la description contient des <p> */

/* Badges */
.badge-accent{ background:var(--accent-color); color:#333; font-weight:700; border-radius:999px; }


/* =========================
   Footer en thème noir
   ========================= */
footer,
.site-footer {
  background: #000 !important;
  color: #fff !important;
}

/* Liens en blanc */
footer a,
.site-footer a {
  color: #fff !important;
  text-decoration: none;
}
footer a:hover,
.site-footer a:hover,
footer a:focus,
.site-footer a:focus {
  color: #fff !important;
  text-decoration: underline;
  opacity: .85;
}

/* Désactiver les gris Bootstrap à l'intérieur du footer */
footer .text-muted,
.site-footer .text-muted {
  color: rgba(255, 255, 255, .75) !important;
}

/* Icônes (Font Awesome) héritent du blanc */
footer i,
.site-footer i {
  color: inherit;
}

/* Bordures/HR douces en mode sombre */
footer .border-top,
.site-footer .border-top {
  border-top-color: rgba(255, 255, 255, .15) !important;
}
footer hr,
.site-footer hr {
  border-color: rgba(255, 255, 255, .15);
}

/* (Optionnel) Champs du footer (newsletter, recherche, etc.) */
footer .form-control,
.site-footer .form-control {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}
footer .form-control::placeholder,
.site-footer .form-control::placeholder {
  color: rgba(255, 255, 255, .6);
}
footer .btn-outline-light,
.site-footer .btn-outline-light {
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
footer .btn-outline-light:hover,
.site-footer .btn-outline-light:hover {
  background: #fff;
  color: #000;
}

/* (Optionnel) Petites étiquettes/tags dans le footer */
footer .badge,
.site-footer .badge {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
