/* ==========================================================
   KRILIH.MA
   css/index.css
   VERSION V3 — GLASS LIQUID / PREMIUM MARKETPLACE

   - Hero glass
   - Liquid buttons
   - Cartes annonces avancées
   - Glass cards
   - Responsive
   - Compatible index.html actuel
   ========================================================== */


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

.index-page {

    --green:
        #16a34a;

    --green-dark:
        #087f3f;

    --green-deep:
        #065f2e;

    --orange:
        #f97316;

    --orange-dark:
        #ea580c;

    --orange-light:
        #fb923c;

    --text:
        #17211b;

    --soft:
        #64748b;

    --muted:
        #94a3b8;

    --glass:
        rgba(255,255,255,.66);

    --glass-strong:
        rgba(255,255,255,.82);

    --border:
        rgba(255,255,255,.72);

    --shadow:
        0 12px 32px rgba(0,0,0,.08);

    --shadow-lg:
        0 22px 55px rgba(0,0,0,.13);

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


/* ==========================================================
   BASE
   ========================================================== */

.index-page {

    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #f7faf8,
            #f2f6f3
        );

    color:
        var(--text);
}


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

.index-container {

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

    margin-inline:
        auto;
}


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

.index-hero {

    position: relative;

    padding:
        90px 0 85px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(22,163,74,.13),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(249,115,22,.10),
            transparent 32%
        );
}


.index-hero::before {

    content: "";

    position: absolute;

    top: -200px;
    right: -160px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(22,163,74,.08);

    filter:
        blur(80px);

    pointer-events: none;
}


.index-hero::after {

    content: "";

    position: absolute;

    bottom: -180px;
    left: -150px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        rgba(249,115,22,.07);

    filter:
        blur(80px);

    pointer-events: none;
}


.index-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, .78fr);

    align-items: center;

    gap: 70px;
}


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

.index-hero-content {

    max-width:
        690px;
}


.index-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 15px;

    border:
        1px solid rgba(22,163,74,.15);

    border-radius:
        999px;

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

    color:
        var(--green-dark);

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 6px 18px rgba(0,0,0,.05);

    backdrop-filter:
        blur(12px);
}


.index-badge i {

    color:
        var(--orange);
}


.index-hero h1 {

    margin:
        22px 0 18px;

    font-size:
        clamp(42px, 5vw, 68px);

    line-height:
        1.02;

    letter-spacing:
        -2.8px;

    font-weight:
        900;
}


.index-hero h1 span {

    display: block;

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

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.index-hero-content > p {

    max-width:
        620px;

    margin:
        0 0 30px;

    color:
        var(--soft);

    font-size:
        16px;

    line-height:
        1.75;
}


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

.index-search {

    position: relative;

    display: flex;

    align-items: stretch;

    gap: 8px;

    max-width:
        680px;

    padding:
        7px;

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

    border-radius:
        19px;

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

    box-shadow:
        0 16px 35px rgba(0,0,0,.09),
        inset 0 1px 2px rgba(255,255,255,.95);

    backdrop-filter:
        blur(18px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(150%);
}


.index-search-input {

    position: relative;

    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;
}


.index-search-input i {

    position: absolute;

    left:
        17px;

    z-index:
        2;

    color:
        var(--green);

    pointer-events:
        none;
}


.index-search-input input {

    width: 100%;

    height:
        50px;

    padding:
        0 16px 0 47px;

    border:
        1px solid transparent;

    outline: none;

    border-radius:
        14px;

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

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        14px;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.index-search-input input:focus {

    border-color:
        rgba(22,163,74,.16);

    background:
        rgba(255,255,255,.86);
}


.index-search-input input::placeholder {

    color:
        var(--muted);
}


/* ==========================================================
   HERO SEARCH BUTTON
   ========================================================== */

.index-search button {

    position: relative;

    isolation: isolate;

    min-width:
        145px;

    padding:
        0 23px;

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

    border-radius:
        15px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            var(--orange-light),
            var(--orange-dark)
        );

    color:
        white;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 10px 25px rgba(249,115,22,.28);

    transition:
        var(--transition);
}


.index-search button::before {

    content: "";

    position: absolute;

    top:
        2px;

    left:
        8%;

    width:
        84%;

    height:
        45%;

    border-radius:
        50%;

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

    pointer-events:
        none;
}


.index-search button::after {

    content: "";

    position: absolute;

    top:
        -100%;

    left:
        -70%;

    width:
        34%;

    height:
        300%;

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

    transform:
        rotate(20deg);

    transition:
        left .6s ease;

    pointer-events:
        none;
}


.index-search button:hover {

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

    box-shadow:
        0 17px 35px rgba(249,115,22,.38);

    filter:
        brightness(1.07);
}


.index-search button:hover::after {

    left:
        135%;
}


.index-search button:active {

    transform:
        translateY(2px)
        scale(.97);

    box-shadow:
        inset 0 3px 8px rgba(0,0,0,.20);
}


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

.index-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        19px;
}


.index-btn {

    position:
        relative;

    isolation:
        isolate;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        48px;

    padding:
        0 21px;

    overflow:
        hidden;

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

    border-radius:
        15px;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);

    backdrop-filter:
        blur(12px);
}


