/* ===========================================================
   KRILIH.MA
   css/mes-annonces.css
   VERSION V3 PREMIUM
   ===========================================================

   RESPONSABILITÉS :

   - Style de la page "Mes annonces"
   - Cartes des annonces
   - Images
   - Badges
   - Prix
   - Informations
   - Boutons d'action
   - États vide / erreur / chargement
   - Responsive

   DÉPENDANCES :

   - variables.css V3
   - theme.css

   IMPORTANT :

   Ce fichier NE TOUCHE PAS au header dynamique.

   Le header est géré par :
   - header.js
   - header.css
   - components/header.html

   Les couleurs viennent exclusivement de :
   - variables.css

   Le mode nuit est géré par :
   - theme.css
   =========================================================== */


/* ===========================================================
   CONTENEUR PRINCIPAL
   =========================================================== */

main.mes-annonces-main {

    width: 100%;

    max-width: var(--container);

    margin-left: auto;
    margin-right: auto;

    padding:
        42px
        24px
        70px;

}


/* ===========================================================
   EN-TÊTE DE LA PAGE
   =========================================================== */

.mes-annonces-header {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 32px;

}


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

.mes-annonces-title {

    margin: 0;

    color: var(--text);

    font-size: 32px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.5px;

}


/* ===========================================================
   SOUS-TITRE
   =========================================================== */

.mes-annonces-subtitle {

    margin:
        8px
        0
        0;

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.6;

}


/* ===========================================================
   COMPTEUR D'ANNONCES
   =========================================================== */

.mes-annonces-count {

    min-width: 46px;

    height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        0
        14px;

    background: var(--primary);

    color: #ffffff;

    border-radius: var(--radius-md);

    font-size: 16px;

    font-weight: 800;

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

}


/* ===========================================================
   LISTE DES ANNONCES
   =========================================================== */

#listeAnnonces {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 26px;

}


/* ===========================================================
   CARTE ANNONCE
   =========================================================== */

.carte-annonce {

    width: 100%;

    min-width: 0;

    background: var(--card);

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

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

    overflow: hidden;

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

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}


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

.carte-annonce:hover {

    transform: translateY(-5px);

    border-color: var(--primary-light);

    box-shadow: var(--shadow-lg);

}


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

.image-container {

    position: relative;

    width: 100%;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: var(--surface-2);

}


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

.image-annonce {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.4s ease;

}


/* ===========================================================
   ZOOM IMAGE AU SURVOL
   =========================================================== */

.carte-annonce:hover .image-annonce {

    transform: scale(1.04);

}


/* ===========================================================
   IMAGE PAR DÉFAUT
   =========================================================== */

.image-annonce[src*="logo2.png"] {

    object-fit: contain;

    padding: 35px;

}


/* ===========================================================
   BADGE STATUT
   =========================================================== */

.badge-statut {

    position: absolute;

    top: 14px;

    right: 14px;

    min-height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        6px
        12px;

    background: var(--surface);

    color: var(--text);

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

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    line-height: 1;

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

}


/* ===========================================================
   STATUT ACTIVE
   =========================================================== */

.badge-statut.active {

    color: var(--success);

}


/* ===========================================================
   STATUT INACTIVE
   =========================================================== */

.badge-statut.inactive {

    color: var(--danger);

}


/* ===========================================================
   STATUT LOUÉE
   =========================================================== */

.badge-statut.louer {

    color: var(--warning);

}


/* ===========================================================
   STATUT RÉSERVÉE
   =========================================================== */

.badge-statut.reservee {

    color: var(--info);

}


/* ===========================================================
   CONTENU DE LA CARTE
   =========================================================== */

.contenu-annonce {

    padding: 22px;

}


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

.contenu-annonce h2 {

    margin:
        0
        0
        12px;

    color: var(--text);

    font-size: 20px;

    font-weight: 800;

    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* ===========================================================
   PRIX
   =========================================================== */

.prix-annonce {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 18px;

}


/* ===========================================================
   VALEUR DU PRIX
   =========================================================== */

.prix-annonce .prix {

    color: var(--primary);

    font-size: 23px;

    font-weight: 800;

    line-height: 1.2;

}


/* ===========================================================
   UNITÉ DU PRIX
   =========================================================== */

.prix-annonce .unite {

    color: var(--text-muted);

    font-size: 14px;

    font-weight: 500;

}


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

.infos-annonce {

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding-bottom: 18px;

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

}


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

.infos-annonce span {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-light);

    font-size: 14px;

    line-height: 1.5;

}


