/**
 * Communs aux CPT — Fiche produit (entête, galerie, réseau, options)
 *
 */

/* =============================================================================
    BACKGROUND DE LA FULL WIDTH
============================================================================= */

body.et-db #et-boc .et-l .et_pb_fullwidth_section,
body.et-db #et-boc .et-l .et_pb_fullwidth_section .et_pb_section {
    background-color: var(--msp-fp-bg-grey);
}

/* =============================================================================
    SECTION ENTÊTE FP (section 1 — fond blanc : texte + slider principal)
============================================================================= */

body.et-db #et-boc .et-l .section_entete_fp {
    padding-bottom: 0;
    --fp-slider-max: 512px;   
}

body.et-db #et-boc .et-l .section_entete_fp .et_pb_row {
    padding-bottom: 0;
}

@media (min-width: 981px) {
    /* La section blanche passe au-dessus du fond gris de la section suivante */
    body.et-db #et-boc .et-l .section_entete_fp {
        position: relative;
        z-index: 2;
        --fp-slider-debord: 3.5rem;  
    }

    body.et-db #et-boc .et-l .et_pb_section.bg-fp {
        position: relative;
        z-index: 1;                    
    }

    body.et-db #page-container #et-boc .et-l .section_entete_fp .et_pb_column:has(h1) p:not(.sur-titre){
        line-height: 1.62em;
    }

    body.et-db #et-boc .et-l .section_entete_fp .et_pb_row {
        display: flex;
        align-items: stretch;
        overflow: visible;
    }

    body.et-db #et-boc .et-l .section_entete_fp .et_pb_column:has(.main-slider) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;   
        overflow: visible;             
    }
}

body.et-db #et-boc .et-l .section_entete_fp .et_pb_column:has(.main-slider) .et_pb_module,
body.et-db #et-boc .et-l .section_entete_fp .et_pb_column:has(.main-slider) .et_pb_code_inner {
    margin-bottom: 0;
    overflow: visible;
}

body.et-db #et-boc .et-l .section_entete_fp hr {
    border-color: var(--msp-grey-base);
}


/* =============================================================================
    SECTION CTA ENTÊTE FP (section 2 — fond gris pleine largeur)
============================================================================= */

/* Le fond gris est porté par la section */
body.et-db #et-boc .et-l .et_pb_section.bg-fp {
    background-color: var(--msp-fp-bg-grey);
}

body.et-db #page-container #et-boc .et-l .cpt-entete-cta .et_pb_module:has(h3) {
    margin-bottom: 1.56rem;
}

body.et-db #et-boc .et-l .cpt-entete-cta h3 {
    font-size: 1.25rem;
    color: var(--msp-red);
}

body.et-db #et-boc .et-l .cpt-entete-cta .et_pb_button_module_wrapper:has(.btn-contact) {
    margin-bottom: 1.125rem;
}

/* Desktop : miniatures centrées verticalement face au bloc CTA */
@media (min-width: 981px) {
    body.et-db #et-boc .et-l .cpt-entete-cta .et_pb_column:has(.thumb-slider) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 2.87rem;
    }

    .et-db #page-container #et-boc .et-l .cpt-entete-cta{
        padding: 2px 0;
        align-items: end;
        display: flex;
    }
}

@media (max-width: 980px) {
    body.et-db #et-boc .et-l .cpt-entete-cta {
        display: flex;
        flex-direction: column-reverse;
    }

    body.et-db #et-boc .et-l .cpt-entete-cta .et_pb_column {
        width: 100%;
    }

    body.et-db #et-boc .et-l .cpt-entete-cta .et_pb_column:not(:has(.thumb-slider)){
        margin-bottom: 0;
    }

    body.et-db #et-boc .et-l .cpt-entete-cta .et_pb_column:has(.thumb-slider){
        padding-bottom: 2rem;
    }
}

/* =============================================================================
    GALLERY
============================================================================= */

/* =============================================================================
    ADMIN BACK-OFFICE
============================================================================= */