.index-btn::before {

    content: "";

    position:
        absolute;

    top:
        2px;

    left:
        8%;

    width:
        84%;

    height:
        43%;

    border-radius:
        50%;

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

    pointer-events:
        none;
}


.index-btn::after {

    content: "";

    position:
        absolute;

    top:
        -100%;

    left:
        -70%;

    width:
        34%;

    height:
        300%;

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

    transform:
        rotate(20deg);

    transition:
        left .6s ease;

    pointer-events:
        none;
}


.index-btn:hover {

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

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

    filter:
        brightness(1.05);
}


.index-btn:hover::after {

    left:
        135%;
}


.index-btn:active {

    transform:
        translateY(2px)
        scale(.97);

    box-shadow:
        inset 0 3px 8px rgba(0,0,0,.18);
}


.index-btn-primary {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.28),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

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


.index-btn-secondary {

    color:
        var(--green-dark);

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

    border-color:
        rgba(22,163,74,.16);
}


.index-btn-orange {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            var(--orange-light),
            var(--orange-dark)
        );
}


.index-btn-white {

    color:
        var(--green-dark);

    background:
        rgba(255,255,255,.90);
}


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

.index-hero-visual {

    position:
        relative;

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.index-hero-circle {

    position:
        absolute;

    width:
        370px;

    height:
        370px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(22,163,74,.20),
            rgba(22,163,74,.05) 55%,
            transparent 72%
        );

    filter:
        blur(2px);
}


.index-hero-logo {

    position:
        relative;

    z-index:
        2;

    width:
        min(280px, 65%);

    filter:
        drop-shadow(
            0 28px 35px rgba(0,0,0,.16)
        );
}


/* ==========================================================
   HERO FLOATING CARDS
   ========================================================== */

.index-hero-card {

    position:
        absolute;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 16px;

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

    border-radius:
        17px;

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.12),
        inset 0 1px 1px rgba(255,255,255,.90);

    backdrop-filter:
        blur(17px);

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


.index-hero-card i {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

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

    color:
        white;
}


.index-hero-card strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        13px;
}


.index-hero-card span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--soft);

    font-size:
        11px;
}


.index-hero-card-one {

    top:
        12%;

    left:
        0;
}


.index-hero-card-two {

    right:
        0;

    bottom:
        12%;
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.index-section {

    padding:
        90px 0;
}


.index-section-heading {

    max-width:
        720px;

    margin:
        0 auto 45px;

    text-align:
        center;
}


.index-section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        10px;

    color:
        var(--green);

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;
}


.index-section-heading h2 {

    margin:
        0 0 12px;

    font-size:
        clamp(30px, 4vw, 44px);

    line-height:
        1.08;

    letter-spacing:
        -1.2px;
}


