/* ==========================================================
   KRILIH.MA
   css/pages/annonces.css
   VERSION 7.0 — PREMIUM LIQUID MOTION
   ----------------------------------------------------------
   • Architecture compatible avec annonces.html existant
   • Aucun changement JavaScript
   • Aucun changement de fonctionnalités
   • Cartes avec animation premium avancée
   • Halo lumineux
   • Reflets liquides
   • Profondeur 3D
   • Bordures animées
   • Images dynamiques
   • Liquid buttons
   • Ville / Prix / Vues très compacts
   • Responsive
   • Dark mode
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root {

    --ann-green: #0f766e;
    --ann-green-dark: #084c47;
    --ann-green-light: #14b8a6;
    --ann-green-bright: #2dd4bf;

    --ann-orange: #f59e0b;
    --ann-orange-light: #fbbf24;

    --ann-white: #ffffff;

    --ann-radius-sm: 12px;
    --ann-radius-md: 18px;
    --ann-radius-lg: 24px;
    --ann-radius-xl: 30px;

    --ann-card-shadow:
        0 12px 35px rgba(15,118,110,.08);

    --ann-card-shadow-hover:
        0 30px 75px rgba(15,118,110,.20),
        0 12px 30px rgba(245,158,11,.08);

    --ann-transition:
        .35s cubic-bezier(.2,.8,.2,1);
}


/* ==========================================================
   PAGE
   ========================================================== */

.annonces-page {

    position: relative;

    min-height: 100vh;

    padding-bottom: 80px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8fffd 0%,
            var(--bg) 32%,
            var(--bg) 100%
        );
}


/* ==========================================================
   AMBIANCE ANIMÉE
   ========================================================== */

.annonces-page::before {

    content: "";

    position: fixed;

    width: 500px;
    height: 500px;

    top: 20%;
    left: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,184,166,.10),
            transparent 68%
        );

    filter: blur(20px);

    pointer-events: none;

    animation:
        pageGlowOne 12s ease-in-out infinite alternate;

    z-index: 0;
}


.annonces-page::after {

    content: "";

    position: fixed;

    width: 450px;
    height: 450px;

    right: -250px;
    top: 45%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,.08),
            transparent 68%
        );

    filter: blur(20px);

    pointer-events: none;

    animation:
        pageGlowTwo 15s ease-in-out infinite alternate;

    z-index: 0;
}


@keyframes pageGlowOne {

    0% {
        transform:
            translate3d(0,0,0)
            scale(.9);
    }

    100% {
        transform:
            translate3d(90px,60px,0)
            scale(1.15);
    }
}


@keyframes pageGlowTwo {

    0% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    100% {
        transform:
            translate3d(-80px,-70px,0)
            scale(1.2);
    }
}


/* ==========================================================
   HERO
   ========================================================== */

.annonces-hero {

    position: relative;

    z-index: 1;

    padding: 55px 0 45px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(15,118,110,.07),
            rgba(255,255,255,.50)
        );

    border-bottom:
        1px solid rgba(15,118,110,.08);
}


.annonces-hero::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -240px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20,184,166,.18),
            transparent 68%
        );

    pointer-events: none;

    animation:
        heroOrb 9s ease-in-out infinite alternate;
}


.annonces-hero::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -150px;
    bottom: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245,158,11,.14),
            transparent 70%
        );

    pointer-events: none;

    animation:
        heroOrb 11s ease-in-out infinite alternate-reverse;
}


@keyframes heroOrb {

    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(45px,35px,0)
            scale(1.12);
    }
}


/* ==========================================================
   HERO CONTENT
   ========================================================== */

.hero-content {

    position: relative;

    z-index: 3;

    width: min(1100px,94%);

    margin: 0 auto;

    text-align: center;
}


.hero-badge {

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 18px;

    padding: 8px 15px;

    border:
        1px solid rgba(15,118,110,.13);

    border-radius: 999px;

    background:
        rgba(255,255,255,.75);

    color:
        var(--ann-green);

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(15,118,110,.08);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    animation:
        badgeFloat 4s ease-in-out infinite;
}


.hero-badge i {

    color:
        var(--ann-orange);

    animation:
        badgeIcon 2.5s ease-in-out infinite;
}


@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


@keyframes badgeIcon {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18) rotate(8deg);
    }
}


/* ==========================================================
   TITRE
   ========================================================== */

.hero-content h1 {

    max-width: 850px;

    margin: 0 auto 14px;

    color:
        var(--text);

    font-size:
        clamp(2.1rem,5vw,3.8rem);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.hero-content p {

    max-width: 680px;

    margin: 0 auto;

    color:
        var(--text-muted);

    font-size: 16px;

    line-height: 1.7;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.search-box {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;

    width: min(850px,100%);

    min-height: 68px;

    margin: 30px auto 0;

    padding: 7px;

    border:
        1px solid rgba(15,118,110,.14);

    border-radius: 22px;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 20px 55px rgba(15,118,110,.12),
        0 3px 10px rgba(0,0,0,.04);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transition:
        box-shadow .4s ease,
        transform .4s ease;
}


.search-box:focus-within {

    transform:
        translateY(-3px);

    box-shadow:
        0 25px 65px rgba(15,118,110,.18),
        0 0 0 4px rgba(20,184,166,.06);
}


/* ==========================================================
   INPUT
   ========================================================== */

.search-box input {

    flex: 1;

    min-width: 0;

    height: 54px;

    padding: 0 20px;

    border: none;

    outline: none;

    background: transparent;

    color:
        var(--text);

    font-family: inherit;

    font-size: 15px;
}


.search-box input::placeholder {

    color:
        var(--text-muted);

}


/* ==========================================================
   LIQUID SEARCH BUTTON
   ========================================================== */

.search-box button {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 160px;

    height: 54px;

    padding: 0 25px;

    border:
        1px solid rgba(255,255,255,.35);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-green)
        );

    color:
        #fff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(15,118,110,.25),
        inset 0 1px 0 rgba(255,255,255,.30);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        background .35s ease;
}


