/* ============================================================================
   FRANCK PAGE HEADING
   Bandeau de page SEO : H1 + H2 dans le source HTML.
   Image de fond absolue avec overlay, densités, responsive.
   Préfixes :
     - BEM  : fph-
     - CSS  : --fph-*
   ============================================================================ */

/* =====================  VARIABLES PAR DÉFAUT (fallbacks thème)  ================ */
.fph-wrapper {
    /* Density inner */
    --fph-inner-max: 86%;
    --fph-density-width: 86%;
    --fph-density-max: 1320px;
    --fph-content-padding-x: 0px;

    /* Image de fond */
    --fph-object-fit: cover;
    --fph-pos-x: 50%;
    --fph-pos-y: 50%;

    /* Overlay */
    --fph-overlay-color:   #000000;
    --fph-overlay-opacity: 0;

    /* Typographie */
    --fph-title-color:    var(--theme-section-title-color,    var(--maurin-primary, #2a6d47));
    --fph-subtitle-color: var(--theme-section-subtitle-color, var(--maurin-text,    #212221));
    --fph-title-size:     var(--theme-h1-size,    var(--theme-title-size,    42px));
    --fph-subtitle-size:  var(--theme-h2-size,    var(--theme-subtitle-size, 24px));
    --fph-text-align:     var(--theme-title-align, left);
}

/* =====================  WRAPPER  ===================== */
.fph-wrapper,
.fph-wrapper * {
    box-sizing: border-box;
}

.fph-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--maurin-font-primary, 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    color: var(--maurin-text, #212221);
}

/* Full width : sort du container parent */
.fph-wrapper--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Container simulation in builder / front — aligné sur franck-cards-static */
.fph-wrapper--container > .container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}
@media (max-width: 1399.98px) { .fph-wrapper--container > .container { max-width: 1140px; } }
@media (max-width: 1199.98px) { .fph-wrapper--container > .container { max-width: 960px; } }
@media (max-width: 991.98px)  { .fph-wrapper--container > .container { max-width: 720px; } }
@media (max-width: 767.98px)  { .fph-wrapper--container > .container { max-width: 540px; } }
@media (max-width: 575.98px)  { .fph-wrapper--container > .container { max-width: 100%; } }

/* =====================  SECTION  ===================== */
.fph-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* =====================  IMAGE DE FOND  ===================== */
.fph-bg-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

.fph-bg-media picture {
    display: block;
    width:  100%;
    height: 100%;
}

.fph-bg-media img,
.fph-bg-media picture img {
    display: block;
    width:  100%;
    height: 100%;
    object-fit:      var(--fph-object-fit, cover);
    object-position: var(--fph-pos-x, 50%) var(--fph-pos-y, 50%);
}

/* =====================  OVERLAY  ===================== */
.fph-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:     var(--fph-overlay-color, #000000);
    opacity:        var(--fph-overlay-opacity, 0);
    pointer-events: none;
    border-radius: inherit;
}

/* =====================  INNER (densité)  ===================== */
.fph-inner {
    position:     relative;
    z-index:      2;
    width:        var(--fph-density-width, 86%);
    max-width:    var(--fph-density-max, 1320px);
    margin:       0 auto;
    padding-left: var(--fph-content-padding-x, 0);
    padding-right: var(--fph-content-padding-x, 0);
    box-sizing:   border-box;
}

.fph-section--compact .fph-inner,
.fph-wrapper--compact .fph-inner { max-width: 1140px; }

.fph-section--normal .fph-inner,
.fph-wrapper--normal .fph-inner { max-width: 1320px; }

.fph-section--large .fph-inner,
.fph-wrapper--large .fph-inner { max-width: none; }

.fph-section--xxl .fph-inner,
.fph-wrapper--xxl .fph-inner { max-width: none; width: 100%; }

/* =====================  TITRES  ===================== */
.fph-title {
    font-family:  var(--maurin-font-primary, 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size:    var(--fph-title-size,    42px);
    font-weight:  700;
    color:        var(--fph-title-color,   var(--theme-section-title-color, #2a6d47));
    text-align:   var(--fph-text-align,    left);
    line-height:  1.15;
    margin:       0 0 0.3em 0;
    padding:      0;
}

.fph-subtitle {
    font-family:  var(--maurin-font-secondary, 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size:    var(--fph-subtitle-size,  24px);
    font-weight:  400;
    color:        var(--fph-subtitle-color, var(--theme-section-subtitle-color, #212221));
    text-align:   var(--fph-text-align,     left);
    line-height:  1.35;
    margin:       0;
    padding:      0;
}

/* =====================  PREVIEW BUILDER  ===================== */
.fph-preview-container {
    width: 100%;
    max-width: 1760px;        /* 1320 / 0.75 — Bootstrap container-xxl scalé */
    margin: 0 auto;
    padding: 0 16px;          /* 12 / 0.75 */
    box-sizing: border-box;
}

@media (max-width: 1399.98px) { .fph-preview-container { max-width: 1520px; } }
@media (max-width: 1199.98px) { .fph-preview-container { max-width: 1280px; } }
@media (max-width: 991.98px)  { .fph-preview-container { max-width: 960px;  } }
@media (max-width: 767.98px)  { .fph-preview-container { max-width: 720px;  } }
@media (max-width: 575.98px)  { .fph-preview-container { max-width: 100%;   } }

.fph-scale-outer .fph-wrapper--full,
.is-builder-preview .fph-wrapper--full {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
}

.fph-scale-outer {
    overflow: hidden;
}

/* =====================  RESPONSIVE (aligné sur franck-cards-static)  ===================== */
@media (max-width: 768px) {
    .fph-wrapper--container > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .fph-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }

    .fph-title {
        font-size: clamp(24px, 6vw, calc(var(--fph-title-size, 42px) * 0.8)) !important;
    }

    .fph-subtitle {
        font-size: clamp(15px, 4vw, calc(var(--fph-subtitle-size, 24px) * 0.9)) !important;
    }
}