/* ===========================================================
   ACTIONS
   =========================================================== */

.actions {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    margin-top: 18px;

}


/* ===========================================================
   BOUTONS ACTION
   =========================================================== */

.btn-action {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        10px
        14px;

    border: none;

    border-radius: var(--radius-sm);

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        opacity var(--transition),
        background var(--transition);

}


/* ===========================================================
   HOVER BOUTON
   =========================================================== */

.btn-action:hover {

    transform: translateY(-2px);

    opacity: 0.95;

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

}


/* ===========================================================
   ACTIVE BOUTON
   =========================================================== */

.btn-action:active {

    transform: translateY(0);

}


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

.btn-action:focus-visible {

    outline:
        3px
        solid
        var(--primary-light);

    outline-offset: 3px;

}


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

.btn-voir {

    background: var(--primary);

    color: #ffffff;

}


/* ===========================================================
   HOVER VOIR
   =========================================================== */

.btn-voir:hover {

    background: var(--primary-hover);

}


/* ===========================================================
   BOUTON MODIFIER
   =========================================================== */

.btn-modifier {

    background: var(--accent);

    color: #ffffff;

}


/* ===========================================================
   HOVER MODIFIER
   =========================================================== */

.btn-modifier:hover {

    background: var(--warning);

}


/* ===========================================================
   BOUTON SUPPRIMER
   =========================================================== */

.btn-supprimer {

    grid-column:
        1 / -1;

    background: var(--danger);

    color: #ffffff;

}


/* ===========================================================
   HOVER SUPPRIMER
   =========================================================== */

.btn-supprimer:hover {

    background: var(--danger-light);

}


/* ===========================================================
   AUCUNE ANNONCE
   =========================================================== */

.aucune-annonce {

    grid-column:
        1 / -1;

    width: 100%;

    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:
        60px
        25px;

    background: var(--card);

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

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

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

    text-align: center;

}


/* ===========================================================
   ICÔNE AUCUNE ANNONCE
   =========================================================== */

.aucune-icon {

    width: 78px;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    background: var(--primary);

    color: #ffffff;

    border-radius: 50%;

    font-size: 34px;

    box-shadow: var(--shadow-md);

}


/* ===========================================================
   TITRE AUCUNE ANNONCE
   =========================================================== */

.aucune-annonce h2 {

    margin:
        0
        0
        10px;

    color: var(--text);

    font-size: 29px;

    font-weight: 800;

    line-height: 1.3;

}


/* ===========================================================
   TEXTE AUCUNE ANNONCE
   =========================================================== */

.aucune-annonce p {

    max-width: 600px;

    margin:
        0
        0
        28px;

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* ===========================================================
   BOUTON PUBLIER
   =========================================================== */

.btn-publier {

    min-height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        12px
        24px;

    background: var(--primary);

    color: #ffffff;

    border-radius: var(--radius-sm);

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

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

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);

}


/* ===========================================================
   HOVER PUBLIER
   =========================================================== */

.btn-publier:hover {

    background: var(--primary-hover);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}


/* ===========================================================
   FOCUS PUBLIER
   =========================================================== */

.btn-publier:focus-visible {

    outline:
        3px
        solid
        var(--primary-light);

    outline-offset: 3px;

}


/* ===========================================================
   ERREUR
   =========================================================== */

.erreur-annonces {

    grid-column:
        1 / -1;

    width: 100%;

    padding:
        32px
        25px;

    background: var(--card);

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

    border-radius: var(--radius-md);

    color: var(--danger);

    text-align: center;

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

}


/* ===========================================================
   CHARGEMENT
   =========================================================== */

.chargement-annonces {

    grid-column:
        1 / -1;

    width: 100%;

    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    color: var(--text-muted);

    font-size: 15px;

    text-align: center;

}


/* ===========================================================
   SPINNER
   =========================================================== */

.chargement-spinner {

    width: 42px;

    height: 42px;

    margin-right: 14px;

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

    border-top-color: var(--primary);

    border-radius: 50%;

    animation:
        mesAnnoncesSpinner
        0.8s
        linear
        infinite;

}


@keyframes mesAnnoncesSpinner {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* ===========================================================
   RESPONSIVE — TABLETTE
   =========================================================== */

@media (max-width: 900px) {

    main.mes-annonces-main {

        padding:
            35px
            20px
            60px;

    }


    .mes-annonces-title {

        font-size: 29px;

    }


    #listeAnnonces {

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(280px, 1fr)
            );

        gap: 20px;

    }

}