.search-box button::before {

    content: "";

    position: absolute;

    inset: 1px;

    z-index: -1;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.38),
            rgba(255,255,255,.05) 35%,
            transparent 65%
        );
}


.search-box button::after {

    content: "";

    position: absolute;

    top: -120%;
    left: -45%;

    width: 35%;
    height: 340%;

    transform:
        rotate(25deg)
        translateX(-180%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.70),
            transparent
        );

    filter:
        blur(3px);

    transition:
        transform .75s cubic-bezier(.16,1,.3,1);
}


.search-box button:hover {

    transform:
        translateY(-4px)
        scale(1.02);

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-orange)
        );

    box-shadow:
        0 18px 38px rgba(15,118,110,.25),
        0 8px 25px rgba(245,158,11,.16),
        inset 0 1px 0 rgba(255,255,255,.40);
}


.search-box button:hover::after {

    transform:
        rotate(25deg)
        translateX(560%);
}


.search-box button:active {

    transform:
        translateY(1px)
        scale(.96);
}


/* ==========================================================
   CONTENU
   ========================================================== */

.annonces-content {

    position: relative;

    z-index: 2;

    width: min(1320px,94%);

    margin: 0 auto;
}


.annonces-main {

    padding-top: 65px;

    min-height: 600px;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.section-title {

    margin-bottom: 30px;

    text-align: center;
}


.section-title h2 {

    margin: 0 0 9px;

    color:
        var(--text);

    font-size:
        clamp(1.8rem,3vw,2.5rem);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.7px;
}


.section-title p {

    max-width: 650px;

    margin: 0 auto;

    color:
        var(--text-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   RESULTS
   ========================================================== */

.results-bar {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin: 25px 0;

    padding: 13px 17px;

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

    border-radius: 15px;

    background:
        var(--surface);

    box-shadow:
        0 6px 20px rgba(0,0,0,.035);
}


.results-count {

    color:
        var(--text-muted);

    font-size: 14px;

    font-weight: 500;
}


.results-count strong {

    color:
        var(--ann-green);

    font-weight: 800;
}


/* ==========================================================
   GRID
   ========================================================== */

.annonces-grid {

    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 25px;

    align-items: stretch;
}


/* ==========================================================
   CARTE — BASE
   ========================================================== */

.annonce-card {

    position: relative;

    width: 100%;

    min-width: 0;

    height: 520px;
    min-height: 520px;
    max-height: 520px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(15,118,110,.10);

    border-radius:
        var(--ann-radius-lg);

    background:
        var(--surface);

    box-shadow:
        var(--ann-card-shadow);

    transform:
        translateZ(0);

    isolation: isolate;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .45s ease;

    animation:
        annonceCardIn .65s cubic-bezier(.16,1,.3,1) both;
}


/* ==========================================================
   HALO EXTÉRIEUR
   ========================================================== */

.annonce-card::before {

    content: "";

    position: absolute;

    inset: -2px;

    z-index: -2;

    border-radius:
        inherit;

    background:
        conic-gradient(
            from 180deg,
            transparent 0deg,
            rgba(20,184,166,.00) 40deg,
            rgba(20,184,166,.55) 100deg,
            rgba(245,158,11,.50) 155deg,
            transparent 220deg,
            transparent 360deg
        );

    opacity: 0;

    filter:
        blur(7px);

    transform:
        rotate(0deg);

    transition:
        opacity .45s ease;

    animation:
        cardBorderSpin 5s linear infinite paused;
}


/* ==========================================================
   LUMIÈRE INTERNE
   ========================================================== */

.annonce-card::after {

    content: "";

    position: absolute;

    inset: 1px;

    z-index: 4;

    border-radius:
        calc(var(--ann-radius-lg) - 1px);

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.12),
            transparent 22%,
            transparent 70%,
            rgba(20,184,166,.04)
        );

    opacity: .45;

    transition:
        opacity .45s ease;
}


/* ==========================================================
   HOVER CARTE
   ========================================================== */

.annonce-card:hover {

    transform:
        translateY(-12px)
        rotateX(1.5deg)
        rotateY(-1.5deg);

    border-color:
        rgba(20,184,166,.28);

    box-shadow:
        0 35px 85px rgba(15,118,110,.20),
        0 15px 35px rgba(245,158,11,.08),
        0 0 35px rgba(20,184,166,.08);
}


.annonce-card:hover::before {

    opacity: 1;

    animation-play-state:
        running;
}


.annonce-card:hover::after {

    opacity:
        .85;
}


@keyframes cardBorderSpin {

    to {
        transform:
            rotate(360deg);
    }
}


/* ==========================================================
   IMAGE
   ========================================================== */

.annonce-image {

    position: relative;

    width: 100%;

    height: 225px;
    min-height: 225px;
    max-height: 225px;

    flex-shrink: 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e8f7f4,
            #f8f3e8
        );
}


/* ==========================================================
   IMAGE
   ========================================================== */

.annonce-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001)
        translateZ(0);

    transition:
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}


.annonce-card:hover
.annonce-image img {

    transform:
        scale(1.10)
        translate3d(1%, -1%, 0);

    filter:
        saturate(1.08)
        contrast(1.03);
}


/* ==========================================================
   IMAGE SHINE
   ========================================================== */

