/*
 * Salamandre - Homepage Styles
 * Chargé uniquement sur la page d'accueil
 * Version: 1.0.0
 */

/* =============================================================================
   HERO SECTION
   ========================================================================== */

/* Container principal */
.kb-row-layout-id144_3cac0c-8b {
    overflow: hidden;
}

/* Titre principal */
.hero-title {
    font-family: var(--wp--preset--font-family--bebas-neue) !important;
    font-size: 70px !important;
    line-height: 68px !important;
    color: var(--wp--preset--color--custom-noir) !important;
    margin-bottom: -15px !important;
    max-width: 700px;
}

/* Ligne "POUR la restauration collective" */
.hero-title .hero-subtitle {
    font-size: 45px !important;
    line-height: 48px !important;
    display: block;
}

/* "restauration collective" en vert */
.hero-title .hero-subtitle em {
    color: var(--wp--preset--color--custom-vert-clair) !important;
    font-style: normal;
}
.hero-section {
    min-height: 529px !important;
    overflow: hidden;
    position: relative;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* S'assurer que le contenu est au-dessus du cercle */
.hero-section .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 529px;
    display: flex !important;
    align-items: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: 1440px;
    margin: 0 auto;
}

/* Le groupe flex parent doit prendre toute la hauteur */
.hero-section .wp-block-cover__inner-container > .wp-block-group.is-layout-flex {
    min-height: 529px;
    align-items: flex-end !important;
    width: 100%;
}

/* Colonne gauche */
.hero-left {
    flex: 0 0 54%;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    padding-left: var(--wp--style--root--padding-left);
}

/* Pas de padding sur grands écrans */
@media (min-width: 1401px) {
    .hero-left {
        padding-left: 0;
    }
}

/* Cercle blanc attaché au texte */
.hero-left::before {
    content: '';
    position: absolute;
    width: 1064px;
    height: 1064px;
    background: #ffffff;
    border-radius: 50%;
    top: -200px;
    left: -200px;
    z-index: -1;
}


/* Image main/plateau */
.hero-main {
    width: 355px !important;
    margin: 0 !important;
}

.hero-main img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

/* Image kiwi - position fixe avec left */
.hero-kiwi {
    position: absolute !important;
    left: 750px;
    top: -50px;
    transform: none;
    z-index: 3;
    margin: 0 !important;
}

.hero-kiwi img {
    width: 687px !important;
    max-width: none !important;
    height: auto !important;
}

/* =============================================================================
   HERO SECTION - RESPONSIVE
   ========================================================================== */

/* MOYEN : 850px - 1200px */
@media (max-width: 1200px) {
    .hero-section {
        min-height: 450px !important;
    }
    
    .hero-section .wp-block-cover__inner-container,
    .hero-section .wp-block-cover__inner-container > .wp-block-group.is-layout-flex {
        min-height: 450px;
    }
    
    .hero-left::before {
        width: 700px;
        height: 700px;
        top: -180px;
        left: -80px;
    }
    
    .hero-title {
        font-size: 55px !important;
        line-height: 54px !important;
        max-width: 500px;
    }
    
    .hero-title .hero-subtitle {
        font-size: 36px !important;
        line-height: 40px !important;
    }
    
    .hero-kiwi {
        left: auto;
        right: -50px;
    }
    
    .hero-kiwi img {
        width: 500px !important;
        max-width: none !important;
    }
    
    .hero-main {
        width: 280px !important;
    }
}

/* MOBILE : < 850px */
@media (max-width: 849px) {
    .hero-section {
        min-height: 394px !important;
    }
    
    .hero-section .wp-block-cover__inner-container,
    .hero-section .wp-block-cover__inner-container > .wp-block-group.is-layout-flex {
        min-height: 394px;
    }
    
    .hero-left::before {
        width: 500px;
        height: 500px;
        top: -120px;
        left: -100px;
    }
    
    .hero-title {
        font-size: 40px !important;
        line-height: 33px !important;
        max-width: 284px;
    }
    
    .hero-title .hero-subtitle {
        font-size: 25px !important;
        line-height: 22px !important;
    }
    
    .hero-kiwi {
        left: auto;
        right: -180px;
        top: -30px;
    }
    
    .hero-kiwi img {
        width: 380px !important;
        max-width: none !important;
    }
    
    .hero-main {
        width: 234px !important;
    }
}

/* =============================================================================
   SECTION EXPERTISE (bandeau vert)
   ========================================================================== */

/* Texte "expertise métier" en blanc */
.titre-expertise span {
    color: white;
}

/* Image piment - taille fixe */
.has-custom-vert-clair-background-color > .wp-block-group.is-layout-flex > .wp-block-image img {
    width: 300px !important;
    max-width: none !important;
    height: auto !important;
}

/* Alignement du conteneur flex en bas */
.has-custom-vert-clair-background-color > .wp-block-group.is-layout-flex {
    align-items: flex-end !important;
}

/* =============================================================================
   SECTION EXPERTISE - RESPONSIVE
   ========================================================================== */

@media (max-width: 849px) {
	
	.titre-expertise p {
		text-align: center;
	}
    /* Hauteur auto selon le contenu */
    .has-custom-vert-clair-background-color {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Supprimer le flex-basis qui force la hauteur */
    .titre-expertise {
        flex-basis: auto !important;
        margin-left: 0 !important;
        padding: 0 20px 6vh 20px!important;
        text-align: center;
        align-items: center !important;
    }
    
    /* Conteneur en colonne verticale */
    .has-custom-vert-clair-background-color > .wp-block-group.is-layout-flex {
        flex-direction: column !important;
        align-items: center !important;
        min-height: auto !important;
    }
    
    /* Piment : au-dessus du texte */
    .has-custom-vert-clair-background-color > .wp-block-group.is-layout-flex > .wp-block-image {
        order: -1;
        margin: 0!important;
		padding-top: 4vh;
    }
    
    .has-custom-vert-clair-background-color > .wp-block-group.is-layout-flex > .wp-block-image img {
        width: 200px !important;
    }
}