.index-section-heading p {

    margin:
        0;

    color:
        var(--soft);

    line-height:
        1.7;
}


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

.index-category-grid {

    display:
        grid;

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

    gap:
        18px;
}


/* ==========================================================
   CARTES ANNONCES — CONTAINER
   ========================================================== */

.index-annonces-grid {

    display:
        grid;

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

    gap:
        22px;
}


/* ==========================================================
   CARTES ANNONCES GÉNÉRÉES

   Compatible avec différentes structures de cartes
   ========================================================== */

.index-annonces-grid > * {

    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        22px;

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

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

    backdrop-filter:
        blur(14px);

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

    transition:
        var(--transition);
}


.index-annonces-grid > *::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;
}


.index-annonces-grid > *::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;
}


.index-annonces-grid > *:hover {

    transform:
        translateY(-9px);

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

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


.index-annonces-grid > *:hover::after {

    left:
        135%;
}


/* ==========================================================
   IMAGES DES CARTES

   Plusieurs sélecteurs pour rester compatible
   avec la génération actuelle de ui.js / index.js
   ========================================================== */

.index-annonces-grid img {

    display:
        block;

    width:
        100%;

    height:
        210px;

    object-fit:
        cover;

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


.index-annonces-grid > *:hover img {

    transform:
        scale(1.055);

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


/* ==========================================================
   ZONE CONTENU CARTE
   ========================================================== */

.index-annonces-grid > * .card-content,
.index-annonces-grid > * .annonce-content,
.index-annonces-grid > * .card-body,
.index-annonces-grid > * .annonce-info {

    padding:
        17px;
}


/* ==========================================================
   TITRES
   ========================================================== */

.index-annonces-grid > * h3,
.index-annonces-grid > * h4 {

    margin:
        0 0 8px;

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        850;

    line-height:
        1.3;
}


/* ==========================================================
   TEXTES
   ========================================================== */

.index-annonces-grid > * p {

    color:
        var(--soft);

    font-size:
        12px;

    line-height:
        1.6;
}


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

.index-annonces-grid > * .price,
.index-annonces-grid > * .prix,
.index-annonces-grid > * [class*="price"],
.index-annonces-grid > * [class*="prix"] {

    color:
        var(--green-dark);

    font-size:
        18px;

    font-weight:
        900;
}


/* ==========================================================
   BOUTONS DES CARTES

   Liquid Glass
   ========================================================== */

.index-annonces-grid > * button,
.index-annonces-grid > * .btn,
.index-annonces-grid > * a.btn {

    position:
        relative;

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 14px;

    overflow:
        hidden;

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

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.05)
        ),
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

    color:
        white;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;

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

    transition:
        var(--transition);
}


.index-annonces-grid > * button::before,
.index-annonces-grid > * .btn::before,
.index-annonces-grid > * a.btn::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;
}


.index-annonces-grid > * button:hover,
.index-annonces-grid > * .btn:hover,
.index-annonces-grid > * a.btn:hover {

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

    box-shadow:
        0 11px 24px rgba(22,163,74,.28);

    filter:
        brightness(1.06);
}


.index-annonces-grid > * button:active,
.index-annonces-grid > * .btn:active,
.index-annonces-grid > * a.btn:active {

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


/* ==========================================================
   FAVORI
   ========================================================== */

.index-annonces-grid > * .favorite,
.index-annonces-grid > * .favori,
.index-annonces-grid > * [class*="favorite"],
.index-annonces-grid > * [class*="favori"] {

    border-radius:
        50%;

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

    color:
        var(--orange);

    box-shadow:
        0 8px 20px rgba(0,0,0,.10);
}


/* ==========================================================
   LOCATION / LOCALISATION
   ========================================================== */

.index-annonces-grid > * [class*="location"],
.index-annonces-grid > * [class*="localisation"] {

    color:
        var(--soft);

    font-size:
        11px;
}


/* ==========================================================
   STATS
   ========================================================== */

.index-stats {

    padding:
        65px 0;

    background:
        linear-gradient(
            135deg,
            var(--green-deep),
            var(--green)
        );
}


.index-stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        15px;
}