.annonce-image::before {

    content: "";

    position: absolute;

    top: 0;
    left: -80%;

    width: 55%;
    height: 100%;

    z-index: 2;

    transform:
        skewX(-18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    filter:
        blur(5px);

    pointer-events: none;

    transition:
        left .9s cubic-bezier(.16,1,.3,1);
}


.annonce-card:hover
.annonce-image::before {

    left: 140%;
}


/* ==========================================================
   IMAGE OVERLAY
   ========================================================== */

.annonce-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 35%,
            rgba(0,0,0,.24) 100%
        );

    opacity: .55;

    transition:
        opacity .5s ease;
}


.annonce-card:hover
.annonce-image::after {

    opacity:
        .30;
}


/* ==========================================================
   CATÉGORIE
   ========================================================== */

.annonce-category {

    position: relative;

    display: inline-flex;

    align-items: center;

    width: fit-content;

    max-width: 100%;

    height: 28px;
    min-height: 28px;
    max-height: 28px;

    margin-bottom: 10px;

    padding: 6px 11px;

    border:
        1px solid rgba(15,118,110,.16);

    border-radius:
        999px;

    background:
        rgba(15,118,110,.10);

    color:
        var(--ann-green);

    font-size: 10px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .3px;

    text-transform:
        uppercase;

    overflow: hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.annonce-card:hover
.annonce-category {

    transform:
        translateY(-2px);

    background:
        rgba(20,184,166,.15);

    box-shadow:
        0 6px 18px rgba(20,184,166,.10);
}


/* ==========================================================
   CONTENU
   ========================================================== */

.annonce-card .annonce-content {

    flex: 1;

    min-height: 0;

    min-width: 0;

    display: flex;

    flex-direction: column;

    padding: 19px;

    overflow: hidden;
}


/* ==========================================================
   TITRE
   ========================================================== */

.annonce-card .annonce-title {

    height: 49px;
    min-height: 49px;
    max-height: 49px;

    flex-shrink: 0;

    margin: 0 0 9px;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;

    color:
        var(--text);

    font-size: 18px;

    line-height: 1.35;

    font-weight: 750;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

    transition:
        color .3s ease,
        transform .3s ease;
}


.annonce-card:hover
.annonce-title {

    color:
        var(--ann-green);

    transform:
        translateX(2px);
}


/* ==========================================================
   DESCRIPTION — MASQUÉE
   ========================================================== */

.annonce-card .annonce-description {

    display: none !important;

    width: 0;
    height: 0;

    min-height: 0;
    max-height: 0;

    margin: 0 !important;
    padding: 0 !important;

    overflow:
        hidden;
}


/* ==========================================================
   INFORMATIONS
   ========================================================== */

.annonce-card .annonce-info {

    height: 34px;
    min-height: 34px;
    max-height: 34px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

    gap: 1px;

    margin: 0;

    overflow:
        hidden;
}


/* ==========================================================
   CHAQUE INFO
   ========================================================== */

.annonce-card .annonce-info div {

    height: 16px;
    min-height: 16px;
    max-height: 16px;

    display:
        flex;

    align-items:
        center;

    gap: 6px;

    color:
        var(--text-muted);

    font-size: 12px;

    line-height: 16px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    transition:
        color .3s ease,
        transform .3s ease;
}


.annonce-card:hover
.annonce-info div {

    color:
        var(--text);

}


.annonce-card:hover
.annonce-info div:nth-child(1) {

    transform:
        translateX(2px);
}


.annonce-card:hover
.annonce-info div:nth-child(2) {

    transform:
        translateX(4px);
}


.annonce-info i {

    width: 18px;

    flex-shrink: 0;

    color:
        var(--ann-green);

    transition:
        transform .3s ease,
        color .3s ease;
}


.annonce-card:hover
.annonce-info i {

    color:
        var(--ann-orange);

    transform:
        scale(1.12);
}


/* ==========================================================
   LOCALISATION — COMPACT
   ========================================================== */

.annonce-card .annonce-location {

    height: 18px;
    min-height: 18px;
    max-height: 18px;

    flex-shrink: 0;

    display:
        flex;

    align-items:
        center;

    gap: 6px;

    margin: 0 0 1px;

    color:
        var(--text-muted);

    font-size: 12px;

    line-height:
        18px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    transition:
        color .3s ease,
        transform .3s ease;
}


.annonce-card:hover
.annonce-location {

    color:
        var(--text);

    transform:
        translateX(2px);
}


.annonce-location i {

    flex-shrink: 0;

    color:
        var(--ann-orange);

    transition:
        transform .35s ease;
}


.annonce-card:hover
.annonce-location i {

    transform:
        scale(1.18)
        rotate(-6deg);
}


/* ==========================================================
   PRIX — COMPACT
   ========================================================== */

.annonce-card .annonce-price {

    height: 30px;
    min-height: 30px;
    max-height: 30px;

    flex-shrink: 0;

    display:
        flex;

    align-items:
        center;

    gap: 0;

    margin: 0 0 1px;

    color:
        var(--ann-green);

    font-size: 24px;

    line-height:
        30px;

    font-weight:
        800;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        color .3s ease,
        text-shadow .3s ease;
}


.annonce-card:hover
.annonce-price {

    transform:
        translateX(3px)
        scale(1.015);

    color:
        var(--ann-green-light);

    text-shadow:
        0 5px 20px rgba(20,184,166,.20);
}


.annonce-card .annonce-price span {

    margin-left:
        5px;

    color:
        var(--text-muted);

    font-size:
        12px;

    font-weight:
        500;

    white-space:
        nowrap;
}


/* ==========================================================
   META
   ========================================================== */

.annonce-card .annonce-meta {

    height: 54px;
    min-height: 54px;
    max-height: 54px;

    margin-top:
        auto;

    padding-top:
        13px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    overflow:
        visible;

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


/* ==========================================================
   DATE
   ========================================================== */

.annonce-card .annonce-date {

    min-width:
        0;

    flex:
        1;

    overflow:
        hidden;

    color:
        var(--text-muted);

    font-size:
        11px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    transition:
        color .3s ease;
}


.annonce-card:hover
.annonce-date {

    color:
        var(--text);
}


/* ==========================================================
   BOUTON VOIR
   ========================================================== */

.annonce-card .annonce-btn {

    position:
        relative;

    isolation:
        isolate;

    z-index:
        10;

    width:
        125px;

    min-width:
        125px;

    max-width:
        125px;

    height:
        40px;

    min-height:
        40px;

    max-height:
        40px;

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.30);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-green)
        );

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px rgba(15,118,110,.20),
        inset 0 1px 0 rgba(255,255,255,.28);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        box-shadow .35s ease;
}


