/* ==========================================================
   KRILIH.MA
   css/theme.css
   VERSION V7
   WINDOWS 10 / KRILIH
   ==========================================================

   RÔLE
   ----------------------------------------------------------
   Appliquer l'identité visuelle globale KRILIH aux éléments
   communs et aux composants déjà présents dans le projet.

   IMPORTANT
   ----------------------------------------------------------
   Ce fichier ne remplace pas les CSS spécifiques aux pages.
   Il sert de couche globale cohérente.
   ========================================================== */


/* ==========================================================
   01 — BODY
   ========================================================== */

html {

    background:
        var(--bg);
}


body {

    background:
        var(--bg);

    color:
        var(--text);
}


/* ==========================================================
   02 — BUTTONS
   ========================================================== */

.btn-primary,
.btn-publier,
.btn-cta,
.btn-accent,
button[type="submit"],
input[type="submit"] {

    background:
        var(--accent) !important;

    color:
        #ffffff !important;

    border:
        1px solid var(--accent) !important;

    box-shadow:
        none !important;
}


.btn-primary:hover,
.btn-publier:hover,
.btn-cta:hover,
.btn-accent:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {

    background:
        var(--accent-hover) !important;

    color:
        #ffffff !important;

    border-color:
        var(--accent-hover) !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


/* ==========================================================
   03 — SECONDARY
   ========================================================== */

.btn-secondary {

    background:
        var(--primary) !important;

    color:
        #ffffff !important;

    border:
        1px solid var(--primary) !important;
}


.btn-secondary:hover {

    background:
        var(--primary-hover) !important;

    border-color:
        var(--primary-hover) !important;

    transform:
        none !important;
}


/* ==========================================================
   04 — OUTLINE
   ========================================================== */

.btn-outline {

    background:
        #ffffff !important;

    color:
        var(--primary) !important;

    border:
        1px solid var(--border-dark) !important;
}


.btn-outline:hover {

    background:
        var(--green-soft) !important;

    color:
        var(--primary) !important;

    border-color:
        var(--primary) !important;

    transform:
        none !important;
}


/* ==========================================================
   05 — LIGHT
   ========================================================== */

.btn-light {

    background:
        #ffffff !important;

    color:
        var(--text) !important;

    border:
        1px solid var(--border) !important;
}


.btn-light:hover {

    background:
        #f3f3f3 !important;

    border-color:
        var(--border-dark) !important;

    transform:
        none !important;
}


/* ==========================================================
   06 — INPUTS
   ========================================================== */

input,
textarea,
select {

    background:
        #ffffff !important;

    color:
        var(--text) !important;

    border-color:
        var(--border) !important;
}


input:hover,
textarea:hover,
select:hover {

    border-color:
        var(--border-dark) !important;
}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--primary) !important;

    box-shadow:
        0 0 0 2px var(--focus-ring) !important;
}


/* ==========================================================
   07 — GENERIC CARDS
   ========================================================== */

.card {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;

    box-shadow:
        var(--shadow-xs) !important;

    border-radius:
        var(--radius-lg) !important;
}


.card:hover {

    border-color:
        var(--border-dark) !important;

    box-shadow:
        var(--shadow-sm) !important;

    transform:
        none !important;
}


/* ==========================================================
   08 — COMMON WHITE SECTIONS
   ========================================================== */

.section,
.section-header,
.section-heading,
.form-section,
.details-section,
.admin-section,
.feature-card,
.trust-card,
.why-card,
.step-card,
.testimonial-card,
.contact-card,
.profil-menu-card,
.profil-stat-card,
.stat-card,
.checkbox-card {

    background:
        #ffffff;

    border:
        1px solid var(--border);
}


/* ==========================================================
   09 — ANNOUNCE CARDS
   ========================================================== */

.annonce-card,
.mini-annonce,
.annonce-item,
.listing-card,
.product-card,
.featured-card {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        4px !important;

    box-shadow:
        var(--shadow-xs) !important;

    transition:
        border-color .12s ease,
        box-shadow .12s ease !important;
}


.annonce-card:hover,
.mini-annonce:hover,
.annonce-item:hover,
.listing-card:hover,
.product-card:hover,
.featured-card:hover {

    transform:
        none !important;

    border-color:
        var(--primary) !important;

    box-shadow:
        var(--shadow-sm) !important;
}


/* ==========================================================
   10 — ANNOUNCE TITLES
   ========================================================== */

.annonce-card h3,
.annonce-card h4,
.mini-annonce h4,
.listing-card h3,
.product-card h3,
.featured-card h3 {

    color:
        var(--text) !important;
}


.annonce-card h3 a,
.annonce-card h4 a,
.listing-card h3 a,
.product-card h3 a,
.featured-card h3 a {

    color:
        var(--text) !important;
}