.index-stat {

    position:
        relative;

    padding:
        24px 15px;

    text-align:
        center;

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

    border-radius:
        18px;

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

    backdrop-filter:
        blur(10px);
}


.index-stat i {

    margin-bottom:
        10px;

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

    font-size:
        21px;
}


.index-stat strong {

    display:
        block;

    color:
        white;

    font-size:
        27px;

    font-weight:
        900;
}


.index-stat span {

    display:
        block;

    margin-top:
        5px;

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

    font-size:
        11px;
}


/* ==========================================================
   WHY
   ========================================================== */

.index-why-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        20px;
}


.index-feature-card {

    position:
        relative;

    padding:
        28px;

    overflow:
        hidden;

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

    border-radius:
        22px;

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(15px);

    transition:
        var(--transition);
}


.index-feature-card:hover {

    transform:
        translateY(-7px);

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


.index-feature-icon {

    width:
        51px;

    height:
        51px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    border-radius:
        15px;

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

    color:
        white;

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


.index-feature-icon.orange {

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

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


.index-feature-card h3 {

    margin:
        0 0 10px;

    font-size:
        17px;
}


.index-feature-card p {

    margin:
        0;

    color:
        var(--soft);

    font-size:
        13px;

    line-height:
        1.7;
}


/* ==========================================================
   STEPS
   ========================================================== */

.index-steps {

    display:
        grid;

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

    gap:
        22px;
}


.index-step {

    position:
        relative;

    padding:
        32px;

    text-align:
        center;

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

    border-radius:
        22px;

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(14px);

    transition:
        var(--transition);
}


.index-step:hover {

    transform:
        translateY(-6px);

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


.index-step-number {

    position:
        absolute;

    top:
        15px;

    right:
        20px;

    color:
        rgba(22,163,74,.13);

    font-size:
        30px;

    font-weight:
        900;
}


.index-step-icon {

    width:
        65px;

    height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        10px auto 20px;

    border-radius:
        20px;

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

    color:
        white;

    font-size:
        22px;

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


/* ==========================================================
   APP
   ========================================================== */

.index-app {

    padding:
        80px 0;

    background:
        linear-gradient(
            135deg,
            rgba(22,163,74,.07),
            rgba(249,115,22,.06)
        );
}


.index-app-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        60px;
}


.index-app-label {

    color:
        var(--orange);

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.index-app-content h2 {

    margin:
        9px 0 13px;

    font-size:
        clamp(30px,4vw,44px);
}


.index-app-content p {

    max-width:
        550px;

    color:
        var(--soft);

    line-height:
        1.7;
}


.index-store-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        25px;
}


.index-store {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-width:
        165px;

    padding:
        13px 17px;

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

    border-radius:
        15px;

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(12px);
}


.index-store i {

    font-size:
        25px;

    color:
        var(--text);
}


.index-store small,
.index-store strong {

    display:
        block;
}


.index-store small {

    color:
        var(--soft);

    font-size:
        10px;
}


.index-store strong {

    font-size:
        14px;
}


.index-store.disabled {

    opacity:
        .70;
}


.index-app-image {

    display:
        flex;

    justify-content:
        center;
}


.index-app-image img {

    width:
        100%;

    max-width:
        330px;

    filter:
        drop-shadow(
            0 25px 35px rgba(0,0,0,.15)
        );
}


/* ==========================================================
   TESTIMONIALS
   ========================================================== */

.index-testimonial-grid {

    display:
        grid;

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

    gap:
        20px;
}


.index-testimonial {

    padding:
        28px;

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

    border-radius:
        22px;

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

    box-shadow:
        var(--shadow);

    backdrop-filter:
        blur(14px);

    transition:
        var(--transition);
}


.index-testimonial:hover {

    transform:
        translateY(-5px);

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


.index-stars {

    margin-bottom:
        14px;

    color:
        var(--orange);

    letter-spacing:
        2px;
}


.index-testimonial p {

    margin:
        0 0 18px;

    color:
        #475569;

    line-height:
        1.7;

    font-size:
        13px;
}


.index-testimonial strong {

    display:
        block;

    font-size:
        14px;
}


.index-testimonial span {

    color:
        var(--muted);

    font-size:
        11px;
}


/* ==========================================================
   CTA
   ========================================================== */

.index-cta {

    padding:
        75px 0;
}


.index-cta-box {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    padding:
        42px;

    overflow:
        hidden;

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

    border-radius:
        28px;

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

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


.index-cta-box::before {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    top:
        -220px;

    right:
        -100px;

    border-radius:
        50%;

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

    filter:
        blur(5px);
}


.index-cta-box > * {

    position:
        relative;

    z-index:
        2;
}


.index-cta-box span {

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

    font-size:
        12px;

    font-weight:
        900;
}


.index-cta-box h2 {

    margin:
        8px 0 10px;

    color:
        white;

    font-size:
        clamp(25px,3vw,38px);
}


.index-cta-box p {

    max-width:
        600px;

    margin:
        0;

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

    line-height:
        1.65;
}


.index-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    flex-shrink:
        0;
}


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

.index-footer {

    padding:
        60px 0 25px;

    background:
        #102b1d;

    color:
        white;
}


.index-footer-grid {

    display:
        grid;

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

    gap:
        40px;
}


.index-footer h3 {

    margin:
        0 0 10px;

    font-size:
        20px;
}


.index-footer h4 {

    margin:
        0 0 14px;

    color:
        white;

    font-size:
        13px;
}


.index-footer p {

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

    font-size:
        12px;

    line-height:
        1.7;
}


.index-footer a {

    display:
        block;

    margin-bottom:
        9px;

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

    font-size:
        12px;

    text-decoration:
        none;

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


.index-footer a:hover {

    color:
        white;

    transform:
        translateX(3px);
}


.index-footer-social {

    display:
        flex;

    gap:
        8px;

    margin-top:
        17px;
}


.index-footer-social a {

    width:
        40px;

    height:
        40px;

    margin:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        12px;

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

    color:
        white;

    transition:
        var(--transition);
}


.index-footer-social a:hover {

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

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

    color:
        white;
}


.index-footer-bottom {

    margin-top:
        40px;

    padding-top:
        20px;

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

    text-align:
        center;

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

    font-size:
        11px;
}


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

.index-loading {

    min-height:
        120px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        var(--soft);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .index-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .index-hero-content {

        max-width:
            800px;

        margin-inline:
            auto;

        text-align:
            center;
    }


    .index-hero-content > p {

        margin-inline:
            auto;
    }


    .index-search {

        margin-inline:
            auto;
    }


    .index-hero-actions {

        justify-content:
            center;
    }


    .index-category-grid,
    .index-annonces-grid {

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


    .index-why-grid {

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


    .index-app-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .index-app-content p {

        margin-inline:
            auto;
    }


    .index-store-buttons {

        justify-content:
            center;
    }


    .index-testimonial-grid {

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


    .index-cta-box {

        flex-direction:
            column;

        text-align:
            center;
    }


    .index-cta-actions {

        justify-content:
            center;
    }
}


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

@media (max-width: 650px) {

    .index-container {

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


    .index-hero {

        padding:
            55px 0;
    }


    .index-hero h1 {

        font-size:
            39px;

        letter-spacing:
            -1.6px;
    }


    .index-hero-content > p {

        font-size:
            14px;
    }


    .index-search {

        flex-direction:
            column;
    }


    .index-search-input input {

        height:
            48px;
    }


    .index-search button {

        width:
            100%;

        min-height:
            48px;
    }


    .index-hero-actions {

        flex-direction:
            column;

        width:
            100%;
    }


    .index-hero-actions .index-btn {

        width:
            100%;
    }


    .index-hero-visual {

        min-height:
            330px;
    }


    .index-hero-circle {

        width:
            270px;

        height:
            270px;
    }


    .index-hero-card {

        transform:
            scale(.82);
    }


    .index-hero-card-one {

        left:
            -15px;
    }


    .index-hero-card-two {

        right:
            -15px;
    }


    .index-section {

        padding:
            65px 0;
    }


    .index-category-grid,
    .index-annonces-grid,
    .index-why-grid,
    .index-steps,
    .index-testimonial-grid {

        grid-template-columns:
            1fr;
    }


    .index-stats-grid {

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


    .index-app {

        padding:
            60px 0;
    }


    .index-cta-box {

        padding:
            30px 21px;
    }


    .index-cta-actions {

        width:
            100%;

        flex-direction:
            column;
    }


    .index-cta-actions .index-btn {

        width:
            100%;
    }


    .index-footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            30px;
    }
}


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

@media (max-width: 430px) {

    .index-stats-grid {

        grid-template-columns:
            1fr;
    }


    .index-footer-grid {

        grid-template-columns:
            1fr;
    }


    .index-store-buttons {

        flex-direction:
            column;
    }


    .index-store {

        width:
            100%;
    }
}


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

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

    .index-btn,
    .index-search button,
    .index-feature-card,
    .index-step,
    .index-testimonial,
    .index-annonces-grid > *,
    .index-annonces-grid img {

        transition:
            none !important;
    }
}

/* ==========================================================
   KRILIH.MA — CARTES ANNONCES PARTAGÉES
   INDEX + MES ANNONCES
   Ajout : style Glass/Liquid commun
========================================================== */

.index-annonces-grid > *,
.mes-annonces-grid > *,
#mes-annonces-container > *,
.annonce-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 22px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 12px 30px rgba(0,0,0,.07), inset 0 1px 1px rgba(255,255,255,.88);
    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;
}

.index-annonces-grid > *::before,
.mes-annonces-grid > *::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;
}

.index-annonces-grid > *::after,
.mes-annonces-grid > *::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;
}

.index-annonces-grid > *:hover,
.mes-annonces-grid > *:hover,
#mes-annonces-container > *:hover,
.annonce-card:hover {
    transform: translateY(-9px);
    border-color: rgba(255,255,255,.95);
    background: rgba(255,255,255,.70);
    box-shadow: 0 24px 48px rgba(0,0,0,.13), 0 5px 15px rgba(22,163,74,.08);
}

.index-annonces-grid > *:hover::after,
.mes-annonces-grid > *:hover::after,
#mes-annonces-container > *:hover::after,
.annonce-card:hover::after { left: 135%; }

.index-annonces-grid img,
.mes-annonces-grid 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;
}

.index-annonces-grid > *:hover img,
.mes-annonces-grid > *:hover img,
#mes-annonces-container > *:hover img,
.annonce-card:hover img {
    transform: scale(1.055);
    filter: saturate(1.08) brightness(1.03);
}

.index-annonces-grid .card-content,
.index-annonces-grid .annonce-content,
.index-annonces-grid .card-body,
.index-annonces-grid .annonce-info,
.mes-annonces-grid .card-content,
.mes-annonces-grid .annonce-content,
.mes-annonces-grid .card-body,
.mes-annonces-grid .annonce-info,
#mes-annonces-container .card-content,
#mes-annonces-container .annonce-content,
#mes-annonces-container .card-body,
#mes-annonces-container .annonce-info,
.annonce-card .card-content,
.annonce-card .annonce-content,
.annonce-card .card-body,
.annonce-card .annonce-info {
    position: relative;
    z-index: 10;
    padding: 17px;
}

.index-annonces-grid h3, .index-annonces-grid h4,
.mes-annonces-grid h3, .mes-annonces-grid h4,
#mes-annonces-container h3, #mes-annonces-container h4,
.annonce-card h3, .annonce-card h4 {
    margin: 0 0 8px;
    color: #17211b;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.3;
}

.index-annonces-grid p,
.mes-annonces-grid p,
#mes-annonces-container p,
.annonce-card p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.index-annonces-grid .price, .index-annonces-grid .prix,
.index-annonces-grid [class*="price"], .index-annonces-grid [class*="prix"],
.mes-annonces-grid .price, .mes-annonces-grid .prix,
.mes-annonces-grid [class*="price"], .mes-annonces-grid [class*="prix"],
#mes-annonces-container .price, #mes-annonces-container .prix,
#mes-annonces-container [class*="price"], #mes-annonces-container [class*="prix"] {
    color: #087f3f;
    font-size: 18px;
    font-weight: 900;
}

.index-annonces-grid .card-actions, .index-annonces-grid .annonce-actions,
.mes-annonces-grid .card-actions, .mes-annonces-grid .annonce-actions,
#mes-annonces-container .card-actions, #mes-annonces-container .annonce-actions {
    position: relative;
    z-index: 10;
}

.index-annonces-grid button, .index-annonces-grid .btn, .index-annonces-grid a.btn,
.mes-annonces-grid button, .mes-annonces-grid .btn, .mes-annonces-grid a.btn,
#mes-annonces-container button, #mes-annonces-container .btn, #mes-annonces-container a.btn {
    position: relative;
    z-index: 10;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 11px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-view, .btn-voir {
    color: #fff !important;
    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-edit, .btn-modifier, .modifier {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.05)), linear-gradient(135deg, #16a34a, #087f3f) !important;
    box-shadow: 0 7px 17px rgba(22,163,74,.22);
}

.btn-delete, .btn-supprimer, .supprimer {
    color: #fff !important;
    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);
}

.index-annonces-grid button:hover, .index-annonces-grid .btn:hover,
.mes-annonces-grid button:hover, .mes-annonces-grid .btn:hover,
#mes-annonces-container button:hover, #mes-annonces-container .btn:hover {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.06);
}

@media (max-width: 650px) {
    .index-annonces-grid,
    .mes-annonces-grid,
    #mes-annonces-container { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .index-annonces-grid > *, .mes-annonces-grid > *, #mes-annonces-container > *, .annonce-card,
    .index-annonces-grid img, .mes-annonces-grid img, #mes-annonces-container img {
        transition: none !important;
    }
}