.annonce-card .annonce-btn::before {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    z-index:
        -1;

    border-radius:
        inherit;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.35),
            transparent 40%
        );
}


.annonce-card .annonce-btn::after {

    content:
        "";

    position:
        absolute;

    top:
        -100%;

    left:
        -50%;

    width:
        35%;

    height:
        300%;

    transform:
        rotate(25deg)
        translateX(-180%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    filter:
        blur(2px);

    pointer-events:
        none;

    transition:
        transform .7s cubic-bezier(.16,1,.3,1);
}


.annonce-card .annonce-btn:hover {

    transform:
        translateY(-4px)
        scale(1.025);

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-orange)
        );

    box-shadow:
        0 15px 30px rgba(15,118,110,.23),
        0 5px 18px rgba(245,158,11,.12);
}


.annonce-card .annonce-btn:hover::after {

    transform:
        rotate(25deg)
        translateX(520%);
}


.annonce-card .annonce-btn:active {

    transform:
        translateY(1px)
        scale(.95);
}


/* ==========================================================
   FAVORIS — LIQUID GLASS
   ========================================================== */

.annonce-favorite {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    z-index:
        8;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,.72);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.78);

    color:
        #777;

    box-shadow:
        0 10px 28px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.80);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    cursor:
        pointer;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.annonce-favorite:hover {

    transform:
        translateY(-4px)
        scale(1.10)
        rotate(4deg);

    color:
        #ef4444;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 16px 35px rgba(239,68,68,.20),
        0 0 20px rgba(239,68,68,.08);
}


.annonce-favorite:active {

    transform:
        scale(.88);
}


/* ==========================================================
   BADGE PREMIUM
   ========================================================== */

.annonce-badge {

    position:
        absolute;

    top:
        14px;

    left:
        14px;

    z-index:
        8;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        7px 14px;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            rgba(20,20,20,.94),
            rgba(0,0,0,.78)
        );

    color:
        #fff !important;

    backdrop-filter:
        blur(14px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(130%);

    box-shadow:
        0 10px 28px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.20);

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .45px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    overflow:
        hidden;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}


.annonce-badge::before {

    content:
        "";

    position:
        absolute;

    top:
        -60%;

    left:
        -40%;

    width:
        35%;

    height:
        220%;

    transform:
        rotate(25deg)
        translateX(-180%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    filter:
        blur(2px);

    pointer-events:
        none;

    transition:
        transform .75s cubic-bezier(.16,1,.3,1);
}


.annonce-badge::after {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    border-radius:
        inherit;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.16),
            transparent 35%,
            transparent 70%,
            rgba(255,255,255,.05)
        );

    pointer-events:
        none;
}


.annonce-badge:hover {

    transform:
        translateY(-3px)
        scale(1.05);

    border-color:
        rgba(255,255,255,.40);

    box-shadow:
        0 15px 35px rgba(0,0,0,.38),
        0 0 20px rgba(255,255,255,.08),
        inset 0 1px 0 rgba(255,255,255,.30);
}


.annonce-badge:hover::before {

    transform:
        rotate(25deg)
        translateX(520%);
}


.annonce-badge:active {

    transform:
        scale(.96);
}


/* ==========================================================
   BADGES GÉNÉRAUX
   ========================================================== */

.badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        6px 12px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;
}


.badge-primary {

    background:
        rgba(15,118,110,.10);

    color:
        var(--ann-green);
}


.badge-success {

    background:
        rgba(34,197,94,.12);

    color:
        #16a34a;
}


.badge-warning {

    background:
        rgba(245,158,11,.13);

    color:
        #b45309;
}


.badge-danger {

    background:
        rgba(239,68,68,.12);

    color:
        #dc2626;
}


.badge-new {

    background:
        var(--ann-green-light);

    color:
        #fff;
}


.badge-featured {

    background:
        var(--ann-orange);

    color:
        #fff;
}


.badge-popular {

    background:
        var(--ann-green);

    color:
        #fff;
}


.badge-rented {

    background:
        #ef4444;

    color:
        #fff;
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.empty-state {

    grid-column:
        1 / -1;

    padding:
        75px 25px;

    text-align:
        center;

    border:
        1px dashed rgba(15,118,110,.20);

    border-radius:
        24px;

    background:
        rgba(15,118,110,.025);
}


.empty-state i {

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--ann-green);

    font-size:
        55px;

    opacity:
        .30;

    animation:
        emptyFloat 3s ease-in-out infinite;
}


@keyframes emptyFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }
}


.empty-state h3 {

    margin:
        0 0 9px;

    color:
        var(--text);

    font-size:
        23px;

    font-weight:
        800;
}


.empty-state p {

    max-width:
        500px;

    margin:
        0 auto 22px;

    color:
        var(--text-muted);

    line-height:
        1.6;
}


