/**
 * Page du simulateur de budget : bandeau haut, galerie d'inspirations
 * et bandeau « Pourquoi choisir Eleva ».
 *
 * Feuille propre a /simulateur-budget-extension-maison : chargee via
 * $pageExtraCss, apres theme.min.css. Les autres pages ne paient pas
 * la requete et gardent le bandeau .cta-hero sombre d'origine.
 *
 * Le bandeau est clair : la photo occupe la moitie droite en pleine
 * largeur d'ecran et se fond dans le blanc sous le texte. La signature
 * manuscrite est incrustee dans l'image, il n'y a rien a superposer.
 */

.sim-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    padding: clamp(2.4rem, 1.4rem + 2.4vw, 3.9rem) 0 clamp(2.6rem, 1.5rem + 2.6vw, 4.2rem);
}

/* Photo : posee sur la droite, hors container, derriere le texte.
   Le cadrage est ancre vers le bas pour ne jamais rogner la
   signature manuscrite incrustee dans l'image. */
.sim-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 56%;
    margin: 0;
    z-index: -1;
}

.sim-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 68%;
}

/* Le degrade fait disparaitre le bord gauche de la photo dans le fond. */
.sim-hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--white) 0%,
        rgba(255, 255, 255, 0.94) 14%,
        rgba(255, 255, 255, 0.55) 32%,
        rgba(255, 255, 255, 0) 52%
    );
}

.sim-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    align-items: center;
    gap: 2rem;
    min-height: clamp(19rem, 24vw, 25rem);
}

.sim-hero__content {
    display: grid;
    gap: 1.05rem;
    max-width: 34rem;
}

.sim-hero__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--primary);
}

.sim-hero__title {
    margin: 0;
    font-size: clamp(1.95rem, 1.1rem + 2.5vw, 3.05rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--secondary);
}

.sim-hero__lead {
    margin: 0;
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.68;
    color: #55606f;
}

/* Les trois reperes de reassurance. */
.sim-hero__proofs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 2.1rem;
    margin: 0.5rem 0 0;
    padding: 0;
}

.sim-hero__proof {
    display: flex;
    align-items: center;
    gap: 0.62rem;
}

.sim-hero__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    border: 1px solid rgba(192, 158, 13, 0.45);
    background: rgba(192, 158, 13, 0.07);
    color: var(--primary);
}

.sim-hero__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.sim-hero__proof-label {
    display: grid;
    gap: 0.08rem;
    line-height: 1.3;
}

.sim-hero__proof-label strong {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--secondary);
}

.sim-hero__proof-label span {
    font-size: 0.76rem;
    color: var(--muted);
}

/* Tablette : la photo se retire derriere un degrade plus large. */
@media (max-width: 1080px) {
    .sim-hero__media {
        width: 62%;
    }

    .sim-hero__media::before {
        background: linear-gradient(
            90deg,
            var(--white) 0%,
            rgba(255, 255, 255, 0.95) 28%,
            rgba(255, 255, 255, 0.62) 48%,
            rgba(255, 255, 255, 0) 72%
        );
    }
}

/* Mobile : la photo repasse sous le texte, en carte. */
@media (max-width: 860px) {
    .sim-hero {
        padding: 2.2rem 0 2.4rem;
    }

    .sim-hero__inner {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
    }

    .sim-hero__content {
        max-width: none;
    }

    /* Meme gouttiere que .container, la photo suit le texte. */
    .sim-hero__media {
        position: relative;
        inset: auto;
        width: min(100% - 2.5rem, var(--container));
        margin: 1.6rem auto 0;
        z-index: 0;
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 16 / 9;
    }

    .sim-hero__media::before {
        background: linear-gradient(
            0deg,
            rgba(15, 23, 42, 0.62) 0%,
            rgba(15, 23, 42, 0.12) 42%,
            rgba(15, 23, 42, 0) 70%
        );
    }

    .sim-hero__proofs {
        gap: 0.8rem 1.4rem;
    }
}