/* ===========================================================
   RESPONSIVE — MOBILE
   =========================================================== */

@media (max-width: 600px) {

    main.mes-annonces-main {

        padding:
            25px
            15px
            45px;

    }


    .mes-annonces-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        margin-bottom: 24px;

    }


    .mes-annonces-title {

        font-size: 26px;

    }


    .mes-annonces-subtitle {

        font-size: 14px;

    }


    .mes-annonces-count {

        min-width: 42px;

        height: 42px;

    }


    #listeAnnonces {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .image-container {

        height: 210px;

    }


    .contenu-annonce {

        padding: 18px;

    }


    .contenu-annonce h2 {

        font-size: 19px;

    }


    .prix-annonce .prix {

        font-size: 21px;

    }


    .aucune-annonce {

        min-height: 350px;

        padding:
            45px
            20px;

    }


    .aucune-icon {

        width: 68px;

        height: 68px;

        font-size: 30px;

    }


    .aucune-annonce h2 {

        font-size: 25px;

    }

}


/* ===========================================================
   RESPONSIVE — PETIT MOBILE
   =========================================================== */

@media (max-width: 400px) {

    main.mes-annonces-main {

        padding:
            20px
            12px
            40px;

    }


    .mes-annonces-title {

        font-size: 24px;

    }


    .image-container {

        height: 190px;

    }


    .actions {

        grid-template-columns: 1fr;

    }


    .btn-supprimer {

        grid-column: auto;

    }


    .btn-action {

        width: 100%;

    }


    .aucune-annonce h2 {

        font-size: 22px;

    }


    .aucune-annonce p {

        font-size: 14px;

    }

}

/* ==========================================================
   CORRECTION BOUTON MODIFIER
========================================================== */

.btn-edit,
.modifier,
.btn-modifier,
a[data-action="edit"],
button[data-action="edit"] {
    background: #16804b !important;
    color: #ffffff !important;
    border: 1px solid #16804b !important;
}

.btn-edit:hover,
.modifier:hover,
.btn-modifier:hover,
a[data-action="edit"]:hover,
button[data-action="edit"]:hover {
    background: #126b3f !important;
    color: #ffffff !important;
    border-color: #126b3f !important;
}


/* ==========================================================
   KRILIH.MA
   MES ANNONCES
   CARTES IDENTIQUES À L'INDEX
========================================================== */


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

.mes-annonces-grid > *,
.mes-annonces-container > *,
#mes-annonces-container > *,
.annonce-card {

    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.75) !important;

    border-radius:
        22px !important;

    background:
        rgba(255,255,255,.62) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.07),
        inset 0 1px 1px rgba(255,255,255,.88) !important;

    backdrop-filter:
        blur(14px);

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

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


/* ==========================================================
   REFLET SUPÉRIEUR GLASS
========================================================== */

.mes-annonces-grid > *::before,
.mes-annonces-container > *::before,
#mes-annonces-container > *::before,
.annonce-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 45%;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.40),
            transparent
        );

    opacity: .7;

    pointer-events: none;

    z-index: 5;
}


/* ==========================================================
   REFLET LIQUID AU SURVOL
========================================================== */

.mes-annonces-grid > *::after,
.mes-annonces-container > *::after,
#mes-annonces-container > *::after,
.annonce-card::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

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

    transform:
        skewX(-18deg);

    transition:
        left .65s ease;

    pointer-events: none;

    z-index: 6;
}


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

.mes-annonces-grid > *:hover,
.mes-annonces-container > *:hover,
#mes-annonces-container > *:hover,
.annonce-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(255,255,255,.95) !important;

    box-shadow:
        0 24px 48px rgba(0,0,0,.13),
        0 5px 15px rgba(22,163,74,.08) !important;
}


.mes-annonces-grid > *:hover::after,
.mes-annonces-container > *:hover::after,
#mes-annonces-container > *:hover::after,
.annonce-card:hover::after {

    left: 135%;
}


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

.mes-annonces-grid img,
.mes-annonces-container img,
#mes-annonces-container img,
.annonce-card img {

    display: block;

    width: 100%;

    height: 210px;

    object-fit: cover;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}