/* ==========================================================
   BOUTON PRIMARY
   ========================================================== */

.btn-primary {

    position:
        relative;

    overflow:
        hidden;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        12px 20px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-green)
        );

    color:
        #fff;

    font-family:
        inherit;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px rgba(15,118,110,.18);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


.btn-primary:hover {

    transform:
        translateY(-4px)
        scale(1.02);

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-orange)
        );

    box-shadow:
        0 15px 32px rgba(15,118,110,.22);
}


.btn-primary:active {

    transform:
        scale(.96);
}


/* ==========================================================
   ERROR
   ========================================================== */

.error-state {

    padding:
        65px 20px;

    text-align:
        center;

    border-radius:
        24px;

    background:
        rgba(239,68,68,.035);
}


.error-state i {

    display:
        block;

    margin-bottom:
        18px;

    color:
        #ef4444;

    font-size:
        52px;
}


.error-state h3 {

    margin:
        0 0 9px;

    color:
        var(--text);

    font-size:
        22px;
}


.error-state p {

    margin-bottom:
        20px;

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


/* ==========================================================
   LOADING
   ========================================================== */

.loading-spinner {

    width:
        50px;

    height:
        50px;

    margin:
        60px auto;

    border:
        4px solid rgba(15,118,110,.12);

    border-top-color:
        var(--ann-green);

    border-right-color:
        var(--ann-orange);

    border-radius:
        50%;

    animation:
        annoncesSpin .75s linear infinite;
}


@keyframes annoncesSpin {

    to {
        transform:
            rotate(360deg);
    }
}


/* ==========================================================
   SKELETON
   ========================================================== */

.skeleton {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--surface-2);
}


.skeleton::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    animation:
        skeletonMove 1.35s infinite;
}


@keyframes skeletonMove {

    to {
        transform:
            translateX(100%);
    }
}


.skeleton-image {

    height:
        225px;
}


.skeleton-line {

    height:
        13px;

    margin-bottom:
        11px;

    border-radius:
        8px;
}


.skeleton-small {
    width:
        42%;
}


.skeleton-medium {
    width:
        68%;
}


.skeleton-large {
    width:
        100%;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        45px;
}


.pagination button {

    position:
        relative;

    overflow:
        hidden;

    width:
        43px;

    height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        13px;

    background:
        var(--surface);

    color:
        var(--text);

    font-family:
        inherit;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 5px 15px rgba(0,0,0,.045);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.pagination button:hover {

    transform:
        translateY(-4px)
        scale(1.04);

    background:
        var(--ann-green);

    color:
        #fff;

    border-color:
        var(--ann-green);

    box-shadow:
        0 12px 28px rgba(15,118,110,.20);
}


.pagination button.active {

    background:
        linear-gradient(
            135deg,
            var(--ann-green-light),
            var(--ann-green)
        );

    color:
        #fff;

    border-color:
        var(--ann-green);

    box-shadow:
        0 10px 24px rgba(15,118,110,.22);
}


.pagination button:disabled {

    opacity:
        .4;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* ==========================================================
   ANIMATION CARTES
   ========================================================== */

@keyframes annonceCardIn {

    from {

        opacity:
            0;

        transform:
            translateY(35px)
            scale(.96)
            rotateX(3deg);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1)
            rotateX(0);
    }
}


/* ==========================================================
   DÉCALAGE DES CARTES
   ========================================================== */

.annonce-card:nth-child(2) {
    animation-delay:
        .06s;
}

.annonce-card:nth-child(3) {
    animation-delay:
        .12s;
}

.annonce-card:nth-child(4) {
    animation-delay:
        .18s;
}

.annonce-card:nth-child(5) {
    animation-delay:
        .24s;
}

.annonce-card:nth-child(6) {
    animation-delay:
        .30s;
}

.annonce-card:nth-child(7) {
    animation-delay:
        .36s;
}

.annonce-card:nth-child(8) {
    animation-delay:
        .42s;
}

.annonce-card:nth-child(9) {
    animation-delay:
        .48s;
}


/* ==========================================================
   SÉCURITÉ
   ========================================================== */

.annonce-card,
.annonce-content,
.annonce-image {

    min-width:
        0;
}


.annonce-content p,
.annonce-content h3 {

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.annonce-image img[alt=""] {

    opacity:
        .55;
}


/* ==========================================================
   FOOTER PREMIUM
   ========================================================== */

.site-footer {

    position:
        relative;

    width:
        100%;

    margin-top:
        90px;

    background:
        linear-gradient(
            145deg,
            #07110d 0%,
            #0b1712 45%,
            #101612 100%
        );

    color:
        #fff;

    overflow:
        hidden;

    border-top:
        1px solid rgba(255,255,255,.08);
}


.site-footer::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    top:
        -260px;

    left:
        -120px;

    background:
        radial-gradient(
            circle,
            rgba(30,180,110,.20),
            transparent 70%
        );

    pointer-events:
        none;

    animation:
        footerGlow 10s ease-in-out infinite alternate;
}


.site-footer::after {

    content:
        "";

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    right:
        -150px;

    bottom:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(255,145,0,.16),
            transparent 70%
        );

    pointer-events:
        none;

    animation:
        footerGlow 12s ease-in-out infinite alternate-reverse;
}


@keyframes footerGlow {

    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(50px,30px,0)
            scale(1.15);
    }
}


/* ==========================================================
   FOOTER CONTAINER
   ========================================================== */

.footer-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(1180px,calc(100% - 40px));

    margin:
        0 auto;

    padding:
        65px 0 55px;

    display:
        grid;

    grid-template-columns:
        minmax(260px,1.5fr)
        repeat(2,minmax(180px,1fr))
        minmax(190px,1fr);

    gap:
        55px;
}


