/* ==========================================================================
   Page d'accueil SmartImmo (préfixe .sh-)
   ========================================================================== */
:root{
    --sh-brand:#dc3545;
    --sh-brand-dark:#b02a37;
    --sh-brand-soft:#fdecee;
    --sh-ink:#1f2328;
    --sh-muted:#5f6670;
    --sh-line:#e7e9ee;
    --sh-soft:#f7f7f9;
    --sh-radius:16px;
    --sh-shadow:0 10px 30px rgba(17,24,39,.08);
}

/* ---------- Hero ---------- */
.sh-hero{
    padding:2.5rem 0 3rem;
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(220,53,69,.07), transparent 60%),
        radial-gradient(700px 360px at 0% 100%, rgba(59,130,246,.05), transparent 60%);
}
.sh-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .8rem;
    border-radius:999px;
    background:var(--sh-brand-soft);
    color:var(--sh-brand-dark);
    font-size:.82rem;
    font-weight:600;
    margin-bottom:1rem;
}
.sh-eyebrow--light{ background:rgba(255,255,255,.12); color:#fff; }
.sh-hero__title{
    color:var(--sh-ink);
    font-size:clamp(1.9rem, 4vw, 3rem);
    line-height:1.12;
    letter-spacing:-.025em;
    font-weight:700;
    margin-bottom:.9rem;
}
.sh-hero__title .hero-accent,
.sh-accent{ color:var(--sh-brand); }
.sh-hero__subtitle{
    color:var(--sh-muted);
    font-size:1.075rem;
    max-width:560px;
    margin-bottom:1.6rem;
}

/* ---------- Recherche ---------- */
.sh-search{
    background:#fff;
    border:1px solid var(--sh-line);
    border-radius:20px;
    box-shadow:var(--sh-shadow);
    padding:.6rem;
    max-width:760px;
}
.sh-search__tabs{
    display:flex;
    gap:.35rem;
    padding:.15rem .15rem .6rem;
    overflow-x:auto;
    scrollbar-width:none;
}
.sh-search__tabs::-webkit-scrollbar{ display:none; }
.sh-search__tab{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    flex:0 0 auto;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--sh-muted);
    font-weight:600;
    font-size:.92rem;
    padding:.5rem .95rem;
    transition:background .15s, color .15s;
}
.sh-search__tab:hover{ background:var(--sh-soft); color:var(--sh-ink); }
.sh-search__tab.is-active{ background:var(--sh-ink); color:#fff; }
.sh-search__form{
    display:grid;
    grid-template-columns:1.1fr 1.1fr 1fr 1fr auto;
    gap:.4rem;
    align-items:stretch;
}
.sh-field{
    display:flex;
    flex-direction:column;
    min-width:0;
    margin:0;
    padding:.5rem .8rem;
    border-radius:12px;
    background:var(--sh-soft);
    cursor:pointer;
    transition:box-shadow .15s;
}
.sh-field:focus-within{ box-shadow:0 0 0 2px var(--sh-brand); background:#fff; }
.sh-field__label{
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--sh-ink);
}
.sh-field__control{
    border:0;
    background:transparent;
    padding:0;
    color:var(--sh-muted);
    font-size:.93rem;
    width:100%;
    outline:none;
    cursor:pointer;
    text-overflow:ellipsis;
}
.sh-search__submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    border:0;
    border-radius:12px;
    background:var(--sh-brand);
    color:#fff;
    font-weight:700;
    padding:0 1.4rem;
    min-height:3.2rem;
    transition:background .15s, transform .15s;
}
.sh-search__submit:hover{ background:var(--sh-brand-dark); }
.sh-search__submit:active{ transform:scale(.98); }
.sh-search__submit .mdi{ font-size:1.25rem; }

