/* ============================================================
   Progenia Slider — Front-end styles  v7
   ============================================================ */

/* ------ Base conteneur ------ */
.ps-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

/* ------ Background animé zoom-out (Main) ------ */
.ps-slider__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(3.12);
    animation: ps-zoom-out 6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform;
}
@keyframes ps-zoom-out {
    from { transform: scale(3.12); }
    to   { transform: scale(1.00); }
}

/* ------ Logo wrap (main/single) ------ */
.ps-slider__logo-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(200px);
    transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1),
                transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.ps-slider__logo-wrap.ps-logo--visible {
    opacity: 1;
    transform: translateY(0px);
}

a.ps-slider {
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.ps-slider__logo {
    max-width: 40%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    opacity: 0.1;
    filter: blur(1px) grayscale(100%);
    will-change: opacity, filter;
}

/* ============================================================
   TYPE 1 — Main Slider
   ============================================================ */
.ps-slider--main { height: 25vw; min-height: 140px; }
.ps-slider--main .ps-slider__logo { margin-left: 27%; }

/* ============================================================
   TYPE 3 — Single Slider
   ============================================================ */
.ps-slider--single {
    min-height: 140px;
    padding-top: 25%;
	height: 25vw;
}
.ps-slider--single .ps-slider__logo-wrap {
    opacity: 1;
    transform: none;
    transition: none;
}
.ps-slider--single .ps-slider__logo {
    width: auto;
    max-width: 50%;
    max-height: 80%;
    margin: 0;
    opacity: 1;
}

/* ============================================================
   TYPE 2 — Internal Slider
   Layout vertical :
     [zone logo blanche]
     [zone principale : fond + fleurs + contenu]
     [zone basse blanche]

   Chaque zone a une ligne verticale alignée à droite (≈ 62% du bord droit)
   ============================================================ */

.ps-slider--internal {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: visible; /* les fleurs peuvent déborder */
}

/* ── Variable partagée : position de la ligne verticale ── */
.ps-slider--internal {
    --ps-vline-right: -15%; /* distance depuis la droite */
    --ps-border-color: rgb(0, 81, 80);
    --ps-border-h: 20px;
    --ps-vline-w: 1.5px;
    --ps-vline-color: #1a1a1a;
}

/* ──────────────────────────────────────────────
   ZONE HAUTE — Logo + ligne verticale
────────────────────────────────────────────── */
.ps-int__logo-zone {
    position: relative;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2em 0;
    box-sizing: border-box;
    min-height: 171px;
}

.ps-int__logo {
    max-width: 100%;
    max-height: 100px;
	/* max-height:160px; */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    /* Centré dans la moitié gauche (avant la ligne) */
    margin-right: var(--ps-vline-right);
}

.ps-int__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-right: var(--ps-vline-right);
}
/* .ps-int__logo-link .ps-int__logo { */
    /* margin-right: 0; */
/* } */

/* Ligne verticale commune (zone haute et zone basse) */
.ps-int__vertical-line {
    position: absolute;
    right: var(--ps-vline-right);
    top: 0;
    bottom: 0;
    width: var(--ps-vline-w);
    background-color: var(--ps-vline-color);
    pointer-events: none;
}

/* ──────────────────────────────────────────────
   ZONE PRINCIPALE
────────────────────────────────────────────── */
.ps-int__main {
    position: relative;
    width: 100%;
    height: 25vw;
    min-height: 160px;
    overflow: hidden;
    background: #dde5e0; /* fallback */
}

/* Fond (image ou couleur) */
.ps-int__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Fond shortcode : couvre toute la zone principale comme une image */
.ps-int__bg--shortcode {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    display: block;
}
.ps-int__bg--shortcode img,
.ps-int__bg--shortcode figure,
.ps-int__bg--shortcode figure img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
}
.ps-int__bg--shortcode figure {
    position: absolute;
    inset: 0;
    margin: 0;
}

/* Fleurs SVG */
.ps-int__flower {
    position: absolute;
    pointer-events: none;
    bottom: 0;
    left: 0;
}
/* Fleur ghost : démarre à l'état "éteint", passe au "allumé", revient */
@keyframes ps-flower-ghost {
    0%   { opacity: 0.1;  filter: blur(0.995px) grayscale(99.5%); }
    40%  { opacity: 1;    filter: blur(0px)     grayscale(0%);     }
    60%  { opacity: 1;    filter: blur(0px)     grayscale(0%);     }
    100% { opacity: 0.1;  filter: blur(0.995px) grayscale(99.5%); }
}

/* Fleur solid : phase inverse — démarre "allumée", passe à "éteinte", revient */
@keyframes ps-flower-solid {
    0%   { opacity: 1;    filter: blur(0px)     grayscale(0%);     }
    40%  { opacity: 0.1;  filter: blur(0.995px) grayscale(99.5%); }
    60%  { opacity: 0.1;  filter: blur(0.995px) grayscale(99.5%); }
    100% { opacity: 1;    filter: blur(0px)     grayscale(0%);     }
}
/* Fleur fantôme — légèrement décalée vers le haut-droite, derrière */
.ps-int__flower--ghost {
	z-index: 20;
    width: 28%;
    top: -68%;
    left: 9%;
    opacity: 0.105;
    will-change: opacity, filter;
    animation: ps-flower-ghost 10s ease-in-out infinite;
}