/* ==========================================================
   FOOTER BRAND
   ========================================================== */

.footer-logo {

    display:
        inline-flex;

    align-items:
        baseline;

    text-decoration:
        none;

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        -1px;

    color:
        #fff;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


.footer-logo span {

    color:
        #ff8a00;
}


.footer-logo:hover {

    transform:
        translateY(-3px);

    opacity:
        .9;
}


.footer-description {

    max-width:
        350px;

    margin:
        18px 0 0;

    color:
        rgba(255,255,255,.62);

    font-size:
        14px;

    line-height:
        1.8;
}


/* ==========================================================
   FOOTER COLUMNS
   ========================================================== */

.footer-column {

    min-width:
        0;
}


.footer-column h3 {

    position:
        relative;

    margin:
        3px 0 22px;

    color:
        #fff;

    font-size:
        15px;

    font-weight:
        700;
}


.footer-column h3::after {

    content:
        "";

    display:
        block;

    width:
        28px;

    height:
        2px;

    margin-top:
        9px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #18a86b,
            #ff8a00
        );
}


/* ==========================================================
   FOOTER LINKS
   ========================================================== */

.footer-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;
}


.footer-links a {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    width:
        100%;

    padding:
        7px 9px;

    border-radius:
        9px;

    color:
        rgba(255,255,255,.60);

    text-decoration:
        none;

    font-size:
        13px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


.footer-links a:hover {

    color:
        #fff;

    background:
        rgba(255,255,255,.06);

    transform:
        translateX(5px);
}


.footer-links a i {

    width:
        17px;

    text-align:
        center;

    color:
        rgba(255,255,255,.42);

    transition:
        color .25s ease;
}


.footer-links a:hover i {

    color:
        #ff8a00;
}


/* ==========================================================
   SOCIAL
   ========================================================== */

.footer-social p {

    max-width:
        220px;

    margin:
        0 0 20px;

    color:
        rgba(255,255,255,.55);

    font-size:
        13px;

    line-height:
        1.7;
}


.social-icons {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.social-icons a {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:
        13px;

    color:
        rgba(255,255,255,.72);

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    text-decoration:
        none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 25px rgba(0,0,0,.18);

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.social-icons a:hover {

    transform:
        translateY(-6px)
        scale(1.06);

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            rgba(20,165,105,.28),
            rgba(255,138,0,.20)
        );

    border-color:
        rgba(255,255,255,.22);

    box-shadow:
        0 15px 38px rgba(0,0,0,.30);
}


/* ==========================================================
   FOOTER BOTTOM
   ========================================================== */

.footer-bottom {

    position:
        relative;

    z-index:
        2;

    border-top:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(0,0,0,.16);
}


.footer-bottom-inner {

    width:
        min(1180px,calc(100% - 40px));

    min-height:
        68px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.footer-bottom p {

    margin:
        0;

    color:
        rgba(255,255,255,.45);

    font-size:
        12px;
}


.footer-bottom strong {

    color:
        rgba(255,255,255,.75);
}


.footer-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255,255,255,.42);

    font-size:
        11px;
}


.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #20c77a;

    box-shadow:
        0 0 0 4px rgba(32,199,122,.10),
        0 0 12px rgba(32,199,122,.45);

    animation:
        statusPulse 2s ease-in-out infinite;
}


@keyframes statusPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.25);
    }
}


/* ==========================================================
   TABLETTE LARGE
   ========================================================== */

@media (max-width:1200px) {

    .annonces-content {

        width:
            min(1120px,94%);
    }

    .annonces-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            22px;
    }
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:900px) {

    .annonces-main {

        padding-top:
            50px;
    }

    .footer-container {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            42px 35px;
    }

    .footer-brand {

        grid-column:
            1 / -1;
    }
}


