/* ============================================
   Hover Text Images — Section SEO Projets
   Layout maquette Obys :
   - Label en haut à gauche
   - Grand texte bold sur 12 cols (full)
   - Aside DESSOUS, aligné à droite sur 4 cols
   ============================================ */
.c2s-seo-hover-section {
    position: relative;
    padding-top: calc(var(--col) * 1.5);
    padding-bottom: calc(var(--col) * 1.5);
}

/* --- Label --- */
.c2s-seo-hover-section__label {
    display: block;
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-body-light);
    margin-bottom: var(--space-6);
}

/* --- Grid 12 colonnes --- */
.c2s-seo-hover-section__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
}

/* --- Grand texte : span 12 = TOUTES les colonnes --- */
.c2s-seo-hover-section__text {
    grid-column: span 12;
}

/* --- Aside : 4 colonnes, poussé à droite --- */
.c2s-seo-hover-section__aside {
    grid-column: 9 / 12;
    padding-top: var(--space-10);
}

.c2s-seo-hover-section__aside p {
    font-size: var(--16px-size);
    color: var(--color-body);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

/* --- Hover effect text (mwg_effect036) --- */
.mwg_effect036 {
    position: relative;
}

.mwg_effect036 p.sentence {
    font-weight: 500;
    font-size: var(--72px-size);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-heading);
}

.mwg_effect036 span.hover {
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.1em;
    cursor: pointer;
}

/* --- Hidden source images --- */
.mwg_effect036 .medias img {
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

/* --- Floating images (appended by JS) --- */
.mwg_effect036>img {
    pointer-events: none;
    width: 28vw;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.5em;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.15);
    z-index: 50;
}

/* Site creation images — plus larges pour matcher la hauteur des GSC */
.mwg_effect036>img[data-group="sites"] {
    width: 38vw;
}


/* ============================================
   Responsive
   ============================================ */
@media screen and (max-width: 991px) {
    .mwg_effect036 p.sentence {
        font-size: var(--48px-size);
    }

    .c2s-seo-hover-section__aside {
        grid-column: 7 / -1;
    }
}

@media screen and (max-width: 767px) {
    .c2s-seo-hover-section__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .c2s-seo-hover-section__text {
        grid-column: span 4;
    }

    .c2s-seo-hover-section__aside {
        grid-column: span 4;
    }

    .mwg_effect036 p.sentence {
        font-size: var(--34px-size);
    }

    .mwg_effect036>img {
        width: 30vw;
        height: 20vw;
    }
}

@media screen and (max-width: 479px) {
    .mwg_effect036 p.sentence {
        font-size: var(--20px-size);
    }
}