/* Grande fleur solide — devant, ancrée bas-gauche, déborde légèrement */
.ps-int__flower--solid {
    z-index: 2;
    width: 32%;
    /* bottom: -4%; */
    /* left: -4%; */
	bottom: -16%;
    left: -1%;
    opacity: 0.105;
    will-change: opacity, filter;
    animation: ps-flower-solid 10s ease-in-out infinite;
}

.ps-int__flower-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Ligne verticale séparatrice dans la zone principale */
.ps-int__divider {
    position: absolute;
    z-index: 3;
    right: var(--ps-vline-right);
    top: 0;
    bottom: 0;
    width: var(--ps-vline-w);
    pointer-events: none;
}

/* Zone de contenu (droite de la ligne) */
.ps-int__content {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--ps-vline-right);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2%;
    box-sizing: border-box;
}

/* Bordures teal haut/bas */
.ps-int__border {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--ps-border-h);
    z-index: 0;
}
.ps-int__border--top    { top: 0; }
.ps-int__border--bottom { bottom: 0; }

/* ──────────────────────────────────────────────
   ZONE BASSE — fond blanc + ligne verticale
────────────────────────────────────────────── */
.ps-int__bottom-zone {
    position: relative;
    width: 100%;
    background: #ffffff;
    min-height: 70px;
	/* min-height: 0px; */
    box-sizing: border-box;
}

/* ============================================================
   Responsive — Tablet (601–1024px)
   ============================================================ */
@media (min-width: 601px) and (max-width: 1024px) {
    .ps-int__main {
        height: 25vw;
        min-height: 140px;
    }
    /* .ps-int__flower--solid { width: 38%; bottom: -22%; left: -5%; } */
	    .ps-int__flower--solid{ width: 50%; bottom: -5%; left: -14%;}
    /* .ps-int__flower--ghost { width: 24%; bottom: -4%;  left: 6%;  } */
	    .ps-int__flower--ghost { width: 40%; bottom: -52%; left: 10%;}
    .ps-slider--single { padding-top: 25%; }
    .ps-slider--single .ps-slider__logo { max-width: 45%; }
    .ps-int__logo { max-width: 100%; }
}

/* ============================================================
   Responsive — Mobile (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
    .ps-slider--main     { height: 25vw; min-height: 100px; }
    .ps-slider__logo     { max-width: 55% !important; }
    .ps-slider--single   { padding-top: 25%; }
    .ps-slider--single .ps-slider__logo { max-width: 60%; max-height: 75%; }

    .ps-int__main {
        height: 40vw;
        min-height: 100px;
    }
    .ps-slider--internal {
        --ps-vline-right: -15%;
    }
    .ps-int__flower--solid { width: 60%; bottom: -28%; left: -25%; }
    /* .ps-int__flower--ghost { width: 38%; bottom: -25%; left: 12%; } */
	.ps-int__flower--ghost {
		width: 50%;
        bottom: -38%;
        left: 1%;
	}
    .ps-int__border { height: 20px; }
    .ps-int__logo   { max-width: 100%; }
    .ps-int__logo-zone { min-height: 55px; padding: 0.8em 0; }
    .ps-int__bottom-zone { min-height: 32px; }
}


/* ─────────────────────────────────────────────────────────────
   [ps_featured_image_with_header] — Combo image + header PDK
───────────────────────────────────────────────────────────── */

/* Le wrapper couvre tout le fond (hérite du contexte ps-int__bg) */
.ps-combo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Image à la une en plein fond */
.ps-combo__bg-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
}

/* Bloc header PDK superposé, positionné en absolu */
.ps-combo__header {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* aligné à droite comme .ps-int__content */
    padding: 0 2em;
    pointer-events: none;
}

/* Le #header_bloc_pdk dans ce contexte reprend ses styles normaux */
.ps-combo__header #header_bloc_pdk {
    pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────
   Mode image_shortcode — ps-int__bg--combo
   Image uploadée par l'admin en fond + shortcode superposé
───────────────────────────────────────────────────────────── */

/* Le wrapper occupe toute la zone principale comme ps-int__bg */
.ps-int__bg--combo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* L'image de fond couvre toute la zone */
.ps-int__bg--combo .ps-combo__bg-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 0;
}

/* Le header PDK est superposé par-dessus l'image */
.ps-int__bg--combo .ps-combo__header {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2em;
    pointer-events: none;
}

.ps-int__bg--combo .ps-combo__header #header_bloc_pdk {
    pointer-events: auto;
}

 header#subheader{
    margin-top: -55px;
    margin-bottom: 10px;
}
#content.full-width {
    z-index: 50;
    position: relative;
}