/*
 Theme Name:  BNM Divi Child
 Theme URI:   https://example.com/bnm
 Description: Child theme Divi 5 pour la Base Nautique des Mascareignes (structure avancée).
 Author:      LIBERTYPROD OI
 Author URI:  https://libertyprod.io
 Template:    Divi
 Version:     1.0.0
 Text Domain: bnm-divi-child
 Tags:        divi, child-theme, ocean, nautical
*/
/* Placez ici vos styles globaux. Les fichiers modulaires sont dans /assets/css */

/* Suppression couleur sur photos acceuil */
body .grace_header_quand .images_wrap::before {

    background-color: transparent !important;
}

/* Option A : on supprime carrément le pseudo-élément */
.grace_header_quand .images_wrap::before {
    display: none !important;
    content: none !important;
}

/* espacement menu sur photos acceuil */

@media (max-width: 767px) {
    .grace_header_quand .row_hover_blurbs .et_pb_blurb .et_pb_blurb_content {
        padding: 10px !important;
        margin: 0 !important;
    }
}

/* Desktop : on cache les spacers dans le rendu */
@media (min-width: 981px) {
    #top-menu > li.menu-spacer {
        display: none !important;
    }
}

/* Mobile : évite des items vides dans le hamburger */
@media (max-width: 980px) {
    #mobile_menu .menu-spacer {
        display: none !important;
    }
}

/* Masquer les  spacers dans TOUS les menus mobiles Divi */
@media (max-width: 980px) {

    /* Header natif Divi */
    #mobile_menu li.menu-spacer {
        display: none !important;
    }

    /* Menu module (Theme Builder / Divi 5) */
    .et_mobile_menu li.menu-spacer {
        display: none !important;
    }

    .et_pb_menu__menu .et_mobile_menu li.menu-spacer {
        display: none !important;
    }
}



/* Le hero doit être positionné, sans rien changer d'autre */
.grace_header_quand {
    position: relative;
}

/* Flèche centrée en bas (z-index élevé) */
.grace_header_quand .hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9999;
    text-decoration: none;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(16, 16, 19, .25);
    backdrop-filter: blur(4px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

/* Décale la flèche de 40px vers la droite, tout en restant centrée
.grace_header_quand .hero-scroll.offset-r-40 {
    margin-left: 160px;
    /* ajuste: 16px, 24px, 64px… */
}

*/ .grace_header_quand .hero-scroll:hover {
    transform: translateX(-50%) translateY(2px);
}

/* Chevron */
.grace_header_quand .hero-scroll .chevron::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

/* Petite animation douce (et respect de prefers-reduced-motion) */
@keyframes hero-bob {

    0%,
    100% {
        transform: translateX(-50%) translateY(0)
    }

    50% {
        transform: translateX(-50%) translateY(4px)
    }
}

.grace_header_quand .hero-scroll {
    animation: hero-bob 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce) {
    .grace_header_quand .hero-scroll {
        animation: none !important;
    }
}

/* L’overlay DDP ne doit pas bloquer le clic (on ne change pas sa couleur) */
.grace_header_quand .images_wrap::before {
    pointer-events: none !important;
}

/* Smooth scroll + offset sous le header sticky */
html {
    scroll-behavior: smooth;
}

#quand-section {
    scroll-margin-top: 80px;
}

@media (max-width:980px) {
    #quand-section {
        scroll-margin-top: 60px;
    }
}

/* Option : cacher la flèche en mobile */
@media (max-width:767px) {
    .grace_header_quand .hero-scroll {
        display: none !important;
    }
}

body .freddie_lover_boy_menu_container .line {
    background: #000326 !important;
}

body .freddie_lover_boy_menu_container .et_pb_code.freddie_menu_icon {
    border: 2px solid #000326 !important;
}

/* enlever filtre sombre sur slide accueil */
.tina_he_belongs_header .et_pb_slider .et_pb_slide .et_pb_slide_image::before {
    background-color: transparent !important;
}

/* Forcer padding du slide d’en-tête */
body .tina_he_belongs_header .et_pb_slider .et_pb_slide {
    padding: 200px 0 280px !important;
    /* top right/left bottom */
}

/* Pour un module Blurb .lp-flip : face avant = contenu normal ; face arrière = état 'hover' */
/* Parent (la COLONNE qui a la classe lp-d5-flip) */
.lp-d5-flip {
    position: relative;
    height: 340px;
    /* ajuste la hauteur */
    perspective: 1200px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

/* Enlève l'espace entre modules dans cette colonne */
.lp-d5-flip > .et_pb_module {
    margin-bottom: 0 !important;
}

/* Faces : on cible les MODULES eux-mêmes (avec leurs classes) */
.lp-d5-flip .lp-front,
.lp-d5-flip .lp-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .65, .25, 1);
    display: block;
}

/* IMAGE (face A) — assure le cover */
.lp-d5-flip .lp-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.lp-d5-flip .lp-front .et_pb_image_wrap,
.lp-d5-flip .lp-front img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.lp-d5-flip .lp-front::after {
    /* voile léger, optionnel */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);
}

/* BLURB (face B) */
.lp-d5-flip .lp-back {
    transform: rotateY(-180deg);
    background: #0f172a;
    color: #e5e7eb;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 28px;
}

.lp-d5-flip .lp-back .et_pb_module_header,
.lp-d5-flip .lp-back h1,
.lp-d5-flip .lp-back h2,
.lp-d5-flip .lp-back h3 {
    color: #fff;
    margin-top: 0;
}

/* Interaction : hover / focus / état "tap" mobile (JS) */
.lp-d5-flip:hover .lp-front,
.lp-d5-flip:focus-within .lp-front,
.lp-d5-flip.is-flipped .lp-front {
    transform: rotateY(180deg);
}