.mes-annonces-grid > *:hover img,
.mes-annonces-container > *:hover img,
#mes-annonces-container > *:hover img,
.annonce-card:hover img {

    transform:
        scale(1.055);

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


/* ==========================================================
   IMPORTANT :
   CONTENU ET BOUTONS AU-DESSUS DES REFLETS
========================================================== */

.annonce-card > *,
.mes-annonces-grid > * > *,
.mes-annonces-container > * > *,
#mes-annonces-container > * > * {

    position: relative;

    z-index: 7;
}








/* ==========================================================
   KRILIH.MA
   BACKGROUND ANIMÉ — GLASS / LIQUID
========================================================== */

body {

    position: relative;

    min-height: 100vh;

    overflow-x: hidden;

    background:
        linear-gradient(
            135deg,
            #f4faf6 0%,
            #ffffff 45%,
            #fff8f2 100%
        );

}


/* ==========================================================
   COUCHE ANIMÉE
========================================================== */

body::before {

    content: "";

    position: fixed;

    z-index: -2;

    top: -30%;
    left: -20%;

    width: 140%;
    height: 160%;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 25%,
            rgba(22, 163, 74, .18) 0,
            rgba(22, 163, 74, .08) 18%,
            transparent 40%
        ),

        radial-gradient(
            circle at 85% 20%,
            rgba(249, 115, 22, .17) 0,
            rgba(249, 115, 22, .07) 20%,
            transparent 42%
        ),

        radial-gradient(
            circle at 70% 80%,
            rgba(22, 163, 74, .12) 0,
            transparent 38%
        ),

        radial-gradient(
            circle at 25% 85%,
            rgba(249, 115, 22, .10) 0,
            transparent 35%
        );

    filter:
        blur(15px);

    animation:
        krilihBackgroundMove
        18s
        ease-in-out
        infinite alternate;

}


/* ==========================================================
   DEUXIÈME COUCHE LUMINEUSE
========================================================== */

body::after {

    content: "";

    position: fixed;

    z-index: -1;

    width: 550px;
    height: 550px;

    top: 20%;
    right: -180px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(249, 115, 22, .12),
            rgba(249, 115, 22, .04) 45%,
            transparent 70%
        );

    filter:
        blur(35px);

    animation:
        krilihOrbMove
        14s
        ease-in-out
        infinite alternate;

}


/* ==========================================================
   ANIMATION PRINCIPALE
========================================================== */

@keyframes krilihBackgroundMove {

    0% {

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

    }


    35% {

        transform:
            translate3d(
                4%,
                2%,
                0
            )
            scale(1.04);

    }


    70% {

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

    }


    100% {

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

    }

}


/* ==========================================================
   ORBE ORANGE
========================================================== */

@keyframes krilihOrbMove {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);

    }


    50% {

        transform:
            translate3d(
                -150px,
                120px,
                0
            )
            scale(1.15);

    }


    100% {

        transform:
            translate3d(
                -60px,
                280px,
                0
            )
            scale(.92);

    }

}


/* ==========================================================
   CARTES GLASS AU-DESSUS DU BACKGROUND
========================================================== */

.annonce-card {

    background:
        rgba(
            255,
            255,
            255,
            .68
        ) !important;

    backdrop-filter:
        blur(16px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(145%);

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

    box-shadow:
        0 15px 35px
        rgba(
            15,
            50,
            30,
            .08
        );

}


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

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

    body::before,
    body::after {

        animation:
            none !important;

    }

}


/* ==========================================================
   KRILIH.MA
   MES ANNONCES — CARTES GLASS/LIQUID IDENTIQUES À L'INDEX
   CORRECTION FINALE — cible la vraie classe .carte-annonce
   ========================================================== */

.carte-annonce {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .75) !important;
    border-radius: 22px !important;

    background: rgba(255, 255, 255, .62) !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .07),
        inset 0 1px 1px rgba(255, 255, 255, .88) !important;

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

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

/* Reflet supérieur */
.carte-annonce::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 45%;
    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.40),
            transparent
        );

    opacity: .7;
    pointer-events: none;
    z-index: 5;
}

/* Reflet liquide traversant */
.carte-annonce::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;

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

    transform: skewX(-18deg);
    transition: left .65s ease;
    pointer-events: none;
    z-index: 6;
}

.carte-annonce:hover {
    transform: translateY(-9px);
    border-color: rgba(255,255,255,.95) !important;
    background: rgba(255,255,255,.70) !important;

    box-shadow:
        0 24px 48px rgba(0,0,0,.13),
        0 5px 15px rgba(22,163,74,.08) !important;
}