@media (max-width: 420px) {
    .sim-hero__proofs {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
}

/* =======================================================================
 * Galerie « Des projets qui pourraient vous inspirer »
 *
 * Trois vignettes puisees dans le jeu de donnees des inspirations
 * (pages/inspirations-data.php) : pas de duplication, chaque carte
 * pointe vers la galerie ouverte sur la bonne photo.
 * ===================================================================== */

.sim-inspire {
    padding: clamp(2.6rem, 1.6rem + 2.4vw, 4rem) 0;
    background: var(--white);
}

.sim-inspire__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin-bottom: clamp(1.4rem, 1rem + 1vw, 2rem);
}

.sim-inspire__title {
    margin: 0;
    font-size: clamp(1.4rem, 0.9rem + 1.3vw, 1.85rem);
    line-height: 1.25;
    color: var(--secondary);
}

.sim-inspire__all {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    transition: color var(--transition);
}

.sim-inspire__all:hover,
.sim-inspire__all:focus-visible {
    color: var(--secondary);
}

.sim-inspire__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

.sim-inspire__card {
    display: flex;
    flex-direction: column;
}

/* La photo, avec sa pastille de legende posee en bas a gauche. */
.sim-inspire__figure {
    position: relative;
    margin: 0 0 0.9rem;
    border-radius: var(--radius);
    overflow: hidden;
    /* Format natif des vignettes de la galerie (418 x 235) : aucun
       recadrage, aucun agrandissement. */
    aspect-ratio: 16 / 9;
    background: var(--light);
}

.sim-inspire__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.sim-inspire__card:hover .sim-inspire__figure img,
.sim-inspire__card:focus-within .sim-inspire__figure img {
    transform: scale(1.04);
}

/* Voile sombre : la legende blanche doit rester lisible sur toute photo. */
.sim-inspire__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba(15, 23, 42, 0.68) 0%,
        rgba(15, 23, 42, 0.22) 34%,
        rgba(15, 23, 42, 0) 58%
    );
}

.sim-inspire__badge {
    position: absolute;
    left: 1rem;
    bottom: 0.9rem;
    z-index: 1;
    display: grid;
    gap: 0.1rem;
    color: var(--white);
    line-height: 1.3;
    text-shadow: 0 1px 8px rgba(15, 23, 42, 0.5);
}

.sim-inspire__badge strong {
    font-size: 1.02rem;
    font-weight: 700;
}

.sim-inspire__badge span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.88);
}

.sim-inspire__caption {
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--secondary);
}

.sim-inspire__link {
    align-self: start;
    margin-top: auto;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--primary);
    transition: color var(--transition);
}

.sim-inspire__link:hover,
.sim-inspire__link:focus-visible {
    color: var(--secondary);
}

/* Trois liens « Voir l'inspiration » se suivent : le lecteur d'ecran doit
   pouvoir les distinguer. Le titre de la fiche complete l'intitule sans
   s'afficher. Le site n'avait pas encore de classe de ce type. */
.sim-inspire__link .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =======================================================================
 * Bandeau « Pourquoi choisir Eleva ? »
 * ===================================================================== */

.sim-why {
    padding: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem) 0;
    background: var(--light);
}

.sim-why__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.2rem, 0.8rem + 1.6vw, 3rem);
}

.sim-why__title {
    margin: 0;
    font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.3rem);
    line-height: 1.3;
    color: var(--secondary);
}

.sim-why__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.4rem;
    margin: 0;
    padding: 0;
}

.sim-why__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.sim-why__icon {
    flex: 0 0 auto;
    color: var(--primary);
}

.sim-why__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.sim-why__label {
    display: grid;
    gap: 0.05rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text);
}

.sim-why__label span:last-child {
    color: var(--muted);
}

/* ------------------------------ Responsive ---------------------------- */

@media (max-width: 980px) {
    .sim-why__inner {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

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

@media (max-width: 860px) {
    .sim-inspire__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* La troisieme carte prend toute la largeur pour ne pas rester orpheline. */
    .sim-inspire__card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .sim-inspire__grid {
        grid-template-columns: 1fr;
    }

    .sim-why__list {
        grid-template-columns: 1fr;
    }
}