@media (max-width:850px) {

    .annonces-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .annonce-image {

        height:
            210px;

        min-height:
            210px;

        max-height:
            210px;
    }

    .annonce-card {

        height:
            520px;

        min-height:
            520px;

        max-height:
            520px;
    }

    .annonce-card .annonce-content {

        padding:
            17px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:700px) {

    .annonces-hero {

        padding:
            40px 0 35px;
    }

    .hero-content {

        width:
            min(94%,600px);
    }

    .hero-content h1 {

        font-size:
            31px;

        letter-spacing:
            -.8px;
    }

    .hero-content p {

        font-size:
            14px;
    }

    .search-box {

        flex-direction:
            column;

        gap:
            8px;

        padding:
            9px;

        border-radius:
            18px;
    }

    .search-box input {

        width:
            100%;

        height:
            50px;
    }

    .search-box button {

        width:
            100%;

        min-width:
            0;

        height:
            51px;
    }

    .annonces-content {

        width:
            min(94%,600px);
    }

    .annonces-main {

        padding-top:
            42px;
    }

    .section-title h2 {

        font-size:
            27px;
    }

    .results-bar {

        align-items:
            flex-start;

        margin-top:
            20px;
    }

    .annonces-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .annonce-card {

        height:
            520px;

        min-height:
            520px;

        max-height:
            520px;
    }

    .annonce-image {

        height:
            225px;

        min-height:
            225px;

        max-height:
            225px;
    }
}


/* ==========================================================
   MOBILE PETIT
   ========================================================== */

@media (max-width:480px) {

    .hero-badge {

        padding:
            7px 12px;

        font-size:
            10px;
    }

    .hero-content h1 {

        font-size:
            27px;
    }

    .hero-content p {

        font-size:
            13px;
    }

    .search-box {

        margin-top:
            23px;
    }

    .annonce-card {

        height:
            auto;

        min-height:
            0;

        max-height:
            none;

        border-radius:
            21px;
    }

    .annonce-image {

        height:
            205px;

        min-height:
            205px;

        max-height:
            205px;
    }

    .annonce-card .annonce-meta {

        height:
            auto;

        min-height:
            95px;

        max-height:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            center;

        gap:
            10px;
    }

    .annonce-card .annonce-btn {

        width:
            100%;

        min-width:
            100%;

        max-width:
            100%;
    }

    .footer-container {

        width:
            min(100% - 28px,480px);

        padding:
            45px 0 40px;

        grid-template-columns:
            1fr;

        gap:
            34px;
    }

    .footer-brand {

        grid-column:
            auto;
    }

    .footer-logo {

        font-size:
            27px;
    }

    .footer-description {

        max-width:
            none;

        font-size:
            13px;
    }

    .footer-bottom-inner {

        width:
            min(100% - 28px,480px);

        padding:
            18px 0;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            10px;
    }

    .pagination {

        flex-wrap:
            wrap;
    }
}


/* ==========================================================
   TRÈS PETITS ÉCRANS
   ========================================================== */

@media (max-width:380px) {

    .footer-container {

        width:
            calc(100% - 22px);
    }

    .social-icons a {

        width:
            40px;

        height:
            40px;
    }
}


/* ==========================================================
   DARK MODE
   ========================================================== */

[data-theme="dark"] .annonces-page {

    background:
        linear-gradient(
            180deg,
            #071d1b 0%,
            var(--bg) 32%,
            var(--bg) 100%
        );
}


[data-theme="dark"] .annonces-hero {

    background:
        linear-gradient(
            135deg,
            rgba(15,118,110,.16),
            rgba(0,0,0,.05)
        );

    border-bottom-color:
        rgba(255,255,255,.06);
}


[data-theme="dark"] .hero-badge {

    background:
        rgba(15,23,42,.72);

    border-color:
        rgba(255,255,255,.08);
}


[data-theme="dark"] .search-box {

    background:
        rgba(15,23,42,.84);

    border-color:
        rgba(255,255,255,.08);
}


[data-theme="dark"] .annonce-card {

    border-color:
        rgba(255,255,255,.07);

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);
}


[data-theme="dark"] .annonce-card:hover {

    border-color:
        rgba(20,184,166,.30);

    box-shadow:
        0 35px 80px rgba(0,0,0,.40),
        0 0 30px rgba(20,184,166,.06);
}


[data-theme="dark"] .annonce-image {

    background:
        #102522;
}


[data-theme="dark"] .annonce-category {

    background:
        rgba(20,184,166,.13);

    border-color:
        rgba(20,184,166,.18);

    color:
        #5eead4;
}


[data-theme="dark"] .annonce-favorite {

    background:
        rgba(15,23,42,.82);

    border-color:
        rgba(255,255,255,.12);

    color:
        #cbd5e1;
}


[data-theme="dark"] .results-bar {

    background:
        var(--surface);

    border-color:
        rgba(255,255,255,.07);
}


[data-theme="dark"] .pagination button {

    background:
        var(--surface);

    border-color:
        rgba(255,255,255,.08);
}


[data-theme="dark"] .empty-state {

    background:
        rgba(20,184,166,.035);

    border-color:
        rgba(20,184,166,.18);
}


/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline:
        3px solid rgba(20,184,166,.30);

    outline-offset:
        3px;
}


/* ==========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;
    }

    .annonce-card:hover,
    .annonce-btn:hover,
    .search-box button:hover,
    .pagination button:hover {

        transform:
            none;
    }
}


/* ==========================================================
   FIN
   KRILIH.MA — ANNONCES.CSS V7
   PREMIUM LIQUID MOTION
   ========================================================== */


   /* ==========================================================
   KRILIH.MA
   CADRE ANIMÉ PREMIUM — ANNONCE CARD
   V7 — LIQUID ENERGY BORDER
   ========================================================== */

/* ----------------------------------------------------------
   CARTE
---------------------------------------------------------- */

.annonce-card {

    position: relative;

    isolation: isolate;

    /* espace nécessaire pour le cadre lumineux */
    border: 1px solid transparent !important;

    background:
        linear-gradient(
            var(--surface),
            var(--surface)
        ) padding-box,

        conic-gradient(
            from var(--annonce-border-angle, 0deg),
            rgba(15,118,110,0.25),
            rgba(20,184,166,0.95),
            rgba(255,255,255,0.35),
            rgba(245,158,11,0.95),
            rgba(251,191,36,0.45),
            rgba(20,184,166,0.95),
            rgba(15,118,110,0.25)
        ) border-box;

    box-shadow:
        0 12px 35px rgba(15,118,110,0.08),
        0 0 0 rgba(20,184,166,0);

    animation:
        annonceCardIn .45s ease both,
        annonceBorderRotate 7s linear infinite;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        filter .35s ease;

}


/* ----------------------------------------------------------
   ANIMATION DE ROTATION DU CADRE
---------------------------------------------------------- */

@property --annonce-border-angle {

    syntax: "<angle>";

    initial-value: 0deg;

    inherits: false;
}


@keyframes annonceBorderRotate {

    0% {

        --annonce-border-angle: 0deg;

    }

    100% {

        --annonce-border-angle: 360deg;

    }

}


/* ----------------------------------------------------------
   HALO LUMINEUX DERRIÈRE LA CARTE
---------------------------------------------------------- */

