banniere prestation

/* MAISON MALKA — BANNIÈRE PLEIN ÉCRAN PC */

body .malka-banner-full,
body .wp-block-group.malka-banner-full,
body .is-layout-constrained > .malka-banner-full {

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;

    padding-left: clamp(20px, 4vw, 80px) !important;
    padding-right: clamp(20px, 4vw, 80px) !important;

    box-sizing: border-box !important;
    position: relative !important;
}

/* Supprimer la limitation des groupes internes */
.malka-banner-full > .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;
}

/* Conserver les proportions de la photo */
.malka-banner-full img {
    max-width: 100% !important;
    height: auto !important;
}

/* MOBILE */
@media (max-width: 767px) {
    body .malka-banner-full,
    body .wp-block-group.malka-banner-full {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* MAISON MALKA — BANNIÈRE COMPACTE */

.malka-banner-full {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Réduire la hauteur des colonnes */
.malka-banner-full .wp-block-columns,
.malka-banner-full .wp-block-column {
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

/* Photo moins haute sans découper le visage */
.malka-banner-full img {
    max-height: 440px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .malka-banner-full {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .malka-banner-full img {
        max-height: 300px !important;
    }
}


/* ==========================================
   MAISON MALKA — BANNIÈRE ACCUEIL PREMIUM
   VERSION COMPLÈTE PC + MOBILE
   ========================================== */

/* 1. BANNIÈRE PLEINE LARGEUR */

body .malka-banner-full,
body .wp-block-group.malka-banner-full,
body .is-layout-constrained > .malka-banner-full {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 18px clamp(20px, 4vw, 80px) !important;
}

/* IMPORTANT :
   Aucun background forcé ici.
   L'image d'arrière-plan reste gérée
   directement dans WordPress.
*/

/* 2. SUPPRESSION DES LIMITATIONS INTERNES */

.malka-banner-full > .wp-block-group__inner-container,
.malka-banner-full > .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: none !important;
}

/* 3. DISPOSITION DES DEUX COLONNES */

@media (min-width: 900px) {

    .malka-banner-full .wp-block-columns {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        max-width: none !important;

        gap: clamp(30px, 4vw, 75px) !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    /* Texte */
    .malka-banner-full .wp-block-column:first-child {
        flex: 1 1 55% !important;
        min-width: 0 !important;
    }

    /* Photo */
    .malka-banner-full .wp-block-column:last-child {
        flex: 1 1 45% !important;
        min-width: 0 !important;

        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
}

/* 4. TITRE H1 SEO */

.malka-banner-full h1 {
    font-size: clamp(34px, 2.9vw, 52px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;

    margin: 0 0 14px !important;
    max-width: 850px;

    animation: malka-title-in .9s ease-out both;
}

/* Ligne décorative champagne */

.malka-banner-full h1::after {
    content: "";
    display: block;
    width: 65px;
    height: 2px;
    margin-top: 14px;

    background: linear-gradient(
        90deg,
        #9b7438,
        #dfc49a
    );

    transform-origin: left;
    animation: malka-line-in 1.1s ease-out .3s both;
}

/* 5. PARAGRAPHES */

.malka-banner-full p {
    max-width: 850px;
    margin-top: 0 !important;
    margin-bottom: 12px !important;

    font-size: clamp(14px, 1.05vw, 18px) !important;
    line-height: 1.5 !important;

    animation: malka-text-in .85s ease-out .15s both;
}

/* 6. PHOTO À DROITE SANS CADRE */

.malka-banner-full .malka-photo-premium {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;

    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    transform: none !important;

    animation: malka-photo-in 1.1s ease-out both;
}

/* Image entière sans zoom ni déformation */

.malka-banner-full .malka-photo-premium img {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 410px !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    transform: none !important;
    animation: none !important;

    filter: drop-shadow(
        0 14px 22px rgba(70, 45, 24, .20)
    ) !important;

    transition: filter .45s ease !important;
}

/* Effet lumineux au survol */

.malka-banner-full .malka-photo-premium:hover img {
    filter:
        drop-shadow(0 18px 28px rgba(70,45,24,.28))
        brightness(1.04) !important;
}

/* 7. BOUTON DEMANDER UN DEVIS */

.malka-banner-full .wp-block-button__link {
    background-color: #99772d !important;
    color: #ffffff !important;

    border: 1px solid #b49350 !important;
    border-radius: 4px !important;

    padding: 13px 22px !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    box-shadow: 0 6px 16px rgba(75,48,20,.14);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease !important;
}

.malka-banner-full .wp-block-button__link:hover {
    background-color: #765820 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px rgba(75,48,20,.23);
}

/* 8. ANIMATIONS D'APPARITION */

@keyframes malka-title-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes malka-line-in {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes malka-text-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes malka-photo-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 9. TABLETTE */

@media (min-width: 768px) and (max-width: 899px) {

    .malka-banner-full {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .malka-banner-full h1 {
        font-size: 36px !important;
    }

    .malka-banner-full .malka-photo-premium img {
        max-height: 330px !important;
    }
}

/* 10. MOBILE */

@media (max-width: 767px) {

    body .malka-banner-full,
    body .wp-block-group.malka-banner-full {
        padding: 18px 14px !important;
        min-height: 0 !important;
    }

    .malka-banner-full .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 16px !important;
        margin: 0 !important;
    }

    .malka-banner-full .wp-block-column {
        width: 100% !important;
        flex-basis: auto !important;
        min-width: 0 !important;
    }

    .malka-banner-full h1 {
        font-size: clamp(29px, 7vw, 38px) !important;
        line-height: 1.1 !important;
        letter-spacing: -.6px !important;
        margin-bottom: 10px !important;
    }

    .malka-banner-full h1::after {
        width: 46px;
        margin-top: 11px;
    }

    .malka-banner-full p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
    }

    .malka-banner-full .malka-photo-premium {
        margin: 0 auto !important;
        width: fit-content !important;
    }

    .malka-banner-full .malka-photo-premium img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 270px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .malka-banner-full .wp-block-button__link {
        font-size: 13px !important;
        padding: 11px 17px !important;
    }
}

/* 11. ACCESSIBILITÉ */

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

    .malka-banner-full *,
    .malka-banner-full *::before,
    .malka-banner-full *::after {
        animation: none !important;
        transition: none !important;
    }
}