.annonce-card h3 a:hover,
.annonce-card h4 a:hover,
.listing-card h3 a:hover,
.product-card h3 a:hover,
.featured-card h3 a:hover {

    color:
        var(--primary) !important;
}


/* ==========================================================
   11 — PRICES
   ========================================================== */

.annonce-card strong,
.annonce-card .price,
.mini-annonce b,
.listing-card .price,
.product-card .price,
.featured-card .price,
.price,
.annonce-price {

    color:
        var(--accent-hover) !important;

    font-weight:
        700;
}


/* ==========================================================
   12 — LOCATION
   ========================================================== */

.annonce-location {

    color:
        var(--text-muted) !important;
}


.annonce-location i {

    color:
        var(--primary) !important;
}


/* ==========================================================
   13 — DETAILS BUTTON
   ========================================================== */

.annonce-card .btn-details,
.listing-card .btn-details,
.product-card .btn-details {

    background:
        var(--primary) !important;

    color:
        #ffffff !important;

    border:
        1px solid var(--primary) !important;
}


.annonce-card .btn-details:hover,
.listing-card .btn-details:hover,
.product-card .btn-details:hover {

    background:
        var(--primary-hover) !important;

    border-color:
        var(--primary-hover) !important;

    transform:
        none !important;
}


/* ==========================================================
   14 — CATEGORIES
   ========================================================== */

.category-card,
.categorie-card {

    display:
        block;

    background:
        #ffffff !important;

    color:
        var(--text) !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        4px !important;

    transition:
        background-color .12s ease,
        border-color .12s ease,
        box-shadow .12s ease !important;
}


.category-card:hover,
.categorie-card:hover {

    transform:
        none !important;

    background:
        var(--green-soft) !important;

    color:
        var(--primary) !important;

    border-color:
        var(--primary) !important;

    box-shadow:
        var(--shadow-sm) !important;
}


.category-card i,
.categorie-card i,
.category-card .icon,
.categorie-card .icon,
.category-icon i {

    color:
        var(--primary) !important;
}


.category-card h3,
.categorie-card h3 {

    color:
        var(--text) !important;
}


.category-card:hover h3,
.categorie-card:hover h3 {

    color:
        var(--primary) !important;
}


/* ==========================================================
   15 — BADGES
   ========================================================== */

.badge {

    border-radius:
        2px !important;

    padding:
        4px 9px !important;

    font-size:
        12px !important;
}


.badge-primary {

    background:
        var(--green-soft) !important;

    color:
        var(--primary) !important;

    border:
        1px solid #c8e1d9 !important;
}


.badge-success {

    background:
        var(--success-soft) !important;

    color:
        var(--success) !important;

    border:
        1px solid #b7dfb5 !important;
}


.badge-warning {

    background:
        var(--warning-soft) !important;

    color:
        #8a5a00 !important;

    border:
        1px solid #f2d98a !important;
}


.badge-danger {

    background:
        var(--danger-soft) !important;

    color:
        var(--danger) !important;

    border:
        1px solid #f1b7bb !important;
}


.annonce-badge,
.badge-featured {

    background:
        var(--accent) !important;

    color:
        #ffffff !important;

    border:
        1px solid var(--accent) !important;
}


/* ==========================================================
   16 — SECTION BADGES
   ========================================================== */

.section-badge,
.category-badge,
.section-number {

    background:
        var(--green-soft) !important;

    color:
        var(--primary) !important;

    border:
        1px solid #c8e1d9 !important;

    border-radius:
        2px !important;
}


/* ==========================================================
   17 — ICON BOXES
   ========================================================== */

.stat-icon,
.profil-stat-icon,
.contact-icon,
.trust-icon,
.why-icon,
.section-icon {

    background:
        var(--green-soft) !important;

    color:
        var(--primary) !important;

    border:
        1px solid #c8e1d9 !important;
}


/* ==========================================================
   18 — SEARCH
   ========================================================== */

.search-box,
.hero-search,
.search-container,
.filters,
.filters-panel,
.filter-panel {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;

    box-shadow:
        var(--shadow-xs) !important;
}


.search-box button,
.hero-search button,
.search-container button {

    background:
        var(--accent) !important;

    color:
        #ffffff !important;

    border:
        1px solid var(--accent) !important;
}


.search-box button:hover,
.hero-search button:hover,
.search-container button:hover {

    background:
        var(--accent-hover) !important;

    border-color:
        var(--accent-hover) !important;
}


/* ==========================================================
   19 — HERO
   ========================================================== */

.hero,
.annonces-hero,
.page-hero {

    background:
        var(--primary) !important;

    color:
        #ffffff !important;
}


.hero h1,
.hero h2,
.hero h3,
.annonces-hero h1,
.annonces-hero h2,
.page-hero h1,
.page-hero h2 {

    color:
        #ffffff !important;
}


.hero p,
.annonces-hero p,
.page-hero p {

    color:
        rgba(255, 255, 255, .88) !important;
}