/* Conteneur de la galerie dans l'admin */
body.et-db #et-boc .et-l #product-gallery-container {
    display: flex;
    margin-top: 10px;
}

/* Liste des images sélectionnées */
body.et-db #et-boc .et-l .inside #product-gallery-preview {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

/* Vignettes admin */
#product-gallery-preview li {
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #6d7680;
}

#product-gallery-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bouton suppression */
.remove-image {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #fcc400;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}

/* Bouton ajout */
#add-gallery-images {
    margin-top: 15px;
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    background: #161616;
    color: #fff;
    cursor: pointer;
}

#add-gallery-images:hover {
    background: #fcc400;
}

/* =============================================================================
    FRONT-END — BASE (toutes galeries)
============================================================================= */

.galerie-container {
    width: 100%;
    margin: auto;
}

/* ---------- BOUTONS ET PAGINATION ---------- */

.galerie-button-next,
.galerie-button-prev {
    color: #161616;
    border: none;
    background: none;
}

.galerie-button-next:hover,
.galerie-button-prev:hover {
    color: #fcc400;
}

.galerie-pagination-bullet {
    background: #6d7680;
    opacity: 0.5;
}

.galerie-pagination-bullet-active {
    background: #fcc400;
    opacity: 1;
}

/* Slider principal générique */
.main-slider {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 2.875rem !important;
}

.main-slider .galerie-wrapper {
    height: 100%;
}

.main-slider .galerie-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.main-slider .galerie-slide div{
    height: 100%;
}

.main-slider .galerie-slide.is-active {
    display: block;
}

.main-slider .galerie-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Miniatures */
.thumb-slider {
    height: 100px;
    margin-top: 15px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

body.js-gallery-ready .thumb-slider {
    opacity: 1 !important;
    display: flex;
    justify-content: center;
    align-items: end;
}

.thumb-slider .galerie-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.thumb-slider .galerie-slide {
    flex: 0 0 auto;
    width: 100px;
}

.thumb-slider .galerie-slide.thumb-item {
    border-radius: inherit;
}

.thumb-slider .galerie-slide.thumb-item:hover {
    border-color: var(--msp-black);
}

.thumb-slider .galerie-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    aspect-ratio: 1 / 1;
}

.et-db #page-container #et-boc .et-l .thumb-item.active,
.thumb-slider .galerie-slide-thumb-active {
    max-width: 91px;
    border: 2px solid var(--msp-black);
    border-color: var(--msp-black);
    opacity: 1;
}

.et-db #page-container #et-boc .et-l .thumb-item {
    max-width: 91px;
}

@media (max-width: 550px) {
    .thumb-slider .galerie-slide {
        flex: auto;
    }
}

/* =============================================================================
    FRONT-END — ENTÊTE FP : SLIDER PRINCIPAL
============================================================================= */

/*
 * Cadre carré, centré dans la colonne.
 * Le margin-bottom négatif fait déborder l'image sur la section grise
 * SANS agrandir la section blanche. La variable vaut 0 hors desktop,
 * donc aucun débordement quand les colonnes s'empilent.
 */
.et-db #page-container #et-boc .et-l
.section_entete_fp .galerie-container.main-slider {
    display: block;
    width: 100%;
    max-width: var(--fp-slider-max, 100%);
    margin-inline: auto;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: calc(-1 * var(--fp-slider-debord, 0px)) !important;
    overflow: hidden;
    background-color: #fff;
}

.single-modules_comp
.section_entete_fp
.galerie-container.main-slider {
    background-color: transparent;
}

.et-db #page-container #et-boc .et-l
.section_entete_fp .main-slider .galerie-wrapper {
    width: 100%;
    height: 100%;
}

.et-db #page-container #et-boc .et-l
.section_entete_fp .main-slider .galerie-slide {
    width: 100%;
    height: 100%;
}

/*
 * L'image remplit le cadre carré, recadrage centré.
 */
.et-db #page-container #et-boc .et-l
.section_entete_fp .main-slider .galerie-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-position: center;
    object-fit: cover !important;
}


/* =============================================================================
    FRONT-END — ENTÊTE FP : MINIATURES
============================================================================= */