.annonce-card::before {

    content: "";

    position: absolute;

    z-index: -2;

    inset: -2px;

    border-radius: inherit;

    background:
        conic-gradient(
            from var(--annonce-border-angle, 0deg),
            transparent 0deg,
            rgba(20,184,166,0.00) 25deg,
            rgba(20,184,166,0.65) 55deg,
            transparent 90deg,
            transparent 145deg,
            rgba(245,158,11,0.65) 185deg,
            transparent 225deg,
            transparent 300deg,
            rgba(20,184,166,0.55) 335deg,
            transparent 360deg
        );

    filter:
        blur(8px);

    opacity: .45;

    pointer-events: none;

    transition:
        opacity .35s ease,
        filter .35s ease;

}


/* ----------------------------------------------------------
   REFLET LIQUIDE SUR LA CARTE
---------------------------------------------------------- */

.annonce-card::after {

    content: "";

    position: absolute;

    z-index: 20;

    top: -120%;

    left: -35%;

    width: 28%;

    height: 340%;

    transform:
        rotate(25deg)
        translateX(-180%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.30),
            rgba(255,255,255,0.04),
            transparent
        );

    filter:
        blur(5px);

    opacity: 0;

    pointer-events: none;

    transition:
        transform .9s cubic-bezier(.16,1,.3,1),
        opacity .3s ease;

}


/* ----------------------------------------------------------
   HOVER — PUISSANCE MAXIMALE
---------------------------------------------------------- */

.annonce-card:hover {

    transform:
        translateY(-9px)
        scale(1.012);

    filter:
        saturate(1.08);

    box-shadow:

        0 25px 55px
        rgba(15,118,110,0.16),

        0 12px 30px
        rgba(245,158,11,0.10),

        0 0 35px
        rgba(20,184,166,0.12);

}


/* halo plus fort */

.annonce-card:hover::before {

    opacity: .90;

    filter:
        blur(12px);

}


/* balayage lumineux */

.annonce-card:hover::after {

    opacity: 1;

    transform:
        rotate(25deg)
        translateX(520%);

}


/* ----------------------------------------------------------
   CADRE PLUS INTENSE AU SURVOL
---------------------------------------------------------- */

.annonce-card:hover {

    background:
        linear-gradient(
            var(--surface),
            var(--surface)
        ) padding-box,

        conic-gradient(
            from var(--annonce-border-angle, 0deg),
            rgba(20,184,166,0.55),
            #14b8a6,
            rgba(255,255,255,0.85),
            #f59e0b,
            #fbbf24,
            #14b8a6,
            rgba(20,184,166,0.55)
        ) border-box;

}


/* ----------------------------------------------------------
   EFFET ACTIF / CLIC
---------------------------------------------------------- */

.annonce-card:active {

    transform:
        translateY(-2px)
        scale(.985);

    box-shadow:

        0 10px 25px
        rgba(15,118,110,0.12),

        inset 0 3px 12px
        rgba(0,0,0,0.08);

}


/* ==========================================================
   PETITE LUMIÈRE QUI PULSE
========================================================== */

.annonce-card {

    animation:
        annonceCardIn .45s ease both,
        annonceBorderRotate 7s linear infinite,
        annonceBorderPulse 3.5s ease-in-out infinite;

}


@keyframes annonceBorderPulse {

    0%,
    100% {

        box-shadow:
            0 12px 35px rgba(15,118,110,0.08),
            0 0 0 rgba(20,184,166,0);

    }

    50% {

        box-shadow:
            0 14px 38px rgba(15,118,110,0.10),
            0 0 16px rgba(20,184,166,0.07);

    }

}


/* ==========================================================
   DARK MODE
========================================================== */

[data-theme="dark"] .annonce-card {

    background:
        linear-gradient(
            var(--surface),
            var(--surface)
        ) padding-box,

        conic-gradient(
            from var(--annonce-border-angle, 0deg),
            rgba(20,184,166,0.25),
            rgba(20,184,166,0.90),
            rgba(255,255,255,0.20),
            rgba(245,158,11,0.90),
            rgba(251,191,36,0.35),
            rgba(20,184,166,0.90),
            rgba(20,184,166,0.25)
        ) border-box;

}


[data-theme="dark"] .annonce-card::before {

    opacity: .35;

}


[data-theme="dark"] .annonce-card:hover {

    box-shadow:

        0 25px 60px
        rgba(0,0,0,0.45),

        0 0 35px
        rgba(20,184,166,0.16),

        0 0 18px
        rgba(245,158,11,0.08);

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .annonce-card {

        animation:
            annonceCardIn .45s ease both,
            annonceBorderRotate 9s linear infinite;

    }

    .annonce-card:hover {

        transform:
            translateY(-5px)
            scale(1.005);

    }

}


/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .annonce-card {

        animation:
            annonceCardIn .45s ease both;

    }

    .annonce-card::before,
    .annonce-card::after {

        display: none;

    }

    .annonce-card:hover {

        transform: none;

    }

}

/* ==========================================================
   KRILIH.MA — V6.2
   ORGANISATION DES CARTES / VUES À CÔTÉ DE LA LOCALISATION
   ========================================================== */

.annonce-card .annonce-title {
    margin-top: 0;
}

.annonce-card .annonce-location {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow: hidden;
}

.annonce-card .annonce-location-icon {
    width: auto;
    flex: 0 0 auto;
}

.annonce-card .annonce-city-name {
    min-width: 0;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annonce-card .card-views {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(113, 128, 120, .25);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.annonce-card .card-views i {
    width: auto;
    color: var(--text-muted);
    transform: none;
}

.annonce-card:hover .card-views i {
    color: var(--ann-green);
    transform: none;
}

.annonce-card .annonce-meta {
    margin-top: auto;
}

.annonce-card .annonce-card-availability {
    min-width: 0;
    flex: 1;
}

.annonce-card .annonce-btn {
    margin-left: auto;
}

@media (max-width: 700px) {
    .annonce-card .annonce-city-name {
        max-width: 58%;
    }
}