/* =========================================
   HOMEPAGE — Styles spécifiques
   ========================================= */



/* =========================================
   TOGGLE — Références FR / INT
   ========================================= */

#referenceINT {
    display: none;
}

.references-toggle {
    position: relative;
    display: inline-flex;
    border: 1px solid var(--wp--preset--color--muted);
    border-radius: 100px;
    padding: 2px;
}

.references-toggle__slider {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    border-radius: 100px;
    background-color: var(--wp--preset--color--muted);
    transition: transform 0.25s ease, width 0.25s ease;
    pointer-events: none;
    z-index: 0;
}

.references-toggle__btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    border-radius: 100px;
    padding: 0.4rem 1.2rem;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    color: var(--wp--preset--color--bleu-expertise);
    cursor: pointer;
    white-space: nowrap;
    transition: font-weight 0.1s ease;
}

.references-toggle__btn.is-active {
    font-weight: 700;
}


/* =========================================
   CARDS RÉSULTATS — SVG décoratif
   ========================================= */

.references-results-cards-svg {
    position: relative;
    overflow: hidden;
}
.references-results-cards-svg svg {
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 0;
}
.references-results-cards-svg > *:not(.wp-block-image) {
    position: relative;
    z-index: 1;
}
.references-results-cards-svg > .wp-block-image {
    position: static !important;
}


/* =========================================
   SECTIONS - FAQ
   ========================================= */

#faq {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
}

#faq details {
    width: 100%;
    min-width: 100%;
    border: 1px solid var(--wp--preset--color--muted) !important;
    border-radius: 10px !important;
    background-color: var(--wp--preset--color--white) !important;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

#faq details[open] {
    background-color: var(--wp--preset--color--gris-clair) !important;
}

#faq details > *:not(summary) {
    overflow: hidden;
}

#faq details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

#faq details summary::-webkit-details-marker {
    display: none;
}

#faq details summary::marker {
    display: none;
}

#faq details summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 1rem;
    color: #ffffff;
    background-color: #1D1D3E;
    border-radius: 100%;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

#faq details[open] summary::after {
    content: '-';
}


/* =========================================
   HERO — Group container & text container
   ========================================= */

.heroGroupContainer {
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.heroGroupContainer h1 .text-featured {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: white;
}

/* Le conteneur texte devient le support de l'image */
.heroTextContainer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Image de fond placée uniquement sur le TextContainer */
.heroTextContainer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image: url(/wp-content/uploads/GenTa-Group-Homepage-Hero-Square.webp);
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 50%, black 70%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 50%, black 70%, black 100%);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Le contenu doit rester au-dessus de l'image */
.heroTextContainer > * {
  position: relative;
  z-index: 1;
}

.heroGroupContainer .wp-block-spacer.heroSpacer {
  height: auto !important;
  width: 100%;
  aspect-ratio: 10 / 9;
}


/* =========================================
   SECTIONS - HERO
   ========================================= */

#hero .wp-block-column:has(.hero-homepage-background) {
    position: relative;
    margin-top: 0px !important;
}

#hero .hero-homepage-background {
    position: absolute !important;
    bottom: 0;
    right: 0;
    margin: 0 !important;
    z-index: 0;
    width: 150%;
}

#hero .hero-homepage-background img {
    width: 150%;
    height: auto;
    display: block;
}

#hero .hero-homepage-first {
    position: absolute !important;
    bottom: 0;
    right: 0;
    margin: 0 !important;
    z-index: 1;
}

#hero .hero-homepage-first img {
    height: 100%;
    width: auto;
    display: block;
    max-width: 120%;
    aspect-ratio: 720 / 600;
    justify-self: right;
}

/* =========================================
   CARDS RÉSULTATS — Grille responsive
   ========================================= */

#customerResults .resultsCards {
    flex-wrap: nowrap !important;
}

@media screen and (max-width: 1000px) {
    #customerResults .resultsCards {
        flex-wrap: wrap !important;
    }
    #customerResults .resultsCards > .wp-block-column {
        flex-basis: calc(50% - var(--wp--style--block-gap, 2em) / 2) !important;
        min-width: 0 !important;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media screen and (max-width: 1024px) {

    .heroTextContainer.wp-block-columns {
        flex-direction: column;
        padding-top: var(--wp--preset--spacing--20) !important;
    }

    .heroTextContainer.wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        min-width: 0 !important;
    }

    /* Image mobile + masque vertical (transparente en haut, visible en bas) */
    .heroTextContainer::before {
        background-image: url("/wp-content/uploads/GenTa-Group-Homepage-Hero-Square.webp");
        background-position: center bottom;

        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 50%,
            black 70%,
            black 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 50%,
            black 70%,
            black 100%
        );
    }
}

@media screen and (max-width: 1325px) {

    /* Icône ::before en rem pour ne pas hériter du font-size: 0 */
    .wp-block-button.responsive-impatriation-professionnelle .wp-block-button__link::before,
    .wp-block-button.responsive-recrutement-international .wp-block-button__link::before,
    .wp-block-button.responsive-portage-salarial-international .wp-block-button__link::before,
    .wp-block-button.responsive-interim .wp-block-button__link::before,
    .wp-block-button.responsive-services-rh .wp-block-button__link::before {
        width: 1.3rem !important;
        height: 1.3rem !important;
        min-width: 1.3rem;
    }

    /* Masquage du texte complet */
    .wp-block-button.responsive-impatriation-professionnelle .wp-block-button__link,
    .wp-block-button.responsive-recrutement-international .wp-block-button__link,
    .wp-block-button.responsive-portage-salarial-international .wp-block-button__link,
    .wp-block-button.responsive-interim .wp-block-button__link,
    .wp-block-button.responsive-services-rh .wp-block-button__link {
        font-size: 0 !important;
    }

    /* Texte court via ::after — valeurs injectées par PHP (swb_inject_css_strings) */
    .wp-block-button.responsive-impatriation-professionnelle .wp-block-button__link::after,
    .wp-block-button.responsive-recrutement-international .wp-block-button__link::after,
    .wp-block-button.responsive-portage-salarial-international .wp-block-button__link::after,
    .wp-block-button.responsive-interim .wp-block-button__link::after,
    .wp-block-button.responsive-services-rh .wp-block-button__link::after {
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        margin-left: 10px;
    }

    .wp-block-button.responsive-impatriation-professionnelle .wp-block-button__link::after {
        content: var(--btn-label-impatriation, 'Impatriation Professionnelle');
    }

    .wp-block-button.responsive-recrutement-international .wp-block-button__link::after {
        content: var(--btn-label-recrutement, 'Recrutement International');
    }

    .wp-block-button.responsive-portage-salarial-international .wp-block-button__link::after {
        content: var(--btn-label-portage, 'Portage Salarial International');
    }

    .wp-block-button.responsive-interim .wp-block-button__link::after {
        content: var(--btn-label-interim, 'Intérim International');
    }

    .wp-block-button.responsive-services-rh .wp-block-button__link::after {
        content: var(--btn-label-services-rh, 'Services RH Externalisés');
    }
}

@media screen and (max-width: 780px) {
    #hero .wp-block-column:has(.hero-homepage-background) {
        position: relative;
        overflow: hidden;
    }

    #hero .hero-homepage-first {
        position: relative !important;
        top: auto;
        right: auto;
        height: auto;
        width: 100%;
        z-index: 1;
    }

    #hero .hero-homepage-first img {
        height: auto;
        width: 100%;
    }

    #hero .hero-homepage-background {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    #hero .hero-homepage-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Services cards */
    .servicesCards-Container {
        gap: var(--wp--preset--spacing--50) !important;
    }


}