.cpt-entete-cta .thumb-slider {
    margin-top: 0;
    opacity: 1 !important;
}

.et-db #page-container #et-boc .et-l
.cpt-entete-cta .thumb-slider .galerie-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
}

.cpt-entete-cta .galerie-slide.thumb-item {
    display: block;
    cursor: pointer;
}

@media (max-width: 550px) {
    .et-db #page-container #et-boc .et-l
    .cpt-entete-cta .thumb-slider .galerie-wrapper {
        justify-content: flex-start;
    }
}

/* =============================================================================
    SECTION Metabox - Onglet 1 (!!!!!! -- changeent de nom d'onglet => changement de classe CSS -- !!!!!!)
============================================================================= */
.et-db #page-container #et-boc .et-l .et_pb_section:has(.my-repeater-table--onglet-1) .et_pb_row{
    padding: 0;
}

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-1 :is(.repeater-content, .repeater-label){
    color: var(--msp-white);
}

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-1 .repeater-label{
    font-size: 1rem;
    line-height: 1.312em;
    letter-spacing: 0.15em;
    font-weight: 100;
}

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-1{
    display: flex;
    justify-content: space-between;
    max-width: 1140px;
    flex-wrap: wrap;
    gap: 2rem;
}

/* =============================================================================
    SECTION Metabox - Onglet 2 (!!!!!! -- changeent de nom d'onglet => changement de classe CSS -- !!!!!!)
============================================================================= */

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-2{
    display: flex;
    flex-wrap: wrap;
    gap: 1.187rem;
}

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-2 .repeater-label{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.312rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--msp-red);
    line-height: 1.312em;
}

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-2 .repeater-label::before{
    content: '';
    position: relative;
    background-color: var(--msp-red);
    width: 5px;
    height: 5px;
    display: block;
}

.et-db #page-container #et-boc .et-l .my-repeater-table--onglet-2 .repeater-content{
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.187em;
}

/* ------------------------------------------------------ */
/* SECTION Metabox - Override pour SINGLE PACKS           */
/* ------------------------------------------------------ */
.et-db.single-pack #page-container #et-boc .et-l .et_pb_module:not(.et_pb_fullwidth_code):has(.my-repeater-table){
    margin-top: 2.437rem;
    padding-bottom: 34px;
}

.et-db.single-pack #page-container #et-boc .et-l .my-repeater-table {
    max-width: 827px;
}

.et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-item{
    position: relative;
}

.et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-item:not(:last-child)::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 61px;
    background-color: var(--msp-grey-base);
    top: 0;
    right: -30%;
}

.et-db.single-pack #page-container #et-boc .et-l .my-repeater-table :is(.repeater-content, .repeater-label){
    color: var(--msp-black);
}

.et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-label{
    font-size: 1.5rem;
    line-height: 1.08em;
    text-transform: capitalize;
    font-weight: bold;
    letter-spacing: normal;
}

.et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-content{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625em;
}

@media(max-width: 950px){
    .et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-item:not(:last-child)::after{
        position: absolute;
        content: "";
        width: 1px;
        height: 61px;
        background-color: var(--msp-grey-base);
        top: 0;
        right: -12%;
    }
}

@media(max-width: 825px){
    .et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-item:not(:last-child)::after{
        display: none;
    }
    .et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-item:not(:last-child){
        padding-right: 10%;
        border-right: 1px solid var(--msp-grey-base);
    }
}

@media(max-width: 700px){
    .et-db.single-pack #page-container #et-boc .et-l .my-repeater-table .repeater-item:not(:last-child){
        border: none;
    }
}


/* =============================================================================
    SECTION LES OPTIONS
============================================================================= */

.et-db.single #page-container #et-boc .et-l .et_pb_section .et_pb_section:has(.options),
.et-db #page-container #et-boc .et-l .et_pb_section:has(.options) {
    background-color: var(--msp-white);
}

.et-db #page-container #et-boc .et-l .options {
    --options-image-ratio: 4 / 3;
    --options-gap: clamp(1.25rem, 2.5vw, 2.6rem);
}