/* ==========================================================
   20 — PAGINATION
   ========================================================== */

.pagination a,
.pagination button,
.page-link {

    background:
        #ffffff !important;

    color:
        var(--text) !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        2px !important;
}


.pagination a:hover,
.pagination button:hover,
.page-link:hover {

    background:
        var(--green-soft) !important;

    color:
        var(--primary) !important;

    border-color:
        var(--primary) !important;
}


.pagination .active,
.pagination a.active,
.pagination button.active,
.page-link.active {

    background:
        var(--primary) !important;

    color:
        #ffffff !important;

    border-color:
        var(--primary) !important;
}


/* ==========================================================
   21 — ALERTS
   ========================================================== */

.alert-success,
.success,
.form-message.success {

    background:
        var(--success-soft) !important;

    color:
        #0b5c0b !important;

    border:
        1px solid #b7dfb5 !important;
}


.alert-warning,
.warning {

    background:
        var(--warning-soft) !important;

    color:
        #7a5200 !important;

    border:
        1px solid #f2d98a !important;
}


.alert-danger,
.form-error {

    background:
        var(--danger-soft) !important;

    color:
        #a4262c !important;

    border:
        1px solid #f1b7bb !important;
}


.alert-info {

    background:
        var(--info-soft) !important;

    color:
        #005a9e !important;

    border:
        1px solid #b5d5ea !important;
}


/* ==========================================================
   22 — TABLES
   ========================================================== */

.table {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;
}


.table th {

    background:
        #f3f3f3 !important;

    color:
        var(--text) !important;
}


.table td {

    color:
        var(--text-light) !important;

    border-color:
        var(--border) !important;
}


.table tbody tr:hover {

    background:
        #f5f5f5 !important;
}


/* ==========================================================
   23 — EMPTY STATES
   ========================================================== */

.empty-state,
.empty-profile {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;
}


.empty-state i,
.empty-profile i {

    color:
        var(--primary) !important;
}


/* ==========================================================
   24 — PROFILE
   ========================================================== */

.profile-card,
.stat-card,
.action-card,
.profil-menu-card,
.profil-stat-card {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;
}


.profile-cover {

    background:
        var(--primary) !important;
}


.profile-avatar img {

    border-color:
        #ffffff !important;
}


.action-card i {

    color:
        var(--primary) !important;
}


.action-card a {

    color:
        var(--primary) !important;
}


.action-card a:hover {

    color:
        var(--accent-hover) !important;
}


/* ==========================================================
   25 — AUTH
   ========================================================== */

.auth-card {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        4px !important;

    box-shadow:
        var(--shadow-md) !important;
}


.auth-icon {

    background:
        var(--primary) !important;

    color:
        #ffffff !important;

    border-radius:
        2px !important;
}


.auth-header h1 {

    color:
        var(--text) !important;
}


.auth-options a {

    color:
        var(--primary) !important;
}


.auth-options a:hover {

    color:
        var(--accent-hover) !important;
}


/* ==========================================================
   26 — CHECKBOX CARDS
   ========================================================== */

.checkbox-card {

    background:
        #ffffff !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        4px !important;
}


.checkbox-card:hover {

    border-color:
        var(--primary) !important;
}


.checkbox-card:has(input:checked) {

    border-color:
        var(--primary) !important;

    background:
        var(--green-soft) !important;
}


/* ==========================================================
   27 — ACTIVE STATES
   ========================================================== */

.nav-item.active,
.nav-link.active,
.category.active,
.filter.active {

    color:
        var(--primary) !important;
}


/* ==========================================================
   28 — FOOTER
   ========================================================== */

.site-footer,
footer {

    background:
        #202020 !important;

    color:
        #d6d6d6 !important;

    border-top:
        1px solid #333333 !important;
}


.site-footer h3,
.site-footer h4,
.site-footer a,
footer h3,
footer h4,
footer a {

    color:
        #ffffff !important;
}


.site-footer a:hover,
footer a:hover {

    color:
        var(--accent-light) !important;
}


.footer-social a {

    background:
        #333333 !important;
}


.footer-social a:hover {

    background:
        var(--accent) !important;
}


/* ==========================================================
   29 — GLOBAL WINDOWS 10 RULES
   ========================================================== */

button,
.btn,
.card,
.category-card,
.categorie-card,
.annonce-card,
.mini-annonce,
.listing-card,
.product-card,
.featured-card {

    -webkit-tap-highlight-color:
        transparent;
}


/*
   Suppression des effets "premium"
   qui donnaient l'ancien aspect.
*/

.card,
.category-card,
.categorie-card,
.annonce-card,
.mini-annonce,
.listing-card,
.product-card,
.featured-card {

    transform:
        none;
}


/* ==========================================================
   FIN THEME.CSS V7
   ========================================================== */