.sh-quick{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.45rem;
    margin-top:1rem;
    font-size:.88rem;
}
.sh-quick__label{ color:var(--sh-muted); margin-right:.15rem; }
.sh-quick a{
    padding:.3rem .75rem;
    border:1px solid var(--sh-line);
    border-radius:999px;
    background:#fff;
    color:var(--sh-ink);
    text-decoration:none;
    transition:border-color .15s, color .15s;
}
.sh-quick a:hover{ border-color:var(--sh-brand); color:var(--sh-brand); }


/* Cartes flottantes (styles de base dans home-style.css) */
.hero-showcase .hero-property-card{
    transition:opacity .8s ease, visibility 0s linear .8s, box-shadow .22s ease;
}
.hero-showcase .hero-property-card.is-active{
    transition:opacity .8s ease, box-shadow .22s ease;
}

/* ---------- Sections ---------- */
.sh-section{ padding:3.5rem 0; }
.sh-section--tight{ padding:1.5rem 0 0; }
.sh-section--soft{ background:var(--sh-soft); }
.sh-section--last{ padding-bottom:4.5rem; }
.sh-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.6rem;
}
.sh-head--center{ justify-content:center; text-align:center; }
.sh-head__title{
    font-size:clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--sh-ink);
    margin-bottom:.35rem;
}
.sh-head__subtitle{ color:var(--sh-muted); margin:0; max-width:620px; }
.sh-head--center .sh-head__subtitle{ margin:0 auto; }
.sh-link{
    flex:0 0 auto;
    color:var(--sh-ink);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:3px;
}
.sh-link:hover{ color:var(--sh-brand); }