/* Grille */
.et-db #page-container #et-boc .et-l .options .et_pb_gallery_items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--options-gap);
}

/* Carte */
.et-db #page-container #et-boc .et-l .options .et_pb_gallery_item {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: var(--light-grey);
}

/* Conteneur de l'image */
.et-db #page-container #et-boc .et-l .options .et_pb_gallery_image {
    aspect-ratio: var(--options-image-ratio);
    overflow: hidden;
    background-color: #fff;
}

/* Image */
.et-db #page-container #et-boc .et-l .options .et_pb_gallery_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Titre */
.et-db #page-container #et-boc .et-l .options .et_pb_gallery_title {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-height: 3.75rem;
    margin: 0;
    padding: 0.5625rem 0.75rem;
    border-top: 2px solid var(--msp-red);
    background-color: var(--light-grey);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3125;
}

/* Masquage de la légende */
.et-db #page-container #et-boc .et-l .options .et_pb_gallery_caption {
    display: none;
}

.mfp-gallery .mfp-bottom-bar{
    display: block;
}

.mfp-gallery .mfp-bottom-bar .mfp-counter{
    display: none;
}

.mfp-gallery .mfp-bottom-bar .mfp-title{
    padding-top: 1rem;
} 

@media (max-width: 1100px) {
    .et-db #page-container #et-boc .et-l .options .et_pb_gallery_items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .et-db #page-container #et-boc .et-l .options .et_pb_gallery_items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .et-db #page-container #et-boc .et-l .options .et_pb_gallery_items {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
    SECTION LE MOT DU CLIENT
============================================================================= */
.et-db #page-container #et-boc .et-l .client-word{
    --icon-left: url("../images/double-quote-sans-left.svg");
    --icon-right: url("../images/double-quote-sans-right.svg");
    --icon-left-position: left 2.5rem center;
    --icon-right-position: right 2.5rem center;
}

.et-db #page-container #et-boc .et-l .client-word::before,
.et-db #page-container #et-boc .et-l .client-word::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-repeat: no-repeat;
    mix-blend-mode: color-dodge;
}

.et-db #page-container #et-boc .et-l .client-word::before{
    background-image: var(--icon-left);
    background-position: var( --icon-left-position);
}

.et-db #page-container #et-boc .et-l .client-word::after{
    background-image: var(--icon-right);
    background-position: var( --icon-right-position);
}

.et-db #page-container #et-boc .et-l .client-word h2::after{
    border-color: var(--msp-white);
}

.et-db #page-container #et-boc .et-l .client-word .mot-client{
    margin-bottom: 20px;
}

.et-db #page-container #et-boc .et-l .client-word .id-client p{
    text-align: end;
    font-weight: bold;
    font-size: 1.25rem;
}

@media(max-width: 980px){
    .et-db #page-container #et-boc .et-l .client-word::before{
        display: none;
    }
    .et-db #page-container #et-boc .et-l .client-word::after{
        --icon-right-position: right 2.5rem top 2.5rem;
        background-size: 12%;
    }
}

.et-db #page-container #et-boc .et-l .et_pb_section .row-pack{
    display: flex;
    align-items: stretch;
}

.et-db #page-container #et-boc .et-l .et_pb_section .row-pack .et_pb_column:has(h1){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.et-db #page-container #et-boc .et-l .et_pb_section .row-pack .et_pb_column h1 + p{
    padding-bottom: 3.25rem;
    padding-top: 0.8125rem;
}

.et-db #page-container #et-boc .et-l .et_pb_section .row-pack .thumb-slider{
    height: auto;
}

.et-db #page-container #et-boc .et-l .et_pb_section .row-pack .thumb-slider .galerie-wrapper{
    justify-content: center;
}

@media(max-width: 1100px){
    .et-db #page-container #et-boc .et-l .et_pb_section .row-pack{
        flex-direction: column;
        gap: 2rem;
    }
    .et-db #page-container #et-boc .et-l .et_pb_section .row-pack .et_pb_column:has(h1){
        width: 100%;
    }
}