.carte-annonce:hover::after {
    left: 135%;
}

/* Contenu au-dessus des reflets */
.carte-annonce > * {
    position: relative;
    z-index: 7;
}

/* ==========================================================
   IMAGE — MÊME COMPORTEMENT QUE L'INDEX
   ========================================================== */

.image-container {
    position: relative;
    width: 100%;
    height: 210px;
    overflow: hidden;
    background: rgba(255,255,255,.35);
}

.image-annonce {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}

.carte-annonce:hover .image-annonce {
    transform: scale(1.055);
    filter: saturate(1.08) brightness(1.03);
}

/* Conserve le comportement du logo/image par défaut */
.image-annonce[src*="logo2.png"] {
    object-fit: contain;
    padding: 35px;
}

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

.contenu-annonce {
    position: relative;
    z-index: 8;
    padding: 17px;
}

.contenu-annonce h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prix-annonce {
    margin-bottom: 15px;
}

.prix-annonce .prix {
    color: #087f3f;
    font-size: 20px;
    font-weight: 900;
}

.prix-annonce .unite {
    color: var(--text-muted);
    font-size: 13px;
}

.infos-annonce {
    gap: 9px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.infos-annonce span {
    font-size: 13px;
}

/* ==========================================================
   BADGE STATUT GLASS
   ========================================================== */

.badge-statut {
    z-index: 10;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 999px;

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

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================
   ACTIONS
   ========================================================== */

.actions {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    margin-top: 18px;
}

.btn-action {
    position: relative;
    isolation: isolate;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 14px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.55) !important;
    border-radius: 11px;

    color: #fff !important;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

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

.btn-action::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 8%;
    width: 84%;
    height: 40%;
    border-radius: 50%;

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

    pointer-events: none;
}

/* VOIR — ORANGE */
.btn-voir {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            #fb923c,
            #ea580c
        ) !important;

    box-shadow:
        0 7px 17px rgba(249,115,22,.23);
}

.btn-voir:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            #fb923c,
            #ea580c
        ) !important;
}

/* MODIFIER — VERT */
.btn-modifier,
.btn-edit,
.modifier,
a[data-action="edit"],
button[data-action="edit"] {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            #16a34a,
            #087f3f
        ) !important;

    color: #fff !important;
    border-color: rgba(255,255,255,.55) !important;

    box-shadow:
        0 7px 17px rgba(22,163,74,.22);
}

.btn-modifier:hover,
.btn-edit:hover,
.modifier:hover,
a[data-action="edit"]:hover,
button[data-action="edit"]:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            #16a34a,
            #087f3f
        ) !important;

    color: #fff !important;
}

/* SUPPRIMER — ROUGE */
.btn-supprimer {
    grid-column: 1 / -1;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.25),
            rgba(255,255,255,.04)
        ),
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        ) !important;

    box-shadow:
        0 7px 17px rgba(220,38,38,.20);
}

.btn-supprimer:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.25),
            rgba(255,255,255,.04)
        ),
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        ) !important;
}

.btn-action:hover {
    transform: translateY(-2px) scale(1.025);
    opacity: 1;
    filter: brightness(1.06);
}

.btn-action:active {
    transform: translateY(1px) scale(.97);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 600px) {
    .image-container {
        height: 210px;
    }

    .contenu-annonce {
        padding: 17px;
    }
}

@media (max-width: 400px) {
    .image-container {
        height: 190px;
    }

    .actions {
        grid-template-columns: 1fr;
    }

    .btn-supprimer {
        grid-column: auto;
    }

    .btn-action {
        width: 100%;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .carte-annonce,
    .image-annonce,
    .btn-action {
        transition: none !important;
    }
}



/* ==========================================================
   KRILIH.MA — V6.1
   CORRECTION LAYOUT "MES ANNONCES"
   ----------------------------------------------------------
   - Le contenu ne colle plus à la sidebar
   - Une seule annonce ne s'étire plus sur toute la largeur
   - Grille desktop propre et cartes de largeur maîtrisée
   ========================================================== */

main.mes-annonces-main {
    box-sizing: border-box;
}

#listeAnnonces {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(300px, 380px)
        );

    justify-content: start;
    align-items: start;
}

.carte-annonce {
    width: 100%;
    max-width: 380px;
}

@media (max-width: 600px) {

    #listeAnnonces {
        grid-template-columns: 1fr;
    }

    .carte-annonce {
        max-width: none;
    }

}