/*
 * Hero de l'accueil — soleilimmobilier.pf
 * Tailles en pixels : selon les pages, Bootstrap ramène 1rem à 10px.
 * Les remises à zéro passent par :where() pour ne pas écraser les classes.
 */

/* La photo déborde jusqu'au bord droit de l'écran. */
body.home {
    overflow-x: clip;
}

.sha {
    --sha-noir: #000;
    --sha-jaune: #fecc00;
    --sha-blanc: #fff;
    --sha-doux: rgba(255, 255, 255, 0.76);
    --sha-trait: rgba(255, 255, 255, 0.34);

    position: relative;
    padding: 0 0 36px;
    background: var(--sha-noir);
    /* Fond noir pleine largeur sans sortir le bloc de la grille du thème. */
    box-shadow: 0 0 0 100vmax var(--sha-noir);
    clip-path: inset(0 -100vmax);
    color: var(--sha-blanc);
    font-family: Metropolis, -apple-system, "Segoe UI", sans-serif;
    text-align: left;
}

.sha :where(h1, p, ul, li) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sha :where(a) {
    color: inherit;
    text-decoration: none;
}

.sha :where(img) {
    display: block;
    max-width: none;
}

/* ---------- Photo ---------- */

.sha__haut {
    position: relative;
}

.sha__visuel {
    position: relative;
    height: min(64vw, 380px);
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
}

/* Elementor pose `.elementor img { height: auto }` : il faut une règle plus forte. */
.sha .sha__visuel img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 62% 35%;
}

.sha__visuel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.72) 16%, rgba(0, 0, 0, 0) 52%),
        linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 16%);
    pointer-events: none;
}

/* ---------- Accroche ---------- */

.sha__texte {
    position: relative;
    z-index: 1;
    margin-top: -64px;
}

.sha .sha__titre {
    color: var(--sha-blanc);
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.sha__question,
.sha__promesse,
.sha__jaune {
    display: block;
}

.sha__question {
    margin-bottom: 10px;
    color: var(--sha-doux);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
}

.sha__promesse {
    font-size: clamp(24px, 7vw, 42px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.022em;
}

.sha__jaune {
    color: var(--sha-jaune);
}

.sha .sha__chapo {
    max-width: 34em;
    margin: 16px 0 0;
    color: var(--sha-doux);
    font-size: 16px;
    line-height: 1.55;
}

.sha__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sha .sha__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    min-height: 48px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sha .sha__bouton--plein {
    background: var(--sha-jaune);
    color: #000;
}

.sha .sha__bouton--plein:hover {
    background: var(--sha-blanc);
    color: #000;
}

.sha .sha__bouton--contour {
    border-color: var(--sha-trait);
    color: var(--sha-blanc);
}

.sha .sha__bouton--contour:hover {
    border-color: var(--sha-blanc);
    color: var(--sha-blanc);
}

.sha .sha__bouton:focus-visible,
.sha .sha__carte:focus-visible {
    outline: 2px solid var(--sha-jaune);
    outline-offset: 3px;
}

/* ---------- Activités ---------- */

.sha__activites {
    margin-top: 30px;
}

.sha__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sha__item:last-child {
    grid-column: 1 / -1;
}

.sha .sha__carte {
    position: relative;
    display: block;
    height: 170px;
    overflow: hidden;
    border-radius: 14px;
    background: #1c1c1c;
    color: var(--sha-blanc);
    isolation: isolate;
}

.sha__item:last-child .sha__carte {
    height: 140px;
}

.sha .sha__item:last-child .sha__carte-photo {
    object-position: 50% 46%;
}

.sha .sha__carte-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sha__carte::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.88) 100%);
}

.sha__carte-texte {
    position: absolute;
    right: 14px;
    bottom: 13px;
    left: 14px;
}

.sha__carte-nom,
.sha__carte-detail {
    display: block;
}

.sha__carte-nom {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.sha__carte-detail {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.3;
}

.sha__carte-fleche {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: var(--sha-blanc);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.sha .sha__carte:hover .sha__carte-photo {
    transform: scale(1.05);
}

.sha__carte:hover .sha__carte-fleche,
.sha__carte:focus-visible .sha__carte-fleche {
    background: var(--sha-jaune);
    color: #000;
}

/* ---------- Tablette ---------- */

@media (min-width: 600px) {
    .sha {
        padding-bottom: 48px;
    }

    .sha__visuel {
        height: 400px;
    }

    .sha__texte {
        margin-top: -150px;
    }

    .sha__question {
        font-size: 20px;
    }

    .sha .sha__bouton {
        flex: 0 0 auto;
    }

    .sha__liste {
        gap: 12px;
    }

    .sha .sha__carte {
        height: 250px;
    }

    .sha__item:last-child .sha__carte {
        height: 190px;
    }

    .sha__carte-nom {
        font-size: 19px;
    }

    .sha__carte-detail {
        font-size: 14px;
    }
}

/* ---------- Ordinateur ---------- */

@media (min-width: 992px) {
    .sha {
        padding-bottom: 56px;
    }

    .sha__haut {
        display: flex;
        align-items: center;
        min-height: clamp(300px, 41vh, 410px);
    }

    .sha__visuel {
        position: absolute;
        top: 0;
        right: max(calc(50% - 50vw), -230px);
        bottom: -30px;
        width: min(66vw, 1010px);
        height: auto;
        margin: 0;
    }

    .sha .sha__visuel img {
        object-position: 50% 32%;
    }

    .sha__visuel::after {
        background:
            linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0) 58%),
            linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 26%),
            linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 20%);
    }

    .sha__texte {
        max-width: 640px;
        margin-top: 0;
        padding: 36px 0 34px;
    }

    .sha__question {
        margin-bottom: 12px;
        font-size: 22px;
    }

    .sha__promesse {
        font-size: clamp(36px, 3.5vw, 50px);
        line-height: 1.03;
        letter-spacing: -0.028em;
    }

    .sha .sha__chapo {
        max-width: 27em;
        margin-top: 20px;
        font-size: 17px;
    }

    .sha .sha__item:last-child .sha__carte-photo {
        object-position: 50% 50%;
    }

    .sha__actions {
        gap: 12px;
        margin-top: 28px;
    }

    .sha .sha__bouton {
        min-height: 50px;
        padding: 0 26px;
        font-size: 16px;
    }

    .sha__activites {
        position: relative;
        z-index: 1;
        margin-top: 0;
    }

    .sha__liste {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .sha__item:last-child {
        grid-column: auto;
    }

    .sha .sha__carte,
    .sha__item:last-child .sha__carte {
        height: clamp(240px, 35vh, 350px);
    }

    .sha__carte-texte {
        right: 18px;
        bottom: 17px;
        left: 18px;
    }

    .sha__carte::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.84) 100%);
    }

    .sha__carte-nom {
        font-size: 20px;
    }

    .sha__carte-fleche {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }
}

/* À partir de 1200px, le thème pose son en-tête (130px) par-dessus la page. */
@media (min-width: 1200px) {
    .sha {
        padding-top: 130px;
    }
}

/* Écrans très larges : la photo ne touche plus le bord, on fond aussi à droite. */
@media (min-width: 1640px) {
    .sha__visuel::after {
        background:
            linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0) 14%),
            linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0) 58%),
            linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 26%),
            linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 20%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sha .sha__carte-photo,
    .sha__carte-fleche,
    .sha .sha__bouton {
        transition: none;
    }

    .sha .sha__carte:hover .sha__carte-photo {
        transform: none;
    }
}