/* Boutons */
.sh-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.75rem 1.4rem;
    border-radius:12px;
    font-weight:700;
    text-decoration:none;
    border:1px solid transparent;
    transition:background .15s, color .15s, border-color .15s;
}
.sh-btn--primary{ background:var(--sh-brand); color:#fff; }
.sh-btn--primary:hover{ background:var(--sh-brand-dark); color:#fff; }
.sh-btn--outline{ border-color:var(--sh-ink); color:var(--sh-ink); background:#fff; }
.sh-btn--outline:hover{ background:var(--sh-ink); color:#fff; }
.sh-btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.sh-btn--ghost:hover{ background:#fff; color:var(--sh-ink); }

/* ---------- Réservations à reprendre ---------- */
.sh-resume{
    border:1px solid #f5c2c7;
    background:var(--sh-brand-soft);
    border-radius:var(--sh-radius);
    padding:1rem 1.1rem;
}
.sh-resume__head{ display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.8rem; }
.sh-resume__head > .mdi{ font-size:1.6rem; color:var(--sh-brand); line-height:1; }
.sh-resume__head h2{ font-size:1.05rem; font-weight:700; margin:0; }
.sh-resume__head p{ margin:0; font-size:.88rem; color:var(--sh-muted); }
.sh-resume__list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.6rem; }
.sh-resume__item{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.55rem;
    border-radius:12px;
    background:#fff;
    color:var(--sh-ink);
    text-decoration:none;
}
.sh-resume__item img{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.sh-resume__item > span:nth-of-type(1){ display:flex; flex-direction:column; min-width:0; flex:1; }
.sh-resume__item strong{ font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-resume__item small{ color:var(--sh-muted); }
.sh-resume__cta{ font-size:.82rem; font-weight:700; color:var(--sh-brand); }

/* ---------- Catégories ---------- */
.sh-cats{
    display:grid;
    grid-template-columns:repeat(8, minmax(0, 1fr));
    gap:.75rem;
}
.sh-cat{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.15rem;
    padding:1rem;
    border:1px solid var(--sh-line);
    border-radius:var(--sh-radius);
    background:#fff;
    color:var(--sh-ink);
    text-decoration:none;
    transition:border-color .15s, box-shadow .15s, transform .15s;
}
.sh-cat:hover{ border-color:var(--sh-ink); box-shadow:var(--sh-shadow); transform:translateY(-2px); color:var(--sh-ink); }
.sh-cat__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    margin-bottom:.5rem;
    border-radius:12px;
    background:var(--sh-soft);
    font-size:1.35rem;
}
.sh-cat strong{ font-size:.92rem; }
.sh-cat--accent .sh-cat__icon{ background:var(--sh-brand-soft); color:var(--sh-brand); }

/* ---------- Cartes annonces ---------- */
.sh-grid{
    --sh-row-visible:4;
    --sh-row-gap:1.25rem;
    display:flex;
    gap:var(--sh-row-gap);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.sh-grid::-webkit-scrollbar{ display:none; }
.sh-grid > .sh-card{
    flex:0 0 calc((100% - (var(--sh-row-visible) - 1) * var(--sh-row-gap)) / var(--sh-row-visible));
    scroll-snap-align:start;
}
.sh-head__actions{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.sh-head__actions .sh-link{ margin-right:.5rem; }
.sh-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.25rem;
    height:2.25rem;
    border:1px solid var(--sh-line);
    border-radius:50%;
    background:#fff;
    color:var(--sh-ink);
    font-size:1.3rem;
    transition:border-color .15s, opacity .15s;
}
.sh-arrow:hover{ border-color:var(--sh-ink); }
.sh-arrow:disabled{ opacity:.35; cursor:default; border-color:var(--sh-line); }
.sh-card{
    display:flex;
    flex-direction:column;
    color:var(--sh-ink);
    text-decoration:none;
}
.sh-card:hover{ color:var(--sh-ink); }
.sh-card__media{
    position:relative;
    aspect-ratio:4 / 3;
    overflow:hidden;
    border-radius:var(--sh-radius);
    background:var(--sh-soft);
}
.sh-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.sh-card:hover .sh-card__media img{ transform:scale(1.05); }
.sh-card__media .sh-card__placeholder{ object-fit:contain; padding:2rem; opacity:.25; }
.sh-card__badge{
    position:absolute;
    top:.7rem;
    left:.7rem;
    padding:.25rem .6rem;
    border-radius:999px;
    background:#fff;
    font-size:.75rem;
    font-weight:700;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.sh-card__badge--sale{ background:var(--sh-brand); color:#fff; }
.sh-card__body{ padding:.75rem .1rem 0; }
.sh-card__price{ margin:0 0 .15rem; font-size:1.05rem; }
.sh-card__price span{ color:var(--sh-muted); font-size:.85rem; }
.sh-card__title{
    font-size:.95rem;
    font-weight:600;
    margin:0 0 .2rem;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.sh-card__loc{ margin:0 0 .4rem; color:var(--sh-muted); font-size:.87rem; }
.sh-card__facts{
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
    list-style:none;
    margin:0;
    padding:0;
}
.sh-card__facts li{
    padding:.15rem .5rem;
    border-radius:6px;
    background:var(--sh-soft);
    font-size:.77rem;
    color:var(--sh-muted);
}

/* ---------- Villes & communes ---------- */
.sh-cities{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:.75rem;
}
.sh-city{
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:1rem;
    border-radius:var(--sh-radius);
    background:#fff;
    color:var(--sh-ink);
    text-decoration:none;
    border:1px solid transparent;
    transition:border-color .15s, box-shadow .15s;
}
.sh-city:hover{ border-color:var(--sh-line); box-shadow:var(--sh-shadow); color:var(--sh-ink); }
.sh-city > span:nth-of-type(2){ display:flex; flex-direction:column; flex:1; min-width:0; }
.sh-city small{ color:var(--sh-muted); }
.sh-city__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.75rem;
    height:2.75rem;
    border-radius:12px;
    background:var(--sh-brand-soft);
    color:var(--sh-brand);
    font-size:1.35rem;
    flex:0 0 auto;
}
.sh-city__arrow{ color:var(--sh-muted); font-size:1.3rem; }
.sh-communes{ margin-top:2rem; }
.sh-communes h3{ font-size:1rem; font-weight:700; margin-bottom:.75rem; }
.sh-communes__links{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sh-communes__links a{
    padding:.45rem .9rem;
    border-radius:999px;
    border:1px solid var(--sh-line);
    background:#fff;
    color:var(--sh-ink);
    font-size:.88rem;
    text-decoration:none;
}
.sh-communes__links a:hover{ border-color:var(--sh-brand); color:var(--sh-brand); }

/* ---------- Étapes ---------- */
.sh-steps{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.25rem;
    list-style:none;
    padding:0;
    margin:0 0 2rem;
    counter-reset:sh-step;
}
.sh-step{
    position:relative;
    padding:1.5rem;
    border:1px solid var(--sh-line);
    border-radius:var(--sh-radius);
    background:#fff;
    counter-increment:sh-step;
}
.sh-step::after{
    content:counter(sh-step);
    position:absolute;
    top:1.1rem;
    right:1.3rem;
    font-size:2.4rem;
    font-weight:800;
    line-height:1;
    color:var(--sh-soft);
}
.sh-step__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:3rem;
    height:3rem;
    margin-bottom:.9rem;
    border-radius:14px;
    background:var(--sh-brand-soft);
    color:var(--sh-brand);
    font-size:1.5rem;
}
.sh-step h3{ font-size:1.05rem; font-weight:700; margin-bottom:.35rem; }
.sh-step p{ color:var(--sh-muted); margin:0; font-size:.93rem; }

.sh-alert-cta{
    display:flex;
    align-items:center;
    gap:1.25rem;
    padding:1.4rem 1.6rem;
    border-radius:20px;
    background:var(--sh-ink);
    color:#fff;
}
.sh-alert-cta__icon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:3.25rem;
    height:3.25rem;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    font-size:1.6rem;
}
.sh-alert-cta__copy{ flex:1; }
.sh-alert-cta h3{ font-size:1.15rem; font-weight:700; margin-bottom:.2rem; }
.sh-alert-cta p{ margin:0; color:rgba(255,255,255,.75); font-size:.93rem; }
.sh-alert-cta .sh-btn{ flex:0 0 auto; }

/* ---------- Agents ---------- */
/* Ligne défilante : la piste contient la liste en double et glisse de -50% en boucle */
.sh-agents{
    overflow:hidden;
    padding:.35rem 0;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sh-agents__track{
    display:flex;
    width:max-content;
    animation:sh-agents-marquee calc(var(--sh-agents-count, 8) * 4s) linear infinite;
}
.sh-agents:hover .sh-agents__track,
.sh-agents:focus-within .sh-agents__track{ animation-play-state:paused; }
@keyframes sh-agents-marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}
.sh-agent{
    flex:0 0 280px;
    margin-right:.75rem; /* marge plutôt que gap pour que -50% tombe pile sur la copie */
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.85rem;
    border-radius:var(--sh-radius);
    background:#fff;
    color:var(--sh-ink);
    text-decoration:none;
    border:1px solid transparent;
    transition:border-color .15s, box-shadow .15s;
}
.sh-agent:hover{ border-color:var(--sh-line); box-shadow:var(--sh-shadow); color:var(--sh-ink); }
.sh-agent__avatar{
    width:3.25rem;
    height:3.25rem;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 auto;
}
.sh-agent__avatar--initials{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--sh-brand-soft);
    color:var(--sh-brand);
    font-weight:700;
}
.sh-agent__body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.sh-agent__body strong{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.95rem; }
.sh-agent__body small{ color:var(--sh-muted); }
.sh-agent__rating{ display:inline-flex; align-items:center; gap:.15rem; font-weight:700; font-size:.85rem; }
.sh-agent__rating .mdi{ color:#f59e0b; }

/* ---------- Pros ---------- */
.sh-pro{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    gap:2.5rem;
    padding:2.75rem;
    border-radius:28px;
    background:linear-gradient(135deg, #1f2328 0%, #2b2f36 100%);
    color:#fff;
    overflow:hidden;
}
.sh-pro h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:700; letter-spacing:-.02em; margin-bottom:.75rem; }
.sh-pro .sh-accent{ color:#ff7b88; }
.sh-pro__copy > p{ color:rgba(255,255,255,.78); }
.sh-checks{ list-style:none; padding:0; margin:1rem 0 1.5rem; }
.sh-checks li{ position:relative; padding-left:1.7rem; margin-bottom:.5rem; color:rgba(255,255,255,.9); }
.sh-checks li::before{
    content:"\2713";
    font-weight:800;
    position:absolute;
    left:0;
    top:0;
    color:#ff7b88;
}
.sh-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.sh-pro__agent{
    margin:1.5rem 0 0;
    padding-top:1.1rem;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:.9rem;
    color:rgba(255,255,255,.75);
}
.sh-pro__agent a{ color:#fff; font-weight:700; }
.sh-pro__media img{
    width:100%;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* ---------- Applications ---------- */
.sh-apps{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25rem;
}
.sh-app{
    display:flex;
    align-items:center;
    gap:1.25rem;
    padding:1.5rem;
    border-radius:20px;
}
.sh-app--red{ background:var(--sh-brand-soft); }
.sh-app--blue{ background:#eaf1ff; }
.sh-app img{ width:120px; flex:0 0 auto; object-fit:contain; }
.sh-app h3{ font-size:1.1rem; font-weight:700; margin-bottom:.35rem; }
.sh-app p{ color:var(--sh-muted); font-size:.9rem; margin-bottom:.9rem; }
.sh-stores{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sh-stores a{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.5rem .9rem;
    border-radius:10px;
    background:var(--sh-ink);
    color:#fff;
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
}
.sh-stores a:hover{ background:#000; color:#fff; }
.sh-stores .mdi{ font-size:1.1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px){
    .sh-cats{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .sh-grid{ --sh-row-visible:3; }
}
@media (max-width: 991.98px){
    .sh-hero{ padding:1.5rem 0 2rem; }
    .sh-search__form{ grid-template-columns:1fr 1fr; }
    .sh-search__submit{ grid-column:1 / -1; }
    .sh-pro{ grid-template-columns:1fr; padding:2rem; }
    .sh-pro__media{ order:-1; }
    .sh-apps{ grid-template-columns:1fr; }
    .sh-steps{ grid-template-columns:1fr; }
    .sh-cities{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
    .sh-section{ padding:2.5rem 0; }
    .sh-head{ align-items:flex-start; flex-direction:column; gap:.5rem; }
    .sh-head--center{ align-items:center; }
    /* Catégories et annonces : défilement horizontal au doigt */
    .sh-arrow{ display:none; }
    .sh-grid{ --sh-row-visible:1.3; --sh-row-gap:1rem; margin:0 -12px; padding:0 12px .25rem; scroll-padding:0 12px; }
    .sh-cats{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        margin:0 -12px;
        padding:0 12px .25rem;
    }
    .sh-cats::-webkit-scrollbar{ display:none; }
    .sh-cat{ flex:0 0 140px; scroll-snap-align:start; }
    .sh-alert-cta{ flex-direction:column; align-items:flex-start; }
    .sh-alert-cta .sh-btn{ width:100%; }
    .sh-cities{ grid-template-columns:1fr; }
}
@media (max-width: 575.98px){
    .sh-search{ padding:.5rem; border-radius:16px; }
    .sh-search__form{ grid-template-columns:1fr; }
    .sh-agent{ flex-basis:240px; }
    .sh-app{ flex-direction:column; align-items:flex-start; text-align:left; }
    .sh-app img{ width:96px; }
    .sh-pro{ padding:1.5rem; border-radius:20px; }
    .sh-actions .sh-btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
    .hero-property-card{ animation:none !important; }
    .sh-card__media img,
    .sh-cat{ transition:none; }
    /* Sans animation : défilement manuel, copie masquée */
    .sh-agents{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
    .sh-agents__track{ animation:none; }
    .sh-agent[aria-hidden="true"]{ display:none; }
}