/* ==========================================================
   KRILIH.MA
   INDEX — ANIMATION CARTES ANNONCES RENFORCÉE
========================================================== */

.index-annonces-grid > * {
    position: relative;
    overflow: hidden;

    transform:
        translateY(0)
        scale(1);

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


/* ==========================================================
   REFLET LIQUID
========================================================== */

.index-annonces-grid > *::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.05) 30%,
            rgba(255,255,255,.55) 50%,
            rgba(255,255,255,.08) 70%,
            transparent 100%
        );

    transform:
        skewX(-20deg);

    transition:
        left .75s cubic-bezier(.2,.8,.2,1);

    pointer-events:
        none;

    z-index:
        20;
}


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

.index-annonces-grid > *:hover {

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

    border-color:
        rgba(22,163,74,.28);

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

    box-shadow:
        0 28px 55px rgba(0,0,0,.14),
        0 10px 30px rgba(22,163,74,.10);
}


/* ==========================================================
   DÉPLACEMENT DU REFLET
========================================================== */

.index-annonces-grid > *:hover::after {

    left:
        140%;
}


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

.index-annonces-grid > * img {

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


.index-annonces-grid > *:hover img {

    transform:
        scale(1.08);

    filter:
        saturate(1.10)
        brightness(1.05);
}


/* ==========================================================
   PETIT EFFET SUR LE CONTENU
========================================================== */

.index-annonces-grid > * .card-content,
.index-annonces-grid > * .annonce-content,
.index-annonces-grid > * .card-body,
.index-annonces-grid > * .annonce-info {

    position:
        relative;

    z-index:
        10;

    transition:
        transform .35s ease;
}


.index-annonces-grid > *:hover .card-content,
.index-annonces-grid > *:hover .annonce-content,
.index-annonces-grid > *:hover .card-body,
.index-annonces-grid > *:hover .annonce-info {

    transform:
        translateY(-2px);
}


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

.index-annonces-grid > * button,
.index-annonces-grid > * .btn,
.index-annonces-grid > * a.btn {

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


.index-annonces-grid > * button:hover,
.index-annonces-grid > * .btn:hover,
.index-annonces-grid > * a.btn:hover {

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

    filter:
        brightness(1.08);
}


/* ==========================================================
   KRILIH.MA
   INDEX — CARTES ANNONCES EN MOUVEMENT PERMANENT
   Animation premium très légère + hover conservé
   ========================================================== */

/*
   "translate" est utilisé séparément de "transform".
   Ainsi l'animation permanente ne casse pas le zoom/hover
   déjà présent sur les cartes.
*/
.index-annonces-grid > * {
    will-change: translate, box-shadow;
    animation:
        krilihCardFloat 6.8s ease-in-out infinite;
}

/* Décalage volontaire : les cartes ne bougent pas toutes ensemble */
.index-annonces-grid > *:nth-child(2n) {
    animation-delay: -1.7s;
}

.index-annonces-grid > *:nth-child(3n) {
    animation-delay: -3.4s;
}

.index-annonces-grid > *:nth-child(4n) {
    animation-delay: -5.1s;
}


/* ==========================================================
   FLOTTEMENT TRÈS LÉGER
   ========================================================== */

@keyframes krilihCardFloat {

    0%,
    100% {
        translate: 0 0;

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

    50% {
        translate: 0 -4px;

        box-shadow:
            0 17px 36px rgba(0,0,0,.09),
            0 5px 18px rgba(22,163,74,.035),
            inset 0 1px 1px rgba(255,255,255,.92);
    }
}


/* ==========================================================
   LUEUR INTERNE RESPIRANTE
   ========================================================== */

.index-annonces-grid > *::before {
    animation:
        krilihCardGlow 5.8s ease-in-out infinite;
}

.index-annonces-grid > *:nth-child(2n)::before {
    animation-delay: -1.4s;
}

.index-annonces-grid > *:nth-child(3n)::before {
    animation-delay: -2.8s;
}

@keyframes krilihCardGlow {

    0%,
    100% {
        opacity: .48;
        transform: translateY(-3px) scale(.98);
    }

    50% {
        opacity: .80;
        transform: translateY(3px) scale(1.035);
    }
}


/* ==========================================================
   REFLET LIQUID AUTOMATIQUE
   ========================================================== */

.index-annonces-grid > *::after {
    left: -125%;

    animation:
        krilihCardShine 9s ease-in-out infinite;
}

.index-annonces-grid > *:nth-child(2n)::after {
    animation-delay: -2.25s;
}

.index-annonces-grid > *:nth-child(3n)::after {
    animation-delay: -4.5s;
}

.index-annonces-grid > *:nth-child(4n)::after {
    animation-delay: -6.75s;
}

@keyframes krilihCardShine {

    0%,
    28% {
        left: -125%;
        opacity: 0;
    }

    36% {
        opacity: .55;
    }

    52% {
        left: 140%;
        opacity: .22;
    }

    53%,
    100% {
        left: 140%;
        opacity: 0;
    }
}


/* ==========================================================
   HOVER — PLUS PRONONCÉ
   ========================================================== */

.index-annonces-grid > *:hover {
    translate: 0 -2px;

    transform:
        translateY(-8px)
        scale(1.022);

    border-color:
        rgba(22,163,74,.22);

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

    box-shadow:
        0 28px 55px rgba(0,0,0,.14),
        0 10px 28px rgba(22,163,74,.10),
        inset 0 1px 1px rgba(255,255,255,.95);
}


/* L'image reste calme en permanence et réagit au survol */
.index-annonces-grid > * img {
    transform: scale(1);
}

.index-annonces-grid > *:hover img {
    transform: scale(1.075);
    filter:
        saturate(1.10)
        brightness(1.045);
}


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

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

    .index-annonces-grid > *,
    .index-annonces-grid > *::before,
    .index-annonces-grid > *::after {
        animation: none !important;
        translate: none !important;
    }
}