.lp-d5-flip:hover .lp-back,
.lp-d5-flip:focus-within .lp-back,
.lp-d5-flip.is-flipped .lp-back {
    transform: rotateY(0deg);
}

/* Responsive */
@media (max-width: 980px) {
    .lp-d5-flip {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .lp-d5-flip {
        height: 260px;
    }
}

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

    .lp-d5-flip .lp-front,
    .lp-d5-flip .lp-back {
        transition: none;
    }
}

/* Badge/texte superposé sur la face A */
.lp-d5-flip .lp-front-note {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 16px;
    /* position: bas centré par défaut */
    z-index: 3;
    padding: 10px 14px;
    /*background: rgba(0, 0, 0, .45);*/
    color: #fff;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
    /* laisse passer le clic vers liens */
    transition: opacity .3s ease;
}

/* Masquer quand la carte est retournée */
.lp-d5-flip:hover .lp-front-note,
.lp-d5-flip:focus-within .lp-front-note,
.lp-d5-flip.is-flipped .lp-front-note {
    opacity: 0;
}

/* Variantes d'alignement (applique aussi une classe en plus sur le module texte) */
.lp-front-note.right {
    left: auto;
    text-align: right;
}

.lp-front-note.left {
    right: auto;
    text-align: left;
}

/*fin flip*/


/* === HERO plein écran, scoped à la section Divi (#bn-hero-section) === */

/* 0) Section & Row sans contraintes Divi */
#bn-hero-section {
    padding: 0 !important;
}

#bn-hero-section .et_pb_row {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

#bn-hero-section .et_pb_column,
#bn-hero-section .et_pb_module {
    margin: 0 !important;
    padding: 0 !important;
}

/* 1) Bloc hero : full-bleed + 100% hauteur écran */
#bn-hero-section .bn-hero {
    position: relative;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    /* sort du conteneur pour pleine largeur */
    margin-right: calc(50% - 50vw) !important;
    height: 100svh;
    /* plein écran */
    overflow: hidden;
}

/* 2) Fond SVG qui remplit tout (avec preserveAspectRatio="xMidYMid slice" dans le HTML) */
#bn-hero-section .bn-hero .bn-bg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* 3) Titres CENTRÉS au milieu */
#bn-hero-section .bn-hero .bn-headings {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -40%);
    text-align: center;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    max-width: min(90vw, 1100px);
    padding: 0 2vw;
}

#bn-hero-section .bn-hero .bn-title {
    margin: 0 0 .3em;
    font-weight: 700;
    font-size: clamp(28px, 5vw, 72px);
    line-height: 1.05;
    color: #fff;
    text-shadow: 0.08em 0.08em 0.08em rgba(0,0,0,0.4);
}

#bn-hero-section .bn-hero .bn-subtitle {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 25px);
    line-height: 1.3;
    margin: 0 0 .5em;
}

/* 4) Liens en bas, centrés */
#bn-hero-section .bn-hero .bn-links {
    position: absolute;
    left: 0;
    right: 0;
    bottom: max(120px, calc(env(safe-area-inset-bottom) + 24px));
    display: grid;
    grid-auto-flow: column;
    gap: clamp(10px, 1.6vw, 22px);
    justify-content: center;
    padding: 0 clamp(12px, 2vw, 24px);
    z-index: 2;
}

#bn-hero-section .bn-hero .bn-link {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .6em 1em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #111;
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    transition: transform .15s, box-shadow .15s, background .15s;
}

#bn-hero-section .bn-hero .bn-link:hover,
#bn-hero-section .bn-hero .bn-link:focus {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .20);
    outline: none;
}

/* 5) Flèche scroll */
#bn-hero-section .bn-hero .bn-scroll {
    position: absolute;
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-size: 22px;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

#bn-hero-section .bn-hero .bn-scroll:hover {
    transform: translateX(-50%) translateY(-1px);
}

/* 6) Responsive : empiler les liens si l’espace manque */
@media (max-width: 900px) {
    #bn-hero-section .bn-hero .bn-links {
        grid-auto-flow: row;
        justify-content: center;
    }
}

/* Fondu doux de l’image de preview */
#bn-hero-section .bn-hero #bg-preview {
    opacity: 0;
    transition: opacity .28s ease-in-out;
    /* ajuste la durée si tu veux */
    will-change: opacity;
}

/* RESET global de l’ancienne flèche — SANS transform */
#bn-hero-section .bn-hero .bn-scroll {
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* NE PAS remettre transform ici */
}

#bn-hero-section .bn-hero .bn-scroll.bn-scroll--br {
    position: absolute !important;
    right: max(24px, env(safe-area-inset-right)) !important;
    bottom: clamp(56px, 6vh, 96px) !important;
    transform: none;
    /* pas de !important ici */
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #111;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    z-index: 9999;
    animation: bn-bob 2.4s ease-in-out infinite;
    /* anim continue */
    will-change: transform;
    transition: opacity .25s, box-shadow .25s, transform .25s;
    opacity: .94;
}

@keyframes bn-bob {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    100% {
        transform: translateY(0)
    }
}

#bn-hero-section .bn-hero .bn-scroll.bn-scroll--br:hover {
    transform: translateY(-3px);
    opacity: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/*couleur ombre porté partenaires accueil*/
body .sigmund_hover_effect .et_pb_portfolio_item.type-project::after,
body .sigmund_hover_effect .et_pb_team_member::after,
body .sigmund_hover_effect .et_pb_blurb::after {
  box-shadow: inset 0 0 0 6px #4aa3ff !important;
}